fix theme not saving

client/packages/lowcoder/src/constants/routesURL.ts

@@ -15,6 +15,7 @@ export const ORGANIZATION_SETTING = "/setting/organization";
 export const THEME_SETTING = "/setting/theme";
 export const PLUGINS_SETTING = "/setting/plugins";
 export const THEME_DETAIL = "/setting/theme/detail";
+export const THEME_DETAIL_URL = `${THEME_DETAIL}/:themeId`;
 
 export const OAUTH_PROVIDER_SETTING = "/setting/oauth-provider";
 export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -87,50 +87,55 @@ type ThemeDetailPageProps = {
   themeList?: ThemeType[];
   orgId: string;
   location: Location & { state: LocationProp };
+  match: any;
 };
 
 type ThemeDetailPageState = {
-  name: string;
-  theme: ThemeDetail;
+  name?: string;
+  theme?: ThemeDetail;
   canLeave: boolean;
   compDsl?: JSONObject;
 };
 
 class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
-  themeDefault: ThemeDetail;
+  themeDefault?: ThemeDetail;
   readonly id: string;
-  readonly type: string;
+  // readonly type: string;
   readonly inputRef: React.RefObject<InputRef>;
   footerRef = React.createRef<HTMLDivElement>();
 
   constructor(props: ThemeDetailPageProps) {
     super(props);
-    const { name, id, theme, type } = props.location.state || {};
-    if (!name || !id || !theme || !type) {
-      history.replace(BASE_URL);
-      window.location.reload();
-    }
-
-    if (theme.chart) {
-      this.themeDefault = theme;
-    } else {
-      this.themeDefault = {
-        ...theme,
-        chart: undefined,
-      };
-    }
+    this.id = this.props.match.params.themeId;
 
-    this.id = id;
-    this.type = type;
     this.state = {
-      theme,
-      name,
       canLeave: false,
       compDsl: undefined,
     };
     this.inputRef = React.createRef();
   }
 
+  findCurrentTheme() {
+    const themeDetail = this.props.themeList?.find(item => item.id === this.id);
+    this.setState({
+      name: themeDetail?.name,
+      theme: themeDetail?.theme,
+    });
+    this.themeDefault = themeDetail?.theme;
+  }
+
+  componentDidMount() {
+    if(this.props.themeList?.length) {
+      this.findCurrentTheme();
+    }
+  }
+
+  componentDidUpdate(prevProps: ThemeDetailPageProps, prevState: ThemeDetailPageState) {
+    if (prevProps.themeList?.length !== this.props.themeList?.length) {
+      this.findCurrentTheme();
+    }
+  }
+
   handleReset() {
     this.setState({ theme: this.themeDefault });
   }
@@ -164,6 +169,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
   }
 
   configChange(params: configChangeParams) {
+    if (!this.state.theme) return;
+
     this.setState({
       theme: {
         ...this.state.theme,
@@ -194,25 +201,25 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             settingsKey: 'primary',
             name: trans('themeDetail.primary'),
             desc: trans('themeDetail.primaryDesc'),
-            color: this.state.theme.primary,
+            color: this.state.theme?.primary,
           },
           {
             settingsKey: 'canvas',
             name: trans('themeDetail.canvas'),
             desc: trans('themeDetail.canvasDesc'),
-            color: this.state.theme.canvas,
+            color: this.state.theme?.canvas,
           },
           {
             settingsKey: 'primarySurface',
             name: trans('themeDetail.primarySurface'),
             desc: trans('themeDetail.primarySurfaceDesc'),
-            color: this.state.theme.primarySurface,
+            color: this.state.theme?.primarySurface,
           },
           {
             settingsKey: 'border',
             name: trans('themeDetail.borderColor'),
             desc: trans('themeDetail.borderColorDesc'),
-            color: this.state.theme.border || this.state.theme.borderColor,
+            color: this.state.theme?.border || this.state.theme?.borderColor,
           }
         ]
       },
@@ -224,13 +231,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             settingsKey: 'textLight',
             name: trans('themeDetail.textLight'),
             desc: trans('themeDetail.textLightDesc'),
-            color: this.state.theme.textLight,
+            color: this.state.theme?.textLight,
           },
           {
             settingsKey: 'textDark',
             name: trans('themeDetail.textDark'),
             desc: trans('themeDetail.textDarkDesc'),
-            color: this.state.theme.textDark,
+            color: this.state.theme?.textDark,
           }
         ]
       }
