fix: data scope doesn't display name when selecting in project

config-ui/src/plugins/components/data-scope-select/index.tsx

@@ -44,14 +44,25 @@ export const DataScopeSelect = ({
   onCancel,
 }: Props) => {
   const [selectedIds, setSelectedIds] = useState<ID[]>([]);
-  const [originData, setOriginData] = useState<any[]>([]);
+  const [selectedScope, setSelectedScope] = useState<
+    Array<{
+      id: ID;
+      name: string;
+    }>
+  >([]);
   const [search, setSearch] = useState('');
   const [version, setVersion] = useState(0);
 
   const searchDebounce = useDebounce(search, { wait: 500 });
 
   useEffect(() => {
-    setSelectedIds((initialScope ?? []).map((sc) => sc.id));
+    setSelectedIds((initialScope ?? []).map((it) => getPluginScopeId(plugin, it.scope)));
+    setSelectedScope(
+      (initialScope ?? []).map((it) => ({
+        id: getPluginScopeId(plugin, it.scope),
+        name: it.scope.fullName ?? it.scope.name,
+      })),
+    );
   }, []);
 
   const request = useCallback(
@@ -87,21 +98,10 @@ export const DataScopeSelect = ({
     <Block
       title="Select Data Scope"
       description={
-        originData.length ? (
-          <>
-            Select the data scope in this Connection that you wish to associate with this Project. If you wish to add
-            more Data Scope to this Connection, please{' '}
-            <ExternalLink link={`/connections/${plugin}/${connectionId}`}>go to the Connection page</ExternalLink>.
-          </>
-        ) : (
-          <>
-            There is no Data Scope in this connection yet, please{' '}
-            <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
-              add Data Scope and manage their Scope Configs
-            </ExternalLink>{' '}
-            first.
-          </>
-        )
+        <>
+          If no Data Scope appears in the dropdown list, please{' '}
+          <ExternalLink link={`/connections/${plugin}/${connectionId}`}>add one to this connection</ExternalLink> first.
+        </>
       }
       required
     >
@@ -125,17 +125,16 @@ export const DataScopeSelect = ({
           </Flex>
         )}
         <Space wrap>
-          {selectedIds.length ? (
-            selectedIds.map((id) => {
-              const item = originData.find((it) => getPluginScopeId(plugin, it.scope) === `${id}`);
+          {selectedScope.length ? (
+            selectedScope.map(({ id, name }) => {
               return (
                 <Tag
                   key={id}
                   color="blue"
                   closable
                   onClose={() => setSelectedIds(selectedIds.filter((it) => it !== id))}
                 >
-                  {item?.scope.fullName ?? item?.scope.name}
+                  {name}
                 </Tag>
               );
             })
@@ -168,7 +167,14 @@ export const DataScopeSelect = ({
             selectedIds={selectedIds}
             onSelectedIds={(ids, data) => {
               setSelectedIds(ids);
-              setOriginData(data ?? []);
+              setSelectedScope(
+                data
+                  ?.filter((it) => ids.includes(getPluginScopeId(plugin, it.scope)))
+                  .map((it) => ({
+                    id: getPluginScopeId(plugin, it.scope),
+                    name: it.scope.fullName ?? it.scope.name,
+                  })) ?? [],
+              );
             }}
           />
         </div>

config-ui/src/routes/blueprint/connection-detail/index.tsx

@@ -60,6 +60,13 @@ export const BlueprintConnectionDetailPage = () => {
       API.connection.get(plugin, connectionId),
     ]);
 
+    const scopeIds =
+      blueprint.connections
+        .find((cs) => cs.pluginName === plugin && cs.connectionId === +connectionId)
+        ?.scopes?.map((sc: any) => sc.scopeId) ?? [];
+
+    const scopes = await Promise.all(scopeIds.map((scopeId) => API.scope.get(plugin, connectionId, scopeId)));
+
     return {
       blueprint,
       connection: {
@@ -68,18 +75,15 @@ export const BlueprintConnectionDetailPage = () => {
         id: +connectionId,
         name: connection.name,
       },
-      scopeIds:
-        blueprint.connections
-          .find((cs) => cs.pluginName === plugin && cs.connectionId === +connectionId)
-          ?.scopes?.map((sc: any) => sc.scopeId) ?? [],
+      scopes,
     };
   }, [version, pname, bid]);
 
   if (!ready || !data) {
     return <PageLoading />;
   }
 
-  const { blueprint, connection, scopeIds } = data;
+  const { blueprint, connection, scopes } = data;
 
   const handleShowDataScope = () => setOpen(true);
   const handleHideDataScope = () => setOpen(false);
@@ -228,14 +232,14 @@ export const BlueprintConnectionDetailPage = () => {
             Manage Data Scope
           </Button>
         </Flex>
-        <BlueprintConnectionDetailTable plugin={plugin} connectionId={connectionId} scopeIds={scopeIds} />
+        <BlueprintConnectionDetailTable plugin={plugin} connectionId={connectionId} scopes={scopes} />
       </Flex>
       <Modal open={open} width={820} centered title="Manage Data Scope" footer={null} onCancel={handleHideDataScope}>
         <DataScopeSelect
           plugin={connection.plugin}
           connectionId={connection.id}
           showWarning
-          initialScope={scopeIds.map((id) => ({ id }))}
+          initialScope={scopes}
           onCancel={handleHideDataScope}
           onSubmit={handleChangeDataScope}
         />

config-ui/src/routes/blueprint/connection-detail/table.tsx

@@ -16,35 +16,31 @@
  *
  */
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Table } from 'antd';
 
-import API from '@/api';
-import { useRefreshData } from '@/hooks';
 import { getPluginScopeId, ScopeConfig } from '@/plugins';
 
 interface Props {
   plugin: string;
   connectionId: ID;
-  scopeIds: ID[];
+  scopes: any[];
 }
 
-export const BlueprintConnectionDetailTable = ({ plugin, connectionId, scopeIds }: Props) => {
+export const BlueprintConnectionDetailTable = ({ plugin, connectionId, scopes }: Props) => {
   const [version, setVersion] = useState(1);
 
-  const { ready, data } = useRefreshData(async () => {
-    const scopes = await Promise.all(scopeIds.map((scopeId) => API.scope.get(plugin, connectionId, scopeId)));
+  const dataSource = useMemo(() => {
     return scopes.map((sc) => ({
       id: getPluginScopeId(plugin, sc.scope),
       name: sc.scope.fullName ?? sc.scope.name,
       scopeConfigId: sc.scopeConfig?.id,
       scopeConfigName: sc.scopeConfig?.name,
     }));
-  }, [version]);
+  }, [scopes]);
 
   return (
     <Table
-      loading={!ready}
       rowKey="id"
       size="middle"
       columns={[
@@ -69,7 +65,7 @@ export const BlueprintConnectionDetailTable = ({ plugin, connectionId, scopeIds
           ),
         },
       ]}
-      dataSource={data ?? []}
+      dataSource={dataSource}
     />
   );
 };