From 8ac661ee98d754cca5fee98dad428d72b98cbb93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Mon, 23 Sep 2024 15:17:29 +0200
Subject: [PATCH] refactor(editor): SettingsSidebar.vue to script setup
 (no-changelog) (#10709)

---
 .../src/components/SettingsSidebar.vue        | 321 ++++++++----------
 1 file changed, 142 insertions(+), 179 deletions(-)

diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 7fa3b88341..5409620e45 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -1,7 +1,6 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
 import { useUserHelpers } from '@/composables/useUserHelpers';
 import type { IFakeDoor } from '@/Interface';
 import type { IMenuItem } from 'n8n-design-system';
@@ -11,186 +10,150 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/root.store';
 import { hasPermission } from '@/utils/rbac/permissions';
 import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'SettingsSidebar',
-	setup() {
-		const router = useRouter();
-		const route = useRoute();
-		return {
-			...useUserHelpers(router, route),
-		};
-	},
-	computed: {
-		...mapStores(useRootStore, useSettingsStore, useUIStore),
-		settingsFakeDoorFeatures(): IFakeDoor[] {
-			return Object.keys(this.uiStore.fakeDoorsByLocation)
-				.filter((location: string) => location.includes('settings'))
-				.map((location) => this.uiStore.fakeDoorsByLocation[location]);
+const emit = defineEmits<{
+	return: [];
+}>();
+
+const router = useRouter();
+const route = useRoute();
+const i18n = useI18n();
+
+const { canUserAccessRouteByName } = useUserHelpers(router, route);
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+
+const settingsFakeDoorFeatures = computed<IFakeDoor[]>(() =>
+	Object.keys(uiStore.fakeDoorsByLocation)
+		.filter((location: string) => location.includes('settings'))
+		.map((location) => uiStore.fakeDoorsByLocation[location]),
+);
+
+const handleSelect = (key: string) => {
+	switch (key) {
+		case 'users': // Fakedoor feature added via hooks when user management is disabled on cloud
+		case 'logging':
+			router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } }).catch(() => {});
+			break;
+		default:
+			break;
+	}
+};
+
+const sidebarMenuItems = computed<IMenuItem[]>(() => {
+	const menuItems: IMenuItem[] = [
+		{
+			id: 'settings-usage-and-plan',
+			icon: 'chart-bar',
+			label: i18n.baseText('settings.usageAndPlan.title'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.USAGE),
+			route: { to: { name: VIEWS.USAGE } },
+		},
+		{
+			id: 'settings-personal',
+			icon: 'user-circle',
+			label: i18n.baseText('settings.personal'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.PERSONAL_SETTINGS),
+			route: { to: { name: VIEWS.PERSONAL_SETTINGS } },
+		},
+		{
+			id: 'settings-users',
+			icon: 'user-friends',
+			label: i18n.baseText('settings.users'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.USERS_SETTINGS),
+			route: { to: { name: VIEWS.USERS_SETTINGS } },
+		},
+		{
+			id: 'settings-api',
+			icon: 'plug',
+			label: i18n.baseText('settings.n8napi'),
+			position: 'top',
+			available: settingsStore.isPublicApiEnabled && canUserAccessRouteByName(VIEWS.API_SETTINGS),
+			route: { to: { name: VIEWS.API_SETTINGS } },
+		},
+		{
+			id: 'settings-external-secrets',
+			icon: 'vault',
+			label: i18n.baseText('settings.externalSecrets.title'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.EXTERNAL_SECRETS_SETTINGS),
+			route: { to: { name: VIEWS.EXTERNAL_SECRETS_SETTINGS } },
 		},
-		sidebarMenuItems(): IMenuItem[] {
-			const menuItems: IMenuItem[] = [
-				{
-					id: 'settings-usage-and-plan',
-					icon: 'chart-bar',
-					label: this.$locale.baseText('settings.usageAndPlan.title'),
-					position: 'top',
-					available: this.canAccessUsageAndPlan(),
-					route: { to: { name: VIEWS.USAGE } },
-				},
-				{
-					id: 'settings-personal',
-					icon: 'user-circle',
-					label: this.$locale.baseText('settings.personal'),
-					position: 'top',
-					available: this.canAccessPersonalSettings(),
-					route: { to: { name: VIEWS.PERSONAL_SETTINGS } },
-				},
-				{
-					id: 'settings-users',
-					icon: 'user-friends',
-					label: this.$locale.baseText('settings.users'),
-					position: 'top',
-					available: this.canAccessUsersSettings(),
-					route: { to: { name: VIEWS.USERS_SETTINGS } },
-				},
-				{
-					id: 'settings-api',
-					icon: 'plug',
-					label: this.$locale.baseText('settings.n8napi'),
-					position: 'top',
-					available: this.canAccessApiSettings(),
-					route: { to: { name: VIEWS.API_SETTINGS } },
-				},
-				{
-					id: 'settings-external-secrets',
-					icon: 'vault',
-					label: this.$locale.baseText('settings.externalSecrets.title'),
-					position: 'top',
-					available: this.canAccessExternalSecrets(),
-					route: { to: { name: VIEWS.EXTERNAL_SECRETS_SETTINGS } },
-				},
 
-				{
-					id: 'settings-source-control',
-					icon: 'code-branch',
-					label: this.$locale.baseText('settings.sourceControl.title'),
-					position: 'top',
-					available: this.canAccessSourceControl(),
-					route: { to: { name: VIEWS.SOURCE_CONTROL } },
-				},
-				{
-					id: 'settings-sso',
-					icon: 'user-lock',
-					label: this.$locale.baseText('settings.sso'),
-					position: 'top',
-					available: this.canAccessSso(),
-					route: { to: { name: VIEWS.SSO_SETTINGS } },
-				},
-				{
-					id: 'settings-ldap',
-					icon: 'network-wired',
-					label: this.$locale.baseText('settings.ldap'),
-					position: 'top',
-					available: this.canAccessLdapSettings(),
-					route: { to: { name: VIEWS.LDAP_SETTINGS } },
-				},
-				{
-					id: 'settings-workersview',
-					icon: 'project-diagram',
-					label: this.$locale.baseText('mainSidebar.workersView'),
-					position: 'top',
-					available:
-						this.settingsStore.isQueueModeEnabled &&
-						hasPermission(['rbac'], { rbac: { scope: 'workersView:manage' } }),
-					route: { to: { name: VIEWS.WORKER_VIEW } },
-				},
-			];
-
-			for (const item of this.settingsFakeDoorFeatures) {
-				if (item.uiLocations.includes('settings')) {
-					menuItems.push({
-						id: item.id,
-						icon: item.icon ?? 'question',
-						label: this.$locale.baseText(item.featureName as BaseTextKey),
-						position: 'top',
-						available: true,
-						activateOnRoutePaths: [`/settings/coming-soon/${item.id}`],
-					});
-				}
-			}
+		{
+			id: 'settings-source-control',
+			icon: 'code-branch',
+			label: i18n.baseText('settings.sourceControl.title'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.SOURCE_CONTROL),
+			route: { to: { name: VIEWS.SOURCE_CONTROL } },
+		},
+		{
+			id: 'settings-sso',
+			icon: 'user-lock',
+			label: i18n.baseText('settings.sso'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.SSO_SETTINGS),
+			route: { to: { name: VIEWS.SSO_SETTINGS } },
+		},
+		{
+			id: 'settings-ldap',
+			icon: 'network-wired',
+			label: i18n.baseText('settings.ldap'),
+			position: 'top',
+			available: canUserAccessRouteByName(VIEWS.LDAP_SETTINGS),
+			route: { to: { name: VIEWS.LDAP_SETTINGS } },
+		},
+		{
+			id: 'settings-workersview',
+			icon: 'project-diagram',
+			label: i18n.baseText('mainSidebar.workersView'),
+			position: 'top',
+			available:
+				settingsStore.isQueueModeEnabled &&
+				hasPermission(['rbac'], { rbac: { scope: 'workersView:manage' } }),
+			route: { to: { name: VIEWS.WORKER_VIEW } },
+		},
+	];
 
+	for (const item of settingsFakeDoorFeatures.value) {
+		if (item.uiLocations.includes('settings')) {
 			menuItems.push({
-				id: 'settings-log-streaming',
-				icon: 'sign-in-alt',
-				label: this.$locale.baseText('settings.log-streaming'),
+				id: item.id,
+				icon: item.icon ?? 'question',
+				label: i18n.baseText(item.featureName as BaseTextKey),
 				position: 'top',
-				available: this.canAccessLogStreamingSettings(),
-				route: { to: { name: VIEWS.LOG_STREAMING_SETTINGS } },
+				available: true,
+				activateOnRoutePaths: [`/settings/coming-soon/${item.id}`],
 			});
+		}
+	}
 
-			menuItems.push({
-				id: 'settings-community-nodes',
-				icon: 'cube',
-				label: this.$locale.baseText('settings.communityNodes'),
-				position: 'top',
-				available: this.canAccessCommunityNodes(),
-				route: { to: { name: VIEWS.COMMUNITY_NODES } },
-			});
+	menuItems.push({
+		id: 'settings-log-streaming',
+		icon: 'sign-in-alt',
+		label: i18n.baseText('settings.log-streaming'),
+		position: 'top',
+		available: canUserAccessRouteByName(VIEWS.LOG_STREAMING_SETTINGS),
+		route: { to: { name: VIEWS.LOG_STREAMING_SETTINGS } },
+	});
 
-			return menuItems;
-		},
-	},
-	methods: {
-		canAccessPersonalSettings(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.PERSONAL_SETTINGS);
-		},
-		canAccessUsersSettings(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.USERS_SETTINGS);
-		},
-		canAccessCommunityNodes(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.COMMUNITY_NODES);
-		},
-		canAccessApiSettings(): boolean {
-			return (
-				this.settingsStore.isPublicApiEnabled && this.canUserAccessRouteByName(VIEWS.API_SETTINGS)
-			);
-		},
-		canAccessLdapSettings(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.LDAP_SETTINGS);
-		},
-		canAccessLogStreamingSettings(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.LOG_STREAMING_SETTINGS);
-		},
-		canAccessUsageAndPlan(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.USAGE);
-		},
-		canAccessExternalSecrets(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.EXTERNAL_SECRETS_SETTINGS);
-		},
-		canAccessSourceControl(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.SOURCE_CONTROL);
-		},
-		canAccessSso(): boolean {
-			return this.canUserAccessRouteByName(VIEWS.SSO_SETTINGS);
-		},
-		onVersionClick() {
-			this.uiStore.openModal(ABOUT_MODAL_KEY);
-		},
-		openUpdatesPanel() {
-			this.uiStore.openModal(VERSIONS_MODAL_KEY);
-		},
-		async handleSelect(key: string) {
-			switch (key) {
-				case 'users': // Fakedoor feature added via hooks when user management is disabled on cloud
-				case 'logging':
-					this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } }).catch(() => {});
-					break;
-				default:
-					break;
-			}
-		},
-	},
+	menuItems.push({
+		id: 'settings-community-nodes',
+		icon: 'cube',
+		label: i18n.baseText('settings.communityNodes'),
+		position: 'top',
+		available: canUserAccessRouteByName(VIEWS.COMMUNITY_NODES),
+		route: { to: { name: VIEWS.COMMUNITY_NODES } },
+	});
+
+	return menuItems;
 });
 </script>
 
@@ -198,17 +161,17 @@ export default defineComponent({
 	<div :class="$style.container">
 		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
 			<template #header>
-				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
+				<div :class="$style.returnButton" data-test-id="settings-back" @click="emit('return')">
 					<i class="mr-xs">
 						<font-awesome-icon icon="arrow-left" />
 					</i>
-					<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+					<n8n-heading size="large" :bold="true">{{ i18n.baseText('settings') }}</n8n-heading>
 				</div>
 			</template>
 			<template #menuSuffix>
 				<div :class="$style.versionContainer">
-					<n8n-link size="small" @click="onVersionClick">
-						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
+					<n8n-link size="small" @click="uiStore.openModal(ABOUT_MODAL_KEY)">
+						{{ i18n.baseText('settings.version') }} {{ rootStore.versionCli }}
 					</n8n-link>
 				</div>
 			</template>