42934 entity picker create collection root (#43005)

* NewCollectionDialog adjustment and unit test

* adding unit test for NewDashboardDialog

frontend/src/metabase/common/components/CollectionPicker/components/NewCollectionDialog.tsx

@@ -18,7 +18,7 @@ import type { CollectionPickerItem } from "../types";
 interface NewCollectionDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  parentCollectionId: CollectionId;
+  parentCollectionId: CollectionId | null;
   onNewCollection: (item: CollectionPickerItem) => void;
 }
 
@@ -33,7 +33,7 @@ export const NewCollectionDialog = ({
   const onCreateNewCollection = async ({ name }: { name: string }) => {
     const newCollection = await createCollection({
       name,
-      parent_id: parentCollectionId === "root" ? "root" : parentCollectionId,
+      parent_id: parentCollectionId === "root" ? null : parentCollectionId,
     }).unwrap();
 
     onNewCollection({ ...newCollection, model: "collection" });

frontend/src/metabase/common/components/CollectionPicker/components/NewCollectionDialog.unit.spec.tsx

+import userEvent from "@testing-library/user-event";
+import fetchMock from "fetch-mock";
+
+import { renderWithProviders, screen } from "__support__/ui";
+import type { CollectionId } from "metabase-types/api";
+
+import { NewCollectionDialog } from "./NewCollectionDialog";
+
+const setup = (
+  params: {
+    parentCollectionId: CollectionId | null;
+  } = {
+    parentCollectionId: "root",
+  },
+) => {
+  const onClose = jest.fn();
+  const onNewCollection = jest.fn();
+  fetchMock.post("path:/api/collection", { id: 2 });
+  renderWithProviders(
+    <NewCollectionDialog
+      isOpen
+      onClose={onClose}
+      onNewCollection={onNewCollection}
+      {...params}
+    />,
+  );
+};
+
+describe("new collection dialog", () => {
+  it("should handle a parentCollectionId of root", async () => {
+    setup({
+      parentCollectionId: "root",
+    });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new collection"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/collection");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.parent_id).toBe(null);
+  });
+
+  it("should handle a normal parentCollectionId", async () => {
+    setup({ parentCollectionId: 12 });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new collection"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/collection");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.parent_id).toBe(12);
+  });
+
+  it("should handle a parentCollectionId of null", async () => {
+    setup({ parentCollectionId: null });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new collection"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/collection");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.parent_id).toBe(null);
+  });
+});

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

@@ -17,7 +17,7 @@ import type { DashboardPickerItem } from "../types";
 interface NewDashboardDialogProps {
   isOpen: boolean;
   onClose: () => void;
-  parentCollectionId: CollectionId;
+  parentCollectionId: CollectionId | null;
   onNewDashboard: (item: DashboardPickerItem) => void;
 }
 
@@ -29,7 +29,7 @@ export const NewDashboardDialog = ({
 }: NewDashboardDialogProps) => {
   const [createDashboard] = useCreateDashboardMutation();
 
-  const onCreateNewCollection = async ({ name }: { name: string }) => {
+  const onCreateNewDashboard = async ({ name }: { name: string }) => {
     const newDashboard = await createDashboard({
       name,
       collection_id: parentCollectionId === "root" ? null : parentCollectionId,
@@ -60,7 +60,7 @@ export const NewDashboardDialog = ({
     >
       <FormProvider
         initialValues={{ name: "" }}
-        onSubmit={onCreateNewCollection}
+        onSubmit={onCreateNewDashboard}
       >
         {({ dirty }: { dirty: boolean }) => (
           <Form>

frontend/src/metabase/common/components/DashboardPicker/components/NewDashboardDialog.unit.spec.tsx

+import userEvent from "@testing-library/user-event";
+import fetchMock from "fetch-mock";
+
+import { renderWithProviders, screen } from "__support__/ui";
+import type { CollectionId } from "metabase-types/api";
+
+import { NewDashboardDialog } from "./NewDashboardDialog";
+
+const setup = (
+  params: {
+    parentCollectionId: CollectionId | null;
+  } = {
+    parentCollectionId: "root",
+  },
+) => {
+  const onClose = jest.fn();
+  const onNewCollection = jest.fn();
+  fetchMock.post("path:/api/dashboard", { id: 2 });
+  renderWithProviders(
+    <NewDashboardDialog
+      isOpen
+      onClose={onClose}
+      onNewDashboard={onNewCollection}
+      {...params}
+    />,
+  );
+};
+
+describe("new collection dialog", () => {
+  it("should handle a parentCollectionId of root", async () => {
+    setup({
+      parentCollectionId: "root",
+    });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new dashboard"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/dashboard");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.collection_id).toBe(null);
+  });
+
+  it("should handle a normal parentCollectionId", async () => {
+    setup({ parentCollectionId: 12 });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new dashboard"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/dashboard");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.collection_id).toBe(12);
+  });
+
+  it("should handle a parentCollectionId of null", async () => {
+    setup({ parentCollectionId: null });
+    await userEvent.type(
+      screen.getByPlaceholderText("My new dashboard"),
+      "Test collection",
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+    const apiCalls = fetchMock.calls("path:/api/dashboard");
+    expect(apiCalls).toHaveLength(1);
+
+    const [_, options] = apiCalls[0];
+    const body = JSON.parse((await options?.body) as string);
+    expect(body.collection_id).toBe(null);
+  });
+});