feat(editor): Expand/collapse canvas group by double-clicking (no-changelog) (#32578)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -3951,7 +3951,7 @@
 	"workflowProductionChecklist.timeSaved.title": "Track time saved",
 	"workflowProductionChecklist.timeSaved.description": "Configure the time saved on each run to track the manual work it saves.",
 	"canvas.selection.toolbar.group": "Group nodes",
-	"canvas.selection.toolbar.ungroup": "Ungroup",
+	"canvas.selection.toolbar.ungroup": "Ungroup nodes",
 	"canvas.nodeGroup.defaultTitle": "Group",
 	"canvas.nodeGroup.connectionAddBlocked.title": "Connection not added",
 	"canvas.nodeGroup.connectionRemoveBlocked.title": "Connection not removed",

packages/frontend/editor-ui/src/app/composables/useCanvasOperations.test.ts

@@ -3530,7 +3530,7 @@ describe('useCanvasOperations', () => {
 				throw new Error('Expected ungroup action to be a vnode');
 			}
 
-			expect(ungroupAction.children).toBe('Ungroup');
+			expect(ungroupAction.children).toBe('Ungroup nodes');
 			expect(ungroupAction.props).toEqual(
 				expect.objectContaining({ href: '#', class: 'primary-color' }),
 			);

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/groups/CanvasNodeGroupTitleBar.test.ts

@@ -93,6 +93,28 @@ describe('CanvasNodeGroupTitleBar', () => {
 		});
 	});
 
+	describe('double-click to toggle collapse', () => {
+		it('emits toggle when the group body is double-clicked', async () => {
+			const wrapper = render();
+			await fireEvent.dblClick(wrapper.getByTestId('canvas-node-group-header'));
+			expect(wrapper.emitted().toggle).toEqual([['g1']]);
+		});
+
+		it('does not emit toggle when the title is double-clicked', async () => {
+			const wrapper = render();
+			const titleArea = wrapper.getByTestId('canvas-node-group-title');
+			const titleEdit = titleArea.querySelector('.nodrag') as HTMLElement;
+			await fireEvent.dblClick(titleEdit);
+			expect(wrapper.emitted().toggle).toBeUndefined();
+		});
+
+		it('does not emit toggle when the ungroup button is double-clicked', async () => {
+			const wrapper = render();
+			await fireEvent.dblClick(wrapper.getByTestId('canvas-node-group-ungroup'));
+			expect(wrapper.emitted().toggle).toBeUndefined();
+		});
+	});
+
 	describe('height invariant; nodrag on interactive children', () => {
 		it('has the fixed header height when collapsed', () => {
 			const wrapper = render({ data: makeData({ isCollapsed: true }) });

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/groups/CanvasNodeGroupTitleBar.vue

@@ -112,6 +112,15 @@ function onToggleClick() {
 	emit('toggle', group.value.id);
 }
 
+// Toggle collapse on double clicking
+function onWrapperDblClick(event: MouseEvent) {
+	const target = event.target as HTMLElement | null;
+	// if happened inside an element with its own click behavior, do nothing
+	if (target?.closest('.nodrag')) return;
+
+	emit('toggle', group.value.id);
+}
+
 async function focusTitleEdit() {
 	if (props.autofocusGroupId !== group.value.id || props.readOnly || !isAutofocusReady.value)
 		return;
@@ -175,6 +184,7 @@ function onWrapperPointerDown(event: PointerEvent) {
 		data-test-id="canvas-node-group"
 		:data-group-id="group.id"
 		@pointerdown="onWrapperPointerDown"
+		@dblclick.stop="onWrapperDblClick"
 	>
 		<div :class="$style.titleBar">
 			<Handle