(incubator-devlake) branch main updated: fix(config-ui): use block component to replace form item (#6799)

[mi...@apache.org]

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

mintsweet 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 12e73812f fix(config-ui): use block component to replace form item (#6799)
12e73812f is described below

commit 12e73812fd89fbd66b7e64295fd0e2d196263cd5
Author: 青湛 <0x...@gmail.com>
AuthorDate: Fri Jan 12 20:19:23 2024 +1300

    fix(config-ui): use block component to replace form item (#6799)
---
 .../components/data-scope-remote/search-local.tsx    | 20 ++++++++++----------
 .../components/add-connection-dialog/index.tsx       | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
index cb5e39a67..bc2ecb22e 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
@@ -18,13 +18,13 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { CheckCircleFilled, SearchOutlined } from '@ant-design/icons';
-import { Form, Space, Tag, Button, Input, Modal, message } from 'antd';
+import { Space, Tag, Button, Input, Modal, message } from 'antd';
 import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
 import { MillerColumnsSelect } from 'miller-columns-select';
 import { useDebounce } from 'ahooks';
 
 import API from '@/api';
-import { Loading, Message } from '@/components';
+import { Loading, Block, Message } from '@/components';
 import { IPluginConfig } from '@/types';
 
 import * as T from './types';
@@ -185,8 +185,8 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
   };
 
   return (
-    <Form layout="vertical">
-      <Form.Item label={config.title} required>
+    <>
+      <Block title={config.title} required>
         <Space wrap>
           {selectedScope.length ? (
             selectedScope.map((sc) => (
@@ -203,8 +203,8 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
             <span>Please select scope...</span>
           )}
         </Space>
-      </Form.Item>
-      <Form.Item>
+      </Block>
+      <Block>
         {(status === 'loading' || status === 'cancel') && (
           <S.JobLoad>
             <Loading style={{ marginRight: 8 }} size={20} />
@@ -229,8 +229,8 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
             </Button>
           </S.JobLoad>
         )}
-      </Form.Item>
-      <Form.Item>
+      </Block>
+      <Block>
         {status === 'loaded' && (
           <Input prefix={<SearchOutlined />} value={query} onChange={(e) => setQuery(e.target.value)} />
         )}
@@ -258,10 +258,10 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
           onSelectItemIds={(selectedIds: ID[]) => onChange(miller.items.filter((it) => selectedIds.includes(it.id)))}
           expandedIds={miller.expandedIds}
         />
-      </Form.Item>
+      </Block>
       <Modal open={open} centered onOk={handleLoadAllScopes} onCancel={() => setOpen(false)}>
         <Message content={`This operation may take a long time, as it iterates through all the ${config.title}.`} />
       </Modal>
-    </Form>
+    </>
   );
 };
diff --git a/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx b/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx
index ba6fb1970..d781338e4 100644
--- a/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx
+++ b/config-ui/src/routes/blueprint/detail/components/add-connection-dialog/index.tsx
@@ -17,11 +17,12 @@
  */
 
 import { useState, useMemo } from 'react';
-import { theme, Modal, Form, Select, Space, Button } from 'antd';
+import { theme, Modal, Select, Space, Button } from 'antd';
 import styled from 'styled-components';
 
-import { useAppSelector } from '@/hooks';
+import { Block } from '@/components';
 import { selectAllConnections } from '@/features';
+import { useAppSelector } from '@/hooks';
 import { getPluginConfig, DataScopeSelect } from '@/plugins';
 import { IConnection } from '@/types';
 
@@ -90,13 +91,14 @@ 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 && (
-        <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."
+        <>
+          <Block
+            title="Data Connections"
+            description="Select from existing Data Connections. If you have not created any Data Connections yet, please create and manage Connections first."
             required
           >
             <Select
+              style={{ width: 384 }}
               placeholder="Select..."
               options={options}
               optionRender={(option) => {
@@ -110,14 +112,14 @@ export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props
               }}
               onChange={(value) => setSelectedValue(value)}
             />
-          </Form.Item>
+          </Block>
           <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