fix(editor): Add paywall state to non owner users for Variables (#6679)

* fix(editor): Add paywall state to non owner users for Variables

* fix(editor): Add variables view tests

* fix(editor): remove link from paywall state for non owner

* fix(editor): fix displaying logic

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1729,6 +1729,8 @@
 	"variables.empty.heading.userNotSetup": "Set up a variable",
 	"variables.empty.description": "Variables can be used to store data that can be referenced easily across multiple workflows.",
 	"variables.empty.button": "Add first variable",
+	"variables.empty.notAllowedToCreate.heading": "{name}, start using variables",
+	"variables.empty.notAllowedToCreate.description": "Ask your n8n instance owner to create the variables you need. Once configured, you can utilize them in your workflows using the syntax $vars.MY_VAR.",
 	"variables.noResults": "No variables found",
 	"variables.sort.nameAsc": "Sort by name (A-Z)",
 	"variables.sort.nameDesc": "Sort by name (Z-A)",

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

@@ -278,8 +278,9 @@ onBeforeUnmount(() => {
 				@click="goToUpgrade"
 			/>
 		</template>
-		<template v-if="!isFeatureEnabled" #empty>
+		<template v-if="!isFeatureEnabled || (isFeatureEnabled && !canCreateVariables)" #empty>
 			<n8n-action-box
+				v-if="!isFeatureEnabled"
 				data-test-id="unavailable-resources-list"
 				emoji="👋"
 				:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
@@ -290,6 +291,18 @@ onBeforeUnmount(() => {
 				buttonType="secondary"
 				@click="goToUpgrade"
 			/>
+			<n8n-action-box
+				v-else-if="!canCreateVariables"
+				data-test-id="cannot-create-variables"
+				emoji="👋"
+				:heading="
+					$locale.baseText('variables.empty.notAllowedToCreate.heading', {
+						interpolate: { name: usersStore.currentUser.firstName },
+					})
+				"
+				:description="$locale.baseText('variables.empty.notAllowedToCreate.description')"
+				@click="goToUpgrade"
+			/>
 		</template>
 		<template #default="{ data }">
 			<VariablesRow

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

@@ -1,13 +1,16 @@
-import { afterAll, beforeAll } from 'vitest';
+import { afterAll, beforeAll, vi } 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 { renderComponent } from '@/__tests__/utils';
 
-describe('store', () => {
+describe('VariablesView', () => {
 	let server: ReturnType<typeof setupServer>;
 	let pinia: ReturnType<typeof createPinia>;
+	let settingsStore: ReturnType<typeof useSettingsStore>;
+	let usersStore: ReturnType<typeof useUsersStore>;
 
 	beforeAll(() => {
 		server = setupServer();
@@ -17,9 +20,11 @@ describe('store', () => {
 		pinia = createPinia();
 		setActivePinia(pinia);
 
-		await useSettingsStore().getSettings();
+		settingsStore = useSettingsStore();
-		await useUsersStore().fetchUsers();
+		usersStore = useUsersStore();
-		await useUsersStore().loginWithCookie();
+		await settingsStore.getSettings();
+		await usersStore.fetchUsers();
+		await usersStore.loginWithCookie();
 	});
 
 	afterAll(() => {
@@ -32,11 +37,51 @@ describe('store', () => {
 		expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
 	});
 
-	it('should render empty state', async () => {
+	describe('should render empty state', () => {
-		const wrapper = renderComponent(VariablesView, { pinia });
+		it('when feature is enabled and logged in user is owner', async () => {
+			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
+				isOwner: true,
+			});
 
-		await wrapper.findByTestId('empty-resources-list');
+			const { queryByTestId } = renderComponent(VariablesView, { pinia });
-		expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
+
+			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 () => {
+			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(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();
+				expect(queryByTestId('cannot-create-variables')).not.toBeInTheDocument();
+			});
+		});
+
+		it('when feature is eanbled and logged in user is not owner', async () => {
+			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
+				isDefaultUser: true,
+			});
+
+			const { queryByTestId } = renderComponent(VariablesView, { pinia });
+
+			await waitFor(() => {
+				expect(queryByTestId('empty-resources-list')).not.toBeInTheDocument();
+				expect(queryByTestId('unavailable-resources-list')).not.toBeInTheDocument();
+				expect(queryByTestId('cannot-create-variables')).toBeVisible();
+			});
+		});
 	});
 
 	it('should render variable entries', async () => {
@@ -44,8 +89,8 @@ describe('store', () => {
 
 		const wrapper = renderComponent(VariablesView, { pinia });
 
-		await wrapper.findByTestId('resources-table');
+		const table = await wrapper.findByTestId('resources-table');
-		expect(wrapper.getByTestId('resources-table')).toBeVisible();
+		expect(table).toBeVisible();
 		expect(wrapper.container.querySelectorAll('tr')).toHaveLength(4);
 	});
 });