feat(config-ui): dis-associate the scope config with a data scope (ap…

…ache#6527)

config-ui/src/components/buttons/index.tsx

@@ -46,7 +46,7 @@ const Wrapper = styled.div<{ position?: 'top' | 'bottom'; align: 'left' | 'right
     }
   }}
 
-  .bp5-button + .bp5-button {
+  .ant-btn + .ant-btn {
     margin-left: 8px;
   }
 `;

config-ui/src/plugins/components/scope-config-select/index.tsx

@@ -17,11 +17,11 @@
  */
 
 import { useState, useEffect, useMemo } from 'react';
-import { Table } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+import { Table, Button, Modal } from 'antd';
 
 import API from '@/api';
-import { Buttons, IconButton, Dialog } from '@/components';
+import { Buttons } from '@/components';
 import { useRefreshData } from '@/hooks';
 
 import { ScopeConfigForm } from '../scope-config-form';
@@ -44,7 +44,10 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
 
   const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin, connectionId), [version]);
 
-  const dataSource = useMemo(() => (data ? data : []), [data]);
+  const dataSource = useMemo(
+    () => (data ? (data.length ? [{ id: 'None', name: 'No Scope Config' }].concat(data) : []) : []),
+    [data],
+  );
 
   useEffect(() => {
     setTrId(scopeConfigId);
@@ -73,7 +76,9 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
   return (
     <S.Wrapper>
       <Buttons position="top">
-        <Button icon="add" intent={Intent.PRIMARY} text="Add New Scope Config" onClick={handleShowDialog} />
+        <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowDialog}>
+          Add New Scope Config
+        </Button>
       </Buttons>
       <Table
         rowKey="id"
@@ -86,7 +91,10 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
             dataIndex: 'id',
             key: 'id',
             width: 100,
-            render: (id) => <IconButton icon="annotation" tooltip="Edit" onClick={() => handleUpdate(id)} />,
+            render: (id) =>
+              id !== 'None' ? (
+                <Button type="link" icon={<EditOutlined rev={undefined} />} onClick={() => handleUpdate(id)} />
+              ) : null,
           },
         ]}
         dataSource={dataSource}
@@ -98,13 +106,18 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
         pagination={false}
       />
       <Buttons position="bottom" align="right">
-        <Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
-        <Button disabled={!trId} intent={Intent.PRIMARY} text="Save" onClick={() => trId && onSubmit?.(trId)} />
+        <Button style={{}} onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="primary" disabled={!trId} onClick={() => trId && onSubmit?.(trId)}>
+          Save
+        </Button>
       </Buttons>
-      <Dialog
-        style={{ width: 960 }}
+      <Modal
+        open={isOpen}
+        width={960}
+        centered
         footer={null}
-        isOpen={isOpen}
         title={!updatedId ? 'Add Scope Config' : 'Edit Scope Config'}
         onCancel={handleHideDialog}
       >
@@ -116,7 +129,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
           onCancel={onCancel}
           onSubmit={handleSubmit}
         />
-      </Dialog>
+      </Modal>
     </S.Wrapper>
   );
 };

config-ui/src/plugins/components/scope-config-select/styled.ts

@@ -18,6 +18,8 @@
 
 import styled from 'styled-components';
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+  padding-top: 24px;
+`;
 
 export const DialogBody = styled.div``;

config-ui/src/routes/connection/connection.tsx

@@ -206,7 +206,7 @@ export const Connection = () => {
             const scope = await API.scope.get(plugin, connectionId, scopeId);
             return API.scope.update(plugin, connectionId, scopeId, {
               ...scope,
-              scopeConfigId: +trId,
+              scopeConfigId: trId !== 'None' ? +trId : null,
             });
           }),
         ),