From 393afef1747f168d5fa42be2424fd02125f1bbac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Mon, 11 Dec 2023 15:30:01 +0100 Subject: [PATCH] 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 | 8 ++++++ packages/editor-ui/src/components/Sticky.vue | 5 ++++ .../src/components/WorkflowPreview.vue | 4 +++ .../__tests__/WorkflowPreview.test.ts | 27 +++++++++++++++++++ packages/editor-ui/src/views/NodeView.vue | 4 +++ 5 files changed, 48 insertions(+) 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" >