Skip to content

Commit

Permalink
refactor(editor): SettingsSidebar.vue to script setup (no-changelog) (n…
Browse files Browse the repository at this point in the history 
…8n-io#10709)
  • Loading branch information
@r00gm
r00gm authored Sep 23, 2024
1 parent eac103e commit 8ac661e
Showing 1 changed file with 138 additions and 175 deletions.
313 changes: 138 additions & 175 deletions packages/editor-ui/src/components/SettingsSidebar.vue
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -11,204 +10,168 @@ 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]);
},
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}`],
});
}
}
const emit = defineEmits<{
return: [];
}>();
menuItems.push({
id: 'settings-log-streaming',
icon: 'sign-in-alt',
label: this.$locale.baseText('settings.log-streaming'),
position: 'top',
available: this.canAccessLogStreamingSettings(),
route: { to: { name: VIEWS.LOG_STREAMING_SETTINGS } },
});
const router = useRouter();
const route = useRoute();
const i18n = useI18n();
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 } },
});
const { canUserAccessRouteByName } = useUserHelpers(router, route);
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);
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 } },
},
canAccessLogStreamingSettings(): boolean {
return this.canUserAccessRouteByName(VIEWS.LOG_STREAMING_SETTINGS);
{
id: 'settings-personal',
icon: 'user-circle',
label: i18n.baseText('settings.personal'),
position: 'top',
available: canUserAccessRouteByName(VIEWS.PERSONAL_SETTINGS),
route: { to: { name: VIEWS.PERSONAL_SETTINGS } },
},
canAccessUsageAndPlan(): boolean {
return this.canUserAccessRouteByName(VIEWS.USAGE);
{
id: 'settings-users',
icon: 'user-friends',
label: i18n.baseText('settings.users'),
position: 'top',
available: canUserAccessRouteByName(VIEWS.USERS_SETTINGS),
route: { to: { name: VIEWS.USERS_SETTINGS } },
},
canAccessExternalSecrets(): boolean {
return this.canUserAccessRouteByName(VIEWS.EXTERNAL_SECRETS_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 } },
},
canAccessSourceControl(): boolean {
return this.canUserAccessRouteByName(VIEWS.SOURCE_CONTROL);
{
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 } },
},
canAccessSso(): boolean {
return this.canUserAccessRouteByName(VIEWS.SSO_SETTINGS);
{
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 } },
},
onVersionClick() {
this.uiStore.openModal(ABOUT_MODAL_KEY);
{
id: 'settings-sso',
icon: 'user-lock',
label: i18n.baseText('settings.sso'),
position: 'top',
available: canUserAccessRouteByName(VIEWS.SSO_SETTINGS),
route: { to: { name: VIEWS.SSO_SETTINGS } },
},
openUpdatesPanel() {
this.uiStore.openModal(VERSIONS_MODAL_KEY);
{
id: 'settings-ldap',
icon: 'network-wired',
label: i18n.baseText('settings.ldap'),
position: 'top',
available: canUserAccessRouteByName(VIEWS.LDAP_SETTINGS),
route: { to: { name: VIEWS.LDAP_SETTINGS } },
},
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;
}
{
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: item.id,
icon: item.icon ?? 'question',
label: i18n.baseText(item.featureName as BaseTextKey),
position: 'top',
available: true,
activateOnRoutePaths: [`/settings/coming-soon/${item.id}`],
});
}
}
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 } },
});
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>

<template>
<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>
Expand Down

0 comments on commit 8ac661e

Please sign in to comment.