test(core): Add editor-only Docker build and local proxy for faster testing (no-changelog)

package.json

@@ -14,6 +14,7 @@
     "build:n8n": "node scripts/build-n8n.mjs",
     "build:deploy": "node scripts/build-n8n.mjs",
     "build:docker": "node scripts/build-n8n.mjs && node scripts/dockerize-n8n.mjs",
+    "build:docker:editor": "node scripts/build-docker-editor.mjs",
     "build:docker:coverage": "BUILD_WITH_COVERAGE=true node scripts/build-n8n.mjs && node scripts/dockerize-n8n.mjs",
     "build:docker:scan": "node scripts/build-n8n.mjs && node scripts/dockerize-n8n.mjs && node scripts/scan-n8n-image.mjs",
     "build:docker:clean": "TURBO_FORCE=true node scripts/build-n8n.mjs && DOCKER_BUILD_NO_CACHE=true DOCKER_BUILD_BASE_IMAGE=true node scripts/dockerize-n8n.mjs",

packages/frontend/@n8n/stores/src/useRootStore.ts

@@ -212,6 +212,10 @@ export const useRootStore = defineStore(STORES.ROOT, () => {
 		state.value.binaryDataMode = value;
 	};
 
+	const setPushRef = (value: string) => {
+		state.value.pushRef = value;
+	};
+
 	// #endregion
 
 	return {
@@ -255,5 +259,6 @@ export const useRootStore = defineStore(STORES.ROOT, () => {
 		setN8nMetadata,
 		setDefaultLocale,
 		setBinaryDataMode,
+		setPushRef,
 	};
 });

packages/frontend/editor-ui/src/app/components/WorkflowPreview.test.ts

@@ -335,6 +335,47 @@ describe('WorkflowPreview', () => {
 		});
 	});
 
