added dropdown in app settings to change lowcoder-comps version

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -4,7 +4,7 @@ import { dropdownInputSimpleControl } from "comps/controls/dropdownInputSimpleCo
 import { MultiCompBuilder, valueComp, withDefault } from "comps/generators";
 import { AddIcon, Dropdown } from "lowcoder-design";
 import { EllipsisSpan } from "pages/setting/theme/styledComponents";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { getDefaultTheme, getThemeList } from "redux/selectors/commonSettingSelectors";
 import styled, { css } from "styled-components";
@@ -19,6 +19,8 @@ import { IconControl } from "comps/controls/iconControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ApplicationCategoriesEnum } from "constants/applicationConstants";
 import { BoolControl } from "../controls/boolControl";
+import { getNpmPackageMeta } from "../utils/remote";
+import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -189,13 +191,15 @@ const childrenMap = {
   preventAppStylesOverwriting: withDefault(BoolControl, true),
   customShortcuts: CustomShortcutsComp,
   disableCollision: valueComp<boolean>(false),
+  lowcoderCompVersion: withDefault(StringControl, 'latest'),
 };
 type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
   themeList: ThemeType[];
   defaultTheme: string;
 };
 
 function AppSettingsModal(props: ChildrenInstance) {
+  const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
   const {
     themeList,
     defaultTheme,
@@ -207,11 +211,14 @@ function AppSettingsModal(props: ChildrenInstance) {
     category,
     showHeaderInPublic,
     preventAppStylesOverwriting,
+    lowcoderCompVersion,
   } = props;
+  
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
     value: theme.id + "",
   }));
+
   const themeWithDefault = (
     themeId.getView() === DEFAULT_THEMEID ||
     (!!themeId.getView() &&
@@ -225,6 +232,17 @@ function AppSettingsModal(props: ChildrenInstance) {
       themeId.dispatchChangeValueAction(themeWithDefault);
     }
   }, [themeWithDefault]);
+  
+  useEffect(() => {
+    const fetchCompsPackageMeta = async () => {
+      const packageMeta = await getNpmPackageMeta('lowcoder-comps');
+      if (packageMeta?.versions) {
+        setLowcoderCompVersions(Object.keys(packageMeta.versions).reverse())
+      }
+    }
+    fetchCompsPackageMeta();
+  }, [])
+
 
   const DropdownItem = (params: { value: string }) => {
     const themeItem = themeList.find((theme) => theme.id === params.value);
@@ -308,6 +326,31 @@ function AppSettingsModal(props: ChildrenInstance) {
           })}
         </div>
       </DivStyled>
+      <DividerStyled />
+      <DivStyled>
+        <Dropdown
+          defaultValue={lowcoderCompVersion.getView()}
+          placeholder={'Select version'}
+          options={
+            lowcoderCompVersions.map(version => ({label: version, value: version}))
+          }
+          label={'Lowcoder Comps Version'}
+          placement="bottom"
+          allowClear
+          onChange={async (value) => {
+            await getPromiseAfterDispatch(
+              lowcoderCompVersion.dispatch,
+              lowcoderCompVersion.changeValueAction(value), {
+                autoHandleAfterReduce: true,
+              }
+            )
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          }}
+        />
+      </DivStyled>
+      <DividerStyled />
       {props.customShortcuts.getPropertyView()}
     </SettingsStyled>
   );

client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx

@@ -5,12 +5,13 @@ import { GreyTextColor } from "constants/style";
 import log from "loglevel";
 import { Comp, CompAction, CompParams, customAction, isCustomAction } from "lowcoder-core";
 import { WhiteLoading } from "lowcoder-design";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { useMount } from "react-use";
 import styled from "styled-components";
 import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp";
 import { loaders } from "./loaders"; 
 import { withErrorBoundary } from "comps/generators/withErrorBoundary";
+import { EditorContext } from "@lowcoder-ee/comps/editorState";
 
 const ViewError = styled.div`
   display: flex;
@@ -45,18 +46,22 @@ interface RemoteCompReadyAction {
 }
 
 interface RemoteCompViewProps {
-  loadComp: () => Promise<void>;
+  isLowcoderComp?: boolean;
+  loadComp: (packageVersion?: string) => Promise<void>;
   loadingElement?: () => React.ReactNode;
   errorElement?: (error: any) => React.ReactNode;
 }
 
 function RemoteCompView(props: React.PropsWithChildren<RemoteCompViewProps>) {
-  const { loadComp, loadingElement, errorElement } = props;
+  const { loadComp, loadingElement, errorElement, isLowcoderComp } = props;
   const [error, setError] = useState<any>("");
-
+  const editorState = useContext(EditorContext);
+  const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
+  const packageVersion = isLowcoderComp ? lowcoderCompPackageVersion : 'latest';
+  
   useMount(() => {
     setError("");
-    loadComp().catch((e) => {
+    loadComp(packageVersion).catch((e) => {
       setError(String(e));
     });
   });
@@ -96,7 +101,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
       this.compValue = params.value;
     }
 
-    private async load() {
+    private async load(packageVersion = 'latest') {
       if (!remoteInfo) {
         return;
       }
@@ -108,7 +113,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
         log.error("loader not found, remote info:", remoteInfo);
         return;
       }
-      const RemoteExportedComp = await finalLoader(remoteInfo);
+      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion});
       if (!RemoteExportedComp) {
         return;
       }
@@ -135,7 +140,12 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
     getView() {
       const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`;
       return (
-        <RemoteCompView key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
+        <RemoteCompView
+          key={key}
+          isLowcoderComp={remoteInfo?.packageName === 'lowcoder-comps'}
+          loadComp={(packageVersion?: string) => this.load(packageVersion)}
+          loadingElement={loadingElement}
+        />
       );
     }