Baptiste Devessier
a2b1062db6
- Improve the design of the right drawer - Allow to update the trigger of the workflow: the object and the event listened to - Allow to update the selected serverless function that a code action should execute - Change how we determine which workflow version to display in the visualizer. We fetch the selected workflow's data, including whether it has a draft or a published version. If the workflow has a draft version, it gets displayed; otherwise, we display the last published version. - I used the type `WorkflowWithCurrentVersion` to forward the currently edited workflow with its _current_ version embedded across the app. - I created single-responsibility hooks like `useFindWorkflowWithCurrentVersion`, `useFindShowPageWorkflow`, `useUpdateWorkflowVersionTrigger` or `useUpdateWorkflowVersionStep`. - I updated the types for workflow related objects, like `Workflow` and `WorkflowVersion`. See `packages/twenty-front/src/modules/workflow/types/Workflow.ts`. - This introduced the possibility to have `null` values for triggers and steps. I made the according changes in the codebase and in the tests. - I created a utility function to extract both parts of object-event format (`company.created`): `packages/twenty-front/src/modules/workflow/utils/splitWorkflowTriggerEventName.ts`
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
|
|
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
|
|
import { useStartNodeCreation } from '@/workflow/hooks/useStartNodeCreation';
|
|
import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
|
|
import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
|
|
import {
|
|
WorkflowDiagramEdge,
|
|
WorkflowDiagramNode,
|
|
} from '@/workflow/types/WorkflowDiagram';
|
|
import {
|
|
OnSelectionChangeParams,
|
|
useOnSelectionChange,
|
|
useReactFlow,
|
|
} from '@xyflow/react';
|
|
import { useCallback, useEffect } from 'react';
|
|
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
|
import { isDefined } from 'twenty-ui';
|
|
|
|
export const WorkflowDiagramCanvasEffect = () => {
|
|
const reactflow = useReactFlow<WorkflowDiagramNode, WorkflowDiagramEdge>();
|
|
|
|
const { startNodeCreation } = useStartNodeCreation();
|
|
|
|
const { openRightDrawer, closeRightDrawer } = useRightDrawer();
|
|
const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
|
|
|
|
const workflowDiagramTriggerNodeSelection = useRecoilValue(
|
|
workflowDiagramTriggerNodeSelectionState,
|
|
);
|
|
|
|
const handleSelectionChange = useCallback(
|
|
({ nodes }: OnSelectionChangeParams) => {
|
|
const selectedNode = nodes[0] as WorkflowDiagramNode;
|
|
const isClosingStep = isDefined(selectedNode) === false;
|
|
|
|
if (isClosingStep) {
|
|
closeRightDrawer();
|
|
|
|
return;
|
|
}
|
|
|
|
const isCreateStepNode = selectedNode.type === 'create-step';
|
|
if (isCreateStepNode) {
|
|
if (selectedNode.data.nodeType !== 'create-step') {
|
|
throw new Error('Expected selected node to be a create step node.');
|
|
}
|
|
|
|
startNodeCreation(selectedNode.data.parentNodeId);
|
|
|
|
return;
|
|
}
|
|
|
|
setWorkflowSelectedNode(selectedNode.id);
|
|
openRightDrawer(RightDrawerPages.WorkflowStepEdit);
|
|
},
|
|
[
|
|
closeRightDrawer,
|
|
openRightDrawer,
|
|
setWorkflowSelectedNode,
|
|
startNodeCreation,
|
|
],
|
|
);
|
|
|
|
useOnSelectionChange({
|
|
onChange: handleSelectionChange,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!isDefined(workflowDiagramTriggerNodeSelection)) {
|
|
return;
|
|
}
|
|
|
|
reactflow.updateNode(workflowDiagramTriggerNodeSelection, {
|
|
selected: true,
|
|
});
|
|
}, [reactflow, workflowDiagramTriggerNodeSelection]);
|
|
|
|
return null;
|
|
};
|