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
This commit is contained in:
Csaba Tuncsik 2023-07-18 11:18:07 +02:00 committed by GitHub
parent 462a674d17
commit e7091d6726
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 12 deletions

View file

@ -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)",

View file

@ -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

View file

@ -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();
await useUsersStore().fetchUsers();
await useUsersStore().loginWithCookie();
settingsStore = useSettingsStore();
usersStore = useUsersStore();
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 () => {
const wrapper = renderComponent(VariablesView, { pinia });
describe('should render empty state', () => {
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');
expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
const { queryByTestId } = renderComponent(VariablesView, { 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 () => {
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');
expect(wrapper.getByTestId('resources-table')).toBeVisible();
const table = await wrapper.findByTestId('resources-table');
expect(table).toBeVisible();
expect(wrapper.container.querySelectorAll('tr')).toHaveLength(4);
});
});