diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx new file mode 100644 index 0000000000..c334df505a --- /dev/null +++ b/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: , + title: l('button.create'), + onClick: () => { + } + }, + { + icon: , + title: l('button.refresh'), + onClick: () => { + } + } + ], + 'menu.datastudio.catalog': [ + { + icon: , + title: l('button.refresh'), + onClick: () => { + } + } + ], + 'menu.datastudio.project': [ + { + icon: , + title: l('right.menu.createRoot'), + key: 'right.menu.createRoot', + onClick: () => { + } + }, + { + icon: , + title: l('button.expand-all'), + key: 'button.expand-all', + onClick: () => { + } + }, + { + icon: , + title: l('button.collapse-all'), + key: 'button.collapse-all', + onClick: () => { + } + }, + { + icon: , + 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 ( + + + {children} + + + ); +} \ No newline at end of file diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx index 93109101e6..bd24d17e18 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx +++ b/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(); const [loading, setLoading] = useState(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(); diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx index 88817181dc..73429a4b6d 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx +++ b/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 + }) /** * 构建数据库列表 下拉框 diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx index 3eff03eee4..e1c6cc2f10 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx +++ b/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 = (props) => { const [searchValue, setSearchValueValue] = useState(''); const [data, setData] = useState(buildProjectTree(projectData, searchValue)); + const btnDispatch = useTasksDispatch(); + useEffect(() => { setData(buildProjectTree(projectData, searchValue)); @@ -101,7 +103,8 @@ const JobTree: React.FC = (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 = (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 ( <> diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx index 2decf904d5..48bd67cfd9 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx @@ -20,7 +20,6 @@ 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'; @@ -28,6 +27,7 @@ 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 = (props) => { const { @@ -36,6 +36,7 @@ const ProjectTitle: React.FC = (props) => { } = props; const [createModalVisible, handleModalVisible] = useState(false); + const btnDispatch = useTasksDispatch(); const handleCancelCreate = async () => { handleModalVisible(false); @@ -66,15 +67,21 @@ const ProjectTitle: React.FC = (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 ( {l(selectKey)} diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx index f9d7f1e32a..14a15ee35f 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx +++ b/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(InitProjectState); + const btnDispatch = useTasksDispatch(); + useEffect(() => { setProjectState((prevState) => ({ diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx index bc0c7be1d0..c872df63a3 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx +++ b/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 = (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 = (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) => ( { updateToolContentHeight(centerContentHeight - VIEW.leftMargin); }, [activeKey, panes]); - useEffect(() => { - loadData(); + useAsyncEffect(async () => { + await loadData(); }, []); const access = useAccess(); @@ -277,11 +279,13 @@ const DataStudio = (props: any) => {
- + + + , - title: l('button.create'), - onClick: () => { - } - }, - { - icon: , - title: l('button.refresh'), - onClick: () => { - } - } - ], - 'menu.datastudio.catalog': [ - { - icon: , - title: l('button.refresh'), - onClick: () => { - } - } - ], - 'menu.datastudio.project': [ - { - icon: , - title: l('right.menu.createRoot'), - key: 'right.menu.createRoot', - onClick: () => { - } - }, - { - icon: , - title: l('button.expand-all'), - key: 'button.expand-all', - onClick: () => { - } - }, - { - icon: , - title: l('button.collapse-all'), - key: 'button.collapse-all', - onClick: () => { - } - }, - { - icon: , - title: l('button.position'), - key: 'button.position', - onClick: () => { - } - } - ] -}; export const BottomBtnRoute: { [c: string]: CircleBottomButtonProps[] } = { // todo 右边按钮功能有待完善 // [LeftBottomKey.TABLE_DATA_KEY]: [