import and export inside flow

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

@@ -6,7 +6,8 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-	const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext);
+	const { removeFlow, updateFlow, flows, downloadFlow } =
+		useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
 	return (
@@ -57,7 +58,10 @@ export default function TabComponent({ selected, flow, onClick }) {
 								>
 									{flow.name}
 								</span>
-                <ArrowDownTrayIcon onClick={()=>downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/>
+								{/* <ArrowDownTrayIcon
+									onClick={() => downloadFlow()}
+									className="w-4 h-4 hover:text-blue-500 cursor-pointer"
+								/> */}
 							</div>
 						)}
 						<button

space_flow/src/pages/FlowPage/index.tsx

@@ -7,6 +7,7 @@ import ReactFlow, {
 	useNodesState,
 	ReactFlowProvider,
 	useReactFlow,
+	ControlButton,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -20,6 +21,10 @@ import BooleanNode from "../../CustomNodes/BooleanNode";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+} from "@heroicons/react/24/outline";
 
 const nodeTypes = {
 	genericNode: GenericNode,
@@ -32,14 +37,15 @@ const nodeTypes = {
 var _ = require("lodash");
 
 export default function FlowPage({ flow }) {
-  let { updateFlow, incrementNodeId } = useContext(TabsContext);
+	let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
+		useContext(TabsContext);
 	const { types, reactFlowInstance, setReactFlowInstance } =
 		useContext(typesContext);
 	const reactFlowWrapper = useRef(null);
 
-  function getId(){
+	function getId() {
-    return `dndnode_}`+incrementNodeId();
+		return `dndnode_}` + incrementNodeId();
-  };
+	}
 
 	const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
 	const { setErrorData } = useContext(alertContext);
@@ -50,7 +56,7 @@ export default function FlowPage({ flow }) {
 	const [edges, setEdges, onEdgesChange] = useEdgesState(
 		flow.data?.edges ?? []
 	);
-  const {setViewport} = useReactFlow()
+	const { setViewport } = useReactFlow();
 
 	useEffect(() => {
 		if (reactFlowInstance && flow) {
@@ -63,9 +69,7 @@ export default function FlowPage({ flow }) {
 		setNodes(flow?.data?.nodes ?? []);
 		setEdges(flow?.data?.edges ?? []);
 		if (reactFlowInstance) {
-      setViewport(
+			setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
-        flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
-      );
 		}
 	}, [flow, reactFlowInstance, setEdges, setNodes]);
 
@@ -171,7 +175,21 @@ export default function FlowPage({ flow }) {
 						onDrop={onDrop}
 					>
 						<Background />
-            <Controls></Controls>
+						<Controls>
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => uploadFlow()}
+							>
+								<ArrowUpTrayIcon />
+							</ControlButton>
+
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => downloadFlow()}
+							>
+								<ArrowDownTrayIcon />
+							</ControlButton>
+						</Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
 				</>