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

Improve workflow arrows' design (#9619)

Browse Source 
Old design:

![CleanShot_2024-11-12_at_17 37
33](https://github.com/user-attachments/assets/1fcaba6d-f23c-4679-b038-d051abeb0bbd)


New design:

![CleanShot 2025-01-14 at 18 22
10@2x](https://github.com/user-attachments/assets/a683163d-2e3c-42ed-8abd-1f1fd31bf7db)
This commit is contained in:
Baptiste Devessier
2025-01-14 22:38:44 +01:00
committed by GitHub
parent f2bee55e6c
commit c543a930cd
8 changed files with 66 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/addCreateStepNodes.ts
+2 -5
View File
@@ -1,9 +1,9 @@
import { WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION } from '@/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration';
import {
WorkflowDiagram,
WorkflowDiagramEdge,
WorkflowDiagramNode,
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { MarkerType } from '@xyflow/react';
import { v4 } from 'uuid';
export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => {
@@ -30,13 +30,10 @@ export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => {
updatedNodes.push(newCreateStepNode);
updatedEdges.push({
...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
id: v4(),
source: node.id,
target: newCreateStepNode.id,
markerEnd: {
type: MarkerType.ArrowClosed,
},
deletable: false,
});
}
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts
+2 -9
View File
@@ -1,6 +1,7 @@
import { WorkflowStep, WorkflowTrigger } from '@/workflow/types/Workflow';
import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
import { WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION } from '@/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration';
import {
WorkflowDiagram,
WorkflowDiagramEdge,
@@ -8,7 +9,6 @@ import {
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
import { MarkerType } from '@xyflow/react';
import { capitalize } from 'twenty-shared';
import { isDefined } from 'twenty-ui';
import { v4 } from 'uuid';
@@ -23,7 +23,6 @@ export const generateWorkflowDiagram = ({
const nodes: Array<WorkflowDiagramNode> = [];
const edges: Array<WorkflowDiagramEdge> = [];
// Helper function to generate nodes and edges recursively
const processNode = (
step: WorkflowStep,
parentNodeId: string,
@@ -45,22 +44,16 @@ export const generateWorkflowDiagram = ({
},
});
// Create an edge from the parent node to this node
edges.push({
...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
id: v4(),
source: parentNodeId,
target: nodeId,
markerEnd: {
type: MarkerType.ArrowClosed,
},
deletable: false,
selectable: false,
});
return nodeId;
};
// Start with the trigger node
const triggerNodeId = TRIGGER_STEP_ID;
if (isDefined(trigger)) {