refactor: some tricky fix and refactor (DataLinkDC#2295)

* refactor: remove water marker * refactor: reorder admin icon * refactor: close tab Signed-off-by: Licho <[email protected]> * fix: foot display partial Signed-off-by: Licho <[email protected]> * Spotless Apply --------- Signed-off-by: Licho <[email protected]> Co-authored-by: leechor <[email protected]>
aiwenmo · Sep 6, 2023 · 24d5e41 · 24d5e41
1 parent 881052c
commit 24d5e41
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 88 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx
@@ -194,73 +194,71 @@ const CodeShow = (props: CodeShowFormProps) => {
    *  render
    */
   return (
-    <>
-      <div className={'monaco-float'}>
-        {/* fullScreen button */}
-        {fullScreenBtn && (
-          <FullscreenBtn
-            isFullscreen={fullScreen}
-            fullScreenCallBack={() => setFullScreen(!fullScreen)}
-          />
-        )}
+    <div className={'monaco-float'}>
+      {/* fullScreen button */}
+      {fullScreenBtn && (
+        <FullscreenBtn
+          isFullscreen={fullScreen}
+          fullScreenCallBack={() => setFullScreen(!fullScreen)}
+        />
+      )}
 
-        {/* editor */}
-        <Editor
-          width={width}
-          height={height}
-          value={loading ? 'loading...' : code}
-          language={language}
-          options={{
-            ...options,
-            scrollBeyondLastLine: false,
-            readOnly: true,
-            wordWrap: autoWrap,
-            autoDetectHighContrast: true,
-            selectOnLineNumbers: true,
-            fixedOverflowWidgets: true,
-            autoClosingDelete: 'always',
-            lineNumbers,
-            scrollbar: {
-              // Subtle shadows to the left & top. Defaults to true.
-              useShadows: false,
+      {/* editor */}
+      <Editor
+        width={width}
+        height={height}
+        value={loading ? 'loading...' : code}
+        language={language}
+        options={{
+          ...options,
+          scrollBeyondLastLine: false,
+          readOnly: true,
+          wordWrap: autoWrap,
+          autoDetectHighContrast: true,
+          selectOnLineNumbers: true,
+          fixedOverflowWidgets: true,
+          autoClosingDelete: 'always',
+          lineNumbers,
+          scrollbar: {
+            // Subtle shadows to the left & top. Defaults to true.
+            useShadows: false,
 
-              // Render vertical arrows. Defaults to false.
-              // verticalHasArrows: true,
-              // Render horizontal arrows. Defaults to false.
-              // horizontalHasArrows: true,
+            // Render vertical arrows. Defaults to false.
+            // verticalHasArrows: true,
+            // Render horizontal arrows. Defaults to false.
+            // horizontalHasArrows: true,
 
-              // Render vertical scrollbar.
-              // Accepted values: 'auto', 'visible', 'hidden'.
-              // Defaults to 'auto'
-              vertical: 'visible',
-              // Render horizontal scrollbar.
-              // Accepted values: 'auto', 'visible', 'hidden'.
-              // Defaults to 'auto'
-              horizontal: 'visible',
-              verticalScrollbarSize: 8,
-              horizontalScrollbarSize: 8,
-              arrowSize: 30
-            }
-          }}
-          onMount={editorDidMount}
-          theme={theme ? theme : convertCodeEditTheme()}
-        />
+            // Render vertical scrollbar.
+            // Accepted values: 'auto', 'visible', 'hidden'.
+            // Defaults to 'auto'
+            vertical: 'visible',
+            // Render horizontal scrollbar.
+            // Accepted values: 'auto', 'visible', 'hidden'.
+            // Defaults to 'auto'
+            horizontal: 'visible',
+            verticalScrollbarSize: 8,
+            horizontalScrollbarSize: 8,
+            arrowSize: 30
+          }
+        }}
+        onMount={editorDidMount}
+        theme={theme ? theme : convertCodeEditTheme()}
+      />
 
-        {/* float button */}
-        {showFloatButton && (
-          <div
-            style={{
-              width: 35,
-              height: height,
-              backgroundColor: '#f4f4f4',
-              paddingBlock: 10
-            }}
-          >
-            <EditorFloatBtn {...restEditBtnProps} />
-          </div>
-        )}
-      </div>
-    </>
+      {/* float button */}
+      {showFloatButton && (
+        <div
+          style={{
+            width: 35,
+            height: height,
+            backgroundColor: '#f4f4f4',
+            paddingBlock: 10
+          }}
+        >
+          <EditorFloatBtn {...restEditBtnProps} />
+        </div>
+      )}
+    </div>
   );
 };
 

diff --git a/dinky-web/src/components/RightContent/index.tsx b/dinky-web/src/components/RightContent/index.tsx
@@ -119,7 +119,6 @@ const GlobalHeaderRight: React.FC = () => {
           <FullscreenExitOutlined {...fullScreenProps} onClick={screenFull} />
         )}
       </Tooltip>
-      <Avatar />
       <Tooltip placement='bottom' title={<span>{menuVersion}</span>}>
         <Space style={actionClassName}>{menuVersion}</Space>
       </Tooltip>
@@ -131,6 +130,7 @@ const GlobalHeaderRight: React.FC = () => {
         unCheckedChildren={<ThemeStar />}
         onChange={(value) => setTheme(value ? THEME.dark : THEME.light)}
       />
+      <Avatar />
     </>
   );
 };

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx
@@ -6,8 +6,9 @@ import { l } from '@/utils/intl';
 import { connect } from '@@/exports';
 import { Modal, Select, Tabs } from 'antd';
 import TextArea from 'antd/es/input/TextArea';
