From f1b82deea353720cd98403b4bc641bfaee42a990 Mon Sep 17 00:00:00 2001
From: Gui <guillaume.thibault.98@proton.me>
Date: Thu, 25 Apr 2024 07:48:54 -0700
Subject: [PATCH] Form for creating Sequences (#1170)

* [create-seq-form] chore: adding form validation

* chore: formatting

* chore: add a helpful msg

* [create-seq-form] chore: trim space in name

* chore: formatting

---------

Co-authored-by: Joey Yu <joey@jyu.dev>
---
 .../components/TestSequencerInfo.tsx          |   4 +-
 .../components/modals/CreateSequenceModal.tsx | 175 ++++++++++++++++++
 .../modals/TestSequencerProjectModal.tsx      | 108 -----------
 3 files changed, 177 insertions(+), 110 deletions(-)
 create mode 100644 src/renderer/routes/test_sequencer_panel/components/modals/CreateSequenceModal.tsx
 delete mode 100644 src/renderer/routes/test_sequencer_panel/components/modals/TestSequencerProjectModal.tsx

diff --git a/src/renderer/routes/test_sequencer_panel/components/TestSequencerInfo.tsx b/src/renderer/routes/test_sequencer_panel/components/TestSequencerInfo.tsx
index 2d19d1d58..db272620c 100644
--- a/src/renderer/routes/test_sequencer_panel/components/TestSequencerInfo.tsx
+++ b/src/renderer/routes/test_sequencer_panel/components/TestSequencerInfo.tsx
@@ -11,10 +11,10 @@ import SequencerKeyboardShortcuts from "@/renderer/routes/test_sequencer_panel/S
 import { ControlButton } from "./ControlButton";
 import { DesignBar } from "./DesignBar";
 import { useDisplayedSequenceState } from "@/renderer/hooks/useTestSequencerState";
-import { TestSequencerProjectModal } from "./modals/TestSequencerProjectModal";
 import { ImportTestModal } from "./modals/ImportTestModal";
 import { ErrorModal } from "./modals/ErrorModal";
 import { RenameTestModal } from "./modals/RenameTestModal";
+import { CreateSequenceModal } from "./modals/CreateSequenceModal";
 
 const TestSequencerView = () => {
   const { backendGlobalState } = useDisplayedSequenceState();
@@ -40,7 +40,7 @@ const TestSequencerView = () => {
         }}
         className="overflow-y-auto"
       >
-        <TestSequencerProjectModal />
+        <CreateSequenceModal />
         <ImportTestModal />
         <ErrorModal />
         <RenameTestModal />
diff --git a/src/renderer/routes/test_sequencer_panel/components/modals/CreateSequenceModal.tsx b/src/renderer/routes/test_sequencer_panel/components/modals/CreateSequenceModal.tsx
new file mode 100644
index 000000000..7dca49ea4
--- /dev/null
+++ b/src/renderer/routes/test_sequencer_panel/components/modals/CreateSequenceModal.tsx
@@ -0,0 +1,175 @@
+import { Dialog, DialogContent } from "@/renderer/components/ui/dialog";
+import { Button } from "@/renderer/components/ui/button";
+import { useState } from "react";
+import { Input } from "@/renderer/components/ui/input";
+import { useDisplayedSequenceState } from "@/renderer/hooks/useTestSequencerState";
+import { useCreateSequence } from "@/renderer/hooks/useTestSequencerProject";
+import { InterpreterType } from "@/renderer/types/test-sequencer";
+import { PathInput } from "@/renderer/components/ui/path-input";
+import { useSequencerModalStore } from "@/renderer/stores/modal";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/renderer/components/ui/form";
+
+const formSchema = z.object({
+  name: z
+    .string()
+    .min(1)
+    .max(50)
+    .regex(/\S/, {
+      message: "The sequence name should not contain white spaces",
+    })
+    .transform((val) => val.trim()),
+  description: z.string().max(100),
+  projectPath: z.string().min(1).regex(/\S/, {
+    message: "The project path should not contain white spaces",
+  }),
+});
+
+export const CreateSequenceModal = () => {
+  const { isCreateProjectModalOpen, setIsCreateProjectModalOpen } =
+    useSequencerModalStore();
+  const { elems } = useDisplayedSequenceState();
+  const handleCreate = useCreateSequence();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [interpreterPath, setInterpreterPath] = useState("");
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [type, setType] = useState<InterpreterType>("flojoy");
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      projectPath: "",
+    },
+  });
+
+  function handleSubmit(values: z.infer<typeof formSchema>) {
+    handleCreate(
+      {
+        name: values.name,
+        description: values.description,
+        elems: elems,
+        projectPath: values.projectPath,
+        interpreter: {
+          type: type,
+          path: interpreterPath === "" ? null : interpreterPath,
+          requirementsPath: "flojoy_requirements.txt",
+        },
+      },
+      setIsCreateProjectModalOpen,
+    );
+  }
+
+  return (
+    <Dialog
+      open={isCreateProjectModalOpen}
+      onOpenChange={setIsCreateProjectModalOpen}
+    >
+      <DialogContent>
+        <h2 className="mb-2 text-lg font-bold text-accent1 ">New Sequence</h2>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Sequence Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Sequence Name"
+                      data-testid="new-seq-modal-name-input"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Sequence Description"
+                      data-testid="new-seq-modal-desc-input"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="projectPath"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project Root Directory</FormLabel>
+                  <FormControl>
+                    <PathInput
+                      placeholder="Root Directory"
+                      allowedExtention={["tjoy"]}
+                      {...field}
+                      pickerType="directory"
+                      allowDirectoryCreation={true}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {
+              // <div className="flex gap-2">
+              //   <div className="flex-none w-[200px]">
+              //   <Select onValueChange={(e: InterpreterType) => {setType(e)}}>
+              //     <SelectTrigger className="w-[200px]">
+              //       <SelectValue placeholder="Dependencies Manager" />
+              //     </SelectTrigger>
+              //     <SelectContent>
+              //       <SelectGroup>
+              //         <SelectLabel>Interpreter</SelectLabel>
+              //         { availableInterpreter.map((interpreter) => (
+              //           <SelectItem value={interpreter} key={interpreter}>
+              //               { interpreter.charAt(0).toUpperCase() + interpreter.slice(1) }
+              //           </SelectItem>
+              //         ))}
+              //       </SelectGroup>
+              //     </SelectContent>
+              //   </Select>
+              //   </div>
+              //   <PathInput
+              //     placeholder="Interpreter"
+              //     onChange={(event) => {setInterpreterPath(event.target.value)}}
+              //   />
+              // </div>
+            }
+            <Button
+              data-testid="new-seq-modal-create-btn"
+              type="submit"
+              className="mt-4 w-full"
+            >
+              New Sequence
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/renderer/routes/test_sequencer_panel/components/modals/TestSequencerProjectModal.tsx b/src/renderer/routes/test_sequencer_panel/components/modals/TestSequencerProjectModal.tsx
deleted file mode 100644
index dd2677180..000000000
--- a/src/renderer/routes/test_sequencer_panel/components/modals/TestSequencerProjectModal.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Dialog, DialogContent } from "@/renderer/components/ui/dialog";
-import { Button } from "@/renderer/components/ui/button";
-import { useState } from "react";
-import { Input } from "@/renderer/components/ui/input";
-import { useDisplayedSequenceState } from "@/renderer/hooks/useTestSequencerState";
-import { useCreateSequence } from "@/renderer/hooks/useTestSequencerProject";
-import { InterpreterType } from "@/renderer/types/test-sequencer";
-import { PathInput } from "@/renderer/components/ui/path-input";
-import { useSequencerModalStore } from "@/renderer/stores/modal";
-
-export const TestSequencerProjectModal = () => {
-  const { isCreateProjectModalOpen, setIsCreateProjectModalOpen } =
-    useSequencerModalStore();
-  const { elems } = useDisplayedSequenceState();
-  const handleCreate = useCreateSequence();
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [projectDirPath, setProjectDirPath] = useState("");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [interpreterPath, setInterpreterPath] = useState("");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [type, setType] = useState<InterpreterType>("flojoy");
-
-  function handleSubmit() {
-    handleCreate(
-      {
-        name: name,
-        description: description,
-        elems: elems,
-        projectPath: projectDirPath,
-        interpreter: {
-          type: type,
-          path: interpreterPath === "" ? null : interpreterPath,
-          requirementsPath: "flojoy_requirements.txt",
-        },
-      },
-      setIsCreateProjectModalOpen,
-    );
-  }
-
-  return (
-    <Dialog
-      open={isCreateProjectModalOpen}
-      onOpenChange={setIsCreateProjectModalOpen}
-    >
-      <DialogContent>
-        <h2 className="mb-2 text-center text-lg font-bold text-accent1 ">
-          New Sequence
-        </h2>
-        <Input
-          placeholder="Sequence Name"
-          data-testid="new-seq-modal-name-input"
-          onChange={(e) => {
-            setName(e.target.value);
-          }}
-        />
-        <Input
-          placeholder="Sequence Description"
-          data-testid="new-seq-modal-desc-input"
-          onChange={(e) => {
-            setDescription(e.target.value);
-          }}
-        />
-        <PathInput
-          placeholder="Root Directory"
-          allowedExtention={["tjoy"]}
-          onChange={(event) => {
-            setProjectDirPath(event.target.value);
-          }}
-          pickerType="directory"
-          allowDirectoryCreation={true}
-        />
-        {
-          // <div className="flex gap-2">
-          //   <div className="flex-none w-[200px]">
-          //   <Select onValueChange={(e: InterpreterType) => {setType(e)}}>
-          //     <SelectTrigger className="w-[200px]">
-          //       <SelectValue placeholder="Dependencies Manager" />
-          //     </SelectTrigger>
-          //     <SelectContent>
-          //       <SelectGroup>
-          //         <SelectLabel>Interpreter</SelectLabel>
-          //         { availableInterpreter.map((interpreter) => (
-          //           <SelectItem value={interpreter} key={interpreter}>
-          //               { interpreter.charAt(0).toUpperCase() + interpreter.slice(1) }
-          //           </SelectItem>
-          //         ))}
-          //       </SelectGroup>
-          //     </SelectContent>
-          //   </Select>
-          //   </div>
-          //   <PathInput
-          //     placeholder="Interpreter"
-          //     onChange={(event) => {setInterpreterPath(event.target.value)}}
-          //   />
-          // </div>
-        }
-        <Button
-          variant={"default"}
-          data-testid="new-seq-modal-create-btn"
-          onClick={() => handleSubmit()}
-        >
-          New Sequence
-        </Button>
-      </DialogContent>
-    </Dialog>
-  );
-};