4146 - add clientside support for the Subflow task dispatcher

kresimir-coko · kresimir-coko · commit c020e2c6c60e · 2026-02-18T09:56:37.000+01:00
diff --git a/client/src/pages/platform/workflow-editor/utils/createBranchEdges.ts b/client/src/pages/platform/workflow-editor/utils/createBranchEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {BranchCaseType, NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -90,7 +90,10 @@ function createEdgesForSingleCase(
 
         const sourceTaskComponentName = sourceTaskId.split('_')[0];
 
-        if (TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName) && sourceTaskComponentName !== 'loopBreak') {
+        if (
+            TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName) &&
+            !CHILDLESS_TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName)
+        ) {
             const nestedBottomGhostId = `${sourceTaskId}-${sourceTaskComponentName}-bottom-ghost`;
 
             const edgeFromNestedGhostToNextTask = {
@@ -118,7 +121,10 @@ function createEdgesForSingleCase(
     const lastTaskId = caseTasks[caseTasks.length - 1].name;
     const lastTaskComponentName = lastTaskId.split('_')[0];
 
-    if (TASK_DISPATCHER_NAMES.includes(lastTaskComponentName) && lastTaskComponentName !== 'loopBreak') {
+    if (
+        TASK_DISPATCHER_NAMES.includes(lastTaskComponentName) &&
+        !CHILDLESS_TASK_DISPATCHER_NAMES.includes(lastTaskComponentName)
+    ) {
         const nestedBottomGhostId = `${lastTaskId}-${lastTaskComponentName}-bottom-ghost`;
 
         const edgeFromNestedGhostToBottomGhost = {
diff --git a/client/src/pages/platform/workflow-editor/utils/createConditionEdges.ts b/client/src/pages/platform/workflow-editor/utils/createConditionEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -233,7 +233,7 @@ function createBranchExitEdge(
 
         const lastTaskComponentName = lastTaskNodeId.split('_')[0];
 
-        if (lastTaskNode?.data.taskDispatcher && lastTaskComponentName !== 'loopBreak') {
+        if (lastTaskNode?.data.taskDispatcher && !CHILDLESS_TASK_DISPATCHER_NAMES.includes(lastTaskComponentName)) {
             const nestedBottomGhostId = `${lastTaskNodeId}-${lastTaskComponentName}-bottom-ghost`;
 
             if (nestedBottomGhostId) {
diff --git a/client/src/pages/platform/workflow-editor/utils/createEachEdges.ts b/client/src/pages/platform/workflow-editor/utils/createEachEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -79,7 +79,10 @@ function createEdgeSubtaskEdges(eachId: string, eachChildTask: WorkflowTask): Ed
     };
 
     // Check if the child task is itself a task dispatcher
-    if (TASK_DISPATCHER_NAMES.includes(childTaskComponentName) && childTaskComponentName !== 'loopBreak') {
+    if (
+        TASK_DISPATCHER_NAMES.includes(childTaskComponentName) &&
+        !CHILDLESS_TASK_DISPATCHER_NAMES.includes(childTaskComponentName)
+    ) {
         const nestedBottomGhostId = `${childTaskId}-${childTaskComponentName}-bottom-ghost`;
 
         const edgeFromNestedGhostToBottomGhost = {
diff --git a/client/src/pages/platform/workflow-editor/utils/createForkJoinEdges.ts b/client/src/pages/platform/workflow-editor/utils/createForkJoinEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -107,7 +107,10 @@ function createForkJoinTaskEdges(
 
         const sourceTaskComponentName = sourceTaskId.split('_')[0];
 
-        if (TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName) && sourceTaskComponentName !== 'loopBreak') {
+        if (
+            TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName) &&
+            !CHILDLESS_TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName)
+        ) {
             const nestedBottomGhostId = `${sourceTaskId}-${sourceTaskComponentName}-bottom-ghost`;
 
             const edgeFromNestedGhostToNextTask = {
@@ -135,7 +138,10 @@ function createForkJoinTaskEdges(
     const lastTaskId = branch[branch.length - 1].name;
     let lastTaskComponentName = lastTaskId.split('_')[0];
 
-    if (TASK_DISPATCHER_NAMES.includes(lastTaskComponentName) && lastTaskComponentName !== 'loopBreak') {
+    if (
+        TASK_DISPATCHER_NAMES.includes(lastTaskComponentName) &&
+        !CHILDLESS_TASK_DISPATCHER_NAMES.includes(lastTaskComponentName)
+    ) {
         if (lastTaskComponentName === 'fork-join') {
             lastTaskComponentName = 'forkJoin';
         }
diff --git a/client/src/pages/platform/workflow-editor/utils/createLoopEdges.ts b/client/src/pages/platform/workflow-editor/utils/createLoopEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -98,7 +98,7 @@ function createLoopSubtaskEdges(loopId: string, loopChildTasks: Array<WorkflowTa
         const sourceTaskComponentName = task.name.split('_')[0];
 
         const isTaskDispatcher = TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName);
-        const isLoopBreak = sourceTaskComponentName === 'loopBreak';
+        const isLeafTaskDispatcher = CHILDLESS_TASK_DISPATCHER_NAMES.includes(sourceTaskComponentName);
         const isLastTask = index === loopChildTasks.length - 1;
 
         let targetId;
@@ -112,7 +112,7 @@ function createLoopSubtaskEdges(loopId: string, loopChildTasks: Array<WorkflowTa
             targetHandleId = undefined;
         }
 
-        if (!isTaskDispatcher || isLoopBreak) {
+        if (!isTaskDispatcher || isLeafTaskDispatcher) {
             const edgeBetweenSubtasks = {
                 id: `${sourceTaskName}=>${targetId}`,
                 source: sourceTaskName,
diff --git a/client/src/pages/platform/workflow-editor/utils/createParallelEdges.ts b/client/src/pages/platform/workflow-editor/utils/createParallelEdges.ts
@@ -1,4 +1,4 @@
-import {EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
+import {CHILDLESS_TASK_DISPATCHER_NAMES, EDGE_STYLES, TASK_DISPATCHER_NAMES} from '@/shared/constants';
 import {WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {NodeDataType} from '@/shared/types';
 import {Edge, Node} from '@xyflow/react';
@@ -89,7 +89,10 @@ function createParallelTaskEdges(
 
     taskEdges.push(edgeFromTopGhostToTask);
 
-    if (TASK_DISPATCHER_NAMES.includes(taskComponentName) && taskComponentName !== 'loopBreak') {
+    if (
+        TASK_DISPATCHER_NAMES.includes(taskComponentName) &&
+        !CHILDLESS_TASK_DISPATCHER_NAMES.includes(taskComponentName)
+    ) {
         const nestedBottomGhostId = `${taskId}-${taskComponentName}-bottom-ghost`;
 
         const edgeFromNestedGhostToBottomGhost = {
diff --git a/client/src/pages/platform/workflow-editor/utils/taskDispatcherConfig.tsx b/client/src/pages/platform/workflow-editor/utils/taskDispatcherConfig.tsx
@@ -50,6 +50,10 @@ export function buildGenericNodeData(
                 newNodeData.loopBreakData = {
                     loopBreakId: taskDispatcherId,
                 };
+            } else if (type === 'subflow') {
+                newNodeData.subflowData = {
+                    subflowId: taskDispatcherId,
+                };
             } else if (type === 'branch') {
                 newNodeData.branchData = {
                     branchId: taskDispatcherId,
@@ -482,6 +486,27 @@ export const TASK_DISPATCHER_CONFIG = {
             },
         }),
     },
+    subflow: {
+        buildNodeData: ({baseNodeData, taskDispatcherContext, taskDispatcherId}: BuildNodeDataType): NodeDataType =>
+            buildGenericNodeData(baseNodeData, taskDispatcherContext, taskDispatcherId, 'subflow'),
+
+        contextIdentifier: 'subflowId',
+        dataKey: 'subflowData',
+        extractContextFromPlaceholder: (placeholderId: string): TaskDispatcherContextType => {
+            const parts = placeholderId.split('-');
+            const index = parseInt(parts[parts.length - 1] || '-1');
+
+            return {index, taskDispatcherId: parts[0]};
+        },
+        getDispatcherId: (context: TaskDispatcherContextType) => context.subflowId,
+        getInitialParameters: (properties: Array<PropertyAllType>) => ({
+            ...getParametersWithDefaultValues({properties}),
+        }),
+        getSubtasks: () => [],
+        getTask: getTaskDispatcherTask,
+        initializeParameters: () => ({}),
+        updateTaskParameters: ({task}: UpdateTaskParametersType): WorkflowTask => task,
+    },
 };
 
 /**
diff --git a/client/src/shared/constants.tsx b/client/src/shared/constants.tsx
@@ -126,6 +126,8 @@ export const TASK_DISPATCHER_NAMES = [
     'subflow',
 ];
 
+export const CHILDLESS_TASK_DISPATCHER_NAMES = ['loopBreak', 'subflow'];
+
 export const SORT_OPTIONS = [
     {
         label: 'Last edited',
diff --git a/client/src/shared/types.ts b/client/src/shared/types.ts
@@ -126,6 +126,10 @@ type LoopBreakDataType = {
     loopBreakId: string;
 };
 
+type SubflowDataType = {
+    subflowId: string;
+};
+
 type ParallelDataType = {
     index: number;
     parallelId: string;
@@ -146,6 +150,7 @@ export type TaskDispatcherDataType = BranchDataType &
     EachDataType &
     LoopDataType &
     LoopBreakDataType &
+    SubflowDataType &
     ConditionDataType &
     ParallelDataType &
     ForkJoinDataType;
@@ -227,6 +232,7 @@ export type NodeDataType = {
         index: number;
     };
     parentClusterRootId?: string;
+    subflowData?: SubflowDataType;
     taskDispatcher?: boolean;
     taskDispatcherId?: string;
     title?: string;
@@ -346,6 +352,7 @@ export type TaskDispatcherContextType = {
     loopBreakId?: string;
     loopId?: string;
     parallelId?: string;
+    subflowId?: string;
     taskDispatcherId: string;
 };
 

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,8 @@ export const TASK_DISPATCHER_NAMES = [`
`126`	`126`	`'subflow',`
`127`	`127`	`];`
`128`	`128`
	`129`	`+export const CHILDLESS_TASK_DISPATCHER_NAMES = ['loopBreak', 'subflow'];`
	`130`	`+`
`129`	`131`	`export const SORT_OPTIONS = [`
`130`	`132`	`{`
`131`	`133`	`label: 'Last edited',`