Fix dashcards from other tabs displayed after leaving editing mode (#40696) (#40707)

Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com>

e2e/test/scenarios/dashboard/reproductions/40695-tab-dashcards-display.cy.spec.js

+import {
+  ORDERS_COUNT_QUESTION_ID,
+  ORDERS_QUESTION_ID,
+} from "e2e/support/cypress_sample_instance_data";
+import {
+  createDashboardWithTabs,
+  dashboardGrid,
+  editDashboard,
+  getDashboardCards,
+  restore,
+  visitDashboard,
+} from "e2e/support/helpers";
+import { createMockDashboardCard } from "metabase-types/api/mocks";
+
+const TAB_1 = {
+  id: 1,
+  name: "Tab 1",
+};
+const TAB_2 = {
+  id: 2,
+  name: "Tab 2",
+};
+
+describe("issue 40695", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should not show dashcards from other tabs after entering and leaving editing mode", () => {
+    createDashboardWithTabs({
+      tabs: [TAB_1, TAB_2],
+      dashcards: [
+        createMockDashboardCard({
+          id: -1,
+          dashboard_tab_id: TAB_1.id,
+          size_x: 10,
+          size_y: 4,
+          card_id: ORDERS_QUESTION_ID,
+        }),
+        createMockDashboardCard({
+          id: -2,
+          dashboard_tab_id: TAB_2.id,
+          size_x: 10,
+          size_y: 4,
+          card_id: ORDERS_COUNT_QUESTION_ID,
+        }),
+      ],
+    }).then(dashboard => visitDashboard(dashboard.id));
+
+    editDashboard();
+    cy.findByTestId("edit-bar").button("Cancel").click();
+
+    dashboardGrid().within(() => {
+      cy.findByText("Orders").should("exist");
+      cy.findByText("Orders, Count").should("not.exist");
+      getDashboardCards().should("have.length", 1);
+    });
+  });
+});

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

@@ -4,7 +4,7 @@ import { push, replace } from "react-router-redux";
 import { usePrevious } from "react-use";
 import _ from "underscore";
 
-import { initTabs } from "metabase/dashboard/actions";
+import { getIdFromSlug, initTabs } from "metabase/dashboard/actions";
 import { getSelectedTabId, getTabs } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import type { SelectedTabId } from "metabase-types/store";
@@ -69,6 +69,13 @@ export function useSyncURLSlug({ location }: { location: Location }) {
     const slugChanged = slug && slug !== prevSlug;
     if (slugChanged) {
       dispatch(initTabs({ slug }));
+      const slugId = getIdFromSlug(slug);
+      const hasTabs = tabs.length > 0;
+      const isValidSlug = !!tabs.find(t => t.id === slugId);
+      if (hasTabs && !isValidSlug) {
+        const [tab] = tabs;
+        updateURLSlug({ slug: getSlug({ tabId: tab.id, name: tab.name }) });
+      }
       return;
     }
 

frontend/src/metabase/dashboard/selectors.ts

@@ -417,6 +417,13 @@ export const getTabs = createSelector([getDashboard], dashboard => {
   return dashboard.tabs?.filter(tab => !tab.isRemoved) ?? [];
 });
 
-export function getSelectedTabId(state: State) {
-  return state.dashboard.selectedTabId;
-}
+export const getSelectedTabId = createSelector(
+  [getDashboard, state => state.dashboard.selectedTabId],
+  (dashboard, selectedTabId) => {
+    if (dashboard && selectedTabId === null) {
+      return dashboard.tabs?.[0]?.id || null;
+    }
+
+    return selectedTabId;
+  },
+);