From f6ce81e7da74f80f81909b24f9675f7abcdb4265 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Thu, 4 Apr 2024 05:15:37 -0400
Subject: [PATCH] fix(editor): Canvas showing error toast when clicking outside
 of "import workflow by url" modal (#9001)

---
 cypress/e2e/39-import-workflow.cy.ts          | 74 +++++++++++++++++++
 cypress/e2e/7-workflow-actions.cy.ts          | 26 -------
 .../components/MainHeader/WorkflowDetails.vue |  4 +
 3 files changed, 78 insertions(+), 26 deletions(-)
 create mode 100644 cypress/e2e/39-import-workflow.cy.ts

diff --git a/cypress/e2e/39-import-workflow.cy.ts b/cypress/e2e/39-import-workflow.cy.ts
new file mode 100644
index 0000000000000..831228fba35d9
--- /dev/null
+++ b/cypress/e2e/39-import-workflow.cy.ts
@@ -0,0 +1,74 @@
+import { WorkflowPage } from '../pages';
+import { MessageBox as MessageBoxClass } from '../pages/modals/message-box';
+
+const workflowPage = new WorkflowPage();
+const messageBox = new MessageBoxClass();
+
+before(() => {
+	cy.fixture('Onboarding_workflow.json').then((data) => {
+		cy.intercept('GET', '/rest/workflows/from-url*', {
+			body: { data },
+		}).as('downloadWorkflowFromURL');
+	});
+});
+
+describe('Import workflow', () => {
+	describe('From URL', () => {
+		it('should import workflow', () => {
+			workflowPage.actions.visit(true);
+			workflowPage.getters.workflowMenu().click();
+			workflowPage.getters.workflowMenuItemImportFromURLItem().click();
+
+			messageBox.getters.modal().should('be.visible');
+
+			messageBox.getters.content().type('https://fakepage.com/workflow.json');
+
+			messageBox.getters.confirm().click();
+
+			workflowPage.actions.zoomToFit();
+
+			workflowPage.getters.canvasNodes().should('have.length', 4);
+
+			workflowPage.getters.errorToast().should('not.exist');
+
+			workflowPage.getters.successToast().should('not.exist');
+		});
+
+		it('clicking outside modal should not show error toast', () => {
+			workflowPage.actions.visit(true);
+
+			workflowPage.getters.workflowMenu().click();
+			workflowPage.getters.workflowMenuItemImportFromURLItem().click();
+
+			cy.get('body').click(0, 0);
+
+			workflowPage.getters.errorToast().should('not.exist');
+		});
+
+		it('canceling modal should not show error toast', () => {
+			workflowPage.actions.visit(true);
+
+			workflowPage.getters.workflowMenu().click();
+			workflowPage.getters.workflowMenuItemImportFromURLItem().click();
+			messageBox.getters.cancel().click();
+
+			workflowPage.getters.errorToast().should('not.exist');
+		});
+	});
+
+	describe('From File', () => {
+		it('should import workflow', () => {
+			workflowPage.actions.visit(true);
+
+			workflowPage.getters.workflowMenu().click();
+			workflowPage.getters.workflowMenuItemImportFromFile().click();
+			workflowPage.getters
+				.workflowImportInput()
+				.selectFile('cypress/fixtures/Test_workflow-actions_paste-data.json', { force: true });
+			cy.waitForLoad(false);
+			workflowPage.actions.zoomToFit();
+			workflowPage.getters.canvasNodes().should('have.length', 5);
+			workflowPage.getters.nodeConnections().should('have.length', 5);
+		});
+	});
+});
diff --git a/cypress/e2e/7-workflow-actions.cy.ts b/cypress/e2e/7-workflow-actions.cy.ts
index 2cf451b5ad8bd..04dc441c14794 100644
--- a/cypress/e2e/7-workflow-actions.cy.ts
+++ b/cypress/e2e/7-workflow-actions.cy.ts
@@ -13,8 +13,6 @@ import { getVisibleSelect } from '../utils';
 import { WorkflowExecutionsTab } from '../pages';
 
 const NEW_WORKFLOW_NAME = 'Something else';
-const IMPORT_WORKFLOW_URL =
-	'https://gist.githubusercontent.com/OlegIvaniv/010bd3f45c8a94f8eb7012e663a8b671/raw/3afea1aec15573cc168d9af7e79395bd76082906/test-workflow.json';
 const DUPLICATE_WORKFLOW_NAME = 'Duplicated workflow';
 const DUPLICATE_WORKFLOW_TAG = 'Duplicate';
 
@@ -146,30 +144,6 @@ describe('Workflow Actions', () => {
 		});
 	});
 
-	it('should import workflow from url', () => {
-		WorkflowPage.getters.workflowMenu().should('be.visible');
-		WorkflowPage.getters.workflowMenu().click();
-		WorkflowPage.getters.workflowMenuItemImportFromURLItem().should('be.visible');
-		WorkflowPage.getters.workflowMenuItemImportFromURLItem().click();
-		cy.get('.el-message-box').should('be.visible');
-		cy.get('.el-message-box').find('input').type(IMPORT_WORKFLOW_URL);
-		cy.get('body').type('{enter}');
-		cy.waitForLoad(false);
-		WorkflowPage.actions.zoomToFit();
-		WorkflowPage.getters.canvasNodes().should('have.length', 2);
-		WorkflowPage.getters.nodeConnections().should('have.length', 1);
-	});
-
-	it('should import workflow from file', () => {
-		WorkflowPage.getters
-			.workflowImportInput()
-			.selectFile('cypress/fixtures/Test_workflow-actions_paste-data.json', { force: true });
-		cy.waitForLoad(false);
-		WorkflowPage.actions.zoomToFit();
-		WorkflowPage.getters.canvasNodes().should('have.length', 5);
-		WorkflowPage.getters.nodeConnections().should('have.length', 5);
-	});
-
 	it('should update workflow settings', () => {
 		cy.visit(WorkflowPages.url);
 		WorkflowPages.getters.workflowCards().then((cards) => {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index e8836c651fd61..b38f72235ce98 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -587,6 +587,10 @@ export default defineComponent({
 							},
 						)) as MessageBoxInputData;
 
+						if (promptResponse === 'cancel') {
+							return;
+						}
+
 						nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
 					} catch (e) {}
 					break;