fix(config-ui): reset the scope API that differentiates plugins

config-ui/src/pages/blueprint/connection-detail/api.ts

@@ -30,8 +30,8 @@ export const updateBlueprint = (id: ID, payload: BlueprintType) =>
 export const getConnection = (plugin: string, connectionId: ID) =>
   request(`/plugins/${plugin}/connections/${connectionId}`);
 
-export const getDataScopes = (plugin: string, connectionId: ID) =>
-  request(`/plugins/${plugin}/connections/${connectionId}/scopes`);
+export const getDataScope = (plugin: string, connectionId: ID, scopeId: ID) =>
+  request(`/plugins/${plugin}/connections/${connectionId}/scopes/${scopeId}`);
 
 export const runBlueprint = (id: ID, skipCollectors: boolean) =>
   request(`/blueprints/${id}/trigger`, { method: 'post', data: { skipCollectors } });

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

@@ -52,17 +52,18 @@ export const BlueprintConnectionDetailPage = () => {
 
   const { ready, data } = useRefreshData(async () => {
     const [plugin, connectionId] = unique.split('-');
-    const [blueprint, connection, scopesRes] = await Promise.all([
+    const [blueprint, connection] = await Promise.all([
       getBlueprint(pname, bid),
       API.getConnection(plugin, connectionId),
-      API.getDataScopes(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.getDataScope(plugin, connectionId, scopeId)));
+
     return {
       blueprint,
       connection: {
@@ -71,7 +72,12 @@ export const BlueprintConnectionDetailPage = () => {
         id: +connectionId,
         name: connection.name,
       },
-      scopes: scopesRes.scopes.filter((sc: any) => scopeIds.includes(getPluginScopeId(plugin, sc))),
+      scopes: scopes.map((sc) => ({
+        id: getPluginScopeId(plugin, sc.scope),
+        name: sc.scope.fullName ?? sc.scope.name,
+        scopeConfigId: sc.scopeConfig?.id,
+        scopeConfigName: sc.scopeConfig?.name,
+      })),
     };
   }, [version, pname, bid]);
 
@@ -129,7 +135,7 @@ export const BlueprintConnectionDetailPage = () => {
     }
   };
 
-  const handleChangeDataScope = async (scope: any) => {
+  const handleChangeDataScope = async (scopeIds: any) => {
     const [success] = await operator(
       () =>
         API.updateBlueprint(blueprint.id, {
@@ -138,7 +144,7 @@ export const BlueprintConnectionDetailPage = () => {
             if (cs.pluginName === connection.plugin && cs.connectionId === connection.id) {
               return {
                 ...cs,
-                scopes: scope.map((sc: any) => ({ id: getPluginScopeId(connection.plugin, sc) })),
+                scopes: scopeIds.map((scopeId: any) => ({ scopeId })),
               };
             }
             return cs;
@@ -212,9 +218,9 @@ export const BlueprintConnectionDetailPage = () => {
           },
           {
             title: 'Scope Config',
-            dataIndex: 'scopeConfig',
+            dataIndex: ['scopeConfigId', 'scopeConfigName'],
             key: 'scopeConfig',
-            render: (_, row) => (row.scopeConfigId ? row.scopeConfig?.name : 'N/A'),
+            render: ({ scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'),
           },
         ]}
         dataSource={scopes}

config-ui/src/pages/connection/detail/index.tsx

@@ -82,25 +82,13 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
 
   const [dataSource, total] = useMemo(
     () => [
-      data?.scopes.map((it: any) => {
-        if (['github', 'gitlab'].includes(plugin)) {
-          return {
-            id: getPluginScopeId(plugin, it.scope),
-            name: it.scope.name,
-            projects: it.blueprints?.map((bp: any) => bp.projectName) ?? [],
-            configId: it.scopeConfig?.id,
-            configName: it.scopeConfig?.name,
-          };
-        }
-
-        return {
-          id: getPluginScopeId(plugin, it),
-          name: it.name,
-          projects: it.blueprints?.map((bp: any) => bp.projectName) ?? [],
-          configId: it.scopeConfigId,
-          configName: it.scopeConfigName,
-        };
-      }) ?? [],
+      data?.scopes.map((it: any) => ({
+        id: getPluginScopeId(plugin, it.scope),
+        name: it.scope.fullName ?? it.scope.name,
+        projects: it.blueprints?.map((bp: any) => bp.projectName) ?? [],
+        configId: it.scopeConfig?.id,
+        configName: it.scopeConfig?.name,
+      })) ?? [],
       data?.count ?? 0,
     ],
     [data],

config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx

@@ -20,7 +20,7 @@ import { useState, useMemo } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
 import { Buttons } from '@/components';
-import { getPluginConfig, getPluginScopeId } from '@/plugins';
+import { getPluginConfig } from '@/plugins';
 import { operator } from '@/utils';
 
 import { SearchLocal } from './search-local';

config-ui/src/plugins/components/data-scope-remote/search-remote.tsx

@@ -24,7 +24,7 @@ import { useDebounce } from 'ahooks';
 import { uniqBy } from 'lodash';
 
 import { FormItem, MultiSelector, Loading } from '@/components';
-import { PluginConfigType, getPluginScopeId } from '@/plugins';
+import { PluginConfigType } from '@/plugins';
 
 import * as T from './types';
 import * as API from './api';

config-ui/src/plugins/components/data-scope-select/api.ts

@@ -23,7 +23,7 @@ type ParamsType = {
 } & Pagination;
 
 type ResponseType = {
-  scopes: Array<{ name: string; scope: { name: string } }>;
+  scopes: Array<{ scope: { name: string; fullName: string } }>;
   count: number;
 };
 

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

@@ -19,7 +19,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useDebounce } from 'ahooks';
-import type { McsID, McsItem } from 'miller-columns-select';
+import type { McsItem } from 'miller-columns-select';
 import MillerColumnsSelect from 'miller-columns-select';
 
 import { FormItem, ExternalLink, Message, Buttons, MultiSelector } from '@/components';
@@ -48,41 +48,26 @@ export const DataScopeSelect = ({
 }: Props) => {
   const [query, setQuery] = useState('');
   const [items, setItems] = useState<McsItem<{ data: any }>[]>([]);
-  const [selectedItems, setSelecteItems] = useState<any>([]);
+  const [selectedIds, setSelectedIds] = useState<ID[]>([]);
+  // const [selectedItems, setSelecteItems] = useState<any>([]);
   const [page, setPage] = useState(1);
   const [pageSize] = useState(10);
   const [total, setTotal] = useState(0);
 
   useEffect(() => {
-    setSelecteItems(initialScope ?? []);
+    setSelectedIds((initialScope ?? []).map((sc) => sc.id));
   }, []);
 
-  const selectedIds = useMemo(() => selectedItems.map((it: any) => getPluginScopeId(plugin, it)), [selectedItems]);
-
-  const handleChangeSelectItemsIds = (ids: McsID[]) => {
-    setSelecteItems(items.filter((it) => ids.includes(it.id)).map((it) => it.data));
-  };
-
   const getDataScope = async (page: number) => {
     const res = await API.getDataScope(plugin, connectionId, { page, pageSize });
     setItems([
       ...items,
-      ...res.scopes.map((sc) => {
-        if (['github', 'gitlab'].includes(plugin)) {
-          return {
-            parentId: null,
-            id: getPluginScopeId(plugin, sc.scope),
-            title: sc.scope.name,
-            data: sc.scope,
-          };
-        }
-        return {
-          parentId: null,
-          id: getPluginScopeId(plugin, sc),
-          title: sc.name,
-          data: sc,
-        };
-      }),
+      ...res.scopes.map((sc) => ({
+        parentId: null,
+        id: getPluginScopeId(plugin, sc.scope),
+        title: sc.scope.fullName,
+        data: sc.scope,
+      })),
     ]);
     if (page === 1) {
       setTotal(res.count);
@@ -100,9 +85,11 @@ export const DataScopeSelect = ({
     [search],
   );
 
+  const searchItems = useMemo(() => data?.scopes.map((sc) => sc.scope) ?? [], [data]);
+
   const handleScroll = () => setPage(page + 1);
 
-  const handleSubmit = () => onSubmit?.(selectedItems);
+  const handleSubmit = () => onSubmit?.(selectedIds);
 
   return (
     <FormItem
@@ -148,13 +135,13 @@ export const DataScopeSelect = ({
           <div className="search">
             <MultiSelector
               loading={!ready}
-              items={data?.scopes.map((sc) => (['github', 'gitlab'].includes(plugin) ? sc.scope : sc)) ?? []}
+              items={searchItems}
               getName={(it) => it.name}
               getKey={(it) => getPluginScopeId(plugin, it)}
               noResult="No Data Scopes Available."
               onQueryChange={(query) => setQuery(query)}
-              selectedItems={selectedItems}
-              onChangeItems={setSelecteItems}
+              selectedItems={searchItems.filter((it) => selectedIds.includes(getPluginScopeId(plugin, it)))}
+              onChangeItems={(selectedItems) => setSelectedIds(selectedItems.map((it) => getPluginScopeId(plugin, it)))}
             />
           </div>
           <MillerColumnsSelect
@@ -165,11 +152,11 @@ export const DataScopeSelect = ({
             getHasMore={() => items.length < total}
             onScroll={handleScroll}
             selectedIds={selectedIds}
-            onSelectItemIds={handleChangeSelectItemsIds}
+            onSelectItemIds={setSelectedIds}
           />
           <Buttons position="bottom" align="right">
             <Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
-            <Button disabled={!selectedItems.length} intent={Intent.PRIMARY} text="Save" onClick={handleSubmit} />
+            <Button disabled={!selectedIds.length} intent={Intent.PRIMARY} text="Save" onClick={handleSubmit} />
           </Buttons>
         </S.Wrapper>
       ) : (