feat(web-console): Add URL deep-linking for UI panels

packages/browser-tests/cypress/integration/console/panel.spec.js

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+
+const baseUrl = "http://localhost:9999";
+
+describe("URL deep linking", () => {
+  it("should show import panel", () => {
+    cy.visit(`${baseUrl}/?bottomPanel=import`);
+    cy.get('[data-hook="import-dropbox"]').should("be.visible");
+    cy.matchImageSnapshot();
+  });
+
+  it("should show news panel", () => {
+    cy.visit(`${baseUrl}/?sidebar=news`);
+    cy.get('[data-hook="news-content"]').should("be.visible");
+    cy.get('[data-hook="news-panel-button"]').click();
+    cy.url().should("not.contain", "sidebar=news");
+    cy.matchImageSnapshot();
+  });
+
+  it("should show create table panel", () => {
+    cy.visit(`${baseUrl}/?sidebar=create`);
+    cy.get('[data-hook="schema-content"]').should("be.visible");
+    cy.get('[data-hook="create-table-panel-button"]').click();
+    cy.url().should("not.contain", "sidebar=create");
+    cy.matchImageSnapshot();
+  });
+});

packages/web-console/src/components/TableSchemaDialog/dialog.tsx

@@ -199,7 +199,10 @@ export const Dialog = ({
         }
       }}
     >
-      <StyledContentWrapper mode={action === "add" ? "side" : "modal"}>
+      <StyledContentWrapper
+        mode={action === "add" ? "side" : "modal"}
+        data-hook="schema-content"
+      >
         <Form<SchemaFormValues>
           name="table-schema"
           defaultValues={defaults}

packages/web-console/src/scenes/Console/index.tsx

