diff --git a/packages/twenty-e2e-testing/tests/workflow-creation.spec.ts b/packages/twenty-e2e-testing/tests/workflow-creation.spec.ts index 049837891..047ca15d8 100644 --- a/packages/twenty-e2e-testing/tests/workflow-creation.spec.ts +++ b/packages/twenty-e2e-testing/tests/workflow-creation.spec.ts @@ -28,7 +28,9 @@ test('Create workflow', async ({ page }) => { const nameInput = page.getByRole('textbox'); await nameInput.fill(NEW_WORKFLOW_NAME); - await nameInput.press('Enter'); + + const workflowDiagramContainer = page.locator('.react-flow__renderer'); + await workflowDiagramContainer.click(); const body = await createWorkflowResponse.json(); const newWorkflowId = body.data.createWorkflow.id; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx index 2220d2cb8..436ad06a2 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx @@ -80,7 +80,7 @@ export const CardComponents: Record = { [CardType.WorkflowCard]: ({ targetableObject }) => ( <> - + ), 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 ab90158d6..02c32427f 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 @@ -8,6 +8,7 @@ import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflo import { workflowReactFlowRefState } from '@/workflow/workflow-diagram/states/workflowReactFlowRefState'; import { WorkflowDiagramEdge, + WorkflowDiagramEdgeType, WorkflowDiagramNode, WorkflowDiagramNodeType, } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; @@ -17,6 +18,7 @@ import styled from '@emotion/styled'; import { Background, EdgeChange, + EdgeProps, FitViewOptions, NodeChange, NodeProps, @@ -61,8 +63,6 @@ const StyledResetReactflowStyles = styled.div` cursor: pointer; } - --xy-edge-stroke: ${({ theme }) => theme.border.color.strong}; - --xy-node-border-radius: none; --xy-node-border: none; --xy-node-background-color: none; @@ -85,6 +85,7 @@ const defaultFitViewOptions = { export const WorkflowDiagramCanvasBase = ({ status, nodeTypes, + edgeTypes, children, }: { status: WorkflowVersionStatus; @@ -99,6 +100,17 @@ export const WorkflowDiagramCanvasBase = ({ > > >; + edgeTypes: Partial< + Record< + WorkflowDiagramEdgeType, + React.ComponentType< + EdgeProps & { + data: any; + type: any; + } + > + > + >; children?: React.ReactNode; }) => { const theme = useTheme(); @@ -223,6 +235,7 @@ export const WorkflowDiagramCanvasBase = ({ minZoom={defaultFitViewOptions.minZoom} maxZoom={defaultFitViewOptions.maxZoom} nodeTypes={nodeTypes} + edgeTypes={edgeTypes} nodes={nodes} edges={edges} onNodesChange={handleNodesChange} 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 e9dee1613..af59403b9 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 @@ -2,6 +2,7 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow'; import { WorkflowDiagramCanvasBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase'; import { WorkflowDiagramCanvasEditableEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect'; import { WorkflowDiagramCreateStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode'; +import { WorkflowDiagramDefaultEdge } from '@/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge'; import { WorkflowDiagramEmptyTrigger } from '@/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger'; import { WorkflowDiagramStepNodeEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable'; import { ReactFlowProvider } from '@xyflow/react'; @@ -20,6 +21,9 @@ export const WorkflowDiagramCanvasEditable = ({ 'create-step': WorkflowDiagramCreateStepNode, 'empty-trigger': WorkflowDiagramEmptyTrigger, }} + edgeTypes={{ + default: WorkflowDiagramDefaultEdge, + }} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly.tsx index c48388e9c..960450ca4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly.tsx @@ -1,8 +1,10 @@ import { WorkflowVersion } from '@/workflow/types/Workflow'; import { WorkflowDiagramCanvasBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase'; import { WorkflowDiagramCanvasReadonlyEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect'; +import { WorkflowDiagramDefaultEdge } from '@/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge'; import { WorkflowDiagramEmptyTrigger } from '@/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger'; import { WorkflowDiagramStepNodeReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly'; +import { WorkflowDiagramSuccessEdge } from '@/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge'; import { ReactFlowProvider } from '@xyflow/react'; export const WorkflowDiagramCanvasReadonly = ({ @@ -18,6 +20,10 @@ export const WorkflowDiagramCanvasReadonly = ({ default: WorkflowDiagramStepNodeReadonly, 'empty-trigger': WorkflowDiagramEmptyTrigger, }} + edgeTypes={{ + default: WorkflowDiagramDefaultEdge, + success: WorkflowDiagramSuccessEdge, + }} /> 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 8de5b08d4..b2e2dd5ad 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,4 +1,10 @@ +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_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 = () => { @@ -19,6 +25,53 @@ export const WorkflowDiagramCustomMarkers = () => { fill={theme.border.color.strong} /> + + + + + + + + + + + + ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx new file mode 100644 index 000000000..80e003bf9 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx @@ -0,0 +1,31 @@ +import { useTheme } from '@emotion/react'; +import { BaseEdge, EdgeProps, getStraightPath } from '@xyflow/react'; + +type WorkflowDiagramDefaultEdgeProps = EdgeProps; + +export const WorkflowDiagramDefaultEdge = ({ + sourceX, + sourceY, + targetX, + targetY, + markerStart, + markerEnd, +}: WorkflowDiagramDefaultEdgeProps) => { + const theme = useTheme(); + + const [edgePath] = getStraightPath({ + sourceX, + sourceY, + targetX, + targetY, + }); + + return ( + + ); +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx index 8590d82cd..fbcf83c51 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx @@ -150,15 +150,13 @@ const StyledStepNodeLabel = styled.div<{ `; export const StyledHandle = styled(Handle)` - background-color: ${({ theme }) => theme.grayScale.gray25}; - border: none; - width: ${NODE_HANDLE_WIDTH_PX}px; height: ${NODE_HANDLE_HEIGHT_PX}px; + width: ${NODE_HANDLE_WIDTH_PX}px; `; const StyledSourceHandle = styled(StyledHandle)` - background-color: ${({ theme }) => theme.border.color.strong}; left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px; + visibility: hidden; `; const StyledTargetHandle = styled(StyledSourceHandle)` diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge.tsx new file mode 100644 index 000000000..dfa4c03b2 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge.tsx @@ -0,0 +1,60 @@ +import { EDGE_GREEN_ROUNDED_ARROW_MARKER_WIDTH_PX } from '@/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { + BaseEdge, + EdgeLabelRenderer, + EdgeProps, + getStraightPath, +} from '@xyflow/react'; +import { Label } from 'twenty-ui'; + +const StyledLabel = styled(Label)` + color: ${({ theme }) => theme.tag.text.turquoise}; +`; + +type WorkflowDiagramSuccessEdgeProps = EdgeProps; + +export const WorkflowDiagramSuccessEdge = ({ + sourceX, + sourceY, + targetX, + targetY, + markerStart, + markerEnd, + label, +}: WorkflowDiagramSuccessEdgeProps) => { + const theme = useTheme(); + + const [edgePath, labelX, labelY] = getStraightPath({ + sourceX, + sourceY, + targetX, + targetY, + }); + + return ( + <> + + + + + {label} + + + + ); +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx index 5cb00f94f..b2485cdda 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx @@ -1,17 +1,10 @@ -import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion'; import { WorkflowDiagramCanvasEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable'; import { WorkflowDiagramEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramEffect'; import '@xyflow/react/dist/style.css'; import { isDefined } from 'twenty-shared'; -export const WorkflowVisualizer = ({ - targetableObject, -}: { - targetableObject: ActivityTargetableObject; -}) => { - const workflowId = targetableObject.id; - +export const WorkflowVisualizer = ({ workflowId }: { workflowId: string }) => { const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId); return ( diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramCustomMarkers.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramCustomMarkers.stories.tsx new file mode 100644 index 000000000..b86dac5fb --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramCustomMarkers.stories.tsx @@ -0,0 +1,178 @@ +import styled from '@emotion/styled'; +import { Meta, StoryObj } from '@storybook/react'; +import { RecoilRoot } from 'recoil'; + +import { WorkflowDiagramCreateStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode'; +import { WorkflowDiagramDefaultEdge } from '@/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge'; +import { WorkflowDiagramEmptyTrigger } from '@/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger'; +import { WorkflowDiagramStepNodeReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly'; +import { WorkflowDiagramSuccessEdge } from '@/workflow/workflow-diagram/components/WorkflowDiagramSuccessEdge'; +import { WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION } from '@/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration'; +import { WORKFLOW_VISUALIZER_EDGE_SUCCESS_CONFIGURATION } from '@/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeSuccessConfiguration'; +import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; +import { ReactflowDecorator } from '~/testing/decorators/ReactflowDecorator'; +import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator'; +import { graphqlMocks } from '~/testing/graphqlMocks'; +import { workflowDiagramState } from '../../states/workflowDiagramState'; +import { WorkflowDiagramCanvasBase } from '../WorkflowDiagramCanvasBase'; + +const StyledContainer = styled.div` + height: 400px; + width: 100%; + position: relative; +`; + +const meta: Meta = { + title: 'Modules/Workflow/WorkflowDiagram/WorkflowDiagramCustomMarkers', + component: WorkflowDiagramCanvasBase, + parameters: { + msw: graphqlMocks, + }, + decorators: [ + WorkspaceDecorator, + ObjectMetadataItemsDecorator, + ReactflowDecorator, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultEdge: Story = { + args: { + status: 'DRAFT', + nodeTypes: { + default: WorkflowDiagramStepNodeReadonly, + 'create-step': WorkflowDiagramCreateStepNode, + 'empty-trigger': WorkflowDiagramEmptyTrigger, + }, + edgeTypes: { + default: WorkflowDiagramDefaultEdge, + }, + }, + decorators: [ + (Story) => ( + { + set(workflowDiagramState, { + nodes: [ + { + id: 'trigger-1', + type: 'default', + position: { x: 100, y: 100 }, + data: { + nodeType: 'trigger', + triggerType: 'DATABASE_EVENT', + name: 'When record is created', + isLeafNode: false, + }, + }, + { + id: 'action-1', + type: 'default', + position: { x: 300, y: 100 }, + data: { + nodeType: 'action', + actionType: 'CREATE_RECORD', + name: 'Create record', + isLeafNode: false, + }, + }, + { + id: 'create-step-1', + type: 'create-step', + position: { x: 500, y: 100 }, + data: { + nodeType: 'create-step', + parentNodeId: 'action-1', + }, + }, + ], + edges: [ + { + ...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION, + id: 'edge-1', + source: 'trigger-1', + target: 'action-1', + }, + { + ...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION, + id: 'edge-2', + source: 'action-1', + target: 'create-step-1', + }, + ], + }); + }} + > + + + + + ), + ], +}; + +export const SuccessEdge: Story = { + args: { + status: 'DRAFT', + nodeTypes: { + default: WorkflowDiagramStepNodeReadonly, + 'create-step': WorkflowDiagramCreateStepNode, + 'empty-trigger': WorkflowDiagramEmptyTrigger, + }, + edgeTypes: { + default: WorkflowDiagramDefaultEdge, + success: WorkflowDiagramSuccessEdge, + }, + }, + decorators: [ + (Story) => ( + { + set(workflowDiagramState, { + nodes: [ + { + id: 'trigger-1', + type: 'default', + position: { x: 100, y: 100 }, + data: { + nodeType: 'trigger', + triggerType: 'DATABASE_EVENT', + name: 'When record is created', + isLeafNode: false, + }, + }, + { + id: 'action-1', + type: 'default', + position: { x: 300, y: 100 }, + data: { + nodeType: 'action', + actionType: 'CREATE_RECORD', + name: 'Create record', + isLeafNode: false, + }, + }, + ], + edges: [ + { + ...WORKFLOW_VISUALIZER_EDGE_SUCCESS_CONFIGURATION, + id: 'edge-1', + source: 'trigger-1', + target: 'action-1', + type: 'success', + label: '1 item', + }, + ], + }); + }} + > + + + + + ), + ], +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId.ts new file mode 100644 index 000000000..fca9b40f5 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId.ts @@ -0,0 +1 @@ +export const EDGE_GRAY_CIRCLE_MARKED_ID = 'workflow-edge-gray-circle'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId.ts new file mode 100644 index 000000000..e0329325c --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId.ts @@ -0,0 +1 @@ +export const EDGE_GREEN_CIRCLE_MARKED_ID = 'workflow-edge-green-circle'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId.ts new file mode 100644 index 000000000..c8a855e81 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId.ts @@ -0,0 +1,2 @@ +export const EDGE_GREEN_ROUNDED_ARROW_MARKER_ID = + 'workflow-edge-green-arrow-rounded'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx.ts new file mode 100644 index 000000000..20a2b0e34 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx.ts @@ -0,0 +1 @@ +export const EDGE_GREEN_ROUNDED_ARROW_MARKER_WIDTH_PX = 6; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId.ts index 9f2a061ee..4799e2c3d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId.ts @@ -1 +1 @@ -export const EDGE_ROUNDED_ARROW_MARKER_ID = 'arrow-rounded'; +export const EDGE_ROUNDED_ARROW_MARKER_ID = 'workflow-edge-arrow-rounded'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts index 298b2ff6b..6ad2582e4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts @@ -1,7 +1,9 @@ +import { EDGE_GRAY_CIRCLE_MARKED_ID } from '@/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId'; import { EDGE_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId'; import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; export const WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION = { + markerStart: EDGE_GRAY_CIRCLE_MARKED_ID, markerEnd: EDGE_ROUNDED_ARROW_MARKER_ID, deletable: false, selectable: false, diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeSuccessConfiguration.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeSuccessConfiguration.ts new file mode 100644 index 000000000..a6d23019a --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeSuccessConfiguration.ts @@ -0,0 +1,10 @@ +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 { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; + +export const WORKFLOW_VISUALIZER_EDGE_SUCCESS_CONFIGURATION = { + markerStart: EDGE_GREEN_CIRCLE_MARKED_ID, + markerEnd: EDGE_GREEN_ROUNDED_ARROW_MARKER_ID, + deletable: false, + selectable: false, +} satisfies Partial; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts index 2d909f66d..7c3dd37d3 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts @@ -47,3 +47,5 @@ export type WorkflowDiagramNodeType = | 'default' | 'empty-trigger' | 'create-step'; + +export type WorkflowDiagramEdgeType = 'default' | 'success'; 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 925bc753a..5dfa0888a 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 @@ -133,7 +133,8 @@ describe('getWorkflowVersionDiagram', () => { { "deletable": false, "id": "8f3b2121-f194-4ba4-9fbf-0", - "markerEnd": "arrow-rounded", + "markerEnd": "workflow-edge-arrow-rounded", + "markerStart": "workflow-edge-gray-circle", "selectable": false, "source": "trigger", "target": "step-1",