Added version switch dropdown for Lowcoder comps and comp plugins

client/packages/lowcoder/src/components/CompName.tsx

@@ -121,12 +121,12 @@ export const CompName = (props: Iprops) => {
       onClick: () => {
       },
     });
-    items.push({
-      text: trans("history.currentVersion") + ": " + compInfo.packageVersion,
-      onClick: () => {
+    // items.push({
+    //   text: trans("history.currentVersion") + ": " + compInfo.packageVersion,
+    //   onClick: () => {
 
-      },
-    });
+    //   },
+    // });
 
     items.push({
       text: trans("comp.menuUpgradeToLatest"),

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,30 @@ 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"
+          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,14 @@ 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";
+import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
 
 const ViewError = styled.div`
   display: flex;
@@ -45,18 +47,32 @@ 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 compState = useContext(CompContext);
+  const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
+
+  let packageVersion = 'latest';
+  // lowcoder-comps's package version
+  if (isLowcoderComp) {
+    packageVersion = lowcoderCompPackageVersion;
+  }
+  // component plugin's package version
+  else if (compState.comp?.comp?.version) {
+    packageVersion = compState.comp?.comp.version;
+  }
 
   useMount(() => {
     setError("");
-    loadComp().catch((e) => {
+    loadComp(packageVersion).catch((e) => {
       setError(String(e));
     });
   });
@@ -96,7 +112,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 +124,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 +151,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}
+        />
       );
     }
 

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -1,5 +1,5 @@
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import React, { ReactNode, useContext, useRef } from "react";
+import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { Comp, CompParams, MultiBaseComp } from "lowcoder-core";
 import {
@@ -22,17 +22,25 @@ import {
   MethodConfigsType,
   withMethodExposing,
 } from "./withMethodExposing";
-import { Section } from "lowcoder-design";
+import {Section, controlItem } from "lowcoder-design";
 import { trans } from "i18n";
 import { BoolControl } from "../controls/boolControl";
 import { valueComp, withDefault } from "./simpleGenerators";
+import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
+import { EditorContext } from "../editorState";
+import { values } from "lodash";
+import { UICompType, uiCompRegistry } from "../uiCompRegistry";
+import { getNpmPackageMeta } from "../utils/remote";
+import { compPluginsList } from "constants/compPluginConstants";
+import Select from "antd/es/select";
 
 export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   ChildrenCompMap & {
     hidden: InstanceType<typeof BoolCodeControl>;
     className: InstanceType<typeof StringControl>;
     dataTestId: InstanceType<typeof StringControl>;
     preventStyleOverwriting: InstanceType<typeof BoolControl>;
+    version: InstanceType<typeof StringControl>;
   };
 
 export function HidableView(props: {
@@ -64,6 +72,28 @@ export function ExtendedPropertyView<
   childrenMap: NewChildren<ChildrenCompMap>
 }
 ) {
+  const [compVersions, setCompVersions] = useState(['latest']);
+  const [compName, setCompName] = useState('');
+  const editorState = useContext(EditorContext);
+  const selectedComp = values(editorState.selectedComps())[0];
+  const compType = selectedComp.children.compType.getView() as UICompType;
+
+  useEffect(() => {
+    setCompName(uiCompRegistry[compType].compName || '');
+  }, [compType]);
+
+  useEffect(() => {
+    const fetchCompsPackageMeta = async () => {
+      const packageMeta = await getNpmPackageMeta(compName);
+      if (packageMeta?.versions) {
+        setCompVersions(Object.keys(packageMeta.versions).reverse())
+      }
+    }
+    if (Boolean(compName) && compPluginsList.includes(compName)) {
+      fetchCompsPackageMeta();
+    }
+  }, [compName]);
+
   return (
     <>
       {props.children}
@@ -72,6 +102,30 @@ export function ExtendedPropertyView<
         {props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })}
         {props.childrenMap.preventStyleOverwriting?.propertyView({ label: trans("prop.preventOverwriting") })}
       </Section>
+      {compPluginsList.includes(compName) && (
+        <Section name={'Component Version'}>
+          {controlItem({}, (
+            <Select
+              defaultValue={props.childrenMap.version.getView()}
+              placeholder={'Select version'}
+              options={
+                compVersions.map(version => ({label: version, value: version}))
+              }
+              onChange={async (value) => {
+                await getPromiseAfterDispatch(
+                  props.childrenMap.version.dispatch,
+                  props.childrenMap.version.changeValueAction(value), {
+                    autoHandleAfterReduce: true,
+                  }
+                )
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1000);
+              }}
+            />
+          ))}
+        </Section>
+      )}
     </>
   );
 }
@@ -88,6 +142,7 @@ export function uiChildren<
     dataTestId: StringControl,
     preventStyleOverwriting: withDefault(BoolControl, false),
     appliedThemeId: valueComp<string>(''),
+    version: withDefault(StringControl, 'latest'),
   } as any;
 }
 

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

@@ -314,6 +314,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-geo",
     layoutInfo: {
       w: 12,
       h: 50,
@@ -365,6 +366,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-reactpivottable",
     layoutInfo: {
       w: 12,
       h: 50,
@@ -1239,6 +1241,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-gantt-chart",
     layoutInfo: {
       w: 20,
       h: 60,
@@ -1258,6 +1261,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-hillcharts",
     layoutInfo: {
       w: 12,
       h: 50,
@@ -1276,6 +1280,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-bpmn-io",
     layoutInfo: {
       w: 19,
       h: 60,
@@ -1632,6 +1637,7 @@ export var uiCompMap: Registry = {
       source: "npm",
       isRemote: true,
     }),
+    compName: "lowcoder-comp-cf-turnstile",
     layoutInfo: {
       w: 8,
       h: 20,

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

@@ -0,0 +1,8 @@
+export const compPluginsList = [
+  "lowcoder-comp-geo",
+  "lowcoder-comp-reactpivottable",
+  "lowcoder-comp-gantt-chart",
+  "lowcoder-comp-hillcharts",
+  "lowcoder-comp-bpmn-io",
+  "lowcoder-comp-cf-turnstile",
+]