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

965 flow control arrow menu 1/3 add insert step button (#12519)

Browse Source 
Add insert step button to workflow edges



https://github.com/user-attachments/assets/7144f722-f1c7-450f-a8eb-c902071986a1



Also fixes `iconButtonGroup` UI component

## Before


https://github.com/user-attachments/assets/7b5f0245-d0e8-48af-9aa5-a29388a1caea


## After



https://github.com/user-attachments/assets/1820874f-aa99-41ae-8254-c76c275ee3ae
This commit is contained in:
martmull
2025-06-12 14:14:21 +02:00
committed by GitHub
parent a189f15313
commit cf01faf276
31 changed files with 755 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
View File

@ -204,8 +204,7 @@ export const SettingsDataModelOverview = () => {
>
<Background />
<IconButtonGroup
className="react-flow__panel react-flow__controls bottom left"
size="small"
className="react-flow__panel react-flow__controls bottom left horizontal"
iconButtons={[
{
Icon: IconPlus,

21
packages/twenty-front/src/modules/workflow/hooks/useDeleteWorkflowVersionStep.ts
View File

@ -35,7 +35,9 @@ export const useDeleteWorkflowVersionStep = () => {
input: DeleteWorkflowVersionStepInput,
) => {
const result = await mutate({ variables: { input } });
const deletedStep = result?.data?.deleteWorkflowVersionStep;
if (!isDefined(deletedStep)) {
return;
}
@ -43,6 +45,7 @@ export const useDeleteWorkflowVersionStep = () => {
const cachedRecord = getRecordFromCache<WorkflowVersion>(
input.workflowVersionId,
);
if (!isDefined(cachedRecord)) {
return;
}
@ -51,12 +54,21 @@ export const useDeleteWorkflowVersionStep = () => {
...cachedRecord,
steps: (cachedRecord.steps || [])
.filter((step: WorkflowAction) => step.id !== deletedStep.id)
.map((step) => {
.map((step: WorkflowAction) => {
if (!step.nextStepIds?.includes(deletedStep.id)) {
return step;
}
return {
...step,
nextStepIds: step.nextStepIds?.filter(
(nextStepId) => nextStepId !== deletedStep.id,
),
nextStepIds: [
...new Set([
...(step.nextStepIds?.filter(
(nextStepId) => nextStepId !== deletedStep.id,
) || []),
...(deletedStep.nextStepIds || []),
]),
],
};
}),
};
@ -64,6 +76,7 @@ export const useDeleteWorkflowVersionStep = () => {
const recordGqlFields = {
steps: true,
};
updateRecordFromCache({
objectMetadataItems,
objectMetadataItem,

5
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
View File

@ -68,7 +68,10 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
}
if (isCreateStepNode(selectedNode)) {
startNodeCreation(selectedNode.data.parentNodeId);
startNodeCreation({
parentStepId: selectedNode.data.parentNodeId,
nextStepId: undefined,
});
return;
}

31
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx
View File

@ -1,18 +1,23 @@
import { useTheme } from '@emotion/react';
import { BaseEdge, EdgeProps, getStraightPath } from '@xyflow/react';
import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
import { WorkflowDiagramEdgeOptions } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions';
import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
type WorkflowDiagramDefaultEdgeProps = EdgeProps;
type WorkflowDiagramDefaultEdgeProps = EdgeProps<WorkflowDiagramEdge>;
export const WorkflowDiagramDefaultEdge = ({
source,
target,
sourceY,
targetY,
markerStart,
markerEnd,
data,
}: WorkflowDiagramDefaultEdgeProps) => {
const theme = useTheme();
const [edgePath] = getStraightPath({
const [edgePath, labelX, labelY] = getStraightPath({
sourceX: CREATE_STEP_NODE_WIDTH,
sourceY,
targetX: CREATE_STEP_NODE_WIDTH,
@ -20,11 +25,21 @@ export const WorkflowDiagramDefaultEdge = ({
});
return (
<BaseEdge
markerStart={markerStart}
markerEnd={markerEnd}
path={edgePath}
style={{ stroke: theme.border.color.strong }}
/>
<>
<BaseEdge
markerStart={markerStart}
markerEnd={markerEnd}
path={edgePath}
style={{ stroke: theme.border.color.strong }}
/>
{data?.shouldDisplayEdgeOptions && (
<WorkflowDiagramEdgeOptions
labelX={labelX}
labelY={labelY}
parentStepId={source}
nextStepId={target}
/>
)}
</>
);
};

56
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx Normal file
View File

@ -0,0 +1,56 @@
import { EdgeLabelRenderer } from '@xyflow/react';
import { STEP_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
import styled from '@emotion/styled';
import { IconButtonGroup } from 'twenty-ui/input';
import { IconPlus } from 'twenty-ui/display';
import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
import { isDefined } from 'twenty-shared/utils';
const EDGE_OPTION_BUTTON_LEFT_MARGIN = 8;
const StyledIconButtonGroup = styled(IconButtonGroup)`
pointer-events: all;
`;
const StyledContainer = styled.div<{
labelX?: number;
labelY?: number;
}>`
position: absolute;
transform: ${({ labelX, labelY }) =>
`translate(${labelX || 0}px, ${isDefined(labelY) ? labelY - STEP_ICON_WIDTH / 2 : 0}px) translateX(${EDGE_OPTION_BUTTON_LEFT_MARGIN}px)`};
`;
type WorkflowDiagramEdgeOptionsProps = {
labelX?: number;
labelY?: number;
parentStepId: string;
nextStepId: string;
};
export const WorkflowDiagramEdgeOptions = ({
labelX,
labelY,
parentStepId,
nextStepId,
}: WorkflowDiagramEdgeOptionsProps) => {
const { startNodeCreation } = useStartNodeCreation();
return (
<EdgeLabelRenderer>
<StyledContainer labelX={labelX} labelY={labelY}>
<StyledIconButtonGroup
className="nodrag nopan"
iconButtons={[
{
Icon: IconPlus,
onClick: () => {
startNodeCreation({ parentStepId, nextStepId });
},
},
]}
/>
</StyledContainer>
</EdgeLabelRenderer>
);
};

6
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEffect.tsx
View File

@ -16,6 +16,7 @@ import { mergeWorkflowDiagrams } from '@/workflow/workflow-diagram/utils/mergeWo
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { addEdgeOptions } from '@/workflow/workflow-diagram/utils/addEdgeOptions';
export const WorkflowDiagramEffect = ({
workflowWithCurrentVersion,
@ -44,10 +45,11 @@ export const WorkflowDiagramEffect = ({
);
const nextWorkflowDiagram = addCreateStepNodes(
getWorkflowVersionDiagram(currentVersion),
addEdgeOptions(getWorkflowVersionDiagram(currentVersion)),
);
let mergedWorkflowDiagram = nextWorkflowDiagram;
if (isDefined(previousWorkflowDiagram)) {
mergedWorkflowDiagram = mergeWorkflowDiagrams(
previousWorkflowDiagram,
@ -59,6 +61,7 @@ export const WorkflowDiagramEffect = ({
snapshot,
workflowLastCreatedStepIdState,
);
if (isDefined(lastCreatedStepId)) {
mergedWorkflowDiagram.nodes = mergedWorkflowDiagram.nodes.map(
(node) => {
@ -79,6 +82,7 @@ export const WorkflowDiagramEffect = ({
);
const currentVersion = workflowWithCurrentVersion?.currentVersion;
useEffect(() => {
if (!isDefined(currentVersion)) {
setFlow(undefined);

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

@ -1,6 +1,6 @@
import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
const STEP_ICON_WIDTH = 24;
export const STEP_ICON_WIDTH = 24;
const STEP_PADDING = 8;

18
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
View File

@ -4,12 +4,12 @@ import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandM
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { workflowCreateStepFromParentStepIdComponentState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState';
import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
import { isDefined } from 'twenty-shared/utils';
export const useStartNodeCreation = () => {
const setWorkflowCreateStepFromParentStepId = useSetRecoilComponentStateV2(
workflowCreateStepFromParentStepIdComponentState,
const setWorkflowInsertStepIds = useSetRecoilComponentStateV2(
workflowInsertStepIdsComponentState,
);
const { openStepSelectInCommandMenu } = useWorkflowCommandMenu();
@ -22,8 +22,14 @@ export const useStartNodeCreation = () => {
* That's why its wrapped in a `useCallback` hook. Removing memoization might break the app unexpectedly.
*/
const startNodeCreation = useCallback(
(parentNodeId: string) => {
setWorkflowCreateStepFromParentStepId(parentNodeId);
({
parentStepId,
nextStepId,
}: {
parentStepId: string | undefined;
nextStepId: string | undefined;
}) => {
setWorkflowInsertStepIds({ parentStepId, nextStepId });
if (isDefined(workflowVisualizerWorkflowId)) {
openStepSelectInCommandMenu(workflowVisualizerWorkflowId);
@ -31,7 +37,7 @@ export const useStartNodeCreation = () => {
}
},
[
setWorkflowCreateStepFromParentStepId,
setWorkflowInsertStepIds,
workflowVisualizerWorkflowId,
openStepSelectInCommandMenu,
],

9
packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts
View File

@ -4,11 +4,12 @@ import {
} from '@/workflow/types/Workflow';
import { Edge, Node } from '@xyflow/react';
export type WorkflowDiagramStepNode = Node<WorkflowDiagramStepNodeData>;
export type WorkflowDiagramNode = Node<WorkflowDiagramNodeData>;
export type WorkflowDiagramEdge = Edge;
export type WorkflowDiagramEdge = Edge<EdgeData>;
export type WorkflowRunDiagramNode = Node<WorkflowRunDiagramNodeData>;
export type WorkflowRunDiagramEdge = Edge;
export type WorkflowRunDiagramEdge = Edge<EdgeData>;
export type WorkflowRunDiagram = {
nodes: Array<WorkflowRunDiagramNode>;
@ -67,6 +68,10 @@ export type WorkflowRunDiagramNodeData = Exclude<
'runStatus'
> & { runStatus: WorkflowDiagramRunStatus };
export type EdgeData = {
shouldDisplayEdgeOptions?: boolean;
};
export type WorkflowDiagramNodeType =
| 'default'
| 'empty-trigger'

2
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/addCreateStepNodes.test.ts
View File

@ -30,6 +30,7 @@ describe('addCreateStepNodes', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -48,6 +49,7 @@ describe('addCreateStepNodes', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];

164
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/generateWorkflowDiagram.test.ts
View File

@ -52,6 +52,7 @@ describe('generateWorkflowDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -70,6 +71,7 @@ describe('generateWorkflowDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
@ -118,6 +120,7 @@ describe('generateWorkflowDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -136,15 +139,168 @@ describe('generateWorkflowDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
const result = generateWorkflowDiagram({ trigger, steps });
expect(result.edges[0].source).toEqual(result.nodes[0].id);
expect(result.edges[0].target).toEqual(result.nodes[1].id);
expect(result.edges.length).toEqual(2);
expect(result.nodes.length).toEqual(3);
expect(result.edges[1].source).toEqual(result.nodes[1].id);
expect(result.edges[1].target).toEqual(result.nodes[2].id);
expect(result.edges[0].source).toEqual('trigger');
expect(result.edges[0].target).toEqual('step1');
expect(result.edges[1].source).toEqual('step1');
expect(result.edges[1].target).toEqual('step2');
});
it('should take nextStepIds into account', () => {
const trigger: WorkflowTrigger = {
name: 'Company created',
type: 'DATABASE_EVENT',
settings: {
eventName: 'company.created',
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
name: 'Step 1',
type: 'CODE',
valid: true,
settings: {
errorHandlingOptions: {
retryOnFailure: { value: true },
continueOnFailure: { value: false },
},
input: {
serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
serverlessFunctionVersion: '1',
serverlessFunctionInput: {},
},
outputSchema: {},
},
nextStepIds: undefined,
},
{
id: 'step2',
name: 'Step 2',
type: 'CODE',
valid: true,
settings: {
errorHandlingOptions: {
retryOnFailure: { value: true },
continueOnFailure: { value: false },
},
input: {
serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
serverlessFunctionVersion: '1',
serverlessFunctionInput: {},
},
outputSchema: {},
},
nextStepIds: ['step1'],
},
];
const result = generateWorkflowDiagram({ trigger, steps });
expect(result.edges.length).toEqual(2);
expect(result.nodes.length).toEqual(3);
expect(result.edges[0].source).toEqual('trigger');
expect(result.edges[0].target).toEqual('step2');
expect(result.edges[1].source).toEqual('step2');
expect(result.edges[1].target).toEqual('step1');
});
it('should take nextStepIds into account for complex diagram', () => {
const trigger: WorkflowTrigger = {
name: 'Company created',
type: 'DATABASE_EVENT',
settings: {
eventName: 'company.created',
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
name: 'Step 1',
type: 'CODE',
valid: true,
settings: {
errorHandlingOptions: {
retryOnFailure: { value: true },
continueOnFailure: { value: false },
},
input: {
serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
serverlessFunctionVersion: '1',
serverlessFunctionInput: {},
},
outputSchema: {},
},
nextStepIds: undefined,
},
{
id: 'step2',
name: 'Step 2',
type: 'CODE',
valid: true,
settings: {
errorHandlingOptions: {
retryOnFailure: { value: true },
continueOnFailure: { value: false },
},
input: {
serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
serverlessFunctionVersion: '1',
serverlessFunctionInput: {},
},
outputSchema: {},
},
nextStepIds: ['step1'],
},
{
id: 'step3',
name: 'Step 3',
type: 'CODE',
valid: true,
settings: {
errorHandlingOptions: {
retryOnFailure: { value: true },
continueOnFailure: { value: false },
},
input: {
serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
serverlessFunctionVersion: '1',
serverlessFunctionInput: {},
},
outputSchema: {},
},
nextStepIds: ['step1'],
},
];
const result = generateWorkflowDiagram({ trigger, steps });
expect(result.edges.length).toEqual(4);
expect(result.nodes.length).toEqual(4);
expect(result.edges[0].source).toEqual('trigger');
expect(result.edges[0].target).toEqual('step2');
expect(result.edges[1].source).toEqual('trigger');
expect(result.edges[1].target).toEqual('step3');
expect(result.edges[2].source).toEqual('step2');
expect(result.edges[2].target).toEqual('step1');
expect(result.edges[3].source).toEqual('step3');
expect(result.edges[3].target).toEqual('step1');
});
});

50
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/generateWorkflowRunDiagram.test.ts
View File

@ -21,6 +21,7 @@ describe('generateWorkflowRunDiagram', () => {
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
@ -39,6 +40,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -57,6 +59,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step3'],
},
{
id: 'step3',
@ -75,8 +78,10 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
const stepsOutput: WorkflowRunOutputStepsOutput = {
step1: {
result: undefined,
@ -144,7 +149,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step1",
"position": {
"x": 0,
"y": 0,
"y": 150,
},
},
{
@ -157,7 +162,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step2",
"position": {
"x": 0,
"y": 150,
"y": 300,
},
},
{
@ -170,7 +175,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step3",
"position": {
"x": 0,
"y": 300,
"y": 450,
},
},
],
@ -189,6 +194,7 @@ describe('generateWorkflowRunDiagram', () => {
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
@ -207,6 +213,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -225,6 +232,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step3'],
},
{
id: 'step3',
@ -243,8 +251,10 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
const stepsOutput: WorkflowRunOutputStepsOutput = {
step1: {
result: {},
@ -322,7 +332,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step1",
"position": {
"x": 0,
"y": 0,
"y": 150,
},
},
{
@ -335,7 +345,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step2",
"position": {
"x": 0,
"y": 150,
"y": 300,
},
},
{
@ -348,7 +358,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step3",
"position": {
"x": 0,
"y": 300,
"y": 450,
},
},
],
@ -367,6 +377,7 @@ describe('generateWorkflowRunDiagram', () => {
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
@ -385,6 +396,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -403,6 +415,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step3'],
},
{
id: 'step3',
@ -421,8 +434,10 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
const stepsOutput = undefined;
const result = generateWorkflowRunDiagram({ trigger, steps, stepsOutput });
@ -485,7 +500,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step1",
"position": {
"x": 0,
"y": 0,
"y": 150,
},
},
{
@ -498,7 +513,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step2",
"position": {
"x": 0,
"y": 150,
"y": 300,
},
},
{
@ -511,7 +526,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step3",
"position": {
"x": 0,
"y": 300,
"y": 450,
},
},
],
@ -530,6 +545,7 @@ describe('generateWorkflowRunDiagram', () => {
outputSchema: {},
},
};
const steps: WorkflowStep[] = [
{
id: 'step1',
@ -548,6 +564,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step2'],
},
{
id: 'step2',
@ -566,6 +583,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step3'],
},
{
id: 'step3',
@ -584,6 +602,7 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: ['step4'],
},
{
id: 'step4',
@ -602,8 +621,10 @@ describe('generateWorkflowRunDiagram', () => {
},
outputSchema: {},
},
nextStepIds: undefined,
},
];
const stepsOutput: WorkflowRunOutputStepsOutput = {
step1: {
result: {},
@ -681,7 +702,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step1",
"position": {
"x": 0,
"y": 0,
"y": 150,
},
},
{
@ -694,7 +715,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step2",
"position": {
"x": 0,
"y": 150,
"y": 300,
},
},
{
@ -707,7 +728,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step3",
"position": {
"x": 0,
"y": 300,
"y": 450,
},
},
{
@ -720,7 +741,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step4",
"position": {
"x": 0,
"y": 450,
"y": 600,
},
},
],
@ -762,6 +783,7 @@ describe('generateWorkflowRunDiagram', () => {
],
outputSchema: {},
},
nextStepIds: undefined,
},
];
const stepsOutput = {
@ -814,7 +836,7 @@ describe('generateWorkflowRunDiagram', () => {
"id": "step1",
"position": {
"x": 0,
"y": 0,
"y": 150,
},
},
],

14
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/addEdgeOptions.ts Normal file
View File

@ -0,0 +1,14 @@
import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
export const addEdgeOptions = ({
nodes,
edges,
}: WorkflowDiagram): WorkflowDiagram => {
return {
nodes,
edges: edges.map((edge) => ({
...edge,
data: { shouldDisplayEdgeOptions: true },
})),
};
};

133
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts
View File

@ -15,6 +15,58 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
/**
* Groups workflow steps into levels based on their distance from root nodes.
*
* A root node is one that is not referenced as a `nextStepId` by any other step.
* The function performs a breadth-first traversal from all roots and assigns
* each step to a level indicating its depth in the graph.
*
* Returns an array where each sub-array contains all steps at the same level.
*/
const groupStepsByLevel = (steps: WorkflowStep[]): WorkflowStep[][] => {
const stepMap = new Map<string, WorkflowStep>();
const childIds = new Set<string>();
for (const step of steps) {
stepMap.set(step.id, step);
step.nextStepIds?.forEach((id) => childIds.add(id));
}
const rootSteps = steps.filter((step) => !childIds.has(step.id));
const stepsByLevel: WorkflowStep[][] = [];
const visited = new Set<string>();
const visit = ({ step, level }: { step: WorkflowStep; level: number }) => {
if (visited.has(step.id)) {
return;
}
visited.add(step.id);
if (!isDefined(stepsByLevel[level])) {
stepsByLevel[level] = [];
}
stepsByLevel[level].push(step);
step.nextStepIds?.forEach((childId) => {
const child = stepMap.get(childId);
if (isDefined(child)) {
visit({ step: child, level: level + 1 });
}
});
};
rootSteps.forEach((root) => visit({ step: root, level: 0 }));
return stepsByLevel;
};
export const generateWorkflowDiagram = ({
trigger,
steps,
@ -23,6 +75,7 @@ export const generateWorkflowDiagram = ({
steps: Array<WorkflowStep>;
}): WorkflowDiagram => {
const nodes: Array<WorkflowDiagramNode> = [];
const edges: Array<WorkflowDiagramEdge> = [];
if (isDefined(trigger)) {
@ -31,58 +84,50 @@ export const generateWorkflowDiagram = ({
nodes.push(WORKFLOW_DIAGRAM_EMPTY_TRIGGER_NODE_DEFINITION);
}
const processNode = ({
stepIndex,
parentNodeId,
xPos,
yPos,
}: {
stepIndex: number;
parentNodeId: string;
xPos: number;
yPos: number;
}) => {
const step = steps.at(stepIndex);
if (!isDefined(step)) {
return;
const stepsGroupedByLevel = groupStepsByLevel(steps);
let levelYPos = FIRST_NODE_POSITION.y;
const xPos = FIRST_NODE_POSITION.x;
for (const stepsByLevel of stepsGroupedByLevel) {
levelYPos += VERTICAL_DISTANCE_BETWEEN_TWO_NODES;
for (const step of stepsByLevel) {
nodes.push({
id: step.id,
data: {
nodeType: 'action',
actionType: step.type,
name: step.name,
} satisfies WorkflowDiagramStepNodeData,
position: {
x: xPos,
y: levelYPos,
},
});
}
}
const nodeId = step.id;
nodes.push({
id: nodeId,
data: {
nodeType: 'action',
actionType: step.type,
name: step.name,
} satisfies WorkflowDiagramStepNodeData,
position: {
x: xPos,
y: yPos + VERTICAL_DISTANCE_BETWEEN_TWO_NODES,
},
});
for (const firstLevelStep of stepsGroupedByLevel[0] || []) {
edges.push({
...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
id: v4(),
source: parentNodeId,
target: nodeId,
source: TRIGGER_STEP_ID,
target: firstLevelStep.id,
});
}
processNode({
stepIndex: stepIndex + 1,
parentNodeId: nodeId,
xPos,
yPos: yPos + VERTICAL_DISTANCE_BETWEEN_TWO_NODES,
for (const step of steps) {
step.nextStepIds?.forEach((child) => {
edges.push({
...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
id: v4(),
source: step.id,
target: child,
});
});
};
processNode({
stepIndex: 0,
parentNodeId: TRIGGER_STEP_ID,
xPos: FIRST_NODE_POSITION.x,
yPos: FIRST_NODE_POSITION.y,
});
}
return {
nodes,

173
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowRunDiagram.ts
View File

@ -3,22 +3,16 @@ import {
WorkflowStep,
WorkflowTrigger,
} from '@/workflow/types/Workflow';
import { FIRST_NODE_POSITION } from '@/workflow/workflow-diagram/constants/FirstNodePosition';
import { VERTICAL_DISTANCE_BETWEEN_TWO_NODES } from '@/workflow/workflow-diagram/constants/VerticalDistanceBetweenTwoNodes';
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 {
WorkflowDiagramRunStatus,
WorkflowRunDiagram,
WorkflowRunDiagramEdge,
WorkflowRunDiagramNode,
WorkflowRunDiagramNodeData,
WorkflowRunDiagramStepNodeData,
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { getWorkflowDiagramTriggerNode } from '@/workflow/workflow-diagram/utils/getWorkflowDiagramTriggerNode';
import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import { generateWorkflowDiagram } from '@/workflow/workflow-diagram/utils/generateWorkflowDiagram';
import { isStepNode } from '@/workflow/workflow-diagram/utils/isStepNode';
export const generateWorkflowRunDiagram = ({
trigger,
@ -44,124 +38,79 @@ export const generateWorkflowRunDiagram = ({
}
| undefined = undefined;
const triggerBase = getWorkflowDiagramTriggerNode({ trigger });
const workflowDiagram = generateWorkflowDiagram({ trigger, steps });
const nodes: Array<WorkflowRunDiagramNode> = [
{
...triggerBase,
data: {
...triggerBase.data,
runStatus: 'success',
},
},
];
const edges: Array<WorkflowRunDiagramEdge> = [];
let skippedExecution = false;
const processNode = ({
stepIndex,
parentNodeId,
parentRunStatus,
xPos,
yPos,
skippedExecution,
}: {
stepIndex: number;
parentNodeId: string;
parentRunStatus: WorkflowDiagramRunStatus;
xPos: number;
yPos: number;
skippedExecution: boolean;
}) => {
const step = steps.at(stepIndex);
if (!isDefined(step)) {
return;
}
const nodeId = step.id;
if (parentRunStatus === 'success') {
edges.push({
...WORKFLOW_VISUALIZER_EDGE_SUCCESS_CONFIGURATION,
id: v4(),
source: parentNodeId,
target: nodeId,
});
} else {
edges.push({
...WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION,
id: v4(),
source: parentNodeId,
target: nodeId,
});
}
const runResult = stepsOutput?.[nodeId];
const isPendingFormAction =
step.type === 'FORM' &&
isDefined(runResult?.pendingEvent) &&
runResult.pendingEvent;
let runStatus: WorkflowDiagramRunStatus;
if (skippedExecution) {
runStatus = 'not-executed';
} else if (!isDefined(runResult) || isPendingFormAction) {
runStatus = 'running';
} else {
if (isDefined(runResult.error)) {
runStatus = 'failure';
} else {
runStatus = 'success';
const workflowRunDiagramNodes: WorkflowRunDiagramNode[] =
workflowDiagram.nodes.filter(isStepNode).map((node) => {
if (node.data.nodeType === 'trigger') {
return {
...node,
data: {
...node.data,
runStatus: 'success',
},
};
}
}
const nodeData: WorkflowRunDiagramNodeData = {
nodeType: 'action',
actionType: step.type,
name: step.name,
runStatus,
};
const nodeId = node.id;
nodes.push({
id: nodeId,
data: nodeData,
position: {
x: xPos,
y: yPos,
},
const runResult = stepsOutput?.[nodeId];
const isPendingFormAction =
node.data.nodeType === 'action' &&
node.data.actionType === 'FORM' &&
isDefined(runResult?.pendingEvent) &&
runResult.pendingEvent;
let runStatus: WorkflowDiagramRunStatus = 'success';
if (skippedExecution) {
runStatus = 'not-executed';
} else if (!isDefined(runResult) || isPendingFormAction) {
runStatus = 'running';
} else if (isDefined(runResult.error)) {
runStatus = 'failure';
}
skippedExecution =
skippedExecution || runStatus === 'failure' || runStatus === 'running';
const nodeData = { ...node.data, runStatus };
if (isPendingFormAction) {
stepToOpenByDefault = {
id: nodeId,
data: nodeData,
};
}
return {
...node,
data: nodeData,
};
});
if (isPendingFormAction) {
stepToOpenByDefault = {
id: nodeId,
data: nodeData,
const workflowRunDiagramEdges = workflowDiagram.edges.map((edge) => {
const parentNode = workflowRunDiagramNodes.find(
(node) => node.id === edge.source,
);
if (isDefined(parentNode) && parentNode.data.runStatus === 'success') {
return {
...edge,
...WORKFLOW_VISUALIZER_EDGE_SUCCESS_CONFIGURATION,
};
}
processNode({
stepIndex: stepIndex + 1,
parentNodeId: nodeId,
parentRunStatus: runStatus,
xPos,
yPos: yPos + VERTICAL_DISTANCE_BETWEEN_TWO_NODES,
skippedExecution: skippedExecution
? true
: runStatus === 'failure' || runStatus === 'running',
});
};
processNode({
stepIndex: 0,
parentNodeId: TRIGGER_STEP_ID,
parentRunStatus: 'success',
xPos: FIRST_NODE_POSITION.x,
yPos: FIRST_NODE_POSITION.y,
skippedExecution: false,
return edge;
});
return {
diagram: {
nodes,
edges,
nodes: workflowRunDiagramNodes,
edges: workflowRunDiagramEdges,
},
stepToOpenByDefault,
};

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

@ -0,0 +1,10 @@
import {
WorkflowDiagramNode,
WorkflowDiagramStepNode,
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
export const isStepNode = (
node: WorkflowDiagramNode,
): node is WorkflowDiagramStepNode => {
return node.data.nodeType === 'trigger' || node.data.nodeType === 'action';
};

6
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useCreateStep.test.tsx
View File

@ -1,5 +1,5 @@
import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
import { workflowCreateStepFromParentStepIdComponentState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState';
import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
import { renderHook } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
import { WorkflowVisualizerComponentInstanceContext } from '../../../workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
@ -33,10 +33,10 @@ const wrapper = ({ children }: { children: React.ReactNode }) => {
<RecoilRoot
initializeState={({ set }) => {
set(
workflowCreateStepFromParentStepIdComponentState.atomFamily({
workflowInsertStepIdsComponentState.atomFamily({
instanceId: workflowVisualizerComponentInstanceId,
}),
'parent-step-id',
{ parentStepId: 'parent-step-id', nextStepId: undefined },
);
}}
>

16
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts
View File

@ -8,7 +8,7 @@ import {
} from '@/workflow/types/Workflow';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
import { useCreateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep';
import { workflowCreateStepFromParentStepIdComponentState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState';
import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
import { isDefined } from 'twenty-shared/utils';
export const useCreateStep = ({
@ -24,15 +24,17 @@ export const useCreateStep = ({
workflowLastCreatedStepIdComponentState,
);
const workflowCreateStepFromParentStepId = useRecoilComponentValueV2(
workflowCreateStepFromParentStepIdComponentState,
const workflowInsertStepIds = useRecoilComponentValueV2(
workflowInsertStepIdsComponentState,
);
const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
const createStep = async (newStepType: WorkflowStepType) => {
if (!isDefined(workflowCreateStepFromParentStepId)) {
throw new Error('Select a step to create a new step from first.');
if (!isDefined(workflowInsertStepIds.parentStepId)) {
throw new Error(
'No parentStepId. Please select a parent step to create from.',
);
}
const workflowVersionId = await getUpdatableWorkflowVersion(workflow);
@ -41,8 +43,8 @@ export const useCreateStep = ({
await createWorkflowVersionStep({
workflowVersionId,
stepType: newStepType,
parentStepId: workflowCreateStepFromParentStepId,
nextStepId: undefined,
parentStepId: workflowInsertStepIds.parentStepId,
nextStepId: workflowInsertStepIds.nextStepId,
})
)?.data?.createWorkflowVersionStep;

26
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts
View File

@ -37,8 +37,9 @@ export const useCreateWorkflowVersionStep = () => {
variables: { input },
});
const createdStep = result?.data?.createWorkflowVersionStep;
if (!isDefined(createdStep)) {
const insertedStep = result?.data?.createWorkflowVersionStep;
if (!isDefined(insertedStep)) {
return;
}
@ -50,20 +51,29 @@ export const useCreateWorkflowVersionStep = () => {
return;
}
const { parentStepId, nextStepId } = input;
const updatedExistingSteps =
cachedRecord.steps?.map((step) => {
if (step.id === input.parentStepId) {
cachedRecord.steps?.map((existingStep) => {
if (existingStep.id === parentStepId) {
return {
...step,
nextStepIds: [...(step.nextStepIds || []), createdStep.id],
...existingStep,
nextStepIds: [
...new Set([
...(existingStep.nextStepIds?.filter(
(id) => id !== nextStepId,
) || []),
insertedStep.id,
]),
],
};
}
return step;
return existingStep;
}) ?? [];
const newCachedRecord = {
...cachedRecord,
steps: [...updatedExistingSteps, createdStep],
steps: [...updatedExistingSteps, insertedStep],
};
const recordGqlFields = {

13
packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState.ts → packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowInsertStepIdsComponentState.ts
View File

@ -1,9 +1,14 @@
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
export const workflowCreateStepFromParentStepIdComponentState =
createComponentStateV2<string | undefined>({
key: 'workflowCreateStepFromParentStepIdComponentState',
defaultValue: undefined,
type WorkflowInsertStepIdsState = {
parentStepId: string | undefined;
nextStepId: string | undefined;
};
export const workflowInsertStepIdsComponentState =
createComponentStateV2<WorkflowInsertStepIdsState>({
key: 'workflowInsertStepIdsComponentState',
defaultValue: { parentStepId: undefined, nextStepId: undefined },
componentInstanceContext: WorkflowVisualizerComponentInstanceContext,
});