♻️(front) make dedicated file for folder create modal

Nothing huge to say here, just make comply the gitlint.

src/frontend/apps/drive/src/features/explorer/components/ExplorerTree.tsx

@@ -1,21 +1,8 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getDriver } from "@/features/config/Config";
-import {
-  Button,
-  Input,
-  Modal,
-  ModalProps,
-  ModalSize,
-  useModal,
-} from "@openfun/cunningham-react";
+import { Button, useModal } from "@openfun/cunningham-react";
 import { useTranslation } from "react-i18next";
-import { SubmitHandler, useForm } from "react-hook-form";
 import { NavigationEventType, useExplorer } from "./ExplorerContext";
 import { Item } from "@/features/drivers/types";
-
-type Inputs = {
-  title: string;
-};
+import { ExplorerCreateFolderModal } from "./modals/ExplorerCreateFolderModal";
 
 export const ExplorerTree = () => {
   const { t } = useTranslation();
@@ -82,65 +69,3 @@ export const ExplorerTree = () => {
     </div>
   );
 };
-
-/**
- * TODO: Create dedicated file.
- */
-const ExplorerCreateFolderModal = (
-  props: Pick<ModalProps, "isOpen" | "onClose">
-) => {
-  const { itemId } = useExplorer();
-  const { t } = useTranslation();
-  const driver = getDriver();
-  const { register, handleSubmit } = useForm<Inputs>();
-
-  const queryClient = useQueryClient();
-  const createFolder = useMutation({
-    mutationFn: (...payload: Parameters<typeof driver.createFolder>) => {
-      return driver.createFolder(...payload);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["items", itemId],
-      });
-    },
-  });
-
-  const onSubmit: SubmitHandler<Inputs> = async (data) => {
-    createFolder.mutate({
-      ...data,
-      parentId: itemId,
-    });
-    props.onClose();
-  };
-
-  return (
-    <Modal
-      {...props}
-      size={ModalSize.SMALL}
-      title={t("explorer.actions.createFolder.modal.title")}
-      rightActions={
-        <>
-          <Button color="secondary" onClick={props.onClose}>
-            {t("explorer.actions.createFolder.modal.cancel")}
-          </Button>
-          <Button type="submit" form="create-folder-form">
-            {t("explorer.actions.createFolder.modal.submit")}
-          </Button>
-        </>
-      }
-    >
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        id="create-folder-form"
-        className="mt-s"
-      >
-        <Input
-          label={t("explorer.actions.createFolder.modal.label")}
-          fullWidth={true}
-          {...register("title")}
-        />
-      </form>
-    </Modal>
-  );
-};

src/frontend/apps/drive/src/features/explorer/components/modals/ExplorerCreateFolderModal.tsx

@@ -0,0 +1,76 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  Button,
+  Input,
+  Modal,
+  ModalProps,
+  ModalSize,
+} from "@openfun/cunningham-react";
+import { useExplorer } from "../ExplorerContext";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { getDriver } from "@/features/config/Config";
+
+type Inputs = {
+  title: string;
+};
+
+export const ExplorerCreateFolderModal = (
+  props: Pick<ModalProps, "isOpen" | "onClose">
+) => {
+  const { itemId } = useExplorer();
+  const { t } = useTranslation();
+  const driver = getDriver();
+  const { register, handleSubmit } = useForm<Inputs>();
+
+  const queryClient = useQueryClient();
+  const createFolder = useMutation({
+    mutationFn: (...payload: Parameters<typeof driver.createFolder>) => {
+      return driver.createFolder(...payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["items", itemId],
+      });
+    },
+  });
+
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    createFolder.mutate({
+      ...data,
+      parentId: itemId,
+    });
+    props.onClose();
+  };
+
+  return (
+    <Modal
+      {...props}
+      size={ModalSize.SMALL}
+      title={t("explorer.actions.createFolder.modal.title")}
+      rightActions={
+        <>
+          <Button color="secondary" onClick={props.onClose}>
+            {t("explorer.actions.createFolder.modal.cancel")}
+          </Button>
+          <Button type="submit" form="create-folder-form">
+            {t("explorer.actions.createFolder.modal.submit")}
+          </Button>
+        </>
+      }
+    >
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        id="create-folder-form"
+        className="mt-s"
+      >
+        <Input
+          label={t("explorer.actions.createFolder.modal.label")}
+          fullWidth={true}
+          {...register("title")}
+        />
+      </form>
+    </Modal>
+  );
+};