Fixed bug on Export Modal (#751)

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

@@ -10,8 +10,8 @@ type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
-  invalidName: boolean;
-  setInvalidName: (invalidName: boolean) => void;
+  invalidName?: boolean;
+  setInvalidName?: (invalidName: boolean) => void;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
@@ -46,21 +46,29 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-    if (!nameLists.current.includes(value)) {
-      setInvalidName(false);
-    } else {
-      setInvalidName(true);
+    if (invalidName !== undefined) {
+      if (!nameLists.current.includes(value)) {
+        setInvalidName(false);
+      } else {
+        setInvalidName(true);
+      }
     }
     setName(value);
+    setCurrentName(value);
   };
 
-  const [desc, setDesc] = useState(
-    flows.find((f) => f.id === tabId).description
-  );
+  const [currentName, setCurrentName] = useState(name);
+
+  const [currentDescription, setCurrentDescription] = useState(description);
+
+  useEffect(() => {
+    setCurrentName(name);
+    setCurrentDescription(description);
+  }, [name, description]);
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     flows.find((f) => f.id === tabId).description = event.target.value;
-    setDesc(flows.find((f) => f.id === tabId).description);
+    setCurrentDescription(flows.find((f) => f.id === tabId).description);
     setDescription(event.target.value);
   };
 
@@ -81,7 +89,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           onChange={handleNameChange}
           type="text"
           name="name"
-          value={name ?? ""}
+          value={currentName ?? ""}
           placeholder="File name"
           id="name"
           maxLength={maxLength}
@@ -96,7 +104,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           name="description"
           id="description"
           onChange={handleDescriptionChange}
-          value={desc}
+          value={currentDescription}
           placeholder="Flow description"
           className="mt-2 max-h-[100px] font-normal"
           rows={3}

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

@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef, useContext, useState } from "react";
+import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -9,14 +9,17 @@ import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
-  const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
-    useContext(TabsContext);
+  const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
   const [checked, setChecked] = useState(false);
-  const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
-  );
+  const flow = flows.find((f) => f.id === tabId);
+  useEffect(() => {
+    setName(flow.name);
+    setDescription(flow.description);
+  }, [flow.name, flow.description]);
+  const [name, setName] = useState(flow.name);
+  const [description, setDescription] = useState(flow.description);
   const [open, setOpen] = useState(false);
+
   return (
     <BaseModal size="smaller" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{props.children}</BaseModal.Trigger>

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

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -14,15 +14,15 @@ export default function FlowSettingsModal({
   open: boolean;
   setOpen: (open: boolean) => void;
 }) {
-  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const ref = useRef();
-  const { flows, tabId, updateFlow, setTabsState, saveFlow } =
-    useContext(TabsContext);
-  const maxLength = 50;
-  const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
-  );
+  const { setSuccessData } = useContext(alertContext);
+  const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
+  const flow = flows.find((f) => f.id === tabId);
+  useEffect(() => {
+    setName(flow.name);
+    setDescription(flow.description);
+  }, [flow.name, flow.description]);
+  const [name, setName] = useState(flow.name);
+  const [description, setDescription] = useState(flow.description);
   const [invalidName, setInvalidName] = useState(false);
 
   function handleClick() {