Files
twenty/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
Baptiste Devessier e44d525e83 Prevent workflow right drawer flickering when selecting an action type (#8028)
In this PR:

- Use a stable id for create-step nodes; it makes it possible to
preserve their selected attribute and keep them open even after the flow
is re-generated
- Preemptively open the WorkflowStepEdit right drawer for the created
action



https://github.com/user-attachments/assets/c19e6820-e198-4d06-98ae-898bd6e53e33

Fixes https://github.com/twentyhq/private-issues/issues/123
2024-10-24 17:27:56 +02:00

65 lines
1.9 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 = addCreateStepNodes(
getWorkflowVersionDiagram(currentVersion),
);
let mergedWorkflowDiagram = nextWorkflowDiagram;
if (isDefined(previousWorkflowDiagram)) {
mergedWorkflowDiagram = mergeWorkflowDiagrams(
previousWorkflowDiagram,
nextWorkflowDiagram,
);
}
set(workflowDiagramState, mergedWorkflowDiagram);
};
},
[],
);
useEffect(() => {
const currentVersion = workflowWithCurrentVersion?.currentVersion;
if (!isDefined(currentVersion)) {
setWorkflowDiagram(undefined);
return;
}
computeAndMergeNewWorkflowDiagram(currentVersion);
}, [
computeAndMergeNewWorkflowDiagram,
setWorkflowDiagram,
workflowWithCurrentVersion?.currentVersion,
]);
return null;
};