@@ -84,13 +84,16 @@ const Console = () => {
   const importRef = React.useRef<HTMLDivElement>(null)
   const horizontalSplitterRef = React.useRef<AllotmentHandle>(null)
 
-  const showPanel = (panel: BottomPanel) => {
+  const showPanel = (panel: BottomPanel | undefined) => {
     if (resultRef.current) {
-      resultRef.current.style.display = panel === "result" ? "flex" : "none"
+      resultRef.current.style.display =
+        panel === "result" && result ? "flex" : "none"
     }
     if (zeroStateRef.current) {
       zeroStateRef.current.style.display =
-        panel === "zeroState" ? "flex" : "none"
+        panel === "zeroState" || (panel === "result" && !result)
+          ? "flex"
+          : "none"
     }
     if (importRef.current) {
       importRef.current.style.display = panel === "import" ? "flex" : "none"
@@ -100,7 +103,7 @@ const Console = () => {
   useEffect(() => {
     if (resultRef.current && result) {
       dispatch(actions.console.setActiveBottomPanel("result"))
-    } else if (zeroStateRef.current) {
+    } else if (activeBottomPanel === "zeroState") {
       dispatch(actions.console.setActiveBottomPanel("zeroState"))
     }
   }, [result])

packages/web-console/src/scenes/News/index.tsx

@@ -197,7 +197,7 @@ const News = () => {
         />
       }
     >
-      <Drawer.ContentWrapper mode="side">
+      <Drawer.ContentWrapper mode="side" data-hook="news-content">
         <Items>
           {isLoading && !enterpriseNews && (
             <Loading>

packages/web-console/src/store/Console/actions.ts

@@ -44,16 +44,18 @@ const setConfig = (payload: ConsoleConfigShape): ConsoleAction => ({
   type: ConsoleAT.SET_CONFIG,
 })
 
-const setActiveTopPanel = (panel: TopPanel): ConsoleAction => ({
+const setActiveTopPanel = (panel: TopPanel | undefined): ConsoleAction => ({
   payload: panel,
   type: ConsoleAT.SET_ACTIVE_TOP_PANEL,
 })
-const setActiveSidebar = (panel: Sidebar): ConsoleAction => ({
+const setActiveSidebar = (panel: Sidebar | undefined): ConsoleAction => ({
   payload: panel,
   type: ConsoleAT.SET_ACTIVE_SIDEBAR,
 })
 
-const setActiveBottomPanel = (panel: BottomPanel): ConsoleAction => ({
+const setActiveBottomPanel = (
+  panel: BottomPanel | undefined,
+): ConsoleAction => ({
   payload: panel,
   type: ConsoleAT.SET_ACTIVE_BOTTOM_PANEL,
 })

packages/web-console/src/store/Console/reducers.ts

@@ -27,13 +27,44 @@ import {
   ConsoleAction,
   ConsoleAT,
   ConsoleStateShape,
-} from "../../types"
+  TopPanel,
+  Sidebar,
+  BottomPanel,
+} from "./types"
 
-export const initialState: ConsoleStateShape = {
-  sideMenuOpened: false,
-  activeTopPanel: "tables",
-  activeSidebar: undefined,
-  activeBottomPanel: "zeroState",
+const getValidSidebar = (sidebar?: Sidebar) =>
+  sidebar && ["create", "news"].includes(sidebar) ? sidebar : undefined
+
+const getValidTopPanel = (topPanel?: TopPanel) =>
+  topPanel && ["tables"].includes(topPanel) ? topPanel : undefined
+
+const getValidBottomPanel = (bottomPanel?: BottomPanel): BottomPanel =>
+  bottomPanel && ["result", "zeroState", "import"].includes(bottomPanel)
+    ? bottomPanel
+    : "zeroState"
+
+export const getInitialState = (): ConsoleStateShape => {
+  const url = new URL(window.location.href)
+  const bottomPanel = (url.searchParams.get("bottomPanel") ?? "") as BottomPanel
+  const sidebar = (url.searchParams.get("sidebar") ?? "") as Sidebar
+  const topPanel = (url.searchParams.get("topPanel") ?? "") as TopPanel
+
+  return {
+    sideMenuOpened: getValidSidebar(sidebar) !== undefined,
+    activeTopPanel: getValidTopPanel(topPanel),
+    activeSidebar: getValidSidebar(sidebar),
+    activeBottomPanel: getValidBottomPanel(bottomPanel),
+  } as ConsoleStateShape
+}
+
+const setUrlParam = (key: string, value?: TopPanel | BottomPanel | Sidebar) => {
+  const url = new URL(window.location.href)
+  if (value) {
+    url.searchParams.set(key, value)
+  } else {
+    url.searchParams.delete(key)
+  }
+  window.history.replaceState({}, "", url.toString())
 }
 
 export const defaultConfig: ConsoleConfigShape = {
@@ -43,9 +74,10 @@ export const defaultConfig: ConsoleConfigShape = {
 }
 
 const _console = (
-  state = initialState,
+  state = getInitialState(),
   action: ConsoleAction,
 ): ConsoleStateShape => {
+  const url = new URL(window.location.href)
   switch (action.type) {
     case ConsoleAT.SET_CONFIG: {
       return {
@@ -65,20 +97,23 @@ const _console = (
     }
 
     case ConsoleAT.SET_ACTIVE_TOP_PANEL: {
+      setUrlParam("topPanel", getValidTopPanel(action.payload))
       return {
         ...state,
         activeTopPanel: action.payload,
       }
     }
 
     case ConsoleAT.SET_ACTIVE_SIDEBAR: {
+      setUrlParam("sidebar", getValidSidebar(action.payload))
       return {
         ...state,
         activeSidebar: action.payload,
       }
     }
 
     case ConsoleAT.SET_ACTIVE_BOTTOM_PANEL: {
+      setUrlParam("bottomPanel", getValidBottomPanel(action.payload))
       return {
         ...state,
         activeBottomPanel: action.payload,

packages/web-console/src/store/Console/selectors.ts

@@ -37,14 +37,16 @@ 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 getActiveTopPanel: (store: StoreShape) => TopPanel | undefined = (
+  store,
+) => store.console.activeTopPanel
 
-const getActiveSidebar: (store: StoreShape) => Sidebar = (store) =>
+const getActiveSidebar: (store: StoreShape) => Sidebar | undefined = (store) =>
   store.console.activeSidebar
 
-const getActiveBottomPanel: (store: StoreShape) => BottomPanel = (store) =>
-  store.console.activeBottomPanel
+const getActiveBottomPanel: (store: StoreShape) => BottomPanel | undefined = (
+  store,
+) => store.console.activeBottomPanel
 
 export default {
   getConfig,

packages/web-console/src/store/Console/types.ts

@@ -33,9 +33,9 @@ export type QueryGroup = {
   queries: Query[]
 }
 
-export type TopPanel = "tables" | undefined
+export type TopPanel = "tables"
 
-export type Sidebar = "news" | "create" | undefined
+export type Sidebar = "news" | "create"
 
 export type BottomPanel = "result" | "zeroState" | "import"
 
@@ -48,9 +48,9 @@ export type ConsoleConfigShape = Readonly<{
 export type ConsoleStateShape = Readonly<{
   config?: ConsoleConfigShape
   sideMenuOpened: boolean
-  activeTopPanel: TopPanel
-  activeSidebar: Sidebar
-  activeBottomPanel: BottomPanel
+  activeTopPanel?: TopPanel
+  activeSidebar?: Sidebar
+  activeBottomPanel?: BottomPanel
 }>
 
 export enum ConsoleAT {
@@ -82,17 +82,17 @@ type ToggleSideMenuAction = Readonly<{
 }>
 
 type setActiveTopPanelAction = Readonly<{
-  payload: TopPanel
+  payload?: TopPanel
   type: ConsoleAT.SET_ACTIVE_TOP_PANEL
 }>
 
 type setActiveSidebarAction = Readonly<{
-  payload: Sidebar
+  payload?: Sidebar
   type: ConsoleAT.SET_ACTIVE_SIDEBAR
 }>
 
 type setActiveBottomPanelAction = Readonly<{
-  payload: BottomPanel
+  payload?: BottomPanel
   type: ConsoleAT.SET_ACTIVE_BOTTOM_PANEL
 }>
 

packages/web-console/src/store/reducers.ts

@@ -24,9 +24,7 @@
 
 import { combineReducers } from "redux"
 
-import _console, {
-  initialState as consoleInitialState,
-} from "./Console/reducers"
+import _console, { getInitialState } from "./Console/reducers"
 
 import query, { initialState as queryInitialState } from "./Query/reducers"
 import telemetry, {
@@ -40,7 +38,7 @@ const rootReducer = combineReducers({
 })
 
 export const initialState = {
-  console: consoleInitialState,
+  console: getInitialState(),
   query: queryInitialState,
   telemetry: telemetryInitialState,
 }