refactor `useDashboardTabs` and `useSyncURLSlug` to not nullify `selectedTabId` on unmount (#32150)

* refactor `useDashboardTabs` and `useSyncURLSlug` to not nullify `selectedTabId` on unmount

* remove unused code

* fix slug not updating in edit mode

* add unit test case

e2e/test/scenarios/sharing/public-dashboard.cy.spec.js

@@ -60,6 +60,8 @@ describe("scenarios > public > dashboard", () => {
 
     cy.request("PUT", "/api/setting/enable-public-sharing", { value: true });
 
+    cy.intercept("/api/dashboard/*/public_link").as("publicLink");
+
     cy.createNativeQuestionAndDashboard({
       questionDetails,
       dashboardDetails,
@@ -100,6 +102,8 @@ describe("scenarios > public > dashboard", () => {
       .findByRole("switch")
       .check();
 
+    cy.wait("@publicLink");
+
     cy.findByRole("heading", { name: "Public link" })
       .parent()
       .findByDisplayValue(/^http/)

frontend/src/metabase/dashboard/components/DashboardTabs/DashboardTabs.unit.spec.tsx

-import { Route } from "react-router";
+import { Link, Route } from "react-router";
 import userEvent from "@testing-library/user-event";
 import type { Location } from "history";
 
@@ -8,6 +8,8 @@ import { DashboardOrderedTab } from "metabase-types/api";
 import { getDefaultTab, resetTempTabId } from "metabase/dashboard/actions";
 import { INPUT_WRAPPER_TEST_ID } from "metabase/core/components/TabButton";
 
+import { useSelector } from "metabase/lib/redux";
+import { getSelectedTabId } from "metabase/dashboard/selectors";
 import { DashboardTabs } from "./DashboardTabs";
 import { TEST_DASHBOARD_STATE } from "./test-utils";
 import { useDashboardTabs } from "./use-dashboard-tabs";
@@ -32,7 +34,7 @@ function setup({
     },
   };
 
-  const TestComponent = ({ location }: { location: Location }) => {
+  const DashboardComponent = ({ location }: { location: Location }) => {
     const { selectedTabId } = useDashboardTabs({ location });
 
     return (
@@ -41,12 +43,28 @@ function setup({
         <span>Selected tab id is {selectedTabId}</span>
         <br />
         <span>Path is {location.pathname + location.search}</span>
+        <Link to="/someotherpath">Navigate away</Link>
+      </>
+    );
+  };
+
+  const OtherComponent = () => {
+    const selectedTabId = useSelector(getSelectedTabId);
+
+    return (
+      <>
+        <span>Another route</span>
+        <br />
+        <span>Selected tab id is {selectedTabId}</span>
       </>
     );
   };
 
   const { store } = renderWithProviders(
-    <Route path="dashboard/:slug(/:tabSlug)" component={TestComponent} />,
+    <>
+      <Route path="dashboard/:slug(/:tabSlug)" component={DashboardComponent} />
+      <Route path="someotherpath" component={OtherComponent} />
+    </>,
     {
       storeInitialState: { dashboard },
       initialRoute: slug ? `/dashboard/1?tab=${slug}` : "/dashboard/1",
@@ -324,4 +342,17 @@ describe("DashboardTabs", () => {
       });
     });
   });
+
+  describe("when navigating away from dashboard", () => {
+    it("should preserve selected tab id", () => {
+      setup();
+
+      selectTab(2);
+      expect(screen.getByText("Selected tab id is 2")).toBeInTheDocument();
+
+      screen.getByText("Navigate away").click();
+      expect(screen.getByText("Another route")).toBeInTheDocument();
+      expect(screen.getByText("Selected tab id is 2")).toBeInTheDocument();
+    });
+  });
 });

frontend/src/metabase/dashboard/components/DashboardTabs/use-dashboard-tabs.ts

-import { useMount, useUnmount } from "react-use";
+import { useMount } from "react-use";
 import { t } from "ttag";
 import type { UniqueIdentifier } from "@dnd-kit/core";
 import type { Location } from "history";
@@ -28,7 +28,6 @@ export function useDashboardTabs({ location }: { location: Location }) {
 
   useSyncURLSlug({ location });
   useMount(() => dispatch(initTabs({ slug: parseSlug({ location }) })));
-  useUnmount(() => dispatch(selectTab({ tabId: null })));
 
   const deleteTab = (tabId: SelectedTabId) => {
     const tabName = tabs.find(({ id }) => id === tabId)?.name;

frontend/src/metabase/dashboard/components/DashboardTabs/use-sync-url-slug.ts

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { usePrevious } from "react-use";
 import { push, replace } from "react-router-redux";
 import type { Location } from "history";
@@ -52,6 +52,8 @@ function useUpdateURLSlug({ location }: { location: Location }) {
 }
 
 export function useSyncURLSlug({ location }: { location: Location }) {
+  const [tabInitialized, setTabInitialized] = useState(false);
+
   const slug = parseSlug({ location });
   const tabs = useSelector(getTabs);
   const selectedTabId = useSelector(getSelectedTabId);
@@ -71,25 +73,30 @@ export function useSyncURLSlug({ location }: { location: Location }) {
     }
 
     const tabSelected = selectedTabId !== prevSelectedTabId;
-    const tabInitialized = selectedTabId != null && prevSelectedTabId == null;
     const tabRenamed =
       tabs.find(t => t.id === selectedTabId)?.name !==
       prevTabs?.find(t => t.id === selectedTabId)?.name;
     const penultimateTabDeleted = tabs.length === 1 && prevTabs?.length === 2;
 
     if (tabSelected || tabRenamed || penultimateTabDeleted) {
+      const newSlug =
+        tabs.length <= 1
+          ? ""
+          : getSlug({
+              tabId: selectedTabId,
+              name: tabs.find(t => t.id === selectedTabId)?.name,
+            });
       updateURLSlug({
-        slug:
-          tabs.length <= 1
-            ? ""
-            : getSlug({
-                tabId: selectedTabId,
-                name: tabs.find(t => t.id === selectedTabId)?.name,
-              }),
-        shouldReplace: tabInitialized,
+        slug: newSlug,
+        shouldReplace: !tabInitialized,
       });
+
+      if (newSlug) {
+        setTabInitialized(true);
+      }
     }
   }, [
+    tabInitialized,
     slug,
     selectedTabId,
     tabs,