From 245e69e622d78ef4ea10ae4f4713f1145b048cdf Mon Sep 17 00:00:00 2001 From: Baptiste Devessier Date: Mon, 11 Aug 2025 19:06:34 +0200 Subject: [PATCH] Prevent edges selection and deletion (#13830) https://github.com/user-attachments/assets/5a3d5a4b-2d8e-418a-a638-09acd0b94d84 --- .../components/WorkflowDiagramCanvasBase.tsx | 36 ++++--------------- .../WorkflowDiagramCanvasEditable.tsx | 16 ++------- .../getWorkflowVersionDiagram.test.ts | 4 +-- .../utils/generateWorkflowDiagram.ts | 6 ---- 4 files changed, 10 insertions(+), 52 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx index 9086a7f95a..9e8b6314ee 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx +++ b/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; 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) => { 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 diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable.tsx index 6fbbae1c05..aaf171107a 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable.tsx +++ b/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} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts index d4f7e6183c..76cd7093ab 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts +++ b/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", diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts index 78efb063ba..843727c8eb 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts +++ b/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,