From 2b9de40e8924b17c99862af93870c9fff40fe807 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Sat, 21 Jun 2025 00:40:22 +0500
Subject: [PATCH 1/2] Updated navigation app for settings and JS

---
 .../src/comps/comps/appSettingsComp.tsx       | 21 ++++++++++++-------
 .../lowcoder/src/comps/generators/multi.tsx   | 19 +++++++++--------
 .../lowcoder/src/pages/editor/editorView.tsx  | 14 +++++++------
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index 4f240f35f7..a65de0cc0d 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -233,7 +233,11 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
   defaultTheme: string;
 };
 
-function AppGeneralSettingsModal(props: ChildrenInstance) {
+type AppSettingsExtraProps = { isAggregationApp?: boolean };
+type AppGeneralSettingsModalProps = ChildrenInstance & AppSettingsExtraProps;
+type AppCanvasSettingsModalProps = ChildrenInstance & AppSettingsExtraProps;
+
+function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
   const lowcoderCompsMeta = useSelector((state: AppState) => state.npmPlugin.packageMeta['lowcoder-comps']);
   const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
   const {
@@ -243,6 +247,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
     category,
     showHeaderInPublic,
     lowcoderCompVersion,
+    isAggregationApp
   } = props;
   
   useEffect(() => {
@@ -288,7 +293,8 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
           </div>
         </DivStyled>
       </BaseSection>
-      <BaseSection
+      {!isAggregationApp && 
+        <BaseSection
         name={"Lowcoder Comps"}
         width={288}
         noMargin
@@ -319,7 +325,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
             }}
           />
         </DivStyled>
-      </BaseSection>
+      </BaseSection>}
       <BaseSection
         name={"Shortcuts"}
         width={288}
@@ -337,7 +343,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
   );
 }
 
