[Fix] fix datasource bug (DataLinkDC#2157)

* fix datasource bug

* 优化表格和分页的布局效果

dinky-web/src/global.less

@@ -199,6 +199,10 @@ ol {
   overflow: hidden;
 }
 
+.ant-list .ant-list-pagination {
+  margin-block-start: 0; // 去除 分页组件和 上边表格的间距
+}
+
 .ant-table-wrapper {
   overflow-y: auto;
   overflow-x: auto;
@@ -329,6 +333,10 @@ ol {
   align-content: center;
 }
 
+.ant-pro-checkcard-title {
+  overflow: unset;
+}
+
 h5 {
   margin-left: 0.5rem;
   margin-bottom: 0;

dinky-web/src/locales/en-US/global.ts

@@ -147,6 +147,8 @@ export default {
   'global.table.runmode.local': 'Local',
   'global.table.runmode.remote': 'Remote',
 
+  'global.search.text': 'Input Key to Search',
+
   'global.savepoint.strategy.disabled': 'Disabled',
   'global.savepoint.strategy.latest': 'Latest',
   'global.savepoint.strategy.earliest': 'Earliest',

dinky-web/src/locales/zh-CN/global.ts

@@ -145,6 +145,9 @@ export default {
   'global.table.runmode.local': '本地',
   'global.table.runmode.remote': '远程',
 
+  'global.search.text': '输入关键字搜索',
+
+
   'global.savepoint.strategy.disabled': '禁用',
   'global.savepoint.strategy.latest': '最近一次',
   'global.savepoint.strategy.earliest': '最早一次',

dinky-web/src/pages/DataStudio/LeftContainer/MetaData/index.tsx

@@ -1,6 +1,6 @@
 import {connect} from "@umijs/max";
 import { StateType} from "../../model";
-import {Select, Space, Spin, Tag} from "antd";
+import {Spin, Tag} from "antd";
 import React, {useEffect, useState} from "react";
 import {
   DatabaseOutlined, ReloadOutlined,
@@ -12,7 +12,6 @@ import {Key, ProForm, ProFormSelect} from "@ant-design/pro-components";
 import {TagAlignLeft} from "@/components/StyledComponents";
 import SchemaTree from "@/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree";
 import {DataSources} from "@/types/RegCenter/data";
-import ContentScroll from "@/components/Scroll/ContentScroll";
 
 const MetaData = (props: any) => {
 
@@ -159,7 +158,7 @@ const MetaData = (props: any) => {
             name={"selectDb"}
             placeholder={l('pages.metadata.selectDatabase')}
             options={getDataBaseOptions()}
-            fieldProps={{onSelect: (selectId) => handleSelectDataBaseId(selectId)}}
+            fieldProps={{onSelect: (selectId) => handleSelectDataBaseId(selectId as number)}}
         />
       </ProForm>
         <SchemaTree selectKeys={selectKeys} expandKeys={expandKeys} style={{height: (toolContentHeight - 64 - 20 )}} onNodeClick={handleTreeNodeClick} treeData={treeData} onExpand={handleTreeExpand}/>

dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree/index.tsx

@@ -16,10 +16,11 @@
  */
 
 
-import {Empty, Input, Space, Tree} from 'antd';
+import {Empty, Input, Tree} from 'antd';
 import React, {useCallback, useState} from 'react';
 import {buildSchemaTree} from '@/pages/RegCenter/DataSource/components/DataSourceDetail/function';
 import {Key} from '@ant-design/pro-components';
+import {l} from "@/utils/intl";
 
 const {DirectoryTree} = Tree;
 /**
@@ -56,7 +57,7 @@ const SchemaTree: React.FC<SchemaTreeProps> = (props) => {
             (treeData.length > 0) ?
                 <>
                     <Input
-                        placeholder="请输入关键字搜索"
+                        placeholder={l('global.search.text')}
                         allowClear
                         style={{marginBottom: 8}}
                         value={searchValue}

dinky-web/src/pages/RegCenter/DataSource/components/DataSourceDetail/index.tsx

@@ -25,24 +25,23 @@ import SchemaTree from '@/pages/RegCenter/DataSource/components/DataSourceDetail
 import RightTagsRouter from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter';
 import {useNavigate} from '@umijs/max';
 import {API_CONSTANTS, RESPONSE_CODE} from '@/services/constants';
-import {getDataByIdReturnResult, queryDataByParams} from '@/services/BusinessCrud';
-import {ProCard} from '@ant-design/pro-components';
+import {getDataByIdReturnResult} from '@/services/BusinessCrud';
+import {Key, ProCard} from '@ant-design/pro-components';
 import {QueryParams} from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/data';
+import {connect} from "@@/exports";
+import {StateType} from "@/pages/DataStudio/model";
 
-type DataSourceDetailProps = {
-  dataSource: Partial<DataSources.DataSource>;
-  backClick: () => void;
-}
-const DataSourceDetail: React.FC<DataSourceDetailProps> = (props) => {
+const DataSourceDetail = (props : any) => {
   const navigate = useNavigate();
 
 
-  const {dataSource, backClick} = props;
+  const {dataSource, backClick , dispatch ,database: { dbData , selectDatabaseId , expandKeys, selectKeys}} = props;
   const [loading, setLoading] = useState<boolean>(false);
   const [disabled, setDisabled] = useState<boolean>(true);
   const [treeData, setTreeData] = useState<Partial<any>[]>([]);
   const [tableInfo, setTableInfo] = useState<Partial<DataSources.Table>>({});
   const [params, setParams] = useState<QueryParams>({id: 0, schemaName: '', tableName: ''});
+  const selectDb = (dbData as DataSources.DataSource[]).filter(x=> x.id === selectDatabaseId)[0]
 
   const handleBackClick = () => {
     // go back
@@ -81,8 +80,27 @@ const DataSourceDetail: React.FC<DataSourceDetailProps> = (props) => {
   /**
    * tree node click
    */
-  const onSchemaTreeNodeClick = useCallback(async (info: any) => {
+  const onSchemaTreeNodeClick = useCallback(async (keys: Key[] ,info: any) => {
     const {node: {isLeaf, parentId: schemaName, name: tableName, fullInfo}} = info;
+    // 选中的key
+    dispatch({
+      type: "Studio/updateDatabaseSelectKey",
+      payload: keys
+    })
+    if (isLeaf) {
+      const queryParams =  {id: selectDatabaseId , schemaName, tableName};
+      dispatch({
+        type: "Studio/addTab",
+        payload: {
+          icon: selectDb.type,
+          id: selectDatabaseId + schemaName + tableName,
+          breadcrumbLabel: [selectDb.type,selectDb.name].join("/"),
+          label: schemaName + '.' + tableName ,
+          params:{ queryParams: queryParams, tableInfo: fullInfo},
+          type: "metadata"
+        }
+      })
+    }
     if (isLeaf) {
       setParams({
         id: dataSource.id as number,
@@ -100,6 +118,19 @@ const DataSourceDetail: React.FC<DataSourceDetailProps> = (props) => {
     }
   }, []);
 
+
+  /**
+   * 树节点展开事件
+   * @param {Key[]} expandedKeys
+   */
+  const handleTreeExpand = (expandedKeys: Key[]) => {
+    dispatch({
+      type: "Studio/updateDatabaseExpandKey",
+      payload: expandedKeys
+    })
+  }
+
+
   /**
    * render back button and refresh button
    * @return {JSX.Element}
@@ -124,7 +155,7 @@ const DataSourceDetail: React.FC<DataSourceDetailProps> = (props) => {
     <ProCard loading={loading} ghost gutter={[16, 16]} split="vertical">
       <ProCard hoverable bordered className={'siderTree schemaTree'} colSpan="16%">
         {/* tree */}
-        <SchemaTree onNodeClick={(info: any) => onSchemaTreeNodeClick(info)} treeData={treeData}/>
+        <SchemaTree selectKeys={selectKeys} expandKeys={expandKeys} onExpand={handleTreeExpand} onNodeClick={onSchemaTreeNodeClick} treeData={treeData}/>
       </ProCard>
       <ProCard hoverable colSpan="84%" ghost headerBordered>
         {/* tags */}
@@ -139,4 +170,6 @@ const DataSourceDetail: React.FC<DataSourceDetailProps> = (props) => {
   </>;
 };
 
-export default DataSourceDetail;
+export default connect(({Studio}: { Studio: StateType }) => ({
+  database: Studio.database,
+}))(DataSourceDetail); ;