[improvement][semantic-fe] Refactor database settings functionality.

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseCreateForm.tsx

@@ -3,19 +3,22 @@ import type { ForwardRefRenderFunction } from 'react';
 import { message, Form, Input, Select, Button, Space } from 'antd';
 import { saveDatabase, testDatabaseConnect } from '../../service';
 import { formLayout } from '@/components/FormHelper/utils';
+import SelectTMEPerson from '@/components/SelectTMEPerson';
+import { ISemantic } from '../../data';
 
 import styles from '../style.less';
 type Props = {
-  domainId: number;
-  dataBaseConfig: any;
-  onSubmit: (params?: any) => void;
+  domainId?: number;
+  dataBaseConfig?: ISemantic.IDatabaseItem;
+  hideSubmitBtn?: boolean;
+  onSubmit?: (params?: any) => void;
 };
 
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 
 const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
-  { domainId, dataBaseConfig, onSubmit },
+  { domainId, dataBaseConfig, onSubmit, hideSubmitBtn = false },
   ref,
 ) => {
   const [form] = Form.useForm();
@@ -25,8 +28,10 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
 
   useEffect(() => {
     form.resetFields();
-    form.setFieldsValue({ ...dataBaseConfig });
-    setSelectedDbType(dataBaseConfig?.type);
+    if (dataBaseConfig) {
+      form.setFieldsValue({ ...dataBaseConfig });
+      setSelectedDbType(dataBaseConfig?.type);
+    }
   }, [dataBaseConfig]);
 
   const getFormValidateFields = async () => {
@@ -35,11 +40,14 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
 
   useImperativeHandle(ref, () => ({
     getFormValidateFields,
+    saveDatabaseConfig,
+    testDatabaseConnection,
   }));
 
   const saveDatabaseConfig = async () => {
     const values = await form.validateFields();
     const { code, msg } = await saveDatabase({
+      ...dataBaseConfig,
       ...values,
       domainId,
     });
@@ -115,6 +123,23 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
             </FormItem>
           </>
         )}
+
+        {selectedDbType === 'mysql' && (
+          <FormItem
+            name="version"
+            label="数据库版本"
+            rules={[{ required: true, message: '请选择数据库版本' }]}
+          >
+            <Select
+              style={{ width: '100%' }}
+              placeholder="请选择数据库版本"
+              options={[
+                { value: '5.7', label: '5.7' },
+                { value: '8.0', label: '8.0' },
+              ]}
+            />
+          </FormItem>
+        )}
         <FormItem
           name="username"
           label="用户名"
@@ -128,34 +153,44 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
         <FormItem name="database" label="数据库名称">
           <Input placeholder="请输入数据库名称" />
         </FormItem>
-        <FormItem name="version" label="数据库版本">
-          <Input placeholder="请输入数据库版本" />
+        <FormItem
+          name="admins"
+          label="管理员"
+          // rules={[{ required: true, message: '请设定数据库连接管理者' }]}
+        >
+          <SelectTMEPerson placeholder="请邀请团队成员" />
         </FormItem>
+        <FormItem name="viewers" label="使用者">
+          <SelectTMEPerson placeholder="请邀请团队成员" />
+        </FormItem>
+
         <FormItem name="description" label="描述">
           <TextArea placeholder="请输入数据库描述" style={{ height: 100 }} />
         </FormItem>
-        <FormItem>
-          <Space>
-            <Button
-              type="primary"
-              loading={testLoading}
-              onClick={() => {
-                testDatabaseConnection();
-              }}
-            >
-              连接测试
-            </Button>
+        {!hideSubmitBtn && (
+          <FormItem>
+            <Space>
+              <Button
+                type="primary"
+                loading={testLoading}
+                onClick={() => {
+                  testDatabaseConnection();
+                }}
+              >
+                连接测试
+              </Button>
 
-            <Button
-              type="primary"
-              onClick={() => {
-                saveDatabaseConfig();
-              }}
-            >
-              保 存
-            </Button>
-          </Space>
-        </FormItem>
+              <Button
+                type="primary"
+                onClick={() => {
+                  saveDatabaseConfig();
+                }}
+              >
+                保 存
+              </Button>
+            </Space>
+          </FormItem>
+        )}
       </Form>
     </>
   );

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseSettingModal.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useRef } from 'react';
+import { Button, Modal, Space } from 'antd';
+import DatabaseCreateForm from './DatabaseCreateForm';
+import { ISemantic } from '../../data';
+
+export type CreateFormProps = {
+  onCancel: () => void;
+  databaseItem?: ISemantic.IDatabaseItem;
+  open: boolean;
+  onSubmit: (values?: any) => void;
+};
+
+const DatabaseSettingModal: React.FC<CreateFormProps> = ({
+  onCancel,
+  databaseItem,
+  open,
+  onSubmit,
+}) => {
+  const [testLoading, setTestLoading] = useState<boolean>(false);
+
+  const createFormRef = useRef<any>({});
+
+  const handleTestConnection = async () => {
+    setTestLoading(true);
+    await createFormRef.current.testDatabaseConnection();
+    setTestLoading(false);
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Space>
+          <Button
+            type="primary"
+            loading={testLoading}
+            onClick={() => {
+              handleTestConnection();
+            }}
+          >
+            连接测试
+          </Button>
+
+          <Button
+            type="primary"
+            onClick={() => {
+              createFormRef.current.saveDatabaseConfig();
+            }}
+          >
+            保 存
+          </Button>
+        </Space>
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      width={1200}
+      destroyOnClose
+      title="数据库连接设置"
+      style={{ top: 48 }}
+      maskClosable={false}
+      open={open}
+      footer={renderFooter()}
+      onCancel={onCancel}
+    >
+      <DatabaseCreateForm
+        hideSubmitBtn={true}
+        ref={createFormRef}
+        dataBaseConfig={databaseItem}
+        onSubmit={() => {
+          onSubmit?.();
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default DatabaseSettingModal;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Database/DatabaseTable.tsx

@@ -0,0 +1,162 @@
+import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable from '@ant-design/pro-table';
+import { message, Button, Space, Popconfirm } from 'antd';
+import React, { useRef, useState, useEffect } from 'react';
+import DatabaseSettingModal from './DatabaseSettingModal';
+import { ISemantic } from '../../data';
+import { getDatabaseList, deleteDatabase } from '../../service';
+
+import moment from 'moment';
+import styles from '../style.less';
+
+type Props = {};
+
+const DatabaseTable: React.FC<Props> = ({}) => {
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const [databaseItem, setDatabaseItem] = useState<ISemantic.IDatabaseItem>();
+  const [dataBaseList, setDataBaseList] = useState<any[]>([]);
+
+  const actionRef = useRef<ActionType>();
+
+  const queryDatabaseList = async () => {
+    const { code, data, msg } = await getDatabaseList();
+    if (code === 200) {
+      setDataBaseList(data);
+    } else {
+      message.error(msg);
+    }
+  };
+
+  useEffect(() => {
+    queryDatabaseList();
+  }, []);
+
+  const columns: ProColumns[] = [
+    {
+      dataIndex: 'id',
+      title: 'ID',
+      width: 80,
+    },
+    {
+      dataIndex: 'name',
+      title: '连接名称',
+    },
+
+    {
+      dataIndex: 'type',
+      title: '类型',
+      search: false,
+    },
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      search: false,
+    },
+
+    {
+      dataIndex: 'description',
+      title: '描述',
+      search: false,
+    },
+
+    {
+      dataIndex: 'updatedAt',
+      title: '更新时间',
+      search: false,
+      render: (value: any) => {
+        return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
+      },
+    },
+
+    {
+      title: '操作',
+      dataIndex: 'x',
+      valueType: 'option',
+      render: (_, record) => {
+        if (!record.hasEditPermission) {
+          return <></>;
+        }
+        return (
+          <Space>
+            <a
+              key="dimensionEditBtn"
+              onClick={() => {
+                setDatabaseItem(record);
+                setCreateModalVisible(true);
+              }}
+            >
+              编辑
+            </a>
+            <Popconfirm
+              title="确认删除？"
+              okText="是"
+              cancelText="否"
+              onConfirm={async () => {
+                const { code, msg } = await deleteDatabase(record.id);
+                if (code === 200) {
+                  setDatabaseItem(undefined);
+                  queryDatabaseList();
+                } else {
+                  message.error(msg);
+                }
+              }}
+            >
+              <a
+                key="dimensionDeleteEditBtn"
+                onClick={() => {
+                  setDatabaseItem(record);
+                }}
+              >
+                删除
+              </a>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div style={{ margin: 20 }}>
+      <ProTable
+        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        actionRef={actionRef}
+        rowKey="id"
+        columns={columns}
+        dataSource={dataBaseList}
+        search={false}
+        tableAlertRender={() => {
+          return false;
+        }}
+        size="small"
+        options={{ reload: false, density: false, fullScreen: false }}
+        toolBarRender={() => [
+          <Button
+            key="create"
+            type="primary"
+            onClick={() => {
+              setDatabaseItem(undefined);
+              setCreateModalVisible(true);
+            }}
+          >
+            创建数据库连接
+          </Button>,
+        ]}
+      />
+      {createModalVisible && (
+        <DatabaseSettingModal
+          open={createModalVisible}
+          databaseItem={databaseItem}
+          onCancel={() => {
+            setCreateModalVisible(false);
+          }}
+          onSubmit={() => {
+            setCreateModalVisible(false);
+            queryDatabaseList();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+export default DatabaseTable;