+import { Tab } from 'rc-tabs/lib/interface.d';
 import * as React from 'react';
-import { ReactNode, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export async function getPrintTables(statement: string) {
   return postAll('api/statement/getPrintTables', { statement });
@@ -50,7 +51,7 @@ const DataPage = (props: any) => {
 
 const TableData = (props: any) => {
   const { statement, height } = props;
-  const [panes, setPanes] = useState<{ label: string; key: string; children: ReactNode }[]>([]);
+  const [panes, setPanes] = useState<Tab[]>([]);
 
   function onOk(title: string) {
     const activeKey = `${panes.length + 1}`;

diff --git a/dinky-web/src/pages/DataStudio/function.ts b/dinky-web/src/pages/DataStudio/function.ts
@@ -20,6 +20,7 @@
 import {
   DataStudioTabsItemType,
   EnvType,
+  FooterType,
   JobRunningMsgType,
   MetadataTabsItemType,
   STUDIO_MODEL,
@@ -157,7 +158,7 @@ export const getCurrentData = (
   return undefined;
 };
 
-export const getFooterValue = (panes: any, activeKey: string) => {
+export const getFooterValue = (panes: any, activeKey: string): Partial<FooterType> => {
   const currentTab = getCurrentTab(panes, activeKey);
   if (isDataStudioTabsItemType(currentTab)) {
     return {

diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
@@ -278,7 +278,7 @@ const DataStudio = (props: any) => {
   return (
     <PageContainer title={false} breadcrumb={{ style: { display: 'none' } }}>
       <PersistGate loading={null} persistor={persist}>
-        <div style={{ marginInline: -10, width: size.width }}>
+        <div style={{ marginInline: -10, marginTop: -6, width: size.width }}>
           <SecondHeaderContainer size={size} activeBreadcrumbTitle={activeBreadcrumbTitle} />
           <Layout hasSider style={{ minHeight: size.contentHeight, paddingInline: 0 }}>
             <Sider collapsed collapsedWidth={40}>

diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts
@@ -222,7 +222,7 @@ export type JobRunningMsgType = {
 /**
  * footer
  */
-type FooterType = {
+export type FooterType = {
   codePosition: [number, number];
   space: number;
   codeEncoding: string;
@@ -521,9 +521,6 @@ const Model: ModelType = {
     },
     /**
      * flink config options
-     * @param {StateType} state
-     * @param {any} payload
-     * @returns {{centerContentHeight: number, flinkConfigOptions: any, tabs: TabsType, project: {data: any[], expandKeys: [], selectKey: []}, leftContainer: Container, env: EnvType[], footContainer: FooterType, clusterConfiguration: Cluster.Config[], toolContentHeight: number, database: {dbData: DataSources.DataSource[], selectDatabaseId: number | null, expandKeys: [], selectKey: []}, sessionCluster: Cluster.Instance[], isFullScreen: boolean, rightContainer: Container, bottomContainerContent: BottomContainerContent, bottomContainer: Container}}
      */
     saveFlinkConfigOptions(state, { payload }) {
       return {
@@ -609,32 +606,27 @@ const Model: ModelType = {
       if (needCloseKey === activeKey) {
         for (const [index, pane] of panes.entries()) {
           if (pane.key === needCloseKey) {
-            const item =
-              index + 1 >= panes.length
-                ? index + 1 > 1 && index + 1 === panes.length
-                  ? panes[index - 1]
-                  : panes[0]
-                : panes[index + 1];
-            const newPanes = panes.filter((pane) => pane.key !== needCloseKey);
-            let footerValue: object = getFooterValue(panes, item.key);
+            const nextPane = panes[(index + 1) % panes.length];
             return {
               ...state,
               tabs: {
-                panes: newPanes,
-                activeKey: item.key,
+                panes: panes.filter((pane) => pane.key !== needCloseKey),
+                activeKey: nextPane.key,
                 activeBreadcrumbTitle:
-                  panes.length < 2 ? '' : [item.type, item.breadcrumbLabel, item.label].join('/')
+                  panes.length < 2
+                    ? ''
+                    : [nextPane.type, nextPane.breadcrumbLabel, nextPane.label].join('/')
               },
               footContainer: {
                 ...state.footContainer,
-                ...footerValue
+                ...getFooterValue(panes, nextPane.key)
               }
             };
           }
         }
       }
+
       const newPanes = panes.filter((pane) => pane.key !== needCloseKey);
-      let footerValue: object = getFooterValue(newPanes, activeKey);
       return {
         ...state,
         tabs: {
@@ -644,10 +636,11 @@ const Model: ModelType = {
         },
         footContainer: {
           ...state.footContainer,
-          ...footerValue
+          ...getFooterValue(newPanes, activeKey)
         }
       };
     },
+
     /**
      * 添加tab 如果存在则不添加
      */
@@ -669,6 +662,7 @@ const Model: ModelType = {
           };
         }
       }
+
       node.key =
         state.tabs.panes.length === 0
           ? '0'
@@ -712,8 +706,8 @@ const Model: ModelType = {
         ...state,
         tabs: {
           panes: tabsItem ? [tabsItem] : [],
-          activeKey: tabsItem?.key || '',
-          activeBreadcrumbTitle: tabsItem?.breadcrumbLabel || ''
+          activeKey: tabsItem?.key ?? '',
+          activeBreadcrumbTitle: tabsItem?.breadcrumbLabel ?? ''
         }
       };
     },