download flow for each tab implemented, tabs bug not solved yet

space_flow/src/contexts/tabsContext.tsx

@@ -10,6 +10,7 @@ type TabsContextType={
     addFlow:(flowData?:any)=>void;
     updateFlow:(newFlow:flow)=>void;
     incrementNodeId:()=>number,
+    downloadFlow:()=>void
 }
 
 const TabsContextInitialValue = {
@@ -20,7 +21,7 @@ const TabsContextInitialValue = {
     addFlow:(flowData?:any)=>{},
     updateFlow:(newFlow:flow)=>{},
     incrementNodeId:()=>0,
-    
+    downloadFlow:()=>{}
 
 }
 
@@ -54,6 +55,14 @@ export function TabsProvider({children}){
         }
     }, [])
 
+    function downloadFlow(){
+        const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}`
+        const link = document.createElement('a')
+        link.href = jsonString
+        link.download = `${flows[tabIndex].name}.json`
+        link.click()
+    }
+    
     function removeFlow(id:string){
         setFlows(prevState=>{
             const newFlows = [...prevState];
@@ -97,7 +106,7 @@ export function TabsProvider({children}){
     }
 
     return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow}}>
             {children}
         </TabsContext.Provider>
     )

space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

@@ -1,3 +1,4 @@
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext, useRef, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -5,7 +6,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-  const { removeFlow, updateFlow,flows } = useContext(TabsContext);
+	const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
 	return (
@@ -46,6 +47,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 								}}
 							/>
 						) : (
+							<div className="flex items-center gap-2">
 								<span
 									className="text-left truncate"
 									onDoubleClick={() => {
@@ -55,13 +57,17 @@ export default function TabComponent({ selected, flow, onClick }) {
 								>
 									{flow.name}
 								</span>
+                <ArrowDownTrayIcon onClick={()=>downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/>
+							</div>
 						)}
 						<button
 							onClick={() => {
 								removeFlow(flow.id);
 							}}
 						>
-              {flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
+							{flows.length > 1 && (
+								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+							)}
 						</button>
 					</div>
 				)