From 5311b07ae84b7b5db02b83dc059058aa0752964b Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Fri, 19 Sep 2025 15:07:22 +0200
Subject: [PATCH] Support loops in workflow versions (#14603)

## In the workflow

<img width="3456" height="2160" alt="CleanShot 2025-09-18 at 17 57
23@2x"
src="https://github.com/user-attachments/assets/5041f1d8-ea43-44f5-b3f3-012054b0352d"
/>

## In the workflow version

<img width="3456" height="2234" alt="CleanShot 2025-09-18 at 17 57
32@2x"
src="https://github.com/user-attachments/assets/37137907-f00d-448c-ab81-0d5ee55b0437"
/>

Closes https://github.com/twentyhq/core-team-issues/issues/1452
---
 .../WorkflowDiagramDefaultEdgeReadonly.tsx     | 18 +++++++++++++++++-
 .../WorkflowDiagramStepNodeReadonly.tsx        | 10 ++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx
index 53eb282976..21fe59ee68 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx
@@ -1,7 +1,11 @@
+import { WorkflowDiagramEdgeLabel } from '@/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabel';
+import { WorkflowDiagramEdgeLabelContainer } from '@/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabelContainer';
 import { type WorkflowDiagramEdgeComponentProps } from '@/workflow/workflow-diagram/workflow-edges/types/WorkflowDiagramEdgeComponentProps';
 import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/getEdgePath';
 import { useTheme } from '@emotion/react';
-import { BaseEdge } from '@xyflow/react';
+import { i18n } from '@lingui/core';
+import { BaseEdge, EdgeLabelRenderer } from '@xyflow/react';
+import { isDefined } from 'twenty-shared/utils';
 
 type WorkflowDiagramDefaultEdgeReadonlyProps =
   WorkflowDiagramEdgeComponentProps;
@@ -42,6 +46,18 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({
           style={{ stroke: theme.border.color.strong }}
         />
       ))}
+
+      <EdgeLabelRenderer>
+        {isDefined(data?.labelOptions) && (
+          <WorkflowDiagramEdgeLabelContainer
+            sourceX={sourceX}
+            sourceY={sourceY}
+            position={data.labelOptions.position}
+          >
+            <WorkflowDiagramEdgeLabel label={i18n._(data.labelOptions.label)} />
+          </WorkflowDiagramEdgeLabelContainer>
+        )}
+      </EdgeLabelRenderer>
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx
index 9cac927826..d46a8e5aba 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx
@@ -104,6 +104,16 @@ export const WorkflowDiagramStepNodeReadonly = ({
         position={Position.Bottom}
         disableHoverEffect
       />
+
+      {isDefined(data.rightHandleOptions) && (
+        <WorkflowDiagramHandleSource
+          id={data.rightHandleOptions.id}
+          type="source"
+          selected={selected}
+          position={Position.Right}
+          disableHoverEffect
+        />
+      )}
     </>
   );
 };