feat: Add variables feature (#5602)

* feat: add variables db models and migrations

* feat: variables api endpoints

* feat: add $variables to expressions

* test: fix ActiveWorkflowRunner tests failing

* test: a different fix for the tests broken by $variables

* feat: variables licensing

* fix: could create one extra variable than licensed for

* feat: Add Variables UI page and $vars global property (#5750)

* feat: add support for row slot to datatable

* feat: add variables create, read, update, delete

* feat: add vars autocomplete

* chore: remove alert

* feat: add variables autocomplete for code and expressions

* feat: add tests for variable components

* feat: add variables search and sort

* test: update tests for variables view

* chore: fix test and linting issue

* refactor: review changes

* feat: add variable creation telemetry

* fix: Improve variables listing and disabled case, fix resource sorting (no-changelog) (#5903)

* fix: Improve variables disabled experience and fix sorting

* fix: update action box margin

* test: update tests for variables row and datatable

* fix: Add ee controller to base controller

* fix: variables.ee routes not being added

* feat: add variables validation

* fix: fix vue-fragment bug that breaks everything

* chore: Update lock

* feat: Add variables input validation and permissions (no-changelog) (#5910)

* feat: add input validation

* feat: handle variables view for non-instance-owner users

* test: update variables tests

* fix: fix data-testid pattern

* feat: improve overflow styles

* test: fix variables row snapshot

* feat: update sorting to take newly created variables into account

* fix: fix list layout overflow

* fix: fix adding variables on page other than 1. fix validation

* feat: add docs link

* fix: fix default displayName function for resource-list-layout

* feat: improve vars expressions ux, cm-tooltip

* test: fix datatable test

* feat: add MATCH_REGEX validation rule

* fix: overhaul how datatable pagination selector works

* feat: update  completer description

* fix: conditionally update usage syntax based on key validation

* test: update datatable snapshot

* fix: fix variables-row button margins

* fix: fix pagination overflow

* test: Fix broken test

* test: Update snapshot

* fix: Remove duplicate declaration

* feat: add custom variables icon

---------

Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>

packages/editor-ui/src/stores/__tests__/environments.spec.ts

@@ -0,0 +1,99 @@
+import { afterAll, beforeAll } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { setupServer } from '@/__tests__/server';
+import { useEnvironmentsStore } from '@/stores/environments.ee';
+import { EnvironmentVariable } from '@/Interface';
+
+describe('store', () => {
+	let server: ReturnType<typeof setupServer>;
+	const seedRecordsCount = 3;
+
+	beforeAll(() => {
+		server = setupServer();
+		server.createList('variable', seedRecordsCount);
+	});
+
+	beforeEach(() => {
+		setActivePinia(createPinia());
+	});
+
+	afterAll(() => {
+		server.shutdown();
+	});
+
+	describe('variables', () => {
+		describe('fetchAllVariables()', () => {
+			it('should fetch all credentials', async () => {
+				const environmentsStore = useEnvironmentsStore();
+				await environmentsStore.fetchAllVariables();
+
+				expect(environmentsStore.variables).toHaveLength(seedRecordsCount);
+			});
+		});
+
+		describe('createVariable()', () => {
+			it('should store a new variable', async () => {
+				const variable: Omit<EnvironmentVariable, 'id'> = {
+					key: 'ENV_VAR',
+					value: 'SECRET',
+				};
+				const environmentsStore = useEnvironmentsStore();
+
+				await environmentsStore.fetchAllVariables();
+				const recordsCount = environmentsStore.variables.length;
+
+				expect(environmentsStore.variables).toHaveLength(recordsCount);
+
+				await environmentsStore.createVariable(variable);
+
+				expect(environmentsStore.variables).toHaveLength(recordsCount + 1);
+				expect(environmentsStore.variables[0]).toMatchObject(variable);
+			});
+		});
+
+		describe('updateVariable()', () => {
+			it('should update an existing variable', async () => {
+				const updateValue: Partial<EnvironmentVariable> = {
+					key: 'ENV_VAR',
+					value: 'SECRET',
+				};
+
+				const environmentsStore = useEnvironmentsStore();
+				await environmentsStore.fetchAllVariables();
+
+				await environmentsStore.updateVariable({
+					...environmentsStore.variables[0],
+					...updateValue,
+				});
+
+				expect(environmentsStore.variables[0]).toMatchObject(updateValue);
+			});
+		});
+
+		describe('deleteVariable()', () => {
+			it('should delete an existing variable', async () => {
+				const environmentsStore = useEnvironmentsStore();
+				await environmentsStore.fetchAllVariables();
+				const recordsCount = environmentsStore.variables.length;
+
+				await environmentsStore.deleteVariable(environmentsStore.variables[0]);
+
+				expect(environmentsStore.variables).toHaveLength(recordsCount - 1);
+			});
+		});
+
+		describe('variablesAsObject', () => {
+			it('should return variables as a key-value object', async () => {
+				const environmentsStore = useEnvironmentsStore();
+				await environmentsStore.fetchAllVariables();
+
+				expect(environmentsStore.variablesAsObject).toEqual(
+					environmentsStore.variables.reduce<Record<string, string>>((acc, variable) => {
+						acc[variable.key] = variable.value;
+						return acc;
+					}, {}),
+				);
+			});
+		});
+	});
+});

packages/editor-ui/src/stores/environments.ee.ts

@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { computed, ref } from 'vue';
+import { EnvironmentVariable } from '@/Interface';
+import * as environmentsApi from '@/api/environments.ee';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { createVariable } from '@/api/environments.ee';
+
+export const useEnvironmentsStore = defineStore('environments', () => {
+	const rootStore = useRootStore();
+
+	const variables = ref<EnvironmentVariable[]>([]);
+
+	async function fetchAllVariables() {
+		const data = await environmentsApi.getVariables(rootStore.getRestApiContext);
+
+		variables.value = data;
+
+		return data;
+	}
+
+	async function createVariable(variable: Omit<EnvironmentVariable, 'id'>) {
+		const data = await environmentsApi.createVariable(rootStore.getRestApiContext, variable);
+
+		variables.value.unshift(data);
+
+		return data;
+	}
+
+	async function updateVariable(variable: EnvironmentVariable) {
+		const data = await environmentsApi.updateVariable(rootStore.getRestApiContext, variable);
+
+		variables.value = variables.value.map((v) => (v.id === data.id ? data : v));
+
+		return data;
+	}
+
+	async function deleteVariable(variable: EnvironmentVariable) {
+		const data = await environmentsApi.deleteVariable(rootStore.getRestApiContext, {
+			id: variable.id,
+		});
+
+		variables.value = variables.value.filter((v) => v.id !== variable.id);
+
+		return data;
+	}
+
+	const variablesAsObject = computed(() =>
+		variables.value.reduce<Record<string, string | boolean | number>>((acc, variable) => {
+			acc[variable.key] = variable.value;
+			return acc;
+		}, {}),
+	);
+
+	return {
+		variables,
+		variablesAsObject,
+		fetchAllVariables,
+		createVariable,
+		updateVariable,
+		deleteVariable,
+	};
+});
+
+export default useEnvironmentsStore;

packages/editor-ui/src/stores/index.ts

@@ -0,0 +1,23 @@
+export * from './canvas';
+export * from './communityNodes';
+export * from './credentials';
+export * from './environments.ee';
+export * from './history';
+export * from './logStreamingStore';
+export * from './n8nRootStore';
+export * from './ndv';
+export * from './nodeCreator';
+export * from './nodeTypes';
+export * from './posthog';
+export * from './segment';
+export * from './settings';
+export * from './tags';
+export * from './telemetry';
+export * from './templates';
+export * from './ui';
+export * from './usage';
+export * from './users';
+export * from './versions';
+export * from './webhooks';
+export * from './workflows.ee';
+export * from './workflows';

packages/editor-ui/src/stores/ui.ts

@@ -215,6 +215,14 @@ export const useUIStore = defineStore(STORES.UI, {
 						},
 					},
 				},
+				variables: {
+					unavailable: {
+						title: `contextual.variables.unavailable.title${contextKey}`,
+						description: 'contextual.variables.unavailable.description',
+						action: `contextual.variables.unavailable.action${contextKey}`,
+						button: `contextual.variables.unavailable.button${contextKey}`,
+					},
+				},
 				users: {
 					settings: {
 						unavailable: {