✨ feat(flowSettingsModal): add handleSaveFlow function to save flow changes to the database and display success message

The changes in this commit include removing unused imports and formatting the code to improve readability. The handleSaveFlow function was added to save flow changes to the database and display a success message. This function is called when the user clicks the save button.
🎨 style(flowSettingsModal): remove unused imports and format code

src/frontend/src/modals/flowSettingsModal/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,17 +14,17 @@ import {
 } 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 { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
+import { updateFlowInDatabase } from "../../controllers/API";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
-  const {setErrorData} = useContext(alertContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
-  const { flows, tabId, updateFlow,} = useContext(TabsContext);
+  const { flows, tabId, updateFlow } = useContext(TabsContext);
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -38,8 +33,19 @@ export default function FlowSettingsModal() {
       }, 300);
     }
   }
+
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(flows.find((f) => f.id === tabId).description);
+  const [description, setDescription] = useState(
+    flows.find((f) => f.id === tabId).description
+  );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
@@ -76,7 +82,7 @@ export default function FlowSettingsModal() {
             name="description"
             id="description"
             onChange={(event) => {
-              setDescription(event.target.value)
+              setDescription(event.target.value);
             }}
             value={description ?? null}
             placeholder="Flow description"
@@ -88,15 +94,8 @@ export default function FlowSettingsModal() {
         <DialogFooter>
           <Button
             onClick={() => {
-              if(name !== ""){
+              handleSaveFlow(flows.find((f) => f.id === tabId));
-                let newFlow = flows.find((f) => f.id === tabId);
+              setSuccessData({ title: "Changes saved successfully" });
-                newFlow.name = name;
-                newFlow.description = description;
-                updateFlow(newFlow);
-                closePopUp();
-              } else {
-                setErrorData({title: "Error Saving Settings", list: ["The name must not be empty."]})
-              }
             }}
             type="submit"
           >