refactor(editor): Migrate SettingsView to composition api (no-changelog) (#9746)

packages/editor-ui/src/utils/typeGuards.ts

@@ -8,6 +8,7 @@ import { nodeConnectionTypes } from 'n8n-workflow';
 import type { IExecutionResponse, ICredentialsResponse, NewCredentialsModal } from '@/Interface';
 import type { jsPlumbDOMElement } from '@jsplumb/browser-ui';
 import type { Connection } from '@jsplumb/core';
+import type { RouteLocationRaw } from 'vue-router';
 
 /*
 	Type guards used in editor-ui project
@@ -79,3 +80,10 @@ export function isFullExecutionResponse(
 ): execution is IExecutionResponse {
 	return !!execution && 'status' in execution;
 }
+
+export function isRouteLocationRaw(value: unknown): value is RouteLocationRaw {
+	return (
+		typeof value === 'string' ||
+		(typeof value === 'object' && value !== null && ('name' in value || 'path' in value))
+	);
+}

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

@@ -1,3 +1,26 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import type { HistoryState } from 'vue-router';
+import { useRouter } from 'vue-router';
+import { VIEWS } from '@/constants';
+import SettingsSidebar from '@/components/SettingsSidebar.vue';
+import { isRouteLocationRaw } from '@/utils/typeGuards';
+
+const router = useRouter();
+
+const previousRoute = ref<HistoryState[string] | undefined>();
+
+function onReturn() {
+	void router.push(
+		isRouteLocationRaw(previousRoute.value) ? previousRoute.value : { name: VIEWS.HOMEPAGE },
+	);
+}
+
+onMounted(() => {
+	previousRoute.value = router.options.history.state.back;
+});
+</script>
+
 <template>
 	<div :class="$style.container">
 		<SettingsSidebar @return="onReturn" />
@@ -13,40 +36,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { RouteLocationPathRaw } from 'vue-router';
-
-import { VIEWS } from '@/constants';
-import SettingsSidebar from '@/components/SettingsSidebar.vue';
-
-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 RouteLocationPathRaw | null,
-		};
-	},
-	methods: {
-		onReturn() {
-			void this.$router.push(
-				this.previousRoute ? this.previousRoute.path : { name: VIEWS.HOMEPAGE },
-			);
-		},
-	},
-});
-
-export default SettingsView;
-</script>
-
 <style lang="scss" module>
 .container {
 	height: 100%;