This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch fix-data-scope in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 14288b34875e19cfc7ba11b694803e5ca5ec26c8 Author: mintsweet <[email protected]> AuthorDate: Fri Sep 20 14:29:40 2024 +1200 fix: data scope doesn't display name when selecting in project --- .../plugins/components/data-scope-select/index.tsx | 50 ++++++++++++---------- .../routes/blueprint/connection-detail/index.tsx | 18 +++++--- .../routes/blueprint/connection-detail/table.tsx | 16 +++---- 3 files changed, 45 insertions(+), 39 deletions(-) diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx index 79899f7e5..9ac0bfe18 100644 --- a/config-ui/src/plugins/components/data-scope-select/index.tsx +++ b/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,9 +125,8 @@ 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} @@ -135,7 +134,7 @@ export const DataScopeSelect = ({ 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> diff --git a/config-ui/src/routes/blueprint/connection-detail/index.tsx b/config-ui/src/routes/blueprint/connection-detail/index.tsx index 8483051ae..de37d1bb7 100644 --- a/config-ui/src/routes/blueprint/connection-detail/index.tsx +++ b/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,10 +75,7 @@ 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]); @@ -79,7 +83,7 @@ export const BlueprintConnectionDetailPage = () => { 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} /> diff --git a/config-ui/src/routes/blueprint/connection-detail/table.tsx b/config-ui/src/routes/blueprint/connection-detail/table.tsx index 7036d59a2..002818e3f 100644 --- a/config-ui/src/routes/blueprint/connection-detail/table.tsx +++ b/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} /> ); };
