diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 3cc2b59c55..8fe9b64379 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/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,
}"
>
@@ -351,6 +352,10 @@ export default defineComponent({
}
}
+ &.is-read-only {
+ pointer-events: none;
+ }
+
.sticky-options {
display: none;
justify-content: flex-start;
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 846f1208e6..7ff352f656 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/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,
}),
'*',
);
diff --git a/packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts b/packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts
index a0cbc27c9b..ffe82a312e 100644
--- a/packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts
+++ b/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,
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index a0f0337342..84430e15bf 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -59,6 +59,7 @@
:hideActions="pullConnActive"
:isProductionExecutionPreview="isProductionExecutionPreview"
:workflow="currentWorkflowObject"
+ :disablePointerEvents="!canOpenNDV"
>
,
+ 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) {