Updated navigation app for settings and JS

Author: kamal-qureshi

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();

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>>>(

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>