feat: simplify scope config configuration

config-ui/package.json

@@ -43,7 +43,6 @@
     "react-medium-image-zoom": "^5.1.10",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.2",
-    "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
     "rehype-raw": "^7.0.0",
     "styled-components": "^6.1.8"
@@ -55,7 +54,6 @@
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^4.4.10",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",

config-ui/src/api/blueprint/index.ts

@@ -37,8 +37,9 @@ export const update = (id: ID, data: IBlueprint) => request(`/blueprints/${id}`,
 export const pipelines = (id: ID) => request(`/blueprints/${id}/pipelines`);
 
 type TriggerQuery = {
-  skipCollectors: boolean;
-  fullSync: boolean;
+  skipCollectors?: boolean;
+  fullSync?: boolean;
 };
 
-export const trigger = (id: ID, data: TriggerQuery) => request(`/blueprints/${id}/trigger`, { method: 'post', data });
+export const trigger = (id: ID, data: TriggerQuery = { skipCollectors: false, fullSync: false }) =>
+  request(`/blueprints/${id}/trigger`, { method: 'post', data });

config-ui/src/app/store.ts

@@ -18,12 +18,11 @@
 
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
 
-import { connectionsSlice, tipsSlice } from '@/features';
+import { connectionsSlice } from '@/features';
 
 export const store = configureStore({
   reducer: {
     connections: connectionsSlice.reducer,
-    tips: tipsSlice.reducer,
   },
 });
 

config-ui/src/features/index.ts

@@ -17,4 +17,3 @@
  */
 
 export * from './connections';
-export * from './tips';

config-ui/src/plugins/components/index.ts

@@ -23,5 +23,6 @@ export * from './connection-status';
 export * from './data-scope-remote';
 export * from './data-scope-select';
 export * from './plugin-name';
+export * from './scope-config';
 export * from './scope-config-form';
 export * from './scope-config-select';

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

@@ -104,7 +104,8 @@ export const ScopeConfigForm = ({
           : API.scopeConfig.update(plugin, connectionId, scopeConfigId, { name, entities, ...transformation }),
       {
         setOperating,
-        formatMessage: () => (!scopeConfigId ? 'Create scope config successful.' : 'Update scope config successful'),
+        hideToast: !!scopeConfigId,
+        formatMessage: () => 'Create scope config successful.',
       },
     );
 

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

@@ -17,7 +17,7 @@
  */
 
 import { useState, useEffect, useMemo } from 'react';
-import { PlusOutlined, EditOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { Flex, Table, Button, Modal } from 'antd';
 
 import API from '@/api';
@@ -37,7 +37,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
   const [version, setVersion] = useState(1);
   const [trId, setTrId] = useState<ID>();
   const [open, setOpen] = useState(false);
-  const [updatedId, setUpdatedId] = useState<ID>();
 
   const { ready, data } = useRefreshData(() => API.scopeConfig.list(plugin, connectionId), [version]);
 
@@ -56,12 +55,6 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
 
   const handleHideDialog = () => {
     setOpen(false);
-    setUpdatedId(undefined);
-  };
-
-  const handleUpdate = async (id: ID) => {
-    setUpdatedId(id);
-    handleShowDialog();
   };
 
   const handleSubmit = async (trId: ID) => {
@@ -72,7 +65,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
 
   return (
     <Flex vertical gap="middle">
-      <Flex>
+      <Flex style={{ marginTop: 20 }}>
         <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
           Add New Scope Config
         </Button>
@@ -81,17 +74,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
         rowKey="id"
         size="small"
         loading={!ready}
-        columns={[
-          { title: 'Name', dataIndex: 'name', key: 'name' },
-          {
-            title: '',
-            dataIndex: 'id',
-            key: 'id',
-            width: 100,
-            render: (id) =>
-              id !== 'None' ? <Button type="link" icon={<EditOutlined />} onClick={() => handleUpdate(id)} /> : null,
-          },
-        ]}
+        columns={[{ title: 'Name', dataIndex: 'name', key: 'name' }]}
         dataSource={dataSource}
         rowSelection={{
           type: 'radio',
@@ -114,15 +97,12 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
         width={960}
         centered
         footer={null}
-        title={!updatedId ? 'Add Scope Config' : 'Edit Scope Config'}
+        title="Add Scope Config"
         onCancel={handleHideDialog}
       >
         <ScopeConfigForm
           plugin={plugin}
           connectionId={connectionId}
-          defaultName={`shared-config-<${dataSource.length}>`}
-          showWarning={!!updatedId}
-          scopeConfigId={updatedId}
           onCancel={handleHideDialog}
           onSubmit={handleSubmit}
         />

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

@@ -0,0 +1,132 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState } from 'react';
+import { LinkOutlined, EditOutlined } from '@ant-design/icons';
+import { Button, Modal } from 'antd';
+import styled from 'styled-components';
+
+import API from '@/api';
+import { operator } from '@/utils';
+
+import { PluginName } from '../plugin-name';
+import { ScopeConfigSelect } from '../scope-config-select';
+import { ScopeConfigForm } from '../scope-config-form';
+
+const Wrapper = styled.div``;
+
+interface Props {
+  plugin: string;
+  connectionId: ID;
+  scopeId: ID;
+  id?: ID;
+  name?: string;
+  onSuccess?: () => void;
+}
+
+export const ScopeConfig = ({ plugin, connectionId, scopeId, id, name, onSuccess }: Props) => {
+  const [type, setType] = useState<'associate' | 'update'>();
+
+  const handleHideDialog = () => setType(undefined);
+
+  const handleAssociate = async (trId: ID) => {
+    const [success] = await operator(
+      () => API.scope.update(plugin, connectionId, scopeId, { scopeConfigId: trId !== 'None' ? +trId : null }),
+      {
+        hideToast: true,
+      },
+    );
+
+    if (success) {
+      handleHideDialog();
+      onSuccess?.();
+    }
+  };
+
+  const handleUpdate = (trId: ID) => {
+    handleHideDialog();
+    onSuccess?.();
+  };
+
+  return (
+    <Wrapper>
+      <span>{id ? name : 'N/A'}</span>
+      <Button
+        size="small"
+        type="link"
+        icon={<LinkOutlined />}
+        onClick={() => {
+          setType('associate');
+        }}
+      />
+      {id && (
+        <Button
+          size="small"
+          type="link"
+          icon={<EditOutlined />}
+          onClick={() => {
+            // TO-DO: check if the scope config is associated with any scope
+            setType('update');
+          }}
+        />
+      )}
+      {type === 'associate' && (
+        <Modal
+          open
+          width={960}
+          centered
+          footer={null}
+          title={<PluginName plugin={plugin} name="Associate Scope Config" />}
+          onCancel={handleHideDialog}
+        >
+          {plugin === 'tapd' ? (
+            <ScopeConfigForm
+              plugin={plugin}
+              connectionId={connectionId}
+              scopeConfigId={id}
+              scopeId={scopeId}
+              onCancel={handleHideDialog}
+              onSubmit={handleAssociate}
+            />
+          ) : (
+            <ScopeConfigSelect
+              plugin={plugin}
+              connectionId={connectionId}
+              scopeConfigId={id}
+              onCancel={handleHideDialog}
+              onSubmit={handleAssociate}
+            />
+          )}
+        </Modal>
+      )}
+      {type === 'update' && (
+        <Modal open width={960} centered footer={null} title="Edit Scope Config" onCancel={handleHideDialog}>
+          <ScopeConfigForm
+            plugin={plugin}
+            connectionId={connectionId}
+            showWarning
+            scopeConfigId={id}
+            scopeId={scopeId}
+            onCancel={handleHideDialog}
+            onSubmit={handleUpdate}
+          />
+        </Modal>
+      )}
+    </Wrapper>
+  );
+};