feat(editor): Add telemetry event for tidy up feature (no-changelog) (#13831)

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -47,7 +47,11 @@ import CanvasBackground from './elements/background/CanvasBackground.vue';
 import { useCanvasTraversal } from '@/composables/useCanvasTraversal';
 import { NodeConnectionType } from 'n8n-workflow';
 import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover';
-import { useCanvasLayout } from '@/composables/useCanvasLayout';
+import {
+	type CanvasLayoutEvent,
+	type CanvasLayoutSource,
+	useCanvasLayout,
+} from '@/composables/useCanvasLayout';
 
 const $style = useCssModule();
 
@@ -90,6 +94,7 @@ const emit = defineEmits<{
 	'save:workflow': [];
 	'create:workflow': [];
 	'drag-and-drop': [position: XYPosition, event: DragEvent];
+	'tidy-up': [CanvasLayoutEvent];
 }>();
 
 const props = withDefaults(
@@ -290,7 +295,7 @@ const keyMap = computed(() => {
 		ctrl_alt_n: () => emit('create:workflow'),
 		ctrl_enter: () => emit('run:workflow'),
 		ctrl_s: () => emit('save:workflow'),
-		shift_alt_t: onTidyUp,
+		shift_alt_t: async () => await onTidyUp('keyboard-shortcut'),
 	};
 	return fullKeymap;
 });
@@ -635,15 +640,16 @@ async function onContextMenuAction(action: ContextMenuAction, nodeIds: string[])
 		case 'change_color':
 			return props.eventBus.emit('nodes:action', { ids: nodeIds, action: 'update:sticky:color' });
 		case 'tidy_up':
-			return await onTidyUp();
+			return await onTidyUp('context-menu');
 	}
 }
 
-async function onTidyUp() {
+async function onTidyUp(source: CanvasLayoutSource) {
 	const applyOnSelection = selectedNodes.value.length > 1;
-	const { nodes } = layout(applyOnSelection ? 'selection' : 'all');
+	const target = applyOnSelection ? 'selection' : 'all';
+	const result = layout(target);
 
-	onUpdateNodesPosition(nodes.map((node) => ({ id: node.id, position: { x: node.x, y: node.y } })));
+	emit('tidy-up', { result, target, source });
 
 	if (!applyOnSelection) {
 		await nextTick();
@@ -867,11 +873,12 @@ provide(CanvasKey, {
 			:position="controlsPosition"
 			:show-interactive="false"
 			:zoom="viewport.zoom"
+			:read-only="readOnly"
 			@zoom-to-fit="onFitView"
 			@zoom-in="onZoomIn"
 			@zoom-out="onZoomOut"
 			@reset-zoom="onResetZoom"
-			@tidy-up="onTidyUp"
+			@tidy-up="onTidyUp('canvas-button')"
 		/>
 
 		<Suspense>

packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.test.ts

@@ -16,6 +16,7 @@ describe('CanvasControlButtons', () => {
 		expect(wrapper.getByTestId('zoom-in-button')).toBeVisible();
 		expect(wrapper.getByTestId('zoom-out-button')).toBeVisible();
 		expect(wrapper.getByTestId('zoom-to-fit')).toBeVisible();
+		expect(wrapper.getByTestId('tidy-up-button')).toBeVisible();
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
@@ -29,4 +30,24 @@ describe('CanvasControlButtons', () => {
 
 		expect(wrapper.getByTestId('reset-zoom-button')).toBeVisible();
 	});
+
+	it('should hide the reset zoom button when zoom is equal to 1', () => {
+		const wrapper = renderComponent({
+			props: {
+				zoom: 1,
+			},
+		});
+
+		expect(wrapper.queryByTestId('reset-zoom-button')).not.toBeInTheDocument();
+	});
+
+	it('should hide the tidy up button when canvas is read-only', () => {
+		const wrapper = renderComponent({
+			props: {
+				readOnly: true,
+			},
+		});
+
+		expect(wrapper.queryByTestId('tidy-up-button')).not.toBeInTheDocument();
+	});
 });

packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue

@@ -8,9 +8,11 @@ import { useI18n } from '@/composables/useI18n';
 const props = withDefaults(
 	defineProps<{
 		zoom?: number;
+		readOnly?: boolean;
 	}>(),
 	{
 		zoom: 1,
+		readOnly: false,
 	},
 );
 
@@ -92,6 +94,7 @@ function onTidyUp() {
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
+			v-if="!readOnly"
 			:label="i18n.baseText('nodeView.tidyUp')"
 			:shortcut="{ shiftKey: true, altKey: true, keys: ['T'] }"
 		>