🚚 chore(frontend): move nameInputComponent to EditFlowSettingsComponent

🔨 refactor(frontend): update import paths for EditFlowSettingsComponent
🔨 refactor(frontend): remove unused id property from createNewFlow function in tabsContext
🔨 refactor(frontend): replace nameInputComponent with EditFlowSettingsComponent in exportModal and flowSettingsModal
The nameInputComponent has been renamed to EditFlowSettingsComponent to better reflect its purpose. The import paths have been updated accordingly. The id property is no longer needed in the createNewFlow function in tabsContext, so it has been removed. The exportModal and flowSettingsModal components have been updated to use the new EditFlowSettingsComponent instead of the old nameInputComponent.

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent } from "react";
-import { Textarea } from "../ui/textarea";
+import { Textarea } from "../../components/ui/textarea";
-import { Label } from "../ui/label";
+import { Label } from "../../components/ui/label";
-import { Input } from "../ui/input";
+import { Input } from "../../components/ui/input";
 
 type InputProps = {
   name: string | null;

src/frontend/src/contexts/tabsContext.tsx

@@ -504,7 +504,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const createNewFlow = (flowData, flow) => ({
     description: flowData.description,
     name: flow?.name ?? "New Flow",
-    id: uuidv4(),
     data: flowData.data,
   });
 

src/frontend/src/modals/exportModal/index.tsx

@@ -16,10 +16,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
-import EditFlowSettings from "../../components/nameInputComponent";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
-import { Label } from "../../components/ui/label";
-import { Input } from "../../components/ui/input";
-import { Textarea } from "../../components/ui/textarea";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -56,44 +53,15 @@ export default function ExportModal() {
           <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <Label>
+        <EditFlowSettings
-          <span className="font-medium">Name</span>
+          name={name}
-
+          description={description}
-          <Input
+          flows={flows}
-            className="mt-2 focus-visible:ring-1"
+          tabId={tabId}
-            onChange={(event) => {
+          setName={setName}
-              if (event.target.value != "") {
+          setDescription={setDescription}
-                let newFlow = flows.find((f) => f.id === tabId);
+          updateFlow={updateFlow}
-                newFlow.name = event.target.value;
+        />
-                setName(event.target.value);
-                updateFlow(newFlow);
-              } else {
-                setName(event.target.value);
-              }
-            }}
-            type="text"
-            name="name"
-            value={name ?? null}
-            placeholder="File name"
-            id="name"
-          />
-        </Label>
-        <Label>
-          <span className="font-medium">Description (optional)</span>
-          <Textarea
-            name="description"
-            id="description"
-            onChange={(event) => {
-              let newFlow = flows.find((f) => f.id === tabId);
-              newFlow.description = event.target.value;
-              updateFlow(newFlow);
-            }}
-            value={flows.find((f) => f.id === tabId).description ?? null}
-            placeholder="Flow description"
-            className="max-h-[100px] mt-2 focus-visible:ring-1"
-            rows={3}
-          />
-        </Label>
         <div className="flex items-center space-x-2">
           <Checkbox
             id="terms"

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -15,7 +15,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { updateFlowInDatabase } from "../../controllers/API";
-import EditFlowSettings from "../../components/nameInputComponent";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);