feat(editor): Add ability to extract sub-workflows to canvas context menu (#15538)

packages/frontend/editor-ui/src/components/Modals.vue

@@ -38,6 +38,7 @@ import {
 	WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY,
 	FROM_AI_PARAMETERS_MODAL_KEY,
 	IMPORT_WORKFLOW_URL_MODAL_KEY,
+	WORKFLOW_EXTRACTION_NAME_MODAL_KEY,
 } from '@/constants';
 
 import AboutModal from '@/components/AboutModal.vue';
@@ -316,5 +317,11 @@ import type { EventBus } from '@n8n/utils/event-bus';
 				<FromAiParametersModal :modal-name="modalName" :data="data" />
 			</template>
 		</ModalRoot>
+
+		<ModalRoot :name="WORKFLOW_EXTRACTION_NAME_MODAL_KEY">
+			<template #default="{ modalName, data }">
+				<WorkflowExtractionNameModal :modal-name="modalName" :data="data" />
+			</template>
+		</ModalRoot>
 	</div>
 </template>

packages/frontend/editor-ui/src/components/WorkflowExtractionNameModal.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import WorkflowExtractionNameModal from '@/components/WorkflowExtractionNameModal.vue';
+import { WORKFLOW_EXTRACTION_NAME_MODAL_KEY } from '@/constants';
+import type { INodeUi } from '@/Interface';
+import type { ExtractableSubgraphData } from 'n8n-workflow';
+import { cloneDeep } from 'lodash-es';
+import userEvent from '@testing-library/user-event';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@/__tests__/render';
+
+const extractNodesIntoSubworkflow = vi.fn();
+vi.mock('@/composables/useWorkflowExtraction', () => {
+	return {
+		useWorkflowExtraction: () => ({
+			extractNodesIntoSubworkflow,
+		}),
+	};
+});
+
+const ModalStub = {
+	template: `
+		<div>
+			<slot name="header" />
+			<slot name="title" />
+			<slot name="content" />
+			<slot name="footer" />
+		</div>
+	`,
+};
+
+const global = {
+	stubs: {
+		Modal: ModalStub,
+	},
+};
+
+const renderModal = createComponentRenderer(WorkflowExtractionNameModal);
+let pinia: ReturnType<typeof createTestingPinia>;
+
+const DEFAULT_PROPS = {
+	modalName: WORKFLOW_EXTRACTION_NAME_MODAL_KEY,
+	data: {
+		subGraph: Symbol() as unknown as INodeUi[],
+		selection: Symbol() as ExtractableSubgraphData,
+	},
+};
+
+describe('WorkflowExtractionNameModal.vue', () => {
+	let props = DEFAULT_PROPS;
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		props = cloneDeep(DEFAULT_PROPS);
+		vi.resetAllMocks();
+	});
+
+	it('emits "close" event when the cancel button is clicked', async () => {
+		const { getByTestId } = renderModal({
+			props,
+			global,
+			pinia,
+		});
+		await userEvent.click(getByTestId('cancel-button'));
+		expect(extractNodesIntoSubworkflow).not.toHaveBeenCalled();
+	});
+
+	it('emits "submit" event with the correct name when the form is submitted', async () => {
+		const { getByTestId, getByRole } = renderModal({
+			props,
+			global,
+			pinia,
+		});
+
+		const input = getByRole('textbox');
+		// The auto-select isn't working for the test, so this doesn't clear the input
+		await userEvent.type(input, ' 2');
+		await userEvent.click(getByTestId('submit-button'));
+
+		expect(extractNodesIntoSubworkflow).toHaveBeenCalledWith(
+			DEFAULT_PROPS.data.selection,
+			DEFAULT_PROPS.data.subGraph,
+			'My Sub-workflow 2',
+		);
+	});
+});

