You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/12/08 05:37:16 UTC
(incubator-devlake) branch fix-6596 created (now 687572e41)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch fix-6596
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at 687572e41 fix(config-ui): improve data scope remote select component
This branch includes the following new commits:
new 687572e41 fix(config-ui): improve data scope remote select component
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(incubator-devlake) 01/01: fix(config-ui): improve data scope remote select component
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch fix-6596
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 687572e412e13805897f8a913273659e25372a89
Author: mintsweet <0x...@gmail.com>
AuthorDate: Fri Dec 8 13:36:59 2023 +0800
fix(config-ui): improve data scope remote select component
---
.../components/data-scope-remote/search-local.tsx | 31 ++++++++++++----------
.../components/data-scope-remote/search-remote.tsx | 31 ++++++++++++----------
2 files changed, 34 insertions(+), 28 deletions(-)
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 de090b3ca..9dd819b58 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
@@ -18,7 +18,7 @@
import { useState, useEffect, useMemo } from 'react';
import { CheckCircleFilled } from '@ant-design/icons';
-import { Form, Select, Button, Input, Modal, message } from 'antd';
+import { Form, Space, Tag, Button, Input, Modal, message } from 'antd';
import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
import { MillerColumnsSelect } from 'miller-columns-select';
import { useDebounce } from 'ahooks';
@@ -61,11 +61,6 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
const [query, setQuery] = useState('');
const search = useDebounce(query, { wait: 500 });
- const [selectedIds, selectedOptions] = useMemo(
- () => [selectedScope.map((sc) => sc.id), selectedScope.map((sc) => ({ label: sc.fullName, value: sc.id }))],
- [selectedScope],
- );
-
const scopes = useMemo(
() =>
search
@@ -192,14 +187,22 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
return (
<Form layout="vertical">
<Form.Item label={config.title} required>
- <Select
- style={{ width: '100%' }}
- disabled
- suffixIcon={null}
- mode="tags"
- value={selectedIds}
- options={selectedOptions}
- />
+ <Space wrap>
+ {selectedScope.length ? (
+ selectedScope.map((sc) => (
+ <Tag
+ key={sc.id}
+ color="blue"
+ closable
+ onClose={() => onChange(selectedScope.filter((it) => it.id !== sc.id))}
+ >
+ {sc.fullName}
+ </Tag>
+ ))
+ ) : (
+ <span>Please select scope...</span>
+ )}
+ </Space>
</Form.Item>
<Form.Item>
{(status === 'loading' || status === 'cancel') && (
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 12b3eeb34..0d8d92f74 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
@@ -18,7 +18,7 @@
import { useState, useEffect, useMemo } from 'react';
import { SearchOutlined } from '@ant-design/icons';
-import { Form, Select, Input, message } from 'antd';
+import { Form, Space, Tag, Input, message } from 'antd';
import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
import MillerColumnsSelect from 'miller-columns-select';
import { useDebounce } from 'ahooks';
@@ -68,11 +68,6 @@ export const SearchRemote = ({ plugin, connectionId, config, disabledScope, sele
const searchDebounce = useDebounce(search.query, { wait: 500 });
- const [selectedIds, selectedOptions] = useMemo(
- () => [selectedScope.map((sc) => sc.id), selectedScope.map((sc) => ({ label: sc.fullName, value: sc.id }))],
- [selectedScope],
- );
-
const allItems = useMemo(
() =>
uniqBy(
@@ -156,14 +151,22 @@ export const SearchRemote = ({ plugin, connectionId, config, disabledScope, sele
return (
<Form layout="vertical">
<Form.Item label={config.title} required>
- <Select
- style={{ width: '100%' }}
- disabled
- suffixIcon={null}
- mode="tags"
- value={selectedIds}
- options={selectedOptions}
- />
+ <Space wrap>
+ {selectedScope.length ? (
+ selectedScope.map((sc) => (
+ <Tag
+ key={sc.id}
+ color="blue"
+ closable
+ onClose={() => onChange(selectedScope.filter((it) => it.id !== sc.id))}
+ >
+ {sc.fullName}
+ </Tag>
+ ))
+ ) : (
+ <span>Please select scope...</span>
+ )}
+ </Space>
</Form.Item>
<Form.Item>
<Input