You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/01/04 14:32:22 UTC
[incubator-devlake] branch main updated: fix(config-ui): some bugs (#4106)
This is an automated email from the ASF dual-hosted git repository.
likyh 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 c9d02b137 fix(config-ui): some bugs (#4106)
c9d02b137 is described below
commit c9d02b1374865d16bc5ca0ca64acecf569dc3ffd
Author: 青湛 <0x...@gmail.com>
AuthorDate: Wed Jan 4 22:32:18 2023 +0800
fix(config-ui): some bugs (#4106)
* fix(config-ui): use data entities label to replace value
* fix(config-ui): adjust the transformation wording
* fix(config-ui): adjust the style for bp save button
* fix(config-ui): adjust the style for rerun icon
* fix(config-ui): unify the type of scopeId
* fix(config-ui): adjust the scopeIds
---
.../detail/types.ts => config/entities.ts} | 22 ++++++++++++----------
config-ui/src/config/index.ts | 1 +
.../error/components/bp-upgrade/use-bp-upgrade.ts | 5 +++--
.../src/pages/blueprint/create/bp-context.tsx | 5 +----
.../blueprint/create/components/action/index.tsx | 2 +-
.../pages/blueprint/create/step-three/index.tsx | 10 ++++------
.../blueprint/create/step-three/use-columns.tsx | 8 ++++----
.../src/pages/blueprint/create/step-two/index.tsx | 7 ++-----
.../blueprint/create/step-two/use-columns.tsx | 6 +++---
config-ui/src/pages/blueprint/create/types.ts | 2 +-
.../detail/components/add-scope-dialog/index.tsx | 7 ++-----
.../update-transformation-dialog/index.tsx | 13 ++++++++++---
.../pages/blueprint/detail/panel/configuration.tsx | 16 +++++++++-------
config-ui/src/pages/blueprint/detail/types.ts | 3 ++-
config-ui/src/pages/blueprint/types.ts | 2 +-
.../pipeline/detail/components/task/index.tsx | 6 ++++--
.../common/data-scope-list/use-data-scope-list.ts | 10 +++++-----
config-ui/src/plugins/common/data-scope/index.tsx | 9 ++++++++-
.../plugins/common/data-scope/use-data-scope.ts | 13 +++++++------
.../src/plugins/common/transformation/index.tsx | 14 +++++++++-----
20 files changed, 89 insertions(+), 72 deletions(-)
diff --git a/config-ui/src/pages/blueprint/detail/types.ts b/config-ui/src/config/entities.ts
similarity index 71%
copy from config-ui/src/pages/blueprint/detail/types.ts
copy to config-ui/src/config/entities.ts
index 55920a6ef..5a6f392d3 100644
--- a/config-ui/src/pages/blueprint/detail/types.ts
+++ b/config-ui/src/config/entities.ts
@@ -16,14 +16,16 @@
*
*/
-import { Plugins } from '@/plugins';
-
-export type ConfigConnectionItemType = {
- icon: string;
- name: string;
- connectionId: ID;
- plugin: Plugins;
- entities: string[];
- selectedEntites: string[];
- scope: Array<{ id: ID; entities: string[] }>;
+export const EntitiesLabel: Record<string, string> = {
+ CODE: 'Source Code Management',
+ TICKET: 'Issue Tracking',
+ CODEREVIEW: 'Code Review',
+ CICD: 'CI/CD',
+ CROSS: 'Cross Domain',
};
+
+export const transformEntities = (entities: string[]) =>
+ entities.map((it) => ({
+ label: EntitiesLabel[it],
+ value: it,
+ }));
diff --git a/config-ui/src/config/index.ts b/config-ui/src/config/index.ts
index b11a6fe90..31a275c91 100644
--- a/config-ui/src/config/index.ts
+++ b/config-ui/src/config/index.ts
@@ -18,3 +18,4 @@
export * from './cron';
export * from './endpoint';
+export * from './entities';
diff --git a/config-ui/src/error/components/bp-upgrade/use-bp-upgrade.ts b/config-ui/src/error/components/bp-upgrade/use-bp-upgrade.ts
index 5ee905338..6defe0594 100644
--- a/config-ui/src/error/components/bp-upgrade/use-bp-upgrade.ts
+++ b/config-ui/src/error/components/bp-upgrade/use-bp-upgrade.ts
@@ -118,11 +118,12 @@ export const useBPUpgrade = ({ id, onResetError }: UseBPUpgradeProps) => {
const upgradeConnection = async (connection: any) => {
const { plugin, connectionId } = connection;
- const scopeList = await Promise.all((connection.scope ?? []).map((sc: any) => upgradeScope(plugin, connectionId, sc)));
+ const scope = await Promise.all((connection.scope ?? []).map((sc: any) => upgradeScope(plugin, connectionId, sc)));
+
return {
plugin,
connectionId,
- scopes: scopeList,
+ scopes: scope,
};
};
diff --git a/config-ui/src/pages/blueprint/create/bp-context.tsx b/config-ui/src/pages/blueprint/create/bp-context.tsx
index be68dccdf..06ed0805d 100644
--- a/config-ui/src/pages/blueprint/create/bp-context.tsx
+++ b/config-ui/src/pages/blueprint/create/bp-context.tsx
@@ -132,10 +132,7 @@ export const BPContextProvider = ({ from, projectName, children }: Props) => {
return {
plugin: connection.plugin,
connectionId: connection.id,
- scopes: scope.map((sc: any) => ({
- id: `${sc.id}`,
- entities: sc.entities,
- })),
+ scopes: scope,
};
}),
};
diff --git a/config-ui/src/pages/blueprint/create/components/action/index.tsx b/config-ui/src/pages/blueprint/create/components/action/index.tsx
index 690483799..79db4eef9 100644
--- a/config-ui/src/pages/blueprint/create/components/action/index.tsx
+++ b/config-ui/src/pages/blueprint/create/components/action/index.tsx
@@ -54,7 +54,7 @@ export const Action = () => {
{isLast ? (
<>
<Button intent={Intent.PRIMARY} text="Save Blueprint" onClick={onSave} />
- <Button intent={Intent.DANGER} text="Save and Run Now" onClick={onSaveAndRun} />
+ <Button outlined intent={Intent.PRIMARY} text="Save and Run Now" onClick={onSaveAndRun} />
</>
) : (
<Button
diff --git a/config-ui/src/pages/blueprint/create/step-three/index.tsx b/config-ui/src/pages/blueprint/create/step-three/index.tsx
index bd041ec44..5e2396cb3 100644
--- a/config-ui/src/pages/blueprint/create/step-three/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-three/index.tsx
@@ -52,10 +52,7 @@ export const StepThree = () => {
const scope = scopeMap[unique] ?? [];
return {
...connection,
- scope: scope.map((sc: any) => ({
- id: `${sc.id}`,
- entities: `${sc.entities}`,
- })),
+ scopeIds: scope.map((sc: any) => sc.id),
};
}),
[uniqueList, connections, scopeMap],
@@ -69,12 +66,13 @@ export const StepThree = () => {
<Icon icon="arrow-left" size={14} />
<span>Cancel and Go Back</span>
</div>
- <h2>Create/Select a Transformation</h2>
+ <h2>Add Transformation</h2>
<Divider />
<Transformation
+ from="create"
plugin={connection.plugin}
connectionId={connection.id}
- scopeIds={connection.scope.map((sc: any) => sc.id)}
+ scopeIds={connection.scopeIds}
onCancel={handleBack}
onSave={handleBack}
/>
diff --git a/config-ui/src/pages/blueprint/create/step-three/use-columns.tsx b/config-ui/src/pages/blueprint/create/step-three/use-columns.tsx
index 2897aff7a..a4257d367 100644
--- a/config-ui/src/pages/blueprint/create/step-three/use-columns.tsx
+++ b/config-ui/src/pages/blueprint/create/step-three/use-columns.tsx
@@ -47,10 +47,10 @@ export const useColumns = ({ onDetail }: Props) => {
},
{
title: 'Data Scope and Transformation',
- dataIndex: ['plugin', 'id', 'scope'],
+ dataIndex: ['plugin', 'id', 'scopeIds'],
key: 'unique',
- render: ({ plugin, id, scope }: Pick<BPConnectionItemType, 'plugin' | 'id' | 'scope'>) => (
- <DataScopeList groupByTs plugin={plugin} connectionId={id} scopeIds={scope.map((sc) => sc.id)} />
+ render: ({ plugin, id, scopeIds }: Pick<BPConnectionItemType, 'plugin' | 'id' | 'scopeIds'>) => (
+ <DataScopeList groupByTs plugin={plugin} connectionId={id} scopeIds={scopeIds} />
),
},
{
@@ -63,7 +63,7 @@ export const useColumns = ({ onDetail }: Props) => {
minimal
intent={Intent.PRIMARY}
icon="add"
- text="Edit Transformation"
+ text="Add Transformation"
onClick={() => onDetail(connection)}
/>
),
diff --git a/config-ui/src/pages/blueprint/create/step-two/index.tsx b/config-ui/src/pages/blueprint/create/step-two/index.tsx
index 587bbf1bb..40d572f8f 100644
--- a/config-ui/src/pages/blueprint/create/step-two/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-two/index.tsx
@@ -70,10 +70,7 @@ export const StepTwo = () => {
const scope = scopeMap[unique] ?? [];
return {
...connection,
- scope: scope.map((sc: any) => ({
- id: `${sc.id}`,
- entities: sc.entities,
- })),
+ scopeIds: scope.map((sc: any) => sc.id),
};
}),
[uniqueList, connections, scopeMap],
@@ -98,7 +95,7 @@ export const StepTwo = () => {
connectionId={connection.id}
entities={connection.entities}
initialValues={{
- scope: connection.scope,
+ scope: connection.scopeIds.map((id) => ({ id })),
}}
onCancel={handleBack}
onSave={handleSave}
diff --git a/config-ui/src/pages/blueprint/create/step-two/use-columns.tsx b/config-ui/src/pages/blueprint/create/step-two/use-columns.tsx
index 4775a34b4..3514292ce 100644
--- a/config-ui/src/pages/blueprint/create/step-two/use-columns.tsx
+++ b/config-ui/src/pages/blueprint/create/step-two/use-columns.tsx
@@ -48,14 +48,14 @@ export const useColumns = ({ onDetail, onDelete }: Props) => {
},
{
title: 'Data Scope',
- dataIndex: ['plugin', 'id', 'scope'],
+ dataIndex: ['plugin', 'id', 'scopeIds'],
key: 'unique',
- render: ({ plugin, id, scope }: Pick<BPConnectionItemType, 'plugin' | 'id' | 'scope'>) => (
+ render: ({ plugin, id, scopeIds }: Pick<BPConnectionItemType, 'plugin' | 'id' | 'scopeIds'>) => (
<DataScopeList
groupByTs={false}
plugin={plugin}
connectionId={id}
- scopeIds={scope.map((sc) => sc.id)}
+ scopeIds={scopeIds}
onDelete={onDelete}
/>
),
diff --git a/config-ui/src/pages/blueprint/create/types.ts b/config-ui/src/pages/blueprint/create/types.ts
index e7c161e22..e420bf6a5 100644
--- a/config-ui/src/pages/blueprint/create/types.ts
+++ b/config-ui/src/pages/blueprint/create/types.ts
@@ -21,7 +21,7 @@ import type { ConnectionItemType } from '@/store';
import { ModeEnum } from '../types';
export type BPConnectionItemType = ConnectionItemType & {
- scope: Array<{ id: ID; entities: string[] }>;
+ scopeIds: string[];
};
export type BPContextType = {
diff --git a/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
index 63534404e..fdb3b07ae 100644
--- a/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
@@ -34,14 +34,11 @@ export const AddScopeDialog = ({ connection, onCancel, onSubmit }: Props) => {
const { plugin, connectionId, entities, scope } = connection;
- const handleSaveScope = (sc: any) => {
+ const handleSaveScope = (scope: any) => {
onSubmit({
plugin,
connectionId,
- scopes: sc.map((it: any) => ({
- ...it,
- id: `${it.id}`,
- })),
+ scopes: scope,
});
};
diff --git a/config-ui/src/pages/blueprint/detail/components/update-transformation-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/update-transformation-dialog/index.tsx
index 14ab16d11..7eea90f0c 100644
--- a/config-ui/src/pages/blueprint/detail/components/update-transformation-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/update-transformation-dialog/index.tsx
@@ -32,7 +32,7 @@ interface Props {
export const UpdateTransformationDialog = ({ connection, onCancel, onRefresh }: Props) => {
if (!connection) return null;
- const { plugin, connectionId, scopeIds } = connection;
+ const { plugin, connectionId, scope } = connection;
const handleSaveAfter = () => {
onRefresh();
@@ -40,11 +40,18 @@ export const UpdateTransformationDialog = ({ connection, onCancel, onRefresh }:
};
return (
- <Dialog isOpen title="Change Data Scope" footer={null} style={{ width: 900 }} onCancel={onCancel}>
+ <Dialog
+ isOpen
+ title="Assign a different transformation by"
+ footer={null}
+ style={{ width: 900 }}
+ onCancel={onCancel}
+ >
<Transformation
+ from="update"
plugin={plugin}
connectionId={connectionId}
- scopeIds={scopeIds}
+ scopeIds={scope.map((sc) => sc.id)}
onCancel={onCancel}
onSave={handleSaveAfter}
/>
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index 3a4b7ee1c..e73c0ffca 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -21,7 +21,7 @@ import { Icon, Button, Colors, Intent } from '@blueprintjs/core';
import dayjs from 'dayjs';
import { Table, ColumnType } from '@/components';
-import { getCron } from '@/config';
+import { getCron, transformEntities } from '@/config';
import { PluginConfig, DataScopeList, Plugins } from '@/plugins';
import type { BlueprintType } from '../../types';
@@ -67,6 +67,7 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
selectedEntites: cs.scopes?.[0].entities ?? [],
plugin: cs.plugin,
scope: cs.scopes,
+ scopeIds: cs.scopes.map((sc: any) => sc.id),
};
})
.filter(Boolean),
@@ -122,31 +123,32 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
key: 'selectedEntites',
render: (val: string[]) => (
<>
- {val.map((it) => (
- <div key={it}>{it}</div>
+ {transformEntities(val).map(({ label, value }) => (
+ <div key={value}>{label}</div>
))}
</>
),
},
{
title: 'Data Scope and Transformation',
- dataIndex: ['plugin', 'connectionId', 'scope'],
+ dataIndex: ['plugin', 'connectionId', 'scopeIds', 'scope'],
key: 'sopce',
render: ({
plugin,
connectionId,
+ scopeIds,
scope,
- }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' | 'scope'>) => (
+ }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' | 'scopeIds' | 'scope'>) => (
<DataScopeList
groupByTs
plugin={plugin}
connectionId={connectionId}
- scopeIds={scope?.map((sc) => sc.id)}
+ scopeIds={scopeIds}
onDelete={(plugin: Plugins, connectionId: ID, scopeId: ID) =>
handleUpdateConnection({
plugin,
connectionId,
- scopes: scope.filter((sc) => sc.id !== `${scopeId}`),
+ scopes: scope.filter((sc) => sc.id !== scopeId),
})
}
/>
diff --git a/config-ui/src/pages/blueprint/detail/types.ts b/config-ui/src/pages/blueprint/detail/types.ts
index 55920a6ef..c0559550d 100644
--- a/config-ui/src/pages/blueprint/detail/types.ts
+++ b/config-ui/src/pages/blueprint/detail/types.ts
@@ -25,5 +25,6 @@ export type ConfigConnectionItemType = {
plugin: Plugins;
entities: string[];
selectedEntites: string[];
- scope: Array<{ id: ID; entities: string[] }>;
+ scope: Array<{ id: string; entities: string[] }>;
+ scopeIds: string[];
};
diff --git a/config-ui/src/pages/blueprint/types.ts b/config-ui/src/pages/blueprint/types.ts
index 9c0f1f863..66f51b029 100644
--- a/config-ui/src/pages/blueprint/types.ts
+++ b/config-ui/src/pages/blueprint/types.ts
@@ -44,7 +44,7 @@ export type BlueprintType = {
plugin: Plugins;
connectionId: ID;
scopes: Array<{
- id: ID;
+ id: string;
entities: string[];
}>;
}>;
diff --git a/config-ui/src/pages/pipeline/detail/components/task/index.tsx b/config-ui/src/pages/pipeline/detail/components/task/index.tsx
index 7121757c4..2aaf4cd22 100644
--- a/config-ui/src/pages/pipeline/detail/components/task/index.tsx
+++ b/config-ui/src/pages/pipeline/detail/components/task/index.tsx
@@ -17,7 +17,7 @@
*/
import React, { useMemo } from 'react';
-import { Icon, Intent } from '@blueprintjs/core';
+import { Icon, Intent, Position, Colors } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import type { PluginConfigType } from '@/plugins';
@@ -102,7 +102,9 @@ export const Task = ({ task, operating, onRerun }: Props) => {
</S.Info>
<S.Duration>
{[StatusEnum.COMPLETED, StatusEnum.FAILED, StatusEnum.CANCELLED].includes(status) && (
- <Icon icon="repeat" onClick={handleRerun} />
+ <Tooltip2 position={Position.TOP} content="Rerun task">
+ <Icon icon="repeat" style={{ color: Colors.BLUE3 }} onClick={handleRerun} />
+ </Tooltip2>
)}
<span>{duration(beganAt, finishedAt)}</span>
</S.Duration>
diff --git a/config-ui/src/plugins/common/data-scope-list/use-data-scope-list.ts b/config-ui/src/plugins/common/data-scope-list/use-data-scope-list.ts
index 3743b44ff..8bcb9e804 100644
--- a/config-ui/src/plugins/common/data-scope-list/use-data-scope-list.ts
+++ b/config-ui/src/plugins/common/data-scope-list/use-data-scope-list.ts
@@ -24,7 +24,7 @@ import { Plugins } from '@/plugins';
import * as API from './api';
type ScopeItem = {
- id: ID;
+ id: string;
name: string;
transformationRuleName?: string;
};
@@ -32,7 +32,7 @@ type ScopeItem = {
export interface UseDataScopeList {
plugin: Plugins;
connectionId: ID;
- scopeIds: ID[];
+ scopeIds: string[];
}
export const useDataScopeList = ({ plugin, connectionId, scopeIds }: UseDataScopeList) => {
@@ -44,19 +44,19 @@ export const useDataScopeList = ({ plugin, connectionId, scopeIds }: UseDataScop
switch (true) {
case plugin === Plugins.GitHub:
return {
- id: sc.githubId,
+ id: `${sc.githubId}`,
name: sc.name,
transformationRuleName: sc.transformationRuleName,
};
case plugin === Plugins.JIRA:
return {
- id: sc.boardId,
+ id: `${sc.boardId}`,
name: sc.name,
transformationRuleName: sc.transformationRuleName,
};
case plugin === Plugins.GitLab:
return {
- id: sc.gitlabId,
+ id: `${sc.gitlabId}`,
name: sc.name,
transformationRuleName: sc.transformationRuleName,
};
diff --git a/config-ui/src/plugins/common/data-scope/index.tsx b/config-ui/src/plugins/common/data-scope/index.tsx
index 353b8fe09..fa0ba2e47 100644
--- a/config-ui/src/plugins/common/data-scope/index.tsx
+++ b/config-ui/src/plugins/common/data-scope/index.tsx
@@ -19,6 +19,7 @@
import React from 'react';
import { ButtonGroup, Button, Intent } from '@blueprintjs/core';
+import { transformEntities } from '@/config';
import { Plugins } from '@/plugins';
import { GitHubDataScope } from '@/plugins/github';
import { JIRADataScope } from '@/plugins/jira';
@@ -95,7 +96,13 @@ export const DataScope = ({ plugin, connectionId, entities, onCancel, ...props }
Learn about data entities
</a>
</p>
- <MultiSelector items={entities} selectedItems={selectedEntities} onChangeItems={onChangeEntites} />
+ <MultiSelector
+ items={transformEntities(entities)}
+ getKey={(item) => item.value}
+ getName={(item) => item.label}
+ selectedItems={selectedEntities}
+ onChangeItems={onChangeEntites}
+ />
</div>
<ButtonGroup>
diff --git a/config-ui/src/plugins/common/data-scope/use-data-scope.ts b/config-ui/src/plugins/common/data-scope/use-data-scope.ts
index f72b5c318..1c4915dc1 100644
--- a/config-ui/src/plugins/common/data-scope/use-data-scope.ts
+++ b/config-ui/src/plugins/common/data-scope/use-data-scope.ts
@@ -19,6 +19,7 @@
import { useState, useEffect, useMemo } from 'react';
import { omit } from 'lodash';
+import { transformEntities } from '@/config';
import { Plugins } from '@/plugins';
import { operator } from '@/utils';
@@ -39,7 +40,7 @@ export const useDataScope = ({ plugin, connectionId, entities, initialValues, on
const [saving, setSaving] = useState(false);
const [disabledScope, setDisabledScope] = useState<any>([]);
const [selectedScope, setSelectedScope] = useState<any>([]);
- const [selectedEntities, setSelectedEntities] = useState<string[]>([]);
+ const [selectedEntities, setSelectedEntities] = useState<any>([]);
const handleSetDisabledScope = async (disabledScope: any) => {
const scope = await Promise.all(disabledScope.map((sc: any) => API.getDataScope(plugin, connectionId, sc.id)));
@@ -51,7 +52,7 @@ export const useDataScope = ({ plugin, connectionId, entities, initialValues, on
}, [initialValues?.scope]);
useEffect(() => {
- setSelectedEntities(initialValues?.entites ?? entities);
+ setSelectedEntities(transformEntities(initialValues?.entites ?? entities));
}, [entities, initialValues?.entites]);
const getPluginId = (scope: any) => {
@@ -95,12 +96,12 @@ export const useDataScope = ({ plugin, connectionId, entities, initialValues, on
if (success) {
onSave?.([
...(initialValues?.scope ?? []).map((it: any) => ({
- id: it.id,
- entities: selectedEntities,
+ id: `${it.id}`,
+ entities: selectedEntities.map((it: any) => it.value),
})),
...res.map((it: any) => ({
- id: getPluginId(it),
- entities: selectedEntities,
+ id: `${getPluginId(it)}`,
+ entities: selectedEntities.map((it: any) => it.value),
})),
]);
}
diff --git a/config-ui/src/plugins/common/transformation/index.tsx b/config-ui/src/plugins/common/transformation/index.tsx
index 9063bb7b2..fdf39d6a1 100644
--- a/config-ui/src/plugins/common/transformation/index.tsx
+++ b/config-ui/src/plugins/common/transformation/index.tsx
@@ -33,10 +33,11 @@ import { useTransformation } from './use-transformation';
import * as S from './styled';
interface Props extends Omit<UseTransformationProps, 'name' | 'selectedRule' | 'setSelectedScope'> {
+ from: 'create' | 'update';
onCancel?: () => void;
}
-export const Transformation = ({ plugin, connectionId, onCancel, ...props }: Props) => {
+export const Transformation = ({ from, plugin, connectionId, onCancel, ...props }: Props) => {
const [type, setType] = useState<TransformationType>();
const [name, setName] = useState('');
const [selectedRule, setSelectedRule] = useState<RuleItem>();
@@ -60,14 +61,17 @@ export const Transformation = ({ plugin, connectionId, onCancel, ...props }: Pro
return (
<S.Wrapper>
<div className="block">
- <h3>Create a New or Select an Existing Transformation *</h3>
<RadioGroup selectedValue={type} onChange={handleChangeType}>
- <Radio label="Create a new transformation from a blank template" value="create" />
+ <Radio label="Creating a new transformation" value="create" />
<Radio
- label="Create a new transformation by duplicating an exisitng transformation as the template"
+ label={
+ from === 'create'
+ ? 'Create a new transformation by duplicating an exisitng transformation'
+ : 'Duplicating an existing transformation'
+ }
value="createByExist"
/>
- <Radio label="Select an existing transformation" value="selectExist" />
+ <Radio label="Selecting an existing transformation" value="selectExist" />
</RadioGroup>
</div>