In this PR: - Refactored components to clarify their behavior. For example, I renamed the `Workflow` component to `WorkflowVisualizer`. This moved forward the issue #7010. - Create two variants of several workflow-related components: one version for editing and another for viewing. For instance, there is `WorkflowDiagramCanvasEditable.tsx` and `WorkflowDiagramCanvasReadonly.tsx` - Implement the show page for workflow versions. On this page, we display a readonly workflow visualizer. Users can click on nodes and it will expand the right drawer. - I added buttons in the header of the RecordShowPage for workflow versions: users can activate, deactivate or use the currently viewed version as the next draft. **There are many cache desynchronisation and I'll fix them really soon.** ## Demo (Turn sound on) https://github.com/user-attachments/assets/97fafa48-8902-4dab-8b39-f40848bf041e
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
|
|
import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
|
|
import {
|
|
WorkflowVersion,
|
|
WorkflowWithCurrentVersion,
|
|
} from '@/workflow/types/Workflow';
|
|
|
|
import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
|
|
import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
|
|
import { mergeWorkflowDiagrams } from '@/workflow/utils/mergeWorkflowDiagrams';
|
|
import { useEffect } from 'react';
|
|
import { useRecoilCallback, useSetRecoilState } from 'recoil';
|
|
import { isDefined } from 'twenty-ui';
|
|
|
|
export const WorkflowDiagramEffect = ({
|
|
workflowWithCurrentVersion,
|
|
}: {
|
|
workflowWithCurrentVersion: WorkflowWithCurrentVersion | undefined;
|
|
}) => {
|
|
const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
|
|
|
|
const computeAndMergeNewWorkflowDiagram = useRecoilCallback(
|
|
({ snapshot, set }) => {
|
|
return (currentVersion: WorkflowVersion) => {
|
|
const previousWorkflowDiagram = getSnapshotValue(
|
|
snapshot,
|
|
workflowDiagramState,
|
|
);
|
|
|
|
const nextWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
|
|
|
|
let mergedWorkflowDiagram = nextWorkflowDiagram;
|
|
if (isDefined(previousWorkflowDiagram)) {
|
|
mergedWorkflowDiagram = mergeWorkflowDiagrams(
|
|
previousWorkflowDiagram,
|
|
nextWorkflowDiagram,
|
|
);
|
|
}
|
|
|
|
const workflowDiagramWithCreateStepNodes = addCreateStepNodes(
|
|
mergedWorkflowDiagram,
|
|
);
|
|
|
|
set(workflowDiagramState, workflowDiagramWithCreateStepNodes);
|
|
};
|
|
},
|
|
[],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const currentVersion = workflowWithCurrentVersion?.currentVersion;
|
|
if (!isDefined(currentVersion)) {
|
|
setWorkflowDiagram(undefined);
|
|
|
|
return;
|
|
}
|
|
|
|
computeAndMergeNewWorkflowDiagram(currentVersion);
|
|
}, [
|
|
computeAndMergeNewWorkflowDiagram,
|
|
setWorkflowDiagram,
|
|
workflowWithCurrentVersion?.currentVersion,
|
|
]);
|
|
|
|
return null;
|
|
};
|