From de95e0db3cb5c7ff1cd292966d3174bf77cbb3b3 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 14 Jun 2023 12:15:48 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(exportModal.tsx,=20flowSet?=
 =?UTF-8?q?tingsModal.tsx):=20refactor=20name=20and=20description=20input?=
 =?UTF-8?q?=20fields=20into=20a=20reusable=20component=20=E2=9C=A8=20feat(?=
 =?UTF-8?q?nameInputComponent.tsx):=20add=20character=20limit=20to=20name?=
 =?UTF-8?q?=20input=20field=20The=20name=20and=20description=20input=20fie?=
 =?UTF-8?q?lds=20in=20the=20ExportModal=20and=20FlowSettingsModal=20compon?=
 =?UTF-8?q?ents=20have=20been=20refactored=20into=20a=20reusable=20compone?=
 =?UTF-8?q?nt=20called=20EditFlowSettings.=20This=20improves=20code=20reus?=
 =?UTF-8?q?ability=20and=20reduces=20code=20duplication.=20The=20EditFlowS?=
 =?UTF-8?q?ettings=20component=20also=20includes=20a=20character=20limit?=
 =?UTF-8?q?=20of=2050=20characters=20for=20the=20name=20input=20field=20to?=
 =?UTF-8?q?=20prevent=20users=20from=20entering=20names=20that=20are=20too?=
 =?UTF-8?q?=20long.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/exportModal/index.tsx | 55 +++++++------------
 .../src/modals/flowSettingsModal/index.tsx    | 43 ++++-----------
 2 files changed, 31 insertions(+), 67 deletions(-)

diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index a7abb7528..dc14573e9 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,10 +1,5 @@
-import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
+import { useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -19,11 +14,9 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
-import { Label } from "@radix-ui/react-label";
 import { Checkbox } from "../../components/ui/checkbox";
-import { Textarea } from "../../components/ui/textarea";
-import { Input } from "../../components/ui/input";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
+import EditFlowSettings from "../../components/nameInputComponent";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -31,6 +24,7 @@ export default function ExportModal() {
   const ref = useRef();
   const { setErrorData } = useContext(alertContext);
   const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
+  const [isMaxLength, setIsMaxLength] = useState(false);
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -41,6 +35,9 @@ export default function ExportModal() {
   }
   const [checked, setChecked] = useState(true);
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
+  const [description, setDescription] = useState(
+    flows.find((f) => f.id === tabId).description
+  );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
@@ -56,29 +53,16 @@ export default function ExportModal() {
           <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <Label>
-          <span className="font-medium">Name</span>
-
-          <Input
-            className="mt-2"
-            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>
+        <EditFlowSettings
+          name={name}
+          description={description}
+          flows={flows}
+          tabId={tabId}
+          setName={setName}
+          setDescription={setDescription}
+          updateFlow={updateFlow}
+        />
+        {/* <Label>
           <span className="font-medium">Description (optional)</span>
           <Textarea
             name="description"
@@ -93,7 +77,7 @@ export default function ExportModal() {
             className="max-h-[100px] mt-2"
             rows={3}
           />
-        </Label>
+        </Label> */}
         <div className="flex items-center space-x-2">
           <Checkbox
             id="terms"
@@ -113,7 +97,8 @@ export default function ExportModal() {
           <Button
             onClick={() => {
               if (checked) downloadFlow(flows.find((f) => f.id === tabId));
-              else downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)));
+              else
+                downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)));
             }}
             type="submit"
           >
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 7a5adc0a0..ac59ed965 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -13,11 +13,9 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
-import { Label } from "@radix-ui/react-label";
-import { Textarea } from "../../components/ui/textarea";
-import { Input } from "../../components/ui/input";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { updateFlowInDatabase } from "../../controllers/API";
+import EditFlowSettings from "../../components/nameInputComponent";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);
@@ -25,6 +23,7 @@ export default function FlowSettingsModal() {
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
   const { flows, tabId, updateFlow } = useContext(TabsContext);
+  const maxLength = 50;
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -61,35 +60,15 @@ export default function FlowSettingsModal() {
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <Label>
-          <span className="font-medium">Name</span>
-
-          <Input
-            className="mt-2"
-            onChange={(event) => {
-              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) => {
-              setDescription(event.target.value);
-            }}
-            value={description ?? null}
-            placeholder="Flow description"
-            className="max-h-[100px] mt-2"
-            rows={3}
-          />
-        </Label>
+        <EditFlowSettings
+          name={name}
+          description={description}
+          flows={flows}
+          tabId={tabId}
+          setName={setName}
+          setDescription={setDescription}
+          updateFlow={updateFlow}
+        />
 
         <DialogFooter>
           <Button