From 83b9c3239a25e9642923882f21778278970645b8 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 14 Jun 2023 15:02:38 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20chore(frontend):=20move=20nameIn?=
 =?UTF-8?q?putComponent=20to=20EditFlowSettingsComponent=20=F0=9F=94=A8=20?=
 =?UTF-8?q?refactor(frontend):=20update=20import=20paths=20for=20EditFlowS?=
 =?UTF-8?q?ettingsComponent=20=F0=9F=94=A8=20refactor(frontend):=20remove?=
 =?UTF-8?q?=20unused=20id=20property=20from=20createNewFlow=20function=20i?=
 =?UTF-8?q?n=20tabsContext=20=F0=9F=94=A8=20refactor(frontend):=20replace?=
 =?UTF-8?q?=20nameInputComponent=20with=20EditFlowSettingsComponent=20in?=
 =?UTF-8?q?=20exportModal=20and=20flowSettingsModal=20The=20nameInputCompo?=
 =?UTF-8?q?nent=20has=20been=20renamed=20to=20EditFlowSettingsComponent=20?=
 =?UTF-8?q?to=20better=20reflect=20its=20purpose.=20The=20import=20paths?=
 =?UTF-8?q?=20have=20been=20updated=20accordingly.=20The=20id=20property?=
 =?UTF-8?q?=20is=20no=20longer=20needed=20in=20the=20createNewFlow=20funct?=
 =?UTF-8?q?ion=20in=20tabsContext,=20so=20it=20has=20been=20removed.=20The?=
 =?UTF-8?q?=20exportModal=20and=20flowSettingsModal=20components=20have=20?=
 =?UTF-8?q?been=20updated=20to=20use=20the=20new=20EditFlowSettingsCompone?=
 =?UTF-8?q?nt=20instead=20of=20the=20old=20nameInputComponent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EditFlowSettingsComponent/index.tsx       |  6 +--
 src/frontend/src/contexts/tabsContext.tsx     |  1 -
 src/frontend/src/modals/exportModal/index.tsx | 52 ++++---------------
 .../src/modals/flowSettingsModal/index.tsx    |  2 +-
 4 files changed, 14 insertions(+), 47 deletions(-)

diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 75aa451af..acd537c0a 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent } from "react";
-import { Textarea } from "../ui/textarea";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { Label } from "../../components/ui/label";
+import { Input } from "../../components/ui/input";
 
 type InputProps = {
   name: string | null;
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 4400956ce..4daac7b71 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/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,
   });
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index a5771dd92..05076665f 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/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 { Label } from "../../components/ui/label";
-import { Input } from "../../components/ui/input";
-import { Textarea } from "../../components/ui/textarea";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -56,44 +53,15 @@ export default function ExportModal() {
           <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <Label>
-          <span className="font-medium">Name</span>
-
-          <Input
-            className="mt-2 focus-visible:ring-1"
-            onChange={(event) => {
-              if (event.target.value != "") {
-                let newFlow = flows.find((f) => f.id === tabId);
-                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>
+        <EditFlowSettings
+          name={name}
+          description={description}
+          flows={flows}
+          tabId={tabId}
+          setName={setName}
+          setDescription={setDescription}
+          updateFlow={updateFlow}
+        />
         <div className="flex items-center space-x-2">
           <Checkbox
             id="terms"
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index ac59ed965..e81a2cfb1 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/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);