Fixed bug on Export Modal

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

@@ -10,22 +10,22 @@ type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
-  invalidName: boolean;
+  invalidName?: boolean;
-  setInvalidName: (invalidName: boolean) => void;
+  setInvalidName?: (invalidName: boolean) => void;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
 };
 
 export const EditFlowSettings: React.FC<InputProps> = ({
-  name,
+  name: myName,
   invalidName,
   setInvalidName,
   description,
   maxLength = 50,
   flows,
   tabId,
-  setName,
+  setName: setMyName,
   setDescription,
   updateFlow,
 }) => {
@@ -46,17 +46,25 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-    if (!nameLists.current.includes(value)) {
+    if (invalidName !== undefined) {
-      setInvalidName(false);
+      if (!nameLists.current.includes(value)) {
-    } else {
+        setInvalidName(false);
-      setInvalidName(true);
+      } else {
+        setInvalidName(true);
+      }
     }
     setName(value);
+    setMyName(value);
   };
 
-  const [desc, setDesc] = useState(
+  const [name, setName] = useState(myName);
-    flows.find((f) => f.id === tabId).description
+
-  );
+  const [desc, setDesc] = useState(description);
+
+  useEffect(() => {
+    setName(name);
+    setDesc(description);
+  }, [name, description]);
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     flows.find((f) => f.id === tabId).description = event.target.value;

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 } =
+  const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
-    useContext(TabsContext);
   const [checked, setChecked] = useState(false);
-  const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
+  const flow = flows.find((f) => f.id === tabId);
-  const [description, setDescription] = useState(
+  useEffect(() => {
-    flows.find((f) => f.id === tabId).description
+    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 { setSuccessData } = useContext(alertContext);
-  const ref = useRef();
+  const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
-  const { flows, tabId, updateFlow, setTabsState, saveFlow } =
+  const flow = flows.find((f) => f.id === tabId);
-    useContext(TabsContext);
+  useEffect(() => {
-  const maxLength = 50;
+    setName(flow.name);
-  const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
+    setDescription(flow.description);
-  const [description, setDescription] = useState(
+  }, [flow.name, flow.description]);
-    flows.find((f) => f.id === tabId).description
+  const [name, setName] = useState(flow.name);
-  );
+  const [description, setDescription] = useState(flow.description);
   const [invalidName, setInvalidName] = useState(false);
 
   function handleClick() {