From c9b79485cf7d361174aeba175ccb98de7d918693 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 13 Sep 2023 09:00:35 +0200
Subject: [PATCH] fix(editor): Unbind workflow endpoint events in case of
 workspace reset  (#7129)

---
 cypress/e2e/7-workflow-actions.cy.ts      | 26 ++++++++++++++++++++++-
 packages/editor-ui/src/views/NodeView.vue | 22 +++++++++++--------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/7-workflow-actions.cy.ts b/cypress/e2e/7-workflow-actions.cy.ts
index fbba00e27b..368ba5fc03 100644
--- a/cypress/e2e/7-workflow-actions.cy.ts
+++ b/cypress/e2e/7-workflow-actions.cy.ts
@@ -3,10 +3,12 @@ import {
 	MANUAL_TRIGGER_NODE_NAME,
 	META_KEY,
 	SCHEDULE_TRIGGER_NODE_NAME,
+	SET_NODE_NAME,
 } from '../constants';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
-import { getVisibleDropdown, getVisibleSelect } from '../utils';
+import { getVisibleSelect } from '../utils';
+import { WorkflowExecutionsTab } from "../pages";
 
 const NEW_WORKFLOW_NAME = 'Something else';
 const IMPORT_WORKFLOW_URL =
@@ -16,6 +18,7 @@ const DUPLICATE_WORKFLOW_TAG = 'Duplicate';
 
 const WorkflowPage = new WorkflowPageClass();
 const WorkflowPages = new WorkflowsPageClass();
+const executionsTab = new WorkflowExecutionsTab();
 
 describe('Workflow Actions', () => {
 	beforeEach(() => {
@@ -250,4 +253,25 @@ describe('Workflow Actions', () => {
 			duplicateWorkflow();
 		});
 	});
+
+	it('should keep endpoint click working when switching between execution and editor tab', () => {
+		cy.intercept('GET', '/rest/executions?filter=*').as('getExecutions');
+		cy.intercept('GET', '/rest/executions-current?filter=*').as('getCurrentExecutions');
+
+		WorkflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+
+		WorkflowPage.getters.canvasNodePlusEndpointByName(SET_NODE_NAME).click();
+		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
+		cy.get('body').type('{esc}');
+
+		executionsTab.actions.switchToExecutionsTab();
+		cy.wait(['@getExecutions', '@getCurrentExecutions']);
+		cy.wait(500);
+		executionsTab.actions.switchToEditorTab();
+
+		WorkflowPage.getters.canvasNodePlusEndpointByName(SET_NODE_NAME).click();
+		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
+	});
 });
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 5af6123357..8a9b3d9d74 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -2531,15 +2531,18 @@ export default defineComponent({
 			this.instance.unbind(EVENT_CONNECTION_ABORT, this.onConnectionDragAbortDetached);
 			this.instance.unbind(EVENT_CONNECTION_DETACHED, this.onConnectionDragAbortDetached);
 			this.instance.unbind(EVENT_PLUS_ENDPOINT_CLICK, this.onPlusEndpointClick);
-
-			// Get all the endpoints and unbind the events
-			const elements = this.instance.getManagedElements();
-			for (const element of Object.values(elements)) {
-				const endpoints = element.endpoints;
-				for (const endpoint of endpoints || []) {
-					const endpointInstance = endpoint?.endpoint;
-					if (endpointInstance && endpointInstance.type === N8nPlusEndpointType) {
-						(endpointInstance as N8nPlusEndpoint).unbindEvents();
+		},
+		unbindEndpointEventListeners(bind = true) {
+			if (this.instance) {
+				// Get all the endpoints and unbind the events
+				const elements = this.instance.getManagedElements();
+				for (const element of Object.values(elements)) {
+					const endpoints = element.endpoints;
+					for (const endpoint of endpoints || []) {
+						const endpointInstance = endpoint?.endpoint;
+						if (endpointInstance && endpointInstance.type === N8nPlusEndpointType) {
+							(endpointInstance as N8nPlusEndpoint).unbindEvents();
+						}
 					}
 				}
 			}
@@ -3575,6 +3578,7 @@ export default defineComponent({
 			this.nodeCreatorStore.setShowScrim(false);
 
 			// Reset nodes
+			this.unbindEndpointEventListeners();
 			this.deleteEveryEndpoint();
 
 			// Make sure that if there is a waiting test-webhook that it gets removed