admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add workflow success edge (#10120)

Browse Source 
- Refactor the handles: the source handles are now part of the edges as
markerStart
- **As the source handles are now part of the edges, we can delete the
`markLeafNodes` logic; this can be done in another PR**. See
https://github.com/twentyhq/core-team-issues/issues/386
- Create a custom edge component for the default edge
- Create a custom edge component for the success edge; this includes a
label

**The edges can be tested in Storybook. I wrote two stories for the
edges.**

| Default | Success |
|--------|--------|
| ![CleanShot 2025-02-11 at 11 46
09@2x](https://github.com/user-attachments/assets/c7c42328-6502-4c77-bdc9-dea825d4651a)
| ![CleanShot 2025-02-11 at 11 46
16@2x](https://github.com/user-attachments/assets/572204de-299c-4cbc-9900-46744b59c351)
|
This commit is contained in:
Baptiste Devessier
2025-02-11 14:01:11 +01:00
committed by GitHub
parent 4f06b83d7f
commit 179d3ae2a4
20 changed files with 376 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGrayCircleMarkedId.ts Normal file
View File

@ -0,0 +1 @@
export const EDGE_GRAY_CIRCLE_MARKED_ID = 'workflow-edge-gray-circle';

1
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenCircleMarkedId.ts Normal file
View File

@ -0,0 +1 @@
export const EDGE_GREEN_CIRCLE_MARKED_ID = 'workflow-edge-green-circle';

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerId.ts Normal file
View File

@ -0,0 +1,2 @@
export const EDGE_GREEN_ROUNDED_ARROW_MARKER_ID =
'workflow-edge-green-arrow-rounded';

1
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeGreenRoundedArrowMarkerWidthPx.ts Normal file
View File

@ -0,0 +1 @@
export const EDGE_GREEN_ROUNDED_ARROW_MARKER_WIDTH_PX = 6;

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId.ts
View File

@ -1 +1 @@
export const EDGE_ROUNDED_ARROW_MARKER_ID = 'arrow-rounded';
export const EDGE_ROUNDED_ARROW_MARKER_ID = 'workflow-edge-arrow-rounded';

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts
View File

@ -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,

10
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeSuccessConfiguration.ts Normal file
View File

@ -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<WorkflowDiagramEdge>;