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 10:44:25 UTC

[incubator-devlake] branch main updated: fix(config-ui): the data scope select error (#4100)

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 f48c2e38f fix(config-ui): the data scope select error (#4100)
f48c2e38f is described below

commit f48c2e38f1eb17ce513992c34b516fe0aac175b9
Author: 青湛 <0x...@gmail.com>
AuthorDate: Wed Jan 4 18:44:20 2023 +0800

    fix(config-ui): the data scope select error (#4100)
    
    * fix(config-ui): adjust the plugin data scope
    
    * feat(config-ui): add new component delete-button
    
    * fix(config-ui): adjust the component dialog paramer children
    
    * refactor(config-ui): adjust the create blueprint data scope
    
    * refactor(config-ui): adjust the blueprint detail data scope
    
    * fix(config-ui): the scope id type error
---
 .../delete-button/index.tsx}                       | 39 ++++++++++++-----
 config-ui/src/components/dialog/index.tsx          |  2 +-
 config-ui/src/components/index.ts                  |  1 +
 .../blueprint/create/step-three/use-columns.tsx    |  2 +-
 .../src/pages/blueprint/create/step-two/index.tsx  | 18 ++++++--
 .../blueprint/create/step-two/use-columns.tsx      | 15 +++++--
 .../index.tsx                                      |  6 +--
 .../src/pages/blueprint/detail/components/index.ts |  2 +-
 .../pages/blueprint/detail/panel/configuration.tsx | 30 +++++++++----
 config-ui/src/pages/blueprint/detail/types.ts      |  2 +-
 .../src/plugins/common/data-scope-list/index.tsx   | 34 ++++++++++-----
 .../src/plugins/common/data-scope-list/styled.ts   | 24 ++++-------
 .../common/data-scope-list/use-data-scope-list.ts  |  2 +-
 config-ui/src/plugins/common/data-scope/index.tsx  | 41 +++++++++++++-----
 .../plugins/common/data-scope/use-data-scope.ts    | 21 +++++++---
 .../github/components/miller-columns/index.tsx     | 31 +++++++-------
 .../github/components/repo-selector/index.tsx      |  6 +--
 .../components/repo-selector/use-repo-selector.ts  |  2 -
 config-ui/src/plugins/github/data-scope.tsx        | 24 +++++------
 config-ui/src/plugins/github/types.ts              |  6 ---
 .../gitlab/components/miller-columns/index.tsx     | 32 +++++++-------
 .../gitlab/components/project-selector/index.tsx   |  6 +--
 .../project-selector/use-project-selector.ts       |  2 -
 config-ui/src/plugins/gitlab/data-scope.tsx        | 24 +++++------
 config-ui/src/plugins/gitlab/types.ts              |  6 ---
 .../jenkins/components/miller-columns/index.tsx    | 29 ++++++++-----
 config-ui/src/plugins/jenkins/data-scope.tsx       | 10 ++++-
 .../jira/components/miller-columns/index.tsx       | 49 ++++++++++++----------
 config-ui/src/plugins/jira/data-scope.tsx          |  5 ++-
 29 files changed, 279 insertions(+), 192 deletions(-)

diff --git a/config-ui/src/plugins/jenkins/data-scope.tsx b/config-ui/src/components/delete-button/index.tsx
similarity index 50%
copy from config-ui/src/plugins/jenkins/data-scope.tsx
copy to config-ui/src/components/delete-button/index.tsx
index ff64d6d08..c6a2ea9bc 100644
--- a/config-ui/src/plugins/jenkins/data-scope.tsx
+++ b/config-ui/src/components/delete-button/index.tsx
@@ -16,24 +16,41 @@
  *
  */
 
-import React from 'react';
+import React, { useState } from 'react';
+import { Position } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 
-import type { ScopeItemType } from './types';
-
-import { MillerColumns } from './components';
+import { Dialog } from '@/components';
 
 interface Props {
-  connectionId: ID;
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  children: JSX.Element;
+  loading?: boolean;
+  onDelete: () => void;
 }
 
-export const JenkinsDataScope = ({ connectionId, selectedItems, onChangeItems }: Props) => {
+export const DeleteButton = ({ children, loading = false, onDelete }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDelete = () => {
+    onDelete();
+    setIsOpen(false);
+  };
+
   return (
     <>
-      <h3>Jobs *</h3>
-      <p>Select the jobs you would like to sync.</p>
-      <MillerColumns connectionId={connectionId} selectedItems={selectedItems} onChangeItems={onChangeItems} />
+      <Tooltip2 position={Position.TOP} content="Delete">
+        {React.cloneElement(children, {
+          onClick: () => setIsOpen(true),
+        })}
+      </Tooltip2>
+      <Dialog
+        isOpen={isOpen}
+        title="Are you sure you want to delete this data scope?"
+        onCancel={() => setIsOpen(false)}
+        okLoading={loading}
+        okText="Confirm"
+        onOk={handleDelete}
+      />
     </>
   );
 };
diff --git a/config-ui/src/components/dialog/index.tsx b/config-ui/src/components/dialog/index.tsx
index 2fd9f4b51..85d4b89a3 100644
--- a/config-ui/src/components/dialog/index.tsx
+++ b/config-ui/src/components/dialog/index.tsx
@@ -23,7 +23,7 @@ import * as S from './styled';
 
 interface Props {
   isOpen: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   style?: React.CSSProperties;
   title?: string;
   footer?: React.ReactNode | null;
diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts
index 154c84a64..50248a71d 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -26,3 +26,4 @@ export * from './toast';
 export * from './logo';
 export * from './card';
 export * from './inspector';
+export * from './delete-button';
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 e49aeaf27..2897aff7a 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
@@ -63,7 +63,7 @@ export const useColumns = ({ onDetail }: Props) => {
               minimal
               intent={Intent.PRIMARY}
               icon="add"
-              text="Add Transformation"
+              text="Edit 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 ac8976c41..587bbf1bb 100644
--- a/config-ui/src/pages/blueprint/create/step-two/index.tsx
+++ b/config-ui/src/pages/blueprint/create/step-two/index.tsx
@@ -21,7 +21,7 @@ import { Icon } from '@blueprintjs/core';
 
 import { Card, Table, Divider } from '@/components';
 import { useConnection } from '@/store';
-import { DataScope } from '@/plugins';
+import { Plugins, DataScope } from '@/plugins';
 
 import type { BPConnectionItemType } from '../types';
 import { useCreateBP } from '../bp-context';
@@ -44,6 +44,15 @@ export const StepTwo = () => {
     onChangeShowDetail(false);
   };
 
+  const handleDeleteScope = (plugin: Plugins, 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({
@@ -53,7 +62,7 @@ export const StepTwo = () => {
     handleBack();
   };
 
-  const columns = useColumns({ onDetail: handleGoDetail });
+  const columns = useColumns({ onDetail: handleGoDetail, onDelete: handleDeleteScope });
   const dataSource = useMemo(
     () =>
       uniqueList.map((unique) => {
@@ -63,7 +72,7 @@ export const StepTwo = () => {
           ...connection,
           scope: scope.map((sc: any) => ({
             id: `${sc.id}`,
-            entities: `${sc.entities}`,
+            entities: sc.entities,
           })),
         };
       }),
@@ -88,6 +97,9 @@ export const StepTwo = () => {
         plugin={connection.plugin}
         connectionId={connection.id}
         entities={connection.entities}
+        initialValues={{
+          scope: connection.scope,
+        }}
         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 318341b8a..4775a34b4 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
@@ -20,7 +20,7 @@ import React, { useMemo } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
 import type { ColumnType } from '@/components';
-import { DataScopeList } from '@/plugins';
+import { Plugins, DataScopeList } from '@/plugins';
 
 import type { BPConnectionItemType } from '../types';
 
@@ -28,9 +28,10 @@ import * as S from './styled';
 
 interface Props {
   onDetail: (connection: BPConnectionItemType) => void;
+  onDelete: (plugin: Plugins, connectionId: ID, scopeId: ID) => void;
 }
 
-export const useColumns = ({ onDetail }: Props) => {
+export const useColumns = ({ onDetail, onDelete }: Props) => {
   return useMemo(
     () =>
       [
@@ -50,7 +51,13 @@ export const useColumns = ({ onDetail }: Props) => {
           dataIndex: ['plugin', 'id', 'scope'],
           key: 'unique',
           render: ({ plugin, id, scope }: Pick<BPConnectionItemType, 'plugin' | 'id' | 'scope'>) => (
-            <DataScopeList groupByTs={false} plugin={plugin} connectionId={id} scopeIds={scope.map((sc) => sc.id)} />
+            <DataScopeList
+              groupByTs={false}
+              plugin={plugin}
+              connectionId={id}
+              scopeIds={scope.map((sc) => sc.id)}
+              onDelete={onDelete}
+            />
           ),
         },
         {
@@ -69,6 +76,6 @@ export const useColumns = ({ onDetail }: Props) => {
           ),
         },
       ] as ColumnType<BPConnectionItemType>,
-    [],
+    [onDetail, onDelete],
   );
 };
diff --git a/config-ui/src/pages/blueprint/detail/components/update-scope-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
similarity index 89%
rename from config-ui/src/pages/blueprint/detail/components/update-scope-dialog/index.tsx
rename to config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
index 1825e3ffc..63534404e 100644
--- a/config-ui/src/pages/blueprint/detail/components/update-scope-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/add-scope-dialog/index.tsx
@@ -29,10 +29,10 @@ interface Props {
   onSubmit: (connection: any) => void;
 }
 
-export const UpdateScopeDialog = ({ connection, onCancel, onSubmit }: Props) => {
+export const AddScopeDialog = ({ connection, onCancel, onSubmit }: Props) => {
   if (!connection) return null;
 
-  const { plugin, connectionId, entities, selectedEntites } = connection;
+  const { plugin, connectionId, entities, scope } = connection;
 
   const handleSaveScope = (sc: any) => {
     onSubmit({
@@ -52,7 +52,7 @@ export const UpdateScopeDialog = ({ connection, onCancel, onSubmit }: Props) =>
         connectionId={connectionId}
         entities={entities}
         initialValues={{
-          entites: selectedEntites,
+          scope,
         }}
         onCancel={onCancel}
         onSave={handleSaveScope}
diff --git a/config-ui/src/pages/blueprint/detail/components/index.ts b/config-ui/src/pages/blueprint/detail/components/index.ts
index a78ec47ea..611aa2ae3 100644
--- a/config-ui/src/pages/blueprint/detail/components/index.ts
+++ b/config-ui/src/pages/blueprint/detail/components/index.ts
@@ -18,5 +18,5 @@
 
 export * from './update-name-dialog';
 export * from './update-policy-dialog';
-export * from './update-scope-dialog';
+export * from './add-scope-dialog';
 export * from './update-transformation-dialog';
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index 73baede66..1649e2679 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -30,7 +30,7 @@ import { validRawPlan } from '../../utils';
 import { AdvancedEditor } from '../../components';
 
 import type { ConfigConnectionItemType } from '../types';
-import { UpdateNameDialog, UpdatePolicyDialog, UpdateScopeDialog, UpdateTransformationDialog } from '../components';
+import { UpdateNameDialog, UpdatePolicyDialog, AddScopeDialog, UpdateTransformationDialog } from '../components';
 import * as S from '../styled';
 
 type Type = 'name' | 'frequency' | 'scope' | 'transformation';
@@ -66,7 +66,7 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
             entities: plugin.entities,
             selectedEntites: cs.scopes[0].entities,
             plugin: cs.plugin,
-            scopeIds: cs.scopes.map((sc: any) => sc.id),
+            scope: cs.scopes,
           };
         })
         .filter(Boolean),
@@ -130,14 +130,26 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
         },
         {
           title: 'Data Scope and Transformation',
-          dataIndex: ['plugin', 'connectionId', 'scopeIds'],
+          dataIndex: ['plugin', 'connectionId', 'scope'],
           key: 'sopce',
           render: ({
             plugin,
             connectionId,
-            scopeIds,
-          }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' | 'scopeIds'>) => (
-            <DataScopeList groupByTs plugin={plugin} connectionId={connectionId} scopeIds={scopeIds} />
+            scope,
+          }: Pick<ConfigConnectionItemType, 'plugin' | 'connectionId' | 'scope'>) => (
+            <DataScopeList
+              groupByTs
+              plugin={plugin}
+              connectionId={connectionId}
+              scopeIds={scope?.map((sc) => sc.id)}
+              onDelete={(plugin: Plugins, connectionId: ID, scopeId: ID) =>
+                handleUpdateConnection({
+                  plugin,
+                  connectionId,
+                  scopes: scope.filter((sc) => sc.id !== `${scopeId}`),
+                })
+              }
+            />
           ),
         },
         {
@@ -154,7 +166,7 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
                 }}
               >
                 <Icon icon="annotation" color={Colors.BLUE2} />
-                <span>Change Data Scope</span>
+                <span>Add Data Scope</span>
               </div>
               <div
                 className="item"
@@ -164,7 +176,7 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
                 }}
               >
                 <Icon icon="annotation" color={Colors.BLUE2} />
-                <span>Change Transformation</span>
+                <span>Edit Transformation</span>
               </div>
             </S.ActionColumn>
           ),
@@ -230,7 +242,7 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
         />
       )}
       {type === 'scope' && (
-        <UpdateScopeDialog connection={curConnection} onCancel={handleCancel} onSubmit={handleUpdateConnection} />
+        <AddScopeDialog connection={curConnection} onCancel={handleCancel} onSubmit={handleUpdateConnection} />
       )}
       {type === 'transformation' && (
         <UpdateTransformationDialog connection={curConnection} onCancel={handleCancel} onRefresh={onRefresh} />
diff --git a/config-ui/src/pages/blueprint/detail/types.ts b/config-ui/src/pages/blueprint/detail/types.ts
index 872ebb001..55920a6ef 100644
--- a/config-ui/src/pages/blueprint/detail/types.ts
+++ b/config-ui/src/pages/blueprint/detail/types.ts
@@ -25,5 +25,5 @@ export type ConfigConnectionItemType = {
   plugin: Plugins;
   entities: string[];
   selectedEntites: string[];
-  scopeIds: ID[];
+  scope: Array<{ id: ID; entities: string[] }>;
 };
diff --git a/config-ui/src/plugins/common/data-scope-list/index.tsx b/config-ui/src/plugins/common/data-scope-list/index.tsx
index 8fba9eb9c..e5e4fe04c 100644
--- a/config-ui/src/plugins/common/data-scope-list/index.tsx
+++ b/config-ui/src/plugins/common/data-scope-list/index.tsx
@@ -17,8 +17,10 @@
  */
 
 import React from 'react';
+import { Button, Icon, Intent } from '@blueprintjs/core';
 
-import { Loading } from '@/components';
+import { Loading, DeleteButton } from '@/components';
+import { Plugins } from '@/plugins';
 
 import type { UseDataScopeList } from './use-data-scope-list';
 import { useDataScopeList } from './use-data-scope-list';
@@ -26,9 +28,10 @@ import * as S from './styled';
 
 interface Props extends UseDataScopeList {
   groupByTs: boolean;
+  onDelete?: (plugin: Plugins, connectionId: ID, scopeId: ID) => void;
 }
 
-export const DataScopeList = ({ groupByTs, ...props }: Props) => {
+export const DataScopeList = ({ groupByTs, onDelete, ...props }: Props) => {
   const { loading, scope, scopeTsMap } = useDataScopeList({ ...props });
 
   if (!scope.length) {
@@ -41,24 +44,33 @@ export const DataScopeList = ({ groupByTs, ...props }: Props) => {
 
   return (
     <S.ScopeList>
-      {!groupByTs && scope.map((sc) => <S.ScopeItem key={sc.id}>{sc.name}</S.ScopeItem>)}
+      {!groupByTs &&
+        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>
+        ))}
 
       {groupByTs &&
         Object.keys(scopeTsMap).map((name) => (
           <S.ScopeItemMap key={name}>
             <div className="name">
+              <Icon icon="function" />
               <span>{name}</span>
-              {name !== 'No Transformation' && (
-                <div className="action">
-                  {/* <span onClick={() => onUpdateScope(scopeTsMap[name])}>
-                Remove
-              </span> */}
-                </div>
-              )}
             </div>
             <ul>
               {scopeTsMap[name].map((sc) => (
-                <li key={sc.id}>{sc.name}</li>
+                <li key={sc.id}>
+                  <span>{sc.name}</span>
+                  {onDelete && (
+                    <DeleteButton onDelete={() => onDelete(props.plugin, props.connectionId, sc.id)}>
+                      <Button small minimal intent={Intent.PRIMARY} icon="cross" />
+                    </DeleteButton>
+                  )}
+                </li>
               ))}
             </ul>
           </S.ScopeItemMap>
diff --git a/config-ui/src/plugins/common/data-scope-list/styled.ts b/config-ui/src/plugins/common/data-scope-list/styled.ts
index 2fb505ce2..4833b17bf 100644
--- a/config-ui/src/plugins/common/data-scope-list/styled.ts
+++ b/config-ui/src/plugins/common/data-scope-list/styled.ts
@@ -30,6 +30,10 @@ export const ScopeItem = styled.li`
   &:last-child {
     margin-bottom: 0;
   }
+
+  .bp4-button {
+    margin-left: 6px;
+  }
 `;
 
 export const ScopeItemMap = styled(ScopeItem)`
@@ -40,26 +44,12 @@ export const ScopeItemMap = styled(ScopeItem)`
     align-items: center;
     font-size: 12px;
 
-    & > span {
+    span {
       font-weight: 600;
     }
 
-    .action {
-      margin-left: 8px;
-
-      & > span {
-        font-size: 11px;
-        color: #7497f7;
-        cursor: pointer;
-
-        &:hover {
-          color: #106ba3;
-        }
-      }
-
-      span + span {
-        margin-left: 4px;
-      }
+    span.bp4-icon {
+      margin-right: 6px;
     }
   }
 
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 22f87111c..3743b44ff 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
@@ -88,7 +88,7 @@ export const useDataScopeList = ({ plugin, connectionId, scopeIds }: UseDataScop
 
   useEffect(() => {
     getScopeDetail();
-  }, []);
+  }, [scopeIds]);
 
   return useMemo(
     () => ({
diff --git a/config-ui/src/plugins/common/data-scope/index.tsx b/config-ui/src/plugins/common/data-scope/index.tsx
index 0aa595a85..353b8fe09 100644
--- a/config-ui/src/plugins/common/data-scope/index.tsx
+++ b/config-ui/src/plugins/common/data-scope/index.tsx
@@ -35,30 +35,51 @@ interface Props extends UseDataScope {
 }
 
 export const DataScope = ({ plugin, connectionId, entities, onCancel, ...props }: Props) => {
-  const { saving, selectedScope, selectedEntities, onChangeScope, onChangeEntites, onSave } = useDataScope({
-    ...props,
-    plugin,
-    connectionId,
-    entities,
-  });
+  const { saving, disabledScope, selectedScope, selectedEntities, onChangeScope, onChangeEntites, onSave } =
+    useDataScope({
+      ...props,
+      plugin,
+      connectionId,
+      entities,
+    });
 
   return (
     <S.Wrapper>
       <div className="block">
         {plugin === Plugins.GitHub && (
-          <GitHubDataScope connectionId={connectionId} selectedItems={selectedScope} onChangeItems={onChangeScope} />
+          <GitHubDataScope
+            connectionId={connectionId}
+            disabledItems={disabledScope}
+            selectedItems={selectedScope}
+            onChangeItems={onChangeScope}
+          />
         )}
 
         {plugin === Plugins.JIRA && (
-          <JIRADataScope connectionId={connectionId} selectedItems={selectedScope} onChangeItems={onChangeScope} />
+          <JIRADataScope
+            connectionId={connectionId}
+            disabledItems={disabledScope}
+            selectedItems={selectedScope}
+            onChangeItems={onChangeScope}
+          />
         )}
 
         {plugin === Plugins.GitLab && (
-          <GitLabDataScope connectionId={connectionId} selectedItems={selectedScope} onChangeItems={onChangeScope} />
+          <GitLabDataScope
+            connectionId={connectionId}
+            disabledItems={disabledScope}
+            selectedItems={selectedScope}
+            onChangeItems={onChangeScope}
+          />
         )}
 
         {plugin === Plugins.Jenkins && (
-          <JenkinsDataScope connectionId={connectionId} selectedItems={selectedScope} onChangeItems={onChangeScope} />
+          <JenkinsDataScope
+            connectionId={connectionId}
+            disabledItems={disabledScope}
+            selectedItems={selectedScope}
+            onChangeItems={onChangeScope}
+          />
         )}
       </div>
 
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 6f1b2033b..f72b5c318 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
@@ -37,11 +37,17 @@ 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<string[]>([]);
 
+  const handleSetDisabledScope = async (disabledScope: any) => {
+    const scope = await Promise.all(disabledScope.map((sc: any) => API.getDataScope(plugin, connectionId, sc.id)));
+    setDisabledScope(scope);
+  };
+
   useEffect(() => {
-    setSelectedScope(initialValues?.scope ?? []);
+    handleSetDisabledScope(initialValues?.scope ?? []);
   }, [initialValues?.scope]);
 
   useEffect(() => {
@@ -87,24 +93,29 @@ export const useDataScope = ({ plugin, connectionId, entities, initialValues, on
     );
 
     if (success) {
-      onSave?.(
-        res.map((it: any) => ({
+      onSave?.([
+        ...(initialValues?.scope ?? []).map((it: any) => ({
+          id: it.id,
+          entities: selectedEntities,
+        })),
+        ...res.map((it: any) => ({
           id: getPluginId(it),
           entities: selectedEntities,
         })),
-      );
+      ]);
     }
   };
 
   return useMemo(
     () => ({
       saving,
+      disabledScope,
       selectedScope,
       selectedEntities,
       onChangeScope: setSelectedScope,
       onChangeEntites: setSelectedEntities,
       onSave: handleSave,
     }),
-    [saving, selectedScope, selectedEntities],
+    [saving, disabledScope, selectedScope, selectedEntities],
   );
 };
diff --git a/config-ui/src/plugins/github/components/miller-columns/index.tsx b/config-ui/src/plugins/github/components/miller-columns/index.tsx
index e953fc1c8..81a76011a 100644
--- a/config-ui/src/plugins/github/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/github/components/miller-columns/index.tsx
@@ -23,33 +23,36 @@ import MillerColumnsSelect from 'miller-columns-select';
 import { Loading } from '@/components';
 
 import type { ScopeItemType } from '../../types';
-import { ScopeFromEnum } from '../../types';
 
 import { useMillerColumns, UseMillerColumnsProps } from './use-miller-columns';
 import * as S from './styled';
 
 interface Props extends UseMillerColumnsProps {
-  disabledItems: ScopeItemType[];
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
 export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
-  const [seletedIds, setSelectedIds] = useState<ID[]>([]);
+  const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+  const [selectedIds, setSelectedIds] = useState<ID[]>([]);
 
   const { items, getHasMore, onExpandItem, onScrollColumn } = useMillerColumns({
     connectionId,
   });
 
   useEffect(() => {
-    setSelectedIds(selectedItems.map((it) => it.githubId));
-  }, []);
+    setDisabledIds((disabledItems ?? []).map((it) => it.githubId));
+  }, [disabledItems]);
 
   useEffect(() => {
+    setSelectedIds((selectedItems ?? []).map((it) => it.githubId));
+  }, [selectedItems]);
+
+  const handleChangeItems = (selectedIds: ID[]) => {
     const result = items
-      .filter((it) => seletedIds.includes(it.id) && it.type === 'repo')
+      .filter((it) => selectedIds.includes(it.id) && it.type === 'repo')
       .map((it) => ({
-        from: ScopeFromEnum.MILLER_COLUMNS,
         connectionId,
         githubId: it.githubId,
         name: it.name,
@@ -60,8 +63,8 @@ export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onCh
         HTMLUrl: it.HTMLUrl,
       }));
 
-    onChangeItems(result);
-  }, [seletedIds]);
+    onChangeItems?.(result);
+  };
 
   const renderTitle = (column: ColumnType<any>) => {
     return !column.parentId && <S.ColumnTitle>Organizations/Owners</S.ColumnTitle>;
@@ -80,9 +83,9 @@ export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onCh
       renderTitle={renderTitle}
       renderLoading={renderLoading}
       items={items}
-      selectedIds={seletedIds}
-      disabledIds={disabledItems.map((it) => it.githubId)}
-      onSelectItemIds={setSelectedIds}
+      selectedIds={selectedIds}
+      disabledIds={disabledIds}
+      onSelectItemIds={handleChangeItems}
       onExpandItem={onExpandItem}
       onScrollColumn={onScrollColumn}
     />
diff --git a/config-ui/src/plugins/github/components/repo-selector/index.tsx b/config-ui/src/plugins/github/components/repo-selector/index.tsx
index d9d540b58..4151514c8 100644
--- a/config-ui/src/plugins/github/components/repo-selector/index.tsx
+++ b/config-ui/src/plugins/github/components/repo-selector/index.tsx
@@ -25,9 +25,9 @@ import { ScopeItemType } from '../../types';
 import { useRepoSelector, UseRepoSelectorProps } from './use-repo-selector';
 
 interface Props extends UseRepoSelectorProps {
-  disabledItems: ScopeItemType[];
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
 export const RepoSelector = ({ disabledItems, selectedItems, onChangeItems, ...props }: Props) => {
diff --git a/config-ui/src/plugins/github/components/repo-selector/use-repo-selector.ts b/config-ui/src/plugins/github/components/repo-selector/use-repo-selector.ts
index edb4569d9..007a9a044 100644
--- a/config-ui/src/plugins/github/components/repo-selector/use-repo-selector.ts
+++ b/config-ui/src/plugins/github/components/repo-selector/use-repo-selector.ts
@@ -19,7 +19,6 @@
 import { useState, useEffect, useMemo } from 'react';
 
 import type { ScopeItemType } from '../../types';
-import { ScopeFromEnum } from '../../types';
 import { useProxyPrefix } from '../../hooks';
 import * as API from '../../api';
 
@@ -44,7 +43,6 @@ export const useRepoSelector = ({ connectionId }: UseRepoSelectorProps) => {
         const res = await API.searchRepo(prefix, { q: search });
         setItems(
           res.items.map((it: any) => ({
-            from: ScopeFromEnum.REPO_SELECTOR,
             connectionId,
             githubId: it.id,
             name: `${it.owner.login}/${it.name}`,
diff --git a/config-ui/src/plugins/github/data-scope.tsx b/config-ui/src/plugins/github/data-scope.tsx
index 2556fb468..9fc7ad763 100644
--- a/config-ui/src/plugins/github/data-scope.tsx
+++ b/config-ui/src/plugins/github/data-scope.tsx
@@ -19,23 +19,19 @@
 import React from 'react';
 
 import type { ScopeItemType } from './types';
-import { ScopeFromEnum } from './types';
 
 import { MillerColumns, RepoSelector } from './components';
 
 interface Props {
   connectionId: ID;
+  disabledItems: ScopeItemType[];
   selectedItems: ScopeItemType[];
   onChangeItems: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const GitHubDataScope = ({ connectionId, selectedItems, onChangeItems }: Props) => {
-  const handleChangeMillerColumnsItems = (sis: ScopeItemType[]) => {
-    onChangeItems([...selectedItems.filter((it) => it.from !== ScopeFromEnum.MILLER_COLUMNS), ...sis]);
-  };
-
-  const handleChangeRepoSelectorItems = (sis: ScopeItemType[]) => {
-    onChangeItems([...selectedItems.filter((it) => it.from !== ScopeFromEnum.REPO_SELECTOR), ...sis]);
+export const GitHubDataScope = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
+  const handleChangeItems = (scope: ScopeItemType[]) => {
+    onChangeItems(scope);
   };
 
   return (
@@ -44,17 +40,17 @@ export const GitHubDataScope = ({ connectionId, selectedItems, onChangeItems }:
       <p>Select the repositories you would like to sync.</p>
       <MillerColumns
         connectionId={connectionId}
-        disabledItems={selectedItems.filter((it) => it.from !== ScopeFromEnum.MILLER_COLUMNS)}
-        selectedItems={selectedItems.filter((it) => it.from === ScopeFromEnum.MILLER_COLUMNS)}
-        onChangeItems={handleChangeMillerColumnsItems}
+        disabledItems={disabledItems}
+        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={selectedItems.filter((it) => it.from !== ScopeFromEnum.REPO_SELECTOR)}
-        selectedItems={selectedItems.filter((it) => it.from === ScopeFromEnum.REPO_SELECTOR)}
-        onChangeItems={handleChangeRepoSelectorItems}
+        disabledItems={disabledItems}
+        selectedItems={selectedItems}
+        onChangeItems={handleChangeItems}
       />
     </>
   );
diff --git a/config-ui/src/plugins/github/types.ts b/config-ui/src/plugins/github/types.ts
index 3675d9f9e..c382b868c 100644
--- a/config-ui/src/plugins/github/types.ts
+++ b/config-ui/src/plugins/github/types.ts
@@ -16,13 +16,7 @@
  *
  */
 
-export enum ScopeFromEnum {
-  MILLER_COLUMNS = 'miller-columns',
-  REPO_SELECTOR = 'repo-selector',
-}
-
 export type ScopeItemType = {
-  from: ScopeFromEnum;
   connectionId: ID;
   githubId: number;
   name: string;
diff --git a/config-ui/src/plugins/gitlab/components/miller-columns/index.tsx b/config-ui/src/plugins/gitlab/components/miller-columns/index.tsx
index d98ee3234..e0719e5c2 100644
--- a/config-ui/src/plugins/gitlab/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/gitlab/components/miller-columns/index.tsx
@@ -22,34 +22,37 @@ import MillerColumnsSelect from 'miller-columns-select';
 import { Loading } from '@/components';
 
 import type { ScopeItemType } from '../../types';
-import { ScopeFromEnum } from '../../types';
 
 import type { UseMillerColumnsProps, GitLabColumnType } from './use-miller-columns';
 import { useMillerColumns } from './use-miller-columns';
 import * as S from './styled';
 
 interface Props extends UseMillerColumnsProps {
-  disabledItems: ScopeItemType[];
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
 export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
-  const [seletedIds, setSelectedIds] = useState<ID[]>([]);
+  const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+  const [selectedIds, setSelectedIds] = useState<ID[]>([]);
 
   const { items, getHasMore, onExpandItem, onScrollColumn } = useMillerColumns({
     connectionId,
   });
 
   useEffect(() => {
-    setSelectedIds(selectedItems.map((it) => it.gitlabId));
-  }, []);
+    setDisabledIds((disabledItems ?? []).map((it) => it.gitlabId));
+  }, [disabledItems]);
 
   useEffect(() => {
+    setSelectedIds((selectedItems ?? []).map((it) => it.gitlabId));
+  }, []);
+
+  const handleChangeItems = (selectedIds: ID[]) => {
     const result = items
-      .filter((it) => seletedIds.includes(it.id) && it.type === 'project')
+      .filter((it) => selectedIds.includes(it.id) && it.type === 'project')
       .map((it) => ({
-        from: ScopeFromEnum.MILLER_COLUMNS,
         connectionId,
         gitlabId: it.id,
         name: it.name,
@@ -63,8 +66,9 @@ export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onCh
         webUrl: it.webUrl,
         httpUrlToRepo: it.httpUrlToRepo,
       }));
-    onChangeItems(result);
-  }, [seletedIds]);
+
+    onChangeItems?.(result);
+  };
 
   const renderTitle = (column: GitLabColumnType) => {
     return !column.parentId && <S.ColumnTitle>Subgroups/Projects</S.ColumnTitle>;
@@ -83,9 +87,9 @@ export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onCh
       renderTitle={renderTitle}
       renderLoading={renderLoading}
       items={items}
-      selectedIds={seletedIds}
-      disabledIds={disabledItems.map((it) => it.gitlabId)}
-      onSelectItemIds={setSelectedIds}
+      disabledIds={disabledIds}
+      selectedIds={selectedIds}
+      onSelectItemIds={handleChangeItems}
       onExpandItem={onExpandItem}
       onScrollColumn={onScrollColumn}
     />
diff --git a/config-ui/src/plugins/gitlab/components/project-selector/index.tsx b/config-ui/src/plugins/gitlab/components/project-selector/index.tsx
index 5e77909f8..d4c141ddc 100644
--- a/config-ui/src/plugins/gitlab/components/project-selector/index.tsx
+++ b/config-ui/src/plugins/gitlab/components/project-selector/index.tsx
@@ -28,9 +28,9 @@ import { useProjectSelector } from './use-project-selector';
 import * as S from './styled';
 
 interface Props extends UseProjectSelectorProps {
-  disabledItems: ScopeItemType[];
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
 export const ProjectSelector = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
diff --git a/config-ui/src/plugins/gitlab/components/project-selector/use-project-selector.ts b/config-ui/src/plugins/gitlab/components/project-selector/use-project-selector.ts
index 004730bf8..b6f8bdbc7 100644
--- a/config-ui/src/plugins/gitlab/components/project-selector/use-project-selector.ts
+++ b/config-ui/src/plugins/gitlab/components/project-selector/use-project-selector.ts
@@ -19,7 +19,6 @@
 import { useState, useEffect, useMemo } from 'react';
 
 import type { ScopeItemType } from '../../types';
-import { ScopeFromEnum } from '../../types';
 import { useProxyPrefix } from '../../hooks';
 import * as API from '../../api';
 
@@ -48,7 +47,6 @@ export const useProjectSelector = ({ connectionId }: UseProjectSelectorProps) =>
         });
         setItems(
           res.map((it: any) => ({
-            from: ScopeFromEnum.PROJECT_SELECTOR,
             gitlabId: it.id,
             name: it.path_with_namespace,
             pathWithNamespace: it.path_with_namespace,
diff --git a/config-ui/src/plugins/gitlab/data-scope.tsx b/config-ui/src/plugins/gitlab/data-scope.tsx
index 55b27b9e6..03f2e72ca 100644
--- a/config-ui/src/plugins/gitlab/data-scope.tsx
+++ b/config-ui/src/plugins/gitlab/data-scope.tsx
@@ -19,23 +19,19 @@
 import React from 'react';
 
 import type { ScopeItemType } from './types';
-import { ScopeFromEnum } from './types';
 
 import { MillerColumns, ProjectSelector } from './components';
 
 interface Props {
   connectionId: ID;
+  disabledItems: ScopeItemType[];
   selectedItems: ScopeItemType[];
   onChangeItems: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const GitLabDataScope = ({ connectionId, selectedItems, onChangeItems }: Props) => {
-  const handleChangeMillerColumnsItems = (sis: ScopeItemType[]) => {
-    onChangeItems([...selectedItems.filter((it) => it.from !== ScopeFromEnum.MILLER_COLUMNS), ...sis]);
-  };
-
-  const handleChangeRepoSelectorItems = (sis: ScopeItemType[]) => {
-    onChangeItems([...selectedItems.filter((it) => it.from !== ScopeFromEnum.PROJECT_SELECTOR), ...sis]);
+export const GitLabDataScope = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
+  const handleChangeItems = (scope: ScopeItemType[]) => {
+    onChangeItems(scope);
   };
 
   return (
@@ -44,17 +40,17 @@ export const GitLabDataScope = ({ connectionId, selectedItems, onChangeItems }:
       <p>Select the project you would like to sync.</p>
       <MillerColumns
         connectionId={connectionId}
-        disabledItems={selectedItems.filter((it) => it.from !== ScopeFromEnum.MILLER_COLUMNS)}
-        selectedItems={selectedItems.filter((it) => it.from === ScopeFromEnum.MILLER_COLUMNS)}
-        onChangeItems={handleChangeMillerColumnsItems}
+        disabledItems={disabledItems}
+        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={selectedItems.filter((it) => it.from !== ScopeFromEnum.PROJECT_SELECTOR)}
-        selectedItems={selectedItems.filter((it) => it.from === ScopeFromEnum.PROJECT_SELECTOR)}
-        onChangeItems={handleChangeRepoSelectorItems}
+        disabledItems={disabledItems}
+        selectedItems={selectedItems}
+        onChangeItems={handleChangeItems}
       />
     </>
   );
diff --git a/config-ui/src/plugins/gitlab/types.ts b/config-ui/src/plugins/gitlab/types.ts
index b5e71629e..4b5ac3c67 100644
--- a/config-ui/src/plugins/gitlab/types.ts
+++ b/config-ui/src/plugins/gitlab/types.ts
@@ -16,13 +16,7 @@
  *
  */
 
-export enum ScopeFromEnum {
-  MILLER_COLUMNS = 'miller-columns',
-  PROJECT_SELECTOR = 'project-selector',
-}
-
 export type ScopeItemType = {
-  from: ScopeFromEnum;
   connectionId: ID;
   gitlabId: ID;
   name: string;
diff --git a/config-ui/src/plugins/jenkins/components/miller-columns/index.tsx b/config-ui/src/plugins/jenkins/components/miller-columns/index.tsx
index a2a3ddee0..5899d8c3b 100644
--- a/config-ui/src/plugins/jenkins/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/jenkins/components/miller-columns/index.tsx
@@ -27,12 +27,14 @@ import type { UseMillerColumnsProps } from './use-miller-columns';
 import { useMillerColumns } from './use-miller-columns';
 
 interface Props extends UseMillerColumnsProps {
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }: Props) => {
-  const [seletedIds, setSelectedIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
+  const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+  const [selectedIds, setSelectedIds] = useState<ID[]>([]);
 
   const { items, getHasMore, onExpandItem } = useMillerColumns({
     connectionId,
@@ -45,20 +47,24 @@ export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }: Pr
   };
 
   useEffect(() => {
-    setSelectedIds(selectedItems.map((it) => it.jobFullName));
-  }, []);
+    setDisabledIds((disabledItems ?? []).map((it) => it.jobFullName));
+  }, [disabledItems]);
 
   useEffect(() => {
+    setSelectedIds((selectedItems ?? []).map((it) => it.jobFullName));
+  }, [selectedItems]);
+
+  const handleChangeItems = (selectedIds: ID[]) => {
     const result = items
-      .filter((it) => seletedIds.includes(it.id) && it.type !== 'folder')
+      .filter((it) => selectedIds.includes(it.id) && it.type !== 'folder')
       .map((it: any) => ({
         connectionId,
         jobFullName: getJobFullName(it),
         name: getJobFullName(it),
       }));
 
-    onChangeItems(result);
-  }, [seletedIds]);
+    onChangeItems?.(result);
+  };
 
   const renderLoading = () => {
     return <Loading size={20} style={{ padding: '4px 12px' }} />;
@@ -72,8 +78,9 @@ export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }: Pr
       getHasMore={getHasMore}
       renderLoading={renderLoading}
       items={items}
-      selectedIds={seletedIds}
-      onSelectItemIds={setSelectedIds}
+      disabledIds={disabledIds}
+      selectedIds={selectedIds}
+      onSelectItemIds={handleChangeItems}
       onExpandItem={onExpandItem}
     />
   );
diff --git a/config-ui/src/plugins/jenkins/data-scope.tsx b/config-ui/src/plugins/jenkins/data-scope.tsx
index ff64d6d08..a8232d8ba 100644
--- a/config-ui/src/plugins/jenkins/data-scope.tsx
+++ b/config-ui/src/plugins/jenkins/data-scope.tsx
@@ -24,16 +24,22 @@ import { MillerColumns } from './components';
 
 interface Props {
   connectionId: ID;
+  disabledItems: ScopeItemType[];
   selectedItems: ScopeItemType[];
   onChangeItems: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const JenkinsDataScope = ({ connectionId, selectedItems, onChangeItems }: Props) => {
+export const JenkinsDataScope = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
   return (
     <>
       <h3>Jobs *</h3>
       <p>Select the jobs you would like to sync.</p>
-      <MillerColumns connectionId={connectionId} selectedItems={selectedItems} onChangeItems={onChangeItems} />
+      <MillerColumns
+        connectionId={connectionId}
+        disabledItems={disabledItems}
+        selectedItems={selectedItems}
+        onChangeItems={onChangeItems}
+      />
     </>
   );
 };
diff --git a/config-ui/src/plugins/jira/components/miller-columns/index.tsx b/config-ui/src/plugins/jira/components/miller-columns/index.tsx
index f67b42dcd..87a5de378 100644
--- a/config-ui/src/plugins/jira/components/miller-columns/index.tsx
+++ b/config-ui/src/plugins/jira/components/miller-columns/index.tsx
@@ -27,35 +27,41 @@ import type { UseMillerColumnsProps } from './use-miller-columns';
 import { useMillerColumns } from './use-miller-columns';
 
 interface Props extends UseMillerColumnsProps {
-  selectedItems: ScopeItemType[];
-  onChangeItems: (selectedItems: ScopeItemType[]) => void;
+  disabledItems?: ScopeItemType[];
+  selectedItems?: ScopeItemType[];
+  onChangeItems?: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }: Props) => {
-  const [seletedIds, setSelectedIds] = useState<ID[]>([]);
+export const MillerColumns = ({ connectionId, disabledItems, selectedItems, onChangeItems }: Props) => {
+  const [disabledIds, setDisabledIds] = useState<ID[]>([]);
+  const [selectedIds, setSelectedIds] = useState<ID[]>([]);
 
   const { items, getHasMore, onScrollColumn } = useMillerColumns({
     connectionId,
   });
 
   useEffect(() => {
-    setSelectedIds(selectedItems.map((it) => it.boardId));
-  }, []);
+    setDisabledIds((disabledItems ?? []).map((it) => it.boardId));
+  }, [disabledItems]);
 
   useEffect(() => {
-    onChangeItems(
-      items
-        .filter((it) => seletedIds.includes(it.id))
-        .map((it) => ({
-          connectionId,
-          boardId: it.boardId,
-          name: it.name,
-          self: it.self,
-          type: it.type,
-          projectId: it.projectId,
-        })),
-    );
-  }, [seletedIds]);
+    setSelectedIds((selectedItems ?? []).map((it) => it.boardId));
+  }, [selectedItems]);
+
+  const handleChangeItems = (selectedIds: ID[]) => {
+    const result = items
+      .filter((it) => selectedIds.includes(it.id))
+      .map((it) => ({
+        connectionId,
+        boardId: it.boardId,
+        name: it.name,
+        self: it.self,
+        type: it.type,
+        projectId: it.projectId,
+      }));
+
+    onChangeItems?.(result);
+  };
 
   const renderLoading = () => {
     return <Loading size={20} style={{ padding: '4px 12px' }} />;
@@ -68,8 +74,9 @@ export const MillerColumns = ({ connectionId, selectedItems, onChangeItems }: Pr
       getHasMore={getHasMore}
       renderLoading={renderLoading}
       items={items}
-      selectedIds={seletedIds}
-      onSelectItemIds={setSelectedIds}
+      disabledIds={disabledIds}
+      selectedIds={selectedIds}
+      onSelectItemIds={handleChangeItems}
       onScrollColumn={onScrollColumn}
     />
   );
diff --git a/config-ui/src/plugins/jira/data-scope.tsx b/config-ui/src/plugins/jira/data-scope.tsx
index de8a3c384..0586a563c 100644
--- a/config-ui/src/plugins/jira/data-scope.tsx
+++ b/config-ui/src/plugins/jira/data-scope.tsx
@@ -24,16 +24,17 @@ import { MillerColumns } from './components/miller-columns';
 
 interface Props {
   connectionId: ID;
+  disabledItems: ScopeItemType[];
   selectedItems: ScopeItemType[];
   onChangeItems: (selectedItems: ScopeItemType[]) => void;
 }
 
-export const JIRADataScope = ({ connectionId, selectedItems, onChangeItems }: Props) => {
+export const JIRADataScope = ({ connectionId, disabledItems, onChangeItems }: Props) => {
   return (
     <>
       <h3>Boards *</h3>
       <p>Select the boards you would like to sync.</p>
-      <MillerColumns connectionId={connectionId} selectedItems={selectedItems} onChangeItems={onChangeItems} />
+      <MillerColumns connectionId={connectionId} disabledItems={disabledItems} onChangeItems={onChangeItems} />
     </>
   );
 };