mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
refactor(editor): SettingsSidebar.vue to script setup (no-changelog) (#10709)
This commit is contained in:
Raúl Gómez Morales
GitHub
parent
eac103e367
commit
8ac661ee98
|
|
@ -1,7 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { mapStores } from 'pinia';
|
import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
|
||||||
import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
|
|
||||||
import { useUserHelpers } from '@/composables/useUserHelpers';
|
import { useUserHelpers } from '@/composables/useUserHelpers';
|
||||||
import type { IFakeDoor } from '@/Interface';
|
import type { IFakeDoor } from '@/Interface';
|
||||||
import type { IMenuItem } from 'n8n-design-system';
|
import type { IMenuItem } from 'n8n-design-system';
|
||||||
|
|
@ -11,186 +10,150 @@ import { useSettingsStore } from '@/stores/settings.store';
|
||||||
import { useRootStore } from '@/stores/root.store';
|
import { useRootStore } from '@/stores/root.store';
|
||||||
import { hasPermission } from '@/utils/rbac/permissions';
|
import { hasPermission } from '@/utils/rbac/permissions';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
|
||||||
export default defineComponent({
|
const emit = defineEmits<{
|
||||||
name: 'SettingsSidebar',
|
return: [];
|
||||||
setup() {
|
}>();
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const router = useRouter();
|
||||||
return {
|
const route = useRoute();
|
||||||
...useUserHelpers(router, route),
|
const i18n = useI18n();
|
||||||
};
|
|
||||||
},
|
const { canUserAccessRouteByName } = useUserHelpers(router, route);
|
||||||
computed: {
|
|
||||||
...mapStores(useRootStore, useSettingsStore, useUIStore),
|
const rootStore = useRootStore();
|
||||||
settingsFakeDoorFeatures(): IFakeDoor[] {
|
const settingsStore = useSettingsStore();
|
||||||
return Object.keys(this.uiStore.fakeDoorsByLocation)
|
const uiStore = useUIStore();
|
||||||
.filter((location: string) => location.includes('settings'))
|
|
||||||
.map((location) => this.uiStore.fakeDoorsByLocation[location]);
|
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',
|
id: 'settings-source-control',
|
||||||
icon: 'code-branch',
|
icon: 'code-branch',
|
||||||
label: this.$locale.baseText('settings.sourceControl.title'),
|
label: i18n.baseText('settings.sourceControl.title'),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available: this.canAccessSourceControl(),
|
available: canUserAccessRouteByName(VIEWS.SOURCE_CONTROL),
|
||||||
route: { to: { name: VIEWS.SOURCE_CONTROL } },
|
route: { to: { name: VIEWS.SOURCE_CONTROL } },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'settings-sso',
|
id: 'settings-sso',
|
||||||
icon: 'user-lock',
|
icon: 'user-lock',
|
||||||
label: this.$locale.baseText('settings.sso'),
|
label: i18n.baseText('settings.sso'),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available: this.canAccessSso(),
|
available: canUserAccessRouteByName(VIEWS.SSO_SETTINGS),
|
||||||
route: { to: { name: VIEWS.SSO_SETTINGS } },
|
route: { to: { name: VIEWS.SSO_SETTINGS } },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'settings-ldap',
|
id: 'settings-ldap',
|
||||||
icon: 'network-wired',
|
icon: 'network-wired',
|
||||||
label: this.$locale.baseText('settings.ldap'),
|
label: i18n.baseText('settings.ldap'),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available: this.canAccessLdapSettings(),
|
available: canUserAccessRouteByName(VIEWS.LDAP_SETTINGS),
|
||||||
route: { to: { name: VIEWS.LDAP_SETTINGS } },
|
route: { to: { name: VIEWS.LDAP_SETTINGS } },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'settings-workersview',
|
id: 'settings-workersview',
|
||||||
icon: 'project-diagram',
|
icon: 'project-diagram',
|
||||||
label: this.$locale.baseText('mainSidebar.workersView'),
|
label: i18n.baseText('mainSidebar.workersView'),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available:
|
available:
|
||||||
this.settingsStore.isQueueModeEnabled &&
|
settingsStore.isQueueModeEnabled &&
|
||||||
hasPermission(['rbac'], { rbac: { scope: 'workersView:manage' } }),
|
hasPermission(['rbac'], { rbac: { scope: 'workersView:manage' } }),
|
||||||
route: { to: { name: VIEWS.WORKER_VIEW } },
|
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}`],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
for (const item of settingsFakeDoorFeatures.value) {
|
||||||
|
if (item.uiLocations.includes('settings')) {
|
||||||
menuItems.push({
|
menuItems.push({
|
||||||
id: 'settings-log-streaming',
|
id: item.id,
|
||||||
icon: 'sign-in-alt',
|
icon: item.icon ?? 'question',
|
||||||
label: this.$locale.baseText('settings.log-streaming'),
|
label: i18n.baseText(item.featureName as BaseTextKey),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available: this.canAccessLogStreamingSettings(),
|
available: true,
|
||||||
route: { to: { name: VIEWS.LOG_STREAMING_SETTINGS } },
|
activateOnRoutePaths: [`/settings/coming-soon/${item.id}`],
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
menuItems.push({
|
menuItems.push({
|
||||||
id: 'settings-community-nodes',
|
id: 'settings-log-streaming',
|
||||||
icon: 'cube',
|
icon: 'sign-in-alt',
|
||||||
label: this.$locale.baseText('settings.communityNodes'),
|
label: i18n.baseText('settings.log-streaming'),
|
||||||
position: 'top',
|
position: 'top',
|
||||||
available: this.canAccessCommunityNodes(),
|
available: canUserAccessRouteByName(VIEWS.LOG_STREAMING_SETTINGS),
|
||||||
route: { to: { name: VIEWS.COMMUNITY_NODES } },
|
route: { to: { name: VIEWS.LOG_STREAMING_SETTINGS } },
|
||||||
});
|
});
|
||||||
|
|
||||||
return menuItems;
|
menuItems.push({
|
||||||
},
|
id: 'settings-community-nodes',
|
||||||
},
|
icon: 'cube',
|
||||||
methods: {
|
label: i18n.baseText('settings.communityNodes'),
|
||||||
canAccessPersonalSettings(): boolean {
|
position: 'top',
|
||||||
return this.canUserAccessRouteByName(VIEWS.PERSONAL_SETTINGS);
|
available: canUserAccessRouteByName(VIEWS.COMMUNITY_NODES),
|
||||||
},
|
route: { to: { name: VIEWS.COMMUNITY_NODES } },
|
||||||
canAccessUsersSettings(): boolean {
|
});
|
||||||
return this.canUserAccessRouteByName(VIEWS.USERS_SETTINGS);
|
|
||||||
},
|
return menuItems;
|
||||||
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;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -198,17 +161,17 @@ export default defineComponent({
|
||||||
<div :class="$style.container">
|
<div :class="$style.container">
|
||||||
<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
|
<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
|
||||||
<template #header>
|
<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">
|
<i class="mr-xs">
|
||||||
<font-awesome-icon icon="arrow-left" />
|
<font-awesome-icon icon="arrow-left" />
|
||||||
</i>
|
</i>
|
||||||
<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
|
<n8n-heading size="large" :bold="true">{{ i18n.baseText('settings') }}</n8n-heading>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #menuSuffix>
|
<template #menuSuffix>
|
||||||
<div :class="$style.versionContainer">
|
<div :class="$style.versionContainer">
|
||||||
<n8n-link size="small" @click="onVersionClick">
|
<n8n-link size="small" @click="uiStore.openModal(ABOUT_MODAL_KEY)">
|
||||||
{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
|
{{ i18n.baseText('settings.version') }} {{ rootStore.versionCli }}
|
||||||
</n8n-link>
|
</n8n-link>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue