Fixed saving issue and implemented saved message

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -43,14 +43,7 @@ export const MenuBar = ({flows, tabId }) => {
   const { openPopUp } = useContext(PopUpContext);
   const { undo, redo } = useContext(undoRedoContext);
 
-  function handleSaveFlow(flow) {
+  
-    try {
-      updateFlowInDatabase(flow);
-      // updateFlowStyleInDataBase(flow);
-    } catch (err) {
-      setErrorData(err);
-    }
-  }
 
   function handleAddFlow() {
     try {

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,4 +1,9 @@
-import { Bars2Icon, PencilSquareIcon, Square2StackIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  Bars2Icon,
+  PencilSquareIcon,
+  Square2StackIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
   classNames,
@@ -18,11 +23,14 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { Separator } from "../../../../components/ui/separator";
+import { alertContext } from "../../../../contexts/alertContext";
+import { updateFlowInDatabase } from "../../../../controllers/API";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
   const { flows, tabId } = useContext(TabsContext);
+  const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
 
@@ -57,8 +65,13 @@ export default function ExtraSidebar() {
     });
   }
 
-  function handleSaveFlow(current_flow: any) {
+  function handleSaveFlow(flow) {
-    throw new Error("Function not implemented.");
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
   }
 
   return (
@@ -77,7 +90,8 @@ export default function ExtraSidebar() {
 
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
-              className={classNames("hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className={classNames(
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -88,7 +102,8 @@ export default function ExtraSidebar() {
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
-              className={classNames("hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className={classNames(
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -103,6 +118,7 @@ export default function ExtraSidebar() {
             className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               handleSaveFlow(flows.find((f) => f.id === tabId));
+              setSuccessData({ title: "Changes saved successfully" });
             }}
           >
             <Save className="w-5 h-5  dark:text-gray-300"></Save>
@@ -127,8 +143,6 @@ export default function ExtraSidebar() {
         </div>
       </div>
 
-      
-
       <div className="w-full overflow-auto scrollbar-hide">
         {Object.keys(dataFilter)
           .sort()