[BugFix][Web] Fix the catalog display field bug (DataLinkDC#3818)

Co-authored-by: zackyoungh <[email protected]>
Zzm0809 · Sep 18, 2024 · 4acca23 · 4acca23
1 parent 235d85a
commit 4acca23
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 32 deletions.
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx
@@ -40,6 +40,7 @@ import DirectoryTree from 'antd/es/tree/DirectoryTree';
 import { DefaultOptionType } from 'rc-select/lib/Select';
 import React, { useEffect, useState } from 'react';
 import { getMSCatalogs, getMSColumns, getMSSchemaInfo } from './service';
+import { useAsyncEffect } from 'ahooks';
 
 const Catalog: React.FC = (props: connect) => {
   const { tabs } = props;
@@ -73,7 +74,6 @@ const Catalog: React.FC = (props: connect) => {
   const [modalVisit, setModalVisit] = useState(false);
   const [row, setRow] = useState<TableDataNode>();
   const [loading, setLoading] = useState<boolean>(false);
-  const [columnData, setColumnData] = useState([]);
   const btnDispatch = useTasksDispatch();
   const currentTabName = LeftMenuKey.CATALOG_KEY;
   const btnEvent = [...BtnRoute[currentTabName]];
@@ -91,23 +91,20 @@ const Catalog: React.FC = (props: connect) => {
     getCatalogs();
   }, [envId, databaseId]);
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     if (table) {
       setLoading(true);
-      setColumnData([]);
-      getMSColumns({
+      const res = await getMSColumns({
         envId,
         catalog,
         database,
         table,
         dialect,
         databaseId
-      })
-        .then((res) => {
-          setLoading(false);
-          setColumnData(res);
-        })
-        .catch(() => {});
+      });
+      setLoading(false);
+      // @ts-ignore
+      setRow({ ...row, columns: res });
     }
   }, [table]);
 
@@ -147,6 +144,7 @@ const Catalog: React.FC = (props: connect) => {
         const tablesData: TableDataNode[] = [];
         for (const t of tables) {
           tablesData.push({
+            driverType: '',
             title: t.name,
             key: t.name,
             icon: <TableOutlined />,
@@ -347,7 +345,7 @@ const Catalog: React.FC = (props: connect) => {
           </Button>
         ]}
       >
-        <SchemaDesc tableInfo={row} tableColumns={columnData} />
+        <SchemaDesc tableInfo={row} />
       </Modal>
     </Spin>
   );

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
@@ -207,15 +207,12 @@ const DataSource = (props: any) => {
         }}
       />
       <ProForm
-        style={{ height: 40 }}
+        style={{ height: 40, marginTop: 10 }}
         initialValues={{ selectDb: selectDatabaseId }}
         submitter={false}
       >
         <ProFormSelect
           style={{ paddingInline: 6 }}
-          // width={leftContainer.width  }
-          width={'xl'}
-          // addonAfter={<ReloadOutlined spin={isLoadingDatabase} title={l('button.refresh')} onClick={() => refreshDataBase()} />}
           allowClear={false}
           name={'selectDb'}
           placeholder={l('pages.metadata.selectDatabase')}
@@ -228,7 +225,7 @@ const DataSource = (props: any) => {
       <SchemaTree
         selectKeys={selectKeys}
         expandKeys={expandKeys}
-        height={toolContentHeight - 64 - 20}
+        height={toolContentHeight - 64 - 30}
         onNodeClick={handleTreeNodeClick}
         treeData={treeData}
         onExpand={handleTreeExpand}

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx
@@ -83,9 +83,9 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
 
   /**
    * 渲染侧边栏标题
-   * @returns {JSX.Element}
+   * @returns {React.JSX.Element}
    */
-  const renderTitle = () => {
+  const renderTitle = (): React.JSX.Element => {
     if (selectKey && selectKey === currentTabName) {
       return (
         <Space>

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx
@@ -46,7 +46,7 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
   const themeValue = useThemeValue();
   const MAX_WIDTH = size.width - 2 * VIEW.leftToolWidth - rightContainer.width - 700;
   /**
-   * 侧边栏大小变化
+   * Sidebar size changes
    * @param width
    */
   const handleReSizeChange = (width: any) => {
@@ -57,7 +57,7 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
   };
 
   /**
-   * 侧边栏最小化
+   * The sidebar is minimized
    */
   const handleMinimize = () => {
     dispatch({
@@ -67,14 +67,14 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
   };
 
   /**
-   * 侧边栏最大化
+   * Sidebar maximization
    */
   const handleMaxsize = () => {
     handleReSizeChange(MAX_WIDTH);
   };
 
   /**
-   * 侧边栏属性
+   * Sidebar properties
    * @type {{onResize: (event: any, direction: any, elementRef: {offsetWidth: any}) => void, visible: boolean, defaultSize: {width: any, height: any}, enable: {right: boolean}, minWidth: number, title: string, handlerMinimize: () => void, contentHeight: any, maxWidth: number}}
    */
   const restMovableSidebarProps: MovableSidebarProps = {
@@ -106,17 +106,10 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
     <Tabs activeKey={leftContainer.selectKey} items={LeftSide} tabBarStyle={{ display: 'none' }} />
   );
 
-  return (
-    <MovableSidebar {...restMovableSidebarProps}>
-      {/*<Tabs activeKey={leftContainer.selectKey} items={LeftSide} tabBarStyle={{display: "none"}}/>*/}
-      {content}
-    </MovableSidebar>
-  );
+  return <MovableSidebar {...restMovableSidebarProps}>{content}</MovableSidebar>;
 };
 
 export default connect(({ Studio }: { Studio: StateType }) => ({
-  // leftContainer: Studio.leftContainer,
-  // rightContainer: Studio.rightContainer,
   toolContentHeight: Studio.toolContentHeight,
   tabs: Studio.tabs
 }))(LeftContainer);
diff --git a/...omponents/DataSourceDetail/RightTagsRouter/SchemaDesc/GeneralJdbcDesc/GeneralJdbcDesc.tsx b/...omponents/DataSourceDetail/RightTagsRouter/SchemaDesc/GeneralJdbcDesc/GeneralJdbcDesc.tsx
@@ -22,7 +22,7 @@ import ColumnInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail
 import { DataSources } from '@/types/RegCenter/data';
 
 const GeneralJdbcDesc: React.FC<DataSources.SchemaDescProps> = (props) => {
-  const { tableInfo, queryParams } = props;
+  const { tableInfo } = props;
 
   return <ColumnInfo columnInfo={tableInfo?.columns} />;
 };

diff --git a/dinky-web/src/types/RegCenter/data.d.ts b/dinky-web/src/types/RegCenter/data.d.ts
@@ -220,7 +220,6 @@ declare namespace DataSources {
    */
   export type SchemaDescProps = {
     tableInfo?: Partial<DataSources.Table>;
-    tableColumns?: Partial<DataSources.Column[]>;
     queryParams?: QueryParams;
   };