feat(editor): Add routing middleware, permission checks, RBAC store, RBAC component (#7702)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

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

@@ -8,6 +8,8 @@ import { i18n as locale } from '@/plugins/i18n';
 import { useUIStore } from '@/stores';
 import { N8N_PRICING_PAGE_URL } from '@/constants';
 import { useToast } from '@/composables';
+import { ROLE } from '@/utils';
+import { hasPermission } from '@/rbac/permissions';
 
 const usageStore = useUsageStore();
 const route = useRoute();
@@ -26,6 +28,12 @@ const activationKeyModal = ref(false);
 const activationKey = ref('');
 const activationKeyInput = ref<HTMLInputElement | null>(null);
 
+const canUserActivateLicense = computed(() =>
+	hasPermission(['role'], {
+		role: [ROLE.Owner],
+	}),
+);
+
 const showActivationSuccess = () => {
 	toast.showMessage({
 		type: 'success',
@@ -77,7 +85,7 @@ onMounted(async () => {
 		}
 	}
 	try {
-		if (!route.query.key && usageStore.canUserActivateLicense) {
+		if (!route.query.key && canUserActivateLicense.value) {
 			await usageStore.refreshLicenseManagementToken();
 		} else {
 			await usageStore.getLicenseInfo();
@@ -184,7 +192,7 @@ const openPricingPage = () => {
 				<n8n-button
 					:class="$style.buttonTertiary"
 					@click="onAddActivationKey"
-					v-if="usageStore.canUserActivateLicense"
+					v-if="canUserActivateLicense"
 					type="tertiary"
 					size="large"
 				>

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

@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<div>
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
-			<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
+			<div :class="$style.buttonContainer" v-if="!showUMSetupWarning">
 				<n8n-tooltip :disabled="!ssoStore.isSamlLoginEnabled">
 					<template #content>
 						<span> {{ $locale.baseText('settings.users.invite.tooltip') }} </span>
@@ -70,6 +70,8 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useUsageStore } from '@/stores/usage.store';
 import { useSSOStore } from '@/stores/sso.store';
+import { hasPermission } from '@/rbac/permissions';
+import { ROLE } from '@/utils';
 
 export default defineComponent({
 	name: 'SettingsUsersView',
@@ -80,7 +82,7 @@ export default defineComponent({
 		};
 	},
 	async mounted() {
-		if (!this.usersStore.showUMSetupWarning) {
+		if (!this.showUMSetupWarning) {
 			await this.usersStore.fetchUsers();
 		}
 	},
@@ -89,6 +91,9 @@ export default defineComponent({
 		isSharingEnabled() {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
+		showUMSetupWarning() {
+			return hasPermission(['role'], { role: [ROLE.Default] });
+		},
 		usersListActions(): IUserListAction[] {
 			return [
 				{

packages/editor-ui/src/views/__tests__/VariablesView.spec.ts

@@ -1,9 +1,9 @@
-import { afterAll, beforeAll, vi } from 'vitest';
+import { afterAll, beforeAll } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { waitFor } from '@testing-library/vue';
 import { setupServer } from '@/__tests__/server';
 import VariablesView from '@/views/VariablesView.vue';
-import { useSettingsStore, useUsersStore } from '@/stores';
+import { useSettingsStore, useUsersStore, useRBACStore } from '@/stores';
 import { createComponentRenderer } from '@/__tests__/render';
 import { EnterpriseEditionFeature } from '@/constants';
 
@@ -12,6 +12,7 @@ describe('VariablesView', () => {
 	let pinia: ReturnType<typeof createPinia>;
 	let settingsStore: ReturnType<typeof useSettingsStore>;
 	let usersStore: ReturnType<typeof useUsersStore>;
+	let rbacStore: ReturnType<typeof useRBACStore>;
 
 	const renderComponent = createComponentRenderer(VariablesView);
 
@@ -25,6 +26,7 @@ describe('VariablesView', () => {
 
 		settingsStore = useSettingsStore();
 		usersStore = useUsersStore();
+		rbacStore = useRBACStore();
 		await settingsStore.getSettings();
 		await usersStore.fetchUsers();
 		await usersStore.loginWithCookie();
@@ -41,29 +43,12 @@ describe('VariablesView', () => {
 	});
 
 	describe('should render empty state', () => {
-		it('when feature is enabled and logged in user is owner', async () => {
-			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
-			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
-				isOwner: true,
-			});
+		it('when feature is disabled and logged in user is not owner', async () => {
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = false;
+			rbacStore.setGlobalScopes(['variable:read', 'variable:list']);
 
 			const { queryByTestId } = renderComponent({ pinia });
 
-			await waitFor(() => {
-				expect(queryByTestId('empty-resources-list')).toBeVisible();
-				expect(queryByTestId('unavailable-resources-list')).not.toBeInTheDocument();
-				expect(queryByTestId('cannot-create-variables')).not.toBeInTheDocument();
-			});
-		});
-
-		it('when feature is disabled and logged in user is owner', async () => {
-			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = false;
-			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
-				isOwner: true,
-			});
-
-			const { queryByTestId } = renderComponent(VariablesView, { pinia });
-
 			await waitFor(() => {
 				expect(queryByTestId('empty-resources-list')).not.toBeInTheDocument();
 				expect(queryByTestId('unavailable-resources-list')).toBeVisible();
@@ -71,13 +56,49 @@ describe('VariablesView', () => {
 			});
 		});
 
-		it('when feature is eanbled and logged in user is not owner', async () => {
-			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
-			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
-				isDefaultUser: true,
-			});
+		it('when feature is disabled and logged in user is owner', async () => {
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = false;
+			rbacStore.setGlobalScopes([
+				'variable:create',
+				'variable:read',
+				'variable:update',
+				'variable:delete',
+				'variable:list',
+			]);
 
-			const { queryByTestId } = renderComponent(VariablesView, { pinia });
+			const { queryByTestId } = renderComponent({ pinia });
+
+			await waitFor(() => {
+				expect(queryByTestId('empty-resources-list')).not.toBeInTheDocument();
+				expect(queryByTestId('unavailable-resources-list')).toBeVisible();
+				expect(queryByTestId('cannot-create-variables')).not.toBeInTheDocument();
+			});
+		});
+
+		it('when feature is enabled and logged in user is owner', async () => {
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
+			rbacStore.setGlobalScopes([
+				'variable:create',
+				'variable:read',
+				'variable:update',
+				'variable:delete',
+				'variable:list',
+			]);
+
+			const { queryByTestId } = renderComponent({ pinia });
+
+			await waitFor(() => {
+				expect(queryByTestId('empty-resources-list')).not.toBeInTheDocument();
+				expect(queryByTestId('unavailable-resources-list')).not.toBeInTheDocument();
+				expect(queryByTestId('cannot-create-variables')).not.toBeInTheDocument();
+			});
+		});
+
+		it('when feature is enabled and logged in user is not owner', async () => {
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
+			rbacStore.setGlobalScopes(['variable:read', 'variable:list']);
+
+			const { queryByTestId } = renderComponent({ pinia });
 
 			await waitFor(() => {
 				expect(queryByTestId('empty-resources-list')).not.toBeInTheDocument();