fix(editor): Fix workflow back button navigation (#4546)

* 🐛 Fix back button navigation from recetly saved workflow

* 🐛 Fix coming-soon routes

packages/editor-ui/src/App.vue

@@ -34,7 +34,6 @@ import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
 
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './components/mixins/showMessage';
-import { IUser } from './Interface';
 import { userHelpers } from './components/mixins/userHelpers';
 import { loadLanguage } from './plugins/i18n';
 import { restApi } from '@/components/mixins/restApi';

packages/editor-ui/src/components/SettingsSidebar.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
 			<template #header>
-				<div :class="$style.returnButton" @click="onReturn">
+				<div :class="$style.returnButton" @click="$emit('return')">
 					<i class="mr-xs">
 						<font-awesome-icon icon="arrow-left" />
 					</i>
@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { pushConnection } from "@/components/mixins/pushConnection";
@@ -123,9 +122,6 @@ export default mixins(
 		onVersionClick() {
 			this.uiStore.openModal(ABOUT_MODAL_KEY);
 		},
-		onReturn() {
-			this.$router.push({name: VIEWS.HOMEPAGE});
-		},
 		openUpdatesPanel() {
 			this.uiStore.openModal(VERSIONS_MODAL_KEY);
 		},

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -831,7 +831,7 @@ export const workflowHelpers = mixins(
 					}
 
 					if (redirect) {
-						this.$router.push({
+						this.$router.replace({
 							name: VIEWS.WORKFLOW,
 							params: { name: workflowData.id as string, action: 'workflowSave' },
 						});

packages/editor-ui/src/router.ts

@@ -9,6 +9,7 @@ import NodeView from '@/views/NodeView.vue';
 import ExecutionsView from '@/components/ExecutionsView/ExecutionsView.vue';
 import ExecutionsLandingPage from '@/components/ExecutionsView/ExecutionsLandingPage.vue';
 import ExecutionPreview from '@/components/ExecutionsView/ExecutionPreview.vue';
+import SettingsView from './views/SettingsView.vue';
 import SettingsPersonalView from './views/SettingsPersonalView.vue';
 import SettingsUsersView from './views/SettingsUsersView.vue';
 import SettingsCommunityNodesView from './views/SettingsCommunityNodesView.vue';
@@ -424,13 +425,39 @@ const router = new Router({
 		},
 		{
 			path: '/settings',
-			redirect: '/settings/personal',
+			component: SettingsView,
+			props: true,
+			children: [
+				{
+					path: 'personal',
+					name: VIEWS.PERSONAL_SETTINGS,
+					components: {
+						settingsView: SettingsPersonalView,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: 'personal',
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								loginStatus: [LOGIN_STATUS.LoggedIn],
+							},
+							deny: {
+								role: [ROLE.Default],
+							},
+						},
+					},
 				},
 				{
-			path: '/settings/users',
+					path: 'users',
 					name: VIEWS.USERS_SETTINGS,
 					components: {
-				default: SettingsUsersView,
+						settingsView: SettingsUsersView,
 					},
 					meta: {
 						telemetry: {
@@ -455,35 +482,10 @@ const router = new Router({
 					},
 				},
 				{
-			path: '/settings/personal',
+					path: 'api',
-			name: VIEWS.PERSONAL_SETTINGS,
-			components: {
-				default: SettingsPersonalView,
-			},
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: 'personal',
-						};
-					},
-				},
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
-					},
-					deny: {
-						role: [ROLE.Default],
-					},
-				},
-			},
-		},
-		{
-			path: '/settings/api',
 					name: VIEWS.API_SETTINGS,
 					components: {
-				default: SettingsApiView,
+						settingsView: SettingsApiView,
 					},
 					meta: {
 						telemetry: {
@@ -508,10 +510,10 @@ const router = new Router({
 					},
 				},
 				{
-			path: '/settings/community-nodes',
+					path: 'community-nodes',
 					name: VIEWS.COMMUNITY_NODES,
 					components: {
-				default: SettingsCommunityNodesView,
+						settingsView: SettingsCommunityNodesView,
 					},
 					meta: {
 						telemetry: {
@@ -531,10 +533,11 @@ const router = new Router({
 					},
 				},
 				{
-			path: '/settings/coming-soon/:featureId',
+					path: 'coming-soon/:featureId',
 					name: VIEWS.FAKE_DOOR,
-			component: SettingsFakeDoorView,
+					components: {
-			props: true,
+						settingsView: SettingsFakeDoorView,
+					},
 					meta: {
 						telemetry: {
 							pageCategory: 'settings',
@@ -551,6 +554,8 @@ const router = new Router({
 						},
 					},
 				},
+			],
+		},
 		{
 			path: '*',
 			name: VIEWS.NOT_FOUND,

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

@@ -220,7 +220,7 @@ import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { getNodeViewTab } from '@/components/helpers';
-import { Route } from 'vue-router';
+import { Route, RawLocation } from 'vue-router';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
@@ -347,11 +347,25 @@ export default mixins(
 
 					if (confirmModal === MODAL_CONFIRMED) {
 						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) this.settingsStore.fetchPromptsData();
+						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);

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

@@ -1,5 +1,4 @@
 <template>
-	<SettingsView>
 	<div :class="$style.container">
 		<div :class="$style.header">
 			<n8n-heading size="2xlarge">
@@ -63,7 +62,6 @@
 			@click="createApiKey"
 		/>
 	</div>
-	</SettingsView>
 </template>
 
 <script lang="ts">
@@ -71,8 +69,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
-import SettingsView from './SettingsView.vue';
+import CopyInput from '@/components/CopyInput.vue';
-import CopyInput from '../components/CopyInput.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
@@ -83,7 +80,6 @@ export default mixins(
 ).extend({
 	name: 'SettingsPersonalView',
 	components: {
-		SettingsView,
 		CopyInput,
 	},
 	data() {

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

@@ -1,5 +1,4 @@
 <template>
-	<SettingsView>
 	<div :class="$style.container">
 		<div :class="$style.headingContainer">
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
@@ -56,7 +55,6 @@
 			></community-package-card>
 		</div>
 	</div>
-	</SettingsView>
 </template>
 
 <script lang="ts">
@@ -64,10 +62,8 @@ import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	COMMUNITY_NODES_NPM_INSTALLATION_URL,
-} from '../constants';
+} from '@/constants';
-import { mapGetters } from 'vuex';
+import CommunityPackageCard from '@/components/CommunityPackageCard.vue';
-import SettingsView from './SettingsView.vue';
-import CommunityPackageCard from '../components/CommunityPackageCard.vue';
 import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { PublicInstalledPackage } from 'n8n-workflow';
@@ -84,7 +80,6 @@ export default mixins(
 ).extend({
 	name: 'SettingsCommunityNodesView',
 	components: {
-		SettingsView,
 		CommunityPackageCard,
 	},
 	data () {

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

@@ -1,21 +1,17 @@
 <template>
-	<SettingsView>
+	<feature-coming-soon :featureId="featureId" showTitle />
-		<FeatureComingSoon :featureId="featureId" showTitle />
-	</SettingsView>
 </template>
 
 <script lang="ts">
 import { IFakeDoor } from '@/Interface';
 import Vue from 'vue';
-import SettingsView from './SettingsView.vue';
+import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
-import FeatureComingSoon from '../components/FeatureComingSoon.vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
 export default Vue.extend({
 	name: 'SettingsFakeDoorView',
 	components: {
-		SettingsView,
 		FeatureComingSoon,
 	},
 	props: {

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

@@ -1,5 +1,4 @@
 <template>
-	<SettingsView>
 	<div :class="$style.container">
 		<div :class="$style.header">
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
@@ -39,7 +38,7 @@
 			<n8n-button float="right" :label="$locale.baseText('settings.personal.save')" size="large" :disabled="!hasAnyChanges || !readyToSubmit" @click="onSaveClick" />
 		</div>
 	</div>
-	</SettingsView>
+
 </template>
 
 <script lang="ts">
@@ -52,15 +51,10 @@ import { mapStores } from 'pinia';
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 
-import SettingsView from './SettingsView.vue';
-
 export default mixins(
 	showMessage,
 ).extend({
 	name: 'SettingsPersonalView',
-	components: {
-		SettingsView,
-	},
 	data() {
 		return {
 			hasAnyChanges: false,

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

@@ -1,5 +1,4 @@
 <template>
-	<SettingsView>
 	<div :class="$style.container">
 		<div>
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
@@ -37,13 +36,11 @@
 			<n8n-users-list :users="usersStore.allUsers" :currentUserId="usersStore.currentUserId" @delete="onDelete" @reinvite="onReinvite" />
 		</div>
 	</div>
-	</SettingsView>
 </template>
 
 <script lang="ts">
 import { INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
 
-import SettingsView from './SettingsView.vue';
 import PageAlert from '../components/PageAlert.vue';
 import { IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
@@ -56,7 +53,6 @@ import { useUsersStore } from '@/stores/users';
 export default mixins(showMessage).extend({
 	name: 'SettingsUsersView',
 	components: {
-		SettingsView,
 		PageAlert,
 	},
 	async mounted() {

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

@@ -1,26 +1,48 @@
 <template>
 	<div :class="$style.container">
-		<SettingsSidebar />
+		<SettingsSidebar @return="onReturn" />
 		<div :class="$style.contentContainer">
 			<div :class="$style.content">
-				<slot>
+				<!--
-				</slot>
+					Because we're using nested routes the props are going to be bind to the top level route
+					so we need to pass them down to the child component
+				-->
+				<router-view name="settingsView" v-bind="$attrs" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { Route } from 'vue-router';
 
-import SettingsSidebar from '../components/SettingsSidebar.vue';
+import { VIEWS } from '@/constants';
+import SettingsSidebar from '@/components/SettingsSidebar.vue';
 
-export default Vue.extend({
+const SettingsView = defineComponent({
 	name: 'SettingsView',
 	components: {
 		SettingsSidebar,
 	},
+	beforeRouteEnter(to, from, next) {
+		next(vm => {
+			(vm as unknown as InstanceType<typeof SettingsView>).previousRoute = from;
+		});
+	},
+	data() {
+		return {
+			previousRoute: null as Route | null,
+		};
+	},
+	methods: {
+		onReturn() {
+			this.$router.push(this.previousRoute ? this.previousRoute.path : { name: VIEWS.HOMEPAGE });
+		},
+	},
 });
+
+export default SettingsView;
 </script>
 
 <style lang="scss" module>