feat: add FlowExecutionSubscriberComponent and FlowExecutionWatcherComponent for managing execution results

Author: nicosammito

src/packages/ce/src/flow/components/FlowExecutionSubscriberComponent.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import React from "react"
+import {useSubscription} from "@apollo/client/react"
+import {ExecutionResult, Subscription} from "@code0-tech/sagittarius-graphql-types"
+import {FlowExecution, useFlowExecutionStore} from "@edition/flow/hooks/Flow.execution.hook"
+import {useService} from "@code0-tech/pictor"
+import {FlowService} from "@edition/flow/services/Flow.service"
+import flowExecutionResultSubscription from "@edition/flow/services/subscriptions/Flow.executionResult.subscription.graphql"
+
+export interface FlowExecutionSubscriberComponentProps {
+    execution: FlowExecution
+}
+
+export const FlowExecutionSubscriberComponent: React.FC<FlowExecutionSubscriberComponentProps> = ({execution}) => {
+
+    const flowService = useService(FlowService)
+    const removeExecution = useFlowExecutionStore(s => s.removeExecution)
+
+    useSubscription<Subscription>(flowExecutionResultSubscription, {
+        variables: {executionIdentifier: execution.executionIdentifier},
+        onData: (data) => {
+            const executionResult = data.data.data?.namespacesProjectsFlowsExecutionResult?.executionResult as ExecutionResult | undefined
+            if (executionResult) {
+                flowService.addExecutionResult(execution.flowId, executionResult)
+                removeExecution(execution.executionIdentifier)
+            }
+        },
+        onComplete: () => removeExecution(execution.executionIdentifier),
+        onError: () => removeExecution(execution.executionIdentifier),
+    })
+
+    return null
+}

src/packages/ce/src/flow/components/FlowExecutionWatcherComponent.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import React from "react"
+import {useFlowExecutionStore} from "@edition/flow/hooks/Flow.execution.hook"
+import {FlowExecutionSubscriberComponent} from "@edition/flow/components/FlowExecutionSubscriberComponent"
+
+/**
+ * Keeps one subscription alive per pending manual execution. Each subscriber writes
+ * the incoming execution result into the flow store and drops the pending entry.
+ */
+export const FlowExecutionWatcherComponent: React.FC = () => {
+
+    const executions = useFlowExecutionStore(s => s.executions)
+
+    return <>
+        {executions.map(execution => (
+            <FlowExecutionSubscriberComponent
+                key={execution.executionIdentifier}
+                execution={execution}
+            />
+        ))}
+    </>
+}