-function AppCanvasSettingsModal(props: ChildrenInstance) {
+function AppCanvasSettingsModal(props: AppCanvasSettingsModalProps) {
   const isPublicApp = useSelector(isPublicApplication);
   const {
     themeList,
@@ -516,13 +522,12 @@ export const AppSettingsComp = new MultiCompBuilder(childrenMap, (props) => {
     maxWidth: Number(props.maxWidth),
   };
 })
-  .setPropertyViewFn((children) => {
+  .setPropertyViewFn((children, extraProps) => {
     const { settingType } = useContext(AppSettingContext);
     const themeList = useSelector(getThemeList) || [];
     const defaultTheme = (useSelector(getDefaultTheme) || "").toString();
-
     return settingType === 'canvas'
-      ? <AppCanvasSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />
-      : <AppGeneralSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />;
+      ? <AppCanvasSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} {...(extraProps || {})} />
+      : <AppGeneralSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} {...(extraProps || {})} />;
   })
   .build();
diff --git a/client/packages/lowcoder/src/comps/generators/multi.tsx b/client/packages/lowcoder/src/comps/generators/multi.tsx
index ff8c914221..7e5bbc575e 100644
--- a/client/packages/lowcoder/src/comps/generators/multi.tsx
+++ b/client/packages/lowcoder/src/comps/generators/multi.tsx
@@ -51,9 +51,10 @@ export type ViewFnTypeForComp<ViewReturn, ChildrenCompMap> = ViewFnType<
   ViewReturn,
   ToViewReturn<ChildrenCompMap>
 >;
-export type PropertyViewFnTypeForComp<ChildrenCompMap> = (
+export type PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps = any> = (
   children: ChildrenCompMap,
-  dispatch: (action: CompAction) => void
+  dispatch: (action: CompAction) => void,
+  extraProps?: ExtraProps
 ) => ReactNode;
 
 export function parseChildrenFromValueAndChildrenMap<
@@ -83,10 +84,10 @@ export function parseChildrenFromValueAndChildrenMap<
  * Building comp this way can use typescript's type inference capabilities.
  * Using ChildrenCompMap as a generic is to retain the information of each class, such as not wanting StringControl to degenerate into Comp<string>
  */
-export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string, Comp<unknown>>> {
+export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string, Comp<unknown>>, ExtraProps = any> {
   private childrenMap: ToConstructor<ChildrenCompMap>;
   private viewFn: ViewFnTypeForComp<ViewReturn, ChildrenCompMap>;
-  private propertyViewFn?: PropertyViewFnTypeForComp<ChildrenCompMap>;
+  private propertyViewFn?: PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps>;
 
   /**
    * If viewFn is not placed in the constructor, the type of ViewReturn cannot be inferred
@@ -99,7 +100,7 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
     this.viewFn = viewFn;
   }
 
-  setPropertyViewFn(propertyViewFn: PropertyViewFnTypeForComp<ChildrenCompMap>) {
+  setPropertyViewFn(propertyViewFn: PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps>) {
     this.propertyViewFn = propertyViewFn;
     return this;
   }
@@ -129,8 +130,8 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
         );
       }
 
-      override getPropertyView(): ReactNode {
-        return <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} />;
+      override getPropertyView(extraProps?: ExtraProps): ReactNode {
+        return <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} extraProps={extraProps} />;
       }
     }
 
@@ -141,12 +142,12 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
 /**
  * Guaranteed to be in a react component, so that react hooks can be used internally
  */
-export function PropertyView(props: { comp: any; propertyViewFn: any }) {
+export function PropertyView(props: { comp: any; propertyViewFn: any; extraProps?: any }) {
   const comp = props.comp;
   if (!props.propertyViewFn) {
     return null;
   }
-  return props.propertyViewFn(comp.children, comp.dispatch);
+  return props.propertyViewFn(comp.children, comp.dispatch, props.extraProps);
 }
 
 export function childrenToProps<ChildrenCompMap extends Record<string, Comp<unknown>>>(
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 2c7f0de92e..54d1b07169 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -337,7 +337,11 @@ const aggregationSiderItems = [
   {
     key: SiderKey.Setting,
     icon: <LeftSettingIcon />,
-  }
+  },
+  {
+    key: SiderKey.JS,
+    icon: <LeftJSSettingIcon />,
+  },
 ];
 
 const DeviceWrapper = ({
@@ -706,11 +710,9 @@ function EditorView(props: EditorViewProps) {
                         <SettingsDiv>
                           <ScrollBar>
                             {application &&
-                              !isAggregationApp(
-                                AppUILayoutType[application.applicationType]
-                              ) && (
+                              (
                                 <>
-                                  {appSettingsComp.getPropertyView()}
+                                  {appSettingsComp.getPropertyView({ isAggregationApp: isAggregationApp(AppUILayoutType[application.applicationType]) })}
                                 </>
                               )}
                           </ScrollBar>
@@ -724,7 +726,7 @@ function EditorView(props: EditorViewProps) {
                                 AppUILayoutType[application.applicationType]
                               ) && (
                                 <>
-                                  {appSettingsComp.getPropertyView()}
+                                  {appSettingsComp.getPropertyView({ isAggregationApp: isAggregationApp(AppUILayoutType[application.applicationType]) })}
                                 </>
                               )}
                           </ScrollBar>

From cb5ff45ed31e66b9e320e06835a3ec0e39079857 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Mon, 23 Jun 2025 12:07:56 +0500
Subject: [PATCH 2/2] Removed additional props from multi

---
 .../src/comps/comps/appSettingsComp.tsx       | 27 +++++++++----------
 .../lowcoder/src/comps/generators/multi.tsx   | 19 +++++++------
 .../lowcoder/src/pages/editor/editorView.tsx  |  4 +--
 .../lowcoder/src/redux/sagas/orgSagas.ts      |  1 -
 4 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index a65de0cc0d..64122dabab 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -17,15 +17,15 @@ import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
 import { NumberControl, RangeControl, StringControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { ApplicationCategoriesEnum } from "constants/applicationConstants";
+import { ApplicationCategoriesEnum, AppUILayoutType } from "constants/applicationConstants";
 import { BoolControl } from "../controls/boolControl";
-import { getNpmPackageMeta } from "../utils/remote";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { ColorControl } from "../controls/colorControl";
 import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils";
 import { AppSettingContext } from "../utils/appSettingContext";
-import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { currentApplication, isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { isAggregationApp } from "util/appUtils";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -233,11 +233,8 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
   defaultTheme: string;
 };
 
-type AppSettingsExtraProps = { isAggregationApp?: boolean };
-type AppGeneralSettingsModalProps = ChildrenInstance & AppSettingsExtraProps;
-type AppCanvasSettingsModalProps = ChildrenInstance & AppSettingsExtraProps;
-
-function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
+function AppGeneralSettingsModal(props: ChildrenInstance) {
+  const application = useSelector(currentApplication);
   const lowcoderCompsMeta = useSelector((state: AppState) => state.npmPlugin.packageMeta['lowcoder-comps']);
   const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
   const {
@@ -247,7 +244,6 @@ function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
     category,
     showHeaderInPublic,
     lowcoderCompVersion,
-    isAggregationApp
   } = props;
   
   useEffect(() => {
@@ -293,7 +289,7 @@ function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
           </div>
         </DivStyled>
       </BaseSection>
-      {!isAggregationApp && 
+      {application && !isAggregationApp(AppUILayoutType[application.applicationType]) && 
         <BaseSection
         name={"Lowcoder Comps"}
         width={288}
@@ -325,7 +321,8 @@ function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
             }}
           />
         </DivStyled>
-      </BaseSection>}
+      </BaseSection>
+      }
       <BaseSection
         name={"Shortcuts"}
         width={288}
@@ -343,7 +340,7 @@ function AppGeneralSettingsModal(props: AppGeneralSettingsModalProps) {
   );
 }
 
-function AppCanvasSettingsModal(props: AppCanvasSettingsModalProps) {
+function AppCanvasSettingsModal(props: ChildrenInstance) {
   const isPublicApp = useSelector(isPublicApplication);
   const {
     themeList,
@@ -522,12 +519,12 @@ export const AppSettingsComp = new MultiCompBuilder(childrenMap, (props) => {
     maxWidth: Number(props.maxWidth),
   };
 })
-  .setPropertyViewFn((children, extraProps) => {
+  .setPropertyViewFn((children) => {
     const { settingType } = useContext(AppSettingContext);
     const themeList = useSelector(getThemeList) || [];
     const defaultTheme = (useSelector(getDefaultTheme) || "").toString();
     return settingType === 'canvas'
-      ? <AppCanvasSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} {...(extraProps || {})} />
-      : <AppGeneralSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} {...(extraProps || {})} />;
+      ? <AppCanvasSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />
+      : <AppGeneralSettingsModal {...children} themeList={themeList} defaultTheme={defaultTheme} />;
   })
   .build();
diff --git a/client/packages/lowcoder/src/comps/generators/multi.tsx b/client/packages/lowcoder/src/comps/generators/multi.tsx
index 7e5bbc575e..ff8c914221 100644
--- a/client/packages/lowcoder/src/comps/generators/multi.tsx
+++ b/client/packages/lowcoder/src/comps/generators/multi.tsx
@@ -51,10 +51,9 @@ export type ViewFnTypeForComp<ViewReturn, ChildrenCompMap> = ViewFnType<
   ViewReturn,
   ToViewReturn<ChildrenCompMap>
 >;
-export type PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps = any> = (
+export type PropertyViewFnTypeForComp<ChildrenCompMap> = (
   children: ChildrenCompMap,
-  dispatch: (action: CompAction) => void,
-  extraProps?: ExtraProps
+  dispatch: (action: CompAction) => void
 ) => ReactNode;
 
 export function parseChildrenFromValueAndChildrenMap<
@@ -84,10 +83,10 @@ export function parseChildrenFromValueAndChildrenMap<
  * Building comp this way can use typescript's type inference capabilities.
  * Using ChildrenCompMap as a generic is to retain the information of each class, such as not wanting StringControl to degenerate into Comp<string>
  */
-export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string, Comp<unknown>>, ExtraProps = any> {
+export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string, Comp<unknown>>> {
   private childrenMap: ToConstructor<ChildrenCompMap>;
   private viewFn: ViewFnTypeForComp<ViewReturn, ChildrenCompMap>;
-  private propertyViewFn?: PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps>;
+  private propertyViewFn?: PropertyViewFnTypeForComp<ChildrenCompMap>;
 
   /**
    * If viewFn is not placed in the constructor, the type of ViewReturn cannot be inferred
@@ -100,7 +99,7 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
     this.viewFn = viewFn;
   }
 
-  setPropertyViewFn(propertyViewFn: PropertyViewFnTypeForComp<ChildrenCompMap, ExtraProps>) {
+  setPropertyViewFn(propertyViewFn: PropertyViewFnTypeForComp<ChildrenCompMap>) {
     this.propertyViewFn = propertyViewFn;
     return this;
   }
@@ -130,8 +129,8 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
         );
       }
 
-      override getPropertyView(extraProps?: ExtraProps): ReactNode {
-        return <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} extraProps={extraProps} />;
+      override getPropertyView(): ReactNode {
+        return <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} />;
       }
     }
 
@@ -142,12 +141,12 @@ export class MultiCompBuilder<ViewReturn, ChildrenCompMap extends Record<string,
 /**
  * Guaranteed to be in a react component, so that react hooks can be used internally
  */
-export function PropertyView(props: { comp: any; propertyViewFn: any; extraProps?: any }) {
+export function PropertyView(props: { comp: any; propertyViewFn: any }) {
   const comp = props.comp;
   if (!props.propertyViewFn) {
     return null;
   }
-  return props.propertyViewFn(comp.children, comp.dispatch, props.extraProps);
+  return props.propertyViewFn(comp.children, comp.dispatch);
 }
 
 export function childrenToProps<ChildrenCompMap extends Record<string, Comp<unknown>>>(
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 54d1b07169..c722f907f7 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -712,7 +712,7 @@ function EditorView(props: EditorViewProps) {
                             {application &&
                               (
                                 <>
-                                  {appSettingsComp.getPropertyView({ isAggregationApp: isAggregationApp(AppUILayoutType[application.applicationType]) })}
+                                  {appSettingsComp.getPropertyView()}
                                 </>
                               )}
                           </ScrollBar>
@@ -726,7 +726,7 @@ function EditorView(props: EditorViewProps) {
                                 AppUILayoutType[application.applicationType]
                               ) && (
                                 <>
-                                  {appSettingsComp.getPropertyView({ isAggregationApp: isAggregationApp(AppUILayoutType[application.applicationType]) })}
+                                  {appSettingsComp.getPropertyView()}
                                 </>
                               )}
                           </ScrollBar>
diff --git a/client/packages/lowcoder/src/redux/sagas/orgSagas.ts b/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
index 54e4eee1e7..b259f12a00 100644
--- a/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/orgSagas.ts
@@ -346,7 +346,6 @@ export function* fetchWorkspacesSaga(action: ReduxAction<{page: number, pageSize
     
     if (validateResponse(response)) {
       const apiData = response.data.data;
-      console.log("apiData", apiData);
       
       // Transform orgId/orgName to match Org interface
       const transformedItems = apiData.data.map(item => ({