ce045db15a
# Implement "Tidy Up" Action for Workflow Diagram **Task Link:** https://twill.ai/twentyhq/ENG/tasks/6 ## Summary This PR adds a "Tidy Up" action to the workflow diagram interface, allowing users to automatically organize and clean up the layout of workflow nodes and connections. ## Changes Made - **Added new workflow action**: Created `TidyUpWorkflowSingleRecordAction` component to provide a UI action for tidying up workflow diagrams - **Refactored tidy-up logic**: Extracted core tidy-up functionality into a reusable `useTidyUp` hook, separating layout logic from workflow version persistence - **Updated action menu configuration**: Integrated the new tidy-up action into `WorkflowActionsConfig` with proper permissions and keyboard shortcuts - **Enhanced right-click menu**: Updated `WorkflowDiagramRightClickCommandMenu` to use the refactored tidy-up hook - **Improved hook architecture**: Simplified `useTidyUpWorkflowVersion` to delegate layout calculations to the new `useTidyUp` hook ## Key Features - Users can now trigger workflow diagram tidy-up from the action menu - Consistent tidy-up behavior across both right-click menu and action menu interfaces - Better separation of concerns between layout calculation and data persistence <details> <summary>📸 Screenshots</summary> Playwright test screenshots captured during development: ### command-menu-with-tidy-up-workflow.png  ### tidy-up-workflow-command-menu.png  ### tidy-up-workflow-error-toast.png  </details> --------- Co-authored-by: Twill <agent@twill.ai> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
|
import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
|
|
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
|
|
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
|
|
export const useGetUpdatableWorkflowVersionOrThrow = (instanceId?: string) => {
|
|
const { createDraftFromWorkflowVersion } =
|
|
useCreateDraftFromWorkflowVersion();
|
|
const workflowVisualizerWorkflowId = useRecoilComponentValue(
|
|
workflowVisualizerWorkflowIdComponentState,
|
|
instanceId,
|
|
);
|
|
const workflow = useWorkflowWithCurrentVersion(workflowVisualizerWorkflowId);
|
|
|
|
const getUpdatableWorkflowVersion = async (): Promise<string> => {
|
|
if (!isDefined(workflowVisualizerWorkflowId) || !isDefined(workflow)) {
|
|
throw new Error('Failed to get updatable workflow version');
|
|
}
|
|
|
|
if (workflow.currentVersion.status === 'DRAFT') {
|
|
return workflow.currentVersion.id;
|
|
}
|
|
|
|
const draftVersionId = await createDraftFromWorkflowVersion({
|
|
workflowId: workflowVisualizerWorkflowId,
|
|
workflowVersionIdToCopy: workflow.currentVersion.id,
|
|
});
|
|
|
|
if (!isDefined(draftVersionId)) {
|
|
throw new Error('Failed to create draft version');
|
|
}
|
|
|
|
return draftVersionId;
|
|
};
|
|
|
|
return { getUpdatableWorkflowVersion };
|
|
};
|