fix(editor): Fix connections disappearing after reactivating canvas a…

…nd renaming a node (#7483)

Github issue / Community forum post (link here to close automatically):
-
https://community.n8n.io/t/1-11-1-possible-bug-all-nodes-randomly-losing-their-connectors/31856
- https://community.n8n.io/t/lines-between-nodes-have-disappeared/31846

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

cypress/e2e/12-canvas.cy.ts

@@ -8,8 +8,10 @@ import {
 	MERGE_NODE_NAME,
 } from './../constants';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+import { WorkflowExecutionsTab } from '../pages';
 
 const WorkflowPage = new WorkflowPageClass();
+const ExecutionsTab = new WorkflowExecutionsTab();
 
 const DEFAULT_ZOOM_FACTOR = 1;
 const ZOOM_IN_X1_FACTOR = 1.25; // Zoom in factor after one click
@@ -306,4 +308,35 @@ describe('Canvas Node Manipulation and Navigation', () => {
 		WorkflowPage.getters.canvasNodes().should('have.length', 3);
 		WorkflowPage.getters.nodeConnections().should('have.length', 1);
 	});
+
+	// ADO-1240: Connections would get deleted after activating and deactivating NodeView
+	it('should preserve connections after rename & node-view switch', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.executeWorkflow();
+
+		ExecutionsTab.actions.switchToExecutionsTab();
+		ExecutionsTab.getters.successfulExecutionListItems().should('have.length', 1);
+
+		ExecutionsTab.actions.switchToEditorTab();
+
+		ExecutionsTab.actions.switchToExecutionsTab();
+		ExecutionsTab.getters.successfulExecutionListItems().should('have.length', 1);
+
+		ExecutionsTab.actions.switchToEditorTab();
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+
+		WorkflowPage.getters.canvasNodes().last().click();
+		cy.get('body').trigger('keydown', { key: 'F2' });
+		cy.get('.rename-prompt').should('be.visible');
+		cy.get('body').type(RENAME_NODE_NAME);
+		cy.get('body').type('{enter}');
+		WorkflowPage.getters.canvasNodeByName(RENAME_NODE_NAME).should('exist');
+		// Make sure all connections are there after save & reload
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		cy.reload();
+		cy.waitForLoad();
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+		cy.get('.rect-input-endpoint.jtk-endpoint-connected').should('have.length', 1);
+	})
 });

packages/editor-ui/src/views/NodeView.vue

@@ -223,6 +223,7 @@ import {
 	WORKFLOW_LM_CHAT_MODAL_KEY,
 	AI_NODE_CREATOR_VIEW,
 	DRAG_EVENT_DATA_KEY,
+	UPDATE_WEBHOOK_ID_NODE_TYPES,
 } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
@@ -2875,6 +2876,7 @@ export default defineComponent({
 			this.instance.unbind(EVENT_CONNECTION_DETACHED, this.onConnectionDragAbortDetached);
 			this.instance.unbind(EVENT_PLUS_ENDPOINT_CLICK, this.onPlusEndpointClick);
 			this.instance.unbind(EVENT_ADD_INPUT_ENDPOINT_CLICK, this.onAddInputEndpointClick);
+			this.eventsAttached = false;
 		},
 		unbindEndpointEventListeners(bind = true) {
 			if (this.instance) {