This is an automated email from the ASF dual-hosted git repository.
mintsweet 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 080e976de fix(config-ui): reset the scope API that differentiates
plugins (#6235)
080e976de is described below
commit 080e976dec1aee7e5fba5a196a2088d3c5a0af26
Author: 青湛 <[email protected]>
AuthorDate: Thu Oct 12 23:01:03 2023 +1300
fix(config-ui): reset the scope API that differentiates plugins (#6235)
---
.../src/pages/blueprint/connection-detail/api.ts | 4 +-
.../pages/blueprint/connection-detail/index.tsx | 20 +++++----
config-ui/src/pages/connection/detail/index.tsx | 26 ++++--------
.../data-scope-remote/data-scope-remote.tsx | 2 +-
.../components/data-scope-remote/search-remote.tsx | 2 +-
.../plugins/components/data-scope-select/api.ts | 2 +-
.../plugins/components/data-scope-select/index.tsx | 49 ++++++++--------------
7 files changed, 43 insertions(+), 62 deletions(-)
diff --git a/config-ui/src/pages/blueprint/connection-detail/api.ts
b/config-ui/src/pages/blueprint/connection-detail/api.ts
index 1b1c4a99c..d66b7e8b0 100644
--- a/config-ui/src/pages/blueprint/connection-detail/api.ts
+++ b/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 } });
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 6c1c35971..3dae857e7 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -52,10 +52,9 @@ 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 =
@@ -63,6 +62,8 @@ export const BlueprintConnectionDetailPage = () => {
.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}
diff --git a/config-ui/src/pages/connection/detail/index.tsx
b/config-ui/src/pages/connection/detail/index.tsx
index c813686e5..8fba456ec 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/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],
diff --git
a/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
b/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
index 000d105dd..fdd224b52 100644
--- a/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
+++ b/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';
diff --git
a/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
b/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
index 19846c1d4..b2b2556db 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
+++ b/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';
diff --git a/config-ui/src/plugins/components/data-scope-select/api.ts
b/config-ui/src/plugins/components/data-scope-select/api.ts
index 5266f769b..18396ec48 100644
--- a/config-ui/src/plugins/components/data-scope-select/api.ts
+++ b/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;
};
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 18d05ef23..ded40244d 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/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>
) : (
