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 <[email protected]>
n8n-io · Oct 23, 2023 · 368e3ee · 368e3ee
1 parent 4a1641d
commit 368e3ee
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/cypress/e2e/12-canvas.cy.ts b/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);
+	})
 });
diff --git a/packages/editor-ui/src/views/NodeView.vue b/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';
@@ -345,7 +346,6 @@ import { EVENT_ADD_INPUT_ENDPOINT_CLICK } from '@/plugins/jsplumb/N8nAddInputEnd
 import { sourceControlEventBus } from '@/event-bus/source-control';
 import { getConnectorPaintStyleData, OVERLAY_ENDPOINT_ARROW_ID } from '@/utils/nodeViewUtils';
 import { useViewStacks } from '@/components/Node/NodeCreator/composables/useViewStacks';
-import { UPDATE_WEBHOOK_ID_NODE_TYPES } from '@/constants';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -2886,6 +2886,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) {