Don't rerun dashcard queries when switching tabs without parameter changes (#40783) (#40823)

* Add E2E test

* Move `getDatasetQueryParams` to `data-fetching.js`

* Use `null` as a parameter value when missing

* Fix missing default `datasetQuery`

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

e2e/test/scenarios/dashboard/reproductions/39863-redundant-queries-on-tab-change.cy.spec.js

+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import { ORDERS_QUESTION_ID } from "e2e/support/cypress_sample_instance_data";
+import {
+  createDashboardWithTabs,
+  goToTab,
+  popover,
+  restore,
+  visitDashboard,
+} from "e2e/support/helpers";
+import { createMockDashboardCard } from "metabase-types/api/mocks";
+
+const { ORDERS } = SAMPLE_DATABASE;
+
+const TAB_1 = { id: 1, name: "Tab 1" };
+const TAB_2 = { id: 2, name: "Tab 2" };
+
+const DATE_FILER = {
+  id: "2",
+  name: "Date filter",
+  slug: "filter-date",
+  type: "date/all-options",
+};
+
+const CREATED_AT_FIELD_REF = [
+  "field",
+  ORDERS.CREATED_AT,
+  { "base-type": "type/DateTime" },
+];
+
+const COMMON_DASHCARD_INFO = {
+  card_id: ORDERS_QUESTION_ID,
+  parameter_mappings: [
+    {
+      parameter_id: DATE_FILER.id,
+      card_id: ORDERS_QUESTION_ID,
+      target: ["dimension", CREATED_AT_FIELD_REF],
+    },
+  ],
+  size_x: 10,
+  size_y: 4,
+};
+
+describe("issue 39863", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+    cy.intercept("POST", "/api/dashboard/*/dashcard/*/card/*/query").as(
+      "dashcardQuery",
+    );
+  });
+
+  it("should not rerun queries when switching tabs and there are no parameter changes", () => {
+    createDashboardWithTabs({
+      tabs: [TAB_1, TAB_2],
+      parameters: [DATE_FILER],
+      dashcards: [
+        createMockDashboardCard({
+          ...COMMON_DASHCARD_INFO,
+          id: -1,
+          dashboard_tab_id: TAB_1.id,
+        }),
+        createMockDashboardCard({
+          ...COMMON_DASHCARD_INFO,
+          id: -2,
+          dashboard_tab_id: TAB_2.id,
+        }),
+      ],
+    }).then(dashboard => visitDashboard(dashboard.id));
+
+    // Initial query for 1st tab
+    cy.get("@dashcardQuery.all").should("have.length", 1);
+
+    // Initial query for 2nd tab
+    goToTab(TAB_2.name);
+    cy.wait("@dashcardQuery");
+    cy.get("@dashcardQuery.all").should("have.length", 2);
+
+    // No parameters change, no query rerun
+    goToTab(TAB_1.name);
+    cy.wait("@dashcardQuery");
+    cy.get("@dashcardQuery.all").should("have.length", 2);
+
+    // Rerun 1st tab query with new parameters
+    setDateFilter();
+    cy.wait("@dashcardQuery");
+    cy.get("@dashcardQuery.all").should("have.length", 3);
+
+    // Rerun 2nd tab query with new parameters
+    goToTab(TAB_2.name);
+    cy.wait("@dashcardQuery");
+    cy.get("@dashcardQuery.all").should("have.length", 4);
+
+    // No parameters change, no query rerun
+    goToTab(TAB_1.name);
+    goToTab(TAB_2.name);
+    cy.get("@dashcardQuery.all").should("have.length", 4);
+  });
+});
+
+function setDateFilter() {
+  cy.findByLabelText("Date filter").click();
+  popover()
+    .findByText(/Last 12 months/i)
+    .click();
+}

frontend/src/metabase/dashboard/actions/data-fetching.js

@@ -45,7 +45,6 @@ import {
   getAllDashboardCards,
   getDashboardType,
   fetchDataOrError,
-  getDatasetQueryParams,
   getCurrentTabDashboardCards,
 } from "../utils";
 
@@ -616,3 +615,16 @@ export const markCardAsSlow = createAction(MARK_CARD_AS_SLOW, card => ({
   id: card.id,
   result: true,
 }));
+
+function getDatasetQueryParams(datasetQuery = {}) {
+  const { type, query, native, parameters = [] } = datasetQuery;
+  return {
+    type,
+    query,
+    native,
+    parameters: parameters.map(parameter => ({
+      ...parameter,
+      value: parameter.value ?? null,
+    })),
+  };
+}

frontend/src/metabase/dashboard/utils.ts

@@ -22,9 +22,7 @@ import type {
   QuestionDashboardCard,
   Database,
   Dataset,
-  NativeDatasetQuery,
   Parameter,
-  StructuredDatasetQuery,
   ActionDashboardCard,
   EmbedDataset,
   BaseDashboardCard,
@@ -199,14 +197,6 @@ export async function fetchDataOrError<T>(dataPromise: Promise<T>) {
   }
 }
 
-export function getDatasetQueryParams(
-  datasetQuery: Partial<StructuredDatasetQuery> &
-    Partial<NativeDatasetQuery> = {},
-) {
-  const { type, query, native, parameters = [] } = datasetQuery;
-  return { type, query, native, parameters };
-}
-
 export function isDashcardLoading(
   dashcard: BaseDashboardCard,
   dashcardsData: DashCardDataMap,