From ace5011c5aaca1bfafea348c6205a27e5f43a5f2 Mon Sep 17 00:00:00 2001 From: Maciej Bodek Date: Wed, 25 Oct 2023 15:46:32 +0200 Subject: [PATCH] Preliminary logic to move `Import` into the bottom panel --- .../components/CreateTableDialog/index.tsx | 8 +- .../web-console/src/components/Logo/index.tsx | 10 +- .../web-console/src/components/Page/index.tsx | 79 -------- .../components/TableSchemaDialog/dialog.tsx | 2 +- packages/web-console/src/components/index.ts | 1 - packages/web-console/src/consts/index.ts | 2 +- .../web-console/src/js/console/globals.js | 2 +- .../web-console/src/js/console/quick-vis.js | 2 +- .../src/scenes/Console/Menu/index.tsx | 2 +- .../web-console/src/scenes/Console/import.tsx | 9 + .../web-console/src/scenes/Console/index.tsx | 83 ++++++-- .../web-console/src/scenes/Console/types.ts | 2 +- .../scenes/{Result => Console}/zero-state.tsx | 0 .../web-console/src/scenes/Import/index.tsx | 29 ++- .../web-console/src/scenes/Layout/index.tsx | 22 +-- .../web-console/src/scenes/News/index.tsx | 8 +- .../web-console/src/scenes/Result/index.tsx | 14 +- .../web-console/src/scenes/Sidebar/index.tsx | 182 ------------------ .../web-console/src/store/Console/actions.ts | 6 +- .../web-console/src/store/Console/reducers.ts | 6 +- .../src/store/Console/selectors.ts | 9 +- .../web-console/src/store/Console/types.ts | 12 +- 22 files changed, 127 insertions(+), 363 deletions(-) delete mode 100644 packages/web-console/src/components/Page/index.tsx create mode 100644 packages/web-console/src/scenes/Console/import.tsx rename packages/web-console/src/scenes/{Result => Console}/zero-state.tsx (100%) delete mode 100644 packages/web-console/src/scenes/Sidebar/index.tsx diff --git a/packages/web-console/src/components/CreateTableDialog/index.tsx b/packages/web-console/src/components/CreateTableDialog/index.tsx index 39d33d702..9c0a648f3 100644 --- a/packages/web-console/src/components/CreateTableDialog/index.tsx +++ b/packages/web-console/src/components/CreateTableDialog/index.tsx @@ -16,7 +16,7 @@ export const CreateTableDialog = () => { >(undefined) const dispatch = useDispatch() const tables = useSelector(selectors.query.getTables) - const activePanel = useSelector(selectors.console.getActivePanel) + const activeSidebar = useSelector(selectors.console.getActiveSidebar) const { appendQuery } = useEditor() const handleAddTableSchema = (values: SchemaFormValues) => { @@ -36,14 +36,14 @@ export const CreateTableDialog = () => { } useEffect(() => { - if (activePanel === "news") { + if (activeSidebar === "news") { setAddTableDialogOpen(undefined) } - }, [activePanel]) + }, [activeSidebar]) useEffect(() => { if (addTableDialogOpen !== undefined) { - dispatch(actions.console.setActivePanel("create")) + dispatch(actions.console.setActiveSidebar("create")) } }, [addTableDialogOpen]) diff --git a/packages/web-console/src/components/Logo/index.tsx b/packages/web-console/src/components/Logo/index.tsx index 3b78fbfbd..e84bae962 100644 --- a/packages/web-console/src/components/Logo/index.tsx +++ b/packages/web-console/src/components/Logo/index.tsx @@ -1,6 +1,4 @@ import React from "react" -import { useDispatch } from "react-redux" -import { actions } from "../../store" import styled from "styled-components" import { color } from "../../utils" import { Information } from "@styled-icons/remix-line" @@ -19,15 +17,9 @@ const Root = styled.div` cursor: pointer; ` export const Logo = () => { - const dispatch = useDispatch() return ( - dispatch(actions.console.setActivePanel("console"))} - > - - - {/* QuestDB Logo */} + ) } diff --git a/packages/web-console/src/components/Page/index.tsx b/packages/web-console/src/components/Page/index.tsx deleted file mode 100644 index dd2a7096c..000000000 --- a/packages/web-console/src/components/Page/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react" -import styled from "styled-components" -import { Text } from "../../components/Text" -import { PaneMenu } from "../../components/PaneMenu" -import { color } from "../../utils" -import { Sidebar } from "../../components/Sidebar" -import { Logo } from "../../components/Logo" -import { XLg } from "@styled-icons/bootstrap" -import { useDispatch } from "react-redux" -import { actions } from "../../store" -import { Button } from "@questdb/react-components" - -const Root = styled.div` - display: flex; - width: 100vw; - height: 100vh; -` - -const Wrapper = styled.div` - display: flex; - flex: 1; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - background: ${color("backgroundDarker")}; - color: ${color("foreground")}; -` - -const HeaderWrapper = styled.div` - display: flex; - flex-direction: column; - flex: 0; - width: 100%; -` - -const HeaderMenu = styled(PaneMenu)` - & > :not(:first-child) { - margin-left: 1rem; - } -` - -const Icon = styled.span` - color: ${color("foreground")}; -` - -type Props = { - children: React.ReactNode - icon?: React.ReactNode - title?: string -} - -export const Page = ({ children, icon, title }: Props) => { - const dispatch = useDispatch() - - return ( - - - - - - {title && ( - - - {icon} - {title} - - - )} - {children} - - - ) -} diff --git a/packages/web-console/src/components/TableSchemaDialog/dialog.tsx b/packages/web-console/src/components/TableSchemaDialog/dialog.tsx index d84f43e2b..8f6a38d07 100644 --- a/packages/web-console/src/components/TableSchemaDialog/dialog.tsx +++ b/packages/web-console/src/components/TableSchemaDialog/dialog.tsx @@ -192,7 +192,7 @@ export const Dialog = ({ onOpenChange={(isOpen) => { if (isOpen && action === "add") { dispatch( - actions.console.setActivePanel(isOpen ? "create" : "console"), + actions.console.setActiveSidebar(isOpen ? "create" : undefined), ) } }} diff --git a/packages/web-console/src/components/index.ts b/packages/web-console/src/components/index.ts index 0f0ea6d38..30aedbe9e 100644 --- a/packages/web-console/src/components/index.ts +++ b/packages/web-console/src/components/index.ts @@ -30,7 +30,6 @@ export * from "./Hooks" export * from "./IconWithTooltip" export * from "./Input" export * from "./Link" -export * from "./Page" export * from "./PaneContent" export * from "./PaneMenu" export * from "./PaneWrapper" diff --git a/packages/web-console/src/consts/index.ts b/packages/web-console/src/consts/index.ts index e380dc896..31d9e1654 100644 --- a/packages/web-console/src/consts/index.ts +++ b/packages/web-console/src/consts/index.ts @@ -23,7 +23,7 @@ ******************************************************************************/ export enum BusEvent { - MSG_ACTIVE_PANEL = "active.panel", + MSG_active_sidebar = "active.panel", MSG_EDITOR_FOCUS = "editor.focus", MSG_EDITOR_SET = "editor.set", MSG_EDITOR_INSERT_COLUMN = "editor.insert.column", diff --git a/packages/web-console/src/js/console/globals.js b/packages/web-console/src/js/console/globals.js index 099b171ea..a8d38a7b4 100644 --- a/packages/web-console/src/js/console/globals.js +++ b/packages/web-console/src/js/console/globals.js @@ -30,6 +30,6 @@ export const MSG_QUERY_OK = "query.out.ok" export const MSG_QUERY_ERROR = "query.out.error" export const MSG_QUERY_DATASET = "query.out.dataset" export const MSG_QUERY_FIND_N_EXEC = "query.build.execute" -export const MSG_ACTIVE_PANEL = "active.panel" +export const MSG_active_sidebar = "active.panel" export const MSG_EDITOR_FOCUS = "editor.focus" export const MSG_CHART_DRAW = "chart.draw" diff --git a/packages/web-console/src/js/console/quick-vis.js b/packages/web-console/src/js/console/quick-vis.js index 125a21c10..da0ab3f8c 100644 --- a/packages/web-console/src/js/console/quick-vis.js +++ b/packages/web-console/src/js/console/quick-vis.js @@ -305,7 +305,7 @@ export function quickVis(root, msgBus) { function bind() { viewport = div.find(".quick-vis-canvas")[0] $(window).resize(resize) - bus.on(qdb.MSG_ACTIVE_PANEL, resize) + bus.on(qdb.MSG_active_sidebar, resize) echart = echarts.init(viewport, eChartsMacarons) bus.on(qdb.MSG_QUERY_DATASET, updatePickers) bus.on(qdb.MSG_QUERY_CANCEL, cancelDraw) diff --git a/packages/web-console/src/scenes/Console/Menu/index.tsx b/packages/web-console/src/scenes/Console/Menu/index.tsx index ee78a78be..d9f25c274 100644 --- a/packages/web-console/src/scenes/Console/Menu/index.tsx +++ b/packages/web-console/src/scenes/Console/Menu/index.tsx @@ -317,7 +317,7 @@ const Menu = () => { icon={ diff --git a/packages/web-console/src/scenes/Console/import.tsx b/packages/web-console/src/scenes/Console/import.tsx new file mode 100644 index 000000000..262591bdb --- /dev/null +++ b/packages/web-console/src/scenes/Console/import.tsx @@ -0,0 +1,9 @@ +import React from "react" +import { PaneContent } from "../../components/PaneContent" +import { PaneWrapper } from "../../components/PaneWrapper" + +export const Import = () => ( + + import + +) diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx index 5b7e4f6cf..fecd1d71e 100644 --- a/packages/web-console/src/scenes/Console/index.tsx +++ b/packages/web-console/src/scenes/Console/index.tsx @@ -1,24 +1,25 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import styled from "styled-components" import { Splitter, useScreenSize, PopperHover } from "../../components" import Editor from "../Editor" import Result from "../Result" import Schema from "../Schema" -import { ZeroState } from "../Result/zero-state" +import { ZeroState } from "./zero-state" import { useCallback } from "react" import { BusEvent } from "../../consts" import { useLocalStorage } from "../../providers/LocalStorageProvider" import { StoreKey } from "../../utils/localStorage/types" -import { useSelector, useDispatch } from "react-redux" +import { useSelector } from "react-redux" import { selectors, actions } from "../../store" import { Tooltip } from "../../components/Tooltip" import { Sidebar } from "../../components/Sidebar" import { Navigation } from "../../components/Sidebar/navigation" import { Database2, Grid, PieChart, Upload2 } from "@styled-icons/remix-line" -import { ChevronDoubleLeft } from "@styled-icons/bootstrap" -import { ViewMode } from "./types" +import { ResultViewMode } from "./types" import { BUTTON_ICON_SIZE } from "../../consts/index" import { PrimaryToggleButton } from "../../components" +import { Import } from "./import" +import { use } from "echarts" const Root = styled.div` display: flex; @@ -37,15 +38,15 @@ const Bottom = styled.div` flex: 1; ` -const ToggleTablesIcon = styled(ChevronDoubleLeft)<{ splitterbasis: number }>` - transform: rotate( - ${({ splitterbasis }) => (splitterbasis === 0 ? "180deg" : "0deg")} - ); +const Tab = styled.div` + display: flex; + width: calc(100% - 4.5rem); + height: 100%; ` const viewModes: { icon: React.ReactNode - mode: ViewMode + mode: ResultViewMode tooltipText: string }[] = [ { @@ -60,28 +61,60 @@ const viewModes: { }, ] +type BottomPanel = "result" | "zeroState" | "import" + const Console = () => { const { sm } = useScreenSize() const { editorSplitterBasis, resultsSplitterBasis, updateSettings } = useLocalStorage() const result = useSelector(selectors.query.getResult) - const dispatch = useDispatch() - const [resultViewMode, setResultViewMode] = useState("grid") + const [resultViewMode, setResultViewMode] = useState("grid") + const [bottomPanel, setBottomPanel] = useState("zeroState") + const resultRef = React.useRef(null) + const zeroStateRef = React.useRef(null) + const importRef = React.useRef(null) + + const showPanel = (panel: BottomPanel) => { + if (resultRef.current) { + resultRef.current.style.display = panel === "result" ? "flex" : "none" + } + if (zeroStateRef.current) { + zeroStateRef.current.style.display = + panel === "zeroState" ? "flex" : "none" + } + if (importRef.current) { + importRef.current.style.display = panel === "import" ? "flex" : "none" + } + } const handleEditorSplitterChange = useCallback((value) => { updateSettings(StoreKey.EDITOR_SPLITTER_BASIS, value) setTimeout(() => { - window.bus.trigger(BusEvent.MSG_ACTIVE_PANEL) + window.bus.trigger(BusEvent.MSG_active_sidebar) }, 0) }, []) const handleResultsSplitterChange = useCallback((value) => { updateSettings(StoreKey.RESULTS_SPLITTER_BASIS, value) setTimeout(() => { - window.bus.trigger(BusEvent.MSG_ACTIVE_PANEL) + window.bus.trigger(BusEvent.MSG_active_sidebar) }, 0) }, []) + useEffect(() => { + if (resultRef.current && result) { + setBottomPanel("result") + } else if (zeroStateRef.current) { + setBottomPanel("zeroState") + } + }, [result]) + + useEffect(() => { + if (bottomPanel) { + showPanel(bottomPanel) + } + }, [bottomPanel]) + return ( { trigger={ setResultViewMode(mode)} - selected={resultViewMode === mode} + onClick={() => { + setBottomPanel("result") + setResultViewMode(mode) + }} + selected={ + bottomPanel === "result" && resultViewMode === mode + } > {icon} @@ -147,12 +185,21 @@ const Console = () => { ))} dispatch(actions.console.setActivePanel("import"))} + onClick={() => setBottomPanel("import")} + selected={bottomPanel === "import"} > - {result ? : } + + {result && } + + + + + + + diff --git a/packages/web-console/src/scenes/Console/types.ts b/packages/web-console/src/scenes/Console/types.ts index 93e3bf141..7c333351f 100644 --- a/packages/web-console/src/scenes/Console/types.ts +++ b/packages/web-console/src/scenes/Console/types.ts @@ -1 +1 @@ -export type ViewMode = "chart" | "grid" +export type ResultViewMode = "chart" | "grid" diff --git a/packages/web-console/src/scenes/Result/zero-state.tsx b/packages/web-console/src/scenes/Console/zero-state.tsx similarity index 100% rename from packages/web-console/src/scenes/Result/zero-state.tsx rename to packages/web-console/src/scenes/Console/zero-state.tsx diff --git a/packages/web-console/src/scenes/Import/index.tsx b/packages/web-console/src/scenes/Import/index.tsx index 46986a9d7..2830cc710 100644 --- a/packages/web-console/src/scenes/Import/index.tsx +++ b/packages/web-console/src/scenes/Import/index.tsx @@ -1,6 +1,5 @@ import React from "react" import styled from "styled-components" -import { Page } from "../../components" import { ImportCSVFiles } from "./ImportCSVFiles" import { BusEvent } from "../../consts" @@ -14,21 +13,19 @@ const Root = styled.div` const Import = () => { return ( - - - { - if (result.status === "OK") { - bus.trigger(BusEvent.MSG_QUERY_SCHEMA) - bus.trigger(BusEvent.MSG_QUERY_FIND_N_EXEC, { - query: `"${result.location}"`, - options: { appendAt: "end" }, - }) - } - }} - /> - - + + { + if (result.status === "OK") { + bus.trigger(BusEvent.MSG_QUERY_SCHEMA) + bus.trigger(BusEvent.MSG_QUERY_FIND_N_EXEC, { + query: `"${result.location}"`, + options: { appendAt: "end" }, + }) + } + }} + /> + ) } diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx index 6bb281b1e..f84eac1bf 100644 --- a/packages/web-console/src/scenes/Layout/index.tsx +++ b/packages/web-console/src/scenes/Layout/index.tsx @@ -27,7 +27,6 @@ import styled from "styled-components" import { BusEvent } from "../../consts" import Footer from "../Footer" import Console from "../Console" -import Import from "../Import" import SideMenu from "../SideMenu" import { Sidebar } from "../../components/Sidebar" import { TopBar } from "../../components/TopBar" @@ -71,11 +70,7 @@ const Drawer = styled.div` ` const Layout = () => { - const activePanel = useSelector(selectors.console.getActivePanel) - - const isSideOpened = () => { - return ["create", "news"].includes(activePanel) - } + const activeSidebar = useSelector(selectors.console.getActiveSidebar) useEffect(() => { window.bus.trigger(BusEvent.REACT_READY) @@ -86,21 +81,10 @@ const Layout = () => { -
- +
+ - - - -
diff --git a/packages/web-console/src/scenes/News/index.tsx b/packages/web-console/src/scenes/News/index.tsx index 0f880dd34..5a900e215 100644 --- a/packages/web-console/src/scenes/News/index.tsx +++ b/packages/web-console/src/scenes/News/index.tsx @@ -94,7 +94,7 @@ const News = () => { const [unreadNewsIds, setUnreadNewsIds] = useState([]) // This boolean is to animate the bell icon and display a bullet indicator const [hasUnreadNews, setHasUnreadNews] = useState(false) - const activePanel = useSelector(selectors.console.getActivePanel) + const activeSidebar = useSelector(selectors.console.getActiveSidebar) const getEnterpriseNews = async () => { setIsLoading(true) @@ -169,8 +169,8 @@ const News = () => { }, [newsOpened, enterpriseNews]) useEffect(() => { - setNewsOpened(activePanel === "news") - }, [activePanel]) + setNewsOpened(activeSidebar === "news") + }, [activeSidebar]) return ( { open={newsOpened} onOpenChange={async (newsOpened) => { dispatch( - actions.console.setActivePanel(newsOpened ? "news" : "console"), + actions.console.setActiveSidebar(newsOpened ? "news" : undefined), ) }} trigger={ diff --git a/packages/web-console/src/scenes/Result/index.tsx b/packages/web-console/src/scenes/Result/index.tsx index f300b4da4..aaec8d27c 100644 --- a/packages/web-console/src/scenes/Result/index.tsx +++ b/packages/web-console/src/scenes/Result/index.tsx @@ -43,14 +43,14 @@ import { selectors } from "../../store" import { color } from "../../utils" import * as QuestDB from "../../utils/questdb" import { BusEvent } from "../../consts" -import { ViewMode } from "scenes/Console/types" +import { ResultViewMode } from "scenes/Console/types" import { Button } from "@questdb/react-components" import type { IQuestDBGrid } from "../../js/console/grid.js" const Root = styled.div` display: flex; flex: 1; - width: calc(100% - 4.5rem); + width: 100%; ` const Wrapper = styled(PaneWrapper)` @@ -89,10 +89,10 @@ const RowCount = styled(Text)` margin-right: 1rem; ` -const Result = ({ viewMode }: { viewMode: ViewMode }) => { +const Result = ({ viewMode }: { viewMode: ResultViewMode }) => { const [count, setCount] = useState() const result = useSelector(selectors.query.getResult) - const activePanel = useSelector(selectors.console.getActivePanel) + const activeSidebar = useSelector(selectors.console.getActiveSidebar) const gridRef = useRef() const [gridFreezeLeftState, setGridFreezeLeftState] = useState(0) @@ -161,10 +161,8 @@ const Result = ({ viewMode }: { viewMode: ViewMode }) => { }, [viewMode]) useEffect(() => { - if (activePanel === "console") { - gridRef?.current?.render() - } - }, [activePanel]) + gridRef?.current?.render() + }, [activeSidebar]) const gridActions = [ { diff --git a/packages/web-console/src/scenes/Sidebar/index.tsx b/packages/web-console/src/scenes/Sidebar/index.tsx deleted file mode 100644 index 1b410fa82..000000000 --- a/packages/web-console/src/scenes/Sidebar/index.tsx +++ /dev/null @@ -1,182 +0,0 @@ -/******************************************************************************* - * ___ _ ____ ____ - * / _ \ _ _ ___ ___| |_| _ \| __ ) - * | | | | | | |/ _ \/ __| __| | | | _ \ - * | |_| | |_| | __/\__ \ |_| |_| | |_) | - * \__\_\\__,_|\___||___/\__|____/|____/ - * - * Copyright (c) 2014-2019 Appsicle - * Copyright (c) 2019-2022 QuestDB - * - * Licensed 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 React from "react" -import { useDispatch, useSelector } from "react-redux" -import styled from "styled-components" -import { CodeSSlash, Notification2 } from "@styled-icons/remix-line" -import { Upload2 } from "@styled-icons/remix-line" - -import { PopperHover, PrimaryToggleButton, Tooltip } from "../../components" -import { actions, selectors } from "../../store" -import { color } from "../../utils" - -const Wrapper = styled.div` - display: flex; - height: calc(100% - 4rem); - flex: 0 0 4.5rem; - flex-direction: column; - - background: ${color("backgroundDarker")}; -` - -const Logo = styled.div` - position: relative; - display: flex; - flex: 0 0 4rem; - background: ${color("black")}; - z-index: 1; - align-items: center; - justify-content: center; - cursor: pointer; -` - -type NavigationProps = Readonly<{ - selected: boolean -}> - -const Navigation = styled(PrimaryToggleButton)` - display: flex; - flex-direction: column; - flex: 0 0 5rem; - align-items: center; - justify-content: center; - cursor: pointer; - - & > span { - margin-left: 0 !important; - } - - & > :not(:first-child) { - margin-top: 0.3rem; - } -` - -const DisabledNavigation = styled.div` - display: flex; - position: relative; - height: 100%; - width: 100%; - flex: 0 0 5rem; - align-items: center; - justify-content: center; - - &:disabled { - pointer-events: none; - cursor: default; - } -` - -const Sidebar = () => { - const dispatch = useDispatch() - const { readOnly } = useSelector(selectors.console.getConfig) - const activePanel = useSelector(selectors.console.getActivePanel) - - return ( - - dispatch(actions.console.setActivePanel("console"))}> - QuestDB Logo - - - dispatch(actions.console.setActivePanel("console"))} - selected={activePanel === "console"} - data-hook="navigation-console-button" - > - - - } - > - Console - - - - - dispatch(actions.console.setActivePanel("import")) - } - selected={activePanel === "import"} - > - - - - ) : ( - dispatch(actions.console.setActivePanel("import"))} - selected={activePanel === "import"} - data-hook="navigation-import-button" - > - - - ) - } - > - - {readOnly ? ( - <> - Import is currently disabled. -
- To use this feature, turn read-only mode to false in - the configuration file - - ) : ( - <>Import - )} - - - - dispatch(actions.console.setActivePanel("news"))} - selected={activePanel === "news"} - data-hook="navigation-news-button" - > - - - } - > - News - - - ) -} - -export default Sidebar diff --git a/packages/web-console/src/store/Console/actions.ts b/packages/web-console/src/store/Console/actions.ts index 8ba52e370..8c6dda3ef 100644 --- a/packages/web-console/src/store/Console/actions.ts +++ b/packages/web-console/src/store/Console/actions.ts @@ -42,9 +42,9 @@ const setConfig = (payload: ConsoleConfigShape): ConsoleAction => ({ type: ConsoleAT.SET_CONFIG, }) -const setActivePanel = (panel: Panel): ConsoleAction => ({ +const setActiveSidebar = (panel: Panel): ConsoleAction => ({ payload: panel, - type: ConsoleAT.SET_ACTIVE_PANEL, + type: ConsoleAT.SET_ACTIVE_SIDEBAR, }) const toggleSideMenu = (): ConsoleAction => ({ @@ -56,5 +56,5 @@ export default { refreshAuthToken, setConfig, toggleSideMenu, - setActivePanel, + setActiveSidebar, } diff --git a/packages/web-console/src/store/Console/reducers.ts b/packages/web-console/src/store/Console/reducers.ts index dd223c3e4..81ed3ea71 100644 --- a/packages/web-console/src/store/Console/reducers.ts +++ b/packages/web-console/src/store/Console/reducers.ts @@ -31,7 +31,7 @@ import { export const initialState: ConsoleStateShape = { sideMenuOpened: false, - activePanel: "console", + activeSidebar: undefined, } export const defaultConfig: ConsoleConfigShape = { @@ -62,10 +62,10 @@ const _console = ( } } - case ConsoleAT.SET_ACTIVE_PANEL: { + case ConsoleAT.SET_ACTIVE_SIDEBAR: { return { ...state, - activePanel: action.payload, + activeSidebar: action.payload, } } diff --git a/packages/web-console/src/store/Console/selectors.ts b/packages/web-console/src/store/Console/selectors.ts index 52cbb4331..619ae8f7e 100644 --- a/packages/web-console/src/store/Console/selectors.ts +++ b/packages/web-console/src/store/Console/selectors.ts @@ -1,4 +1,3 @@ -import { Panel } from "./types" /******************************************************************************* * ___ _ ____ ____ * / _ \ _ _ ___ ___| |_| _ \| __ ) @@ -22,7 +21,7 @@ import { Panel } from "./types" * limitations under the License. * ******************************************************************************/ -import { ConsoleConfigShape, StoreShape } from "types" +import { ConsoleConfigShape, StoreShape, Panel } from "types" import { defaultConfig } from "./reducers" @@ -32,11 +31,11 @@ const getConfig: (store: StoreShape) => ConsoleConfigShape = (store) => const getSideMenuOpened: (store: StoreShape) => boolean = (store) => store.console.sideMenuOpened -const getActivePanel: (store: StoreShape) => Panel = (store) => - store.console.activePanel +const getActiveSidebar: (store: StoreShape) => Panel = (store) => + store.console.activeSidebar export default { getConfig, getSideMenuOpened, - getActivePanel, + getActiveSidebar, } diff --git a/packages/web-console/src/store/Console/types.ts b/packages/web-console/src/store/Console/types.ts index 44c0ae671..0cf798784 100644 --- a/packages/web-console/src/store/Console/types.ts +++ b/packages/web-console/src/store/Console/types.ts @@ -33,7 +33,7 @@ export type QueryGroup = { queries: Query[] } -export type Panel = "console" | "settings" | "news" | "import" | "create" +export type Panel = "news" | "create" | undefined export type ConsoleConfigShape = Readonly<{ githubBanner: boolean @@ -44,7 +44,7 @@ export type ConsoleConfigShape = Readonly<{ export type ConsoleStateShape = Readonly<{ config?: ConsoleConfigShape sideMenuOpened: boolean - activePanel: Panel + activeSidebar: Panel }> export enum ConsoleAT { @@ -52,7 +52,7 @@ export enum ConsoleAT { REFRESH_AUTH_TOKEN = "CONSOLE/REFRESH_AUTH_TOKEN", SET_CONFIG = "CONSOLE/SET_CONFIG", TOGGLE_SIDE_MENU = "CONSOLE/TOGGLE_SIDE_MENU", - SET_ACTIVE_PANEL = "CONSOLE/SET_ACTIVE_PANEL", + SET_ACTIVE_SIDEBAR = "CONSOLE/SET_ACTIVE_SIDEBAR", } export type BootstrapAction = Readonly<{ @@ -73,9 +73,9 @@ type ToggleSideMenuAction = Readonly<{ type: ConsoleAT.TOGGLE_SIDE_MENU }> -type SetActivePanelAction = Readonly<{ +type setActiveSidebarAction = Readonly<{ payload: Panel - type: ConsoleAT.SET_ACTIVE_PANEL + type: ConsoleAT.SET_ACTIVE_SIDEBAR }> export type ConsoleAction = @@ -83,4 +83,4 @@ export type ConsoleAction = | RefreshAuthTokenAction | SetConfigAction | ToggleSideMenuAction - | SetActivePanelAction + | setActiveSidebarAction