From 79992b53d1774543219990f52b20e39cd283159d Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Fri, 25 Jul 2025 11:35:48 +0200
Subject: [PATCH] Fix insert step button not displayed (#13432)

as title
---
 ...owDiagramFilteringDisabledEdgeEditable.tsx | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilteringDisabledEdgeEditable.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilteringDisabledEdgeEditable.tsx
index 14f33010b..c3929b327 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilteringDisabledEdgeEditable.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilteringDisabledEdgeEditable.tsx
@@ -6,7 +6,12 @@ import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowD
 import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { BaseEdge, EdgeProps, getStraightPath } from '@xyflow/react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getStraightPath,
+} from '@xyflow/react';
 import { useState } from 'react';
 import { IconPlus } from 'twenty-ui/display';
 import { IconButtonGroup } from 'twenty-ui/input';
@@ -76,33 +81,35 @@ export const WorkflowDiagramFilteringDisabledEdgeEditable = ({
         style={{ stroke: theme.border.color.strong }}
       />
 
-      <StyledContainer
-        labelY={labelY}
-        data-click-outside-id={WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}
-      >
-        <StyledWrapper
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
+      <EdgeLabelRenderer>
+        <StyledContainer
+          labelY={labelY}
+          data-click-outside-id={WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}
         >
-          <StyledHoverZone />
-          {(hovered || isSelected) && (
-            <StyledIconButtonGroup
-              className="nodrag nopan"
-              iconButtons={[
-                {
-                  Icon: IconPlus,
-                  onClick: () => {
-                    startNodeCreation({
-                      parentStepId: source,
-                      nextStepId: target,
-                    });
+          <StyledWrapper
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+          >
+            <StyledHoverZone />
+            {(hovered || isSelected) && (
+              <StyledIconButtonGroup
+                className="nodrag nopan"
+                iconButtons={[
+                  {
+                    Icon: IconPlus,
+                    onClick: () => {
+                      startNodeCreation({
+                        parentStepId: source,
+                        nextStepId: target,
+                      });
+                    },
                   },
-                },
-              ]}
-            />
-          )}
-        </StyledWrapper>
-      </StyledContainer>
+                ]}
+              />
+            )}
+          </StyledWrapper>
+        </StyledContainer>
+      </EdgeLabelRenderer>
     </>
   );
 };