From 825637f02a5d1bc9f00cb68f19221dd7d0e055cb Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Wed, 9 Nov 2022 09:31:23 +0100
Subject: [PATCH] fix(editor): Fix workflow back button navigation  (#4546)

* :bug: Fix back button navigation from recetly saved workflow

* :bug: Fix coming-soon routes
---
 packages/editor-ui/src/App.vue                |   1 -
 .../src/components/SettingsSidebar.vue        |   6 +-
 .../src/components/mixins/workflowHelpers.ts  |   2 +-
 packages/editor-ui/src/router.ts              | 247 +++++++++---------
 packages/editor-ui/src/views/NodeView.vue     |  20 +-
 .../editor-ui/src/views/SettingsApiView.vue   | 130 +++++----
 .../src/views/SettingsCommunityNodesView.vue  | 119 ++++-----
 .../src/views/SettingsFakeDoorView.vue        |   8 +-
 .../src/views/SettingsPersonalView.vue        |  82 +++---
 .../editor-ui/src/views/SettingsUsersView.vue |  74 +++---
 packages/editor-ui/src/views/SettingsView.vue |  34 ++-
 11 files changed, 368 insertions(+), 355 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 80d6b1b6a9a..d11702535d0 100644
--- a/packages/editor-ui/src/App.vue
+++ b/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';
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index d8354c9bca5..c6a0fb2e7da 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/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);
 		},
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 68c2c9b3d44..8ae4973da23 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/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' },
 						});
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index dd445ec99f2..61ec90b1283 100644
--- a/packages/editor-ui/src/router.ts
+++ b/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,132 +425,136 @@ const router = new Router({
 		},
 		{
 			path: '/settings',
-			redirect: '/settings/personal',
-		},
-		{
-			path: '/settings/users',
-			name: VIEWS.USERS_SETTINGS,
-			components: {
-				default: SettingsUsersView,
-			},
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: 'users',
-						};
-					},
-				},
-				permissions: {
-					allow: {
-						role: [ROLE.Default, ROLE.Owner],
-					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore = useSettingsStore();
-							return settingsStore.isUserManagementEnabled === false;
-						},
-					},
-				},
-			},
-		},
-		{
-			path: '/settings/personal',
-			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,
-			},
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: 'api',
-						};
-					},
-				},
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
-					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore =  useSettingsStore();
-							return settingsStore.isPublicApiEnabled === false;
-						},
-					},
-				},
-			},
-		},
-		{
-			path: '/settings/community-nodes',
-			name: VIEWS.COMMUNITY_NODES,
-			components: {
-				default: SettingsCommunityNodesView,
-			},
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-				},
-				permissions: {
-					allow: {
-						role: [ROLE.Default, ROLE.Owner],
-					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore = useSettingsStore();
-							return settingsStore.isCommunityNodesFeatureEnabled === false;
-						},
-					},
-				},
-			},
-		},
-		{
-			path: '/settings/coming-soon/:featureId',
-			name: VIEWS.FAKE_DOOR,
-			component: SettingsFakeDoorView,
+			component: SettingsView,
 			props: true,
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: route.params['featureId'],
-						};
+			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],
+							},
+						},
 					},
 				},
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
+				{
+					path: 'users',
+					name: VIEWS.USERS_SETTINGS,
+					components: {
+						settingsView: SettingsUsersView,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: 'users',
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								role: [ROLE.Default, ROLE.Owner],
+							},
+							deny: {
+								shouldDeny: () => {
+									const settingsStore = useSettingsStore();
+									return settingsStore.isUserManagementEnabled === false;
+								},
+							},
+						},
 					},
 				},
-			},
+				{
+					path: 'api',
+					name: VIEWS.API_SETTINGS,
+					components: {
+						settingsView: SettingsApiView,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: 'api',
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								loginStatus: [LOGIN_STATUS.LoggedIn],
+							},
+							deny: {
+								shouldDeny: () => {
+									const settingsStore =  useSettingsStore();
+									return settingsStore.isPublicApiEnabled === false;
+								},
+							},
+						},
+					},
+				},
+				{
+					path: 'community-nodes',
+					name: VIEWS.COMMUNITY_NODES,
+					components: {
+						settingsView: SettingsCommunityNodesView,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+						},
+						permissions: {
+							allow: {
+								role: [ROLE.Default, ROLE.Owner],
+							},
+							deny: {
+								shouldDeny: () => {
+									const settingsStore = useSettingsStore();
+									return settingsStore.isCommunityNodesFeatureEnabled === false;
+								},
+							},
+						},
+					},
+				},
+				{
+					path: 'coming-soon/:featureId',
+					name: VIEWS.FAKE_DOOR,
+					components: {
+						settingsView: SettingsFakeDoorView,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: route.params['featureId'],
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								loginStatus: [LOGIN_STATUS.LoggedIn],
+							},
+						},
+					},
+				},
+			],
 		},
 		{
 			path: '*',
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 27d49ba2eea..b546dbc2543 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/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;
-						next();
+
+						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);
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index 7d3df4fac55..b1e7ee3d16e 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -1,69 +1,67 @@
 <template>
