Merge pull request #537 from code0-tech/feat/#434

Export flow functionality for dev mode

Author: nicosammito

src/components/d-flow/DFlow.view.ts

@@ -1,18 +1,18 @@
 import type {
     DataType,
-    Flow,
-    FlowSetting,
+    Flow, FlowInput,
+    FlowSetting, FlowSettingInput,
     FlowType, FunctionDefinition,
     LiteralValue,
     Maybe,
-    NodeFunction,
-    NodeParameter,
+    NodeFunction, NodeFunctionInput,
+    NodeParameter, NodeParameterInput,
     NodeParameterValue,
     ReferenceValue,
     RuntimeParameterDefinition,
     Scalars
 } from "@code0-tech/sagittarius-graphql-types";
-import {ValidationResult} from "../../utils/inspection";
+import {ValidationResult} from "../../utils";
 
 export class FlowView {
 
@@ -156,6 +156,17 @@ export class FlowView {
             name: this._name,
         }
     }
+
+    jsonInput(): FlowInput {
+        return <FlowInput>{
+            name: this._name,
+            nodes: this._nodes?.map(node => node.jsonInput()),
+            settings: this._settings?.map(setting => setting.jsonInput()),
+            startingNodeId: this._startingNodeId,
+            type: `gid://sagittarius/FlowType/1`
+
+        }
+    }
 }
 
 export class NodeFunctionView {
@@ -229,6 +240,15 @@ export class NodeFunctionView {
             updatedAt: this._updatedAt,
         }
     }
+
+    jsonInput(): NodeFunctionInput {
+        return <NodeFunctionInput>{
+            nextNodeId: this._nextNodeId,
+            id: this._id,
+            parameters: this._parameters ? this._parameters.map(param => param.jsonInput()) : undefined,
+            runtimeFunctionId: this._functionDefinition?.runtimeFunctionDefinition?.id
+        }
+    }
 }
 
 export class NodeParameterView {
@@ -306,6 +326,19 @@ export class NodeParameterView {
             value: this._value instanceof NodeFunctionView ? this._value.json() : this._value,
         }
     }
+
+    jsonInput(): NodeParameterInput {
+        return <NodeParameterInput>{
+            value: this._value instanceof NodeFunctionView ? {
+                functionValue: this._value.jsonInput()
+            } : this._value?.__typename === "ReferenceValue" ? {
+                referenceValue: this._value as ReferenceValue
+            } : {
+                literalValue: this._value as LiteralValue
+            },
+            runtimeParameterDefinitionId: this.runtimeParameter?.id
+        }
+    }
 }
 
 export class FlowSettingView {
@@ -362,4 +395,11 @@ export class FlowSettingView {
             updatedAt: this._updatedAt
         }
     }
+
+    jsonInput(): FlowSettingInput {
+        return <FlowSettingInput>{
+            value: this.value,
+            flowSettingIdentifier: this.flowSettingIdentifier
+        }
+    }
 }

src/components/d-flow/control/DFlowControl.tsx

@@ -29,11 +29,14 @@ export const DFlowControl: React.FC = () => {
 
     return <Panel position="bottom-left">
         <Flex style={{flexDirection: "column", gap: "1rem"}}>
-            <Flex align="stretch" style={{gap: ".7rem"}}>
+            <Flex align="center" style={{gap: ".7rem"}}>
                 <ButtonGroup>
-                    <Button paddingSize={"xxs"} color={"secondary"} onClick={() => zoomIn()}><IconPlus size={15}/></Button>
-                    <Button paddingSize={"xxs"} color={"secondary"} onClick={() => zoomOut()}><IconMinus size={15}/></Button>
-                    <Button paddingSize={"xxs"} color={"secondary"} onClick={() => center()}><IconFocusCentered size={15}/></Button>
+                    <Button py={"0"} paddingSize={"xxs"} variant={"none"} color={"secondary"}
+                            onClick={() => zoomIn()}><IconPlus size={15}/></Button>
+                    <Button py={"0"} paddingSize={"xxs"} variant={"none"} color={"secondary"} onClick={() => zoomOut()}><IconMinus
+                        size={15}/></Button>
+                    <Button py={"0"} paddingSize={"xxs"} variant={"none"} color={"secondary"}
+                            onClick={() => center()}><IconFocusCentered size={15}/></Button>
                 </ButtonGroup>
                 <Badge color={"primary"} style={{border: "none"}}>{getCurrentZoomInPercent()}%</Badge>
             </Flex>

src/components/d-flow/export/DFlowExport.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import React from "react"
+import {Panel} from "@xyflow/react"
+import {Flow} from "@code0-tech/sagittarius-graphql-types"
+import {useService, useStore} from "../../../utils"
+import {DFlowReactiveService} from "../DFlow.service"
+import {Button} from "../../button/Button"
+
+export interface DFlowExportProps {
+    flowId: Flow['id']
+}
+
+export const DFlowExport: React.FC<DFlowExportProps> = (props) => {
+
+    const {flowId} = props
+
+    const flowService = useService(DFlowReactiveService)
+    const flowStore = useStore(DFlowReactiveService)
+    const flow = React.useMemo(() => flowService.getById(flowId), [flowStore, flowId])
+
+    const handleExport = React.useCallback(() => {
+        if (!flow) return
+
+        // Hole JSON-Daten
+        const data = flow.jsonInput?.()
+        if (!data) return
+
+        const json =
+            typeof data === "string" ? data : JSON.stringify(data, null, 2)
+
+        // Blob + Download-Link
+        const blob = new Blob([json], { type: "application/json" })
+        const url = URL.createObjectURL(blob)
+
+        const a = document.createElement("a")
+        a.href = url
+        a.download = `flow-${flow.name}.json`
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+
+        URL.revokeObjectURL(url)
+    }, [flow])
+
+    return <Panel position="top-right">
+        <Button paddingSize={"xxs"} onClick={handleExport}>
+            Export flow
+        </Button>
+    </Panel>
+}

src/components/d-resizable/DResizable.stories.tsx

@@ -36,6 +36,7 @@ import {
     NamespacesProjectsFlowsCreateInput,
     NamespacesProjectsFlowsCreatePayload, NamespacesProjectsFlowsDeleteInput, NamespacesProjectsFlowsDeletePayload
 } from "@code0-tech/sagittarius-graphql-types";
+import {DFlowExport} from "../d-flow/export/DFlowExport";
 
 const meta: Meta = {
     title: "Dashboard Resizable",
@@ -72,7 +73,7 @@ export const Dashboard = () => {
     const [flowStore, flowService] = useReactiveArrayService<FlowView, DFlowReactiveService>(DFlowReactiveServiceExtend, [new FlowView({
         id: "gid://sagittarius/Flow/1",
         type: {
-            id: "gid://sagittarius/TypesFlowType/842",
+            id: "gid://sagittarius/FlowType/867",
         },
         name: "de/codezero/examples/REST Flow",
         settings: {
@@ -179,6 +180,7 @@ const FlowExample = () => {
         <Background variant={BackgroundVariant.Dots} color="rgba(255,255,255, .05)" gap={8} size={2}/>
         <DFlowControl/>
         <DFlowValidation flowId={"gid://sagittarius/Flow/1"}/>
+        <DFlowExport flowId={"gid://sagittarius/Flow/1"}/>
         {/*<DFlowViewportMiniMap/>*/}
     </DFlow>
 }