(incubator-devlake) branch fix-6579 created (now 39a1e190f)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a change to branch fix-6579
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


      at 39a1e190f fix(config-ui): new and old components are incompatible

This branch includes the following new commits:

     new 39a1e190f fix(config-ui): new and old components are incompatible

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(incubator-devlake) 01/01: fix(config-ui): new and old components are incompatible

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch fix-6579
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit 39a1e190f8f1fcaea372e820c3afd594e095d9b2
Author: mintsweet <0x...@gmail.com>
AuthorDate: Thu Dec 7 11:59:09 2023 +0800

    fix(config-ui): new and old components are incompatible
---
 .../components/add-connection-dialog/index.tsx     | 57 ++++++++++++----------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
index d82985b0f..98e1a01c0 100644
--- a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
@@ -17,11 +17,9 @@
  */
 
 import { useState, useMemo } from 'react';
-import { Modal } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { Modal, Form, Select, Space, Button } from 'antd';
 
 import { useAppSelector } from '@/app/hook';
-import { FormItem, Selector, Buttons } from '@/components';
 import { selectAllConnections } from '@/features';
 import { DataScopeSelect } from '@/plugins';
 import { IConnection } from '@/types';
@@ -34,13 +32,24 @@ interface Props {
 
 export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props) => {
   const [step, setStep] = useState(1);
-  const [selectedConnection, setSelectedConnection] = useState<IConnection>();
+  const [selectedValue, setSelectedValue] = useState<string>();
 
   const connections = useAppSelector(selectAllConnections);
 
-  const disabledItems = useMemo(
-    () => connections.filter((cs) => (disabled.length ? disabled.includes(cs.unique) : false)),
-    [disabled],
+  const options = useMemo(
+    () =>
+      connections
+        .filter((cs) => (disabled.length ? !disabled.includes(cs.unique) : true))
+        .map((cs) => ({
+          label: cs.name,
+          value: cs.unique,
+        })),
+    [connections, disabled],
+  );
+
+  const selectedConnection = useMemo(
+    () => connections.find((cs) => cs.unique === selectedValue) as IConnection,
+    [selectedValue],
   );
 
   const handleSubmit = (scopeIds: any) => {
@@ -55,25 +64,21 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
   return (
     <Modal open width={820} centered title={`Add a Connection - Step ${step}`} footer={null} onCancel={onCancel}>
       {step === 1 && (
-        <FormItem
-          label="Data Connections"
-          subLabel="Select from existing Data Connections. If you have not created any Data Connections yet, please create and manage Connections first."
-          required
-        >
-          <Selector
-            items={connections}
-            disabledItems={disabledItems}
-            getKey={(it) => it.unique}
-            getName={(it) => it.name}
-            // getIcon={(it) => it.icon}
-            selectedItem={selectedConnection}
-            onChangeItem={(selectedItem) => setSelectedConnection(selectedItem)}
-          />
-          <Buttons position="bottom" align="right">
-            <Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
-            <Button disabled={!selectedConnection} intent={Intent.PRIMARY} text="Next" onClick={() => setStep(2)} />
-          </Buttons>
-        </FormItem>
+        <Form layout="vertical">
+          <Form.Item
+            label="Data Connections"
+            tooltip="Select from existing Data Connections. If you have not created any Data Connections yet, please create and manage Connections first."
+            required
+          >
+            <Select placeholder="Select..." options={options} onChange={(value) => setSelectedValue(value)} />
+          </Form.Item>
+          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button onClick={onCancel}>Cancel</Button>
+            <Button type="primary" disabled={!selectedConnection} onClick={() => setStep(2)}>
+              Next
+            </Button>
+          </Space>
+        </Form>
       )}
       {step === 2 && selectedConnection && (
         <DataScopeSelect