-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: put most of the code in the workflows module instead of the…
… pages directory
- Loading branch information
Showing
8 changed files
with
177 additions
and
167 deletions.
There are no files selected for viewing
86 changes: 86 additions & 0 deletions
86
packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagram.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { CreateStepNode } from '@/workflow/components/nodes/CreateStepNode'; | ||
| import { StepNode } from '@/workflow/components/nodes/StepNode'; | ||
| import { showPageWorkflowDiagramState } from '@/workflow/states/showPageWorkflowDiagramState'; | ||
| import { | ||
| WorkflowDiagram, | ||
| WorkflowDiagramEdge, | ||
| WorkflowDiagramNode, | ||
| } from '@/workflow/types/WorkflowDiagram'; | ||
| import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram'; | ||
| import { | ||
| applyEdgeChanges, | ||
| applyNodeChanges, | ||
| Background, | ||
| EdgeChange, | ||
| NodeChange, | ||
| ReactFlow, | ||
| } from '@xyflow/react'; | ||
| import '@xyflow/react/dist/style.css'; | ||
| import { useMemo } from 'react'; | ||
| import { useSetRecoilState } from 'recoil'; | ||
| import { GRAY_SCALE, isDefined } from 'twenty-ui'; | ||
|
|
||
| export const WorkflowShowPageDiagram = ({ | ||
| diagram, | ||
| }: { | ||
| diagram: WorkflowDiagram; | ||
| }) => { | ||
| const { nodes, edges } = useMemo( | ||
| () => getOrganizedDiagram(diagram), | ||
| [diagram], | ||
| ); | ||
|
|
||
| const setShowPageWorkflowDiagram = useSetRecoilState( | ||
| showPageWorkflowDiagramState, | ||
| ); | ||
|
|
||
| const handleNodesChange = ( | ||
| nodeChanges: Array<NodeChange<WorkflowDiagramNode>>, | ||
| ) => { | ||
| setShowPageWorkflowDiagram((diagram) => { | ||
| if (isDefined(diagram) === false) { | ||
| throw new Error( | ||
| 'It must be impossible for the nodes to be updated if the diagram is not defined yet. Be sure the diagram is rendered only when defined.', | ||
| ); | ||
| } | ||
|
|
||
| return { | ||
| ...diagram, | ||
| nodes: applyNodeChanges(nodeChanges, diagram.nodes), | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| const handleEdgesChange = ( | ||
| edgeChanges: Array<EdgeChange<WorkflowDiagramEdge>>, | ||
| ) => { | ||
| setShowPageWorkflowDiagram((diagram) => { | ||
| if (isDefined(diagram) === false) { | ||
| throw new Error( | ||
| 'It must be impossible for the edges to be updated if the diagram is not defined yet. Be sure the diagram is rendered only when defined.', | ||
| ); | ||
| } | ||
|
|
||
| return { | ||
| ...diagram, | ||
| edges: applyEdgeChanges(edgeChanges, diagram.edges), | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <ReactFlow | ||
| nodeTypes={{ | ||
| default: StepNode, | ||
| 'create-step': CreateStepNode, | ||
| }} | ||
| fitView | ||
| nodes={nodes.map((node) => ({ ...node, draggable: false }))} | ||
| edges={edges} | ||
| onNodesChange={handleNodesChange} | ||
| onEdgesChange={handleEdgesChange} | ||
| > | ||
| <Background color={GRAY_SCALE.gray25} size={2} /> | ||
| </ReactFlow> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
.../pages/workflows/nodes/CreateStepNode.tsx → ...kflow/components/nodes/CreateStepNode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...nt/src/pages/workflows/nodes/StepNode.tsx → ...es/workflow/components/nodes/StepNode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
...-front/src/pages/workflows/nodes/base.tsx → ...nents/nodes/common/StyledTargetHandle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { WorkflowAction, WorkflowTrigger } from '@/workflow/types/Workflow'; | ||
| import { | ||
| WorkflowDiagram, | ||
| WorkflowDiagramEdge, | ||
| WorkflowDiagramNode, | ||
| } from '@/workflow/types/WorkflowDiagram'; | ||
| import { MarkerType } from '@xyflow/react'; | ||
| import { isDefined } from 'twenty-ui'; | ||
| import { v4 } from 'uuid'; | ||
|
|
||
| export const generateWorklowDiagram = ( | ||
| trigger: WorkflowTrigger, | ||
| ): WorkflowDiagram => { | ||
| const nodes: Array<WorkflowDiagramNode> = []; | ||
| const edges: Array<WorkflowDiagramEdge> = []; | ||
|
|
||
| // Helper function to generate nodes and edges recursively | ||
| const processNode = ( | ||
| action: WorkflowAction, | ||
| parentNodeId: string, | ||
| xPos: number, | ||
| yPos: number, | ||
| ) => { | ||
| const nodeId = v4(); | ||
| nodes.push({ | ||
| id: nodeId, | ||
| data: { | ||
| nodeType: 'action', | ||
| label: action.name, | ||
| }, | ||
| position: { | ||
| x: xPos, | ||
| y: yPos, | ||
| }, | ||
| }); | ||
|
|
||
| // Create an edge from the parent node to this node | ||
| edges.push({ | ||
| id: v4(), | ||
| source: parentNodeId, | ||
| target: nodeId, | ||
| markerEnd: { | ||
| type: MarkerType.ArrowClosed, | ||
| }, | ||
| }); | ||
|
|
||
| // Recursively generate flow for the next action if it exists | ||
| if (isDefined(action.nextAction)) { | ||
| processNode(action.nextAction, nodeId, xPos + 150, yPos + 100); | ||
| } | ||
| }; | ||
|
|
||
| // Start with the trigger node | ||
| const triggerNodeId = v4(); | ||
| nodes.push({ | ||
| id: triggerNodeId, | ||
| data: { | ||
| nodeType: 'trigger', | ||
| label: trigger.settings.triggerName, | ||
| }, | ||
| position: { | ||
| x: 0, | ||
| y: 0, | ||
| }, | ||
| }); | ||
|
|
||
| // If there's a next action, start the recursive generation | ||
| if (isDefined(trigger.nextAction)) { | ||
| processNode(trigger.nextAction, triggerNodeId, 150, 100); | ||
| } | ||
|
|
||
| return { | ||
| nodes, | ||
| edges, | ||
| }; | ||
| }; |
Oops, something went wrong.