From 3b1f41e59460d86488282c0a95802d5f4a46757f Mon Sep 17 00:00:00 2001
From: petar-cvit <petar.cvitanovic@gmail.com>
Date: Mon, 23 Sep 2024 22:09:58 +0200
Subject: [PATCH] advanced module section

---
 .../components/pages/NewModule/NewModule.tsx  | 83 ++++++++++++-------
 .../src/components/pages/NewModule/custom.css | 17 ++++
 2 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/cyclops-ui/src/components/pages/NewModule/NewModule.tsx b/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
index 8f8e38e1..48b0fa14 100644
--- a/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
+++ b/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
@@ -31,6 +31,7 @@ import {
 } from "../../errors/FormValidationErrors";
 import { mapResponseError } from "../../../utils/api/errors";
 import TemplateFormFields from "../../form/TemplateFormFields";
+import { DownOutlined, UpOutlined } from "@ant-design/icons";
 
 const { Title } = Typography;
 const layout = {
@@ -101,6 +102,8 @@ const NewModule = () => {
     });
   };
 
+  const [advancedOptionsExpanded, setAdvancedOptionsExpanded] = useState(false);
+
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -474,6 +477,10 @@ const NewModule = () => {
     openNotification(errorMessages);
   };
 
+  const toggleExpand = () => {
+    setAdvancedOptionsExpanded(!advancedOptionsExpanded);
+  };
+
   return (
     <div>
       {error.message.length !== 0 && (
@@ -572,7 +579,7 @@ const NewModule = () => {
                 style={{
                   border: "solid 1.5px #c3c3c3",
                   borderRadius: "7px",
-                  padding: "12px",
+                  padding: "0px",
                   width: "100%",
                   backgroundColor: "#fafafa",
                 }}
@@ -588,6 +595,7 @@ const NewModule = () => {
                       </p>
                     </div>
                   }
+                  style={{ padding: "12px 12px 0px 12px" }}
                   rules={[
                     {
                       required: true,
@@ -609,35 +617,54 @@ const NewModule = () => {
                 >
                   <Input />
                 </Form.Item>
-                <Form.Item
-                  name="cyclops_module_namespace"
-                  id="cyclops_module_namespace"
-                  label={
+                <div style={{ display: advancedOptionsExpanded ? "" : "none" }}>
+                  <Divider
+                    style={{ marginTop: "12px", marginBottom: "12px" }}
+                  />
+                  <Form.Item
+                    name="cyclops_module_namespace"
+                    id="cyclops_module_namespace"
+                    label={
+                      <div>
+                        Target namespace
+                        <p style={{ color: "#8b8e91", marginBottom: "0px" }}>
+                          Namespace used to deploy resources to
+                        </p>
+                      </div>
+                    }
+                    style={{ padding: "0px 12px 0px 12px" }}
+                    hasFeedback={true}
+                    validateDebounce={1000}
+                  >
+                    <Select
+                      showSearch={true}
+                      onChange={onTemplateStoreSelected}
+                      style={{ width: "100%" }}
+                      placeholder="default"
+                      value="default"
+                      defaultValue="default"
+                    >
+                      {namespaces.map((namespace: string) => (
+                        <Option key={namespace} value={namespace}>
+                          {namespace}
+                        </Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                </div>
+                <div className={"expandadvanced"} onClick={toggleExpand}>
+                  {advancedOptionsExpanded ? (
                     <div>
-                      Target namespace
-                      <p style={{ color: "#8b8e91", marginBottom: "0px" }}>
-                        Namespace used to deploy resources to
-                      </p>
+                      Advanced
+                      <UpOutlined style={{ paddingLeft: "5px" }} />
                     </div>
-                  }
-                  hasFeedback={true}
-                  validateDebounce={1000}
-                >
-                  <Select
-                    showSearch={true}
-                    onChange={onTemplateStoreSelected}
-                    style={{ width: "100%" }}
-                    placeholder="default"
-                    value="default"
-                    defaultValue="default"
-                  >
-                    {namespaces.map((namespace: string) => (
-                      <Option key={namespace} value={namespace}>
-                        {namespace}
-                      </Option>
-                    ))}
-                  </Select>
-                </Form.Item>
+                  ) : (
+                    <div>
+                      Advanced
+                      <DownOutlined style={{ paddingLeft: "5px" }} />
+                    </div>
+                  )}
+                </div>
               </div>
             </Col>
             <Divider
diff --git a/cyclops-ui/src/components/pages/NewModule/custom.css b/cyclops-ui/src/components/pages/NewModule/custom.css
index b1e656c3..0596d983 100644
--- a/cyclops-ui/src/components/pages/NewModule/custom.css
+++ b/cyclops-ui/src/components/pages/NewModule/custom.css
@@ -26,3 +26,20 @@ code {
     padding: 0;
   }
 }
+
+.expandadvanced {
+  width: 100%;
+  height: 32px;
+  background-color: #eee;
+  border-radius: 0 0 7px 7px;
+  transition: background-color 0.2s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+}
+
+.expandadvanced:hover {
+  background-color: #e0e0e0;
+}