add version change dropdown for comp plugins

Author: raheeliftikhar5

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

@@ -336,7 +336,6 @@ function AppSettingsModal(props: ChildrenInstance) {
           }
           label={'Lowcoder Comps Version'}
           placement="bottom"
-          allowClear
           onChange={async (value) => {
             await getPromiseAfterDispatch(
               lowcoderCompVersion.dispatch,

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

@@ -12,6 +12,7 @@ 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;
@@ -56,9 +57,19 @@ function RemoteCompView(props: React.PropsWithChildren<RemoteCompViewProps>) {
   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';
-  const packageVersion = isLowcoderComp ? lowcoderCompPackageVersion : '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(packageVersion).catch((e) => {

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",
+]