From 46cc4d56d8045d6092f7fc27bbeb55fc90002b19 Mon Sep 17 00:00:00 2001 From: Maciej Bodek Date: Sat, 4 Nov 2023 10:53:43 +0100 Subject: [PATCH] Redux: add active top panel state --- packages/web-console/src/scenes/Console/index.tsx | 13 +++++++++---- packages/web-console/src/store/Console/actions.ts | 6 ++++++ packages/web-console/src/store/Console/reducers.ts | 8 ++++++++ packages/web-console/src/store/Console/selectors.ts | 12 +++++++++++- packages/web-console/src/store/Console/types.ts | 10 ++++++++++ 5 files changed, 44 insertions(+), 5 deletions(-) diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx index d15f0a604..9bf743060 100644 --- 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={ + onClick={() => { + dispatch( + actions.console.setActiveTopPanel( + resultsSplitterBasis === 0 ? "tables" : undefined, + ), + ) updateSettings( StoreKey.RESULTS_SPLITTER_BASIS, resultsSplitterBasis === 0 ? 300 : 0, ) - } + }} selected={resultsSplitterBasis !== 0} > diff --git a/packages/web-console/src/store/Console/actions.ts b/packages/web-console/src/store/Console/actions.ts index b71c4a4f0..e586cc8ad 100644 --- 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 index 7cf4777ad..d11b0b5b3 100644 --- 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 index bf2937c34..7ee6f5abf 100644 --- 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 index 7371e5803..665cc038a 100644 --- 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