From b53c0baab34cc9fb44604b080c43a7772dd9feda Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Tue, 8 Nov 2022 09:29:08 +0100
Subject: [PATCH 1/3] WIP

---
 packages/editor-ui/src/App.vue                |   1 -
 .../src/components/SettingsSidebar.vue        |   6 +-
 packages/editor-ui/src/router.ts              | 221 +++++++++---------
 packages/editor-ui/src/stores/canvas.ts       |   1 +
 packages/editor-ui/src/views/NodeView.vue     |  26 ++-
 .../editor-ui/src/views/SettingsApiView.vue   | 122 +++++-----
 .../src/views/SettingsCommunityNodesView.vue  | 119 +++++-----
 .../src/views/SettingsFakeDoorView.vue        |   8 +-
 .../src/views/SettingsPersonalView.vue        |  78 +++----
 .../editor-ui/src/views/SettingsUsersView.vue |  74 +++---
 packages/editor-ui/src/views/SettingsView.vue |  32 ++-
 11 files changed, 359 insertions(+), 329 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 80d6b1b6a9ad8..d11702535d086 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 d8354c9bca5ea..b4f4a0eb1485c 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>
@@ -124,7 +124,9 @@ export default mixins(
 			this.uiStore.openModal(ABOUT_MODAL_KEY);
 		},
 		onReturn() {
-			this.$router.push({name: VIEWS.HOMEPAGE});
+			// const history = this.$router.options.routes;
+			console.log("🚀 ~ file: SettingsSidebar.vue ~ line 128 ~ onReturn ~ history", this.previousRoute);
+			// this.$router.back();
 		},
 		openUpdatesPanel() {
 			this.uiStore.openModal(VERSIONS_MODAL_KEY);
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index dd445ec99f26f..854beec3f7d7e 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],
+			component: SettingsView,
+			children: [
+				{
+					path: 'personal',
+					name: VIEWS.PERSONAL_SETTINGS,
+					components: {
+						settingsView: SettingsPersonalView,
 					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore = useSettingsStore();
-							return settingsStore.isUserManagementEnabled === false;
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: 'personal',
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								loginStatus: [LOGIN_STATUS.LoggedIn],
+							},
+							deny: {
+								role: [ROLE.Default],
+							},
 						},
 					},
 				},
