Add basic support for iterators in workflow runs (#14680)

## Workflow

<img width="3456" height="2234" alt="CleanShot 2025-09-24 at 11 50
49@2x"
src="https://github.com/user-attachments/assets/c9db9f27-9c0a-4b77-ac49-330e6f934a9e"
/>

## Workflow run

<img width="3456" height="2234" alt="CleanShot 2025-09-24 at 11 50
56@2x"
src="https://github.com/user-attachments/assets/c95d984f-03f0-4aa2-9677-dc86d851172f"
/>
This commit is contained in:
Baptiste Devessier
2025-09-24 16:12:15 +02:00
committed by GitHub
parent 58e1a2261d
commit d477db261a
7 changed files with 30 additions and 87 deletions
@@ -1,8 +1,8 @@
import { type WorkflowRunStatus } from '@/workflow/types/Workflow';
import { WorkflowDiagramCanvasBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase';
import { WorkflowDiagramDefaultEdgeRun } from '@/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeRun';
import { getWorkflowRunStatusTagProps } from '@/workflow/workflow-diagram/utils/getWorkflowRunStatusTagProps';
import { WorkflowDiagramDefaultEdgeReadonly } from '@/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly';
import { WorkflowRunDiagramStepNode } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode';
import { ReactFlowProvider } from '@xyflow/react';
@@ -22,7 +22,7 @@ export const WorkflowRunDiagramCanvas = ({
default: WorkflowRunDiagramStepNode,
}}
edgeTypes={{
run: WorkflowDiagramDefaultEdgeRun,
readonly: WorkflowDiagramDefaultEdgeReadonly,
}}
tagContainerTestId="workflow-run-status"
tagColor={tagProps.color}
@@ -119,4 +119,4 @@ export type WorkflowDiagramEdgeData = WorkflowDiagramDefaultEdgeData;
export type WorkflowDiagramNodeType = 'default' | 'empty-trigger';
export type WorkflowDiagramEdgeType = 'blank' | 'editable' | 'readonly' | 'run';
export type WorkflowDiagramEdgeType = 'blank' | 'editable' | 'readonly';
@@ -124,7 +124,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step1",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -142,7 +142,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step2",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -160,7 +160,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step3",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
],
@@ -363,7 +363,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step1",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -381,7 +381,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step2",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -399,7 +399,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step3",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
],
@@ -602,7 +602,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step1",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -620,7 +620,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step2",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -638,7 +638,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step3",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
],
@@ -860,7 +860,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step1",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -878,7 +878,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step2",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -896,7 +896,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step3",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
{
@@ -914,7 +914,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step4",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
],
@@ -1102,7 +1102,7 @@ describe('generateWorkflowRunDiagram', () => {
"sourceHandle": "default",
"target": "step1",
"targetHandle": "default",
"type": "run",
"type": "readonly",
"zIndex": -2,
},
],
@@ -4,6 +4,7 @@ import {
} from '@/workflow/types/Workflow';
import {
type WorkflowDiagramEdgeData,
type WorkflowDiagramEdgeType,
type WorkflowRunDiagram,
type WorkflowRunDiagramNode,
type WorkflowRunDiagramStepNodeData,
@@ -87,7 +88,7 @@ export const generateWorkflowRunDiagram = ({
return {
...edge,
type: 'run',
type: 'readonly' satisfies WorkflowDiagramEdgeType,
data: {
...edge.data,
edgeType: 'default',
@@ -1,42 +0,0 @@
import { WorkflowRunDiagramBaseEdge } from '@/workflow/workflow-diagram/workflow-edges/components/WorkflowRunDiagramBaseEdge';
import { type WorkflowDiagramEdgeComponentProps } from '@/workflow/workflow-diagram/workflow-edges/types/WorkflowDiagramEdgeComponentProps';
import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/getEdgePath';
type WorkflowDiagramDefaultEdgeRunProps = WorkflowDiagramEdgeComponentProps;
export const WorkflowDiagramDefaultEdgeRun = ({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
markerStart,
markerEnd,
data,
}: WorkflowDiagramDefaultEdgeRunProps) => {
const { segments } = getEdgePath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
markerStart,
markerEnd,
strategy: data?.edgePathStrategy,
});
return (
<>
{segments.map((segment) => (
<WorkflowRunDiagramBaseEdge
key={segment.path}
path={segment.path}
markerStart={segment.markerStart}
markerEnd={segment.markerEnd}
/>
))}
</>
);
};
@@ -1,27 +0,0 @@
import { type WorkflowDiagramEdgeComponentProps } from '@/workflow/workflow-diagram/workflow-edges/types/WorkflowDiagramEdgeComponentProps';
import { useTheme } from '@emotion/react';
import { BaseEdge } from '@xyflow/react';
type WorkflowRunDiagramBaseEdgeProps = Pick<
WorkflowDiagramEdgeComponentProps,
'markerStart' | 'markerEnd'
> & {
path: string;
};
export const WorkflowRunDiagramBaseEdge = ({
path,
markerStart,
markerEnd,
}: WorkflowRunDiagramBaseEdgeProps) => {
const theme = useTheme();
return (
<BaseEdge
markerStart={markerStart}
markerEnd={markerEnd}
path={path}
style={{ stroke: theme.border.color.strong }}
/>
);
};
@@ -161,6 +161,17 @@ export const WorkflowRunDiagramStepNode = ({
selected={selected}
runStatus={data.runStatus}
/>
{isDefined(data.rightHandleOptions) && (
<WorkflowDiagramHandleSource
id={data.rightHandleOptions.id}
type="source"
position={Position.Right}
disableHoverEffect
selected={selected}
runStatus={data.runStatus}
/>
)}
</>
);
};