This is an automated email from the ASF dual-hosted git repository.
klesh 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 09fc66d0c fix(config-ui): cannot save data scope in tapd (#6087)
09fc66d0c is described below
commit 09fc66d0cc0aaaecfa888206c42bdca8ce32fc02
Author: 青湛 <[email protected]>
AuthorDate: Fri Sep 15 03:12:25 2023 +1200
fix(config-ui): cannot save data scope in tapd (#6087)
* fix(config-ui): cannot save data scope in tapd
* refactor(config-ui): remove data scope miller columns
---
.../components/data-scope-miller-columns/api.ts | 36 ------
.../components/data-scope-miller-columns/index.tsx | 138 ---------------------
.../components/data-scope-miller-columns/styled.ts | 24 ----
.../components/data-scope-miller-columns/types.ts | 22 ----
config-ui/src/plugins/components/index.ts | 1 -
config-ui/src/plugins/register/tapd/api.ts | 6 +
config-ui/src/plugins/register/tapd/data-scope.tsx | 76 +++++++++---
7 files changed, 64 insertions(+), 239 deletions(-)
diff --git a/config-ui/src/plugins/components/data-scope-miller-columns/api.ts
b/config-ui/src/plugins/components/data-scope-miller-columns/api.ts
deleted file mode 100644
index 56f052889..000000000
--- a/config-ui/src/plugins/components/data-scope-miller-columns/api.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { request } from '@/utils';
-
-type Params = {
- groupId: ID | null;
- pageToken?: string;
-};
-
-export const prepareToken = (plugin: string, connectionId: ID, params: object)
=>
-
request(`/plugins/${plugin}/connections/${connectionId}/remote-scopes-prepare-token`,
{
- method: 'get',
- data: params,
- });
-
-export const getScope = (plugin: string, connectionId: ID, params: Params) =>
- request(`/plugins/${plugin}/connections/${connectionId}/remote-scopes`, {
- method: 'get',
- data: params,
- });
diff --git
a/config-ui/src/plugins/components/data-scope-miller-columns/index.tsx
b/config-ui/src/plugins/components/data-scope-miller-columns/index.tsx
deleted file mode 100644
index 97396786f..000000000
--- a/config-ui/src/plugins/components/data-scope-miller-columns/index.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { useState, useEffect } from 'react';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import type { MillerColumnsSelectProps } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
-
-import { Loading } from '@/components';
-
-import type { ExtraType } from './types';
-import * as API from './api';
-import * as S from './styled';
-
-interface Props extends Pick<MillerColumnsSelectProps<ExtraType>,
'columnCount'> {
- title?: string;
- plugin: string;
- connectionId: ID;
- disabledItems?: any[];
- selectedItems?: any[];
- pageToken?: string;
- onChangeItems?: (selectedItems: any[]) => void;
-}
-
-export const DataScopeMillerColumns = ({
- title,
- plugin,
- connectionId,
- disabledItems,
- selectedItems,
- onChangeItems,
- pageToken,
- ...props
-}: Props) => {
- const [items, setItems] = useState<McsItem<ExtraType>[]>([]);
- const [selectedIds, setSelectedIds] = useState<ID[]>([]);
- const [disabledIds, setDisabledIds] = useState<ID[]>([]);
- const [loadedIds, setLoadedIds] = useState<ID[]>([]);
- const [nextTokenMap, setNextTokenMap] = useState<Record<ID, string>>({});
-
- useEffect(() => {
- setSelectedIds((selectedItems ?? []).map((it) => it.id));
- }, [selectedItems]);
-
- useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.id));
- }, [disabledItems]);
-
- const getItems = async (groupId: ID | null, currentPageToken?: string) => {
- if (!currentPageToken) {
- currentPageToken = pageToken;
- }
- const res = await API.getScope(plugin, connectionId, {
- groupId,
- pageToken: currentPageToken,
- });
-
- setItems([
- ...items,
- ...(res.children ?? []).map((it: any) => ({
- ...it,
- title: it.name,
- })),
- ]);
-
- if (!res.nextPageToken) {
- setLoadedIds([...loadedIds, groupId ? groupId : 'root']);
- } else {
- setNextTokenMap({
- ...nextTokenMap,
- [`${groupId ? groupId : 'root'}`]: res.nextPageToken,
- });
- }
- };
-
- useEffect(() => {
- getItems(null);
- }, []);
-
- const handleChangeItems = (selectedIds: ID[]) => {
- const result = selectedIds.map((id) => {
- const selectedItem = (selectedItems ?? []).find((it) => it.id === id);
- if (selectedItem) {
- return selectedItem;
- }
-
- const item = items.find((it) => it.id === id) as McsItem<ExtraType>;
- return item;
- });
-
- onChangeItems ? onChangeItems(result) : setSelectedIds(selectedIds);
- };
-
- const handleExpand = (id: McsID) => getItems(id, nextTokenMap[id]);
-
- const handleScroll = (id: McsID | null) => getItems(id, nextTokenMap[id ??
'root']);
-
- const renderTitle = (column: McsColumn) => {
- return !column.parentId && title && <S.ColumnTitle>{title}</S.ColumnTitle>;
- };
-
- const renderLoading = () => {
- return <Loading size={20} style={{ padding: '4px 12px' }} />;
- };
-
- return (
- <MillerColumnsSelect
- items={items}
- getCanExpand={(it) => it.type === 'group'}
- getHasMore={(id) => !loadedIds.includes(id ?? 'root')}
- onExpand={handleExpand}
- onScroll={handleScroll}
- columnCount={2.5}
- columnHeight={300}
- renderTitle={renderTitle}
- renderLoading={renderLoading}
- disabledIds={disabledIds}
- selectedIds={selectedIds}
- onSelectItemIds={handleChangeItems}
- {...props}
- />
- );
-};
diff --git
a/config-ui/src/plugins/components/data-scope-miller-columns/styled.ts
b/config-ui/src/plugins/components/data-scope-miller-columns/styled.ts
deleted file mode 100644
index 6730edaff..000000000
--- a/config-ui/src/plugins/components/data-scope-miller-columns/styled.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import styled from 'styled-components';
-
-export const ColumnTitle = styled.div`
- padding: 6px 12px;
- font-weight: 600;
-`;
diff --git
a/config-ui/src/plugins/components/data-scope-miller-columns/types.ts
b/config-ui/src/plugins/components/data-scope-miller-columns/types.ts
deleted file mode 100644
index e8b87419d..000000000
--- a/config-ui/src/plugins/components/data-scope-miller-columns/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-export type ExtraType = {
- type: 'group' | 'scope';
- data: any;
-};
diff --git a/config-ui/src/plugins/components/index.ts
b/config-ui/src/plugins/components/index.ts
index 194f390e3..03f86c5a9 100644
--- a/config-ui/src/plugins/components/index.ts
+++ b/config-ui/src/plugins/components/index.ts
@@ -19,7 +19,6 @@
export * from './connection-form';
export * from './connection-list';
export * from './connection-status';
-export * from './data-scope-miller-columns';
export * from './data-scope-search';
export * from './data-scope-select';
export * from './data-scope-select-remote';
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)))
+ }
/>
)}
</>
