🎨 style(exportModal.tsx, flowSettingsModal.tsx): refactor name and description input fields into a reusable component

✨ feat(nameInputComponent.tsx): add character limit to name input field
The name and description input fields in the ExportModal and FlowSettingsModal components have been refactored into a reusable component called EditFlowSettings. This improves code reusability and reduces code duplication. The EditFlowSettings component also includes a character limit of 50 characters for the name input field to prevent users from entering names that are too long.

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

@@ -1,10 +1,5 @@
-import {
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
-  XMarkIcon,
+import { useContext, useRef, useState } from "react";
-  ArrowDownTrayIcon,
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, 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>
+        <EditFlowSettings
-          <span className="font-medium">Name</span>
+          name={name}
-
+          description={description}
-          <Input
+          flows={flows}
-            className="mt-2"
+          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>
-        <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"
           >

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>
+        <EditFlowSettings
-          <span className="font-medium">Name</span>
+          name={name}
-
+          description={description}
-          <Input
+          flows={flows}
-            className="mt-2"
+          tabId={tabId}
-            onChange={(event) => {
+          setName={setName}
-              setName(event.target.value);
+          setDescription={setDescription}
-            }}
+          updateFlow={updateFlow}
-            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>
 
         <DialogFooter>
           <Button