correctly parse collection id, update path state on handleNewDashboard (#47318)

e2e/test/scenarios/question/new.cy.spec.js

@@ -8,6 +8,7 @@ import {
 } from "e2e/support/cypress_sample_instance_data";
 import {
   collectionOnTheGoModal,
+  createDashboard,
   createQuestion,
   entityPickerModal,
   entityPickerModalItem,
@@ -389,8 +390,13 @@ describe("scenarios > question > new", () => {
 
     beforeEach(() => {
       cy.intercept("POST", "/api/card").as("createQuestion");
-      cy.createCollection(collectionInRoot);
-      cy.createDashboard(dashboardInRoot);
+      cy.createCollection(collectionInRoot).then(({ body: { id } }) => {
+        createDashboard({
+          name: "Extra Dashboard",
+          collection_id: id,
+        });
+      });
+      createDashboard(dashboardInRoot);
       // Can't use `startNewQuestion` because it's missing `display: "table"` and
       // adding that will fail a lot of other tests and I don't want to deal with that yet.
       cy.visit("/");
@@ -465,6 +471,117 @@ describe("scenarios > question > new", () => {
         cy.findByText("Create a new dashboard").should("be.visible");
       });
     });
+
+    describe("creating a new dashboard", () => {
+      beforeEach(() => {
+        entityPickerModal().within(() => {
+          entityPickerModalTab("Tables").click();
+          cy.findByText("Orders").click();
+        });
+
+        queryBuilderHeader().button("Save").click();
+        cy.log("default selected collection is the root collection");
+
+        cy.findByTestId("save-question-modal").within(modal => {
+          cy.findByText("Save").click();
+          cy.wait("@createQuestion");
+        });
+
+        cy.get("#QuestionSavedModal").within(() => {
+          cy.findByText("Yes please!").click();
+        });
+      });
+
+      it("when selecting a collection", () => {
+        entityPickerModal().within(() => {
+          entityPickerModalTab("Dashboards").click();
+          entityPickerModalItem(1, "Collection in root collection").click();
+          cy.button(/Create a new dashboard/).click();
+        });
+
+        cy.findByRole("dialog", { name: "Create a new dashboard" }).within(
+          () => {
+            cy.findByRole("textbox").type("New Dashboard");
+            cy.button("Create").click();
+          },
+        );
+
+        entityPickerModalItem(1, "Collection in root collection").should(
+          "have.attr",
+          "data-active",
+          "true",
+        );
+
+        entityPickerModalItem(2, "New Dashboard").should(
+          "have.attr",
+          "data-active",
+          "true",
+        );
+
+        entityPickerModal()
+          .button(/Select/)
+          .click();
+        cy.location("pathname").should("eq", "/dashboard/12-new-dashboard");
+      });
+
+      it("when selecting a collection with no child dashboards (metabase#47000)", () => {
+        entityPickerModal().within(() => {
+          entityPickerModalTab("Dashboards").click();
+          entityPickerModalItem(1, "First collection").click();
+          cy.button(/Create a new dashboard/).click();
+        });
+
+        cy.findByRole("dialog", { name: "Create a new dashboard" }).within(
+          () => {
+            cy.findByRole("textbox").type("New Dashboard");
+            cy.button("Create").click();
+          },
+        );
+
+        entityPickerModalItem(1, "First collection").should(
+          "have.attr",
+          "data-active",
+          "true",
+        );
+
+        entityPickerModalItem(2, "New Dashboard").should(
+          "have.attr",
+          "data-active",
+          "true",
+        );
+
+        entityPickerModal()
+          .button(/Select/)
+          .click();
+        cy.location("pathname").should("eq", "/dashboard/12-new-dashboard");
+      });
+
+      it("when a dashboard is currently selected", () => {
+        entityPickerModal().within(() => {
+          entityPickerModalTab("Dashboards").click();
+          entityPickerModalItem(1, "Orders in a dashboard").click();
+          cy.button(/Create a new dashboard/).click();
+        });
+
+        cy.findByRole("dialog", { name: "Create a new dashboard" }).within(
+          () => {
+            cy.findByRole("textbox").type("New Dashboard");
+            cy.button("Create").click();
+          },
+        );
+
+        entityPickerModalItem(1, "New Dashboard").should(
+          "have.attr",
+          "data-active",
+          "true",
+        );
+
+        entityPickerModal()
+          .button(/Select/)
+          .click();
+        cy.location("pathname").should("eq", "/dashboard/12-new-dashboard");
+      });
+    });
   });
 });
 

frontend/src/metabase/common/components/DashboardPicker/components/DashboardPicker.tsx

@@ -25,7 +25,12 @@ import {
   type PickerState,
 } from "../../EntityPicker";
 import type { DashboardPickerItem, DashboardPickerOptions } from "../types";
-import { getCollectionIdPath, getStateFromIdPath, isFolder } from "../utils";
+import {
+  getCollectionId,
+  getCollectionIdPath,
+  getStateFromIdPath,
+  isFolder,
+} from "../utils";
 
 export const defaultOptions: DashboardPickerOptions = {
   showPersonalCollections: true,
@@ -148,12 +153,34 @@ const DashboardPickerInner = (
         model: "dashboard",
       };
 
+      // Needed to satisfy type between DashboardPickerItem and the query below.
+      const parentCollectionId = getCollectionId(newCollectionItem);
+
+      //Is the parent collection already in the path?
+      const isParentCollectionInPath =
+        getPathLevelForItem(newCollectionItem, path, userPersonalCollectionId) >
+        0;
+
+      if (!isParentCollectionInPath) {
+        setPath(oldPath => [
+          ...oldPath,
+          {
+            query: {
+              id: parentCollectionId,
+              models: ["collection", "dashboard"],
+            },
+            selectedItem: newCollectionItem,
+          },
+        ]);
+        onItemSelect(newCollectionItem);
+        return;
+      }
       handleItemSelect(newCollectionItem);
     },
-    [handleItemSelect],
+    [path, onItemSelect, userPersonalCollectionId, handleItemSelect],
   );
 
-  // Exposing onNewCollection so that parent can select newly created
+  // Exposing onNewDashboard so that parent can select newly created
   // folder
   useImperativeHandle(
     ref,

frontend/src/metabase/common/components/DashboardPicker/utils.ts

@@ -104,6 +104,14 @@ export const getCollectionId = (
     return "root";
   }
 
+  if (
+    "collection_id" in item &&
+    item.model === "dashboard" &&
+    item.collection_id !== undefined
+  ) {
+    return item.collection_id;
+  }
+
   if (item.model === "collection") {
     return (item.id as CollectionId) ?? "root";
   }