mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-09 22:24:05 -08:00
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).
This commit is contained in:
parent
bbeeab5d27
commit
393afef174
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
}),
|
||||
'*',
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue