Oct 11, 2024 · Sep 26, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 4, 2024 · Oct 4, 2024
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
 {
  "name": "lowcoder-comps",
  "version": "2.4.18",
  "version": "2.4.19",
  "type": "module",
  "license": "MIT",
  "dependencies": {
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
  if(!Boolean(oldData)) return;
  let {events, resourcesEvents, ...data } = oldData;
  let allEvents: any[] = [];
  let isDynamicEventData = false;

  if (events && typeof events === 'string') {
    let eventsList = JSON.parse(events);
    if (eventsList && eventsList.length) {
      eventsList = eventsList?.map(event => {
        const {title, ...eventData} = event;
        return {
          ...eventData,
          label: title, // replace title field with label
        }
      });
      allEvents = allEvents.concat(eventsList);
    try {
      let eventsList = JSON.parse(events);
      if (eventsList && eventsList.length) {
        eventsList = eventsList?.map(event => {
          const {title, ...eventData} = event;
          return {
            ...eventData,
            label: title, // replace title field with label
          }
        });
        allEvents = allEvents.concat(eventsList);
      }
    } catch (_) {
      isDynamicEventData = true;
    }
  }
  if (resourcesEvents && typeof resourcesEvents === 'string') {
    let resourceEventsList = JSON.parse(resourcesEvents);
    if (resourceEventsList && resourceEventsList.length) {
      resourceEventsList = resourceEventsList?.map(event => {
        const {title, ...eventData} = event;
        return {
          ...eventData,
          label: title, // replace title field with label
        }
      });
      allEvents = allEvents.concat(resourceEventsList);
    }
    try {
      let resourceEventsList = JSON.parse(resourcesEvents);
      if (resourceEventsList && resourceEventsList.length) {
        resourceEventsList = resourceEventsList?.map(event => {
          const {title, ...eventData} = event;
          return {
            ...eventData,
            label: title, // replace title field with label
          }
        });
        allEvents = allEvents.concat(resourceEventsList);
      }
    } catch (_) {}
  }

  if (isDynamicEventData) {
    return {
      ...data,
      events: {
        manual: {
          manual: allEvents,
        },
        mapData: {
          data: events,
          mapData: {
            id: "{{item.id}}",
            label: "{{item.title}}",
            detail: "{{item.detail}}",
            start: "{{item.start}}",
            end: "{{item.end}}",
            color: "{{item.color}}",
            allDay: "{{item.allDay}}",
            groupId: "{{item.groupId}}",
            resourceId: "{{item.resourceId}}",
          }
        },
        optionType: "map",
      },
    };
  }

  if (allEvents.length) {
    return {
      ...data,
        },
        mapData: {
          data: JSON.stringify(allEvents, null, 2),
          mapData: {
            id: "{{item.id}}",
            label: "{{item.title}}",
            detail: "{{item.detail}}",
            start: "{{item.start}}",
            end: "{{item.end}}",
            color: "{{item.color}}",
            allDay: "{{item.allDay}}",
            groupId: "{{item.groupId}}",
            resourceId: "{{item.resourceId}}",
          }
        },
        optionType: "manual",
      },
    };
  }

  return {
    ...data,
    events,
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx
 } from "types/remoteComp";

 async function npmLoader(
  remoteInfo: RemoteCompInfo
  {
    appId,
    ...remoteInfo
  }: RemoteCompInfo & {appId?: string}
 ): Promise<CompConstructor | null> {

  // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
  const localPackageVersion = remoteInfo.packageVersion || "latest";
  const { packageName, packageVersion, compName } = remoteInfo;
  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`;
  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${localPackageVersion}/index.js`;

  try {
    const module = await import(
  return comp;
 }

 export const loaders: Record<RemoteCompSource, RemoteCompLoader> = {
 export const loaders: Record<RemoteCompSource, RemoteCompLoader<RemoteCompInfo & {appId?: string}>> = {
  npm: npmLoader,
  bundle: bundleLoader,
 };
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
 import React from "react";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { useSelector } from "react-redux";
 import { useApplicationId } from "@lowcoder-ee/util/hooks";

 const ViewError = styled.div`
  display: flex;

 interface RemoteCompViewProps {
  isLowcoderComp?: boolean;
  loadComp: (packageVersion?: string) => Promise<void>;
  loadComp: (packageVersion?: string, appId?: string) => Promise<void>;
  loadingElement?: () => React.ReactNode;
  errorElement?: (error: any) => React.ReactNode;
  source?: RemoteCompSource;
  const [error, setError] = useState<any>("");
  const editorState = useContext(EditorContext);
  const compState = useContext(CompContext);
  const appId = useApplicationId();
  const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
  const latestLowcoderCompsVersion = useSelector((state: AppState) => state.npmPlugin.packageVersion['lowcoder-comps']);


  useMount(() => {
    setError("");
    loadComp(packageVersion).catch((e) => {
    loadComp(packageVersion, appId).catch((e) => {
      setError(String(e));
    });
  });
      this.compValue = params.value;
    }

    private async load(packageVersion = 'latest') {
    private async load(packageVersion = 'latest', appId = 'none') {
      if (!remoteInfo) {
        return;
      }
        log.error("loader not found, remote info:", remoteInfo);
        return;
      }
      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion});
      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion, appId});
      if (!RemoteExportedComp) {
        return;
      }
        <RemoteCompView
          key={key}
          isLowcoderComp={remoteInfo?.packageName === 'lowcoder-comps'}
          loadComp={(packageVersion?: string) => this.load(packageVersion)}
          loadComp={(packageVersion?: string, appId?: string) => this.load(packageVersion, appId)}
          loadingElement={loadingElement}
          source={remoteInfo?.source}
        />
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
  style: styleControl(StepsStyle , 'style'),
  viewRef: RefControl<HTMLDivElement>,
  animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
 showVerticalScrollbar: withDefault(BoolControl, false),
 showScrollBars: withDefault(BoolControl, false),
  minHorizontalWidth: withDefault(RadiusControl, ''),
 };

              padding: "0px",
            }}
            overflow="scroll"
            hideScrollbar={!props.showVerticalScrollbar}>
            hideScrollbar={!props.showScrollBars}>
            <Steps
              initial={props.initialValue.value -1}
              current={current}
            >
              {props.options.map((option, index) => (
                <Steps.Step
                  style={{minWidth:props.minHorizontalWidth || '100%'}}
                  key={index}
                  title={option.label}
                  subTitle={option.subTitle}
        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
          <Section name={sectionNames.layout}>
            {children.autoHeight.getPropertyView()}
            {!children.autoHeight.getView() && (
              children.showVerticalScrollbar.propertyView({
                label: trans("prop.showVerticalScrollbar"),
              })
            )}
            {children.minHorizontalWidth.propertyView({
                label: trans("prop.minHorizontalWidth"),
                placeholder: '100px',
              })}
            {children.size.propertyView({
              label: trans("step.size"),
              radioButton: true,
                radioButton: true,
              })
            }
            {children.direction.getView() == "horizontal" && (
              children.minHorizontalWidth.propertyView({
                label: trans("prop.minHorizontalWidth"),
                  placeholder: '100px',
              })
            )}
            {!children.autoHeight.getView() && (
              children.showScrollBars.propertyView({
              label: trans("prop.scrollbar"),
            })
            )}
            { children.displayType.getView() != "inline" && !children.showIcons.getView() && (
              children.showDots.propertyView({label: trans("step.showDots")}
            ))}
            { children.displayType.getView() != "inline" && !children.showDots.getView() && (
              children.showIcons.propertyView({label: trans("step.showIcons")}
            ))}
            {!children.autoHeight.getView() && (
              children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")})
            )}
          </Section>
        )}

diff --git a/client/packages/lowcoder/src/comps/utils/remote.ts b/client/packages/lowcoder/src/comps/utils/remote.ts
 }

 export async function getNpmPackageMeta(packageName: string) {
  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${packageName}`);
  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/none/${packageName}`);
  if (res.status >= 400) {
    return null;
  }
diff --git a/client/packages/lowcoder/src/constants/npmPlugins.ts b/client/packages/lowcoder/src/constants/npmPlugins.ts
 export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
 export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
 export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;
 // export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
 // export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
 // export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;

 export const SERVER_HOST = `${REACT_APP_API_SERVICE_URL ?? ""}`;
 export const NPM_REGISTRY_URL = `${SERVER_HOST}/api/npm/registry`;
 export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/api/npm/package`;
diff --git a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginCompItem.tsx b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginCompItem.tsx
 import { TransparentImg } from "util/commonUtils";
 import { ModuleIcon } from "lowcoder-design";
 import { NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins";
 import { useApplicationId } from "@lowcoder-ee/index.sdk";

 const ItemWrapper = styled.div`
  display: flex;
 }

 export function PluginCompItem(props: PluginCompItemProps) {
  const appId = useApplicationId();
  const { packageName, packageVersion, compName, compMeta, onDrag } = props;
  const compType = getRemoteCompType("npm", packageName, packageVersion, compName);

  const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/${compMeta.icon}`;
  const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${packageVersion}/${compMeta.icon}`;

  return (
    <ItemWrapper
diff --git a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx
 import axios from "axios";
 import { EmptyContent } from "components/EmptyContent";
 import { LinkButton } from "lowcoder-design";
 import { useShallowEqualSelector } from "util/hooks";
 import {useApplicationId,useShallowEqualSelector } from "util/hooks";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "redux/reducers";
 export function PluginItem(props: PluginViewProps) {
  const { name, onRemove } = props;
  const dispatch = useDispatch();
  const appId = useApplicationId();
  const { onDrag, searchValue } = useContext(RightContext);
  const [loading, setLoading] = useState(false);
  const packageMeta = useShallowEqualSelector(

  useEffect(() => {
    setLoading(true);
    axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${name}`).then((res) => {
    axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${appId}/${name}`).then((res) => {
      if (res.status >= 400) {
        return;
      }
diff --git a/...ice/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java b/...ice/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java
                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/*/datasourceTypes"), // datasource types
                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/byuser/*"),
                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.DATASOURCE_URL + "/jsDatasourcePlugins"),
                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.NPM_REGISTRY + "/**"),
                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, "/api/docs/**")
                )
                .permitAll()
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-comps",
		"version": "2.4.18",
		"version": "2.4.19",
		"type": "module",
		"license": "MIT",
		"dependencies": {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -84,34 +84,67 @@ function fixOldData(oldData: any) {
		if(!Boolean(oldData)) return;
		let {events, resourcesEvents, ...data } = oldData;
		let allEvents: any[] = [];
		let isDynamicEventData = false;

		if (events && typeof events === 'string') {
		let eventsList = JSON.parse(events);
		if (eventsList && eventsList.length) {
		eventsList = eventsList?.map(event => {
		const {title, ...eventData} = event;
		return {
		...eventData,
		label: title, // replace title field with label
		}
		});
		allEvents = allEvents.concat(eventsList);
		try {
		let eventsList = JSON.parse(events);
		if (eventsList && eventsList.length) {
		eventsList = eventsList?.map(event => {
		const {title, ...eventData} = event;
		return {
		...eventData,
		label: title, // replace title field with label
		}
		});
		allEvents = allEvents.concat(eventsList);
		}
		} catch (_) {
		isDynamicEventData = true;
		}
		}
		if (resourcesEvents && typeof resourcesEvents === 'string') {
		let resourceEventsList = JSON.parse(resourcesEvents);
		if (resourceEventsList && resourceEventsList.length) {
		resourceEventsList = resourceEventsList?.map(event => {
		const {title, ...eventData} = event;
		return {
		...eventData,
		label: title, // replace title field with label
		}
		});
		allEvents = allEvents.concat(resourceEventsList);
		}
		try {
		let resourceEventsList = JSON.parse(resourcesEvents);
		if (resourceEventsList && resourceEventsList.length) {
		resourceEventsList = resourceEventsList?.map(event => {
		const {title, ...eventData} = event;
		return {
		...eventData,
		label: title, // replace title field with label
		}
		});
		allEvents = allEvents.concat(resourceEventsList);
		}
		} catch (_) {}
		}

		if (isDynamicEventData) {
		return {
		...data,
		events: {
		manual: {
		manual: allEvents,
		},
		mapData: {
		data: events,
		mapData: {
		id: "{{item.id}}",
		label: "{{item.title}}",
		detail: "{{item.detail}}",
		start: "{{item.start}}",
		end: "{{item.end}}",
		color: "{{item.color}}",
		allDay: "{{item.allDay}}",
		groupId: "{{item.groupId}}",
		resourceId: "{{item.resourceId}}",
		}
		},
		optionType: "map",
		},
		};
		}

		if (allEvents.length) {
		return {
		...data,
Expand All		@@ -121,11 +154,23 @@ function fixOldData(oldData: any) {
		},
		mapData: {
		data: JSON.stringify(allEvents, null, 2),
		mapData: {
		id: "{{item.id}}",
		label: "{{item.title}}",
		detail: "{{item.detail}}",
		start: "{{item.start}}",
		end: "{{item.end}}",
		color: "{{item.color}}",
		allDay: "{{item.allDay}}",
		groupId: "{{item.groupId}}",
		resourceId: "{{item.resourceId}}",
		}
		},
		optionType: "manual",
		},
		};
		}

		return {
		...data,
		events,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,13 +8,16 @@ import {
		} from "types/remoteComp";

		async function npmLoader(
		remoteInfo: RemoteCompInfo
		{
		appId,
		...remoteInfo
		}: RemoteCompInfo & {appId?: string}
		): Promise<CompConstructor \| null> {

		// Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
		const localPackageVersion = remoteInfo.packageVersion \|\| "latest";
		const { packageName, packageVersion, compName } = remoteInfo;
		const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`;
		const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${localPackageVersion}/index.js`;

		try {
		const module = await import(
Expand DownExpand Up		@@ -51,7 +54,7 @@ async function bundleLoader(
		return comp;
		}

		export const loaders: Record<RemoteCompSource, RemoteCompLoader> = {
		export const loaders: Record<RemoteCompSource, RemoteCompLoader<RemoteCompInfo & {appId?: string}>> = {
		npm: npmLoader,
		bundle: bundleLoader,
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,6 +16,7 @@ import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
		import React from "react";
		import type { AppState } from "@lowcoder-ee/redux/reducers";
		import { useSelector } from "react-redux";
		import { useApplicationId } from "@lowcoder-ee/util/hooks";

		const ViewError = styled.div`
		display: flex;
Expand DownExpand Up		@@ -51,7 +52,7 @@ interface RemoteCompReadyAction {

		interface RemoteCompViewProps {
		isLowcoderComp?: boolean;
		loadComp: (packageVersion?: string) => Promise<void>;
		loadComp: (packageVersion?: string, appId?: string) => Promise<void>;
		loadingElement?: () => React.ReactNode;
		errorElement?: (error: any) => React.ReactNode;
		source?: RemoteCompSource;
Expand All		@@ -62,6 +63,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
		const [error, setError] = useState<any>("");
		const editorState = useContext(EditorContext);
		const compState = useContext(CompContext);
		const appId = useApplicationId();
		const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion \|\| 'latest';
		const latestLowcoderCompsVersion = useSelector((state: AppState) => state.npmPlugin.packageVersion['lowcoder-comps']);

Expand All		@@ -79,7 +81,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView

		useMount(() => {
		setError("");
		loadComp(packageVersion).catch((e) => {
		loadComp(packageVersion, appId).catch((e) => {
		setError(String(e));
		});
		});
Expand DownExpand Up		@@ -117,7 +119,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
		this.compValue = params.value;
		}

		private async load(packageVersion = 'latest') {
		private async load(packageVersion = 'latest', appId = 'none') {
		if (!remoteInfo) {
		return;
		}
Expand All		@@ -129,7 +131,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
		log.error("loader not found, remote info:", remoteInfo);
		return;
		}
		const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion});
		const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion, appId});
		if (!RemoteExportedComp) {
		return;
		}
Expand DownExpand Up		@@ -159,7 +161,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
		<RemoteCompView
		key={key}
		isLowcoderComp={remoteInfo?.packageName === 'lowcoder-comps'}
		loadComp={(packageVersion?: string) => this.load(packageVersion)}
		loadComp={(packageVersion?: string, appId?: string) => this.load(packageVersion, appId)}
		loadingElement={loadingElement}
		source={remoteInfo?.source}
		/>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -95,7 +95,7 @@ const StepsChildrenMap = {
		style: styleControl(StepsStyle , 'style'),
		viewRef: RefControl<HTMLDivElement>,
		animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
		showVerticalScrollbar: withDefault(BoolControl, false),
		showScrollBars: withDefault(BoolControl, false),
		minHorizontalWidth: withDefault(RadiusControl, ''),
		};

Expand DownExpand Up		@@ -182,7 +182,7 @@ let StepControlBasicComp = (function () {
		padding: "0px",
		}}
		overflow="scroll"
		hideScrollbar={!props.showVerticalScrollbar}>
		hideScrollbar={!props.showScrollBars}>
		<Steps
		initial={props.initialValue.value -1}
		current={current}
Expand All		@@ -197,6 +197,7 @@ let StepControlBasicComp = (function () {
		>
		{props.options.map((option, index) => (
		<Steps.Step
		style={{minWidth:props.minHorizontalWidth \|\| '100%'}}
		key={index}
		title={option.label}
		subTitle={option.subTitle}
Expand DownExpand Up		@@ -234,15 +235,6 @@ let StepControlBasicComp = (function () {
		{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
		<Section name={sectionNames.layout}>
		{children.autoHeight.getPropertyView()}
		{!children.autoHeight.getView() && (
		children.showVerticalScrollbar.propertyView({
		label: trans("prop.showVerticalScrollbar"),
		})
		)}
		{children.minHorizontalWidth.propertyView({
		label: trans("prop.minHorizontalWidth"),
		placeholder: '100px',
		})}
		{children.size.propertyView({
		label: trans("step.size"),
		radioButton: true,
Expand All		@@ -261,15 +253,23 @@ let StepControlBasicComp = (function () {
		radioButton: true,
		})
		}
		{children.direction.getView() == "horizontal" && (
		children.minHorizontalWidth.propertyView({
		label: trans("prop.minHorizontalWidth"),
		placeholder: '100px',
		})
		)}
		{!children.autoHeight.getView() && (
		children.showScrollBars.propertyView({
		label: trans("prop.scrollbar"),
		})
		)}
		{ children.displayType.getView() != "inline" && !children.showIcons.getView() && (
		children.showDots.propertyView({label: trans("step.showDots")}
		))}
		{ children.displayType.getView() != "inline" && !children.showDots.getView() && (
		children.showIcons.propertyView({label: trans("step.showIcons")}
		))}
		{!children.autoHeight.getView() && (
		children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")})
		)}
		</Section>
		)}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,7 +39,7 @@ export function parseCompType(compType: string) {
		}

		export async function getNpmPackageMeta(packageName: string) {
		const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${packageName}`);
		const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/none/${packageName}`);
		if (res.status >= 400) {
		return null;
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,7 @@
		export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
		export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
		export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;
		// export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
		// export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
		// export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;

		export const SERVER_HOST = `${REACT_APP_API_SERVICE_URL ?? ""}`;
		export const NPM_REGISTRY_URL = `${SERVER_HOST}/api/npm/registry`;
		export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/api/npm/package`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,6 +11,7 @@ import { LowcoderCompMeta } from "types/remoteComp";
		import { TransparentImg } from "util/commonUtils";
		import { ModuleIcon } from "lowcoder-design";
		import { NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins";
		import { useApplicationId } from "@lowcoder-ee/index.sdk";

		const ItemWrapper = styled.div`
		display: flex;
Expand DownExpand Up		@@ -75,10 +76,11 @@ interface PluginCompItemProps {
		}

		export function PluginCompItem(props: PluginCompItemProps) {
		const appId = useApplicationId();
		const { packageName, packageVersion, compName, compMeta, onDrag } = props;
		const compType = getRemoteCompType("npm", packageName, packageVersion, compName);

		const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/${compMeta.icon}`;
		const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${packageVersion}/${compMeta.icon}`;

		return (
		<ItemWrapper
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import axios from "axios";
		import { EmptyContent } from "components/EmptyContent";
		import { LinkButton } from "lowcoder-design";
		import { useShallowEqualSelector } from "util/hooks";
		import {useApplicationId,useShallowEqualSelector } from "util/hooks";
		import { useContext, useEffect, useMemo, useState } from "react";
		import { useDispatch, useSelector } from "react-redux";
		import { AppState } from "redux/reducers";
Expand DownExpand Up		@@ -55,6 +55,7 @@ interface PluginViewProps {
		export function PluginItem(props: PluginViewProps) {
		const { name, onRemove } = props;
		const dispatch = useDispatch();
		const appId = useApplicationId();
		const { onDrag, searchValue } = useContext(RightContext);
		const [loading, setLoading] = useState(false);
		const packageMeta = useShallowEqualSelector(
Expand All		@@ -67,7 +68,7 @@ export function PluginItem(props: PluginViewProps) {

		useEffect(() => {
		setLoading(true);
		axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${name}`).then((res) => {
		axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${appId}/${name}`).then((res) => {
		if (res.status >= 400) {
		return;
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -145,6 +145,7 @@ SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
		ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/*/datasourceTypes"), // datasource types
		ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/byuser/*"),
		ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.DATASOURCE_URL + "/jsDatasourcePlugins"),
		ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.NPM_REGISTRY + "/**"),
		ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, "/api/docs/**")
		)
		.permitAll()
Expand Down