-			},
-		},
-		{
-			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: 'users',
+					name: VIEWS.USERS_SETTINGS,
+					components: {
+						settingsView: SettingsUsersView,
 					},
-				},
-			},
-		},
-		{
-			path: '/settings/api',
-			name: VIEWS.API_SETTINGS,
-			components: {
-				default: SettingsApiView,
-			},
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: 'api',
-						};
+					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;
+								},
+							},
+						},
 					},
 				},
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
+				{
+					path: 'api',
+					name: VIEWS.API_SETTINGS,
+					components: {
+						settingsView: SettingsApiView,
 					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore =  useSettingsStore();
-							return settingsStore.isPublicApiEnabled === false;
+					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],
+				{
+					path: 'community-nodes',
+					name: VIEWS.COMMUNITY_NODES,
+					components: {
+						settingsView: SettingsCommunityNodesView,
 					},
-					deny: {
-						shouldDeny: () => {
-							const settingsStore = useSettingsStore();
-							return settingsStore.isCommunityNodesFeatureEnabled === false;
+					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,
-			props: true,
-			meta: {
-				telemetry: {
-					pageCategory: 'settings',
-					getProperties(route: Route) {
-						return {
-							feature: route.params['featureId'],
-						};
+				{
+					path: 'coming-soon/:featureId',
+					name: VIEWS.FAKE_DOOR,
+					component: {
+						settingsView: SettingsFakeDoorView,
 					},
-				},
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
+					props: true,
+					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/stores/canvas.ts b/packages/editor-ui/src/stores/canvas.ts
index 0153719755c5c..e5da38fc03ea5 100644
--- a/packages/editor-ui/src/stores/canvas.ts
+++ b/packages/editor-ui/src/stores/canvas.ts
@@ -17,6 +17,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const nodeTypesStore = useNodeTypesStore();
 	const uiStore = useUIStore();
 	const jsPlumbInstance = jsPlumb.getInstance();
+	console.log("🚀 ~ file: canvas.ts ~ line 20 ~ useCanvasStore ~ jsPlumbInstance", jsPlumbInstance);
 
 	const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
 	const triggerNodes = computed<INodeUi[]>(
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 1fea690c8adb9..e109b94d55828 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';
@@ -325,6 +325,7 @@ export default mixins(
 			},
 		},
 		async beforeRouteLeave(to, from, next) {
+			console.log('Before route leave', to.name, from.name);
 			const nextTab = getNodeViewTab(to);
 			// Only react if leaving workflow tab and going to a separate page
 			if (!nextTab) {
@@ -336,6 +337,7 @@ export default mixins(
 
 				const result = this.uiStore.stateIsDirty;
 				if (result) {
+					console.log("🚀 ~ file: NodeView.vue ~ line 340 ~ beforeRouteLeave ~ result", result);
 					const confirmModal = await this.confirmModal(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
@@ -344,14 +346,30 @@ export default mixins(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 						true,
 					);
+					console.log("🚀 ~ file: NodeView.vue ~ line 349 ~ beforeRouteLeave ~ confirmModal", confirmModal);
 
 					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();
+						// Replace the current route with the new workflow route
+						// before navigating to the new route. We can't use next() here since vue-router
+						// would prevent the navigation with an error
+						try {
+							console.log('Savved and replacing route');
+							next(false);
+							if(from.name === VIEWS.NEW_WORKFLOW) {
+								await this.$router.replace({ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } });
+							}
+							await this.$router.push(to as RawLocation);
+						} catch (er) {
+							console.log("🚀 ~ file: NodeView.vue ~ line 360 ~ beforeRouteLeave ~ er", er);
+
+						}
 					} else if (confirmModal === MODAL_CANCEL) {
+						await this.resetWorkspace();
 						this.uiStore.stateIsDirty = false;
+
 						next();
 					} else if (confirmModal === MODAL_CLOSE) {
 						next(false);
@@ -2129,6 +2147,7 @@ export default mixins(
 				this.stopLoading();
 			}),
 			async initView(): Promise<void> {
+				console.log('initView');
 				if (this.$route.params.action === 'workflowSave') {
 					// In case the workflow got saved we do not have to run init
 					// as only the route changed but all the needed data is already loaded
@@ -3307,6 +3326,7 @@ export default mixins(
 			dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
 		},
 		destroyed() {
+			console.log('Destroyed');
 			this.resetWorkspace();
 			this.uiStore.stateIsDirty = false;
 			window.removeEventListener('message', this.onPostMessageReceived);
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index 7d3df4fac5543..b1e7ee3d16e33 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 :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') }}
+		<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>
-			<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>
-	</SettingsView>
+		<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 50f6f859be86f..08bcf66197a1a 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 5ab16b3b24b25..0351cb1b49c78 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>
+	<FeatureComingSoon :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 df0f6b3430858..7aa39c0126b53 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 :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 :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.basicInformation') }}</n8n-heading>
 			</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>
+				<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-button float="right" :label="$locale.baseText('settings.personal.save')" size="large" :disabled="!hasAnyChanges || !readyToSubmit" @click="onSaveClick" />
+				<n8n-input-label :label="$locale.baseText('auth.password')">
+					<n8n-link @click="openPasswordModal">{{ $locale.baseText('auth.changePassword') }}</n8n-link>
+				</n8n-input-label>
 			</div>
 		</div>
-	</SettingsView>
+		<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,16 @@ 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,
-	},
+	// beforeRouteEnter(to, from, next) {
+	// 	console.log("🚀 ~ file: SettingsSidebar.vue ~ line 44 ~ beforeRouteEnter ~ from", from);
+	// 	// next(vm => {
+	// 	// 	vm.previousRoute = from;
+	// 	// });
+	// },
 	data() {
 		return {
 			hasAnyChanges: false,
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 64b32619ef132..ff0beaa90783d 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 2ca505e47e7f2..564895d7ee3dd 100644
--- a/packages/editor-ui/src/views/SettingsView.vue
+++ b/packages/editor-ui/src/views/SettingsView.vue
@@ -1,26 +1,46 @@
 <template>
 	<div :class="$style.container">
-		<SettingsSidebar />
+		<SettingsSidebar @return="onReturn" />
 		<div :class="$style.contentContainer">
 			<div :class="$style.content">
-				<slot>
-				</slot>
+				<keep-alive include="NodeView" :max="1">
+					<router-view name="settingsView" />
+				</keep-alive>
 			</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>

From f42c913fbf3336d14efceef710e3828c2f7044cd Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Tue, 8 Nov 2022 13:55:40 +0100
Subject: [PATCH 2/3] :bug: Fix back button navigation from recetly saved
 workflow

---
 .../src/components/SettingsSidebar.vue        |  6 ----
 .../src/components/mixins/workflowHelpers.ts  |  2 +-
 packages/editor-ui/src/stores/canvas.ts       |  1 -
 packages/editor-ui/src/views/NodeView.vue     | 28 ++++++++-----------
 .../src/views/SettingsPersonalView.vue        |  6 ----
 packages/editor-ui/src/views/SettingsView.vue |  2 --
 6 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index b4f4a0eb1485c..c6a0fb2e7da16 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -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,11 +122,6 @@ export default mixins(
 		onVersionClick() {
 			this.uiStore.openModal(ABOUT_MODAL_KEY);
 		},
-		onReturn() {
-			// const history = this.$router.options.routes;
-			console.log("🚀 ~ file: SettingsSidebar.vue ~ line 128 ~ onReturn ~ history", this.previousRoute);
-			// this.$router.back();
-		},
 		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 e8136f6d27a08..75318a921629e 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/stores/canvas.ts b/packages/editor-ui/src/stores/canvas.ts
index e5da38fc03ea5..0153719755c5c 100644
--- a/packages/editor-ui/src/stores/canvas.ts
+++ b/packages/editor-ui/src/stores/canvas.ts
@@ -17,7 +17,6 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const nodeTypesStore = useNodeTypesStore();
 	const uiStore = useUIStore();
 	const jsPlumbInstance = jsPlumb.getInstance();
-	console.log("🚀 ~ file: canvas.ts ~ line 20 ~ useCanvasStore ~ jsPlumbInstance", jsPlumbInstance);
 
 	const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
 	const triggerNodes = computed<INodeUi[]>(
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index e109b94d55828..b2aec449fde26 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -325,7 +325,6 @@ export default mixins(
 			},
 		},
 		async beforeRouteLeave(to, from, next) {
-			console.log('Before route leave', to.name, from.name);
 			const nextTab = getNodeViewTab(to);
 			// Only react if leaving workflow tab and going to a separate page
 			if (!nextTab) {
@@ -337,7 +336,6 @@ export default mixins(
 
 				const result = this.uiStore.stateIsDirty;
 				if (result) {
-					console.log("🚀 ~ file: NodeView.vue ~ line 340 ~ beforeRouteLeave ~ result", result);
 					const confirmModal = await this.confirmModal(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
@@ -346,25 +344,23 @@ export default mixins(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 						true,
 					);
-					console.log("🚀 ~ file: NodeView.vue ~ line 349 ~ beforeRouteLeave ~ confirmModal", confirmModal);
 
 					if (confirmModal === MODAL_CONFIRMED) {
 						const saved = await this.saveCurrentWorkflow({}, false);
 						if (saved) await this.settingsStore.fetchPromptsData();
 						this.uiStore.stateIsDirty = false;
-						// Replace the current route with the new workflow route
-						// before navigating to the new route. We can't use next() here since vue-router
-						// would prevent the navigation with an error
-						try {
-							console.log('Savved and replacing route');
-							next(false);
-							if(from.name === VIEWS.NEW_WORKFLOW) {
-								await this.$router.replace({ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } });
-							}
-							await this.$router.push(to as RawLocation);
-						} catch (er) {
-							console.log("🚀 ~ file: NodeView.vue ~ line 360 ~ beforeRouteLeave ~ er", er);
 
+						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();
@@ -2147,7 +2143,6 @@ export default mixins(
 				this.stopLoading();
 			}),
 			async initView(): Promise<void> {
-				console.log('initView');
 				if (this.$route.params.action === 'workflowSave') {
 					// In case the workflow got saved we do not have to run init
 					// as only the route changed but all the needed data is already loaded
@@ -3326,7 +3321,6 @@ export default mixins(
 			dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
 		},
 		destroyed() {
-			console.log('Destroyed');
 			this.resetWorkspace();
 			this.uiStore.stateIsDirty = false;
 			window.removeEventListener('message', this.onPostMessageReceived);
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 7aa39c0126b53..0cfde08e9c358 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -55,12 +55,6 @@ export default mixins(
 	showMessage,
 ).extend({
 	name: 'SettingsPersonalView',
-	// beforeRouteEnter(to, from, next) {
-	// 	console.log("🚀 ~ file: SettingsSidebar.vue ~ line 44 ~ beforeRouteEnter ~ from", from);
-	// 	// next(vm => {
-	// 	// 	vm.previousRoute = from;
-	// 	// });
-	// },
 	data() {
 		return {
 			hasAnyChanges: false,
diff --git a/packages/editor-ui/src/views/SettingsView.vue b/packages/editor-ui/src/views/SettingsView.vue
index 564895d7ee3dd..6edd5870156de 100644
--- a/packages/editor-ui/src/views/SettingsView.vue
+++ b/packages/editor-ui/src/views/SettingsView.vue
@@ -3,9 +3,7 @@
 		<SettingsSidebar @return="onReturn" />
 		<div :class="$style.contentContainer">
 			<div :class="$style.content">
-				<keep-alive include="NodeView" :max="1">
 					<router-view name="settingsView" />
-				</keep-alive>
 			</div>
 		</div>
 	</div>

From ad933939f78de6f66c366a57fd1c7b26d20e2843 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Tue, 8 Nov 2022 14:35:20 +0100
Subject: [PATCH 3/3] :bug: Fix coming-soon routes

---
 packages/editor-ui/src/router.ts                      | 4 ++--
 packages/editor-ui/src/views/SettingsFakeDoorView.vue | 2 +-
 packages/editor-ui/src/views/SettingsView.vue         | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 854beec3f7d7e..61ec90b128399 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -426,6 +426,7 @@ const router = new Router({
 		{
 			path: '/settings',
 			component: SettingsView,
+			props: true,
 			children: [
 				{
 					path: 'personal',
@@ -534,10 +535,9 @@ const router = new Router({
 				{
 					path: 'coming-soon/:featureId',
 					name: VIEWS.FAKE_DOOR,
-					component: {
+					components: {
 						settingsView: SettingsFakeDoorView,
 					},
-					props: true,
 					meta: {
 						telemetry: {
 							pageCategory: 'settings',
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 0351cb1b49c78..f3ecb677673d0 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -1,5 +1,5 @@
 <template>
-	<FeatureComingSoon :featureId="featureId" showTitle />
+	<feature-coming-soon :featureId="featureId" showTitle />
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/views/SettingsView.vue b/packages/editor-ui/src/views/SettingsView.vue
index 6edd5870156de..43002ecc214f3 100644
--- a/packages/editor-ui/src/views/SettingsView.vue
+++ b/packages/editor-ui/src/views/SettingsView.vue
@@ -3,7 +3,11 @@
 		<SettingsSidebar @return="onReturn" />
 		<div :class="$style.contentContainer">
 			<div :class="$style.content">
-					<router-view name="settingsView" />
+				<!--
+					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>