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" >