fix(editor): Add back prompt requesting to save unsaved changes (no-changelog) (#10190)

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

@@ -1,17 +1,80 @@
 <script lang="ts" setup>
 import { useLocalStorage } from '@vueuse/core';
-import { watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, watch } from 'vue';
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
 import NodeViewV1 from '@/views/NodeView.vue';
 import NodeViewV2 from '@/views/NodeView.v2.vue';
+import { getNodeViewTab } from '@/utils/canvasUtils';
+import { MAIN_HEADER_TABS, PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useCanvasOperations } from '@/composables/useCanvasOperations';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+
+const workflowsStore = useWorkflowsStore();
+const sourceControlStore = useSourceControlStore();
 
 const router = useRouter();
+const route = useRoute();
+const workflowHelpers = useWorkflowHelpers({ router });
+
+const { resetWorkspace } = useCanvasOperations({ router });
 
 const nodeViewVersion = useLocalStorage('NodeView.version', '1');
 
+const workflowId = computed<string>(() => route.params.name as string);
+
+const isReadOnlyEnvironment = computed(() => {
+	return sourceControlStore.preferences.branchReadOnly;
+});
+
 watch(nodeViewVersion, () => {
 	router.go(0);
 });
+
+/**
+ * Routing
+ */
+
+onBeforeRouteLeave(async (to, from, next) => {
+	const toNodeViewTab = getNodeViewTab(to);
+
+	if (
+		toNodeViewTab === MAIN_HEADER_TABS.EXECUTIONS ||
+		from.name === VIEWS.TEMPLATE_IMPORT ||
+		(toNodeViewTab === MAIN_HEADER_TABS.WORKFLOW && from.name === VIEWS.EXECUTION_DEBUG) ||
+		isReadOnlyEnvironment.value
+	) {
+		next();
+		return;
+	}
+
+	await workflowHelpers.promptSaveUnsavedWorkflowChanges(next, {
+		async confirm() {
+			// Make sure workflow id is empty when leaving the editor
+			workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+
+			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.
+				await router.replace({
+					name: VIEWS.WORKFLOW,
+					params: { name: workflowId.value },
+				});
+
+				await router.push(to);
+
+				return false;
+			}
+
+			return true;
+		},
+		async cancel() {
+			workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			resetWorkspace();
+		},
+	});
+});
 </script>
 
 <template>