Fix broken auto-wiring when adding a new card to a dashboard (#36312)

e2e/test/scenarios/dashboard-filters/parameters.cy.spec.js

@@ -14,6 +14,10 @@ import {
   createNewTab,
   undoToast,
   setFilter,
+  visitQuestion,
+  modal,
+  dashboardParametersContainer,
+  openQuestionActions,
 } from "e2e/support/helpers";
 import {
   ORDERS_DASHBOARD_ID,
@@ -23,7 +27,8 @@ import {
 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
 
-const { ORDERS_ID, ORDERS, PRODUCTS, PRODUCTS_ID } = SAMPLE_DATABASE;
+const { ORDERS_ID, ORDERS, PRODUCTS, PRODUCTS_ID, REVIEWS_ID } =
+  SAMPLE_DATABASE;
 
 describe("scenarios > dashboard > parameters", () => {
   beforeEach(() => {
@@ -610,22 +615,24 @@ describe("scenarios > dashboard > parameters", () => {
 
     describe("when wiring parameter to all cards for a filter", () => {
       it("should automatically wire parameters to cards with matching fields", () => {
-        createDashboardWithCards([
-          {
-            card_id: ORDERS_BY_YEAR_QUESTION_ID,
-            row: 0,
-            col: 0,
-            size_x: 5,
-            size_y: 4,
-          },
-          {
-            card_id: ORDERS_COUNT_QUESTION_ID,
-            row: 0,
-            col: 4,
-            size_x: 5,
-            size_y: 4,
-          },
-        ]).then(dashboardId => {
+        createDashboardWithCards({
+          cards: [
+            {
+              card_id: ORDERS_BY_YEAR_QUESTION_ID,
+              row: 0,
+              col: 0,
+              size_x: 5,
+              size_y: 4,
+            },
+            {
+              card_id: ORDERS_COUNT_QUESTION_ID,
+              row: 0,
+              col: 4,
+              size_x: 5,
+              size_y: 4,
+            },
+          ],
+        }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -651,22 +658,24 @@ describe("scenarios > dashboard > parameters", () => {
       });
 
       it("should not automatically wire parameters to cards that already have a parameter, despite matching fields", () => {
-        createDashboardWithCards([
-          {
-            card_id: ORDERS_BY_YEAR_QUESTION_ID,
-            row: 0,
-            col: 0,
-            size_x: 5,
-            size_y: 4,
-          },
-          {
-            card_id: ORDERS_COUNT_QUESTION_ID,
-            row: 0,
-            col: 4,
-            size_x: 5,
-            size_y: 4,
-          },
-        ]).then(dashboardId => {
+        createDashboardWithCards({
+          cards: [
+            {
+              card_id: ORDERS_BY_YEAR_QUESTION_ID,
+              row: 0,
+              col: 0,
+              size_x: 5,
+              size_y: 4,
+            },
+            {
+              card_id: ORDERS_COUNT_QUESTION_ID,
+              row: 0,
+              col: 4,
+              size_x: 5,
+              size_y: 4,
+            },
+          ],
+        }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -708,22 +717,24 @@ describe("scenarios > dashboard > parameters", () => {
           name: "Products Table",
           query: { "source-table": PRODUCTS_ID, limit: 1 },
         }).then(({ body: { id: questionId } }) => {
-          createDashboardWithCards([
-            {
-              card_id: ORDERS_BY_YEAR_QUESTION_ID,
-              row: 0,
-              col: 0,
-              size_x: 5,
-              size_y: 4,
-            },
-            {
-              card_id: questionId,
-              row: 0,
-              col: 4,
-              size_x: 5,
-              size_y: 4,
-            },
-          ]).then(dashboardId => {
+          createDashboardWithCards({
+            cards: [
+              {
+                card_id: ORDERS_BY_YEAR_QUESTION_ID,
+                row: 0,
+                col: 0,
+                size_x: 5,
+                size_y: 4,
+              },
+              {
+                card_id: questionId,
+                row: 0,
+                col: 4,
+                size_x: 5,
+                size_y: 4,
+              },
+            ],
+          }).then(dashboardId => {
             visitDashboard(dashboardId);
           });
         });
@@ -763,7 +774,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboardAndCreateTab({
             dashboardId,
             save: false,
@@ -810,7 +821,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -861,7 +872,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -910,7 +921,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -956,7 +967,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -1000,7 +1011,7 @@ describe("scenarios > dashboard > parameters", () => {
           },
         ];
 
-        createDashboardWithCards(cards).then(dashboardId => {
+        createDashboardWithCards({ cards }).then(dashboardId => {
           visitDashboard(dashboardId);
         });
 
@@ -1028,6 +1039,142 @@ describe("scenarios > dashboard > parameters", () => {
         getDashboardCard(2).findByText("Select…").should("exist");
       });
     });
+
+    describe("adding cards with foreign keys to the dashboard (metabase#36275)", () => {
+      beforeEach(() => {
+        cy.intercept(
+          "POST",
+          "/api/dashboard/*/dashcard/*/card/*/query",
+          cy.spy().as("cardQueryRequest"),
+        ).as("cardQuery");
+
+        cy.createQuestion({
+          name: "Products Question",
+          query: { "source-table": PRODUCTS_ID, limit: 1 },
+        }).then(({ body: { id } }) => {
+          createDashboardWithCards({
+            dashboardName: "36275",
+            cards: [
+              {
+                card_id: id,
+                row: 0,
+                col: 0,
+              },
+            ],
+          });
+          cy.wrap(id).as("productsQuestionId");
+        });
+
+        cy.createQuestion({
+          name: "Orders Question",
+          query: { "source-table": ORDERS_ID, limit: 1 },
+        }).then(({ body: { id } }) => {
+          cy.wrap(id).as("ordersQuestionId");
+        });
+
+        cy.createQuestion({
+          name: "Reviews Question",
+          query: { "source-table": REVIEWS_ID, limit: 1 },
+        }).then(({ body: { id } }) => {
+          cy.wrap(id).as("reviewsQuestionId");
+        });
+      });
+
+      it("should autowire and filter cards with foreign keys when added to the dashboard via the sidebar", () => {
+        cy.get("@dashboardId").then(dashboardId => {
+          visitDashboard(dashboardId);
+        });
+        editDashboard();
+        setFilter("ID");
+        selectDashboardFilter(getDashboardCard(0), "ID");
+
+        addCardToDashboard(["Orders Question", "Reviews Question"]);
+
+        cy.wait("@cardQuery");
+
+        goToFilterMapping("ID");
+
+        getDashboardCard(0).findByText("Product.ID").should("exist");
+        getDashboardCard(1).findByText("Product.ID").should("exist");
+        getDashboardCard(2).findByText("Product.ID").should("exist");
+
+        saveDashboard();
+
+        dashboardParametersContainer().findByText("ID").click();
+
+        popover().within(() => {
+          cy.findByRole("textbox").type("1{enter}");
+          cy.button("Add filter").click();
+        });
+
+        cy.wait("@cardQuery");
+
+        getDashboardCard(0).within(() => {
+          getTableCell("ID", 0).should("contain", "1");
+        });
+
+        getDashboardCard(1).within(() => {
+          getTableCell("Product ID", 0).should("contain", "1");
+        });
+
+        getDashboardCard(2).within(() => {
+          getTableCell("Product ID", 0).should("contain", "1");
+        });
+      });
+
+      it("should autowire and filter cards with foreign keys when added to the dashboard via the query builder", () => {
+        cy.get("@dashboardId").then(dashboardId => {
+          visitDashboard(dashboardId);
+        });
+
+        editDashboard();
+        setFilter("ID");
+        selectDashboardFilter(getDashboardCard(0), "ID");
+        saveDashboard();
+
+        cy.get("@ordersQuestionId").then(ordersQuestionId => {
+          addQuestionFromQueryBuilder({ questionId: ordersQuestionId });
+        });
+
+        cy.get("@reviewsQuestionId").then(reviewsQuestionId => {
+          addQuestionFromQueryBuilder({
+            questionId: reviewsQuestionId,
+            saveDashboardAfterAdd: false,
+          });
+        });
+
+        cy.wait("@cardQuery");
+
+        goToFilterMapping("ID");
+
+        getDashboardCard(0).findByText("Product.ID").should("exist");
+        getDashboardCard(1).findByText("Product.ID").should("exist");
+        getDashboardCard(2).findByText("Product.ID").should("exist");
+
+        saveDashboard();
+
+        dashboardParametersContainer().findByText("ID").click();
+
+        popover().within(() => {
+          cy.findByRole("textbox").type("1{enter}");
+          cy.button("Add filter").click();
+        });
+
+        cy.wait("@cardQuery");
+
+        getDashboardCard(0).within(() => {
+          getTableCell("ID", 0).should("contain", "1");
+        });
+
+        getDashboardCard(1).within(() => {
+          getTableCell("Product ID", 0).should("contain", "1");
+        });
+
+        getDashboardCard(2).within(() => {
+          getTableCell("Product ID", 0).should("contain", "1");
+        });
+      });
+    });
   });
 });
 
@@ -1039,28 +1186,65 @@ function isFilterSelected(filter, bool) {
   );
 }
 
-function createDashboardWithCards(cards) {
-  return cy.createDashboard({ name: "my dash" }).then(({ body: { id } }) => {
-    updateDashboardCards({
-      dashboard_id: id,
-      cards,
-    });
+function createDashboardWithCards({
+  dashboardName = "my dash",
+  cards = [],
+} = {}) {
+  return cy
+    .createDashboard({ name: dashboardName })
+    .then(({ body: { id } }) => {
+      updateDashboardCards({
+        dashboard_id: id,
+        cards,
+      });
 
-    cy.wrap(id).as("dashboardId");
-  });
+      cy.wrap(id).as("dashboardId");
+    });
 }
 
-function addCardToDashboard(name = "Orders Model") {
+function addCardToDashboard(dashcardNames = "Orders Model") {
+  const dashcardsToSelect =
+    typeof dashcardNames === "string" ? [dashcardNames] : dashcardNames;
   cy.findByTestId("dashboard-header").icon("add").click();
-  cy.findByTestId("add-card-sidebar").findByText("Orders Model").click();
+  for (const dashcardName of dashcardsToSelect) {
+    cy.findByTestId("add-card-sidebar").findByText(dashcardName).click();
+  }
 }
 
 function goToFilterMapping(name = "Text") {
   cy.findByTestId("edit-dashboard-parameters-widget-container")
-    .findByText("Text")
+    .findByText(name)
     .click();
 }
 
 function removeFilterFromDashCard(dashcardIndex = 0) {
   getDashboardCard(dashcardIndex).icon("close").click();
 }
+
+function getTableCell(columnName, rowIndex) {
+  cy.findAllByTestId("column-header").then($columnHeaders => {
+    const columnHeaderIndex = $columnHeaders
+      .toArray()
+      .findIndex($columnHeader => $columnHeader.textContent === columnName);
+    const row = cy.findAllByTestId("table-row").eq(rowIndex);
+    row.findAllByTestId("cell-data").eq(columnHeaderIndex).as("cellData");
+  });
+
+  return cy.get("@cellData");
+}
+
+function addQuestionFromQueryBuilder({
+  questionId,
+  saveDashboardAfterAdd = true,
+}) {
+  visitQuestion(questionId);
+
+  openQuestionActions();
+  popover().findByText("Add to dashboard").click();
+  modal().findByText("36275").click();
+
+  undoToast().should("be.visible");
+  if (saveDashboardAfterAdd) {
+    saveDashboard();
+  }
+}

frontend/src/metabase/dashboard/actions/auto-wire-parameters/actions.ts

@@ -143,7 +143,7 @@ export function autoWireParametersToNewCard({
               targetDashcard,
               param.parameter_id,
               targetDashcard.card_id,
-              param.target,
+              opt.target,
             ),
           );
           processedParameterIds.add(param.parameter_id);

frontend/src/metabase/dashboard/actions/cards.js

@@ -69,7 +69,7 @@ export const addCardToDashboard =
     dispatch(createAction(ADD_CARD_TO_DASH)(dashcard));
     dispatch(fetchCardData(card, dashcard, { reload: true, clearCache: true }));
 
-    dispatch(loadMetadataForDashboard([dashcard]));
+    await dispatch(loadMetadataForDashboard([dashcard]));
 
     dispatch(
       autoWireParametersToNewCard({