mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 12:44:07 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Suppress dev server websocket messages in workflow view (#7808)

Browse source
This commit is contained in:
Csaba Tuncsik 2023-11-28 17:30:44 +01:00 committed by GitHub
parent 117962d473
commit 685ffd7413
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/editor-ui/src/components/WorkflowPreview.vue
View file

@ -136,19 +136,21 @@ const onMouseLeave = () => {
}; };
const receiveMessage = ({ data }: MessageEvent) => { const receiveMessage = ({ data }: MessageEvent) => {
try { if (data?.includes('"command"')) {
const json = JSON.parse(data); try {
if (json.command === 'n8nReady') { const json = JSON.parse(data);
ready.value = true; if (json.command === 'n8nReady') {
} else if (json.command === 'openNDV') { ready.value = true;
nodeViewDetailsOpened.value = true; } else if (json.command === 'openNDV') {
} else if (json.command === 'closeNDV') { nodeViewDetailsOpened.value = true;
nodeViewDetailsOpened.value = false; } else if (json.command === 'closeNDV') {
} else if (json.command === 'error') { nodeViewDetailsOpened.value = false;
emit('close'); } else if (json.command === 'error') {
emit('close');
}
} catch (e) {
console.error(e);
} }
} catch (e) {
console.error(e);
} }
}; };
const onDocumentScroll = () => { const onDocumentScroll = () => {

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

@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview);
let pinia: ReturnType<typeof createPinia>; let pinia: ReturnType<typeof createPinia>;
let workflowsStore: ReturnType<typeof useWorkflowsStore>; let workflowsStore: ReturnType<typeof useWorkflowsStore>;
let postMessageSpy: vi.SpyInstance; let postMessageSpy: vi.SpyInstance;
let consoleErrorSpy: vi.SpyInstance;
const sendPostMessageCommand = (command: string) => { const sendPostMessageCommand = (command: string) => {
window.postMessage(`{"command":"${command}"}`, '*'); window.postMessage(`{"command":"${command}"}`, '*');
@ -23,6 +24,7 @@ describe('WorkflowPreview', () => {
setActivePinia(pinia); setActivePinia(pinia);
workflowsStore = useWorkflowsStore(); workflowsStore = useWorkflowsStore();
consoleErrorSpy = vi.spyOn(console, 'error');
postMessageSpy = vi.fn(); postMessageSpy = vi.fn();
Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', { Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
writable: true, writable: true,
@ -32,6 +34,10 @@ describe('WorkflowPreview', () => {
}); });
}); });
afterEach(() => {
consoleErrorSpy.mockRestore();
});
it('should not call iframe postMessage when it is ready and no workflow or executionId props', async () => { it('should not call iframe postMessage when it is ready and no workflow or executionId props', async () => {
renderComponent({ renderComponent({
pinia, pinia,
@ -227,4 +233,18 @@ describe('WorkflowPreview', () => {
expect(emitted().close).toBeDefined(); expect(emitted().close).toBeDefined();
}); });
}); });
it('should not do anything if no "command" is sent in the message', async () => {
const { emitted } = renderComponent({
pinia,
props: {},
});
window.postMessage('commando', '*');
await waitFor(() => {
expect(console.error).not.toHaveBeenCalled();
expect(emitted()).toEqual({});
});
});
}); });

94
packages/editor-ui/src/views/NodeView.vue
View file

@ -4260,56 +4260,58 @@ export default defineComponent({
} }
}, },
async onPostMessageReceived(message: MessageEvent) { async onPostMessageReceived(message: MessageEvent) {
try { if (message?.data?.includes('"command"')) {
const json = JSON.parse(message.data); try {
if (json && json.command === 'openWorkflow') { const json = JSON.parse(message.data);
try { if (json && json.command === 'openWorkflow') {
await this.importWorkflowExact(json); try {
this.isExecutionPreview = false; await this.importWorkflowExact(json);
} catch (e) { this.isExecutionPreview = false;
if (window.top) { } catch (e) {
window.top.postMessage( if (window.top) {
JSON.stringify({ window.top.postMessage(
command: 'error', JSON.stringify({
message: this.$locale.baseText('openWorkflow.workflowImportError'), command: 'error',
}), message: this.$locale.baseText('openWorkflow.workflowImportError'),
'*', }),
); '*',
);
}
this.showMessage({
title: this.$locale.baseText('openWorkflow.workflowImportError'),
message: (e as Error).message,
type: 'error',
});
} }
this.showMessage({ } else if (json && json.command === 'openExecution') {
title: this.$locale.baseText('openWorkflow.workflowImportError'), try {
message: (e as Error).message, // If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
type: 'error', // so everything it needs has to be sent using post messages and passed down to child components
}); this.isProductionExecutionPreview = json.executionMode !== 'manual';
}
} else if (json && json.command === 'openExecution') {
try {
// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
// so everything it needs has to be sent using post messages and passed down to child components
this.isProductionExecutionPreview = json.executionMode !== 'manual';
await this.openExecution(json.executionId); await this.openExecution(json.executionId);
this.isExecutionPreview = true; this.isExecutionPreview = true;
} catch (e) { } catch (e) {
if (window.top) { if (window.top) {
window.top.postMessage( window.top.postMessage(
JSON.stringify({ JSON.stringify({
command: 'error', command: 'error',
message: this.$locale.baseText('nodeView.showError.openExecution.title'), message: this.$locale.baseText('nodeView.showError.openExecution.title'),
}), }),
'*', '*',
); );
}
this.showMessage({
title: this.$locale.baseText('nodeView.showError.openExecution.title'),
message: (e as Error).message,
type: 'error',
});
} }
this.showMessage({ } else if (json?.command === 'setActiveExecution') {
title: this.$locale.baseText('nodeView.showError.openExecution.title'), this.workflowsStore.activeWorkflowExecution = json.execution;
message: (e as Error).message,
type: 'error',
});
} }
} else if (json?.command === 'setActiveExecution') { } catch (e) {}
this.workflowsStore.activeWorkflowExecution = json.execution; }
}
} catch (e) {}
}, },
async onImportWorkflowDataEvent(data: IDataObject) { async onImportWorkflowDataEvent(data: IDataObject) {
await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file'); await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file');