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 2024/09/10 07:53:08 UTC
(incubator-devlake) branch refactor-miller-columns created (now a2b56399d)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch refactor-miller-columns
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at a2b56399d refactor: simplify miller columns
This branch includes the following new commits:
new a2b56399d refactor: simplify miller columns
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: refactor: simplify miller columns
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch refactor-miller-columns
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit a2b56399d9256b082b419aefa688d609a25490a2
Author: mintsweet <0x...@gmail.com>
AuthorDate: Tue Sep 10 19:52:56 2024 +1200
refactor: simplify miller columns
---
config-ui/package.json | 9 +-
config-ui/src/api/scope/index.ts | 2 +-
.../components/data-scope-remote/search-local.tsx | 273 ++++++--------
.../components/data-scope-remote/search-remote.tsx | 244 +++++--------
.../plugins/components/data-scope-select/index.tsx | 210 ++++++-----
.../webhook/components/selector-dialog.tsx | 34 +-
config-ui/yarn.lock | 395 +++++++++++++++++----
7 files changed, 661 insertions(+), 506 deletions(-)
diff --git a/config-ui/package.json b/config-ui/package.json
index 99d10bf19..62fe1e327 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -24,6 +24,11 @@
"dependencies": {
"@ahooksjs/use-url-state": "^3.5.1",
"@ant-design/icons": "^5.3.0",
+ "@fontsource/roboto": "^5.0.14",
+ "@mints/miller-columns": "^2.0.0-beta.1",
+ "@mui/icons-material": "^5.16.7",
+ "@mui/material": "^5.16.7",
+ "@mui/styled-engine-sc": "^6.0.0-alpha.18",
"@reduxjs/toolkit": "^2.2.1",
"ahooks": "^3.7.10",
"antd": "^5.14.2",
@@ -34,7 +39,6 @@
"dayjs": "^1.11.10",
"file-saver": "^2.0.5",
"lodash": "^4.17.21",
- "miller-columns-select": "1.4.1",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
@@ -69,5 +73,8 @@
"typescript": "^5.1.6",
"vite": "^5.1.4",
"vite-plugin-svgr": "^4.2.0"
+ },
+ "resolutions": {
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@^6.0.0-alpha.18"
}
}
diff --git a/config-ui/src/api/scope/index.ts b/config-ui/src/api/scope/index.ts
index 7007314f6..b9d19a672 100644
--- a/config-ui/src/api/scope/index.ts
+++ b/config-ui/src/api/scope/index.ts
@@ -91,7 +91,7 @@ export const searchRemote = (
plugin: string,
connectionId: ID,
data: SearchRemoteQuery,
-): Promise<{ children: RemoteScope[]; count: number }> =>
+): Promise<{ children: RemoteScope[]; page: number; pageSize: number }> =>
request(`/plugins/${plugin}/connections/${connectionId}/search-remote-scopes`, {
method: 'get',
data,
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 70660c71f..716abf0e0 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
@@ -16,20 +16,50 @@
*
*/
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useReducer, useCallback } from 'react';
import { CheckCircleFilled, SearchOutlined } from '@ant-design/icons';
-import { Space, Tag, Button, Input, Modal, message } from 'antd';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import { MillerColumnsSelect } from 'miller-columns-select';
+import { Space, Tag, Button, Input, Modal } from 'antd';
+import { MillerColumns } from '@mints/miller-columns';
import { useDebounce } from 'ahooks';
import API from '@/api';
-import { Loading, Block, Message } from '@/components';
-import { IPluginConfig } from '@/types';
+import { Block, Loading, Message } from '@/components';
+import type { IPluginConfig } from '@/types';
-import * as T from './types';
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'> },
+) => {
+ switch (action.type) {
+ case 'LOADING':
+ return {
+ ...state,
+ status: 'loading',
+ };
+ case 'APPEND':
+ return {
+ ...state,
+ scope: [...state.scope, ...(action.payload?.scope ?? [])],
+ originData: [...state.originData, ...(action.payload?.originData ?? [])],
+ };
+ case 'DONE':
+ return {
+ ...state,
+ status: 'done',
+ };
+ default:
+ return state;
+ }
+};
+
interface Props {
mode: 'single' | 'multiple';
plugin: string;
@@ -40,149 +70,85 @@ interface Props {
onChange: (selectedScope: any[]) => void;
}
-let canceling = false;
-
export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope, selectedScope, onChange }: Props) => {
- const [miller, setMiller] = useState<{
- items: McsItem<T.ResItem>[];
- loadedIds: ID[];
- expandedIds: ID[];
- errorId?: ID | null;
- nextTokenMap: Record<ID, string>;
- }>({
- items: [],
- loadedIds: [],
- expandedIds: [],
- nextTokenMap: {},
- });
-
const [open, setOpen] = useState(false);
- const [status, setStatus] = useState('init');
-
- const [query, setQuery] = useState('');
- const search = useDebounce(query, { wait: 500 });
-
- const scopes = useMemo(
- () =>
- search
- ? miller.items
- .filter((it) => it.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
- .filter((it) => it.type !== 'group')
- .map((it) => ({
- ...it,
- parentId: null,
- }))
- : miller.items,
- [search, miller.items],
- );
+ const [search, setSearch] = useState('');
- const getItems = async ({
- groupId,
- currentPageToken,
- loadAll,
- }: {
- groupId: ID | null;
- currentPageToken?: string;
- loadAll?: boolean;
- }) => {
- if (canceling) {
- canceling = false;
- setStatus('init');
- return;
- }
+ const [{ status, scope, originData }, dispatch] = useReducer(reducer, {
+ status: 'idle',
+ scope: [],
+ originData: [],
+ });
- let newItems: McsItem<T.ResItem>[] = [];
- let nextPageToken = '';
- let errorId: ID | null;
+ 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,
+ };
+ }
- try {
const res = await API.scope.remote(plugin, connectionId, {
- groupId,
- pageToken: currentPageToken,
+ groupId: groupId ?? null,
+ pageToken: params?.nextPageToken,
});
- newItems = (res.children ?? []).map((it) => ({
- ...it,
- title: it.name,
+ const data = res.children.map((it) => ({
+ parentId: it.parentId,
+ id: it.id,
+ title: it.name ?? it.fullName,
+ canExpand: it.type === 'group',
}));
- nextPageToken = res.nextPageToken;
- } catch (err: any) {
- errorId = groupId;
- message.error(err.response.data.message);
- }
-
- if (nextPageToken) {
- setMiller((m) => ({
- ...m,
- items: [...m.items, ...newItems],
- expandedIds: [...m.expandedIds, groupId ?? 'root'],
- nextTokenMap: {
- ...m.nextTokenMap,
- [`${groupId ? groupId : 'root'}`]: nextPageToken,
+ return {
+ data,
+ hasMore: !!res.nextPageToken,
+ params: {
+ nextPageToken: res.nextPageToken,
},
- }));
-
- if (loadAll) {
- await getItems({ groupId, currentPageToken: nextPageToken, loadAll });
- }
- } else {
- setMiller((m) => ({
- ...m,
- items: [...m.items, ...newItems],
- expandedIds: [...m.expandedIds, groupId ?? 'root'],
- loadedIds: [...m.loadedIds, groupId ?? 'root'],
- errorId,
- }));
+ originData: res.children,
+ };
+ },
+ [plugin, connectionId, scope, status, searchDebounce],
+ );
- const groupItems = newItems.filter((it) => it.type === 'group');
+ const handleRequestAll = async () => {
+ setOpen(false);
+ dispatch({ type: 'LOADING' });
- if (loadAll && groupItems.length) {
- groupItems.forEach(async (it) => await getItems({ groupId: it.id, loadAll: true }));
- }
- }
- };
+ const getData = async (groupId?: string | number, currentPageToken?: string) => {
+ const res = await API.scope.remote(plugin, connectionId, {
+ groupId: groupId ?? null,
+ pageToken: currentPageToken,
+ });
- useEffect(() => {
- getItems({ groupId: null });
- }, []);
+ const data = res.children.map((it) => ({
+ parentId: it.parentId,
+ id: it.id,
+ title: it.name ?? it.fullName,
+ canExpand: it.type === 'group',
+ }));
- useEffect(() => {
- if (
- miller.items.length &&
- !miller.items.filter((it) => it.type === 'group' && !miller.loadedIds.includes(it.id)).length
- ) {
- setStatus('loaded');
- }
- }, [miller]);
+ dispatch({ type: 'APPEND', payload: { scope: data, originData: res.children } });
- const handleLoadAllScopes = async () => {
- setOpen(false);
- setStatus('loading');
+ if (res.nextPageToken) {
+ await getData(groupId, res.nextPageToken);
+ }
- if (!miller.loadedIds.includes('root')) {
- await getItems({
- groupId: null,
- currentPageToken: miller.nextTokenMap['root'],
- loadAll: true,
- });
- }
+ await Promise.all(data.filter((it) => it.canExpand).map((it) => getData(it.id)));
+ };
- const noLoadedItems = miller.items.filter((it) => it.type === 'group' && !miller.loadedIds.includes(it.id));
- if (noLoadedItems.length) {
- noLoadedItems.forEach(async (it) => {
- await getItems({
- groupId: it.id,
- currentPageToken: miller.nextTokenMap[it.id],
- loadAll: true,
- });
- });
- }
- };
+ await getData();
- const handleCancelLoadAllScopes = () => {
- setStatus('cancel');
- canceling = true;
+ dispatch({ type: 'DONE' });
};
return (
@@ -209,59 +175,54 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,
{(status === 'loading' || status === 'cancel') && (
<S.JobLoad>
<Loading style={{ marginRight: 8 }} size={20} />
- Loading: <span className="count">{miller.items.length}</span> scopes found
- <Button style={{ marginLeft: 8 }} loading={status === 'cancel'} onClick={handleCancelLoadAllScopes}>
- Cancel
- </Button>
+ Loading: <span className="count">{scope.length}</span> scopes found
</S.JobLoad>
)}
- {status === 'loaded' && (
+ {status === 'done' && (
<S.JobLoad>
<CheckCircleFilled style={{ color: '#4DB764' }} />
- <span className="count">{miller.items.length}</span> scopes found
+ <span className="count">{scope.length}</span> scopes found
</S.JobLoad>
)}
- {status === 'init' && (
+ {status === 'idle' && (
<S.JobLoad>
- <Button type="primary" disabled={!miller.items.length} onClick={() => setOpen(true)}>
+ <Button type="primary" onClick={() => setOpen(true)}>
Load all scopes to search by keywords
</Button>
</S.JobLoad>
)}
</Block>
<Block>
- {status === 'loaded' && (
- <Input prefix={<SearchOutlined />} value={query} onChange={(e) => setQuery(e.target.value)} />
+ {status === 'done' && (
+ <Input prefix={<SearchOutlined />} value={search} onChange={(e) => setSearch(e.target.value)} />
)}
- <MillerColumnsSelect
- mode={mode}
- items={scopes}
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={request}
columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
columnHeight={300}
- getCanExpand={(it) => it.type === 'group'}
- getHasMore={(id) => !miller.loadedIds.includes(id ?? 'root')}
- getHasError={(id) => id === miller.errorId}
- onExpand={(id: McsID) => getItems({ groupId: id })}
- onScroll={(id: McsID | null) =>
- getItems({ groupId: id, currentPageToken: miller.nextTokenMap[id ?? 'root'] })
- }
- renderTitle={(column: McsColumn) =>
- !column.parentId &&
+ 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)}
- onSelectItemIds={(selectedIds: ID[]) => onChange(miller.items.filter((it) => selectedIds.includes(it.id)))}
- expandedIds={miller.expandedIds}
+ onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) => ids.includes(it.id)))}
/>
</Block>
- <Modal open={open} centered onOk={handleLoadAllScopes} onCancel={() => setOpen(false)}>
+ <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}.`} />
</Modal>
</>
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 4679b8564..0f6710fe8 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
@@ -16,19 +16,16 @@
*
*/
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useCallback } from 'react';
import { SearchOutlined } from '@ant-design/icons';
-import { Space, Tag, Input, message } from 'antd';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
+import { Space, Tag, Input } from 'antd';
import { useDebounce } from 'ahooks';
-import { uniqBy } from 'lodash';
+import { MillerColumns } from '@mints/miller-columns';
import API from '@/api';
-import { Loading, Block } from '@/components';
-import { IPluginConfig } from '@/types';
+import { Block, Loading } from '@/components';
+import type { IPluginConfig } from '@/types';
-import * as T from './types';
import * as S from './styled';
interface Props {
@@ -42,116 +39,67 @@ interface Props {
}
export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope, selectedScope, onChange }: Props) => {
- const [miller, setMiller] = useState<{
- items: McsItem<T.ResItem>[];
- loadedIds: ID[];
- errorId?: ID | null;
- nextTokenMap: Record<ID, string>;
- }>({
- items: [],
- loadedIds: [],
- nextTokenMap: {},
- });
-
- const [search, setSearch] = useState<{
- loading: boolean;
- items: McsItem<T.ResItem>[];
- currentItems: McsItem<T.ResItem>[];
- query: string;
- page: number;
- total: number;
- }>({
- loading: true,
- items: [],
- currentItems: [],
- query: '',
- page: 1,
- total: 0,
- });
-
- const searchDebounce = useDebounce(search.query, { wait: 500 });
-
- const allItems = useMemo(
- () =>
- uniqBy(
- [...miller.items, ...search.items].filter((it) => it.type === 'scope'),
- 'id',
- ),
- [miller.items, search.items],
+ const [search, setSearch] = useState('');
+
+ const searchDebounce = useDebounce(search, { wait: 500 });
+
+ const request = useCallback(
+ async (groupId?: string | number, params?: any) => {
+ let data = [];
+ let hasMore = false;
+ let newParams = {};
+ let originData = [];
+
+ if (!searchDebounce) {
+ const res = await API.scope.remote(plugin, connectionId, {
+ groupId: groupId ?? null,
+ pageToken: params?.pageToken,
+ });
+
+ data = res.children.map((it) => ({
+ parentId: it.parentId,
+ id: it.id,
+ title: it.name ?? it.fullName,
+ canExpand: it.type === 'group',
+ }));
+
+ hasMore = !!res.nextPageToken;
+ newParams = {
+ pageToken: res.nextPageToken,
+ };
+ originData = res.children;
+ } else {
+ const res = await API.scope.searchRemote(plugin, connectionId, {
+ search: searchDebounce,
+ page: params?.page ?? 1,
+ pageSize: 20,
+ });
+
+ data = res.children.map((it) => ({
+ parentId: it.parentId,
+ id: it.id,
+ title: it.fullName ?? it.name,
+ canExpand: it.type === 'group',
+ }));
+
+ hasMore = res.children.length === res.pageSize;
+ newParams = {
+ page: (params?.page ?? 0) + 1,
+ count: (params?.count ?? 0) + res.children.length,
+ };
+ originData = res.children;
+ }
+
+ return {
+ data,
+ hasMore,
+ params: newParams,
+ originData,
+ };
+ },
+ [plugin, connectionId, searchDebounce],
);
- const getItems = async (groupId: ID | null, currentPageToken?: string) => {
- let newItems: McsItem<T.ResItem>[] = [];
- let nextPageToken = '';
- let errorId: ID | null;
-
- try {
- const res = await API.scope.remote(plugin, connectionId, {
- groupId,
- pageToken: currentPageToken,
- });
-
- newItems = (res.children ?? []).map((it) => ({
- ...it,
- title: it.name,
- }));
-
- nextPageToken = res.nextPageToken;
- } catch (err: any) {
- errorId = groupId;
- message.error(err.response.data.message);
- }
-
- if (nextPageToken && newItems.length) {
- setMiller((m) => ({
- ...m,
- items: [...m.items, ...newItems],
- nextTokenMap: {
- ...m.nextTokenMap,
- [`${groupId ? groupId : 'root'}`]: nextPageToken,
- },
- }));
- } else {
- setMiller((m) => ({
- ...m,
- items: [...m.items, ...newItems],
- loadedIds: [...m.loadedIds, groupId ?? 'root'],
- errorId,
- }));
- }
- };
-
- useEffect(() => {
- getItems(null);
- }, []);
-
- const searchItems = async () => {
- if (!searchDebounce) return;
-
- const res = await API.scope.searchRemote(plugin, connectionId, {
- search: searchDebounce,
- page: search.page,
- pageSize: 20,
- });
-
- const newItems = (res.children ?? []).map((it) => ({
- ...it,
- title: it.fullName ?? it.name,
- }));
-
- setSearch((s) => ({
- ...s,
- loading: false,
- items: [...allItems, ...newItems],
- currentItems: newItems,
- total: res.count,
- }));
- };
-
- useEffect(() => {
- searchItems();
- }, [searchDebounce, search.page]);
-
return (
<>
<Block title={config.title} required>
@@ -176,47 +124,31 @@ export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope
<Input
prefix={<SearchOutlined />}
placeholder={config.searchPlaceholder ?? 'Search'}
- value={search.query}
- onChange={(e) => setSearch({ ...search, query: e.target.value, loading: true, currentItems: [] })}
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
+ />
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={request}
+ columnCount={searchDebounce ? 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' }} />}
+ selectable
+ disabledIds={disabledScope.map((it) => it.id)}
+ selectedIds={selectedScope.map((it) => it.id)}
+ onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) => ids.includes(it.id)))}
/>
- {!searchDebounce ? (
- <MillerColumnsSelect
- mode={mode}
- items={miller.items}
- columnCount={config.millerColumn?.columnCount ?? 1}
- columnHeight={300}
- getCanExpand={(it) => it.type === 'group'}
- getHasMore={(id) => !miller.loadedIds.includes(id ?? 'root')}
- getHasError={(id) => id === miller.errorId}
- onExpand={(id: McsID) => getItems(id, miller.nextTokenMap[id])}
- onScroll={(id: McsID | null) => getItems(id, miller.nextTokenMap[id ?? 'root'])}
- renderTitle={(column: McsColumn) =>
- !column.parentId &&
- 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>}
- disabledIds={(disabledScope ?? []).map((it) => it.id)}
- selectedIds={selectedScope.map((it) => it.id)}
- onSelectItemIds={(selectedIds: ID[]) => onChange(allItems.filter((it) => selectedIds.includes(it.id)))}
- />
- ) : (
- <MillerColumnsSelect
- mode={mode}
- items={search.currentItems}
- columnCount={1}
- columnHeight={300}
- getCanExpand={() => false}
- getHasMore={() => search.loading}
- onScroll={() => setSearch({ ...search, page: search.page + 1 })}
- renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
- disabledIds={(disabledScope ?? []).map((it) => it.id)}
- selectedIds={selectedScope.map((it) => it.id)}
- onSelectItemIds={(selectedIds: ID[]) => onChange(allItems.filter((it) => selectedIds.includes(it.id)))}
- />
- )}
</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 213b7ed25..02f252ef4 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -16,16 +16,14 @@
*
*/
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
import { RedoOutlined, PlusOutlined } from '@ant-design/icons';
-import { Flex, Select, Button } from 'antd';
+import { Flex, Button, Input, Space, Tag } from 'antd';
import { useDebounce } from 'ahooks';
-import type { McsItem } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
+import { MillerColumns } from '@mints/miller-columns';
import API from '@/api';
import { Loading, Block, ExternalLink, Message } from '@/components';
-import { useRefreshData } from '@/hooks';
import { getPluginScopeId } from '@/plugins';
interface Props {
@@ -45,74 +43,51 @@ export const DataScopeSelect = ({
onSubmit,
onCancel,
}: Props) => {
- const [loading, setLoading] = useState(false);
- const [query, setQuery] = useState('');
- const [items, setItems] = useState<McsItem<{ data: 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);
+ const [originData, setOriginData] = useState<any[]>([]);
+ const [search, setSearch] = useState('');
+ const [version, setVersion] = useState(0);
+
+ const searchDebounce = useDebounce(search, { wait: 500 });
useEffect(() => {
setSelectedIds((initialScope ?? []).map((sc) => sc.id));
}, []);
- const getDataScope = async (page: number) => {
- if (page === 1) {
- setLoading(true);
- }
+ const request = useCallback(
+ async (_?: string | number, params?: any) => {
+ const res = await API.scope.list(plugin, connectionId, {
+ page: params?.page ?? 1,
+ pageSize: 20,
+ searchTerm: searchDebounce,
+ });
- const res = await API.scope.list(plugin, connectionId, { page, pageSize });
- setItems((items) => [
- ...items,
- ...res.scopes.map((sc) => ({
+ const data = res.scopes.map((it) => ({
parentId: null,
- id: getPluginScopeId(plugin, sc.scope),
- title: sc.scope.fullName ?? sc.scope.name,
- data: sc.scope,
- })),
- ]);
-
- setTotal(res.count);
- setLoading(false);
- };
-
- useEffect(() => {
- getDataScope(page);
- }, [page]);
-
- const search = useDebounce(query, { wait: 500 });
-
- const { ready, data } = useRefreshData(
- async () => await API.scope.list(plugin, connectionId, { searchTerm: search }),
- [search],
- );
-
- const searchOptions = useMemo(
- () =>
- data?.scopes.map((sc) => ({
- label: sc.scope.fullName ?? sc.scope.name,
- value: getPluginScopeId(plugin, sc.scope),
- })) ?? [],
- [data],
+ id: getPluginScopeId(plugin, it.scope),
+ title: it.scope.fullName ?? it.scope.name,
+ canExpand: false,
+ }));
+
+ return {
+ data,
+ hasMore: res.count > (params?.page ?? 1) * 20,
+ params: {
+ page: (params?.page ?? 1) + 1,
+ },
+ originData: res.scopes,
+ };
+ },
+ [plugin, connectionId, searchDebounce, version],
);
- const handleScroll = () => setPage(page + 1);
-
const handleSubmit = () => onSubmit?.(selectedIds);
- const handleRefresh = () => {
- setQuery('');
- setItems([]);
- getDataScope(1);
- };
-
return (
<Block
title="Select Data Scope"
description={
- items.length ? (
+ 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{' '}
@@ -130,65 +105,80 @@ export const DataScopeSelect = ({
}
required
>
- {loading ? (
- <Loading />
- ) : items.length ? (
- <Flex vertical gap="middle">
- {showWarning ? (
- <Message
- style={{ marginBottom: 24 }}
- content={
- <>
- Unchecking Data Scope below will only remove it from the current Project and will not delete the
- historical data. If you would like to delete the data of Data Scope, please{' '}
- <ExternalLink link={`/connections/${plugin}/${connectionId}`}>go to the Connection page</ExternalLink>
- .
- </>
- }
- />
+ <Flex vertical gap="middle">
+ {showWarning ? (
+ <Message
+ style={{ marginBottom: 24 }}
+ content={
+ <>
+ Unchecking Data Scope below will only remove it from the current Project and will not delete the
+ historical data. If you would like to delete the data of Data Scope, please{' '}
+ <ExternalLink link={`/connections/${plugin}/${connectionId}`}>go to the Connection page</ExternalLink>.
+ </>
+ }
+ />
+ ) : (
+ <Flex>
+ <Button type="primary" icon={<RedoOutlined />} onClick={() => setVersion(version + 1)}>
+ Refresh Data Scope
+ </Button>
+ </Flex>
+ )}
+ <Space wrap>
+ {selectedIds.length ? (
+ selectedIds.map((id) => {
+ const item = originData.find((it) => getPluginScopeId(plugin, it.scope) === `${id}`);
+ return (
+ <Tag
+ key={id}
+ color="blue"
+ closable
+ onClose={() => setSelectedIds(selectedIds.filter((it) => it !== id))}
+ >
+ {item?.scope.fullName ?? item?.scope.name}
+ </Tag>
+ );
+ })
) : (
- <Flex>
- <Button type="primary" icon={<RedoOutlined />} onClick={handleRefresh}>
- Refresh Data Scope
- </Button>
- </Flex>
+ <span>Please select scope...</span>
)}
- <Select
- filterOption={false}
- loading={!ready}
- showSearch
- mode="multiple"
- options={searchOptions}
- value={selectedIds}
- onChange={(value) => setSelectedIds(value)}
- onSearch={(value) => setQuery(value)}
- />
- <MillerColumnsSelect
- showSelectAll
- columnCount={1}
+ </Space>
+ <div>
+ <Input.Search value={search} onChange={(e) => setSearch(e.target.value)} />
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={request}
columnHeight={200}
- items={items}
- getHasMore={() => items.length < total}
- onScroll={handleScroll}
+ renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
+ renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
+ renderNoData={() => (
+ <Flex style={{ height: '100%' }} justify="center" align="center">
+ <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
+ <Button type="primary" icon={<PlusOutlined />}>
+ Add Data Scope
+ </Button>
+ </ExternalLink>
+ </Flex>
+ )}
+ selectable
selectedIds={selectedIds}
- onSelectItemIds={setSelectedIds}
+ onSelectedIds={(ids, data) => {
+ setSelectedIds(ids);
+ setOriginData(data ?? []);
+ }}
/>
- <Flex justify="flex-end" gap="small">
- <Button onClick={onCancel}>Cancel</Button>
- <Button type="primary" disabled={!selectedIds.length} onClick={handleSubmit}>
- Save
- </Button>
- </Flex>
- </Flex>
- ) : (
- <Flex>
- <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
- <Button type="primary" icon={<PlusOutlined />}>
- Add Data Scope
- </Button>
- </ExternalLink>
+ </div>
+ <Flex justify="flex-end" gap="small">
+ <Button onClick={onCancel}>Cancel</Button>
+ <Button type="primary" disabled={!selectedIds.length} onClick={handleSubmit}>
+ Save
+ </Button>
</Flex>
- )}
+ </Flex>
</Block>
);
};
diff --git a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
index 4c0c49511..a0c972dee 100644
--- a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
@@ -16,9 +16,9 @@
*
*/
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
import { Modal } from 'antd';
-import MillerColumnsSelect from 'miller-columns-select';
+import { MillerColumns } from '@mints/miller-columns';
import { useAppSelector } from '@/hooks';
import { Block, Loading } from '@/components';
@@ -39,6 +39,17 @@ export const SelectorDialog = ({ open, saving, onCancel, onSubmit }: Props) => {
const webhooks = useAppSelector(selectWebhooks);
+ const request = useCallback(async () => {
+ return {
+ data: webhooks.map((it) => ({
+ parentId: null,
+ id: it.id,
+ title: it.name,
+ })),
+ hasMore: false,
+ };
+ }, [webhooks]);
+
const handleSubmit = () => onSubmit(webhooks.filter((it) => selectedIds.includes(it.id)));
return (
@@ -57,19 +68,18 @@ export const SelectorDialog = ({ open, saving, onCancel, onSubmit }: Props) => {
>
<S.Wrapper>
<Block title="Webhooks" description="Select an existing Webhook to import to the current project.">
- <MillerColumnsSelect
- columnCount={1}
+ <MillerColumns
+ bordered
+ theme={{
+ colorPrimary: '#7497f7',
+ borderColor: '#dbe4fd',
+ }}
+ request={request}
columnHeight={160}
- getHasMore={() => false}
renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
- items={webhooks.map((it) => ({
- parentId: null,
- id: it.id,
- title: it.name,
- name: it.name,
- }))}
+ selectable
selectedIds={selectedIds}
- onSelectItemIds={setSelectedIds}
+ onSelectedIds={setSelectedIds}
/>
</Block>
</S.Wrapper>
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index 2ea91ec1b..a4dc8623d 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -280,7 +280,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.22.15":
version: 7.22.15
resolution: "@babel/helper-module-imports@npm:7.22.15"
dependencies:
@@ -690,7 +690,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3":
+"@babel/plugin-syntax-jsx@npm:^7.23.3":
version: 7.23.3
resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
dependencies:
@@ -1655,6 +1655,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+ version: 7.25.6
+ resolution: "@babel/runtime@npm:7.25.6"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: ee1a69d3ac7802803f5ee6a96e652b78b8addc28c6a38c725a4ad7d61a059d9e6cb9f6550ed2f63cce67a1bd82e0b1ef66a1079d895be6bfb536a5cfbd9ccc32
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0":
version: 7.24.0
resolution: "@babel/template@npm:7.24.0"
@@ -1666,7 +1675,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.24.0":
version: 7.24.0
resolution: "@babel/traverse@npm:7.24.0"
dependencies:
@@ -1718,7 +1727,7 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/is-prop-valid@npm:^1.1.0":
+"@emotion/is-prop-valid@npm:1.2.2":
version: 1.2.2
resolution: "@emotion/is-prop-valid@npm:1.2.2"
dependencies:
@@ -1734,13 +1743,6 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/stylis@npm:^0.8.4":
- version: 0.8.5
- resolution: "@emotion/stylis@npm:0.8.5"
- checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
- languageName: node
- linkType: hard
-
"@emotion/unitless@npm:0.8.0":
version: 0.8.0
resolution: "@emotion/unitless@npm:0.8.0"
@@ -1748,7 +1750,14 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
+"@emotion/unitless@npm:0.8.1":
+ version: 0.8.1
+ resolution: "@emotion/unitless@npm:0.8.1"
+ checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
+ languageName: node
+ linkType: hard
+
+"@emotion/unitless@npm:^0.7.5":
version: 0.7.5
resolution: "@emotion/unitless@npm:0.7.5"
checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@@ -1958,6 +1967,13 @@ __metadata:
languageName: node
linkType: hard
+"@fontsource/roboto@npm:^5.0.14":
+ version: 5.0.14
+ resolution: "@fontsource/roboto@npm:5.0.14"
+ checksum: c7a47aedd55233c84270e8ccb36fc529d37815b49acaab276de572dc67c694f9e76e9dd566cbb32b948d542bed5dc151b58c62641325c043e1eb8140e327da55
+ languageName: node
+ linkType: hard
+
"@humanwhocodes/config-array@npm:^0.11.14":
version: 0.11.14
resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -2039,6 +2055,178 @@ __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"
+ dependencies:
+ "@fontsource/roboto": ^5.0.14
+ "@mui/material": ^5.16.7
+ "@mui/styled-engine-sc": ^6.0.0-alpha.18
+ lodash: ^4.17.21
+ react: ^18.2.0
+ react-dom: ^18.2.0
+ react-infinite-scroll-component: ^6.1.0
+ styled-components: ^6.1.12
+ peerDependencies:
+ "@fontsource/roboto": ^5.0.14
+ "@mui/material": ^5.16.7
+ "@mui/styled-engine-sc": ^6.0.0-alpha.18
+ lodash: ^4.17.21
+ react: ^18.2.0
+ react-dom: ^18.2.0
+ react-infinite-scroll-component: ^6.1.0
+ styled-components: ^6.1.12
+ checksum: ca49de90e123850029cf1db5ac41567bdd04c0d8b60db3783260265e5b283fddd576c38b573de804a7f35c44e228045b8fa5000d9b8e8a75c53c3ce05ca5deec
+ languageName: node
+ linkType: hard
+
+"@mui/core-downloads-tracker@npm:^5.16.7":
+ version: 5.16.7
+ resolution: "@mui/core-downloads-tracker@npm:5.16.7"
+ checksum: b65c48ba2bf6bba6435ba9f2d6c33db0c8a85b3ff7599136a9682b72205bec76470ab5ed5e6e625d5bd012ed9bcbc641ed677548be80d217c9fb5d0435567062
+ languageName: node
+ linkType: hard
+
+"@mui/icons-material@npm:^5.16.7":
+ version: 5.16.7
+ resolution: "@mui/icons-material@npm:5.16.7"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ peerDependencies:
+ "@mui/material": ^5.0.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: a875f2837897d79a83173d80461e06ab090b64d08913d26433cf2cbeb8e7c7456468632a7aa495d722718f09111a8043255777d73b4dfbe9e0f863a170fc7190
+ languageName: node
+ linkType: hard
+
+"@mui/material@npm:^5.16.7":
+ version: 5.16.7
+ resolution: "@mui/material@npm:5.16.7"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/core-downloads-tracker": ^5.16.7
+ "@mui/system": ^5.16.7
+ "@mui/types": ^7.2.15
+ "@mui/utils": ^5.16.6
+ "@popperjs/core": ^2.11.8
+ "@types/react-transition-group": ^4.4.10
+ clsx: ^2.1.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ react-is: ^18.3.1
+ react-transition-group: ^4.4.5
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 5057b48c3ce554247de9a8f675bda9bbda079bc83a696c500525f3ebbd63315a44f1c2a7c83c2025dbd02d2722892e397a0af10c1219d45f6534e41d91a43cc0
+ languageName: node
+ linkType: hard
+
+"@mui/private-theming@npm:^5.16.6":
+ version: 5.16.6
+ resolution: "@mui/private-theming@npm:5.16.6"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/utils": ^5.16.6
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 314ba598ab17cd425a36e4cab677ed26fe0939b23e53120da77cfbc3be6dada5428fa8e2a55cb697417599a4e3abfee6d4711de0a7318b9fb2c3a822b2d5b5a8
+ languageName: node
+ linkType: hard
+
+"@mui/styled-engine-sc@npm:^6.0.0-alpha.18, @mui/styled-engine@npm:@mui/styled-engine-sc@^6.0.0-alpha.18":
+ version: 6.0.2
+ resolution: "@mui/styled-engine-sc@npm:6.0.2"
+ dependencies:
+ "@babel/runtime": ^7.25.0
+ csstype: ^3.1.3
+ hoist-non-react-statics: ^3.3.2
+ prop-types: ^15.8.1
+ peerDependencies:
+ styled-components: ^6.0.0
+ checksum: 027972651eb83d6ec68ba4f56fa1dbd84334036707af98ca403c5009a95db0ad6bb2583097b8e533a94663f7d2f35a707a527c802f1759cf9e17e24b913de092
+ languageName: node
+ linkType: hard
+
+"@mui/system@npm:^5.16.7":
+ version: 5.16.7
+ resolution: "@mui/system@npm:5.16.7"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/private-theming": ^5.16.6
+ "@mui/styled-engine": ^5.16.6
+ "@mui/types": ^7.2.15
+ "@mui/utils": ^5.16.6
+ clsx: ^2.1.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 86cc11d062645b6742328178ca3a9e2aa2c6d064a559e4fb8c6c6bb8251794959b9dad385f9508fdcab2ae2764503c80f7c3d4f6eb1e0e8aa649f28d4f59133b
+ languageName: node
+ linkType: hard
+
+"@mui/types@npm:^7.2.15":
+ version: 7.2.16
+ resolution: "@mui/types@npm:7.2.16"
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 7bb86487be8e55a4e138a6a5878ab272caee71546a7a2368223274afae65229f673334e59b8e3f7717ea7ea8d44af5f068b2eb4c212cddb98fefecfa873b868a
+ languageName: node
+ linkType: hard
+
+"@mui/utils@npm:^5.16.6":
+ version: 5.16.6
+ resolution: "@mui/utils@npm:5.16.6"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/types": ^7.2.15
+ "@types/prop-types": ^15.7.12
+ clsx: ^2.1.1
+ prop-types: ^15.8.1
+ react-is: ^18.3.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 6f8068f07f60a842fcb2e2540eecbd9c5f04df695bcc427184720e8ae138ae689fefd3c20147ab7c76e809ede6e10f5e08d1c34cd3a8b09bd22d2020a666a96f
+ languageName: node
+ linkType: hard
+
"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
version: 5.1.1-v1
resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
@@ -2104,6 +2292,13 @@ __metadata:
languageName: node
linkType: hard
+"@popperjs/core@npm:^2.11.8":
+ version: 2.11.8
+ resolution: "@popperjs/core@npm:2.11.8"
+ checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+ languageName: node
+ linkType: hard
+
"@rc-component/color-picker@npm:~1.5.2":
version: 1.5.2
resolution: "@rc-component/color-picker@npm:1.5.2"
@@ -2629,6 +2824,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/prop-types@npm:^15.7.12":
+ version: 15.7.12
+ resolution: "@types/prop-types@npm:15.7.12"
+ checksum: ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe
+ languageName: node
+ linkType: hard
+
"@types/react-copy-to-clipboard@npm:^5.0.7":
version: 5.0.7
resolution: "@types/react-copy-to-clipboard@npm:5.0.7"
@@ -2677,6 +2879,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/react-transition-group@npm:^4.4.10":
+ version: 4.4.11
+ resolution: "@types/react-transition-group@npm:4.4.11"
+ dependencies:
+ "@types/react": "*"
+ checksum: a6e3b2e4363cb019e256ae4f19dadf9d7eb199da1a5e4109bbbf6a132821884044d332e9c74b520b1e5321a7f545502443fd1ce0b18649c8b510fa4220b0e5c2
+ languageName: node
+ linkType: hard
+
"@types/react@npm:*, @types/react@npm:^18.2.56":
version: 18.2.60
resolution: "@types/react@npm:18.2.60"
@@ -2720,6 +2931,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/stylis@npm:4.2.5":
+ version: 4.2.5
+ resolution: "@types/stylis@npm:4.2.5"
+ checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
+ languageName: node
+ linkType: hard
+
"@types/unist@npm:*, @types/unist@npm:^3.0.0":
version: 3.0.2
resolution: "@types/unist@npm:3.0.2"
@@ -3320,21 +3538,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-styled-components@npm:>= 1.12.0":
- version: 2.1.4
- resolution: "babel-plugin-styled-components@npm:2.1.4"
- dependencies:
- "@babel/helper-annotate-as-pure": ^7.22.5
- "@babel/helper-module-imports": ^7.22.5
- "@babel/plugin-syntax-jsx": ^7.22.5
- lodash: ^4.17.21
- picomatch: ^2.3.1
- peerDependencies:
- styled-components: ">= 2"
- checksum: d791aed68d975dae4f73055f86cd47afa99cb402b8113acdaf5678c8b6fba2cbc15543f2debe8ed09becb198aae8be2adfe268ad41f4bca917288e073a622bf8
- languageName: node
- linkType: hard
-
"babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
version: 0.4.24
resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -3586,6 +3789,13 @@ __metadata:
languageName: node
linkType: hard
+"clsx@npm:^2.1.0, clsx@npm:^2.1.1":
+ version: 2.1.1
+ resolution: "clsx@npm:2.1.1"
+ checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
+ languageName: node
+ linkType: hard
+
"color-convert@npm:^1.9.0":
version: 1.9.3
resolution: "color-convert@npm:1.9.3"
@@ -3668,6 +3878,11 @@ __metadata:
dependencies:
"@ahooksjs/use-url-state": ^3.5.1
"@ant-design/icons": ^5.3.0
+ "@fontsource/roboto": ^5.0.14
+ "@mints/miller-columns": ^2.0.0-beta.1
+ "@mui/icons-material": ^5.16.7
+ "@mui/material": ^5.16.7
+ "@mui/styled-engine-sc": ^6.0.0-alpha.18
"@reduxjs/toolkit": ^2.2.1
"@types/file-saver": ^2.0.5
"@types/node": ^18.19.20
@@ -3694,7 +3909,6 @@ __metadata:
husky: ^8.0.0
lint-staged: ^13.1.0
lodash: ^4.17.21
- miller-columns-select: 1.4.1
prettier: ^2.7.1
react: ^18.2.0
react-copy-to-clipboard: ^5.1.0
@@ -3812,7 +4026,7 @@ __metadata:
languageName: node
linkType: hard
-"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0":
version: 3.2.0
resolution: "css-to-react-native@npm:3.2.0"
dependencies:
@@ -3830,7 +4044,7 @@ __metadata:
languageName: node
linkType: hard
-"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
+"csstype@npm:3.1.3, csstype@npm:^3.0.2, csstype@npm:^3.1.3":
version: 3.1.3
resolution: "csstype@npm:3.1.3"
checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -3967,6 +4181,16 @@ __metadata:
languageName: node
linkType: hard
+"dom-helpers@npm:^5.0.1":
+ version: 5.2.1
+ resolution: "dom-helpers@npm:5.2.1"
+ dependencies:
+ "@babel/runtime": ^7.8.7
+ csstype: ^3.0.2
+ checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+ languageName: node
+ linkType: hard
+
"dot-case@npm:^3.0.4":
version: 3.0.4
resolution: "dot-case@npm:3.0.4"
@@ -5202,7 +5426,7 @@ __metadata:
languageName: node
linkType: hard
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
dependencies:
@@ -6416,20 +6640,6 @@ __metadata:
languageName: node
linkType: hard
-"miller-columns-select@npm:1.4.1":
- version: 1.4.1
- resolution: "miller-columns-select@npm:1.4.1"
- dependencies:
- classnames: ^2.3.2
- react-infinite-scroll-component: ^6.1.0
- styled-components: ^5.3.6
- peerDependencies:
- react: ^18.2.0
- react-dom: ^18.2.0
- checksum: 88452c6d09d27116c1ef05dda7cab26f5d565ef2d63eac007ef9cc3d331cd0510997bcf0b45191678b323b0089b9bbca4973fabb12732c2c3ebc1d940164e8a5
- languageName: node
- linkType: hard
-
"mime-db@npm:1.52.0":
version: 1.52.0
resolution: "mime-db@npm:1.52.0"
@@ -6989,6 +7199,17 @@ __metadata:
languageName: node
linkType: hard
+"postcss@npm:8.4.38":
+ version: 8.4.38
+ resolution: "postcss@npm:8.4.38"
+ dependencies:
+ nanoid: ^3.3.7
+ picocolors: ^1.0.0
+ source-map-js: ^1.2.0
+ checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+ languageName: node
+ linkType: hard
+
"postcss@npm:^8.4.35":
version: 8.4.35
resolution: "postcss@npm:8.4.35"
@@ -7042,7 +7263,7 @@ __metadata:
languageName: node
linkType: hard
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -7713,6 +7934,13 @@ __metadata:
languageName: node
linkType: hard
+"react-is@npm:^18.3.1":
+ version: 18.3.1
+ resolution: "react-is@npm:18.3.1"
+ checksum: e20fe84c86ff172fc8d898251b7cc2c43645d108bf96d0b8edf39b98f9a2cae97b40520ee7ed8ee0085ccc94736c4886294456033304151c3f94978cec03df21
+ languageName: node
+ linkType: hard
+
"react-markdown@npm:^9.0.1":
version: 9.0.1
resolution: "react-markdown@npm:9.0.1"
@@ -7806,6 +8034,21 @@ __metadata:
languageName: node
linkType: hard
+"react-transition-group@npm:^4.4.5":
+ version: 4.4.5
+ resolution: "react-transition-group@npm:4.4.5"
+ dependencies:
+ "@babel/runtime": ^7.5.5
+ dom-helpers: ^5.0.1
+ loose-envify: ^1.4.0
+ prop-types: ^15.6.2
+ peerDependencies:
+ react: ">=16.6.0"
+ react-dom: ">=16.6.0"
+ checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1
+ languageName: node
+ linkType: hard
+
"react@npm:^18.2.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
@@ -8230,7 +8473,7 @@ __metadata:
languageName: node
linkType: hard
-"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0":
version: 1.1.0
resolution: "shallowequal@npm:1.1.0"
checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -8341,6 +8584,13 @@ __metadata:
languageName: node
linkType: hard
+"source-map-js@npm:^1.2.0":
+ version: 1.2.0
+ resolution: "source-map-js@npm:1.2.0"
+ checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+ languageName: node
+ linkType: hard
+
"space-separated-tokens@npm:^2.0.0":
version: 2.0.2
resolution: "space-separated-tokens@npm:2.0.2"
@@ -8529,25 +8779,23 @@ __metadata:
languageName: node
linkType: hard
-"styled-components@npm:^5.3.6":
- version: 5.3.11
- resolution: "styled-components@npm:5.3.11"
+"styled-components@npm:^6.1.12":
+ version: 6.1.13
+ resolution: "styled-components@npm:6.1.13"
dependencies:
- "@babel/helper-module-imports": ^7.0.0
- "@babel/traverse": ^7.4.5
- "@emotion/is-prop-valid": ^1.1.0
- "@emotion/stylis": ^0.8.4
- "@emotion/unitless": ^0.7.4
- babel-plugin-styled-components: ">= 1.12.0"
- css-to-react-native: ^3.0.0
- hoist-non-react-statics: ^3.0.0
- shallowequal: ^1.1.0
- supports-color: ^5.5.0
+ "@emotion/is-prop-valid": 1.2.2
+ "@emotion/unitless": 0.8.1
+ "@types/stylis": 4.2.5
+ css-to-react-native: 3.2.0
+ csstype: 3.1.3
+ postcss: 8.4.38
+ shallowequal: 1.1.0
+ stylis: 4.3.2
+ tslib: 2.6.2
peerDependencies:
react: ">= 16.8.0"
react-dom: ">= 16.8.0"
- react-is: ">= 16.8.0"
- checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
+ checksum: cb836c5d4cc8d183f4b70a4a1b1aa13551c57389e9c8fe3286619eef9fc81466fee09c39a1c8b5aa03deb0e466e4d5ee04921f7d9f3b7afe4744e539e6047550
languageName: node
linkType: hard
@@ -8578,7 +8826,14 @@ __metadata:
languageName: node
linkType: hard
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"stylis@npm:4.3.2":
+ version: 4.3.2
+ resolution: "stylis@npm:4.3.2"
+ checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
+ languageName: node
+ linkType: hard
+
+"supports-color@npm:^5.3.0":
version: 5.5.0
resolution: "supports-color@npm:5.5.0"
dependencies:
@@ -8708,6 +8963,13 @@ __metadata:
languageName: node
linkType: hard
+"tslib@npm:2.6.2, tslib@npm:^2.0.3, tslib@npm:^2.4.1":
+ version: 2.6.2
+ resolution: "tslib@npm:2.6.2"
+ checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+ languageName: node
+ linkType: hard
+
"tslib@npm:^1.8.1":
version: 1.14.1
resolution: "tslib@npm:1.14.1"
@@ -8715,13 +8977,6 @@ __metadata:
languageName: node
linkType: hard
-"tslib@npm:^2.0.3, tslib@npm:^2.4.1":
- version: 2.6.2
- resolution: "tslib@npm:2.6.2"
- checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
- languageName: node
- linkType: hard
-
"tsutils@npm:^3.21.0":
version: 3.21.0
resolution: "tsutils@npm:3.21.0"