@@ -245,7 +252,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.fontFamily'),
             desc: trans('themeDetail.fontFamilyDesc'),
             type: "fontFamily",
-            value: this.state.theme.fontFamily,
+            value: this.state.theme?.fontFamily,
           }
         ]
       },
@@ -260,21 +267,21 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.borderRadius'),
             desc: trans('themeDetail.borderRadiusDesc'),
             type: "radius",
-            value: this.state.theme.radius || this.state.theme.borderRadius,
+            value: this.state.theme?.radius || this.state.theme?.borderRadius,
           },
           {
             settingsKey: 'borderWidth',
             name: trans('themeDetail.borderWidth'),
             desc: trans('themeDetail.borderWidthDesc'),
             type: "borderWidth",
-            value: this.state.theme.borderWidth,
+            value: this.state.theme?.borderWidth,
           },
           {
             settingsKey: 'borderStyle',
             name: trans('themeDetail.borderStyle'),
             desc: trans('themeDetail.borderStyleDesc'),
             type: "borderStyle",
-            value: this.state.theme.borderStyle,
+            value: this.state.theme?.borderStyle,
           }
         ]
       },
@@ -286,26 +293,39 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.margin'),
             desc: trans('themeDetail.marginDesc'),
             type: "margin",
-            value: this.state.theme.margin,
+            value: this.state.theme?.margin,
           },
           {
             settingsKey: 'padding',
             name: trans('themeDetail.padding'),
             desc: trans('themeDetail.paddingDesc'),
             type: "padding",
-            value: this.state.theme.padding,
+            value: this.state.theme?.padding,
           },
           {
             settingsKey: 'gridColumns',
             name: trans('themeDetail.gridColumns'),
             desc: trans('themeDetail.gridColumnsDesc'),
             type: "gridColumns",
-            value: this.state.theme.gridColumns,
+            value: this.state.theme?.gridColumns,
           }
         ]
       },
     ];
 
