From 24d5e41d117c38b163347ef7a91da32f1e3795b3 Mon Sep 17 00:00:00 2001 From: Licho Date: Wed, 6 Sep 2023 12:24:42 +0800 Subject: [PATCH] refactor: some tricky fix and refactor (#2295) * refactor: remove water marker * refactor: reorder admin icon * refactor: close tab Signed-off-by: Licho * fix: foot display partial Signed-off-by: Licho * Spotless Apply --------- Signed-off-by: Licho Co-authored-by: leechor --- .../CustomEditor/CodeShow/index.tsx | 124 +++++++++--------- .../src/components/RightContent/index.tsx | 2 +- .../BottomContainer/TableData/index.tsx | 5 +- dinky-web/src/pages/DataStudio/function.ts | 3 +- dinky-web/src/pages/DataStudio/index.tsx | 2 +- dinky-web/src/pages/DataStudio/model.ts | 34 ++--- 6 files changed, 82 insertions(+), 88 deletions(-) diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx index 58a42343a9..2a5703dc13 100644 --- 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 ( - <> -
- {/* fullScreen button */} - {fullScreenBtn && ( - setFullScreen(!fullScreen)} - /> - )} +
+ {/* fullScreen button */} + {fullScreenBtn && ( + setFullScreen(!fullScreen)} + /> + )} - {/* editor */} - + // 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 && ( -
- -
- )} -
- + {/* float button */} + {showFloatButton && ( +
+ +
+ )} +
); }; diff --git a/dinky-web/src/components/RightContent/index.tsx b/dinky-web/src/components/RightContent/index.tsx index a9d6f0d82d..503c8cb874 100644 --- a/dinky-web/src/components/RightContent/index.tsx +++ b/dinky-web/src/components/RightContent/index.tsx @@ -119,7 +119,6 @@ const GlobalHeaderRight: React.FC = () => { )} - {menuVersion}}> {menuVersion} @@ -131,6 +130,7 @@ const GlobalHeaderRight: React.FC = () => { unCheckedChildren={} onChange={(value) => setTheme(value ? THEME.dark : THEME.light)} /> + ); }; diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx index d24996882e..f9c50ff215 100644 --- 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([]); 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 index 8911864514..24bc6ce567 100644 --- 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 => { 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 index 044717a582..470bc6b3ee 100644 --- 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 ( -
+
diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts index c32dfd528e..da7f1a8e56 100644 --- 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 ?? '' } }; },