This is an automated email from the ASF dual-hosted git repository.
abeizn 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 460387545 fix(config-ui): cannot add a new data scope in tapd (#5434)
460387545 is described below
commit 4603875458ea29e2c24942ab2c7ffef5ddd2c433
Author: 青湛 <[email protected]>
AuthorDate: Mon Jun 12 15:37:05 2023 +0800
fix(config-ui): cannot add a new data scope in tapd (#5434)
---
.../components/data-scope-select-remote/index.tsx | 46 ++++++++++++++--------
config-ui/src/plugins/register/tapd/config.tsx | 6 +--
config-ui/src/plugins/register/tapd/data-scope.tsx | 16 ++------
config-ui/src/plugins/types.ts | 3 +-
4 files changed, 37 insertions(+), 34 deletions(-)
diff --git
a/config-ui/src/plugins/components/data-scope-select-remote/index.tsx
b/config-ui/src/plugins/components/data-scope-select-remote/index.tsx
index bb1715c30..15476182d 100644
--- a/config-ui/src/plugins/components/data-scope-select-remote/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select-remote/index.tsx
@@ -16,7 +16,7 @@
*
*/
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { Buttons } from '@/components';
@@ -37,7 +37,7 @@ interface Props {
onSubmit: (origin: any) => void;
}
-export const DataScopeSelectRemote = ({ plugin, connectionId, disabledScope,
onSubmit, onCancel }: Props) => {
+export const DataScopeSelectRemote = ({ plugin, connectionId, disabledScope,
onCancel, onSubmit }: Props) => {
const [operating, setOperating] = useState(false);
const [scope, setScope] = useState<any>([]);
@@ -81,29 +81,43 @@ export const DataScopeSelectRemote = ({ plugin,
connectionId, disabledScope, onS
}
};
+ console.log(scope);
+
return (
<S.Wrapper>
- <h3>{pluginConfig.dataScope.millerColumns.title}</h3>
- <p>{pluginConfig.dataScope.millerColumns.subTitle}</p>
- <DataScopeMillerColumns
- title={pluginConfig.dataScope.millerColumns?.firstColumnTitle}
- plugin={plugin}
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={setScope}
- />
- {pluginConfig.dataScope.search && (
+ {pluginConfig.dataScope.render ? (
+ pluginConfig.dataScope.render({
+ plugin,
+ connectionId,
+ disabledItems,
+ selectedItems,
+ onChangeItems: setScope,
+ })
+ ) : (
<>
- <h4>{pluginConfig.dataScope.search.title}</h4>
- <p>{pluginConfig.dataScope.search.subTitle}</p>
- <DataScopeSearch
+ <h4>{pluginConfig.dataScope.millerColumns?.title}</h4>
+ <p>{pluginConfig.dataScope.millerColumns?.subTitle}</p>
+ <DataScopeMillerColumns
+ title={pluginConfig.dataScope.millerColumns?.firstColumnTitle}
plugin={plugin}
connectionId={connectionId}
disabledItems={disabledItems}
selectedItems={selectedItems}
onChangeItems={setScope}
/>
+ {pluginConfig.dataScope.search && (
+ <>
+ <h5 style={{ marginTop: 16
}}>{pluginConfig.dataScope.search.title}</h5>
+ <p>{pluginConfig.dataScope.search.subTitle}</p>
+ <DataScopeSearch
+ plugin={plugin}
+ connectionId={connectionId}
+ disabledItems={disabledItems}
+ selectedItems={selectedItems}
+ onChangeItems={setScope}
+ />
+ </>
+ )}
</>
)}
<Buttons position="bottom" align="right">
diff --git a/config-ui/src/plugins/register/tapd/config.tsx
b/config-ui/src/plugins/register/tapd/config.tsx
index 4b8b16353..03fe1fc92 100644
--- a/config-ui/src/plugins/register/tapd/config.tsx
+++ b/config-ui/src/plugins/register/tapd/config.tsx
@@ -21,6 +21,7 @@ import { ExternalLink } from '@/components';
import type { PluginConfigType } from '../../types';
import { PluginType } from '../../types';
+import { DataScope } from './data-scope';
import Icon from './assets/icon.svg';
export const TAPDConfig: PluginConfigType = {
@@ -72,10 +73,7 @@ export const TAPDConfig: PluginConfigType = {
],
},
dataScope: {
- millerColumns: {
- title: 'Workspaces *',
- subTitle: 'Type in the company ID to list all the workspaces you want to
sync.',
- },
+ render: ({ ...props }) => <DataScope {...props} />,
},
scopeConfig: {
entities: ['TICKET', 'CROSS'],
diff --git a/config-ui/src/plugins/register/tapd/data-scope.tsx
b/config-ui/src/plugins/register/tapd/data-scope.tsx
index 4c718cbc9..d8a700ab5 100644
--- a/config-ui/src/plugins/register/tapd/data-scope.tsx
+++ b/config-ui/src/plugins/register/tapd/data-scope.tsx
@@ -16,7 +16,7 @@
*
*/
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
import { DataScopeMillerColumns } from '@/plugins';
@@ -32,17 +32,7 @@ interface Props {
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const DataScope = ({ connectionId, onChangeItems, ...props }: Props) =>
{
- const selectedItems = useMemo(
- () => props.selectedItems.map((it) => ({ id: `${it.id}`, name: it.name,
data: it })),
- [props.selectedItems],
- );
-
- const disabledItems = useMemo(
- () => (props.disabledItems ?? []).map((it) => ({ id: `${it.id}`, name:
it.name, data: it })),
- [props.disabledItems],
- );
-
+export const DataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
const [pageToken, setPageToken] = useState<string | undefined>(undefined);
const [companyId, setCompanyId] = useState<string>(
localStorage.getItem(`plugin/tapd/connections/${connectionId}/company_id`)
|| '',
@@ -61,7 +51,7 @@ export const DataScope = ({ connectionId, onChangeItems,
...props }: Props) => {
return (
<>
- <h3>Workspaces *</h3>
+ <h4>Workspaces *</h4>
<p>Type in the company ID to list all the workspaces you want to sync.
</p>
<ExternalLink link="https://www.tapd.cn/help/show#1120003271001000103";>
Learn about how to get your company ID
diff --git a/config-ui/src/plugins/types.ts b/config-ui/src/plugins/types.ts
index 5665f2092..ff6758833 100644
--- a/config-ui/src/plugins/types.ts
+++ b/config-ui/src/plugins/types.ts
@@ -34,7 +34,7 @@ export type PluginConfigType = {
fields: any[];
};
dataScope: {
- millerColumns: {
+ millerColumns?: {
title: string;
subTitle: string;
firstColumnTitle?: string;
@@ -43,6 +43,7 @@ export type PluginConfigType = {
title?: string;
subTitle?: string;
};
+ render?: (props: any) => React.ReactNode;
};
scopeConfig?: {
entities: string[];