packages/frontend/editor-ui/src/components/WorkflowExtractionNameModal.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { useI18n } from '@n8n/i18n';
+import { useWorkflowExtraction } from '@/composables/useWorkflowExtraction';
+import { WORKFLOW_EXTRACTION_NAME_MODAL_KEY } from '@/constants';
+import type { INodeUi } from '@/Interface';
+import { N8nFormInput } from '@n8n/design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
+import type { ExtractableSubgraphData } from 'n8n-workflow';
+import { computed, onMounted, ref } from 'vue';
+
+const props = defineProps<{
+	modalName: string;
+	data: {
+		subGraph: INodeUi[];
+		selection: ExtractableSubgraphData;
+	};
+}>();
+
+const DEFAULT_WORKFLOW_NAME = 'My Sub-workflow';
+
+const i18n = useI18n();
+const modalBus = createEventBus();
+
+const workflowExtraction = useWorkflowExtraction();
+const workflowName = ref(DEFAULT_WORKFLOW_NAME);
+
+const workflowNameOrDefault = computed(() => {
+	if (workflowName.value) return workflowName.value;
+
+	return DEFAULT_WORKFLOW_NAME;
+});
+
+const onSubmit = async () => {
+	const { selection, subGraph } = props.data;
+	await workflowExtraction.extractNodesIntoSubworkflow(
+		selection,
+		subGraph,
+		workflowNameOrDefault.value,
+	);
+	modalBus.emit('close');
+};
+
+const inputRef = ref<InstanceType<typeof N8nFormInput> | null>(null);
+
+onMounted(() => {
+	// With modals normal focusing via `props.focus-initially` on N8nFormInput does not work
+	setTimeout(() => {
+		inputRef.value?.inputRef?.select();
+		inputRef.value?.inputRef?.focus();
+	});
+});
+</script>
+
+<template>
+	<Modal
+		max-width="540px"
+		:title="
+			i18n.baseText('workflowExtraction.modal.description', {
+				interpolate: { nodeCount: props.data.subGraph.length },
+			})
+		"
+		:event-bus="modalBus"
+		:name="WORKFLOW_EXTRACTION_NAME_MODAL_KEY"
+		:center="true"
+		:close-on-click-modal="false"
+	>
+		<template #content>
+			<N8nFormInput
+				ref="inputRef"
+				v-model="workflowName"
+				name="key"
+				label=""
+				max-length="128"
+				focus-initially
+				@enter="onSubmit"
+			/>
+		</template>
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<n8n-button
+					type="secondary"
+					:label="i18n.baseText('generic.cancel')"
+					float="right"
+					data-test-id="cancel-button"
+					@click="close"
+				/>
+				<n8n-button
+					:label="i18n.baseText('generic.confirm')"
+					float="right"
+					:disabled="!workflowName"
+					data-test-id="submit-button"
+					@click="onSubmit"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.row {
+	margin-bottom: 10px;
+}
+.container {
+	h1 {
+		max-width: 90%;
+	}
+}
+
+.description {
+	font-size: var(--font-size-s);
+	margin: var(--spacing-s) 0;
+}
+
+.footer {
+	display: flex;
+	gap: var(--spacing-2xs);
+	justify-content: flex-end;
+}
+</style>

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

@@ -105,6 +105,7 @@ const emit = defineEmits<{
 	'selection:end': [position: XYPosition];
 	'open:sub-workflow': [nodeId: string];
 	'start-chat': [];
+	'extract-workflow': [ids: string[]];
 }>();
 
 const props = withDefaults(
@@ -314,6 +315,7 @@ const keyMap = computed(() => {
 		ctrl_enter: () => emit('run:workflow'),
 		ctrl_s: () => emit('save:workflow'),
 		shift_alt_t: async () => await onTidyUp({ source: 'keyboard-shortcut' }),
+		alt_x: emitWithSelectedNodes((ids) => emit('extract-workflow', ids)),
 		c: () => emit('start-chat'),
 	};
 	return fullKeymap;
@@ -695,6 +697,8 @@ async function onContextMenuAction(action: ContextMenuAction, nodeIds: string[])
 			return props.eventBus.emit('nodes:action', { ids: nodeIds, action: 'update:sticky:color' });
 		case 'tidy_up':
 			return await onTidyUp({ source: 'context-menu' });
+		case 'extract_sub_workflow':
+			return emit('extract-workflow', nodeIds);
 		case 'open_sub_workflow': {
 			return emit('open:sub-workflow', nodeIds[0]);
 		}