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"))}
- >
-
-
- {/* 
*/}
+
)
}
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"))}>
-
-
-
- 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