+    if (!this.themeDefault) {
+      return (
+        <Flex align="center" justify="center" vertical style={{
+          height: '300px',
+          width: '400px',
+          margin: '0 auto',
+        }}>
+          <h4>Oops! Theme not found.</h4>
+          <button onClick={() => history.push(THEME_SETTING)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Back to Themes</button>
+        </Flex>
+      )
+    }
+
     return (
       <>
         <Prompt
@@ -363,7 +383,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                             </List.Item>
                         )}
                         {item.items.map((colorItem) => (
-                          <Tooltip title={colorItem.desc} placement="right">
+                          <Tooltip key={colorItem.settingsKey} title={colorItem.desc} placement="right">
                             <List.Item key={colorItem.settingsKey}>
                               <ThemeSettingsSelector
                                 themeSettingKey={colorItem.settingsKey}
@@ -381,7 +401,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     )}
                   />
                   <Divider type="vertical" style={{height: "610px"}}/>
-                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
                 </Flex>
               </Card>
             </ThemeSettingsView>
@@ -403,7 +423,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                             </List.Item>
                         )}
                         {item.items.map((layoutSettingsItem) => (
-                          <Tooltip title={layoutSettingsItem.desc} placement="right">
+                          <Tooltip key={layoutSettingsItem.settingsKey} title={layoutSettingsItem.desc} placement="right">
                             <List.Item key={layoutSettingsItem.settingsKey}>
                               {layoutSettingsItem.type == "fontFamily" && 
                                 <ThemeSettingsSelector
@@ -425,7 +445,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     )}
                   />
                   <Divider type="vertical" style={{height: "610px"}}/>
-                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
                 </Flex>
               </Card>
             </ThemeSettingsView>
@@ -447,7 +467,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                             </List.Item>
                         )}
                         {item.items.map((layoutSettingsItem) => (
-                          <Tooltip title={layoutSettingsItem.desc} placement="right">
+                          <Tooltip key={layoutSettingsItem.settingsKey} title={layoutSettingsItem.desc} placement="right">
                             <List.Item key={layoutSettingsItem.settingsKey}>
                               {layoutSettingsItem.type == "radius" && 
                                 <ThemeSettingsSelector
@@ -516,7 +536,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     )}
                   />
                   <Divider type="vertical" style={{height: "610px"}}/>
-                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
                 </Flex>
               </Card>
             </ThemeSettingsView>
@@ -534,18 +554,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     styleKey: string,
                     compStyle: Record<string, string>
                   ) => {
-                    this.setState({
-                      theme: {
-                        ...this.state.theme,
-                        components: {
-                          ...this.state.theme.components,
-                          [compName]: {
-                            ...this.state.theme.components?.[compName],
-                            [styleKey]: compStyle,
+                    if (this.state.theme) {
+                      this.setState({
+                        theme: {
+                          ...this.state.theme,
+                          components: {
+                            ...this.state.theme.components,
+                            [compName]: {
+                              ...this.state.theme.components?.[compName],
+                              [styleKey]: compStyle,
+                            }
                           }
-                        }
-                      },
-                    });
+                        },
+                      });
+                    }
                   }}
                 />
               </Card>
@@ -571,7 +593,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     </List.Item>
                     <List.Item style={{width : "260px", height: "370px", padding:"10px"}}>
                       <CodeEditor
-                        value={this.state.theme.chart || ""}
+                        value={this.state.theme?.chart || ""}
                         onChange={(value) => this.configChange({
                           themeSettingKey: "chart",
                           chart: value.doc.toString() ? value.doc.toString() : undefined,
@@ -585,7 +607,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                     </List>
                   </ChartInput>
                   <Divider type="vertical" style={{height: "370px"}}/>
-                  <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
+                  <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme!} dsl={chartDsl} />
                 </Flex>
               </Card>
             </ThemeSettingsView>

client/packages/lowcoder/src/pages/setting/theme/index.tsx

@@ -1,13 +1,25 @@
 import { Route, Switch } from "react-router";
 import ThemePage from "./themePage";
 import ThemeDetailPage from "./detail";
-import { THEME_DETAIL, THEME_SETTING } from "constants/routesURL";
+import { THEME_DETAIL_URL, THEME_SETTING } from "constants/routesURL";
+import { useDispatch, useSelector } from "react-redux";
+import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
+import { useEffect } from "react";
+import { fetchCommonSettings } from "@lowcoder-ee/redux/reduxActions/commonSettingsActions";
 
 export const ThemeHome = () => {
+  const dispatch = useDispatch();
+  const user = useSelector(getUser);
+  const orgId = user.currentOrgId;
+
+  useEffect(() => {
+    dispatch(fetchCommonSettings({ orgId }));
+  }, []);
+
   return (
     <Switch>
       <Route path={THEME_SETTING} component={ThemePage} exact />
-      <Route path={THEME_DETAIL} component={ThemeDetailPage} exact />
+      <Route path={THEME_DETAIL_URL} component={ThemeDetailPage} exact />
     </Switch>
   );
 };

client/packages/lowcoder/src/pages/setting/theme/themePage.tsx

@@ -43,17 +43,6 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
       modalVisible: false,
     };
   }
-  componentDidMount() {
-    if (this.props.orgId) {
-      this.props.fetchCommonSettings(this.props.orgId);
-    }
-  }
-
-  componentDidUpdate(prevProps: ThemeProps, prevState: ThemeState) {
-    if (prevProps.orgId !== this.props.orgId) {
-      this.props.fetchCommonSettings(this.props.orgId);
-    }
-  }
 
   GoDetail(params: ThemeType, themeList: ThemeType[], type: string) {
     this.props.setCommonSettings({
@@ -62,10 +51,9 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
         key: "themeList",
         value: themeList,
       },
-    });
-    history.push({
-      pathname: THEME_DETAIL,
-      state: { ...params, type },
+      onSuccess: () => {
+        history.push(`${THEME_DETAIL}/${params.id}`)
+      },
     });
   }
 
@@ -152,13 +140,7 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
         this.copyTheme(info.themeId);
         break;
       case MENU_TYPE.EDIT:
-        history.push({
-          pathname: THEME_DETAIL,
-          state: {
-            ...this.props.themeList?.find((theme) => theme.id === info.themeId),
-            type: DETAIL_TYPE.EDIT,
-          },
-        });
+        history.push(`${THEME_DETAIL}/${info.themeId}`)
         break;
       case MENU_TYPE.RENAME:
         this.setCommonSettings(