Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 28, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea36ec0
fix: Suppress dev server websocket messages in workflow view
cstuncsik Nov 24, 2023
ba17b77
fix: Suppress message process in NodeView if there is no command
cstuncsik Nov 24, 2023
19ede07
Merge remote-tracking branch 'origin/master' into supress-dev-server-…
cstuncsik Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions packages/editor-ui/src/components/WorkflowPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,19 +135,21 @@ const onMouseLeave = () => {
};

const receiveMessage = ({ data }: MessageEvent) => {
try {
const json = JSON.parse(data);
if (json.command === 'n8nReady') {
ready.value = true;
} else if (json.command === 'openNDV') {
nodeViewDetailsOpened.value = true;
} else if (json.command === 'closeNDV') {
nodeViewDetailsOpened.value = false;
} else if (json.command === 'error') {
emit('close');
if (data?.includes('"command"')) {
try {
const json = JSON.parse(data);
if (json.command === 'n8nReady') {
ready.value = true;
} else if (json.command === 'openNDV') {
nodeViewDetailsOpened.value = true;
} else if (json.command === 'closeNDV') {
nodeViewDetailsOpened.value = false;
} else if (json.command === 'error') {
emit('close');
}
} catch (e) {
console.error(e);
}
} catch (e) {
console.error(e);
}
};
const onDocumentScroll = () => {
Expand Down
20 changes: 20 additions & 0 deletions packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview);
let pinia: ReturnType<typeof createPinia>;
let workflowsStore: ReturnType<typeof useWorkflowsStore>;
let postMessageSpy: vi.SpyInstance;
let consoleErrorSpy: vi.SpyInstance;

const sendPostMessageCommand = (command: string) => {
window.postMessage(`{"command":"${command}"}`, '*');
Expand All @@ -23,6 +24,7 @@ describe('WorkflowPreview', () => {
setActivePinia(pinia);
workflowsStore = useWorkflowsStore();

consoleErrorSpy = vi.spyOn(console, 'error');
postMessageSpy = vi.fn();
Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
writable: true,
Expand All @@ -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 () => {
renderComponent({
pinia,
Expand Down Expand Up @@ -227,4 +233,18 @@ describe('WorkflowPreview', () => {
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({});
});
});
});
96 changes: 49 additions & 47 deletions packages/editor-ui/src/views/NodeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4207,56 +4207,58 @@ export default defineComponent({
}
},
async onPostMessageReceived(message: MessageEvent) {
try {
const json = JSON.parse(message.data);
if (json && json.command === 'openWorkflow') {
try {
await this.importWorkflowExact(json);
this.isExecutionPreview = false;
} catch (e) {
if (window.top) {
window.top.postMessage(
JSON.stringify({
command: 'error',
message: this.$locale.baseText('openWorkflow.workflowImportError'),
}),
'*',
);
if (message?.data?.includes('"command"')) {
try {
const json = JSON.parse(message.data);
if (json && json.command === 'openWorkflow') {
try {
await this.importWorkflowExact(json);
this.isExecutionPreview = false;
} catch (e) {
if (window.top) {
window.top.postMessage(
JSON.stringify({
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({
title: this.$locale.baseText('openWorkflow.workflowImportError'),
message: (e as Error).message,
type: 'error',
});
}
} 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);
this.isExecutionPreview = true;
} catch (e) {
if (window.top) {
window.top.postMessage(
JSON.stringify({
command: 'error',
message: this.$locale.baseText('nodeView.showError.openExecution.title'),
}),
'*',
);
} 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);
this.isExecutionPreview = true;
} catch (e) {
if (window.top) {
window.top.postMessage(
JSON.stringify({
command: 'error',
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({
title: this.$locale.baseText('nodeView.showError.openExecution.title'),
message: (e as Error).message,
type: 'error',
});
} else if (json?.command === 'setActiveExecution') {
this.workflowsStore.activeWorkflowExecution = json.execution;
}
} else if (json?.command === 'setActiveExecution') {
this.workflowsStore.activeWorkflowExecution = json.execution;
}
} catch (e) {}
} catch (e) {}
}
},
async onImportWorkflowDataEvent(data: IDataObject) {
await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file');
Expand Down
Loading