parse canonical collection id when saving question (#21145)

frontend/src/metabase/containers/SaveQuestionModal.jsx

 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-
 import { CSSTransitionGroup } from "react-transition-group";
+import { t } from "ttag";
 
 import Form, { FormField, FormFooter } from "metabase/containers/Form";
 import ModalContent from "metabase/components/ModalContent";
 import Radio from "metabase/core/components/Radio";
-
 import * as Q_DEPRECATED from "metabase/lib/query";
 import { generateQueryDescription } from "metabase/lib/query/description";
-
 import validate from "metabase/lib/validate";
-
-import { t } from "ttag";
+import { canonicalCollectionId } from "metabase/collections/utils";
 
 import "./SaveQuestionModal.css";
 
@@ -47,6 +44,12 @@ export default class SaveQuestionModal extends Component {
     //     .setCollectionId(details.collection_id)
     let { card, originalCard, onCreate, onSave } = this.props;
 
+    const collection_id = canonicalCollectionId(
+      details.saveType === "overwrite"
+        ? originalCard.collection_id
+        : details.collection_id,
+    );
+
     card = {
       ...card,
       name:
@@ -60,10 +63,7 @@ export default class SaveQuestionModal extends Component {
           : details.description
           ? details.description.trim()
           : null,
-      collection_id:
-        details.saveType === "overwrite"
-          ? originalCard.collection_id
-          : details.collection_id,
+      collection_id,
     };
 
     if (details.saveType === "create") {

frontend/test/metabase/containers/SaveQuestionModal.unit.spec.js

@@ -196,7 +196,7 @@ describe("SaveQuestionModal", () => {
         ...question.card(),
         name: EXPECTED_SUGGESTED_NAME,
         description: null,
-        collection_id: undefined,
+        collection_id: null,
       });
     });
 
@@ -212,7 +212,7 @@ describe("SaveQuestionModal", () => {
         ...question.card(),
         name: "My favorite orders",
         description: "So many of them",
-        collection_id: undefined,
+        collection_id: null,
       });
     });
 
@@ -231,7 +231,25 @@ describe("SaveQuestionModal", () => {
         ...question.card(),
         name: "My favorite orders",
         description: "So many of them",
-        collection_id: undefined,
+        collection_id: null,
+      });
+    });
+
+    it('should correctly handle saving a question in the "root" collection', () => {
+      const question = getQuestion({
+        collection_id: "root",
+      });
+      const { onCreateMock } = renderSaveQuestionModal(question);
+
+      fillForm({ name: "foo", description: "bar" });
+      userEvent.click(screen.getByText("Save"));
+
+      expect(onCreateMock).toHaveBeenCalledTimes(1);
+      expect(onCreateMock).toHaveBeenCalledWith({
+        ...question.card(),
+        name: "foo",
+        description: "bar",
+        collection_id: null,
       });
     });