[Optimize][Web]optimize right top button for container

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

@@ -0,0 +1,126 @@
+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import {CircleDataStudioButtonProps} from "@/components/CallBackButton/CircleBtn";
+import {
+    ArrowsAltOutlined,
+    EnvironmentOutlined,
+    PlusCircleOutlined,
+    PlusOutlined,
+    ReloadOutlined,
+    ShrinkOutlined
+} from "@ant-design/icons";
+import {l} from "@/utils/intl";
+import React, {createContext, useContext, useReducer} from "react";
+
+export const BtnRoute: { [c: string]: CircleDataStudioButtonProps[] } = {
+    'menu.datastudio.datasource': [
+        {
+            icon: <PlusOutlined/>,
+            title: l('button.create'),
+            onClick: () => {
+            }
+        },
+        {
+            icon: <ReloadOutlined/>,
+            title: l('button.refresh'),
+            onClick: () => {
+            }
+        }
+    ],
+    'menu.datastudio.catalog': [
+        {
+            icon: <ReloadOutlined/>,
+            title: l('button.refresh'),
+            onClick: () => {
+            }
+        }
+    ],
+    'menu.datastudio.project': [
+        {
+            icon: <PlusCircleOutlined/>,
+            title: l('right.menu.createRoot'),
+            key: 'right.menu.createRoot',
+            onClick: () => {
+            }
+        },
+        {
+            icon: <ArrowsAltOutlined/>,
+            title: l('button.expand-all'),
+            key: 'button.expand-all',
+            onClick: () => {
+            }
+        },
+        {
+            icon: <ShrinkOutlined/>,
+            title: l('button.collapse-all'),
+            key: 'button.collapse-all',
+            onClick: () => {
+            }
+        },
+        {
+            icon: <EnvironmentOutlined/>,
+            title: l('button.position'),
+            key: 'button.position',
+            onClick: () => {
+            }
+        }
+    ]
+};
+
+type BtnAction = {
+    type: 'change',
+    selectKey: string,
+    payload: CircleDataStudioButtonProps[]
+}
+
+export const BtnContext = createContext(BtnRoute);
+
+const BtnDispatchContext = createContext((params: BtnAction) => {
+});
+
+export function useTasksDispatch() {
+    return useContext(BtnDispatchContext);
+}
+
+function BtnReducer(state = BtnRoute, action: BtnAction) {
+    switch (action.type) {
+        case 'change': {
+            return {...state, [action.selectKey]: action.payload}
+        }
+        default:
+            return {...state}
+    }
+}
+
+// @ts-ignore
+export function BtnProvider({children}) {
+    const [btn, dispatch] = useReducer(
+        BtnReducer,
+        BtnRoute
+    );
+
+    return (
+        <BtnContext.Provider value={btn}>
+            <BtnDispatchContext.Provider value={dispatch}>
+                {children}
+            </BtnDispatchContext.Provider>
+        </BtnContext.Provider>
+    );
+}

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

@@ -21,7 +21,6 @@ import { getCurrentData } from '@/pages/DataStudio/function';
 import { isSql } from '@/pages/DataStudio/HeaderContainer/service';
 import { TableDataNode } from '@/pages/DataStudio/LeftContainer/Catalog/data';
 import { StateType } from '@/pages/DataStudio/model';
-import { BtnRoute } from '@/pages/DataStudio/route';
 import ColumnInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/SchemaDesc/ColumnInfo';
 import TableInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/SchemaDesc/TableInfo';
 import { DIALECT } from '@/services/constants';
