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 0a43e9cd7 refactor(config-ui): simplify the selection and change of
data scope (#4281)
0a43e9cd7 is described below
commit 0a43e9cd763b284cb530540926f8f087378fe5cd
Author: 青湛 <[email protected]>
AuthorDate: Tue Jan 31 23:22:21 2023 +0800
refactor(config-ui): simplify the selection and change of data scope (#4281)
* refactor(config-ui): simplify the selection and change of data scope
* fix(config-ui): operator supports hidden toast
---
config-ui/package-lock.json | 6 +--
config-ui/package.json | 2 +-
.../src/pages/blueprint/create/step-two/index.tsx | 13 +----
.../blueprint/create/step-two/use-columns.tsx | 15 ++----
.../pages/blueprint/detail/panel/configuration.tsx | 21 ++------
.../plugins/components/data-scope-list/index.tsx | 15 ++----
.../src/plugins/components/data-scope/index.tsx | 41 ++++------------
.../components/data-scope/use-data-scope.ts | 27 +++++------
.../github/components/miller-columns/index.tsx | 48 +++++++------------
.../src/plugins/register/github/data-scope.tsx | 17 ++-----
.../gitlab/components/miller-columns/index.tsx | 56 ++++++++--------------
.../gitlab/components/project-selector/index.tsx | 8 ++--
.../src/plugins/register/gitlab/data-scope.tsx | 17 ++-----
.../jenkins/components/miller-columns/index.tsx | 19 +++-----
.../src/plugins/register/jenkins/data-scope.tsx | 10 +---
.../jira/components/miller-columns/index.tsx | 19 +++-----
config-ui/src/plugins/register/jira/data-scope.tsx | 10 +---
config-ui/src/utils/operator.ts | 27 ++++++-----
18 files changed, 117 insertions(+), 254 deletions(-)
diff --git a/config-ui/package-lock.json b/config-ui/package-lock.json
index b0ea5216f..187d74be7 100644
--- a/config-ui/package-lock.json
+++ b/config-ui/package-lock.json
@@ -10247,9 +10247,9 @@
}
},
"miller-columns-select": {
- "version": "1.0.0-alpha.9",
- "resolved":
"https://registry.npmjs.org/miller-columns-select/-/miller-columns-select-1.0.0-alpha.9.tgz";,
- "integrity":
"sha512-ZYM7iKN/2MFaj5c9hNhbZXtUSFoKiJxrDwmK0VGWRSrUe09HiSoKrBxM3MipdgxPJyAnRKMZS0WaxComl+jXXQ==",
+ "version": "1.0.0-beta.0",
+ "resolved":
"https://registry.npmjs.org/miller-columns-select/-/miller-columns-select-1.0.0-beta.0.tgz";,
+ "integrity":
"sha512-CyC8daCoxlbXKpgRRA08HiYvlhsz/snzidJTtkhQIh6HLwa+tBL2N42BPkfz7ZEyW4K8WB/GP4l0bq3zun0APA==",
"requires": {
"classnames": "^2.3.2",
"react-infinite-scroll-component": "^6.1.0",
diff --git a/config-ui/package.json b/config-ui/package.json
index 0670321fe..ea2fa3304 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -35,7 +35,7 @@
"dotenv": "^10.0.0",
"dotenv-webpack": "^7.0.3",
"file-saver": "^2.0.5",
- "miller-columns-select": "^1.0.0-alpha.9",
+ "miller-columns-select": "^1.0.0-beta.0",
"react": "17.0.2",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "17.0.2",
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 82609fdf1..1d0389cfd 100644
--- a/config-ui/src/pages/blueprint/create/step-two/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-two/index.tsx
@@ -44,15 +44,6 @@ export const StepTwo = () => {
onChangeShowDetail(false);
};
- const handleDeleteScope = (plugin: string, connectionId: ID, scopeId: ID) =>
{
- const unique = `${plugin}-${connectionId}`;
-
- onChangeScopeMap({
- ...scopeMap,
- [`${unique}`]: scopeMap[unique].filter((sc: any) => sc.id !== scopeId),
- });
- };
-
const handleSave = (scope: any) => {
if (!connection) return;
onChangeScopeMap({
@@ -62,7 +53,7 @@ export const StepTwo = () => {
handleBack();
};
- const columns = useColumns({ onDetail: handleGoDetail, onDelete:
handleDeleteScope });
+ const columns = useColumns({ onDetail: handleGoDetail });
const dataSource = useMemo(
() =>
uniqueList.map((unique) => {
@@ -84,7 +75,7 @@ export const StepTwo = () => {
<Icon icon="arrow-left" size={14} />
<span>Cancel and Go Back to the Data Scope List</span>
</div>
- <h2>Add Data Scope</h2>
+ <h2>Set Data Scope</h2>
<Divider />
<div className="connection">
<img src={connection.icon} width={24} alt="" />
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 75889231c..b10fc2867 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
@@ -28,10 +28,9 @@ import * as S from './styled';
interface Props {
onDetail: (connection: BPConnectionItemType) => void;
- onDelete: (plugin: string, connectionId: ID, scopeId: ID) => void;
}
-export const useColumns = ({ onDetail, onDelete }: Props) => {
+export const useColumns = ({ onDetail }: Props) => {
return useMemo(
() =>
[
@@ -51,13 +50,7 @@ export const useColumns = ({ onDetail, onDelete }: Props) =>
{
dataIndex: ['plugin', 'id', 'scopeIds'],
key: 'unique',
render: ({ plugin, id, scopeIds }: Pick<BPConnectionItemType,
'plugin' | 'id' | 'scopeIds'>) => (
- <DataScopeList
- groupByTs={false}
- plugin={plugin}
- connectionId={id}
- scopeIds={scopeIds}
- onDelete={onDelete}
- />
+ <DataScopeList groupByTs={false} plugin={plugin} connectionId={id}
scopeIds={scopeIds} />
),
},
{
@@ -70,12 +63,12 @@ export const useColumns = ({ onDetail, onDelete }: Props)
=> {
minimal
intent={Intent.PRIMARY}
icon="add"
- text="Add Scope"
+ text="Set Data Scope"
onClick={() => onDetail(connection)}
/>
),
},
] as ColumnType<BPConnectionItemType>,
- [onDetail, onDelete],
+ [onDetail],
);
};
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index 3369a067f..81d3901f8 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -136,27 +136,14 @@ export const Configuration = ({ blueprint, operating,
onUpdate, onRefresh }: Pro
},
{
title: 'Data Scope and Transformation',
- dataIndex: ['plugin', 'connectionId', 'scopeIds', 'scope'],
+ dataIndex: ['plugin', 'connectionId', 'scopeIds'],
key: 'sopce',
render: ({
plugin,
connectionId,
scopeIds,
- scope,
- }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' |
'scopeIds' | 'scope'>) => (
- <DataScopeList
- groupByTs
- plugin={plugin}
- connectionId={connectionId}
- scopeIds={scopeIds}
- onDelete={(plugin: string, connectionId: ID, scopeId: ID) =>
- handleUpdateConnection({
- plugin,
- connectionId,
- scopes: scope.filter((sc) => sc.id !== scopeId),
- })
- }
- />
+ }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' |
'scopeIds'>) => (
+ <DataScopeList groupByTs plugin={plugin}
connectionId={connectionId} scopeIds={scopeIds} />
),
},
{
@@ -173,7 +160,7 @@ export const Configuration = ({ blueprint, operating,
onUpdate, onRefresh }: Pro
}}
>
<Icon icon="add" color={Colors.BLUE2} />
- <span>Add Data Scope</span>
+ <span>Change Data Scope</span>
</div>
<div
className="item"
diff --git a/config-ui/src/plugins/components/data-scope-list/index.tsx
b/config-ui/src/plugins/components/data-scope-list/index.tsx
index 0f3eed8ed..aad93209e 100644
--- a/config-ui/src/plugins/components/data-scope-list/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-list/index.tsx
@@ -17,10 +17,10 @@
*/
import React from 'react';
-import { Button, Icon, Intent, Position } from '@blueprintjs/core';
+import { Icon, Position } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
-import { Loading, DeleteButton } from '@/components';
+import { Loading } from '@/components';
import type { UseDataScopeList } from './use-data-scope-list';
import { useDataScopeList } from './use-data-scope-list';
@@ -29,10 +29,9 @@ import * as S from './styled';
interface Props extends UseDataScopeList {
groupByTs: boolean;
scopeIds: string[];
- onDelete?: (plugin: string, connectionId: ID, scopeId: ID) => void;
}
-export const DataScopeList = ({ groupByTs, scopeIds, onDelete, ...props }:
Props) => {
+export const DataScopeList = ({ groupByTs, scopeIds, ...props }: Props) => {
const { loading, scope, scopeTsMap } = useDataScopeList({ scopeIds, ...props
});
if (!scope.length) {
@@ -49,9 +48,6 @@ export const DataScopeList = ({ groupByTs, scopeIds,
onDelete, ...props }: Props
scope.map((sc) => (
<S.ScopeItem key={sc.id}>
<span>{sc.name}</span>
- <DeleteButton onDelete={() => onDelete?.(props.plugin,
props.connectionId, sc.id)}>
- <Button small minimal intent={Intent.PRIMARY} icon="cross" />
- </DeleteButton>
</S.ScopeItem>
))}
@@ -68,11 +64,6 @@ export const DataScopeList = ({ groupByTs, scopeIds,
onDelete, ...props }: Props
<Tooltip2 className="name" content={sc.name}
position={Position.TOP}>
<span>{sc.name}</span>
</Tooltip2>
- {onDelete && scopeIds.length > 1 && (
- <DeleteButton onDelete={() => onDelete(props.plugin,
props.connectionId, sc.id)}>
- <Button small minimal intent={Intent.PRIMARY}
icon="cross" />
- </DeleteButton>
- )}
</li>
))}
</ul>
diff --git a/config-ui/src/plugins/components/data-scope/index.tsx
b/config-ui/src/plugins/components/data-scope/index.tsx
index 3253bba20..75f92a3fe 100644
--- a/config-ui/src/plugins/components/data-scope/index.tsx
+++ b/config-ui/src/plugins/components/data-scope/index.tsx
@@ -35,51 +35,30 @@ interface Props extends UseDataScope {
}
export const DataScope = ({ plugin, connectionId, entities, onCancel, ...props
}: Props) => {
- const { saving, disabledScope, selectedScope, selectedEntities,
onChangeScope, onChangeEntites, onSave } =
- useDataScope({
- ...props,
- plugin,
- connectionId,
- entities,
- });
+ const { saving, selectedScope, selectedEntities, onChangeScope,
onChangeEntites, onSave } = useDataScope({
+ ...props,
+ plugin,
+ connectionId,
+ entities,
+ });
return (
<S.Wrapper>
<div className="block">
{plugin === 'github' && (
- <GitHubDataScope
- connectionId={connectionId}
- disabledItems={disabledScope}
- selectedItems={selectedScope}
- onChangeItems={onChangeScope}
- />
+ <GitHubDataScope connectionId={connectionId}
selectedItems={selectedScope} onChangeItems={onChangeScope} />
)}
{plugin === 'jira' && (
- <JIRADataScope
- connectionId={connectionId}
- disabledItems={disabledScope}
- selectedItems={selectedScope}
- onChangeItems={onChangeScope}
- />
+ <JIRADataScope connectionId={connectionId}
selectedItems={selectedScope} onChangeItems={onChangeScope} />
)}
{plugin === 'gitlab' && (
- <GitLabDataScope
- connectionId={connectionId}
- disabledItems={disabledScope}
- selectedItems={selectedScope}
- onChangeItems={onChangeScope}
- />
+ <GitLabDataScope connectionId={connectionId}
selectedItems={selectedScope} onChangeItems={onChangeScope} />
)}
{plugin === 'jenkins' && (
- <JenkinsDataScope
- connectionId={connectionId}
- disabledItems={disabledScope}
- selectedItems={selectedScope}
- onChangeItems={onChangeScope}
- />
+ <JenkinsDataScope connectionId={connectionId}
selectedItems={selectedScope} onChangeItems={onChangeScope} />
)}
</div>
diff --git a/config-ui/src/plugins/components/data-scope/use-data-scope.ts
b/config-ui/src/plugins/components/data-scope/use-data-scope.ts
index 7632315b6..0c4cf3cf3 100644
--- a/config-ui/src/plugins/components/data-scope/use-data-scope.ts
+++ b/config-ui/src/plugins/components/data-scope/use-data-scope.ts
@@ -37,17 +37,16 @@ export interface UseDataScope {
export const useDataScope = ({ plugin, connectionId, entities, initialValues,
onSave }: UseDataScope) => {
const [saving, setSaving] = useState(false);
- const [disabledScope, setDisabledScope] = useState<any>([]);
const [selectedScope, setSelectedScope] = useState<any>([]);
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)));
- setDisabledScope(scope);
- };
-
useEffect(() => {
- handleSetDisabledScope(initialValues?.scope ?? []);
+ (async () => {
+ const scope = await Promise.all(
+ (initialValues?.scope ?? []).map((sc: any) => API.getDataScope(plugin,
connectionId, sc.id)),
+ );
+ setSelectedScope(scope);
+ })();
}, [initialValues?.scope]);
useEffect(() => {
@@ -89,33 +88,29 @@ export const useDataScope = ({ plugin, connectionId,
entities, initialValues, on
}),
{
setOperating: setSaving,
+ hideToast: true,
},
);
if (success) {
- onSave?.([
- ...(initialValues?.scope ?? []).map((it: any) => ({
- id: `${it.id}`,
- entities: selectedEntities.map((it: any) => it.value),
- })),
- ...res.map((it: any) => ({
+ onSave?.(
+ res.map((it: any) => ({
id: `${getPluginId(it)}`,
entities: selectedEntities.map((it: any) => it.value),
})),
- ]);
+ );
}
};
return useMemo(
() => ({
saving,
- disabledScope,
selectedScope,
selectedEntities,
onChangeScope: setSelectedScope,
onChangeEntites: setSelectedEntities,
onSave: handleSave,
}),
- [saving, disabledScope, selectedScope, selectedEntities],
+ [saving, selectedScope, selectedEntities],
);
};
diff --git
a/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
b/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
index 4c8fda4a1..51510fe75 100644
--- a/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
@@ -17,7 +17,6 @@
*/
import React, { useState, useEffect } from 'react';
-import { uniqWith, isEqual } from 'lodash';
import type { ID, ColumnType } from 'miller-columns-select';
import MillerColumnsSelect from 'miller-columns-select';
@@ -29,13 +28,11 @@ import { useMillerColumns, UseMillerColumnsProps } from
'./use-miller-columns';
import * as S from './styled';
interface Props extends UseMillerColumnsProps {
- disabledItems?: ScopeItemType[];
- selectedItems?: ScopeItemType[];
- onChangeItems?: (selectedItems: ScopeItemType[]) => void;
+ selectedItems: ScopeItemType[];
+ onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const MillerColumns = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
- const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }:
Props) => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
const { items, getHasMore, onExpandItem, onScrollColumn } =
useMillerColumns({
@@ -43,34 +40,24 @@ export const MillerColumns = ({ connectionId,
disabledItems, selectedItems, onCh
});
useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.githubId));
- }, [disabledItems]);
-
- useEffect(() => {
- setSelectedIds((selectedItems ?? []).map((it) => it.githubId));
+ setSelectedIds(selectedItems.map((it) => it.githubId));
}, [selectedItems]);
const handleChangeItems = (selectedIds: ID[]) => {
- const result = uniqWith(
- [
- ...items
- .filter((it) => it.type === 'repo')
- .map((it) => ({
- connectionId,
- githubId: it.githubId,
- name: it.name,
- ownerId: it.ownerId,
- language: it.language,
- description: it.description,
- cloneUrl: it.cloneUrl,
- HTMLUrl: it.HTMLUrl,
- })),
- ...(selectedItems ?? []),
- ],
- isEqual,
- ).filter((it) => selectedIds.includes(it.githubId));
+ const result = items
+ .filter((it) => (selectedIds.length ? selectedIds.includes(it.id) :
false))
+ .map((it) => ({
+ connectionId,
+ githubId: it.githubId,
+ name: it.name,
+ ownerId: it.ownerId,
+ language: it.language,
+ description: it.description,
+ cloneUrl: it.cloneUrl,
+ HTMLUrl: it.HTMLUrl,
+ }));
- onChangeItems?.(result);
+ onChangeItems(result);
};
const renderTitle = (column: ColumnType<any>) => {
@@ -91,7 +78,6 @@ export const MillerColumns = ({ connectionId, disabledItems,
selectedItems, onCh
renderLoading={renderLoading}
items={items}
selectedIds={selectedIds}
- disabledIds={disabledIds}
onSelectItemIds={handleChangeItems}
onExpandItem={onExpandItem}
onScrollColumn={onScrollColumn}
diff --git a/config-ui/src/plugins/register/github/data-scope.tsx
b/config-ui/src/plugins/register/github/data-scope.tsx
index 9fc7ad763..5101e3619 100644
--- a/config-ui/src/plugins/register/github/data-scope.tsx
+++ b/config-ui/src/plugins/register/github/data-scope.tsx
@@ -24,12 +24,11 @@ import { MillerColumns, RepoSelector } from './components';
interface Props {
connectionId: ID;
- disabledItems: ScopeItemType[];
selectedItems: ScopeItemType[];
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const GitHubDataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const GitHubDataScope = ({ connectionId, selectedItems, onChangeItems
}: Props) => {
const handleChangeItems = (scope: ScopeItemType[]) => {
onChangeItems(scope);
};
@@ -38,20 +37,10 @@ export const GitHubDataScope = ({ connectionId,
disabledItems, selectedItems, on
<>
<h3>Repositories *</h3>
<p>Select the repositories you would like to sync.</p>
- <MillerColumns
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={handleChangeItems}
- />
+ <MillerColumns connectionId={connectionId} selectedItems={selectedItems}
onChangeItems={handleChangeItems} />
<h4>Add repositories outside of your organizations</h4>
<p>Search for repositories and add to them</p>
- <RepoSelector
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={handleChangeItems}
- />
+ <RepoSelector connectionId={connectionId} selectedItems={selectedItems}
onChangeItems={handleChangeItems} />
</>
);
};
diff --git
a/config-ui/src/plugins/register/gitlab/components/miller-columns/index.tsx
b/config-ui/src/plugins/register/gitlab/components/miller-columns/index.tsx
index 70045ffd7..93ae0f2a0 100644
--- a/config-ui/src/plugins/register/gitlab/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/register/gitlab/components/miller-columns/index.tsx
@@ -17,7 +17,6 @@
*/
import React, { useEffect, useState } from 'react';
-import { uniqWith, isEqual } from 'lodash';
import MillerColumnsSelect from 'miller-columns-select';
import { Loading } from '@/components';
@@ -29,13 +28,11 @@ import { useMillerColumns } from './use-miller-columns';
import * as S from './styled';
interface Props extends UseMillerColumnsProps {
- disabledItems?: ScopeItemType[];
- selectedItems?: ScopeItemType[];
- onChangeItems?: (selectedItems: ScopeItemType[]) => void;
+ selectedItems: ScopeItemType[];
+ onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const MillerColumns = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
- const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }:
Props) => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
const { items, getHasMore, onExpandItem, onScrollColumn } =
useMillerColumns({
@@ -43,38 +40,28 @@ export const MillerColumns = ({ connectionId,
disabledItems, selectedItems, onCh
});
useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.gitlabId));
- }, [disabledItems]);
-
- useEffect(() => {
- setSelectedIds((selectedItems ?? []).map((it) => it.gitlabId));
+ setSelectedIds(selectedItems.map((it) => it.gitlabId));
}, [selectedItems]);
const handleChangeItems = (selectedIds: ID[]) => {
- const result = uniqWith(
- [
- ...items
- .filter((it) => it.type === 'project')
- .map((it) => ({
- connectionId,
- gitlabId: it.id,
- name: it.name,
- pathWithNamespace: it.pathWithNamespace,
- creatorId: it.creatorId,
- defaultBranch: it.defaultBranch,
- description: it.description,
- openIssuesCount: it.openIssuesCount,
- starCount: it.starCount,
- visibility: it.visibility,
- webUrl: it.webUrl,
- httpUrlToRepo: it.httpUrlToRepo,
- })),
- ...(selectedItems ?? []),
- ],
- isEqual,
- ).filter((it) => selectedIds.includes(it.gitlabId));
+ const result = items
+ .filter((it) => (selectedIds.length ? selectedIds.includes(it.id) :
false))
+ .map((it) => ({
+ connectionId,
+ gitlabId: it.id,
+ name: it.name,
+ pathWithNamespace: it.pathWithNamespace,
+ creatorId: it.creatorId,
+ defaultBranch: it.defaultBranch,
+ description: it.description,
+ openIssuesCount: it.openIssuesCount,
+ starCount: it.starCount,
+ visibility: it.visibility,
+ webUrl: it.webUrl,
+ httpUrlToRepo: it.httpUrlToRepo,
+ }));
- onChangeItems?.(result);
+ onChangeItems(result);
};
const renderTitle = (column: GitLabColumnType) => {
@@ -94,7 +81,6 @@ export const MillerColumns = ({ connectionId, disabledItems,
selectedItems, onCh
renderTitle={renderTitle}
renderLoading={renderLoading}
items={items}
- disabledIds={disabledIds}
selectedIds={selectedIds}
onSelectItemIds={handleChangeItems}
onExpandItem={onExpandItem}
diff --git
a/config-ui/src/plugins/register/gitlab/components/project-selector/index.tsx
b/config-ui/src/plugins/register/gitlab/components/project-selector/index.tsx
index d4c141ddc..93ecdfa1e 100644
---
a/config-ui/src/plugins/register/gitlab/components/project-selector/index.tsx
+++
b/config-ui/src/plugins/register/gitlab/components/project-selector/index.tsx
@@ -28,12 +28,11 @@ import { useProjectSelector } from './use-project-selector';
import * as S from './styled';
interface Props extends UseProjectSelectorProps {
- disabledItems?: ScopeItemType[];
- selectedItems?: ScopeItemType[];
- onChangeItems?: (selectedItems: ScopeItemType[]) => void;
+ selectedItems: ScopeItemType[];
+ onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const ProjectSelector = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const ProjectSelector = ({ connectionId, selectedItems, onChangeItems
}: Props) => {
const { loading, items, membership, onSearch, onChangeMembership } =
useProjectSelector({
connectionId,
});
@@ -45,7 +44,6 @@ export const ProjectSelector = ({ connectionId,
disabledItems, selectedItems, on
items={items}
getKey={(it) => `${it.gitlabId}`}
getName={(it) => it.name}
- disabledItems={disabledItems}
selectedItems={selectedItems}
onChangeItems={onChangeItems}
loading={loading}
diff --git a/config-ui/src/plugins/register/gitlab/data-scope.tsx
b/config-ui/src/plugins/register/gitlab/data-scope.tsx
index 03f2e72ca..c8465e21d 100644
--- a/config-ui/src/plugins/register/gitlab/data-scope.tsx
+++ b/config-ui/src/plugins/register/gitlab/data-scope.tsx
@@ -24,12 +24,11 @@ import { MillerColumns, ProjectSelector } from
'./components';
interface Props {
connectionId: ID;
- disabledItems: ScopeItemType[];
selectedItems: ScopeItemType[];
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const GitLabDataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const GitLabDataScope = ({ connectionId, selectedItems, onChangeItems
}: Props) => {
const handleChangeItems = (scope: ScopeItemType[]) => {
onChangeItems(scope);
};
@@ -38,20 +37,10 @@ export const GitLabDataScope = ({ connectionId,
disabledItems, selectedItems, on
<>
<h4>Projects *</h4>
<p>Select the project you would like to sync.</p>
- <MillerColumns
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={handleChangeItems}
- />
+ <MillerColumns connectionId={connectionId} selectedItems={selectedItems}
onChangeItems={handleChangeItems} />
<h5>Add repositories outside of your projects</h5>
<p>Search for repositories and add to them</p>
- <ProjectSelector
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={handleChangeItems}
- />
+ <ProjectSelector connectionId={connectionId}
selectedItems={selectedItems} onChangeItems={handleChangeItems} />
</>
);
};
diff --git
a/config-ui/src/plugins/register/jenkins/components/miller-columns/index.tsx
b/config-ui/src/plugins/register/jenkins/components/miller-columns/index.tsx
index 29554141f..b3a413008 100644
--- a/config-ui/src/plugins/register/jenkins/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/register/jenkins/components/miller-columns/index.tsx
@@ -27,13 +27,11 @@ import type { UseMillerColumnsProps } from
'./use-miller-columns';
import { useMillerColumns } from './use-miller-columns';
interface Props extends UseMillerColumnsProps {
- disabledItems?: ScopeItemType[];
- selectedItems?: ScopeItemType[];
- onChangeItems?: (selectedItems: ScopeItemType[]) => void;
+ selectedItems: ScopeItemType[];
+ onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const MillerColumns = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
- const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }:
Props) => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
const { items, getHasMore, onExpandItem } = useMillerColumns({
@@ -41,23 +39,19 @@ export const MillerColumns = ({ connectionId,
disabledItems, selectedItems, onCh
});
useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.jobFullName));
- }, [disabledItems]);
-
- useEffect(() => {
- setSelectedIds((selectedItems ?? []).map((it) => it.jobFullName));
+ setSelectedIds(selectedItems.map((it) => it.jobFullName));
}, [selectedItems]);
const handleChangeItems = (selectedIds: ID[]) => {
const result = items
- .filter((it) => selectedIds.includes(it.id) && it.type !== 'folder')
+ .filter((it) => (selectedIds.length ? selectedIds.includes(it.id) :
false))
.map((it: any) => ({
connectionId,
jobFullName: it.id,
name: it.id,
}));
- onChangeItems?.(result);
+ onChangeItems(result);
};
const renderLoading = () => {
@@ -72,7 +66,6 @@ export const MillerColumns = ({ connectionId, disabledItems,
selectedItems, onCh
getHasMore={getHasMore}
renderLoading={renderLoading}
items={items}
- disabledIds={disabledIds}
selectedIds={selectedIds}
onSelectItemIds={handleChangeItems}
onExpandItem={onExpandItem}
diff --git a/config-ui/src/plugins/register/jenkins/data-scope.tsx
b/config-ui/src/plugins/register/jenkins/data-scope.tsx
index a8232d8ba..ff64d6d08 100644
--- a/config-ui/src/plugins/register/jenkins/data-scope.tsx
+++ b/config-ui/src/plugins/register/jenkins/data-scope.tsx
@@ -24,22 +24,16 @@ import { MillerColumns } from './components';
interface Props {
connectionId: ID;
- disabledItems: ScopeItemType[];
selectedItems: ScopeItemType[];
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const JenkinsDataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const JenkinsDataScope = ({ connectionId, selectedItems, onChangeItems
}: Props) => {
return (
<>
<h3>Jobs *</h3>
<p>Select the jobs you would like to sync.</p>
- <MillerColumns
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={onChangeItems}
- />
+ <MillerColumns connectionId={connectionId} selectedItems={selectedItems}
onChangeItems={onChangeItems} />
</>
);
};
diff --git
a/config-ui/src/plugins/register/jira/components/miller-columns/index.tsx
b/config-ui/src/plugins/register/jira/components/miller-columns/index.tsx
index 87a5de378..f1ef8d6c2 100644
--- a/config-ui/src/plugins/register/jira/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/register/jira/components/miller-columns/index.tsx
@@ -27,13 +27,11 @@ import type { UseMillerColumnsProps } from
'./use-miller-columns';
import { useMillerColumns } from './use-miller-columns';
interface Props extends UseMillerColumnsProps {
- disabledItems?: ScopeItemType[];
- selectedItems?: ScopeItemType[];
- onChangeItems?: (selectedItems: ScopeItemType[]) => void;
+ selectedItems: ScopeItemType[];
+ onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const MillerColumns = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
- const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }:
Props) => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
const { items, getHasMore, onScrollColumn } = useMillerColumns({
@@ -41,16 +39,12 @@ export const MillerColumns = ({ connectionId,
disabledItems, selectedItems, onCh
});
useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.boardId));
- }, [disabledItems]);
-
- useEffect(() => {
- setSelectedIds((selectedItems ?? []).map((it) => it.boardId));
+ setSelectedIds(selectedItems.map((it) => it.boardId));
}, [selectedItems]);
const handleChangeItems = (selectedIds: ID[]) => {
const result = items
- .filter((it) => selectedIds.includes(it.id))
+ .filter((it) => (selectedIds.length ? selectedIds.includes(it.id) :
false))
.map((it) => ({
connectionId,
boardId: it.boardId,
@@ -60,7 +54,7 @@ export const MillerColumns = ({ connectionId, disabledItems,
selectedItems, onCh
projectId: it.projectId,
}));
- onChangeItems?.(result);
+ onChangeItems(result);
};
const renderLoading = () => {
@@ -74,7 +68,6 @@ export const MillerColumns = ({ connectionId, disabledItems,
selectedItems, onCh
getHasMore={getHasMore}
renderLoading={renderLoading}
items={items}
- disabledIds={disabledIds}
selectedIds={selectedIds}
onSelectItemIds={handleChangeItems}
onScrollColumn={onScrollColumn}
diff --git a/config-ui/src/plugins/register/jira/data-scope.tsx
b/config-ui/src/plugins/register/jira/data-scope.tsx
index d0855bf71..de8a3c384 100644
--- a/config-ui/src/plugins/register/jira/data-scope.tsx
+++ b/config-ui/src/plugins/register/jira/data-scope.tsx
@@ -24,22 +24,16 @@ import { MillerColumns } from './components/miller-columns';
interface Props {
connectionId: ID;
- disabledItems: ScopeItemType[];
selectedItems: ScopeItemType[];
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const JIRADataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const JIRADataScope = ({ connectionId, selectedItems, onChangeItems }:
Props) => {
return (
<>
<h3>Boards *</h3>
<p>Select the boards you would like to sync.</p>
- <MillerColumns
- connectionId={connectionId}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={onChangeItems}
- />
+ <MillerColumns connectionId={connectionId} selectedItems={selectedItems}
onChangeItems={onChangeItems} />
</>
);
};
diff --git a/config-ui/src/utils/operator.ts b/config-ui/src/utils/operator.ts
index 4bc4eb507..5a63584bd 100644
--- a/config-ui/src/utils/operator.ts
+++ b/config-ui/src/utils/operator.ts
@@ -24,6 +24,7 @@ export type OperateConfig = {
setOperating?: (success: boolean) => void;
formatMessage?: () => string;
formatReason?: (err: unknown) => string;
+ hideToast?: boolean;
};
/**
@@ -42,20 +43,24 @@ export const operator = async <T>(request: () =>
Promise<T>, config?: OperateCon
setOperating?.(true);
const res = await request();
const message = formatMessage?.() ?? 'Operation successfully completed';
- Toast.show({
- intent: Intent.SUCCESS,
- message,
- icon: 'endorsed',
- });
+ if (!config?.hideToast) {
+ Toast.show({
+ intent: Intent.SUCCESS,
+ message,
+ icon: 'endorsed',
+ });
+ }
return [true, res];
} catch (err) {
- console.error('Operation failed.', err)
+ console.error('Operation failed.', err);
const reason = formatReason?.(err) ?? 'Operation failed.';
- Toast.show({
- intent: Intent.DANGER,
- message: reason,
- icon: 'error',
- });
+ if (!config?.hideToast) {
+ Toast.show({
+ intent: Intent.DANGER,
+ message: reason,
+ icon: 'error',
+ });
+ }
return [false];
} finally {
