diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index ebc29643d..731835310 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -11,6 +11,10 @@ import { import { TabsContext } from "../../../../contexts/tabsContext"; import EditNodeModal from "../../../../modals/EditNodeModal"; import { nodeToolbarPropsType } from "../../../../types/components"; +import { + createFlowComponent, + downloadNode, +} from "../../../../utils/reactflowUtils"; import { classNames } from "../../../../utils/utils"; export default function NodeToolbarComponent({ @@ -62,7 +66,8 @@ export default function NodeToolbarComponent({ updateNodeInternals(data.id); break; case "SaveAll": - console.log("SaveAll"); + downloadNode(createFlowComponent(data)); + break; } }; diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index b64c09e86..91c462340 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -7,6 +7,7 @@ export type FlowType = { data: ReactFlowJsonObject | null; description: string; style?: FlowStyleType; + isNode?: boolean; }; export type NodeType = { id: string; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index df8c784c4..0d2f10233 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -8,7 +8,7 @@ import { } from "reactflow"; import { specialCharsRegex } from "../constants/constants"; import { APITemplateType } from "../types/api"; -import { FlowType, NodeType } from "../types/flow"; +import { FlowType, NodeDataType, NodeType } from "../types/flow"; import { cleanEdgesType, unselectAllNodesType, @@ -365,3 +365,35 @@ export function convertValuesToNumbers(arr) { return newObj; }); } + +export function createFlowComponent(nodeData: NodeDataType): FlowType { + const flowNode: FlowType = { + data: { + edges: [], + nodes: [ + { + data: nodeData, + id: nodeData.id, + position: { x: 0, y: 0 }, + type: "genericNode", + }, + ], + viewport: { x: 1, y: 1, zoom: 1 }, + }, + description: nodeData.node?.description || "", + name: nodeData.node?.display_name || "", + id: nodeData.id || "", + isNode: true, + }; + return flowNode; +} + +export function downloadNode(NodeFLow: FlowType) { + const element = document.createElement("a"); + const file = new Blob([JSON.stringify(NodeFLow)], { + type: "application/json", + }); + element.href = URL.createObjectURL(file); + element.download = `${NodeFLow.name}.json`; + element.click(); +}