fix(editor): Reset canvas zoom before workspace reset in node view (#7625)

cypress/e2e/30-editor-after-route-changes.cy.ts

@@ -87,6 +87,40 @@ const editWorkflowMoreAndActivate = () => {
 	cy.get('.el-notification .el-notification--error').should('not.exist');
 };
 
+const switchBetweenEditorAndHistory = () => {
+	workflowPage.getters.workflowHistoryButton().click();
+	cy.wait(['@getHistory']);
+	cy.wait(['@getVersion']);
+
+	cy.intercept('GET', '/rest/workflows/*').as('workflowGet');
+	workflowHistoryPage.getters.workflowHistoryCloseButton().click();
+	cy.wait(['@workflowGet']);
+	cy.wait(1000);
+
+	workflowPage.getters.canvasNodes().first().should('be.visible');
+	workflowPage.getters.canvasNodes().last().should('be.visible');
+}
+
+const switchBetweenEditorAndWorkflowlist = () => {
+	cy.getByTestId('menu-item').first().click();
+	cy.wait(['@getUsers', '@getWorkflows', '@getActive', '@getCredentials']);
+
+	cy.getByTestId('resources-list-item').first().click();
+
+	workflowPage.getters.canvasNodes().first().should('be.visible');
+	workflowPage.getters.canvasNodes().last().should('be.visible');
+}
+
+const zoomInAndCheckNodes = () => {
+	cy.getByTestId('zoom-in-button').click();
+	cy.getByTestId('zoom-in-button').click();
+	cy.getByTestId('zoom-in-button').click();
+	cy.getByTestId('zoom-in-button').click();
+
+	workflowPage.getters.canvasNodes().first().should('not.be.visible');
+	workflowPage.getters.canvasNodes().last().should('not.be.visible');
+}
+
 describe('Editor actions should work', () => {
 	beforeEach(() => {
 		cy.enableFeature('debugInEditor');
@@ -149,3 +183,36 @@ describe('Editor actions should work', () => {
 		editWorkflowMoreAndActivate();
 	});
 });
+
+describe('Editor zoom should work after route changes', () => {
+	beforeEach(() => {
+		cy.enableFeature('debugInEditor');
+		cy.enableFeature('workflowHistory');
+		cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
+		workflowPage.actions.visit();
+		cy.createFixtureWorkflow('Lots_of_nodes.json', `Lots of nodes`);
+		workflowPage.actions.saveWorkflowOnButtonClick();
+	});
+
+	it('after switching between Editor and Workflow history and Workflow list', () => {
+		cy.intercept('GET', '/rest/workflow-history/workflow/*/version/*').as('getVersion');
+		cy.intercept('GET', '/rest/workflow-history/workflow/*').as('getHistory');
+		cy.intercept('GET', '/rest/users').as('getUsers');
+		cy.intercept('GET', '/rest/workflows').as('getWorkflows');
+		cy.intercept('GET', '/rest/active').as('getActive');
+		cy.intercept('GET', '/rest/credentials').as('getCredentials');
+
+		switchBetweenEditorAndHistory();
+		zoomInAndCheckNodes();
+		switchBetweenEditorAndHistory();
+		switchBetweenEditorAndHistory();
+		zoomInAndCheckNodes();
+		switchBetweenEditorAndWorkflowlist();
+		zoomInAndCheckNodes();
+		switchBetweenEditorAndWorkflowlist();
+		switchBetweenEditorAndWorkflowlist();
+		zoomInAndCheckNodes();
+		switchBetweenEditorAndHistory();
+		switchBetweenEditorAndWorkflowlist();
+	});
+});

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

@@ -4090,6 +4090,7 @@ export default defineComponent({
 
 			this.onToggleNodeCreator({ createNodeActive: false });
 			this.nodeCreatorStore.setShowScrim(false);
+			this.canvasStore.resetZoom();
 
 			// Reset nodes
 			this.unbindEndpointEventListeners();