Redux: add active top panel state

questdb · Nov 4, 2023 · 46cc4d5 · 46cc4d5
1 parent b4e9b40
commit 46cc4d5
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
@@ -12,12 +12,12 @@ import { useLocalStorage } from "../../providers/LocalStorageProvider"
 import { StoreKey } from "../../utils/localStorage/types"
 import { useSelector } from "react-redux"
 import { actions, selectors } from "../../store"
-import { Tooltip } from "../../components/Tooltip"
+import { Tooltip } from "../../components"
 import { Sidebar } from "../../components/Sidebar"
 import { Navigation } from "../../components/Sidebar/navigation"
 import { Database2, Grid, PieChart, Upload2 } from "@styled-icons/remix-line"
 import { ResultViewMode } from "./types"
-import { BUTTON_ICON_SIZE } from "../../consts/index"
+import { BUTTON_ICON_SIZE } from "../../consts"
 import { PrimaryToggleButton } from "../../components"
 import { Import } from "./import"
 import { BottomPanel } from "../../store/Console/types"
@@ -130,12 +130,17 @@ const Console = () => {
               trigger={
                 <Navigation
                   direction="left"
-                  onClick={() =>
+                  onClick={() => {
+                    dispatch(
+                      actions.console.setActiveTopPanel(
+                        resultsSplitterBasis === 0 ? "tables" : undefined,
+                      ),
+                    )
                     updateSettings(
                       StoreKey.RESULTS_SPLITTER_BASIS,
                       resultsSplitterBasis === 0 ? 300 : 0,
                     )
-                  }
+                  }}
                   selected={resultsSplitterBasis !== 0}
                 >
                   <Database2 size={BUTTON_ICON_SIZE} />

diff --git a/packages/web-console/src/store/Console/actions.ts b/packages/web-console/src/store/Console/actions.ts
@@ -25,6 +25,7 @@ import {
   ConsoleConfigShape,
   ConsoleAction,
   ConsoleAT,
+  TopPanel,
   Sidebar,
   BottomPanel,
 } from "./types"
@@ -43,6 +44,10 @@ const setConfig = (payload: ConsoleConfigShape): ConsoleAction => ({
   type: ConsoleAT.SET_CONFIG,
 })
 
+const setActiveTopPanel = (panel: TopPanel): ConsoleAction => ({
+  payload: panel,
+  type: ConsoleAT.SET_ACTIVE_TOP_PANEL,
+})
 const setActiveSidebar = (panel: Sidebar): ConsoleAction => ({
   payload: panel,
   type: ConsoleAT.SET_ACTIVE_SIDEBAR,
@@ -62,6 +67,7 @@ export default {
   refreshAuthToken,
   setConfig,
   toggleSideMenu,
+  setActiveTopPanel,
   setActiveSidebar,
   setActiveBottomPanel,
 }
diff --git a/packages/web-console/src/store/Console/reducers.ts b/packages/web-console/src/store/Console/reducers.ts
@@ -31,6 +31,7 @@ import {
 
 export const initialState: ConsoleStateShape = {
   sideMenuOpened: false,
+  activeTopPanel: "tables",
   activeSidebar: undefined,
   activeBottomPanel: "zeroState",
 }
@@ -63,6 +64,13 @@ const _console = (
       }
     }
 
+    case ConsoleAT.SET_ACTIVE_TOP_PANEL: {
+      return {
+        ...state,
+        activeTopPanel: action.payload,
+      }
+    }
+
     case ConsoleAT.SET_ACTIVE_SIDEBAR: {
       return {
         ...state,

diff --git a/packages/web-console/src/store/Console/selectors.ts b/packages/web-console/src/store/Console/selectors.ts
@@ -21,7 +21,13 @@
  *  limitations under the License.
  *
  ******************************************************************************/
-import { ConsoleConfigShape, StoreShape, Sidebar, BottomPanel } from "types"
+import {
+  ConsoleConfigShape,
+  StoreShape,
+  Sidebar,
+  BottomPanel,
+  TopPanel,
+} from "types"
 
 import { defaultConfig } from "./reducers"
 
@@ -31,6 +37,9 @@ const getConfig: (store: StoreShape) => ConsoleConfigShape = (store) =>
 const getSideMenuOpened: (store: StoreShape) => boolean = (store) =>
   store.console.sideMenuOpened
 
+const getActiveTopPanel: (store: StoreShape) => TopPanel = (store) =>
+  store.console.activeTopPanel
+
 const getActiveSidebar: (store: StoreShape) => Sidebar = (store) =>
   store.console.activeSidebar
 
@@ -40,6 +49,7 @@ const getActiveBottomPanel: (store: StoreShape) => BottomPanel = (store) =>
 export default {
   getConfig,
   getSideMenuOpened,
+  getActiveTopPanel,
   getActiveSidebar,
   getActiveBottomPanel,
 }
diff --git a/packages/web-console/src/store/Console/types.ts b/packages/web-console/src/store/Console/types.ts
@@ -33,6 +33,8 @@ export type QueryGroup = {
   queries: Query[]
 }
 
+export type TopPanel = "tables" | undefined
+
 export type Sidebar = "news" | "create" | undefined
 
 export type BottomPanel = "result" | "zeroState" | "import"
@@ -46,6 +48,7 @@ export type ConsoleConfigShape = Readonly<{
 export type ConsoleStateShape = Readonly<{
   config?: ConsoleConfigShape
   sideMenuOpened: boolean
+  activeTopPanel: TopPanel
   activeSidebar: Sidebar
   activeBottomPanel: BottomPanel
 }>
@@ -55,6 +58,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_TOP_PANEL = "CONSOLE/SET_ACTIVE_TOP_PANEL",
   SET_ACTIVE_SIDEBAR = "CONSOLE/SET_ACTIVE_SIDEBAR",
   SET_ACTIVE_BOTTOM_PANEL = "CONSOLE/SET_ACTIVE_BOTTOM_PANEL",
 }
@@ -77,6 +81,11 @@ type ToggleSideMenuAction = Readonly<{
   type: ConsoleAT.TOGGLE_SIDE_MENU
 }>
 
+type setActiveTopPanelAction = Readonly<{
+  payload: TopPanel
+  type: ConsoleAT.SET_ACTIVE_TOP_PANEL
+}>
+
 type setActiveSidebarAction = Readonly<{
   payload: Sidebar
   type: ConsoleAT.SET_ACTIVE_SIDEBAR
@@ -92,5 +101,6 @@ export type ConsoleAction =
   | RefreshAuthTokenAction
   | SetConfigAction
   | ToggleSideMenuAction
+  | setActiveTopPanelAction
   | setActiveSidebarAction
   | setActiveBottomPanelAction