fix(editor): Canvas showing error toast when clicking outside of "import workflow by url" modal (#9001)

Author: RicardoE105

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);
+		});
+	});
+});

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) => {

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;