This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch fix-6086 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 9263145e365b6b28608a9ea6d0501d768bc6a744 Author: mintsweet <[email protected]> AuthorDate: Thu Sep 14 19:15:56 2023 +1200 fix(config-ui): cannot save data scope in tapd --- config-ui/src/plugins/register/tapd/api.ts | 6 ++ config-ui/src/plugins/register/tapd/data-scope.tsx | 76 +++++++++++++++++----- 2 files changed, 64 insertions(+), 18 deletions(-) diff --git a/config-ui/src/plugins/register/tapd/api.ts b/config-ui/src/plugins/register/tapd/api.ts index fe5de6f03..f4cf67bd7 100644 --- a/config-ui/src/plugins/register/tapd/api.ts +++ b/config-ui/src/plugins/register/tapd/api.ts @@ -31,3 +31,9 @@ export const getStatus = (prefix: string, workspaceId: ID, system: string) => export const getStoryType = (prefix: string, workspaceId: ID) => request(`${prefix}/story_categories?workspace_id=${workspaceId}`); + +export const prepareToken = (connectionId: ID, params: object) => + request(`/plugins/tapd/connections/${connectionId}/remote-scopes-prepare-token`, { + method: 'get', + data: params, + }); diff --git a/config-ui/src/plugins/register/tapd/data-scope.tsx b/config-ui/src/plugins/register/tapd/data-scope.tsx index 13f3b87b0..1d69a37b6 100644 --- a/config-ui/src/plugins/register/tapd/data-scope.tsx +++ b/config-ui/src/plugins/register/tapd/data-scope.tsx @@ -16,33 +16,67 @@ * */ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { Button, ControlGroup, InputGroup, Intent } from '@blueprintjs/core'; +import type { McsID, McsItem } from 'miller-columns-select'; +import MillerColumnsSelect from 'miller-columns-select'; -import { DataScopeMillerColumns } from '@/plugins'; +import { ExternalLink, Loading } from '@/components'; +import * as T from '@/plugins/components/data-scope-select-remote/types'; +import * as API from '@/plugins/components/data-scope-select-remote/api'; -import * as API from '@/plugins/components/data-scope-miller-columns/api'; -import { Button, ControlGroup, InputGroup, Intent } from '@blueprintjs/core'; -import { ExternalLink } from '@/components'; +import { prepareToken } from './api'; interface Props { connectionId: ID; - disabledItems?: any[]; - selectedItems: any[]; - onChangeItems: (selectedItems: any[]) => void; + disabledItems: T.ResItem[]; + selectedItems: T.ResItem[]; + onChangeSelectedItems: (items: T.ResItem[]) => void; } -export const DataScope = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => { +export const DataScope = ({ connectionId, disabledItems, selectedItems, onChangeSelectedItems }: Props) => { const [pageToken, setPageToken] = useState<string | undefined>(undefined); const [companyId, setCompanyId] = useState<string>( localStorage.getItem(`plugin/tapd/connections/${connectionId}/company_id`) || '', ); + const [miller, setMiller] = useState<{ + items: McsItem<T.ResItem>[]; + loadedIds: ID[]; + }>({ + items: [], + loadedIds: [], + }); + + useEffect(() => { + if (!pageToken) return; + getItems(null, pageToken); + }, [pageToken]); + + const getItems = async (groupId: ID | null, currentPageToken?: string) => { + const res = await API.getRemoteScope('tapd', connectionId, { + groupId, + pageToken: currentPageToken, + }); + + const newItems = (res.children ?? []).map((it) => ({ + ...it, + title: it.name, + })); + + setMiller((m) => ({ + ...m, + items: [...m.items, ...newItems], + loadedIds: [...m.loadedIds, groupId ? groupId : 'root'], + })); + }; + const getPageToken = async (companyId: string | undefined) => { if (!companyId) { setPageToken(undefined); return; } - const res = await API.prepareToken(`tapd`, connectionId, { + const res = await prepareToken(connectionId, { companyId, }); setPageToken(res.pageToken); @@ -72,14 +106,20 @@ export const DataScope = ({ connectionId, disabledItems, selectedItems, onChange </ControlGroup> {pageToken && ( - <DataScopeMillerColumns - key={pageToken} - plugin="tapd" - connectionId={connectionId} - disabledItems={disabledItems} - selectedItems={selectedItems} - onChangeItems={onChangeItems} - pageToken={pageToken} + <MillerColumnsSelect + items={miller.items} + getCanExpand={(it) => it.type === 'group'} + getHasMore={(id) => !miller.loadedIds.includes(id ?? 'root')} + onExpand={(id: McsID) => getItems(id, pageToken)} + onScroll={(id: McsID | null) => getItems(id, pageToken)} + columnCount={2.5} + columnHeight={300} + renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />} + disabledIds={(disabledItems ?? []).map((it) => it.id)} + selectedIds={selectedItems.map((it) => it.id)} + onSelectItemIds={(selectedIds: ID[]) => + onChangeSelectedItems(miller.items.filter((it) => selectedIds.includes(it.id))) + } /> )} </>
