This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch feat-dora-config
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit e3eae74fe5c4b3a19685dfc66a18a54224bd88fd
Author: mintsweet <0x1304...@gmail.com>
AuthorDate: Fri Sep 20 20:34:51 2024 +1200
fix: some error about miller column
---
config-ui/package.json | 2 +-
.../components/data-scope-remote/search-local.tsx | 139 ++++++++++++---------
.../components/data-scope-remote/search-remote.tsx | 8 +-
.../plugins/components/data-scope-select/index.tsx | 26 ++--
config-ui/yarn.lock | 10 +-
5 files changed, 100 insertions(+), 85 deletions(-)
diff --git a/config-ui/package.json b/config-ui/package.json
index 9a7139bd6..6bf071988 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -25,7 +25,7 @@
"@ant-design/icons": "^5.4.0",
"@fontsource/roboto": "^5.0.14",
"@mints/hooks": "^1.0.0-beta.2",
- "@mints/miller-columns": "^2.0.0-beta.1",
+ "@mints/miller-columns": "^2.0.0-beta.5",
"@mui/icons-material": "^5.16.7",
"@mui/material": "^5.16.7",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
diff --git
a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
index 7319c1213..67b8f4a7f 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
@@ -31,13 +31,9 @@ import * as S from './styled';
type StateType = {
status: string;
scope: any[];
- originData: any[];
};
-const reducer = (
- state: StateType,
- action: { type: string; payload?: Pick<Partial<StateType>, 'scope' |
'originData'> },
-) => {
+const reducer = (state: StateType, action: { type: string; payload?:
Pick<Partial<StateType>, 'scope'> }) => {
switch (action.type) {
case 'LOADING':
return {
@@ -48,7 +44,6 @@ const reducer = (
return {
...state,
scope: [...state.scope, ...(action.payload?.scope ?? [])],
- originData: [...state.originData, ...(action.payload?.originData ??
[])],
};
case 'DONE':
return {
@@ -74,50 +69,49 @@ export const SearchLocal = ({ mode, plugin, connectionId,
config, disabledScope,
const [open, setOpen] = useState(false);
const [search, setSearch] = useState('');
- const [{ status, scope, originData }, dispatch] = useReducer(reducer, {
+ const [{ status, scope }, dispatch] = useReducer(reducer, {
status: 'idle',
scope: [],
- originData: [],
});
const searchDebounce = useDebounce(search, { wait: 500 });
const request = useCallback(
async (groupId?: string | number, params?: any) => {
- if (scope.length) {
- return {
- data: searchDebounce
- ? scope
- .filter((it) => it.title.includes(searchDebounce) &&
!it.canExpand)
- .map((it) => ({ ...it, parentId: null }))
- : scope.filter((it) => it.parentId === (groupId ?? null)),
- hasMore: status === 'loading' ? true : false,
- originData,
- };
- }
-
const res = await API.scope.remote(plugin, connectionId, {
groupId: groupId ?? null,
pageToken: params?.nextPageToken,
});
- const data = res.children.map((it) => ({
- parentId: it.parentId,
- id: it.id,
- title: it.name ?? it.fullName,
- canExpand: it.type === 'group',
- }));
-
return {
- data,
+ data: res.children.map((it) => ({
+ parentId: it.parentId,
+ id: it.id,
+ title: it.name ?? it.fullName,
+ canExpand: it.type === 'group',
+ original: it,
+ })),
hasMore: !!res.nextPageToken,
params: {
nextPageToken: res.nextPageToken,
},
- originData: res.children,
};
},
- [plugin, connectionId, scope, status, searchDebounce],
+ [plugin, connectionId, scope, searchDebounce],
+ );
+
+ const requestAll = useCallback(
+ async (groupId?: string | number) => {
+ return {
+ data: searchDebounce
+ ? scope
+ .filter((it) => it.title.includes(searchDebounce) &&
!it.canExpand)
+ .map((it) => ({ ...it, parentId: null }))
+ : scope.filter((it) => it.parentId === (groupId ?? null)),
+ hasMore: false,
+ };
+ },
+ [scope, searchDebounce],
);
const handleRequestAll = async () => {
@@ -135,9 +129,9 @@ export const SearchLocal = ({ mode, plugin, connectionId,
config, disabledScope,
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
+ original: it,
}));
-
- dispatch({ type: 'APPEND', payload: { scope: data, originData:
res.children } });
+ dispatch({ type: 'APPEND', payload: { scope: data } });
if (res.nextPageToken) {
await getData(groupId, res.nextPageToken);
@@ -172,17 +166,17 @@ export const SearchLocal = ({ mode, plugin, connectionId,
config, disabledScope,
</Space>
</Block>
<Block>
- {(status === 'loading' || status === 'cancel') && (
+ {status === 'loading' && (
<S.JobLoad>
<Loading style={{ marginRight: 8 }} size={20} />
- Loading: <span className="count">{scope.length}</span> scopes found
+ Loading: <span className="count">{scope.filter((sc) =>
!sc.canExpand).length}</span> scopes found
</S.JobLoad>
)}
{status === 'done' && (
<S.JobLoad>
<CheckCircleFilled style={{ color: '#4DB764' }} />
- <span className="count">{scope.length}</span> scopes found
+ <span className="count">{scope.filter((sc) =>
!sc.canExpand).length}</span> scopes found
</S.JobLoad>
)}
@@ -195,32 +189,59 @@ export const SearchLocal = ({ mode, plugin, connectionId,
config, disabledScope,
)}
</Block>
<Block>
+ {status === 'idle' && (
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={request}
+ columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
+ columnHeight={300}
+ mode={mode}
+ renderTitle={(id) =>
+ !id &&
+ config.millerColumn?.firstColumnTitle && (
+
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
+ )
+ }
+ renderLoading={() => <Loading size={20} style={{ padding: '4px
12px' }} />}
+ renderError={() => <span style={{ color: 'red' }}>Something
Error</span>}
+ selectable
+ disabledIds={(disabledScope ?? []).map((it) => it.id)}
+ selectedIds={selectedScope.map((it) => it.id)}
+ onSelectedIds={(_, data) => onChange(data ?? [])}
+ />
+ )}
{status === 'done' && (
- <Input prefix={<SearchOutlined />} value={search} onChange={(e) =>
setSearch(e.target.value)} />
+ <>
+ <Input prefix={<SearchOutlined />} value={search} onChange={(e) =>
setSearch(e.target.value)} />
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={requestAll}
+ columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
+ columnHeight={300}
+ mode={mode}
+ renderTitle={(id) =>
+ !id &&
+ config.millerColumn?.firstColumnTitle && (
+
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
+ )
+ }
+ renderLoading={() => <Loading size={20} style={{ padding: '4px
12px' }} />}
+ renderError={() => <span style={{ color: 'red' }}>Something
Error</span>}
+ selectable
+ disabledIds={(disabledScope ?? []).map((it) => it.id)}
+ selectedIds={selectedScope.map((it) => it.id)}
+ onSelectedIds={(_, data) => onChange(data ?? [])}
+ />
+ </>
)}
- <MillerColumns
- bordered
- theme={{
- colorPrimary: '#7497f7',
- borderColor: '#dbe4fd',
- }}
- request={request}
- columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
- columnHeight={300}
- mode={mode}
- renderTitle={(id) =>
- !id &&
- config.millerColumn?.firstColumnTitle && (
-
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
- )
- }
- renderLoading={() => <Loading size={20} style={{ padding: '4px 12px'
}} />}
- renderError={() => <span style={{ color: 'red' }}>Something
Error</span>}
- selectable
- disabledIds={(disabledScope ?? []).map((it) => it.id)}
- selectedIds={selectedScope.map((it) => it.id)}
- onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) =>
ids.includes(it.id)))}
- />
</Block>
<Modal open={open} centered onOk={handleRequestAll} onCancel={() =>
setOpen(false)}>
<Message content={`This operation may take a long time, as it iterates
through all the ${config.title}.`} />
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 b87cc55fd..0510ad29a 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
@@ -48,7 +48,6 @@ export const SearchRemote = ({ mode, plugin, connectionId,
config, disabledScope
let data = [];
let hasMore = false;
let newParams = {};
- let originData = [];
if (!searchDebounce) {
const res = await API.scope.remote(plugin, connectionId, {
@@ -61,13 +60,13 @@ export const SearchRemote = ({ mode, plugin, connectionId,
config, disabledScope
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
+ original: it,
}));
hasMore = !!res.nextPageToken;
newParams = {
pageToken: res.nextPageToken,
};
- originData = res.children;
} else {
const res = await API.scope.searchRemote(plugin, connectionId, {
search: searchDebounce,
@@ -80,6 +79,7 @@ export const SearchRemote = ({ mode, plugin, connectionId,
config, disabledScope
id: it.id,
title: it.fullName ?? it.name,
canExpand: it.type === 'group',
+ original: it,
}));
hasMore = res.children.length === res.pageSize;
@@ -87,14 +87,12 @@ export const SearchRemote = ({ mode, plugin, connectionId,
config, disabledScope
page: (params?.page ?? 0) + 1,
count: (params?.count ?? 0) + res.children.length,
};
- originData = res.children;
}
return {
data,
hasMore,
params: newParams,
- originData,
};
},
[plugin, connectionId, searchDebounce],
@@ -147,7 +145,7 @@ export const SearchRemote = ({ mode, plugin, connectionId,
config, disabledScope
selectable
disabledIds={disabledScope.map((it) => it.id)}
selectedIds={selectedScope.map((it) => it.id)}
- onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) =>
ids.includes(it.id)))}
+ onSelectedIds={(_, data) => onChange(data ?? [])}
/>
</Block>
</>
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 9ac0bfe18..d6913cee0 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -73,20 +73,18 @@ export const DataScopeSelect = ({
searchTerm: searchDebounce,
});
- const data = res.scopes.map((it) => ({
- parentId: null,
- id: getPluginScopeId(plugin, it.scope),
- title: it.scope.fullName ?? it.scope.name,
- canExpand: false,
- }));
-
return {
- data,
+ data: res.scopes.map((it) => ({
+ parentId: null,
+ id: getPluginScopeId(plugin, it.scope),
+ title: it.scope.fullName ?? it.scope.name,
+ canExpand: false,
+ original: it,
+ })),
hasMore: res.count > (params?.page ?? 1) * 20,
params: {
page: (params?.page ?? 1) + 1,
},
- originData: res.scopes,
};
},
[plugin, connectionId, searchDebounce, version],
@@ -168,12 +166,10 @@ export const DataScopeSelect = ({
onSelectedIds={(ids, data) => {
setSelectedIds(ids);
setSelectedScope(
- data
- ?.filter((it) => ids.includes(getPluginScopeId(plugin,
it.scope)))
- .map((it) => ({
- id: getPluginScopeId(plugin, it.scope),
- name: it.scope.fullName ?? it.scope.name,
- })) ?? [],
+ (data ?? []).map((it) => ({
+ id: it.scope.id,
+ name: it.scope.name,
+ })),
);
}}
/>
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index c47aa3ab2..9e36a73e3 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -2087,9 +2087,9 @@ __metadata:
languageName: node
linkType: hard
-"@mints/miller-columns@npm:^2.0.0-beta.1":
- version: 2.0.0-beta.1
- resolution: "@mints/miller-columns@npm:2.0.0-beta.1"
+"@mints/miller-columns@npm:^2.0.0-beta.5":
+ version: 2.0.0-beta.5
+ resolution: "@mints/miller-columns@npm:2.0.0-beta.5"
dependencies:
"@fontsource/roboto": ^5.0.14
"@mui/material": ^5.16.7
@@ -2108,7 +2108,7 @@ __metadata:
react-dom: ^18.2.0
react-infinite-scroll-component: ^6.1.0
styled-components: ^6.1.12
- checksum:
ca49de90e123850029cf1db5ac41567bdd04c0d8b60db3783260265e5b283fddd576c38b573de804a7f35c44e228045b8fa5000d9b8e8a75c53c3ce05ca5deec
+ checksum:
2ff5e7e942a1f5e592d7fe53d5522a59d72075604e80cfcf816d70d67ad33d3982b699770cdab01065bff19a219117b51017ea878ce5f015f120fb6623431839
languageName: node
linkType: hard
@@ -3911,7 +3911,7 @@ __metadata:
"@ant-design/icons": ^5.4.0
"@fontsource/roboto": ^5.0.14
"@mints/hooks": ^1.0.0-beta.2
- "@mints/miller-columns": ^2.0.0-beta.1
+ "@mints/miller-columns": ^2.0.0-beta.5
"@mui/icons-material": ^5.16.7
"@mui/material": ^5.16.7
"@mui/styled-engine-sc": ^6.0.0-alpha.18