-	<SettingsView>
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText('settings.api') }}
-					<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)', }">
-						({{ $locale.baseText('beta') }})
-					</span>
-				</n8n-heading>
-			</div>
-
-			<div v-if="apiKey">
-				<p class="mb-s">
-					<n8n-info-tip :bold="false">
-						<i18n path="settings.api.view.info" tag="span">
-							<template #apiAction>
-								<a
-									href="https://docs.n8n.io/api"
-									target="_blank"
-									v-text="$locale.baseText('settings.api.view.info.api')"
-								/>
-							</template>
-							<template #webhookAction>
-								<a
-									href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
-									target="_blank"
-									v-text="$locale.baseText('settings.api.view.info.webhook')"
-								/>
-							</template>
-						</i18n>
-					</n8n-info-tip>
-				</p>
-				<n8n-card class="mb-4xs" :class="$style.card">
-					<span :class="$style.delete">
-						<n8n-link @click="showDeleteModal" :bold="true">
-							{{ $locale.baseText('generic.delete') }}
-						</n8n-link>
-					</span>
-					<div class="ph-no-capture">
-						<CopyInput
-							:label="$locale.baseText('settings.api.view.myKey')"
-							:value="apiKey"
-							:copy-button-text="$locale.baseText('generic.clickToCopy')"
-							:toast-title="$locale.baseText('settings.api.view.copy.toast')"
-							@copy="onCopy"
-						/>
-					</div>
-				</n8n-card>
-				<div :class="$style.hint">
-					<n8n-text size="small">
-						{{ $locale.baseText('settings.api.view.tryapi') }}
-					</n8n-text>
-					<n8n-link :to="apiPlaygroundPath" :newWindow="true" size="small">
-						{{ $locale.baseText('settings.api.view.apiPlayground') }}
-					</n8n-link>
-				</div>
-			</div>
-			<n8n-action-box
-				v-else-if="mounted"
-				:buttonText="$locale.baseText(loading ? 'settings.api.create.button.loading' : 'settings.api.create.button')"
-				:description="$locale.baseText('settings.api.create.description')"
-				@click="createApiKey"
-			/>
+	<div :class="$style.container">
+		<div :class="$style.header">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText('settings.api') }}
+				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)', }">
+					({{ $locale.baseText('beta') }})
+				</span>
+			</n8n-heading>
 		</div>
