feat(editor): Add option to disable NDV in workflow previews (#7990)

## Summary
This PR adds a new property to the `WorkflowPreview` component that
controls if the Node Details View can be opened in each workflow preview
or not.
This property is passed on to underlying `iframe` via the `postMessage`
and is used to disable pointer events for nodes and stickies in that
preview.

#### How to test the change:
Until the component that uses this flag is implemented this can be
tested manually. In this example, we'll use `WorkflowPreview` as part of
the `TemplatesWorkflowView` component
1. Pass `:canOpenNDV="false"` to this component
2. Run n8n
3. Open any template preview and check if nodes and stickies are
interactive
4. Open any workflow execution preview -> Nodes and Stickies should be
interactive

## Issues fixed
Fixes ADO-1548

## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again. A feature is not complete without tests.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).

packages/editor-ui/src/components/Node.vue

@@ -15,6 +15,7 @@
 				'touch-active': isTouchActive,
 				'is-touch-device': isTouchDevice,
 				'menu-open': isContextMenuOpen,
+				'disable-pointer-events': disablePointerEvents,
 			}"
 		>
 			<div
@@ -207,6 +208,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		disablePointerEvents: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
@@ -760,6 +765,9 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 		cursor: pointer;
+		&.disable-pointer-events {
+			pointer-events: none;
+		}
 
 		.node-box {
 			width: 100%;

packages/editor-ui/src/components/Sticky.vue

@@ -12,6 +12,7 @@
 				'sticky-default': true,
 				'touch-active': isTouchActive,
 				'is-touch-device': isTouchDevice,
+				'is-read-only': isReadOnly,
 			}"
 			:style="stickySize"
 		>
@@ -351,6 +352,10 @@ export default defineComponent({
 			}
 		}
 
+		&.is-read-only {
+			pointer-events: none;
+		}
+
 		.sticky-options {
 			display: none;
 			justify-content: flex-start;

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

@@ -37,11 +37,13 @@ const props = withDefaults(
 		executionId?: string;
 		executionMode?: string;
 		loaderType?: 'image' | 'spinner';
+		canOpenNDV?: boolean;
 	}>(),
 	{
 		loading: false,
 		mode: 'workflow',
 		loaderType: 'image',
+		canOpenNDV: true,
 	},
 );
 
@@ -82,6 +84,7 @@ const loadWorkflow = () => {
 			JSON.stringify({
 				command: 'openWorkflow',
 				workflow: props.workflow,
+				canOpenNDV: props.canOpenNDV,
 			}),
 			'*',
 		);
@@ -104,6 +107,7 @@ const loadExecution = () => {
 				command: 'openExecution',
 				executionId: props.executionId,
 				executionMode: props.executionMode || '',
+				canOpenNDV: props.canOpenNDV,
 			}),
 			'*',
 		);

packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts

@@ -100,6 +100,7 @@ describe('WorkflowPreview', () => {
 				JSON.stringify({
 					command: 'openWorkflow',
 					workflow,
+					canOpenNDV: true,
 				}),
 				'*',
 			);
@@ -140,6 +141,7 @@ describe('WorkflowPreview', () => {
 					command: 'openExecution',
 					executionId,
 					executionMode: '',
+					canOpenNDV: true,
 				}),
 				'*',
 			);
@@ -168,6 +170,7 @@ describe('WorkflowPreview', () => {
 					command: 'openExecution',
 					executionId,
 					executionMode: '',
+					canOpenNDV: true,
 				}),
 				'*',
 			);
@@ -203,6 +206,7 @@ describe('WorkflowPreview', () => {
 				JSON.stringify({
 					command: 'openWorkflow',
 					workflow,
+					canOpenNDV: true,
 				}),
 				'*',
 			);
@@ -221,6 +225,29 @@ describe('WorkflowPreview', () => {
 		});
 	});
 
+	it('should pass the "Disable NDV" flag to using PostMessage', async () => {
+		const nodes = [{ name: 'Start' }] as INodeUi[];
+		const workflow = { nodes } as IWorkflowDb;
+		const { container } = renderComponent({
+			pinia,
+			props: {
+				workflow,
+				canOpenNDV: false,
+			},
+		});
+		sendPostMessageCommand('n8nReady');
+		await waitFor(() => {
+			expect(postMessageSpy).toHaveBeenCalledWith(
+				JSON.stringify({
+					command: 'openWorkflow',
+					workflow,
+					canOpenNDV: false,
+				}),
+				'*',
+			);
+		});
+	});
+
 	it('should emit "close" event if iframe sends "error" command', async () => {
 		const { emitted } = renderComponent({
 			pinia,

packages/editor-ui/src/views/NodeView.vue

@@ -59,6 +59,7 @@
 						:hideActions="pullConnActive"
 						:isProductionExecutionPreview="isProductionExecutionPreview"
 						:workflow="currentWorkflowObject"
+						:disablePointerEvents="!canOpenNDV"
 					>
 						<template #custom-tooltip>
 							<span
@@ -741,6 +742,7 @@ export default defineComponent({
 			NODE_CREATOR_OPEN_SOURCES,
 			eventsAttached: false,
 			unloadTimeout: undefined as undefined | ReturnType<typeof setTimeout>,
+			canOpenNDV: true,
 		};
 	},
 	methods: {
@@ -4322,6 +4324,7 @@ export default defineComponent({
 				if (json && json.command === 'openWorkflow') {
 					try {
 						await this.importWorkflowExact(json);
+						this.canOpenNDV = json.canOpenNDV ?? true;
 						this.isExecutionPreview = false;
 					} catch (e) {
 						if (window.top) {
@@ -4346,6 +4349,7 @@ export default defineComponent({
 						this.isProductionExecutionPreview = json.executionMode !== 'manual';
 
 						await this.openExecution(json.executionId);
+						this.canOpenNDV = json.canOpenNDV ?? true;
 						this.isExecutionPreview = true;
 					} catch (e) {
 						if (window.top) {