fix(editor): Adjust URL on lost change warning Cancel or failed save (#13683)

cypress/composables/modals/save-changes-modal.ts

@@ -1,3 +1,13 @@
 export function getSaveChangesModal() {
 	return cy.get('.el-overlay').contains('Save changes before leaving?');
 }
+
+// this is the button next to 'Save Changes'
+export function getCancelSaveChangesButton() {
+	return cy.get('.btn--cancel');
+}
+
+// This is the top right 'x'
+export function getCloseSaveChangesButton() {
+	return cy.get('.el-message-box__headerbtn');
+}

cypress/composables/workflowsPage.ts

@@ -6,6 +6,10 @@ export function getWorkflowsPageUrl() {
 	return '/home/workflows';
 }
 
+export const getCreateWorkflowButton = () => cy.getByTestId('add-resource-workflow');
+
+export const getNewWorkflowCardButton = () => cy.getByTestId('new-workflow-card');
+
 /**
  * Actions
  */

cypress/e2e/44-routing.cy.ts

@@ -1,26 +1,59 @@
-import { getSaveChangesModal } from '../composables/modals/save-changes-modal';
+import {
+	getCancelSaveChangesButton,
+	getCloseSaveChangesButton,
+	getSaveChangesModal,
+} from '../composables/modals/save-changes-modal';
+import { getHomeButton } from '../composables/projects';
+import { addNodeToCanvas } from '../composables/workflow';
+import {
+	getCreateWorkflowButton,
+	getNewWorkflowCardButton,
+	getWorkflowsPageUrl,
+	visitWorkflowsPage,
+} from '../composables/workflowsPage';
 import { EDIT_FIELDS_SET_NODE_NAME } from '../constants';
-import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
-import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
-
-const WorkflowsPage = new WorkflowsPageClass();
-const WorkflowPage = new WorkflowPageClass();
 
 describe('Workflows', () => {
 	beforeEach(() => {
-		cy.visit(WorkflowsPage.url);
+		visitWorkflowsPage();
 	});
 
 	it('should ask to save unsaved changes before leaving route', () => {
-		WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
+		getNewWorkflowCardButton().should('be.visible');
-		WorkflowsPage.getters.newWorkflowButtonCard().click();
+		getNewWorkflowCardButton().click();
 
 		cy.createFixtureWorkflow('Test_workflow_1.json', 'Empty State Card Workflow');
 
-		WorkflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
+		addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
 
-		cy.getByTestId('project-home-menu-item').click();
+		getHomeButton().click();
+
+		// We expect to still be on the workflow route here
+		cy.url().should('include', '/workflow/');
 
 		getSaveChangesModal().should('be.visible');
+		getCancelSaveChangesButton().click();
+
+		// Only now do we switch
+		cy.url().should('include', getWorkflowsPageUrl());
+	});
+
+	it('should correct route after cancelling saveChangesModal', () => {
+		getCreateWorkflowButton().click();
+
+		cy.createFixtureWorkflow('Test_workflow_1.json', 'Empty State Card Workflow');
+		addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
+
+		// Here we go back via browser rather than the home button
+		// As this already updates the route
+		cy.go(-1);
+
+		cy.url().should('include', getWorkflowsPageUrl());
+
+		getSaveChangesModal().should('be.visible');
+		getCloseSaveChangesButton().click();
+
+		// Confirm the url is back to the workflow
+		cy.url().should('include', '/workflow/');
 	});
 });

packages/frontend/editor-ui/src/composables/useWorkflowHelpers.ts

@@ -1,6 +1,7 @@
 import {
 	HTTP_REQUEST_NODE_TYPE,
 	MODAL_CANCEL,
+	MODAL_CLOSE,
 	MODAL_CONFIRM,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
@@ -827,6 +828,12 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 
 			const workflowDataRequest: IWorkflowDataUpdate = await getWorkflowDataToSave();
 
+			// This can happen if the user has another workflow in the browser history and navigates
+			// via the browser back button, encountering our warning dialog with the new route already set
+			if (workflowDataRequest.id !== currentWorkflow) {
+				throw new Error('Attempted to save a workflow different from the current workflow');
+			}
+
 			if (name) {
 				workflowDataRequest.name = name.trim();
 			}
@@ -1134,23 +1141,34 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 					showClose: true,
 				},
 			);
-
 			if (confirmModal === MODAL_CONFIRM) {
 				const saved = await saveCurrentWorkflow({}, false);
 				if (saved) {
 					await npsSurveyStore.fetchPromptsData();
-				}
+					uiStore.stateIsDirty = false;
-				uiStore.stateIsDirty = false;
+					const goToNext = await confirm();
-
+					next(goToNext);
-				const goToNext = await confirm();
+				} else {
-				if (goToNext) {
+					next(
-					next();
+						router.resolve({
+							name: VIEWS.WORKFLOW,
+							params: { name: workflowsStore.workflow.id },
+						}),
+					);
 				}
 			} else if (confirmModal === MODAL_CANCEL) {
 				await cancel();
 
 				uiStore.stateIsDirty = false;
 				next();
+			} else if (confirmModal === MODAL_CLOSE) {
+				// The route may have already changed due to the browser back button, so let's restore it
+				next(
+					router.resolve({
+						name: VIEWS.WORKFLOW,
+						params: { name: workflowsStore.workflow.id },
+					}),
+				);
 			}
 		} else {
 			next();