Refactor editing dashboard's cards

e2e/support/commands/api/composite/createNativeQuestionAndDashboard.js

@@ -5,14 +5,22 @@ Cypress.Commands.add(
       ({ body: { id: questionId } }) => {
         cy.createDashboard(dashboardDetails).then(
           ({ body: { id: dashboardId } }) => {
-            cy.request("POST", `/api/dashboard/${dashboardId}/cards`, {
-              cardId: questionId,
-              // Add sane defaults for the dashboard card size and position
-              row: 0,
-              col: 0,
-              size_x: 8,
-              size_y: 6,
-            });
+            cy.request("PUT", `/api/dashboard/${dashboardId}/cards`, {
+              cards: [
+                {
+                  id: -1,
+                  card_id: questionId,
+                  // Add sane defaults for the dashboard card size and position
+                  row: 0,
+                  col: 0,
+                  size_x: 8,
+                  size_y: 6,
+                },
+              ],
+            }).then(response => ({
+              ...response,
+              body: response.body[0],
+            }));
           },
         );
       },

e2e/support/commands/api/composite/createQuestionAndAddToDashboard.js

@@ -1,19 +1,33 @@
 Cypress.Commands.add(
   "createQuestionAndAddToDashboard",
-  (query, dashboardId) => {
-    return (
-      query.native ? cy.createNativeQuestion(query) : cy.createQuestion(query)
-    ).then(response => {
-      return cy
-        .request("POST", `/api/dashboard/${dashboardId}/cards`, {
-          cardId: response.body.id,
-          // Add sane defaults for the dashboard card size and position
-          row: 0,
-          col: 0,
-          size_x: 8,
-          size_y: 6,
-        })
-        .then(() => response.body);
-    });
-  },
+  (query, dashboardId, card) =>
+    (query.native
+      ? cy.createNativeQuestion(query)
+      : cy.createQuestion(query)
+    ).then(({ body: { id: card_id } }) =>
+      cy
+        .request(`/api/dashboard/${dashboardId}`)
+        .then(({ body: { ordered_cards } }) =>
+          cy
+            .request("PUT", `/api/dashboard/${dashboardId}/cards`, {
+              cards: [
+                ...ordered_cards,
+                {
+                  id: -1,
+                  card_id,
+                  // Add sane defaults for the dashboard card size and position
+                  row: 0,
+                  col: 0,
+                  size_x: 8,
+                  size_y: 8,
+                  ...card,
+                },
+              ],
+            })
+            .then(response => ({
+              ...response,
+              body: response.body[0],
+            })),
+        ),
+    ),
 );

e2e/support/commands/api/composite/createQuestionAndDashboard.js

@@ -1,17 +1,26 @@
 Cypress.Commands.add(
   "createQuestionAndDashboard",
-  ({ questionDetails, dashboardDetails } = {}) => {
+  ({ questionDetails, dashboardDetails, cardDetails } = {}) => {
     cy.createQuestion(questionDetails).then(({ body: { id: questionId } }) => {
       cy.createDashboard(dashboardDetails).then(
         ({ body: { id: dashboardId } }) => {
-          cy.request("POST", `/api/dashboard/${dashboardId}/cards`, {
-            cardId: questionId,
-            // Add sane defaults for the dashboard card size
-            row: 0,
-            col: 0,
-            size_x: 8,
-            size_y: 6,
-          });
+          cy.request("PUT", `/api/dashboard/${dashboardId}/cards`, {
+            cards: [
+              {
+                id: -1,
+                card_id: questionId,
+                // Add sane defaults for the dashboard card size
+                row: 0,
+                col: 0,
+                size_x: 8,
+                size_y: 6,
+                ...cardDetails,
+              },
+            ],
+          }).then(response => ({
+            ...response,
+            body: response.body[0],
+          }));
         },
       );
     });

e2e/support/helpers/e2e-dashboard-helpers.js

@@ -10,6 +10,46 @@ export function getDashboardCard(index = 0) {
   return cy.get(".DashCard").eq(index);
 }
 
+function getDashCardApiUrl(dashId) {
+  return `/api/dashboard/${dashId}/cards`;
+}
+
+const DEFAULT_CARD = {
+  id: -1,
+  row: 0,
+  col: 0,
+  size_x: 8,
+  size_y: 8,
+  visualization_settings: {},
+  parameter_mappings: [],
+};
+
+export function addOrUpdateDashboardCard({ card_id, dashboard_id, card }) {
+  return cy
+    .request("PUT", getDashCardApiUrl(dashboard_id), {
+      cards: [
+        {
+          ...DEFAULT_CARD,
+          card_id,
+          ...card,
+        },
+      ],
+    })
+    .then(response => ({
+      ...response,
+      body: response.body[0],
+    }));
+}
+/**
+ * Replaces all the cards on a dashboard with the array given in the `cards` parameter.
+ * Can be used to remove cards (exclude from array), or add/update them.
+ */
+export function updateDashboardCards({ dashboard_id, cards }) {
+  return cy.request("PUT", getDashCardApiUrl(dashboard_id), {
+    cards: cards.map(card => ({ ...DEFAULT_CARD, ...card })),
+  });
+}
+
 export function showDashboardCardActions(index = 0) {
   getDashboardCard(index).realHover();
 }

e2e/support/integration/visit-dashboard.js

@@ -1,4 +1,5 @@
 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import { addOrUpdateDashboardCard } from "e2e/support/helpers";
 
 const { PEOPLE_ID, PRODUCTS_ID, PRODUCTS } = SAMPLE_DATABASE;
 
@@ -66,32 +67,6 @@ export function setup() {
   );
 }
 
-function addCardToDashboard({ card_id, dashboard_id, card } = {}) {
-  const url = `/api/dashboard/${dashboard_id}/cards`;
-
-  return cy
-    .request("POST", url, {
-      cardId: card_id,
-    })
-    .then(({ body: { id } }) => {
-      cy.request("PUT", url, {
-        cards: [
-          {
-            id,
-            card_id,
-            row: 0,
-            col: 0,
-            size_x: 8,
-            size_y: 8,
-            visualization_settings: {},
-            parameter_mappings: [],
-            ...card,
-          },
-        ],
-      });
-    });
-}
-
 function addEmptyDashboard(name, alias) {
   return cy.createDashboard(name).then(({ body: { id } }) => {
     cy.wrap(id).as(alias);
@@ -100,7 +75,7 @@ function addEmptyDashboard(name, alias) {
 
 function addMarkdownDashboard(name, alias) {
   return cy.createDashboard(name).then(({ body: { id: dashboard_id } }) => {
-    addCardToDashboard({
+    addOrUpdateDashboardCard({
       card_id: null,
       dashboard_id,
       card: {
@@ -150,7 +125,7 @@ function addNativeDashboard(name, alias) {
 
 function addMultiDashboard(name, alias) {
   return cy.createDashboard(name).then(({ body: { id: dashboard_id } }) => {
-    addCardToDashboard({
+    addOrUpdateDashboardCard({
       card_id: null,
       dashboard_id,
       card: {
@@ -165,7 +140,7 @@ function addMultiDashboard(name, alias) {
 
     cy.createNativeQuestion(nativeQuestionDetails).then(
       ({ body: { id: card_id } }) => {
-        addCardToDashboard({
+        addOrUpdateDashboardCard({
           card_id,
           dashboard_id,
           card: { row: 2, col: 0, size_x: 9, size_y: 8 },
@@ -174,23 +149,23 @@ function addMultiDashboard(name, alias) {
     );
 
     cy.createQuestion(modelDetails).then(({ body: { id: card_id } }) => {
-      addCardToDashboard({
+      addOrUpdateDashboardCard({
         card_id,
         dashboard_id,
         card: { row: 2, col: 10, size_x: 9, size_y: 8 },
       });
     });
 
     cy.createQuestion(questionDetails).then(({ body: { id: card_id } }) => {
-      addCardToDashboard({
+      addOrUpdateDashboardCard({
         card_id,
         dashboard_id,
         card: { row: 11, col: 0, size_x: 12, size_y: 8 },
       });
     });
 
     cy.createQuestion(pivotTable).then(({ body: { id: card_id } }) => {
-      addCardToDashboard({
+      addOrUpdateDashboardCard({
         card_id,
         dashboard_id,
         card: { row: 11, col: 12, size_x: 6, size_y: 8 },

e2e/test/scenarios/custom-column/reproductions/19744-cc-after-aggregation-limited-filters.cy.spec.js

@@ -4,6 +4,7 @@ import {
   visitQuestionAdhoc,
   popover,
   visitDashboard,
+  addOrUpdateDashboardCard,
 } from "e2e/support/helpers";
 
 import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
@@ -72,17 +73,15 @@ function saveQuestion(name) {
 }
 
 function addQuestionToDashboardAndVisit() {
-  cy.createDashboard().then(({ body: { id } }) => {
-    cy.get("@questionId").then(cardId => {
-      cy.request("POST", `/api/dashboard/${id}/cards`, {
-        cardId,
-        row: 0,
-        col: 0,
-        size_x: 16,
-        size_y: 10,
+  cy.createDashboard().then(({ body: { id: dashboard_id } }) => {
+    cy.get("@questionId").then(card_id => {
+      addOrUpdateDashboardCard({
+        card_id,
+        dashboard_id,
+        card: { size_x: 16, size_y: 10 },
       });
     });
 
-    visitDashboard(id);
+    visitDashboard(dashboard_id);
   });
 }

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

@@ -8,6 +8,7 @@ import {
   getDashboardCard,
   selectDashboardFilter,
   saveDashboard,
+  updateDashboardCards,
 } from "e2e/support/helpers";
 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
@@ -25,20 +26,24 @@ describe("scenarios > dashboard > parameters", () => {
 
     cy.createDashboard({ name: "my dash" }).then(({ body: { id } }) => {
       // add the same question twice
-      cy.request("POST", `/api/dashboard/${id}/cards`, {
-        cardId: 2, // Orders, count
-        row: 0,
-        col: 0,
-        size_x: 4,
-        size_y: 4,
-      });
-
-      cy.request("POST", `/api/dashboard/${id}/cards`, {
-        cardId: 2,
-        row: 0,
-        col: 4,
-        size_x: 4,
-        size_y: 4,
+      updateDashboardCards({
+        dashboard_id: id,
+        cards: [
+          {
+            card_id: 2,
+            row: 0,
+            col: 0,
+            size_x: 4,
+            size_y: 4,
+          },
+          {
+            card_id: 2,
+            row: 0,
+            col: 4,
+            size_x: 4,
+            size_y: 4,
+          },
+        ],
       });
 
       visitDashboard(id);