🔥 create module shared component theme (#729)

* extract new module component to a shared component * use effect deps * respect theme palette * refactor use effect * add shared component dark theme * remove dark theme
cyclops-ui · Jan 21, 2025 · 71ca190 · 71ca190
1 parent 8434d87
commit 71ca190
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 22 deletions.
diff --git a/cyclops-ui/package.json b/cyclops-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cyclopsui/cyclops-ui",
-  "version": "0.1.15",
+  "version": "0.1.21",
   "private": false,
   "license": "Apache-2.0",
   "dependencies": {

diff --git a/cyclops-ui/src/components/form/fields/object/custom.css b/cyclops-ui/src/components/form/fields/object/custom.css
@@ -1,3 +1,3 @@
 .nested-fields.dark .ant-collapse-content-box {
-  background-color: #555;
+  background-color: #404040;
 }
diff --git a/cyclops-ui/src/components/pages/EditModule/EditModule.tsx b/cyclops-ui/src/components/pages/EditModule/EditModule.tsx
@@ -24,6 +24,9 @@ const EditModule = () => {
       onUpdateModuleSuccess={(moduleName) => {
         window.location.href = "/modules/" + moduleName;
       }}
+      onBackButton={(moduleName) => {
+        window.location.href = "/modules/" + moduleName;
+      }}
     />
   );
 };

diff --git a/cyclops-ui/src/components/pages/NewModule/NewModule.tsx b/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
@@ -10,16 +10,22 @@ import {
 
 const NewModule = () => {
   return (
-    <CreateModuleComponent
-      getTemplateStore={getTemplateStore}
-      getNamespaces={getNamespaces}
-      getTemplate={getTemplate}
-      getTemplateInitialValues={getTemplateInitialValues}
-      submitModule={createModule}
-      onSubmitModuleSuccess={(moduleName) => {
-        window.location.href = "/modules/" + moduleName;
-      }}
-    />
+    <div>
+      <CreateModuleComponent
+        themePalette={"light"}
+        getTemplateStore={getTemplateStore}
+        getNamespaces={getNamespaces}
+        getTemplate={getTemplate}
+        getTemplateInitialValues={getTemplateInitialValues}
+        submitModule={createModule}
+        onSubmitModuleSuccess={(moduleName) => {
+          window.location.href = "/modules/" + moduleName;
+        }}
+        onBackButton={() => {
+          window.location.href = "/modules";
+        }}
+      />
+    </div>
   );
 };
 export default NewModule;
diff --git a/cyclops-ui/src/components/shared/CreateModule/CreateModule.tsx b/cyclops-ui/src/components/shared/CreateModule/CreateModule.tsx
@@ -76,6 +76,7 @@ export interface CreateModuleProps {
     values: string,
   ) => Promise<any>;
   onSubmitModuleSuccess: (moduleName: string) => void;
+  onBackButton: () => void;
 }
 
 export const CreateModuleComponent = ({
@@ -86,6 +87,7 @@ export const CreateModuleComponent = ({
   getTemplateInitialValues,
   submitModule,
   onSubmitModuleSuccess,
+  onBackButton,
 }: CreateModuleProps) => {
   const [loading, setLoading] = useState(false);
   const [config, setConfig] = useState({
@@ -295,6 +297,7 @@ export const CreateModuleComponent = ({
     if (!loadingTemplate && !loadingTemplateInitialValues) {
       return (
         <TemplateFormFields
+          themePalette={themePalette}
           isModuleEdit={false}
           fields={config.root.properties}
           parentFieldID={[]}
@@ -488,11 +491,14 @@ export const CreateModuleComponent = ({
               <Col style={{ padding: "0px" }} span={16}>
                 <div
                   style={{
-                    border: "solid 1.5px #c3c3c3",
+                    border: themePalette === "light" ? "#c3c3c3" : "#707070",
+                    borderWidth: "1.5px",
+                    borderStyle: "solid",
                     borderRadius: "7px",
                     padding: "0px",
                     width: "100%",
-                    backgroundColor: "#fafafa",
+                    backgroundColor:
+                      themePalette === "light" ? "#fafafa" : "#404040",
                   }}
                 >
                   <Form.Item
@@ -562,7 +568,14 @@ export const CreateModuleComponent = ({
                       </Select>
                     </Form.Item>
                   </div>
-                  <div className={"expandadvanced"} onClick={toggleExpand}>
+                  <div
+                    className={"expandadvanced"}
+                    style={{
+                      backgroundColor:
+                        themePalette === "light" ? "#eee" : "#595959",
+                    }}
+                    onClick={toggleExpand}
+                  >
                     {advancedOptionsExpanded ? (
                       <div>
                         Advanced
@@ -616,7 +629,7 @@ export const CreateModuleComponent = ({
                 </Button>{" "}
                 <Button
                   htmlType="button"
-                  onClick={() => (window.location.href = "/")}
+                  onClick={() => onBackButton()}
                   disabled={loadingTemplate || loadingTemplateInitialValues}
                 >
                   Back

diff --git a/cyclops-ui/src/components/shared/CreateModule/custom.css b/cyclops-ui/src/components/shared/CreateModule/custom.css
@@ -20,7 +20,6 @@ code {
 .expandadvanced {
   width: 100%;
   height: 32px;
-  background-color: #eee;
   border-radius: 0 0 7px 7px;
   transition: background-color 0.2s ease;
   display: flex;
@@ -29,7 +28,3 @@ code {
   text-align: center;
   cursor: pointer;
 }
-
-.expandadvanced:hover {
-  background-color: #e0e0e0;
-}
diff --git a/cyclops-ui/src/components/shared/EditModule/EditModule.tsx b/cyclops-ui/src/components/shared/EditModule/EditModule.tsx
@@ -60,6 +60,7 @@ export interface EditModuleProps {
     values: string,
   ) => Promise<any>;
   onUpdateModuleSuccess: (moduleName: string) => void;
+  onBackButton: (moduleName: string) => void;
 }
 
 export const EditModuleComponent = ({
@@ -70,6 +71,7 @@ export const EditModuleComponent = ({
   getTemplateInitialValues,
   updateModule,
   onUpdateModuleSuccess,
+  onBackButton,
   themeColor,
 }: EditModuleProps) => {
   const [module, setModule] = useState<module>({
@@ -335,7 +337,7 @@ export const EditModuleComponent = ({
           </Button>{" "}
           <Button
             htmlType="button"
-            onClick={() => (window.location.href = "/modules/" + moduleName)}
+            onClick={() => onBackButton(moduleName)}
             disabled={!loadTemplate}
           >
             Back

diff --git a/cyclops-ui/src/components/shared/index.tsx b/cyclops-ui/src/components/shared/index.tsx
@@ -1,3 +1,4 @@
 export { ModuleResourceDetails } from "./ModuleResourceDetails";
 export { EditModuleComponent } from "./EditModule";
+export { CreateModuleComponent } from "./CreateModule";
 export { HelmReleaseDetails } from "./HelmReleaseDetails";
diff --git a/cyclops-ui/src/index.tsx b/cyclops-ui/src/index.tsx
@@ -22,4 +22,5 @@ export {
   ModuleResourceDetails,
   EditModuleComponent,
   HelmReleaseDetails,
+  CreateModuleComponent,
 } from "./components/shared";