@@ -39,8 +38,9 @@ import { Button, Col, Empty, Modal, Row, Select, Spin, Tabs } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import DirectoryTree from 'antd/es/tree/DirectoryTree';
 import { DefaultOptionType } from 'rc-select/lib/Select';
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import { getMSCatalogs, getMSColumns, getMSSchemaInfo } from './service';
+import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const Catalog: React.FC = (props: connect) => {
   const { tabs } = props;
@@ -75,10 +75,18 @@ const Catalog: React.FC = (props: connect) => {
   const [row, setRow] = useState<TableDataNode>();
   const [loading, setLoading] = useState<boolean>(false);
   const [columnData, setColumnData] = useState([]);
+  const btnDispatch = useTasksDispatch();
+  const currentTabName = 'menu.datastudio.catalog';
+  const btnEvent = [...BtnRoute[currentTabName]];
 
-  BtnRoute['menu.datastudio.catalog'][0].onClick = () => {
+  btnEvent[0].onClick = () => {
     refreshMetaStoreTables();
   };
+  btnDispatch({
+    type: 'change',
+    selectKey: currentTabName,
+    payload: btnEvent
+  })
 
   useEffect(() => {
     getCatalogs();

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

@@ -18,7 +18,6 @@
  */
 
 import { TagAlignLeft } from '@/components/StyledComponents';
-import { BtnRoute } from '@/pages/DataStudio/route';
 import SchemaTree from '@/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree';
 import DataSourceModal from '@/pages/RegCenter/DataSource/components/DataSourceModal';
 import { handleTest, saveOrUpdateHandle } from '@/pages/RegCenter/DataSource/service';
@@ -31,6 +30,7 @@ import { Spin, Tag } from 'antd';
 import { useEffect, useState } from 'react';
 import { StateType, STUDIO_MODEL } from '../../model';
 import { clearDataSourceTable, getDataSourceList, showDataSourceTable } from './service';
+import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const DataSource = (props: any) => {
   const {
@@ -42,6 +42,7 @@ const DataSource = (props: any) => {
   const [isLoadingDatabase, setIsLoadingDatabase] = useState(false);
   const [showCreate, setShowCreate] = useState(false);
   const selectDb = (dbData as DataSources.DataSource[]).filter((x) => x.id === selectDatabaseId)[0];
+  const btnDispatch = useTasksDispatch();
 
   /**
    * @description: 刷新树数据
@@ -87,17 +88,25 @@ const DataSource = (props: any) => {
   const onChangeDataBase = (value: number) => {
     onRefreshTreeData(value);
   };
+  const currentTabName = 'menu.datastudio.datasource';
 
-  BtnRoute['menu.datastudio.datasource'][0].onClick = () => {
+  const btnEvent = [...BtnRoute[currentTabName]];
+
+  btnEvent[0].onClick = () => {
     setShowCreate(true);
   };
-  BtnRoute['menu.datastudio.datasource'][1].onClick = () => {
+  btnEvent[1].onClick = () => {
     if (!selectDatabaseId) return;
     setIsLoadingDatabase(true);
     clearDataSourceTable(selectDatabaseId).then(() => {
       onChangeDataBase(selectDatabaseId);
     });
   };
+  btnDispatch({
+    type: 'change',
+    selectKey: currentTabName,
+    payload: btnEvent
+  })
 
   /**
    * 构建数据库列表 下拉框

dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx

@@ -25,13 +25,13 @@ import {
   getParentKey
 } from '@/pages/DataStudio/LeftContainer/Project/function';
 import { StateType, STUDIO_MODEL, TabsItemType } from '@/pages/DataStudio/model';
-import { BtnRoute } from '@/pages/DataStudio/route';
 import { l } from '@/utils/intl';
 import { connect } from '@@/exports';
 import { Key } from '@ant-design/pro-components';
 import { Empty, Tree } from 'antd';
 import Search from 'antd/es/input/Search';
 import React, { useEffect, useState } from 'react';
+import {BtnRoute, useTasksDispatch} from '../../BtnContext';
 
 const { DirectoryTree } = Tree;
 
@@ -60,6 +60,8 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
 
   const [searchValue, setSearchValueValue] = useState('');
   const [data, setData] = useState<any[]>(buildProjectTree(projectData, searchValue));
+  const btnDispatch = useTasksDispatch();
+
 
   useEffect(() => {
     setData(buildProjectTree(projectData, searchValue));
@@ -101,7 +103,8 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
     });
   };
 
-  const btn = BtnRoute['menu.datastudio.project'];
+  const currentTabName = 'menu.datastudio.project';
+  const btnEvent = [...BtnRoute[currentTabName]];
   const positionKey = (panes: TabsItemType[], activeKey: string) => {
     const treeKey = getCurrentTab(panes, activeKey)?.treeKey;
     if (treeKey) {
@@ -123,14 +126,19 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
     }
   };
 
-  btn[1].onClick = expandAll;
+  btnEvent[1].onClick = expandAll;
 
-  btn[2].onClick = () =>
+  btnEvent[2].onClick = () =>
     dispatch({
       type: STUDIO_MODEL.updateProjectExpandKey,
       payload: []
     });
-  btn[3].onClick = positionKey;
+  btnEvent[3].onClick = positionKey;
+  btnDispatch({
+    type: 'change',
+    selectKey: currentTabName,
+    payload: btnEvent
+  })
 
   return (
     <>

dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx

@@ -20,14 +20,14 @@
 import Title from '@/components/Front/Title';
 import FolderModal from '@/pages/DataStudio/LeftContainer/Project/FolderModal';
 import { StateType, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model';
-import { BtnRoute } from '@/pages/DataStudio/route';
 import { handleAddOrUpdate } from '@/services/BusinessCrud';
 import { API_CONSTANTS } from '@/services/endpoints';
 import { Catalogue } from '@/types/Studio/data';
 import { l } from '@/utils/intl';
 import { connect } from '@umijs/max';
 import { Space } from 'antd';
 import React, { useState } from 'react';
+import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const ProjectTitle: React.FC<StateType & connect> = (props) => {
   const {
@@ -36,6 +36,7 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
   } = props;
 
   const [createModalVisible, handleModalVisible] = useState<boolean>(false);
+  const btnDispatch = useTasksDispatch();
 
   const handleCancelCreate = async () => {
     handleModalVisible(false);
@@ -66,15 +67,21 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
     );
   };
 
-  const btn = BtnRoute['menu.datastudio.project'];
+  const currentTabName = 'menu.datastudio.project';
+  const btn = BtnRoute[currentTabName];
   btn[0].onClick = () => handleCreateClick();
+  btnDispatch({
+    type: 'change',
+    selectKey:currentTabName,
+    payload: btn
+  })
 
   /**
    * 渲染侧边栏标题
    * @returns {JSX.Element}
    */
   const renderTitle = () => {
-    if (selectKey && selectKey === 'menu.datastudio.project') {
+    if (selectKey && selectKey === currentTabName) {
       return (
         <Space>
           <Title>{l(selectKey)}</Title>

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

@@ -53,6 +53,7 @@ import { Modal, Typography } from 'antd';
 import { MenuInfo } from 'rc-menu/es/interface';
 import React, { Key, useEffect, useState } from 'react';
 import { connect } from 'umi';
+import {useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const { Text } = Typography;
 
@@ -64,6 +65,8 @@ const Project: React.FC = (props: connect) => {
   } = props;
 
   const [projectState, setProjectState] = useState<ProjectState>(InitProjectState);
+  const btnDispatch = useTasksDispatch();
+
 
   useEffect(() => {
     setProjectState((prevState) => ({

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

@@ -22,10 +22,11 @@ import MovableSidebar, { MovableSidebarProps } from '@/components/Sidebar/Movabl
 import useThemeValue from '@/hooks/useThemeValue';
 import ProjectTitle from '@/pages/DataStudio/LeftContainer/Project/ProjectTitle';
 import { StateType, STUDIO_MODEL, VIEW } from '@/pages/DataStudio/model';
-import { BtnRoute, LeftSide } from '@/pages/DataStudio/route';
+import { LeftSide } from '@/pages/DataStudio/route';
 import { connect } from '@@/exports';
 import { Tabs } from 'antd';
-import React from 'react';
+import React, {useContext} from 'react';
+import {BtnContext} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 export type LeftContainerProps = {
   size: number;
@@ -41,6 +42,7 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
     rightContainer,
     tabs: { panes, activeKey }
   } = props;
+  const btn = useContext(BtnContext);
   const themeValue = useThemeValue();
   const MAX_WIDTH = size.width - 2 * VIEW.leftToolWidth - rightContainer.width - 700;
   /**
@@ -87,8 +89,8 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
     minWidth: 160,
     maxWidth: MAX_WIDTH,
     enable: { right: true },
-    btnGroup: BtnRoute[leftContainer.selectKey]
-      ? BtnRoute[leftContainer.selectKey].map((item: CircleDataStudioButtonProps) => (
+    btnGroup: btn[leftContainer.selectKey]
+      ? btn[leftContainer.selectKey].map((item: CircleDataStudioButtonProps) => (
           <CircleBtn
             title={item.title}
             icon={item.icon}