feat(config-ui): add data scope search when add connection in project/bp

config-ui/package.json

@@ -27,6 +27,7 @@
     "@blueprintjs/datetime2": "^0.9.6",
     "@blueprintjs/popover2": "^1.10.2",
     "@blueprintjs/select": "^4.8.12",
+    "ahooks": "^3.7.8",
     "axios": "^0.21.4",
     "classnames": "^2.3.2",
     "cron-parser": "^4.3.0",

config-ui/src/components/selector/multi-selector/index.tsx

@@ -100,7 +100,6 @@ export const MultiSelector = <T,>({
   return (
     <MultiSelect2
       fill
-      resetOnSelect
       placeholder={placeholder ?? 'Select...'}
       items={items}
       // https://github.com/palantir/blueprint/issues/3596

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

@@ -18,5 +18,11 @@
 
 import { request } from '@/utils';
 
-export const getDataScope = (plugin: string, connectionId: ID) =>
-  request(`/plugins/${plugin}/connections/${connectionId}/scopes`);
+type ParamsType = {
+  searchTerm: string;
+};
+
+export const getDataScope = (plugin: string, connectionId: ID, params?: ParamsType) =>
+  request(`/plugins/${plugin}/connections/${connectionId}/scopes`, {
+    data: params,
+  });

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

@@ -16,10 +16,11 @@
  *
  */
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
+import { useDebounce } from 'ahooks';
 
-import { PageLoading, FormItem, ExternalLink, Message, Buttons, Table } from '@/components';
+import { PageLoading, FormItem, ExternalLink, Message, Buttons, MultiSelector, Table } from '@/components';
 import { useRefreshData } from '@/hooks';
 import { getPluginScopeId } from '@/plugins';
 
@@ -45,12 +46,15 @@ export const DataScopeSelect = ({
 }: Props) => {
   const [version, setVersion] = useState(1);
   const [scopeIds, setScopeIds] = useState<ID[]>([]);
+  const [search, setSearch] = useState('');
 
-  const { ready, data } = useRefreshData(() => API.getDataScope(plugin, connectionId), [version]);
+  const searchTerm = useDebounce(search, { wait: 500 });
 
-  useEffect(() => {
-    setScopeIds((initialScope ?? data ?? []).map((sc: any) => getPluginScopeId(plugin, sc)) ?? []);
-  }, [data]);
+  const { ready, data } = useRefreshData(() => API.getDataScope(plugin, connectionId), [version]);
+  const { ready: searchReady, data: searchItems } = useRefreshData<[{ name: string }]>(
+    () => API.getDataScope(plugin, connectionId, { searchTerm }),
+    [searchTerm],
+  );
 
   const handleRefresh = () => setVersion((v) => v + 1);
 
@@ -104,6 +108,18 @@ export const DataScopeSelect = ({
               <Button intent={Intent.PRIMARY} icon="refresh" text="Refresh Data Scope" onClick={handleRefresh} />
             </Buttons>
           )}
+          <div className="search">
+            <MultiSelector
+              loading={!searchReady}
+              items={searchItems ?? []}
+              getName={(it: any) => it.name}
+              getKey={(it) => getPluginScopeId(plugin, it)}
+              noResult="No Data Scopes Available."
+              onQueryChange={(query) => setSearch(query)}
+              selectedItems={data.filter((it: any) => scopeIds.includes(getPluginScopeId(plugin, it))) ?? []}
+              onChangeItems={(items) => setScopeIds(items.map((it: any) => getPluginScopeId(plugin, it)))}
+            />
+          </div>
           <Table
             noShadow
             loading={!ready}

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

@@ -20,4 +20,8 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   margin-top: 24px;
+
+  .search {
+    margin-bottom: 16px;
+  }
 `;

config-ui/yarn.lock

@@ -2419,7 +2419,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ahooks@npm:^3.4.1":
+"ahooks@npm:^3.4.1, ahooks@npm:^3.7.8":
   version: 3.7.8
   resolution: "ahooks@npm:3.7.8"
   dependencies:
@@ -3050,6 +3050,7 @@ __metadata:
     "@types/react-transition-group": ^4.4.6
     "@types/styled-components": ^5.1.26
     "@vitejs/plugin-react": ^3.1.0
+    ahooks: ^3.7.8
     axios: ^0.21.4
     classnames: ^2.3.2
     cron-parser: ^4.3.0