Prevent edges selection and deletion (#13830)

https://github.com/user-attachments/assets/5a3d5a4b-2d8e-418a-a638-09acd0b94d84

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -7,6 +7,7 @@ import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { WorkflowDiagramCustomMarkers } from '@/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers';
 import { WorkflowDiagramRightClickCommandMenu } from '@/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu';
+import { useEdgeHovered } from '@/workflow/workflow-diagram/hooks/useEdgeHovered';
 import { useRightDrawerState } from '@/workflow/workflow-diagram/hooks/useRightDrawerState';
 import { workflowDiagramComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramComponentState';
 import { workflowDiagramPanOnDragComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramPanOnDragComponentState';
@@ -26,18 +27,17 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   Background,
-  type EdgeChange,
-  type EdgeProps,
-  type FitViewOptions,
-  type NodeChange,
-  type NodeProps,
   ReactFlow,
   applyEdgeChanges,
   applyNodeChanges,
   useReactFlow,
   type Connection,
+  type EdgeChange,
+  type EdgeProps,
+  type FitViewOptions,
+  type NodeChange,
+  type NodeProps,
   type OnNodeDrag,
-  type OnBeforeDelete,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import React, {
@@ -53,7 +53,6 @@ import { isDefined } from 'twenty-shared/utils';
 import { Tag, type TagColor } from 'twenty-ui/components';
 import { THEME_COMMON } from 'twenty-ui/theme';
 import { FeatureFlagKey } from '~/generated/graphql';
-import { useEdgeHovered } from '@/workflow/workflow-diagram/hooks/useEdgeHovered';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;
@@ -113,7 +112,6 @@ export const WorkflowDiagramCanvasBase = ({
   tagText,
   onInit,
   onConnect,
-  onDeleteEdge,
   onNodeDragStop,
   handlePaneContextMenu,
   nodesConnectable = false,
@@ -147,7 +145,6 @@ export const WorkflowDiagramCanvasBase = ({
   tagText: string;
   onInit?: () => void;
   onConnect?: (params: Connection) => void;
-  onDeleteEdge?: (edge: WorkflowDiagramEdge) => void;
   onNodeDragStop?: OnNodeDrag<WorkflowDiagramNode>;
   nodesConnectable?: boolean;
   nodesDraggable?: boolean;
@@ -414,21 +411,6 @@ export const WorkflowDiagramCanvasBase = ({
     ],
   );
 
-  const onBeforeDelete: OnBeforeDelete<
-    WorkflowDiagramNode,
-    WorkflowDiagramEdge
-  > = async (diagram) => {
-    if (
-      diagram.nodes.length === 0 // We don't call deleteEdge when node diagram deletion is called
-    ) {
-      for (const edge of diagram.edges) {
-        onDeleteEdge?.(edge);
-      }
-      return diagram;
-    }
-    return false;
-  };
-
   const onPaneContextMenu = useCallback(
     (event: MouseEvent | React.MouseEvent<Element, MouseEvent>) => {
       event.preventDefault();
@@ -474,17 +456,11 @@ export const WorkflowDiagramCanvasBase = ({
         onEdgesChange={handleEdgesChange}
         onConnect={isWorkflowBranchEnabled ? onConnect : undefined}
         onNodeDragStop={isWorkflowBranchEnabled ? onNodeDragStop : undefined}
-        onBeforeDelete={
-          isWorkflowBranchEnabled ? onBeforeDelete : async () => false
-        }
         selectNodesOnDrag={false}
         proOptions={{ hideAttribution: true }}
         multiSelectionKeyCode={null}
         nodesFocusable={false}
         nodesDraggable={isWorkflowBranchEnabled ? nodesDraggable : false}
-        edgesFocusable={
-          isWorkflowBranchEnabled ? isDefined(onDeleteEdge) : false
-        }
         panOnDrag={workflowDiagramPanOnDrag}
         onPaneContextMenu={
           isWorkflowBranchEnabled ? onPaneContextMenu : undefined

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable.tsx

@@ -10,13 +10,9 @@ import { WorkflowDiagramFilteringDisabledEdgeEditable } from '@/workflow/workflo
 import { WorkflowDiagramStepNodeEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable';
 import { workflowDiagramComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramComponentState';
 import { workflowDiagramRightClickMenuPositionState } from '@/workflow/workflow-diagram/states/workflowDiagramRightClickMenuPositionState';
-import {
-  type WorkflowDiagramEdge,
-  type WorkflowDiagramNode,
-} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { type WorkflowDiagramNode } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getWorkflowVersionStatusTagProps } from '@/workflow/workflow-diagram/utils/getWorkflowVersionStatusTagProps';
 import { useCreateEdge } from '@/workflow/workflow-steps/hooks/useCreateEdge';
-import { useDeleteEdge } from '@/workflow/workflow-steps/hooks/useDeleteEdge';
 import { useUpdateStep } from '@/workflow/workflow-steps/hooks/useUpdateStep';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { addEdge, type Connection, ReactFlowProvider } from '@xyflow/react';
@@ -44,10 +40,6 @@ export const WorkflowDiagramCanvasEditable = ({
     workflow: workflowWithCurrentVersion,
   });
 
-  const { deleteEdge } = useDeleteEdge({
-    workflow: workflowWithCurrentVersion,
-  });
-
   const { updateStep } = useUpdateStep({
     workflow: workflowWithCurrentVersion,
   });
@@ -69,11 +61,8 @@ export const WorkflowDiagramCanvasEditable = ({
         edges: addEdge(edgeConnect, diagram.edges),
       };
     });
-    createEdge?.(edgeConnect);
-  };
 
-  const onDeleteEdge = async (edge: WorkflowDiagramEdge) => {
-    await deleteEdge(edge);
+    createEdge(edgeConnect);
   };
 
   const onNodeDragStop = async (
@@ -135,7 +124,6 @@ export const WorkflowDiagramCanvasEditable = ({
         handlePaneContextMenu={handlePaneContextMenu}
         nodesConnectable
         nodesDraggable
-        onDeleteEdge={onDeleteEdge}
       />
 
       <WorkflowDiagramCanvasEditableEffect />

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts

@@ -159,11 +159,11 @@ describe('getWorkflowVersionDiagram', () => {
       "data": {
         "edgeType": "default",
       },
-      "deletable": true,
+      "deletable": false,
       "id": "8f3b2121-f194-4ba4-9fbf-0",
       "markerEnd": "workflow-edge-arrow-rounded",
       "markerStart": "workflow-edge-gray-circle",
-      "selectable": true,
+      "selectable": false,
       "source": "trigger",
       "target": "step-1",
       "type": "empty-filter--editable",

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts

@@ -85,9 +85,6 @@ export const generateWorkflowDiagram = ({
     edges.push({
       ...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
       type: defaultEdgeType,
-      ...(defaultEdgeType.includes('editable')
-        ? { deletable: true, selectable: true }
-        : {}),
       id: v4(),
       source: TRIGGER_STEP_ID,
       target: stepLinkToTriggerId,
@@ -99,9 +96,6 @@ export const generateWorkflowDiagram = ({
       edges.push({
         ...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
         type: defaultEdgeType,
-        ...(defaultEdgeType.includes('editable')
-          ? { deletable: true, selectable: true }
-          : {}),
         id: v4(),
         source: step.id,
         target: child,