+	describe('canExecute prop', () => {
+		it('should include canExecute=true in iframe src when canExecute prop is true', () => {
+			const { container } = renderComponent({
+				pinia,
+				props: {
+					canExecute: true,
+				},
+			});
+
+			const iframe = container.querySelector('iframe');
+			expect(iframe?.getAttribute('src')).toContain('canExecute=true');
+		});
+
+		it('should not include canExecute param when canExecute prop is false', () => {
+			const { container } = renderComponent({
+				pinia,
+				props: {
+					canExecute: false,
+				},
+			});
+
+			const iframe = container.querySelector('iframe');
+			expect(iframe?.getAttribute('src')).not.toContain('canExecute');
+		});
+
+		it('should include both hideControls and canExecute when both are true', () => {
+			const { container } = renderComponent({
+				pinia,
+				props: {
+					hideControls: true,
+					canExecute: true,
+				},
+			});
+
+			const iframe = container.querySelector('iframe');
+			const src = iframe?.getAttribute('src') ?? '';
+			expect(src).toContain('hideControls=true');
+			expect(src).toContain('canExecute=true');
+		});
+	});
+
 	describe('ready event', () => {
 		it('should emit ready event when iframe sends n8nReady command', async () => {
 			const { emitted } = renderComponent({

packages/frontend/editor-ui/src/app/components/WorkflowPreview.vue

@@ -22,6 +22,7 @@ const props = withDefaults(
 		focusOnLoad?: boolean;
 		hideControls?: boolean;
 		suppressNotifications?: boolean;
+		canExecute?: boolean;
 	}>(),
 	{
 		loading: false,
@@ -36,6 +37,7 @@ const props = withDefaults(
 		focusOnLoad: true,
 		hideControls: false,
 		suppressNotifications: false,
+		canExecute: false,
 	},
 );
 
@@ -58,10 +60,15 @@ const scrollY = ref(0);
 
 const iframeSrc = computed(() => {
 	const basePath = `${window.BASE_PATH ?? '/'}workflows/demo`;
+	const params = new URLSearchParams();
 	if (props.hideControls) {
-		return `${basePath}?hideControls=true`;
+		params.set('hideControls', 'true');
 	}
-	return basePath;
+	if (props.canExecute) {
+		params.set('canExecute', 'true');
+	}
+	const qs = params.toString();
+	return qs ? `${basePath}?${qs}` : basePath;
 });
 
 const showPreview = computed(() => {

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

@@ -72,11 +72,15 @@ vi.mock('@/features/execution/executions/executions.utils', async (importOrigina
 	};
 });
 
+const mockRoute = vi.hoisted(() => ({
+	name: 'workflow' as string,
+	query: {} as Record<string, string>,
+}));
 vi.mock('vue-router', async (importOriginal) => {
 	const actual = (await importOriginal()) as object;
 	return {
 		...actual,
-		useRoute: vi.fn(() => ({ name: 'workflow' })),
+		useRoute: vi.fn(() => mockRoute),
 	};
 });
 
@@ -93,6 +97,8 @@ describe('usePostMessageHandler', () => {
 		vi.clearAllMocks();
 		setActivePinia(createTestingPinia());
 		mockIsProductionExecutionPreview.value = false;
+		mockRoute.name = 'workflow';
+		mockRoute.query = {};
 		workflowState = createMockWorkflowState();
 	});
 
@@ -185,6 +191,74 @@ describe('usePostMessageHandler', () => {
 			cleanup();
 		});
 
+		it('should override workflow id to "demo" in iframe context when canExecute is not set', async () => {
+			// Simulate iframe context
+			const originalParent = Object.getOwnPropertyDescriptor(window, 'parent');
+			Object.defineProperty(window, 'parent', {
+				value: { postMessage: vi.fn() },
+				writable: true,
+				configurable: true,
+			});
+
+			const { setup, cleanup } = usePostMessageHandler({
+				workflowState,
+				currentWorkflowDocumentStore: shallowRef(null),
+			});
+			setup();
+
+			const workflow = { id: 'real-wf-id', nodes: [], connections: {} };
+			const messageEvent = new MessageEvent('message', {
+				data: JSON.stringify({ command: 'openWorkflow', workflow }),
+			});
+			window.dispatchEvent(messageEvent);
+
+			await vi.waitFor(() => {
+				expect(mockImportWorkflowExact).toHaveBeenCalledWith(
+					expect.objectContaining({ workflow: expect.objectContaining({ id: 'demo' }) }),
+				);
+			});
+
+			cleanup();
+			if (originalParent) {
+				Object.defineProperty(window, 'parent', originalParent);
+			}
+		});
+
+		it('should preserve real workflow id in iframe context when canExecute is true', async () => {
+			mockRoute.query = { canExecute: 'true' };
+
+			// Simulate iframe context
+			const originalParent = Object.getOwnPropertyDescriptor(window, 'parent');
+			Object.defineProperty(window, 'parent', {
+				value: { postMessage: vi.fn() },
+				writable: true,
+				configurable: true,
+			});
+
+			const { setup, cleanup } = usePostMessageHandler({
+				workflowState,
+				currentWorkflowDocumentStore: shallowRef(null),
+			});
+			setup();
+
+			const workflow = { id: 'real-wf-id', nodes: [], connections: {} };
+			const messageEvent = new MessageEvent('message', {
+				data: JSON.stringify({ command: 'openWorkflow', workflow }),
+			});
+			window.dispatchEvent(messageEvent);
+
+			await vi.waitFor(() => {
+				expect(mockImportWorkflowExact).toHaveBeenCalledWith(
+					expect.objectContaining({ workflow: expect.objectContaining({ id: 'real-wf-id' }) }),
+				);
+			});
+
+			cleanup();
+			if (originalParent) {
+				Object.defineProperty(window, 'parent', originalParent);
+			}
+		});
+
 		it('should emit tidyUp event when tidyUp is true', async () => {
 			const { setup, cleanup } = usePostMessageHandler({
 				workflowState,
@@ -346,6 +420,54 @@ describe('usePostMessageHandler', () => {
 			cleanup();
 		});
 
+		it('should always override workflow id to "demo" in iframe context', async () => {
+			mockRoute.query = { canExecute: 'true' };
+
+			// Simulate iframe context
+			const originalParent = Object.getOwnPropertyDescriptor(window, 'parent');
+			Object.defineProperty(window, 'parent', {
+				value: { postMessage: vi.fn() },
+				writable: true,
+				configurable: true,
+			});
+
+			const mockSetPinData = vi.fn();
+			const storeRef = shallowRef({ setPinData: mockSetPinData } as never);
+
+			const { setup, cleanup } = usePostMessageHandler({
+				workflowState,
+				currentWorkflowDocumentStore: storeRef,
+			});
+			setup();
+
+			const messageEvent = new MessageEvent('message', {
+				data: JSON.stringify({
+					command: 'openExecutionPreview',
+					workflow: {
+						id: 'real-wf-id',
+						nodes: [{ name: 'Node1' }],
+						connections: {},
+					},
+					nodeExecutionSchema: {},
+					executionStatus: 'success',
+				}),
+			});
+			window.dispatchEvent(messageEvent);
+
+			await vi.waitFor(() => {
+				expect(mockImportWorkflowExact).toHaveBeenCalledWith(
+					expect.objectContaining({
+						workflow: expect.objectContaining({ id: 'demo' }),
+					}),
+				);
+			});
+
+			cleanup();
+			if (originalParent) {
+				Object.defineProperty(window, 'parent', originalParent);
+			}
+		});
+
 		it('should throw if workflow has no nodes', async () => {
 			const { setup, cleanup } = usePostMessageHandler({
 				workflowState,

packages/frontend/editor-ui/src/app/composables/usePostMessageHandler.ts

@@ -1,5 +1,6 @@
 import { nextTick, type ShallowRef } from 'vue';
 import { useI18n } from '@n8n/i18n';
+import { useRoute } from 'vue-router';
 import type { ExecutionStatus, ExecutionSummary } from 'n8n-workflow';
 import { useToast } from '@/app/composables/useToast';
 import { useCanvasOperations } from '@/app/composables/useCanvasOperations';
@@ -45,6 +46,7 @@ export function usePostMessageHandler({
 	const telemetry = useTelemetry();
 	const nodeHelpers = useNodeHelpers();
 
+	const route = useRoute();
 	const workflowsStore = useWorkflowsStore();
 	const { resetWorkspace, openExecution, fitView } = useCanvasOperations();
 	const { importWorkflowExact } = useWorkflowImport(currentWorkflowDocumentStore);
@@ -81,12 +83,24 @@ export function usePostMessageHandler({
 		if (json.projectId) {
 			await projectsStore.fetchAndSetProject(json.projectId);
 		}
+
+		// On the demo route, override the workflow ID to 'demo' so the iframe
+		// doesn't reference a real workflow — unless canExecute is enabled,
+		// in which case the real ID is needed for execution API calls.
+		if (window !== window.parent && route.query.canExecute !== 'true') {
+			json.workflow.id = 'demo';
+		}
+
 		await importWorkflowExact(json);
 
 		// importWorkflowExact → resetWorkspace resets activeExecutionId to undefined,
-		// which causes the iframe to reject push execution events. Re-set to null so
-		// the iframe stays receptive to incoming execution push events.
-		if (window !== window.parent) {
+		// which causes the iframe to reject push execution events relayed from the
+		// parent. Re-set to null so the iframe stays receptive — but only when
+		// canExecute is disabled. When canExecute is enabled, leave it as undefined
+		// so the run button isn't disabled (isWorkflowRunning treats null as
+		// "execution starting"). The user-triggered execution flow will handle
+		// activeExecutionId itself.
+		if (window !== window.parent && route.query.canExecute !== 'true') {
 			workflowState.setActiveExecutionId(null);
 		}
 
@@ -162,6 +176,12 @@ export function usePostMessageHandler({
 			throw new Error('Invalid workflow object');
 		}
 
+		// Execution previews always use 'demo' ID — they display pre-computed
+		// results and never need real execution API calls.
+		if (window !== window.parent) {
+			json.workflow.id = 'demo';
+		}
+
 		if (json.projectId) {
 			await projectsStore.fetchAndSetProject(json.projectId);
 		}

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

@@ -118,14 +118,16 @@ describe('useWorkflowImport', () => {
 		);
 	});
 
-	it('should use "demo" id on demo routes', async () => {
+	it('should pass through workflow id as-is on demo routes', async () => {
 		mockRoute.name = VIEWS.DEMO;
 
 		const storeRef = shallowRef(null);
 		const { importWorkflowExact } = useWorkflowImport(storeRef);
 
-		await importWorkflowExact({ workflow: createWorkflowData({ id: 'ignored-id' }) });
+		await importWorkflowExact({ workflow: createWorkflowData({ id: 'real-workflow-id' }) });
 
-		expect(mockInitializeWorkspace).toHaveBeenCalledWith(expect.objectContaining({ id: 'demo' }));
+		expect(mockInitializeWorkspace).toHaveBeenCalledWith(
+			expect.objectContaining({ id: 'real-workflow-id' }),
+		);
 	});
 });

packages/frontend/editor-ui/src/app/composables/useWorkflowImport.ts

@@ -31,7 +31,6 @@ export function useWorkflowImport(
 
 		const { workflowDocumentStore } = await initializeWorkspace({
 			...workflowData,
-			id: isDemoRoute.value ? 'demo' : workflowData.id,
 			nodes: getNodesWithNormalizedPosition<INodeUi>(workflowData.nodes),
 		} as IWorkflowDb);