Fix an error during updating cards which are dashcards (#34786)

e2e/test/scenarios/dashboard/reproductions/31766-corrupted-dashcards-after-save.cy.spec.js

+import {
+  editDashboard,
+  modal,
+  restore,
+  visitDashboard,
+  createTextCard,
+  updateDashboardCards,
+  saveDashboard,
+} from "e2e/support/helpers";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+
+const { ORDERS_ID } = SAMPLE_DATABASE;
+
+describe("issue 31766", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+  it("should not corrupt dashboard data (metabase#31766)", () => {
+    const questionDetails = {
+      name: "Orders",
+      query: { "source-table": ORDERS_ID, limit: 5 },
+    };
+
+    const dashboardDetails = { name: "Orders in a dashboard" };
+
+    cy.createQuestionAndDashboard({
+      questionDetails,
+      dashboardDetails,
+      cardDetails: { size_x: 16, size_y: 8 },
+    }).then(({ body: { dashboard_id, question_id } }) => {
+      const textCard = createTextCard({
+        row: 0,
+        size_x: 24,
+        size_y: 1,
+        text: "top",
+      });
+      const questionCard = {
+        row: 2,
+        size_x: 16,
+        size_y: 6,
+        id: 2,
+        card_id: question_id,
+      };
+
+      updateDashboardCards({ dashboard_id, cards: [textCard, questionCard] });
+
+      visitDashboard(dashboard_id);
+      editDashboard(dashboard_id);
+    });
+
+    // update text card
+    cy.findByTestId("editing-dashboard-text-preview").type(1);
+
+    saveDashboard();
+
+    // visit question
+    cy.findAllByTestId("dashcard").eq(1).findByText("Orders").click();
+
+    cy.log("Update viz settings");
+
+    cy.findByTestId("view-footer")
+      .findByRole("button", { name: "Visualization" })
+      .click();
+    cy.findByTestId("Detail-button").click();
+
+    saveUpdatedQuestion();
+
+    assertQuestionIsUpdatedWithoutError();
+  });
+});
+
+function saveUpdatedQuestion() {
+  cy.intercept("PUT", "/api/card/*").as("updateQuestion");
+
+  cy.findByText("Save").click();
+  modal().button("Save").click();
+}
+
+function assertQuestionIsUpdatedWithoutError() {
+  cy.wait("@updateQuestion");
+  modal().should("not.exist");
+}

frontend/src/metabase/components/IconBorder/IconBorder.jsx

@@ -15,7 +15,7 @@ import cx from "classnames";
 
 export default class IconBorder extends Component {
   static propTypes = {
-    borderWidth: PropTypes.string,
+    borderWidth: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
     borderStyle: PropTypes.string,
     borderColor: PropTypes.string,
     borderRadius: PropTypes.string,

frontend/src/metabase/containers/SaveQuestionModal.tsx

@@ -47,7 +47,7 @@ const SAVE_QUESTION_SCHEMA = Yup.object({
 interface SaveQuestionModalProps {
   question: Question;
   originalQuestion: Question | null;
-  onCreate: (question: Question) => void;
+  onCreate: (question: Question) => Promise<void>;
   onSave: (question: Question) => Promise<void>;
   onClose: () => void;
   multiStep?: boolean;
@@ -78,7 +78,7 @@ export const SaveQuestionModal = ({
   initialCollectionId,
 }: SaveQuestionModalProps) => {
   const handleOverwrite = useCallback(
-    async (originalQuestion: Question, details: FormValues) => {
+    async (originalQuestion: Question) => {
       const collectionId = canonicalCollectionId(
         originalQuestion.collectionId(),
       );
@@ -120,7 +120,7 @@ export const SaveQuestionModal = ({
   const handleSubmit = useCallback(
     async (details: FormValues) => {
       if (isOverwriteMode(originalQuestion, details.saveType)) {
-        await handleOverwrite(originalQuestion, details);
+        await handleOverwrite(originalQuestion);
       } else {
         await handleCreate(details);
       }

frontend/src/metabase/dashboard/actions/tabs.ts

@@ -296,8 +296,13 @@ export const tabsReducer = createReducer<DashboardState>(
         const prevCards = prevDash.dashcards.filter(
           id => !state.dashcards[id].isRemoved,
         );
+
         prevCards.forEach((oldId, index) => {
-          state.dashcardData[newCards[index].id] = state.dashcardData[oldId];
+          const prevDashcardData = state.dashcardData[oldId];
+
+          if (prevDashcardData) {
+            state.dashcardData[newCards[index].id] = prevDashcardData;
+          }
         });
 
         // 2. Re-select the currently selected tab with its real id

frontend/src/metabase/dashboard/reducers.js

@@ -271,6 +271,7 @@ const isNavigatingBackToDashboard = handleActions(
   INITIAL_DASHBOARD_STATE.isNavigatingBackToDashboard,
 );
 
+// Many of these slices are also updated by `tabsReducer` in `frontend/src/metabase/dashboard/actions/tabs.ts`
 const dashcardData = handleActions(
   {
     // clear existing dashboard data when loading a dashboard

frontend/src/metabase/forms/hooks/use-form-submit/use-form-submit.ts

@@ -5,7 +5,7 @@ import type { FormState } from "../../contexts";
 import type { FormError } from "./types";
 
 export interface UseFormSubmitProps<T> {
-  onSubmit: (values: T, helpers: FormikHelpers<T>) => void;
+  onSubmit: (values: T, helpers: FormikHelpers<T>) => void | Promise<any>;
 }
 
 export interface UseFormSubmitResult<T> {

frontend/src/metabase/query_builder/components/QueryModals.tsx

@@ -64,8 +64,11 @@ interface QueryModalsProps {
   originalQuestion: Question;
   questionWithParameters: Question;
   card: Card;
-  onCreate: (question: Question) => void;
-  onSave: (question: Question, config?: { rerunQuery: boolean }) => void;
+  onCreate: (question: Question) => Promise<void>;
+  onSave: (
+    question: Question,
+    config?: { rerunQuery: boolean },
+  ) => Promise<void>;
   onCloseModal: () => void;
   onOpenModal: (modal: ModalType) => void;
   onChangeLocation: (location: string) => void;