From 6a93aed3a2c428633fdf922df73203d3d41a7bb6 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 1 Feb 2023 16:50:35 +0100
Subject: [PATCH] fix(editor): Stop unsaved changes popup display when
 navigating away from an untouched workflow (#5259)

* fix(editor): Stop unsaved changes popup showing up after loading a workflow

* fix(editor): Fix unsaved change confirmation display
---
 .../ExecutionsView/ExecutionsList.vue         |  49 ++++---
 packages/editor-ui/src/stores/workflows.ts    |  12 +-
 packages/editor-ui/src/utils/canvasUtils.ts   |  19 +--
 packages/editor-ui/src/views/NodeView.vue     | 122 +++++++-----------
 4 files changed, 81 insertions(+), 121 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index 660031ed37..64faf60e55 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -24,6 +24,7 @@
 <script lang="ts">
 import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
 import {
+	MAIN_HEADER_TABS,
 	MODAL_CANCEL,
 	MODAL_CLOSE,
 	MODAL_CONFIRMED,
@@ -121,36 +122,34 @@ export default mixins(
 		},
 	},
 	async beforeRouteLeave(to, from, next) {
-		const nextTab = getNodeViewTab(to);
-		// When leaving for a page that's not a workflow view tab, ask to save changes
-		if (!nextTab) {
-			const result = this.uiStore.stateIsDirty;
-			if (result) {
-				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-					'warning',
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-					true,
-				);
+		if (getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW) {
+			next();
+			return;
+		}
+		if (this.uiStore.stateIsDirty) {
+			const confirmModal = await this.confirmModal(
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+				'warning',
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+				true,
+			);
 
-				if (confirmModal === MODAL_CONFIRMED) {
-					const saved = await this.saveCurrentWorkflow({}, false);
-					if (saved) this.settingsStore.fetchPromptsData();
-					this.uiStore.stateIsDirty = false;
-					next();
-				} else if (confirmModal === MODAL_CANCEL) {
-					this.uiStore.stateIsDirty = false;
-					next();
-				} else if (confirmModal === MODAL_CLOSE) {
-					next(false);
+			if (confirmModal === MODAL_CONFIRMED) {
+				const saved = await this.saveCurrentWorkflow({}, false);
+				if (saved) {
+					await this.settingsStore.fetchPromptsData();
 				}
-			} else {
+				this.uiStore.stateIsDirty = false;
+				next();
+			} else if (confirmModal === MODAL_CANCEL) {
+				this.uiStore.stateIsDirty = false;
 				next();
 			}
+		} else {
+			next();
 		}
-		next();
 	},
 	async mounted() {
 		this.loading = true;
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index cec309b81e..af5d5992e1 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -315,7 +315,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		setWorkflowName(data: { newName: string; setStateDirty: boolean }): void {
-			if (data.setStateDirty === true) {
+			if (data.setStateDirty) {
 				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
 			}
@@ -532,16 +532,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
 		},
 
-		addConnection(data: { connection: IConnection[]; setStateDirty: boolean }): void {
+		addConnection(data: { connection: IConnection[] }): void {
 			if (data.connection.length !== 2) {
 				// All connections need two entries
 				// TODO: Check if there is an error or whatever that is supposed to be returned
 				return;
 			}
-			const uiStore = useUIStore();
-			if (data.setStateDirty === true) {
-				uiStore.stateIsDirty = true;
-			}
 
 			const sourceData: IConnection = data.connection[0];
 			const destinationData: IConnection = data.connection[1];
@@ -626,7 +622,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		removeAllConnections(data: { setStateDirty: boolean }): void {
-			if (data && data.setStateDirty === true) {
+			if (data && data.setStateDirty) {
 				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
 			}
@@ -771,7 +767,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		removeAllNodes(data: { setStateDirty: boolean; removePinData: boolean }): void {
-			if (data.setStateDirty === true) {
+			if (data.setStateDirty) {
 				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
 			}
diff --git a/packages/editor-ui/src/utils/canvasUtils.ts b/packages/editor-ui/src/utils/canvasUtils.ts
index a0a61158f0..258a0b3e9c 100644
--- a/packages/editor-ui/src/utils/canvasUtils.ts
+++ b/packages/editor-ui/src/utils/canvasUtils.ts
@@ -76,19 +76,14 @@ export const closestNumberDivisibleBy = (inputNumber: number, divisibleBy: numbe
 };
 
 export const getNodeViewTab = (route: Route): string | null => {
-	const routeMeta = route.meta;
-	if (routeMeta && routeMeta.nodeView === true) {
+	if (route.meta?.nodeView) {
 		return MAIN_HEADER_TABS.WORKFLOW;
-	} else {
-		const executionTabRoutes = [
-			VIEWS.WORKFLOW_EXECUTIONS.toString(),
-			VIEWS.EXECUTION_PREVIEW.toString(),
-			VIEWS.EXECUTION_HOME.toString(),
-		];
-
-		if (executionTabRoutes.includes(route.name || '')) {
-			return MAIN_HEADER_TABS.EXECUTIONS;
-		}
+	} else if (
+		[VIEWS.WORKFLOW_EXECUTIONS, VIEWS.EXECUTION_PREVIEW, VIEWS.EXECUTION_HOME]
+			.map(String)
+			.includes(String(route.name))
+	) {
+		return MAIN_HEADER_TABS.EXECUTIONS;
 	}
 	return null;
 };
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 95b36221e4..302ad710f0 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -402,55 +402,45 @@ export default mixins(
 		},
 	},
 	async beforeRouteLeave(to, from, next) {
-		const nextTab = getNodeViewTab(to);
-		// Only react if leaving workflow tab and going to a separate page
-		if (!nextTab) {
-			// Skip check if in the middle of template import
-			if (from.name === VIEWS.TEMPLATE_IMPORT) {
-				next();
-				return;
-			}
-			// Make sure workflow id is empty when leaving the editor
-			this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-			const result = this.uiStore.stateIsDirty;
-			if (result) {
-				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-					'warning',
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-					true,
-				);
-
-				if (confirmModal === MODAL_CONFIRMED) {
-					const saved = await this.saveCurrentWorkflow({}, false);
-					if (saved) await this.settingsStore.fetchPromptsData();
-					this.uiStore.stateIsDirty = false;
-
-					if (from.name === VIEWS.NEW_WORKFLOW) {
-						// Replace the current route with the new workflow route
-						// before navigating to the new route when saving new workflow.
-						this.$router.replace(
-							{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
-							() => {
-								// We can't use next() here since vue-router
-								// would prevent the navigation with an error
-								this.$router.push(to as RawLocation);
-							},
-						);
-					} else {
-						next();
-					}
-				} else if (confirmModal === MODAL_CANCEL) {
-					await this.resetWorkspace();
-					this.uiStore.stateIsDirty = false;
-
-					next();
-				} else if (confirmModal === MODAL_CLOSE) {
-					next(false);
+		if (getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS || from.name === VIEWS.TEMPLATE_IMPORT) {
+			next();
+			return;
+		}
+		// Make sure workflow id is empty when leaving the editor
+		this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+		if (this.uiStore.stateIsDirty) {
+			const confirmModal = await this.confirmModal(
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+				'warning',
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+				true,
+			);
+			if (confirmModal === MODAL_CONFIRMED) {
+				const saved = await this.saveCurrentWorkflow({}, false);
+				if (saved) {
+					await this.settingsStore.fetchPromptsData();
 				}
-			} else {
+				this.uiStore.stateIsDirty = false;
+
+				if (from.name === VIEWS.NEW_WORKFLOW) {
+					// Replace the current route with the new workflow route
+					// before navigating to the new route when saving new workflow.
+					this.$router.replace(
+						{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
+						() => {
+							// We can't use next() here since vue-router
+							// would prevent the navigation with an error
+							this.$router.push(to as RawLocation);
+						},
+					);
+				} else {
+					next();
+				}
+			} else if (confirmModal === MODAL_CANCEL) {
+				await this.resetWorkspace();
+				this.uiStore.stateIsDirty = false;
 				next();
 			}
 		} else {
@@ -1979,8 +1969,9 @@ export default mixins(
 			sourceNodeOutputIndex: number,
 			targetNodeName: string,
 			targetNodeOuputIndex: number,
-			trackHistory = false,
 		) {
+			this.uiStore.stateIsDirty = true;
+
 			if (
 				this.getConnection(
 					sourceNodeName,
@@ -2039,17 +2030,11 @@ export default mixins(
 
 					const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
 					const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
-					this.connectTwoNodes(
-						newNodeData.name,
-						0,
-						targetNodeName,
-						targetOutputIndex,
-						trackHistory,
-					);
+					this.connectTwoNodes(newNodeData.name, 0, targetNodeName, targetOutputIndex);
 				}
 
 				// Connect active node to the newly created one
-				this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0, trackHistory);
+				this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0);
 			}
 			this.historyStore.stopRecordingUndo();
 		},
@@ -2102,13 +2087,7 @@ export default mixins(
 							const sourceNodeName = sourceNode.name;
 							const outputIndex = connection.parameters.index;
 
-							this.connectTwoNodes(
-								sourceNodeName,
-								outputIndex,
-								this.pullConnActiveNodeName,
-								0,
-								true,
-							);
+							this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
 							this.pullConnActiveNodeName = null;
 						}
 						return;
@@ -2181,10 +2160,6 @@ export default mixins(
 						},
 					];
 
-					this.workflowsStore.addConnection({
-						connection: connectionData,
-						setStateDirty: true,
-					});
 					this.dropPrevented = true;
 					if (!this.suspendRecordingDetachedConnections) {
 						this.historyStore.pushCommandToUndo(new AddConnectionCommand(connectionData));
@@ -2331,7 +2306,7 @@ export default mixins(
 						if (connectionInfo) {
 							this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
 						}
-						this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0, true);
+						this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
 						this.pullConnActiveNodeName = null;
 						await this.$nextTick();
 						this.historyStore.stopRecordingUndo();
@@ -2553,7 +2528,7 @@ export default mixins(
 			window.addEventListener('beforeunload', (e) => {
 				if (this.isDemo) {
 					return;
-				} else if (this.uiStore.stateIsDirty === true) {
+				} else if (this.uiStore.stateIsDirty) {
 					const confirmationMessage = this.$locale.baseText(
 						'nodeView.itLooksLikeYouHaveBeenEditingSomething',
 					);
@@ -2595,12 +2570,8 @@ export default mixins(
 					uuids: uuid,
 					detachable: !this.isReadOnly,
 				});
-			} else {
-				const connectionProperties = { connection, setStateDirty: false };
-				// When nodes get connected it gets saved automatically to the storage
-				// so if we do not connect we have to save the connection manually
-				this.workflowsStore.addConnection(connectionProperties);
 			}
+			this.workflowsStore.addConnection({ connection });
 
 			setTimeout(() => {
 				this.addPinDataConnections(this.workflowsStore.pinData);
@@ -2984,7 +2955,6 @@ export default mixins(
 								sourceNodeOutputIndex,
 								targetNodeName,
 								targetNodeOuputIndex,
-								trackHistory,
 							);
 
 							if (waitForNewConnection) {