-	</SettingsView>
+
+		<div v-if="apiKey">
+			<p class="mb-s">
+				<n8n-info-tip :bold="false">
+					<i18n path="settings.api.view.info" tag="span">
+						<template #apiAction>
+							<a
+								href="https://docs.n8n.io/api"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.api')"
+							/>
+						</template>
+						<template #webhookAction>
+							<a
+								href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.webhook')"
+							/>
+						</template>
+					</i18n>
+				</n8n-info-tip>
+			</p>
+			<n8n-card class="mb-4xs" :class="$style.card">
+				<span :class="$style.delete">
+					<n8n-link @click="showDeleteModal" :bold="true">
+						{{ $locale.baseText('generic.delete') }}
+					</n8n-link>
+				</span>
+				<div class="ph-no-capture">
+					<CopyInput
+						:label="$locale.baseText('settings.api.view.myKey')"
+						:value="apiKey"
+						:copy-button-text="$locale.baseText('generic.clickToCopy')"
+						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
+						@copy="onCopy"
+					/>
+				</div>
+			</n8n-card>
+			<div :class="$style.hint">
+				<n8n-text size="small">
+					{{ $locale.baseText('settings.api.view.tryapi') }}
+				</n8n-text>
+				<n8n-link :to="apiPlaygroundPath" :newWindow="true" size="small">
+					{{ $locale.baseText('settings.api.view.apiPlayground') }}
+				</n8n-link>
+			</div>
+		</div>
+		<n8n-action-box
+			v-else-if="mounted"
+			:buttonText="$locale.baseText(loading ? 'settings.api.create.button.loading' : 'settings.api.create.button')"
+			:description="$locale.baseText('settings.api.create.description')"
+			@click="createApiKey"
+		/>
+	</div>
 </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() {
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 50f6f859be8..08bcf66197a 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -1,62 +1,60 @@
 <template>
-	<SettingsView>
-		<div :class="$style.container">
-			<div :class="$style.headingContainer">
-				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
-				<n8n-button
-					v-if="!settingsStore.isQueueModeEnabled && communityNodesStore.getInstalledPackages.length > 0 && !loading"
-					:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
-					size="large"
-					@click="openInstallModal"
-				/>
-			</div>
-			<div v-if="settingsStore.isQueueModeEnabled" :class="$style.actionBoxContainer">
-				<n8n-action-box
-					:heading="$locale.baseText('settings.communityNodes.empty.title')"
-					:description="getEmptyStateDescription"
-					:calloutText="actionBoxConfig.calloutText"
-					:calloutTheme="actionBoxConfig.calloutTheme"
-				/>
-			</div>
-			<div
-				:class="$style.cardsContainer"
-				v-else-if="loading"
-			>
-				<community-package-card
-					v-for="n in 2"
-					:key="'index-' + n"
-					:loading="true"
-				></community-package-card>
-			</div>
-			<div
-				v-else-if="communityNodesStore.getInstalledPackages.length === 0"
-				:class="$style.actionBoxContainer"
-			>
-				<n8n-action-box
-					:heading="$locale.baseText('settings.communityNodes.empty.title')"
-					:description="getEmptyStateDescription"
-					:buttonText="
-						shouldShowInstallButton
-							? $locale.baseText('settings.communityNodes.empty.installPackageLabel')
-							: ''
-					"
-					:calloutText="actionBoxConfig.calloutText"
-					:calloutTheme="actionBoxConfig.calloutTheme"
-					@click="openInstallModal"
-				/>
-			</div>
-			<div
-				:class="$style.cardsContainer"
-				v-else
-			>
-				<community-package-card
-					v-for="communityPackage in communityNodesStore.getInstalledPackages"
-					:key="communityPackage.packageName"
-					:communityPackage="communityPackage"
-				></community-package-card>
-			</div>
+	<div :class="$style.container">
+		<div :class="$style.headingContainer">
+			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
+			<n8n-button
+				v-if="!settingsStore.isQueueModeEnabled && communityNodesStore.getInstalledPackages.length > 0 && !loading"
+				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
+				size="large"
+				@click="openInstallModal"
+			/>
 		</div>
-	</SettingsView>
+		<div v-if="settingsStore.isQueueModeEnabled" :class="$style.actionBoxContainer">
+			<n8n-action-box
+				:heading="$locale.baseText('settings.communityNodes.empty.title')"
+				:description="getEmptyStateDescription"
+				:calloutText="actionBoxConfig.calloutText"
+				:calloutTheme="actionBoxConfig.calloutTheme"
+			/>
+		</div>
+		<div
+			:class="$style.cardsContainer"
+			v-else-if="loading"
+		>
+			<community-package-card
+				v-for="n in 2"
+				:key="'index-' + n"
+				:loading="true"
+			></community-package-card>
+		</div>
+		<div
+			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
+			:class="$style.actionBoxContainer"
+		>
+			<n8n-action-box
+				:heading="$locale.baseText('settings.communityNodes.empty.title')"
+				:description="getEmptyStateDescription"
+				:buttonText="
+					shouldShowInstallButton
+						? $locale.baseText('settings.communityNodes.empty.installPackageLabel')
+						: ''
+				"
+				:calloutText="actionBoxConfig.calloutText"
+				:calloutTheme="actionBoxConfig.calloutTheme"
+				@click="openInstallModal"
+			/>
+		</div>
+		<div
+			:class="$style.cardsContainer"
+			v-else
+		>
+			<community-package-card
+				v-for="communityPackage in communityNodesStore.getInstalledPackages"
+				:key="communityPackage.packageName"
+				:communityPackage="communityPackage"
+			></community-package-card>
+		</div>
+	</div>
 </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';
-import { mapGetters } from 'vuex';
-import SettingsView from './SettingsView.vue';
-import CommunityPackageCard from '../components/CommunityPackageCard.vue';
+} from '@/constants';
+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 () {
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 5ab16b3b24b..f3ecb677673 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -1,21 +1,17 @@
 <template>
-	<SettingsView>
-		<FeatureComingSoon :featureId="featureId" showTitle />
-	</SettingsView>
+	<feature-coming-soon :featureId="featureId" showTitle />
 </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: {
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index df0f6b34308..0cfde08e9c3 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -1,45 +1,44 @@
 <template>
-	<SettingsView>
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
-				<div class="ph-no-capture" :class="$style.user">
-					<span :class="$style.username">
-						<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
-					</span>
-					<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="large" />
-				</div>
-			</div>
-			<div>
-				<div :class="$style.sectionHeader">
-					<n8n-heading size="large">{{ $locale.baseText('settings.personal.basicInformation') }}</n8n-heading>
-				</div>
-				<div>
-					<n8n-form-inputs
-						v-if="formInputs"
-						:inputs="formInputs"
-						:eventBus="formBus"
-						@input="onInput"
-						@ready="onReadyToSubmit"
-						@submit="onSubmit"
-					/>
-				</div>
-			</div>
-			<div>
-				<div :class="$style.sectionHeader">
-					<n8n-heading size="large">{{ $locale.baseText('settings.personal.security') }}</n8n-heading>
-				</div>
-				<div>
-					<n8n-input-label :label="$locale.baseText('auth.password')">
-						<n8n-link @click="openPasswordModal">{{ $locale.baseText('auth.changePassword') }}</n8n-link>
-					</n8n-input-label>
-				</div>
-			</div>
-			<div>
-				<n8n-button float="right" :label="$locale.baseText('settings.personal.save')" size="large" :disabled="!hasAnyChanges || !readyToSubmit" @click="onSaveClick" />
+	<div :class="$style.container">
+		<div :class="$style.header">
+			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
+			<div class="ph-no-capture" :class="$style.user">
+				<span :class="$style.username">
+					<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
+				</span>
+				<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="large" />
 			</div>
 		</div>
-	</SettingsView>
+		<div>
+			<div :class="$style.sectionHeader">
+				<n8n-heading size="large">{{ $locale.baseText('settings.personal.basicInformation') }}</n8n-heading>
+			</div>
+			<div>
+				<n8n-form-inputs
+					v-if="formInputs"
+					:inputs="formInputs"
+					:eventBus="formBus"
+					@input="onInput"
+					@ready="onReadyToSubmit"
+					@submit="onSubmit"
+				/>
+			</div>
+		</div>
+		<div>
+			<div :class="$style.sectionHeader">
+				<n8n-heading size="large">{{ $locale.baseText('settings.personal.security') }}</n8n-heading>
+			</div>
+			<div>
+				<n8n-input-label :label="$locale.baseText('auth.password')">
+					<n8n-link @click="openPasswordModal">{{ $locale.baseText('auth.changePassword') }}</n8n-link>
+				</n8n-input-label>
+			</div>
+		</div>
+		<div>
+			<n8n-button float="right" :label="$locale.baseText('settings.personal.save')" size="large" :disabled="!hasAnyChanges || !readyToSubmit" @click="onSaveClick" />
+		</div>
+	</div>
+
 </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,
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 64b32619ef1..ff0beaa9078 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -1,49 +1,46 @@
 <template>
-	<SettingsView>
-		<div :class="$style.container">
-			<div>
-				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
-				<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
-						<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
-							<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
-								<template #action>
-									<a
-										href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
-										target="_blank"
-										v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
-									/>
-								</template>
-							</i18n>
-							<div>
-								<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
-							</div>
-						</n8n-tooltip>
-				</div>
-			</div>
-			<div v-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
-				<n8n-action-box
-					:heading="$locale.baseText('settings.users.setupToInviteUsers')"
-					:buttonText="$locale.baseText('settings.users.setupMyAccount')"
-					:description="$locale.baseText('settings.users.setupToInviteUsersInfo')"
-					@click="redirectToSetup"
-				/>
-			</div>
-			<div :class="$style.usersContainer" v-else>
-				<PageAlert
-					v-if="!settingsStore.isSmtpSetup"
-					:message="$locale.baseText('settings.users.smtpToAddUsersWarning')"
-					:popupClass="$style.alert"
-				/>
-				<n8n-users-list :users="usersStore.allUsers" :currentUserId="usersStore.currentUserId" @delete="onDelete" @reinvite="onReinvite" />
+	<div :class="$style.container">
+		<div>
+			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
+			<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
+					<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
+						<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
+							<template #action>
+								<a
+									href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
+									target="_blank"
+									v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
+								/>
+							</template>
+						</i18n>
+						<div>
+							<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
+						</div>
+					</n8n-tooltip>
 			</div>
 		</div>
-	</SettingsView>
+		<div v-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
+			<n8n-action-box
+				:heading="$locale.baseText('settings.users.setupToInviteUsers')"
+				:buttonText="$locale.baseText('settings.users.setupMyAccount')"
+				:description="$locale.baseText('settings.users.setupToInviteUsersInfo')"
+				@click="redirectToSetup"
+			/>
+		</div>
+		<div :class="$style.usersContainer" v-else>
+			<PageAlert
+				v-if="!settingsStore.isSmtpSetup"
+				:message="$locale.baseText('settings.users.smtpToAddUsersWarning')"
+				:popupClass="$style.alert"
+			/>
+			<n8n-users-list :users="usersStore.allUsers" :currentUserId="usersStore.currentUserId" @delete="onDelete" @reinvite="onReinvite" />
+		</div>
+	</div>
 </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() {
diff --git a/packages/editor-ui/src/views/SettingsView.vue b/packages/editor-ui/src/views/SettingsView.vue
index 2ca505e47e7..43002ecc214 100644
--- a/packages/editor-ui/src/views/SettingsView.vue
+++ b/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>