diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx index b2e2dd5adf..fd85b03806 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx @@ -1,10 +1,8 @@ -import { EDGE_GRAY_CIRCLE_MARKED_ID } from '@/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId'; +import { EDGE_BRANCH_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeBranchArrowMarkerId'; import { EDGE_GREEN_CIRCLE_MARKED_ID } from '@/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId'; import { EDGE_GREEN_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId'; import { EDGE_GREEN_ROUNDED_ARROW_MARKER_WIDTH_PX } from '@/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx'; import { EDGE_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId'; -import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx'; -import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx'; import { useTheme } from '@emotion/react'; export const WorkflowDiagramCustomMarkers = () => { @@ -40,17 +38,16 @@ export const WorkflowDiagramCustomMarkers = () => { - diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx index 7264da8762..5f40e8f994 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx @@ -51,7 +51,7 @@ export const WorkflowDiagramStepNodeReadonly = ({ variant={getNodeVariantFromStepRunStatus(data.runStatus)} nodeType={data.nodeType} Icon={} - displayHandle={false} + displayHandle onClick={() => { if ( !isDefined(workflowVisualizerWorkflowId) || diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramBaseEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramBaseEdge.tsx index 665b1e6b4e..fa6deab9be 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramBaseEdge.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramBaseEdge.tsx @@ -1,9 +1,9 @@ -import { EDGE_GRAY_CIRCLE_MARKED_ID } from '@/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId'; import { EDGE_GREEN_CIRCLE_MARKED_ID } from '@/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId'; import { EDGE_GREEN_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId'; import { EDGE_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId'; import { type Theme, useTheme } from '@emotion/react'; import { BaseEdge } from '@xyflow/react'; +import { isDefined } from 'twenty-shared/utils'; import { StepStatus } from 'twenty-shared/workflow'; const toMarkerId = (id: string) => `url(#${id})`; @@ -13,7 +13,7 @@ const getMarkerStart = (edgeExecutionStatus: StepStatus | undefined) => { return EDGE_GREEN_CIRCLE_MARKED_ID; } - return EDGE_GRAY_CIRCLE_MARKED_ID; + return undefined; }; const getMarkerEnd = (edgeExecutionStatus: StepStatus | undefined) => { @@ -49,9 +49,11 @@ export const WorkflowRunDiagramBaseEdge = ({ }: WorkflowRunDiagramBaseEdgeProps) => { const theme = useTheme(); + const markerStart = getMarkerStart(edgeExecutionStatus); + return ( { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-0", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "trigger", "target": "step1", @@ -133,8 +133,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-1", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step1", "target": "step2", @@ -147,8 +147,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-2", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step2", "target": "step3", @@ -349,8 +349,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-3", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "trigger", "target": "step1", @@ -363,8 +363,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-4", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step1", "target": "step2", @@ -377,8 +377,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-5", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step2", "target": "step3", @@ -579,8 +579,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-6", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "trigger", "target": "step1", @@ -593,8 +593,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-7", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step1", "target": "step2", @@ -607,8 +607,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-8", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step2", "target": "step3", @@ -828,8 +828,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-9", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "trigger", "target": "step1", @@ -842,8 +842,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-10", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step1", "target": "step2", @@ -856,8 +856,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-11", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step2", "target": "step3", @@ -870,8 +870,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-12", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "step3", "target": "step4", @@ -1057,8 +1057,8 @@ describe('generateWorkflowRunDiagram', () => { }, "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-13", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": false, "source": "trigger", "target": "step1", 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..6e1e43c61e 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 @@ -161,8 +161,8 @@ describe('getWorkflowVersionDiagram', () => { }, "deletable": true, "id": "8f3b2121-f194-4ba4-9fbf-0", - "markerEnd": "workflow-edge-arrow-rounded", - "markerStart": "workflow-edge-gray-circle", + "markerEnd": "workflow-edge-branch-arrow", + "markerStart": undefined, "selectable": true, "source": "trigger", "target": "step-1",