This is an automated email from the ASF dual-hosted git repository.
abeizn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new d69f95c4d fix: data scope doesn't display name when selecting in
project (#8077)
d69f95c4d is described below
commit d69f95c4db989d558a6ee224d58a8d1c4aee33c6
Author: 青湛 <[email protected]>
AuthorDate: Fri Sep 20 14:37:51 2024 +1200
fix: data scope doesn't display name when selecting in project (#8077)
---
.../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}
/>
);
};
