feat: Manage active sidebar tab via Zustand

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx

@@ -9,7 +9,7 @@ import { styled } from "@mui/material/styles";
 import Tabs from "@mui/material/Tabs";
 import Tooltip from "@mui/material/Tooltip";
 import { hasFeatureFlag } from "lib/featureFlags";
-import React, { useState } from "react";
+import React from "react";
 import { rootFlowPath } from "routes/utils";
 import Permission from "ui/editor/Permission";
 import Reset from "ui/icons/Reset";
@@ -22,7 +22,7 @@ import { PublishFlowButton } from "./Publish/PublishFlowButton";
 import Search from "./Search";
 import StyledTab from "./StyledTab";
 
-type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";
+export type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";
 
 const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
 
@@ -104,14 +104,19 @@ const TabList = styled(Box)(({ theme }) => ({
 }));
 
 const Sidebar: React.FC = React.memo(() => {
-  const [resetPreview, isFlowPublished] = useStore((state) => [
-    state.resetPreview,
-    state.isFlowPublished,
-  ]);
-
-  const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
+  const [resetPreview, isFlowPublished, activeTab, setActiveTab] = useStore(
+    (state) => [
+      state.resetPreview,
+      state.isFlowPublished,
+      state.activeSidebarTab,
+      state.setActiveSidebarTab,
+    ],
+  );
 
-  const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => {
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    newValue: SidebarTabs,
+  ) => {
     setActiveTab(newValue);
   };
 

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -25,6 +25,7 @@ import omitBy from "lodash/omitBy";
 import { customAlphabet } from "nanoid-good";
 import en from "nanoid-good/locale/en";
 import { type } from "ot-json0";
+import { SidebarTabs } from "pages/FlowEditor/components/Sidebar";
 import type { StateCreator } from "zustand";
 
 import { FlowLayout } from "../../components/Flow";
@@ -48,6 +49,8 @@ export interface EditorUIStore {
   togglePreview: () => void;
   isTestEnvBannerVisible: boolean;
   hideTestEnvBanner: () => void;
+  activeSidebarTab: SidebarTabs;
+  setActiveSidebarTab: (tab: SidebarTabs) => void;
 }
 
 export const editorUIStore: StateCreator<
@@ -67,6 +70,10 @@ export const editorUIStore: StateCreator<
   isTestEnvBannerVisible: !window.location.href.includes(".uk"),
 
   hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }),
+
+  activeSidebarTab: "PreviewBrowser",
+
+  setActiveSidebarTab: (tab) => set({ activeSidebarTab: tab }),
 });
 
 interface PublishFlowResponse {