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/cli/src/Db.ts

@@ -34,6 +34,7 @@ import {
 	SharedWorkflowRepository,
 	TagRepository,
 	UserRepository,
+	VariablesRepository,
 	WebhookRepository,
 	WorkflowRepository,
 	WorkflowStatisticsRepository,
@@ -178,6 +179,7 @@ export async function init(
 	collections.SharedWorkflow = Container.get(SharedWorkflowRepository);
 	collections.Tag = Container.get(TagRepository);
 	collections.User = Container.get(UserRepository);
+	collections.Variables = Container.get(VariablesRepository);
 	collections.Webhook = Container.get(WebhookRepository);
 	collections.Workflow = Container.get(WorkflowRepository);
 	collections.WorkflowStatistics = Container.get(WorkflowStatisticsRepository);

packages/cli/src/Interfaces.ts

@@ -56,6 +56,7 @@ import type {
 	SharedWorkflowRepository,
 	TagRepository,
 	UserRepository,
+	VariablesRepository,
 	WebhookRepository,
 	WorkflowRepository,
 	WorkflowStatisticsRepository,
@@ -99,6 +100,7 @@ export interface IDatabaseCollections {
 	SharedWorkflow: SharedWorkflowRepository;
 	Tag: TagRepository;
 	User: UserRepository;
+	Variables: VariablesRepository;
 	Webhook: WebhookRepository;
 	Workflow: WorkflowRepository;
 	WorkflowStatistics: WorkflowStatisticsRepository;
@@ -458,6 +460,7 @@ export interface IInternalHooksClass {
 	}): Promise<void>;
 	onApiKeyCreated(apiKeyDeletedData: { user: User; public_api: boolean }): Promise<void>;
 	onApiKeyDeleted(apiKeyDeletedData: { user: User; public_api: boolean }): Promise<void>;
+	onVariableCreated(createData: { variable_type: string }): Promise<void>;
 }
 
 export interface IVersionNotificationSettings {
@@ -538,11 +541,15 @@ export interface IN8nUISettings {
 		saml: boolean;
 		logStreaming: boolean;
 		advancedExecutionFilters: boolean;
+		variables: boolean;
 	};
 	hideUsagePage: boolean;
 	license: {
 		environment: 'production' | 'staging';
 	};
+	variables: {
+		limit: number;
+	};
 }
 
 export interface IPersonalizationSurveyAnswers {

packages/cli/src/InternalHooks.ts

@@ -981,4 +981,8 @@ export class InternalHooks implements IInternalHooksClass {
 	async onAuditGeneratedViaCli() {
 		return this.telemetry.track('Instance generated security audit via CLI command');
 	}
+
+	async onVariableCreated(createData: { variable_type: string }): Promise<void> {
+		return this.telemetry.track('User created variable', createData);
+	}
 }

packages/cli/src/License.ts

@@ -4,7 +4,12 @@ import type { ILogger } from 'n8n-workflow';
 import { getLogger } from './Logger';
 import config from '@/config';
 import * as Db from '@/Db';
-import { LICENSE_FEATURES, N8N_VERSION, SETTINGS_LICENSE_CERT_KEY } from './constants';
+import {
+	LICENSE_FEATURES,
+	LICENSE_QUOTAS,
+	N8N_VERSION,
+	SETTINGS_LICENSE_CERT_KEY,
+} from './constants';
 import { Service } from 'typedi';
 
 async function loadCertStr(): Promise<TLicenseBlock> {
@@ -119,6 +124,10 @@ export class License {
 		return this.isFeatureEnabled(LICENSE_FEATURES.ADVANCED_EXECUTION_FILTERS);
 	}
 
+	isVariablesEnabled() {
+		return this.isFeatureEnabled(LICENSE_FEATURES.VARIABLES);
+	}
+
 	getCurrentEntitlements() {
 		return this.manager?.getCurrentEntitlements() ?? [];
 	}
@@ -162,7 +171,11 @@ export class License {
 
 	// Helper functions for computed data
 	getTriggerLimit(): number {
-		return (this.getFeatureValue('quota:activeWorkflows') ?? -1) as number;
+		return (this.getFeatureValue(LICENSE_QUOTAS.TRIGGER_LIMIT) ?? -1) as number;
+	}
+
+	getVariablesLimit(): number {
+		return (this.getFeatureValue(LICENSE_QUOTAS.VARIABLES_LIMIT) ?? -1) as number;
 	}
 
 	getPlanName(): string {

packages/cli/src/Server.ts

@@ -156,7 +156,9 @@ import {
 import { getSamlLoginLabel, isSamlLoginEnabled, isSamlLicensed } from './sso/saml/samlHelpers';
 import { SamlController } from './sso/saml/routes/saml.controller.ee';
 import { SamlService } from './sso/saml/saml.service.ee';
+import { variablesController } from './environments/variables.controller';
 import { LdapManager } from './Ldap/LdapManager.ee';
+import { getVariablesLimit, isVariablesEnabled } from '@/environments/enviromentHelpers';
 import { getCurrentAuthenticationMethod } from './sso/ssoHelpers';
 
 const exec = promisify(callbackExec);
@@ -317,11 +319,15 @@ class Server extends AbstractServer {
 				saml: false,
 				logStreaming: false,
 				advancedExecutionFilters: false,
+				variables: false,
 			},
 			hideUsagePage: config.getEnv('hideUsagePage'),
 			license: {
 				environment: config.getEnv('license.tenantId') === 1 ? 'production' : 'staging',
 			},
+			variables: {
+				limit: 0,
+			},
 		};
 	}
 
@@ -347,6 +353,7 @@ class Server extends AbstractServer {
 			ldap: isLdapEnabled(),
 			saml: isSamlLicensed(),
 			advancedExecutionFilters: isAdvancedExecutionFiltersEnabled(),
+			variables: isVariablesEnabled(),
 		});
 
 		if (isLdapEnabled()) {
@@ -363,6 +370,10 @@ class Server extends AbstractServer {
 			});
 		}
 
+		if (isVariablesEnabled()) {
+			this.frontendSettings.variables.limit = getVariablesLimit();
+		}
+
 		if (config.get('nodes.packagesMissing').length > 0) {
 			this.frontendSettings.missingPackages = true;
 		}
@@ -540,6 +551,13 @@ class Server extends AbstractServer {
 		}
 
 		// ----------------------------------------
+		// Variables
+		// ----------------------------------------
+
+		this.app.use(`/${this.restEndpoint}/variables`, variablesController);
+
+		// ----------------------------------------
+
 		// Returns parameter values which normally get loaded from an external API or
 		// get generated dynamically
 		this.app.get(

packages/cli/src/WorkflowExecuteAdditionalData.ts

@@ -1164,7 +1164,10 @@ export async function getBase(
 	const webhookWaitingBaseUrl = urlBaseWebhook + config.getEnv('endpoints.webhookWaiting');
 	const webhookTestBaseUrl = urlBaseWebhook + config.getEnv('endpoints.webhookTest');
 
-	const encryptionKey = await UserSettings.getEncryptionKey();
+	const [encryptionKey, variables] = await Promise.all([
+		UserSettings.getEncryptionKey(),
+		WorkflowHelpers.getVariables(),
+	]);
 
 	return {
 		credentialsHelper: new CredentialsHelper(encryptionKey),
@@ -1179,6 +1182,7 @@ export async function getBase(
 		executionTimeoutTimestamp,
 		userId,
 		setExecutionStatus,
+		variables,
 	};
 }
 

packages/cli/src/WorkflowHelpers.ts

@@ -562,3 +562,12 @@ export function validateWorkflowCredentialUsage(
 
 	return newWorkflowVersion;
 }
+
+export async function getVariables(): Promise<IDataObject> {
+	return Object.freeze(
+		(await Db.collections.Variables.find()).reduce((prev, curr) => {
+			prev[curr.key] = curr.value;
+			return prev;
+		}, {} as IDataObject),
+	);
+}

packages/cli/src/constants.ts

@@ -74,6 +74,12 @@ export enum LICENSE_FEATURES {
 	SAML = 'feat:saml',
 	LOG_STREAMING = 'feat:logStreaming',
 	ADVANCED_EXECUTION_FILTERS = 'feat:advancedExecutionFilters',
+	VARIABLES = 'feat:variables',
+}
+
+export enum LICENSE_QUOTAS {
+	TRIGGER_LIMIT = 'quota:activeWorkflows',
+	VARIABLES_LIMIT = 'quota:maxVariables',
 }
 
 export const CREDENTIAL_BLANKING_VALUE = '__n8n_BLANK_VALUE_e5362baf-c777-4d57-a609-6eaf1f9e87f6';

packages/cli/src/databases/entities/Variables.ts

@@ -0,0 +1,16 @@
+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
+
+@Entity()
+export class Variables {
+	@PrimaryGeneratedColumn()
+	id: number;
+
+	@Column('text')
+	key: string;
+
+	@Column('text', { default: 'string' })
+	type: string;
+
+	@Column('text')
+	value: string;
+}

packages/cli/src/databases/entities/index.ts

@@ -12,6 +12,7 @@ import { SharedCredentials } from './SharedCredentials';
 import { SharedWorkflow } from './SharedWorkflow';
 import { TagEntity } from './TagEntity';
 import { User } from './User';
+import { Variables } from './Variables';
 import { WebhookEntity } from './WebhookEntity';
 import { WorkflowEntity } from './WorkflowEntity';
 import { WorkflowTagMapping } from './WorkflowTagMapping';
@@ -32,6 +33,7 @@ export const entities = {
 	SharedWorkflow,
 	TagEntity,
 	User,
+	Variables,
 	WebhookEntity,
 	WorkflowEntity,
 	WorkflowTagMapping,

packages/cli/src/databases/migrations/mysqldb/1677501636753-CreateVariables.ts

@@ -0,0 +1,33 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
+import config from '@/config';
+
+export class CreateVariables1677501636753 implements MigrationInterface {
+	name = 'CreateVariables1677501636753';
+	public async up(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`
+			CREATE TABLE ${tablePrefix}variables (
+				id int(11) auto_increment NOT NULL PRIMARY KEY,
+				\`key\` VARCHAR(50) NOT NULL,
+				\`type\` VARCHAR(50) DEFAULT 'string' NOT NULL,
+				value VARCHAR(255) NULL,
+				UNIQUE (\`key\`)
+			)
+			ENGINE=InnoDB;
+		`);
+
+		logMigrationEnd(this.name);
+	}
+
+	public async down(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
+
+		logMigrationEnd(this.name);
+	}
+}

packages/cli/src/databases/migrations/mysqldb/index.ts

@@ -35,6 +35,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
 import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
 import { UpdateRunningExecutionStatus1677236788851 } from './1677236788851-UpdateRunningExecutionStatus';
 import { CreateExecutionMetadataTable1679416281779 } from './1679416281779-CreateExecutionMetadataTable';
+import { CreateVariables1677501636753 } from './1677501636753-CreateVariables';
 
 export const mysqlMigrations = [
 	InitialMigration1588157391238,
@@ -74,4 +75,5 @@ export const mysqlMigrations = [
 	MigrateExecutionStatus1676996103000,
 	UpdateRunningExecutionStatus1677236788851,
 	CreateExecutionMetadataTable1679416281779,
+	CreateVariables1677501636753,
 ];

packages/cli/src/databases/migrations/postgresdb/1677501636754-CreateVariables.ts

@@ -0,0 +1,32 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
+import config from '@/config';
+
+export class CreateVariables1677501636754 implements MigrationInterface {
+	name = 'CreateVariables1677501636754';
+	public async up(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`
+			CREATE TABLE public.variables (
+				id serial4 NOT NULL PRIMARY KEY,
+				"key" varchar(50) NOT NULL,
+				"type" varchar(50) NOT NULL DEFAULT 'string',
+				value varchar(255) NULL,
+				UNIQUE ("key")
+			);
+		`);
+
+		logMigrationEnd(this.name);
+	}
+
+	public async down(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
+
+		logMigrationEnd(this.name);
+	}
+}

packages/cli/src/databases/migrations/postgresdb/index.ts

@@ -33,6 +33,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
 import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
 import { UpdateRunningExecutionStatus1677236854063 } from './1677236854063-UpdateRunningExecutionStatus';
 import { CreateExecutionMetadataTable1679416281778 } from './1679416281778-CreateExecutionMetadataTable';
+import { CreateVariables1677501636754 } from './1677501636754-CreateVariables';
 
 export const postgresMigrations = [
 	InitialMigration1587669153312,
@@ -70,4 +71,5 @@ export const postgresMigrations = [
 	MigrateExecutionStatus1676996103000,
 	UpdateRunningExecutionStatus1677236854063,
 	CreateExecutionMetadataTable1679416281778,
+	CreateVariables1677501636754,
 ];

packages/cli/src/databases/migrations/sqlite/1677501636752-CreateVariables.ts

@@ -0,0 +1,32 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
+import config from '@/config';
+
+export class CreateVariables1677501636752 implements MigrationInterface {
+	name = 'CreateVariables1677501636752';
+	public async up(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`
+			CREATE TABLE ${tablePrefix}variables (
+				id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+				"key" TEXT NOT NULL,
+				"type" TEXT NOT NULL DEFAULT ('string'),
+				value TEXT,
+				UNIQUE("key")
+			);
+		`);
+
+		logMigrationEnd(this.name);
+	}
+
+	public async down(queryRunner: QueryRunner): Promise<void> {
+		logMigrationStart(this.name);
+		const tablePrefix = getTablePrefix();
+
+		await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
+
+		logMigrationEnd(this.name);
+	}
+}

packages/cli/src/databases/migrations/sqlite/index.ts

@@ -32,6 +32,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
 import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
 import { UpdateRunningExecutionStatus1677237073720 } from './1677237073720-UpdateRunningExecutionStatus';
 import { CreateExecutionMetadataTable1679416281777 } from './1679416281777-CreateExecutionMetadataTable';
+import { CreateVariables1677501636752 } from './1677501636752-CreateVariables';
 
 const sqliteMigrations = [
 	InitialMigration1588102412422,
@@ -67,6 +68,7 @@ const sqliteMigrations = [
 	AddStatusToExecutions1674138566000,
 	MigrateExecutionStatus1676996103000,
 	UpdateRunningExecutionStatus1677237073720,
+	CreateVariables1677501636752,
 	CreateExecutionMetadataTable1679416281777,
 ];
 

packages/cli/src/databases/repositories/index.ts

@@ -12,6 +12,7 @@ export { SharedCredentialsRepository } from './sharedCredentials.repository';
 export { SharedWorkflowRepository } from './sharedWorkflow.repository';
 export { TagRepository } from './tag.repository';
 export { UserRepository } from './user.repository';
+export { VariablesRepository } from './variables.repository';
 export { WebhookRepository } from './webhook.repository';
 export { WorkflowRepository } from './workflow.repository';
 export { WorkflowStatisticsRepository } from './workflowStatistics.repository';

packages/cli/src/databases/repositories/variables.repository.ts

@@ -0,0 +1,10 @@
+import { Service } from 'typedi';
+import { DataSource, Repository } from 'typeorm';
+import { Variables } from '../entities/Variables';
+
+@Service()
+export class VariablesRepository extends Repository<Variables> {
+	constructor(dataSource: DataSource) {
+		super(Variables, dataSource.manager);
+	}
+}

packages/cli/src/environments/enviromentHelpers.ts

@@ -0,0 +1,26 @@
+import { License } from '@/License';
+import Container from 'typedi';
+
+export function isVariablesEnabled(): boolean {
+	const license = Container.get(License);
+	return license.isVariablesEnabled();
+}
+
+export function canCreateNewVariable(variableCount: number): boolean {
+	if (!isVariablesEnabled()) {
+		return false;
+	}
+	const license = Container.get(License);
+	// This defaults to -1 which is what we want if we've enabled
+	// variables via the config
+	const limit = license.getVariablesLimit();
+	if (limit === -1) {
+		return true;
+	}
+	return limit > variableCount;
+}
+
+export function getVariablesLimit(): number {
+	const license = Container.get(License);
+	return license.getVariablesLimit();
+}

packages/cli/src/environments/variables.controller.ee.ts

@@ -0,0 +1,79 @@
+import express from 'express';
+import { LoggerProxy } from 'n8n-workflow';
+
+import * as ResponseHelper from '@/ResponseHelper';
+import type { VariablesRequest } from '@/requests';
+import {
+	VariablesLicenseError,
+	EEVariablesService,
+	VariablesValidationError,
+} from './variables.service.ee';
+import { isVariablesEnabled } from './enviromentHelpers';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const EEVariablesController = express.Router();
+
+/**
+ * Initialize Logger if needed
+ */
+EEVariablesController.use((req, res, next) => {
+	if (!isVariablesEnabled()) {
+		next('router');
+		return;
+	}
+
+	next();
+});
+
+EEVariablesController.post(
+	'/',
+	ResponseHelper.send(async (req: VariablesRequest.Create) => {
+		if (req.user.globalRole.name !== 'owner') {
+			LoggerProxy.info('Attempt to update a variable blocked due to lack of permissions', {
+				userId: req.user.id,
+			});
+			throw new ResponseHelper.AuthError('Unauthorized');
+		}
+		const variable = req.body;
+		delete variable.id;
+		try {
+			return await EEVariablesService.create(variable);
+		} catch (error) {
+			if (error instanceof VariablesLicenseError) {
+				throw new ResponseHelper.BadRequestError(error.message);
+			} else if (error instanceof VariablesValidationError) {
+				throw new ResponseHelper.BadRequestError(error.message);
+			}
+			throw error;
+		}
+	}),
+);
+
+EEVariablesController.patch(
+	'/:id(\\d+)',
+	ResponseHelper.send(async (req: VariablesRequest.Update) => {
+		const id = parseInt(req.params.id);
+		if (isNaN(id)) {
+			throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
+		}
+		if (req.user.globalRole.name !== 'owner') {
+			LoggerProxy.info('Attempt to update a variable blocked due to lack of permissions', {
+				id,
+				userId: req.user.id,
+			});
+			throw new ResponseHelper.AuthError('Unauthorized');
+		}
+		const variable = req.body;
+		delete variable.id;
+		try {
+			return await EEVariablesService.update(id, variable);
+		} catch (error) {
+			if (error instanceof VariablesLicenseError) {
+				throw new ResponseHelper.BadRequestError(error.message);
+			} else if (error instanceof VariablesValidationError) {
+				throw new ResponseHelper.BadRequestError(error.message);
+			}
+			throw error;
+		}
+	}),
+);

packages/cli/src/environments/variables.controller.ts

@@ -0,0 +1,82 @@
+import express from 'express';
+import { LoggerProxy } from 'n8n-workflow';
+
+import { getLogger } from '@/Logger';
+import * as ResponseHelper from '@/ResponseHelper';
+import type { VariablesRequest } from '@/requests';
+import { VariablesService } from './variables.service';
+import { EEVariablesController } from './variables.controller.ee';
+
+export const variablesController = express.Router();
+
+variablesController.use('/', EEVariablesController);
+
+/**
+ * Initialize Logger if needed
+ */
+variablesController.use((req, res, next) => {
+	try {
+		LoggerProxy.getInstance();
+	} catch (error) {
+		LoggerProxy.init(getLogger());
+	}
+	next();
+});
+
+variablesController.use(EEVariablesController);
+
+variablesController.get(
+	'/',
+	ResponseHelper.send(async () => {
+		return VariablesService.getAll();
+	}),
+);
+
+variablesController.post(
+	'/',
+	ResponseHelper.send(async () => {
+		throw new ResponseHelper.BadRequestError('No variables license found');
+	}),
+);
+
+variablesController.get(
+	'/:id(\\d+)',
+	ResponseHelper.send(async (req: VariablesRequest.Get) => {
+		const id = parseInt(req.params.id);
+		if (isNaN(id)) {
+			throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
+		}
+		const variable = await VariablesService.get(id);
+		if (variable === null) {
+			throw new ResponseHelper.NotFoundError(`Variable with id ${req.params.id} not found`);
+		}
+		return variable;
+	}),
+);
+
+variablesController.patch(
+	'/:id(\\d+)',
+	ResponseHelper.send(async () => {
+		throw new ResponseHelper.BadRequestError('No variables license found');
+	}),
+);
+
+variablesController.delete(
+	'/:id(\\d+)',
+	ResponseHelper.send(async (req: VariablesRequest.Delete) => {
+		const id = parseInt(req.params.id);
+		if (isNaN(id)) {
+			throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
+		}
+		if (req.user.globalRole.name !== 'owner') {
+			LoggerProxy.info('Attempt to delete a variable blocked due to lack of permissions', {
+				id,
+				userId: req.user.id,
+			});
+			throw new ResponseHelper.AuthError('Unauthorized');
+		}
+		await VariablesService.delete(id);
+
+		return true;
+	}),
+);

packages/cli/src/environments/variables.service.ee.ts

@@ -0,0 +1,45 @@
+import type { Variables } from '@/databases/entities/Variables';
+import { collections } from '@/Db';
+import { InternalHooks } from '@/InternalHooks';
+import Container from 'typedi';
+import { canCreateNewVariable } from './enviromentHelpers';
+import { VariablesService } from './variables.service';
+
+export class VariablesLicenseError extends Error {}
+export class VariablesValidationError extends Error {}
+
+export class EEVariablesService extends VariablesService {
+	static async getCount(): Promise<number> {
+		return collections.Variables.count();
+	}
+
+	static validateVariable(variable: Omit<Variables, 'id'>): void {
+		if (variable.key.length > 50) {
+			throw new VariablesValidationError('key cannot be longer than 50 characters');
+		}
+		if (variable.key.replace(/[A-Za-z0-9_]/g, '').length !== 0) {
+			throw new VariablesValidationError('key can only contain characters A-Za-z0-9_');
+		}
+		if (variable.value.length > 255) {
+			throw new VariablesValidationError('value cannot be longer than 255 characters');
+		}
+	}
+
+	static async create(variable: Omit<Variables, 'id'>): Promise<Variables> {
+		if (!canCreateNewVariable(await this.getCount())) {
+			throw new VariablesLicenseError('Variables limit reached');
+		}
+		this.validateVariable(variable);
+
+		void Container.get(InternalHooks).onVariableCreated({ variable_type: variable.type });
+		return collections.Variables.save(variable);
+	}
+
+	static async update(id: number, variable: Omit<Variables, 'id'>): Promise<Variables> {
+		this.validateVariable(variable);
+
+		await collections.Variables.update(id, variable);
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return (await this.get(id))!;
+	}
+}

packages/cli/src/environments/variables.service.ts

@@ -0,0 +1,20 @@
+import type { Variables } from '@/databases/entities/Variables';
+import { collections } from '@/Db';
+
+export class VariablesService {
+	static async getAll(): Promise<Variables[]> {
+		return collections.Variables.find();
+	}
+
+	static async getCount(): Promise<number> {
+		return collections.Variables.count();
+	}
+
+	static async get(id: number): Promise<Variables | null> {
+		return collections.Variables.findOne({ where: { id } });
+	}
+
+	static async delete(id: number): Promise<void> {
+		await collections.Variables.delete(id);
+	}
+}

packages/cli/src/requests.ts

@@ -16,6 +16,7 @@ import type { PublicUser, IExecutionDeleteFilter, IWorkflowDb } from '@/Interfac
 import type { Role } from '@db/entities/Role';
 import type { User } from '@db/entities/User';
 import type { UserManagementMailer } from '@/UserManagement/email';
+import type { Variables } from '@db/entities/Variables';
 
 export class UserUpdatePayload implements Pick<User, 'email' | 'firstName' | 'lastName'> {
 	@IsEmail()
@@ -386,3 +387,17 @@ export type BinaryDataRequest = AuthenticatedRequest<
 		mimeType?: string;
 	}
 >;
+
+// ----------------------------------
+//           /variables
+// ----------------------------------
+//
+export declare namespace VariablesRequest {
+	type CreateUpdatePayload = Omit<Variables, 'id'> & { id?: unknown };
+
+	type GetAll = AuthenticatedRequest;
+	type Get = AuthenticatedRequest<{ id: string }, {}, {}, {}>;
+	type Create = AuthenticatedRequest<{}, {}, CreateUpdatePayload, {}>;
+	type Update = AuthenticatedRequest<{ id: string }, {}, CreateUpdatePayload, {}>;
+	type Delete = Get;
+}

packages/cli/test/integration/shared/testDb.ts

@@ -489,6 +489,33 @@ export async function getWorkflowSharing(workflow: WorkflowEntity) {
 	});
 }
 
+// ----------------------------------
+//             variables
+// ----------------------------------
+
+export async function createVariable(key: string, value: string) {
+	return Db.collections.Variables.save({
+		key,
+		value,
+	});
+}
+
+export async function getVariableByKey(key: string) {
+	return Db.collections.Variables.findOne({
+		where: {
+			key,
+		},
+	});
+}
+
+export async function getVariableById(id: number) {
+	return Db.collections.Variables.findOne({
+		where: {
+			id,
+		},
+	});
+}
+
 // ----------------------------------
 //        connection options
 // ----------------------------------

packages/cli/test/integration/shared/types.d.ts

@@ -24,7 +24,8 @@ type EndpointGroup =
 	| 'ldap'
 	| 'saml'
 	| 'eventBus'
-	| 'license';
+	| 'license'
+	| 'variables';
 
 export type CredentialPayload = {
 	name: string;

packages/cli/test/integration/shared/utils.ts

@@ -73,6 +73,7 @@ import { v4 as uuid } from 'uuid';
 import { InternalHooks } from '@/InternalHooks';
 import { LoadNodesAndCredentials } from '@/LoadNodesAndCredentials';
 import { PostHogClient } from '@/posthog';
+import { variablesController } from '@/environments/variables.controller';
 import { LdapManager } from '@/Ldap/LdapManager.ee';
 import { handleLdapInit } from '@/Ldap/helpers';
 import { Push } from '@/push';
@@ -151,6 +152,7 @@ export async function initTestServer({
 			credentials: { controller: credentialsController, path: 'credentials' },
 			workflows: { controller: workflowsController, path: 'workflows' },
 			license: { controller: licenseController, path: 'license' },
+			variables: { controller: variablesController, path: 'variables' },
 		};
 
 		if (enablePublicAPI) {
@@ -268,7 +270,7 @@ const classifyEndpointGroups = (endpointGroups: EndpointGroup[]) => {
 	const routerEndpoints: EndpointGroup[] = [];
 	const functionEndpoints: EndpointGroup[] = [];
 
-	const ROUTER_GROUP = ['credentials', 'workflows', 'publicApi', 'license'];
+	const ROUTER_GROUP = ['credentials', 'workflows', 'publicApi', 'license', 'variables'];
 
 	endpointGroups.forEach((group) =>
 		(ROUTER_GROUP.includes(group) ? routerEndpoints : functionEndpoints).push(group),

packages/cli/test/integration/variables.test.ts

@@ -0,0 +1,379 @@
+import type { Application } from 'express';
+
+import type { User } from '@/databases/entities/User';
+import * as testDb from './shared/testDb';
+import * as utils from './shared/utils';
+
+import type { AuthAgent } from './shared/types';
+import type { ClassLike, MockedClass } from 'jest-mock';
+import { License } from '@/License';
+
+// mock that credentialsSharing is not enabled
+let app: Application;
+let ownerUser: User;
+let memberUser: User;
+let authAgent: AuthAgent;
+let variablesSpy: jest.SpyInstance<boolean>;
+let licenseLike = {
+	isVariablesEnabled: jest.fn().mockReturnValue(true),
+	getVariablesLimit: jest.fn().mockReturnValue(-1),
+};
+
+beforeAll(async () => {
+	app = await utils.initTestServer({ endpointGroups: ['variables'] });
+
+	utils.initConfigFile();
+	utils.mockInstance(License, licenseLike);
+
+	ownerUser = await testDb.createOwner();
+	memberUser = await testDb.createUser();
+
+	authAgent = utils.createAuthAgent(app);
+});
+
+beforeEach(async () => {
+	await testDb.truncate(['Variables']);
+	licenseLike.isVariablesEnabled.mockReturnValue(true);
+	licenseLike.getVariablesLimit.mockReturnValue(-1);
+});
+
+afterAll(async () => {
+	await testDb.terminate();
+});
+
+// ----------------------------------------
+// GET /variables - fetch all variables
+// ----------------------------------------
+
+test('GET /variables should return all variables for an owner', async () => {
+	await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+	]);
+
+	const response = await authAgent(ownerUser).get('/variables');
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data.length).toBe(2);
+});
+
+test('GET /variables should return all variables for a member', async () => {
+	await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+	]);
+
+	const response = await authAgent(memberUser).get('/variables');
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data.length).toBe(2);
+});
+
+// ----------------------------------------
+// GET /variables/:id - get a single variable
+// ----------------------------------------
+
+test('GET /variables/:id should return a single variable for an owner', async () => {
+	const [var1, var2] = await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+	]);
+
+	const response1 = await authAgent(ownerUser).get(`/variables/${var1.id}`);
+	expect(response1.statusCode).toBe(200);
+	expect(response1.body.data.key).toBe('test1');
+
+	const response2 = await authAgent(ownerUser).get(`/variables/${var2.id}`);
+	expect(response2.statusCode).toBe(200);
+	expect(response2.body.data.key).toBe('test2');
+});
+
+test('GET /variables/:id should return a single variable for a member', async () => {
+	const [var1, var2] = await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+	]);
+
+	const response1 = await authAgent(memberUser).get(`/variables/${var1.id}`);
+	expect(response1.statusCode).toBe(200);
+	expect(response1.body.data.key).toBe('test1');
+
+	const response2 = await authAgent(memberUser).get(`/variables/${var2.id}`);
+	expect(response2.statusCode).toBe(200);
+	expect(response2.body.data.key).toBe('test2');
+});
+
+// ----------------------------------------
+// POST /variables - create a new variable
+// ----------------------------------------
+
+test('POST /variables should create a new credential and return it for an owner', async () => {
+	const toCreate = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data.key).toBe(toCreate.key);
+	expect(response.body.data.value).toBe(toCreate.value);
+
+	const [byId, byKey] = await Promise.all([
+		testDb.getVariableById(response.body.data.id),
+		testDb.getVariableByKey(toCreate.key),
+	]);
+
+	expect(byId).not.toBeNull();
+	expect(byId!.key).toBe(toCreate.key);
+	expect(byId!.value).toBe(toCreate.value);
+
+	expect(byKey).not.toBeNull();
+	expect(byKey!.id).toBe(response.body.data.id);
+	expect(byKey!.value).toBe(toCreate.value);
+});
+
+test('POST /variables should not create a new credential and return it for a member', async () => {
+	const toCreate = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(memberUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(401);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+
+	const byKey = await testDb.getVariableByKey(toCreate.key);
+	expect(byKey).toBeNull();
+});
+
+test("POST /variables should not create a new credential and return it if the instance doesn't have a license", async () => {
+	licenseLike.isVariablesEnabled.mockReturnValue(false);
+	const toCreate = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(400);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+
+	const byKey = await testDb.getVariableByKey(toCreate.key);
+	expect(byKey).toBeNull();
+});
+
+test('POST /variables should fail to create a new credential and if one with the same key exists', async () => {
+	const toCreate = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	await testDb.createVariable(toCreate.key, toCreate.value);
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(500);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+});
+
+test('POST /variables should not fail if variable limit not reached', async () => {
+	licenseLike.getVariablesLimit.mockReturnValue(5);
+	let i = 1;
+	let toCreate = {
+		key: `create${i}`,
+		value: `createvalue${i}`,
+	};
+	while (i < 3) {
+		await testDb.createVariable(toCreate.key, toCreate.value);
+		i++;
+		toCreate = {
+			key: `create${i}`,
+			value: `createvalue${i}`,
+		};
+	}
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data?.key).toBe(toCreate.key);
+	expect(response.body.data?.value).toBe(toCreate.value);
+});
+
+test('POST /variables should fail if variable limit reached', async () => {
+	licenseLike.getVariablesLimit.mockReturnValue(5);
+	let i = 1;
+	let toCreate = {
+		key: `create${i}`,
+		value: `createvalue${i}`,
+	};
+	while (i < 6) {
+		await testDb.createVariable(toCreate.key, toCreate.value);
+		i++;
+		toCreate = {
+			key: `create${i}`,
+			value: `createvalue${i}`,
+		};
+	}
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(400);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+});
+
+test('POST /variables should fail if key too long', async () => {
+	const toCreate = {
+		// 51 'a's
+		key: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+		value: 'value',
+	};
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(400);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+});
+
+test('POST /variables should fail if value too long', async () => {
+	const toCreate = {
+		key: 'key',
+		// 256 'a's
+		value:
+			'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+	};
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(400);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+});
+
+test("POST /variables should fail if key contain's prohibited characters", async () => {
+	const toCreate = {
+		// 51 'a's
+		key: 'te$t',
+		value: 'value',
+	};
+	const response = await authAgent(ownerUser).post('/variables').send(toCreate);
+	expect(response.statusCode).toBe(400);
+	expect(response.body.data?.key).not.toBe(toCreate.key);
+	expect(response.body.data?.value).not.toBe(toCreate.value);
+});
+
+// ----------------------------------------
+// PATCH /variables/:id - change a variable
+// ----------------------------------------
+
+test('PATCH /variables/:id should modify existing credential if use is an owner', async () => {
+	const variable = await testDb.createVariable('test1', 'value1');
+	const toModify = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(ownerUser).patch(`/variables/${variable.id}`).send(toModify);
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data.key).toBe(toModify.key);
+	expect(response.body.data.value).toBe(toModify.value);
+
+	const [byId, byKey] = await Promise.all([
+		testDb.getVariableById(response.body.data.id),
+		testDb.getVariableByKey(toModify.key),
+	]);
+
+	expect(byId).not.toBeNull();
+	expect(byId!.key).toBe(toModify.key);
+	expect(byId!.value).toBe(toModify.value);
+
+	expect(byKey).not.toBeNull();
+	expect(byKey!.id).toBe(response.body.data.id);
+	expect(byKey!.value).toBe(toModify.value);
+});
+
+test('PATCH /variables/:id should modify existing credential if use is an owner', async () => {
+	const variable = await testDb.createVariable('test1', 'value1');
+	const toModify = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(ownerUser).patch(`/variables/${variable.id}`).send(toModify);
+	expect(response.statusCode).toBe(200);
+	expect(response.body.data.key).toBe(toModify.key);
+	expect(response.body.data.value).toBe(toModify.value);
+
+	const [byId, byKey] = await Promise.all([
+		testDb.getVariableById(response.body.data.id),
+		testDb.getVariableByKey(toModify.key),
+	]);
+
+	expect(byId).not.toBeNull();
+	expect(byId!.key).toBe(toModify.key);
+	expect(byId!.value).toBe(toModify.value);
+
+	expect(byKey).not.toBeNull();
+	expect(byKey!.id).toBe(response.body.data.id);
+	expect(byKey!.value).toBe(toModify.value);
+});
+
+test('PATCH /variables/:id should not modify existing credential if use is a member', async () => {
+	const variable = await testDb.createVariable('test1', 'value1');
+	const toModify = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const response = await authAgent(memberUser).patch(`/variables/${variable.id}`).send(toModify);
+	expect(response.statusCode).toBe(401);
+	expect(response.body.data?.key).not.toBe(toModify.key);
+	expect(response.body.data?.value).not.toBe(toModify.value);
+
+	const byId = await testDb.getVariableById(variable.id);
+	expect(byId).not.toBeNull();
+	expect(byId!.key).not.toBe(toModify.key);
+	expect(byId!.value).not.toBe(toModify.value);
+});
+
+test('PATCH /variables/:id should not modify existing credential if one with the same key exists', async () => {
+	const toModify = {
+		key: 'create1',
+		value: 'createvalue1',
+	};
+	const [var1, var2] = await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable(toModify.key, toModify.value),
+	]);
+	const response = await authAgent(ownerUser).patch(`/variables/${var1.id}`).send(toModify);
+	expect(response.statusCode).toBe(500);
+	expect(response.body.data?.key).not.toBe(toModify.key);
+	expect(response.body.data?.value).not.toBe(toModify.value);
+
+	const byId = await testDb.getVariableById(var1.id);
+	expect(byId).not.toBeNull();
+	expect(byId!.key).toBe(var1.key);
+	expect(byId!.value).toBe(var1.value);
+});
+
+// ----------------------------------------
+// DELETE /variables/:id - change a variable
+// ----------------------------------------
+
+test('DELETE /variables/:id should delete a single credential for an owner', async () => {
+	const [var1, var2, var3] = await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+		testDb.createVariable('test3', 'value3'),
+	]);
+
+	const delResponse = await authAgent(ownerUser).delete(`/variables/${var1.id}`);
+	expect(delResponse.statusCode).toBe(200);
+
+	const byId = await testDb.getVariableById(var1.id);
+	expect(byId).toBeNull();
+
+	const getResponse = await authAgent(ownerUser).get('/variables');
+	expect(getResponse.body.data.length).toBe(2);
+});
+
+test('DELETE /variables/:id should not delete a single credential for a member', async () => {
+	const [var1, var2, var3] = await Promise.all([
+		testDb.createVariable('test1', 'value1'),
+		testDb.createVariable('test2', 'value2'),
+		testDb.createVariable('test3', 'value3'),
+	]);
+
+	const delResponse = await authAgent(memberUser).delete(`/variables/${var1.id}`);
+	expect(delResponse.statusCode).toBe(401);
+
+	const byId = await testDb.getVariableById(var1.id);
+	expect(byId).not.toBeNull();
+
+	const getResponse = await authAgent(memberUser).get('/variables');
+	expect(getResponse.body.data.length).toBe(3);
+});

packages/cli/test/unit/ActiveWorkflowRunner.test.ts

@@ -121,6 +121,9 @@ jest.mock('@/Db', () => {
 				clear: jest.fn(),
 				delete: jest.fn(),
 			},
+			Variables: {
+				find: jest.fn(() => []),
+			},
 		},
 	};
 });

packages/core/src/NodeExecuteFunctions.ts

@@ -1686,6 +1686,7 @@ export function getAdditionalKeys(
 				  }
 				: undefined,
 		},
+		$vars: additionalData.variables,
 
 		// deprecated
 		$executionId: executionId,

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -1,10 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, useCssModule } from 'vue';
-import {
+import { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
-	DatatableColumn,
-	DatatableRow,
-	DatatableRowDataType,
-} from '@/components/N8nDatatable/mixins';
 import { getValueByPath } from '../../utils';
 import { useI18n } from '../../composables';
 import N8nSelect from '../N8nSelect';
@@ -18,6 +14,7 @@ export default defineComponent({
 		N8nOption,
 		N8nPagination,
 	},
+	emits: ['update:currentPage', 'update:rowsPerPage'],
 	props: {
 		columns: {
 			type: Array as PropType<DatatableColumn[]>,
@@ -27,25 +24,31 @@ export default defineComponent({
 			type: Array as PropType<DatatableRow[]>,
 			required: true,
 		},
+		currentPage: {
+			type: Number,
+			default: 1,
+		},
 		pagination: {
 			type: Boolean,
 			default: true,
 		},
 		rowsPerPage: {
-			type: Number,
+			type: [Number, String] as PropType<number | '*'>,
 			default: 10,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const { t } = useI18n();
 		const rowsPerPageOptions = ref([10, 25, 50, 100]);
 
 		const style = useCssModule();
-		const currentPage = ref(1);
-		const currentRowsPerPage = ref(props.rowsPerPage);
 
 		const totalPages = computed(() => {
-			return Math.ceil(props.rows.length / currentRowsPerPage.value);
+			if (props.rowsPerPage === '*') {
+				return 1;
+			}
+
+			return Math.ceil(props.rows.length / props.rowsPerPage);
 		});
 
 		const totalRows = computed(() => {
@@ -53,8 +56,12 @@ export default defineComponent({
 		});
 
 		const visibleRows = computed(() => {
-			const start = (currentPage.value - 1) * currentRowsPerPage.value;
+			if (props.rowsPerPage === '*') {
-			const end = start + currentRowsPerPage.value;
+				return props.rows;
+			}
+
+			const start = (props.currentPage - 1) * props.rowsPerPage;
+			const end = start + props.rowsPerPage;
 
 			return props.rows.slice(start, end);
 		});
@@ -65,18 +72,17 @@ export default defineComponent({
 				[style.datatableWrapper]: true,
 			};
 		});
-		function getTrClass() {
+
-			return {
+		function onUpdateCurrentPage(value: number) {
-				[style.datatableRow]: true,
+			emit('update:currentPage', value);
-			};
 		}
 
-		function onRowsPerPageChange(value: number) {
+		function onRowsPerPageChange(value: number | '*') {
-			currentRowsPerPage.value = value;
+			emit('update:rowsPerPage', value);
 
-			const maxPage = Math.ceil(totalRows.value / currentRowsPerPage.value);
+			const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
-			if (maxPage < currentPage.value) {
+			if (maxPage < props.currentPage) {
-				currentPage.value = maxPage;
+				onUpdateCurrentPage(maxPage);
 			}
 		}
 
@@ -84,17 +90,22 @@ export default defineComponent({
 			return getValueByPath<DatatableRowDataType>(row, column.path);
 		}
 
+		function getThStyle(column: DatatableColumn) {
+			return {
+				...(column.width ? { width: column.width } : {}),
+			};
+		}
+
 		return {
 			t,
 			classes,
-			currentPage,
 			totalPages,
 			totalRows,
 			visibleRows,
-			currentRowsPerPage,
 			rowsPerPageOptions,
 			getTdValue,
-			getTrClass,
+			getThStyle,
+			onUpdateCurrentPage,
 			onRowsPerPageChange,
 		};
 	},
@@ -106,18 +117,27 @@ export default defineComponent({
 		<table :class="$style.datatable">
 			<thead :class="$style.datatableHeader">
 				<tr>
-					<th v-for="column in columns" :key="column.id">
+					<th
+						v-for="column in columns"
+						:key="column.id"
+						:class="column.classes"
+						:style="getThStyle(column)"
+					>
 						{{ column.label }}
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass()">
+				<template v-for="row in visibleRows">
-					<td v-for="column in columns" :key="column.id">
+					<slot name="row" :columns="columns" :row="row" :getTdValue="getTdValue">
+						<tr :key="row.id">
+							<td v-for="column in columns" :key="column.id" :class="column.classes">
 								<component v-if="column.render" :is="column.render" :row="row" :column="column" />
 								<span v-else>{{ getTdValue(row, column) }}</span>
 							</td>
 						</tr>
+					</slot>
+				</template>
 			</tbody>
 		</table>
 
@@ -125,23 +145,29 @@ export default defineComponent({
 			<n8n-pagination
 				v-if="totalPages > 1"
 				background
-				:current-page.sync="currentPage"
 				:pager-count="5"
-				:page-size="currentRowsPerPage"
+				:page-size="rowsPerPage"
 				layout="prev, pager, next"
 				:total="totalRows"
+				:currentPage="currentPage"
+				@update:currentPage="onUpdateCurrentPage"
 			/>
 
 			<div :class="$style.pageSizeSelector">
 				<n8n-select
 					size="mini"
-					:value="currentRowsPerPage"
+					:value="rowsPerPage"
 					@input="onRowsPerPageChange"
 					popper-append-to-body
 				>
 					<template #prepend>{{ t('datatable.pageSize') }}</template>
-					<n8n-option v-for="size in rowsPerPageOptions" :key="size" :label="size" :value="size" />
+					<n8n-option
-					<n8n-option :label="`All`" :value="totalRows"> </n8n-option>
+						v-for="size in rowsPerPageOptions"
+						:key="size"
+						:label="`${size}`"
+						:value="size"
+					/>
+					<n8n-option :label="`All`" value="*"> </n8n-option>
 				</n8n-select>
 			</div>
 		</div>
@@ -156,19 +182,11 @@ export default defineComponent({
 
 .datatable {
 	width: 100%;
-}
 
-.datatableHeader {
+	tbody {
-	background: var(--color-background-base);
+		tr {
-
-	th {
-		text-align: left;
-		padding: var(--spacing-s) var(--spacing-2xs);
-	}
-}
-
-.datatableRow {
 			td {
+				vertical-align: top;
 				color: var(--color-text-base);
 				padding: var(--spacing-s) var(--spacing-2xs);
 			}
@@ -181,6 +199,17 @@ export default defineComponent({
 				background: var(--color-background-light);
 			}
 		}
+	}
+}
+
+.datatableHeader {
+	background: var(--color-background-base);
+
+	th {
+		text-align: left;
+		padding: var(--spacing-s) var(--spacing-2xs);
+	}
+}
 
 .pagination {
 	width: 100%;
@@ -188,7 +217,7 @@ export default defineComponent({
 	justify-content: center;
 	align-items: center;
 	bottom: 0;
-	overflow: auto;
+	overflow: visible;
 	margin-top: var(--spacing-s);
 }
 

packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts

@@ -6,18 +6,58 @@ const stubs = ['n8n-select', 'n8n-option', 'n8n-button', 'n8n-pagination'];
 
 describe('components', () => {
 	describe('N8nDatatable', () => {
+		const rowsPerPage = 10;
+
 		it('should render correctly', () => {
 			const wrapper = render(N8nDatatable, {
 				propsData: {
 					columns,
 					rows,
+					rowsPerPage,
 				},
 				stubs,
 			});
 
-			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(10);
 			expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
+			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(rowsPerPage);
+			expect(wrapper.container.querySelectorAll('tbody tr td').length).toEqual(
+				columns.length * rowsPerPage,
+			);
 			expect(wrapper.html()).toMatchSnapshot();
 		});
+
+		it('should add column classes', () => {
+			const wrapper = render(N8nDatatable, {
+				propsData: {
+					columns: columns.map((column) => ({ ...column, classes: ['example'] })),
+					rows,
+					rowsPerPage,
+				},
+				stubs,
+			});
+
+			expect(wrapper.container.querySelectorAll('.example').length).toEqual(
+				columns.length * (rowsPerPage + 1),
+			);
+		});
+
+		it('should render row slot', () => {
+			const wrapper = render(N8nDatatable, {
+				propsData: {
+					columns,
+					rows,
+					rowsPerPage,
+				},
+				stubs,
+				scopedSlots: {
+					row: '<main><td v-for="column in props.columns" :key="column.id">Row slot</td></main>', // Wrapper is necessary for looping
+				},
+			});
+
+			expect(wrapper.container.querySelectorAll('tbody td').length).toEqual(
+				columns.length * rowsPerPage,
+			);
+			expect(wrapper.container.querySelector('tbody td')?.textContent).toEqual('Row slot');
+		});
 	});
 });

packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap

@@ -12,70 +12,70 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
       </tr>
     </thead>
     <tbody>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>1</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 1</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>2</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 2</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>3</span></td>
         <td><span>Dinesh Chugtai</span></td>
         <td><span>31</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 3</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>4</span></td>
         <td><span>Jared Dunn </span></td>
         <td><span>38</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 4</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>5</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 5</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>6</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 6</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>7</span></td>
         <td><span>Dinesh Chugtai</span></td>
         <td><span>31</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 7</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>8</span></td>
         <td><span>Jared Dunn </span></td>
         <td><span>38</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 8</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>9</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 9</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>10</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
@@ -92,7 +92,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
         <n8n-option-stub value=\\"25\\" label=\\"25\\"></n8n-option-stub>
         <n8n-option-stub value=\\"50\\" label=\\"50\\"></n8n-option-stub>
         <n8n-option-stub value=\\"100\\" label=\\"100\\"></n8n-option-stub>
-        <n8n-option-stub value=\\"15\\" label=\\"All\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"*\\" label=\\"All\\"></n8n-option-stub>
       </n8n-select-stub>
     </div>
   </div>

packages/design-system/src/components/N8nDatatable/__tests__/data.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, PropType } from 'vue';
-import { DatatableRow } from '../mixins';
+import { DatatableRow } from '../../../types';
 import N8nButton from '../../N8nButton';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -212,7 +212,15 @@ function onEnter(event: Event) {
 const validationError = computed<string | null>(() => {
 	const error = getInputValidationError();
 
-	return error ? t(error.messageKey, error.options) : null;
+	if (error) {
+		if (error.messageKey) {
+			return t(error.messageKey, error.options);
+		} else {
+			return error.message;
+		}
+	}
+
+	return null;
 });
 
 const hasDefaultSlot = computed(() => !!slots.default);

packages/design-system/src/components/N8nFormInput/validators.ts

@@ -93,6 +93,19 @@ export const containsUpperCaseValidator: IValidator<{ minimum: number }> = {
 	},
 };
 
+export const matchRegex: IValidator<{ regex: RegExp; message: string }> = {
+	validate: (value: Validatable, config: { regex: RegExp; message: string }) => {
+		if (!config.regex.test(`${value as string}`)) {
+			return {
+				message: config.message,
+				options: config,
+			};
+		}
+
+		return false;
+	},
+};
+
 export const defaultPasswordRules: RuleGroup = {
 	rules: [
 		{
@@ -117,6 +130,7 @@ export const VALIDATORS = {
 	VALID_EMAIL: emailValidator,
 	CONTAINS_UPPERCASE: containsUpperCaseValidator,
 	DEFAULT_PASSWORD_RULES: defaultPasswordRules,
+	MATCH_REGEX: matchRegex,
 };
 
 export const getValidationError = <T extends Validatable, C>(

packages/design-system/src/components/N8nPagination/Pagination.vue

@@ -1,22 +1,20 @@
 <script lang="ts">
+import { DefineComponent, defineComponent } from 'vue';
 import { Pagination as ElPagination } from 'element-ui';
 
-export default {
+export default defineComponent({
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+	props: (ElPagination as unknown as DefineComponent).props,
-	props: (ElPagination as any).props,
 	components: {
 		ElPagination,
 	},
-};
+});
 </script>
 
 <template>
-	<div>
 	<el-pagination
 		background
 		layout="prev, pager, next"
 		v-bind="[$props, $attrs]"
 		v-on="$listeners"
 	/>
-	</div>
 </template>

packages/design-system/src/plugins/n8nComponents.ts

@@ -10,8 +10,10 @@ import N8nButton from '../components/N8nButton';
 import { N8nElButton } from '../components/N8nButton/overrides';
 import N8nCallout from '../components/N8nCallout';
 import N8nCard from '../components/N8nCard';
+import N8nDatatable from '../components/N8nDatatable';
 import N8nFormBox from '../components/N8nFormBox';
 import N8nFormInputs from '../components/N8nFormInputs';
+import N8nFormInput from '../components/N8nFormInput';
 import N8nHeading from '../components/N8nHeading';
 import N8nIcon from '../components/N8nIcon';
 import N8nIconButton from '../components/N8nIconButton';
@@ -61,8 +63,10 @@ const n8nComponentsPlugin: PluginObject<{}> = {
 		app.component('el-button', N8nElButton);
 		app.component('n8n-callout', N8nCallout);
 		app.component('n8n-card', N8nCard);
+		app.component('n8n-datatable', N8nDatatable);
 		app.component('n8n-form-box', N8nFormBox);
 		app.component('n8n-form-inputs', N8nFormInputs);
+		app.component('n8n-form-input', N8nFormInput);
 		app.component('n8n-icon', N8nIcon);
 		app.component('n8n-icon-button', N8nIconButton);
 		app.component('n8n-info-tip', N8nInfoTip);

packages/design-system/src/types/datatable.ts

@@ -12,5 +12,7 @@ export interface DatatableColumn {
 	id: string | number;
 	path: string;
 	label: string;
-	render: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
+	classes?: string[];
+	width?: string;
+	render?: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
 }

packages/design-system/src/types/form.ts

@@ -11,7 +11,7 @@ export type IValidator<T = unknown> = {
 	validate: (
 		value: Validatable,
 		config: T,
-	) => false | { messageKey: string; options?: unknown } | null;
+	) => false | { messageKey: string; message?: string; options?: unknown } | null;
 };
 
 export type FormState = {

packages/design-system/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
+export * from './datatable';
 export * from './form';
 export * from './menu';
 export * from './router';

packages/editor-ui/package.json

@@ -47,6 +47,7 @@
     "canvas-confetti": "^1.6.0",
     "codemirror-lang-html-n8n": "^1.0.0",
     "codemirror-lang-n8n-expression": "^0.2.0",
+    "copy-to-clipboard": "^3.3.3",
     "dateformat": "^3.0.3",
     "esprima-next": "5.8.4",
     "fast-json-stable-stringify": "^2.1.0",

packages/editor-ui/src/Interface.ts

@@ -1470,6 +1470,16 @@ export type NodeAuthenticationOption = {
 	displayOptions?: IDisplayOptions;
 };
 
+export interface EnvironmentVariable {
+	id: number;
+	key: string;
+	value: string;
+}
+
+export interface TemporaryEnvironmentVariable extends Omit<EnvironmentVariable, 'id'> {
+	id: string;
+}
+
 export type ExecutionFilterMetadata = {
 	key: string;
 	value: string;

packages/editor-ui/src/__tests__/server/endpoints/index.ts

@@ -1,12 +1,16 @@
+import { Server } from 'miragejs';
 import { routesForUsers } from './user';
 import { routesForCredentials } from './credential';
-import { Server } from 'miragejs';
+import { routesForCredentialTypes } from './credentialType';
-import { routesForCredentialTypes } from '@/__tests__/server/endpoints/credentialType';
+import { routesForVariables } from './variable';
+import { routesForSettings } from './settings';
 
 const endpoints: Array<(server: Server) => void> = [
 	routesForCredentials,
 	routesForCredentialTypes,
 	routesForUsers,
+	routesForVariables,
+	routesForSettings,
 ];
 
 export { endpoints };

packages/editor-ui/src/__tests__/server/endpoints/settings.ts

@@ -0,0 +1,75 @@
+import { Response, Server } from 'miragejs';
+import { AppSchema } from '../types';
+import { IN8nUISettings, ISettingsState } from '@/Interface';
+
+const defaultSettings: IN8nUISettings = {
+	allowedModules: {},
+	communityNodesEnabled: false,
+	defaultLocale: '',
+	endpointWebhook: '',
+	endpointWebhookTest: '',
+	enterprise: {
+		variables: true,
+	},
+	executionMode: '',
+	executionTimeout: 0,
+	hideUsagePage: false,
+	hiringBannerEnabled: false,
+	instanceId: '',
+	isNpmAvailable: false,
+	license: { environment: 'development' },
+	logLevel: 'info',
+	maxExecutionTimeout: 0,
+	oauthCallbackUrls: { oauth1: '', oauth2: '' },
+	onboardingCallPromptEnabled: false,
+	personalizationSurveyEnabled: false,
+	posthog: {
+		apiHost: '',
+		apiKey: '',
+		autocapture: false,
+		debug: false,
+		disableSessionRecording: false,
+		enabled: false,
+	},
+	publicApi: { enabled: false, latestVersion: 0, path: '', swaggerUi: { enabled: false } },
+	pushBackend: 'websocket',
+	saveDataErrorExecution: '',
+	saveDataSuccessExecution: '',
+	saveManualExecutions: false,
+	sso: {
+		ldap: { loginEnabled: false, loginLabel: '' },
+		saml: { loginEnabled: false, loginLabel: '' },
+	},
+	telemetry: {
+		enabled: false,
+	},
+	templates: { enabled: false, host: '' },
+	timezone: '',
+	urlBaseEditor: '',
+	urlBaseWebhook: '',
+	userManagement: {
+		enabled: true,
+		showSetupOnFirstLoad: true,
+		smtpSetup: true,
+	},
+	versionCli: '',
+	versionNotifications: {
+		enabled: true,
+		endpoint: '',
+		infoUrl: '',
+	},
+	workflowCallerPolicyDefaultOption: 'any',
+	workflowTagsDisabled: false,
+};
+
+export function routesForSettings(server: Server) {
+	server.get('/rest/settings', (schema: AppSchema) => {
+		return new Response(
+			200,
+			{},
+			{
+				data: defaultSettings,
+			},
+		);
+	});
+}

packages/editor-ui/src/__tests__/server/endpoints/user.ts

@@ -7,4 +7,12 @@ export function routesForUsers(server: Server) {
 
 		return new Response(200, {}, { data });
 	});
+
+	server.get('/rest/login', (schema: AppSchema) => {
+		const model = schema.findBy('user', {
+			isDefaultUser: true,
+		});
+
+		return new Response(200, {}, { data: model?.attrs });
+	});
 }

packages/editor-ui/src/__tests__/server/endpoints/variable.ts

@@ -0,0 +1,41 @@
+import { Request, Response, Server } from 'miragejs';
+import { AppSchema } from '../types';
+import { jsonParse } from 'n8n-workflow';
+import { EnvironmentVariable } from '@/Interface';
+
+export function routesForVariables(server: Server) {
+	server.get('/rest/variables', (schema: AppSchema) => {
+		const { models: data } = schema.all('variable');
+
+		return new Response(200, {}, { data });
+	});
+
+	server.post('/rest/variables', (schema: AppSchema, request: Request) => {
+		const data = schema.create('variable', jsonParse(request.requestBody));
+
+		return new Response(200, {}, { data });
+	});
+
+	server.patch('/rest/variables/:id', (schema: AppSchema, request: Request) => {
+		const data: EnvironmentVariable = jsonParse(request.requestBody);
+		const id = request.params.id;
+
+		const model = schema.find('variable', id);
+		if (model) {
+			model.update(data);
+		}
+
+		return new Response(200, {}, { data: model?.attrs });
+	});
+
+	server.delete('/rest/variables/:id', (schema: AppSchema, request: Request) => {
+		const id = request.params.id;
+
+		const model = schema.find('variable', id);
+		if (model) {
+			model.destroy();
+		}
+
+		return new Response(200, {}, {});
+	});
+}

packages/editor-ui/src/__tests__/server/factories/index.ts

@@ -1,13 +1,16 @@
 import { userFactory } from './user';
 import { credentialFactory } from './credential';
 import { credentialTypeFactory } from './credentialType';
+import { variableFactory } from './variable';
 
 export * from './user';
 export * from './credential';
 export * from './credentialType';
+export * from './variable';
 
 export const factories = {
 	credential: credentialFactory,
 	credentialType: credentialTypeFactory,
 	user: userFactory,
+	variable: variableFactory,
 };

packages/editor-ui/src/__tests__/server/factories/variable.ts

@@ -0,0 +1,15 @@
+import { Factory } from 'miragejs';
+import { faker } from '@faker-js/faker';
+import type { EnvironmentVariable } from '@/Interface';
+
+export const variableFactory = Factory.extend<EnvironmentVariable>({
+	id(i: number) {
+		return i;
+	},
+	key() {
+		return `${faker.lorem.word()}`.toUpperCase();
+	},
+	value() {
+		return faker.internet.password(10);
+	},
+});

packages/editor-ui/src/__tests__/server/index.ts

@@ -10,6 +10,8 @@ export function setupServer() {
 		seeds(server) {
 			server.createList('credentialType', 8);
 			server.create('user', {
+				firstName: 'Nathan',
+				lastName: 'Doe',
 				isDefaultUser: true,
 			});
 		},

packages/editor-ui/src/__tests__/server/models/index.ts

@@ -1,9 +1,11 @@
 import { UserModel } from './user';
 import { CredentialModel } from './credential';
 import { CredentialTypeModel } from './credentialType';
+import { VariableModel } from './variable';
 
 export const models = {
 	credential: CredentialModel,
 	credentialType: CredentialTypeModel,
 	user: UserModel,
+	variable: VariableModel,
 };

packages/editor-ui/src/__tests__/server/models/variable.ts

@@ -0,0 +1,5 @@
+import { EnvironmentVariable } from '@/Interface';
+import { Model } from 'miragejs';
+import type { ModelDefinition } from 'miragejs/-types';
+
+export const VariableModel: ModelDefinition<EnvironmentVariable> = Model.extend({});

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

@@ -0,0 +1,40 @@
+import { EnvironmentVariable, IRestApiContext } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
+import { IDataObject } from 'n8n-workflow';
+
+export async function getVariables(context: IRestApiContext): Promise<EnvironmentVariable[]> {
+	return await makeRestApiRequest(context, 'GET', '/variables');
+}
+
+export async function getVariable(
+	context: IRestApiContext,
+	{ id }: { id: EnvironmentVariable['id'] },
+): Promise<EnvironmentVariable> {
+	return await makeRestApiRequest(context, 'GET', `/variables/${id}`);
+}
+
+export async function createVariable(
+	context: IRestApiContext,
+	data: Omit<EnvironmentVariable, 'id'>,
+) {
+	return await makeRestApiRequest(context, 'POST', '/variables', data as unknown as IDataObject);
+}
+
+export async function updateVariable(
+	context: IRestApiContext,
+	{ id, ...data }: EnvironmentVariable,
+) {
+	return await makeRestApiRequest(
+		context,
+		'PATCH',
+		`/variables/${id}`,
+		data as unknown as IDataObject,
+	);
+}
+
+export async function deleteVariable(
+	context: IRestApiContext,
+	{ id }: { id: EnvironmentVariable['id'] },
+) {
+	return await makeRestApiRequest(context, 'DELETE', `/variables/${id}`);
+}

packages/editor-ui/src/components/CodeEdit.vue

@@ -135,6 +135,7 @@ export default mixins(genericHelpers, workflowHelpers).extend({
 					'$mode',
 					'$parameter',
 					'$resumeWebhookUrl',
+					'$vars',
 					'$workflow',
 					'$now',
 					'$today',

packages/editor-ui/src/components/CodeNodeEditor/completer.ts

@@ -13,6 +13,7 @@ import { luxonCompletions } from './completions/luxon.completions';
 import { itemIndexCompletions } from './completions/itemIndex.completions';
 import { itemFieldCompletions } from './completions/itemField.completions';
 import { jsonFieldCompletions } from './completions/jsonField.completions';
+import { variablesCompletions } from './completions/variables.completions';
 
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
@@ -24,6 +25,7 @@ export const completerExtension = mixins(
 	requireCompletions,
 	executionCompletions,
 	workflowCompletions,
+	variablesCompletions,
 	prevNodeCompletions,
 	luxonCompletions,
 	itemIndexCompletions,
@@ -49,6 +51,7 @@ export const completerExtension = mixins(
 					this.nodeSelectorCompletions,
 					this.prevNodeCompletions,
 					this.workflowCompletions,
+					this.variablesCompletions,
 					this.executionCompletions,
 
 					// luxon
@@ -167,6 +170,7 @@ export const completerExtension = mixins(
 				// core
 
 				if (value === '$execution') return this.executionCompletions(context, variable);
+				if (value === '$vars') return this.variablesCompletions(context, variable);
 				if (value === '$workflow') return this.workflowCompletions(context, variable);
 				if (value === '$prevNode') return this.prevNodeCompletions(context, variable);
 

packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts

@@ -67,6 +67,10 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 					label: '$workflow',
 					info: this.$locale.baseText('codeNodeEditor.completer.$workflow'),
 				},
+				{
+					label: '$vars',
+					info: this.$locale.baseText('codeNodeEditor.completer.$vars'),
+				},
 				{
 					label: '$now',
 					info: this.$locale.baseText('codeNodeEditor.completer.$now'),

packages/editor-ui/src/components/CodeNodeEditor/completions/variables.completions.ts

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import { addVarType } from '../utils';
+import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type { CodeNodeEditorMixin } from '../types';
+import { useEnvironmentsStore } from '@/stores';
+
+const escape = (str: string) => str.replace('$', '\\$');
+
+export const variablesCompletions = (Vue as CodeNodeEditorMixin).extend({
+	methods: {
+		/**
+		 * Complete `$workflow.` to `.id .name .active`.
+		 */
+		variablesCompletions(context: CompletionContext, matcher = '$vars'): CompletionResult | null {
+			const pattern = new RegExp(`${escape(matcher)}\..*`);
+
+			const preCursor = context.matchBefore(pattern);
+
+			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
+
+			const environmentsStore = useEnvironmentsStore();
+			const options: Completion[] = environmentsStore.variables.map((variable) => ({
+				label: `${matcher}.${variable.key}`,
+				info: variable.value,
+			}));
+
+			return {
+				from: preCursor.from,
+				options: options.map(addVarType),
+			};
+		},
+	},
+});

packages/editor-ui/src/components/MainSidebar.vue

@@ -226,6 +226,14 @@ export default mixins(
 					position: 'top',
 					activateOnRouteNames: [VIEWS.CREDENTIALS],
 				},
+				{
+					id: 'variables',
+					icon: 'variable',
+					label: this.$locale.baseText('mainSidebar.variables'),
+					customIconSize: 'medium',
+					position: 'top',
+					activateOnRouteNames: [VIEWS.VARIABLES],
+				},
 				{
 					id: 'executions',
 					icon: 'tasks',
@@ -374,6 +382,12 @@ export default mixins(
 					}
 					break;
 				}
+				case 'variables': {
+					if (this.$router.currentRoute.name !== VIEWS.VARIABLES) {
+						this.goToRoute({ name: VIEWS.VARIABLES });
+					}
+					break;
+				}
 				case 'executions': {
 					if (this.$router.currentRoute.name !== VIEWS.EXECUTIONS) {
 						this.goToRoute({ name: VIEWS.EXECUTIONS });

packages/editor-ui/src/components/VariablesRow.vue

@@ -0,0 +1,272 @@
+<script lang="ts" setup>
+import { ComponentPublicInstance, computed, nextTick, onMounted, PropType, ref, watch } from 'vue';
+import { EnvironmentVariable, IValidator, Rule, RuleGroup, Validatable } from '@/Interface';
+import { useI18n, useToast, useCopyToClipboard } from '@/composables';
+import { EnterpriseEditionFeature } from '@/constants';
+import { useSettingsStore, useUsersStore } from '@/stores';
+import { getVariablesPermissions } from '@/permissions';
+
+const i18n = useI18n();
+const copyToClipboard = useCopyToClipboard();
+const { showMessage } = useToast();
+const settingsStore = useSettingsStore();
+const usersStore = useUsersStore();
+
+const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<EnvironmentVariable>,
+		default: () => ({}),
+	},
+	editing: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const permissions = getVariablesPermissions(usersStore.currentUser);
+const modelValue = ref<EnvironmentVariable>({ ...props.data });
+
+const formValidationStatus = ref<Record<string, boolean>>({
+	key: false,
+	value: false,
+});
+const formValid = computed(() => {
+	return formValidationStatus.value.key && formValidationStatus.value.value;
+});
+
+const keyInputRef = ref<ComponentPublicInstance & { inputRef?: HTMLElement }>();
+const valueInputRef = ref<HTMLElement>();
+
+const usage = ref(`$vars.${props.data.key}`);
+
+const isFeatureEnabled = computed(() =>
+	settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
+);
+
+const showActions = computed(
+	() => isFeatureEnabled.value && (permissions.edit || permissions.delete),
+);
+
+onMounted(() => {
+	focusFirstInput();
+});
+
+const keyValidationRules: Array<Rule | RuleGroup> = [
+	{ name: 'REQUIRED' },
+	{ name: 'MAX_LENGTH', config: { maximum: 50 } },
+	{
+		name: 'MATCH_REGEX',
+		config: {
+			regex: /^[a-zA-Z]/,
+			message: i18n.baseText('variables.editing.key.error.startsWithLetter'),
+		},
+	},
+	{
+		name: 'MATCH_REGEX',
+		config: {
+			regex: /^[a-zA-Z][a-zA-Z0-9_]*$/,
+			message: i18n.baseText('variables.editing.key.error.jsonKey'),
+		},
+	},
+];
+
+const valueValidationRules: Array<Rule | RuleGroup> = [
+	{ name: 'MAX_LENGTH', config: { maximum: 220 } },
+];
+
+watch(
+	() => modelValue.value.key,
+	() => {
+		nextTick(() => {
+			if (formValidationStatus.value.key) {
+				updateUsageSyntax();
+			}
+		});
+	},
+);
+
+function updateUsageSyntax() {
+	usage.value = `$vars.${modelValue.value.key || props.data.key}`;
+}
+
+async function onCancel() {
+	modelValue.value = { ...props.data };
+	emit('cancel', modelValue.value);
+}
+
+async function onSave() {
+	emit('save', modelValue.value);
+}
+
+async function onEdit() {
+	emit('edit', modelValue.value);
+
+	await nextTick();
+
+	focusFirstInput();
+}
+
+async function onDelete() {
+	emit('delete', modelValue.value);
+}
+
+function onValidate(key: string, value: boolean) {
+	formValidationStatus.value[key] = value;
+}
+
+function onUsageClick() {
+	copyToClipboard(usage.value);
+	showMessage({
+		title: i18n.baseText('variables.row.usage.copiedToClipboard'),
+		type: 'success',
+	});
+}
+
+function focusFirstInput() {
+	keyInputRef.value?.inputRef?.focus?.();
+}
+</script>
+
+<template>
+	<tr :class="$style.variablesRow">
+		<td class="variables-key-column">
+			<div>
+				<span v-if="!editing">{{ data.key }}</span>
+				<n8n-form-input
+					v-else
+					label
+					name="key"
+					data-test-id="variable-row-key-input"
+					:placeholder="i18n.baseText('variables.editing.key.placeholder')"
+					required
+					validateOnBlur
+					:validationRules="keyValidationRules"
+					v-model="modelValue.key"
+					ref="keyInputRef"
+					@validate="(value) => onValidate('key', value)"
+				/>
+			</div>
+		</td>
+		<td class="variables-value-column">
+			<div>
+				<span v-if="!editing">{{ data.value }}</span>
+				<n8n-form-input
+					v-else
+					label
+					name="value"
+					data-test-id="variable-row-value-input"
+					:placeholder="i18n.baseText('variables.editing.value.placeholder')"
+					validateOnBlur
+					:validationRules="valueValidationRules"
+					v-model="modelValue.value"
+					ref="valueInputRef"
+					@validate="(value) => onValidate('value', value)"
+				/>
+			</div>
+		</td>
+		<td class="variables-usage-column">
+			<div>
+				<n8n-tooltip placement="top">
+					<span v-if="modelValue.key && usage" :class="$style.usageSyntax" @click="onUsageClick">{{
+						usage
+					}}</span>
+					<template #content>
+						{{ i18n.baseText('variables.row.usage.copyToClipboard') }}
+					</template>
+				</n8n-tooltip>
+			</div>
+		</td>
+		<td v-if="isFeatureEnabled">
+			<div v-if="editing" :class="$style.buttons">
+				<n8n-button
+					data-test-id="variable-row-cancel-button"
+					type="tertiary"
+					class="mr-xs"
+					@click="onCancel"
+				>
+					{{ i18n.baseText('variables.row.button.cancel') }}
+				</n8n-button>
+				<n8n-button
+					data-test-id="variable-row-save-button"
+					:disabled="!formValid"
+					type="primary"
+					@click="onSave"
+				>
+					{{ i18n.baseText('variables.row.button.save') }}
+				</n8n-button>
+			</div>
+			<div v-else :class="[$style.buttons, $style.hoverButtons]">
+				<n8n-tooltip :disabled="permissions.edit" placement="top">
+					<div>
+						<n8n-button
+							data-test-id="variable-row-edit-button"
+							type="tertiary"
+							class="mr-xs"
+							:disabled="!permissions.edit"
+							@click="onEdit"
+						>
+							{{ i18n.baseText('variables.row.button.edit') }}
+						</n8n-button>
+					</div>
+					<template #content>
+						{{ i18n.baseText('variables.row.button.edit.onlyOwnerCanSave') }}
+					</template>
+				</n8n-tooltip>
+				<n8n-tooltip :disabled="permissions.delete" placement="top">
+					<div>
+						<n8n-button
+							data-test-id="variable-row-delete-button"
+							type="tertiary"
+							:disabled="!permissions.delete"
+							@click="onDelete"
+						>
+							{{ i18n.baseText('variables.row.button.delete') }}
+						</n8n-button>
+					</div>
+					<template #content>
+						{{ i18n.baseText('variables.row.button.delete.onlyOwnerCanDelete') }}
+					</template>
+				</n8n-tooltip>
+			</div>
+		</td>
+	</tr>
+</template>
+
+<style lang="scss" module>
+.variablesRow {
+	&:hover {
+		.hoverButtons {
+			opacity: 1;
+		}
+	}
+
+	td {
+		> div {
+			display: flex;
+			align-items: center;
+			min-height: 40px;
+		}
+	}
+}
+
+.buttons {
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: flex-end;
+}
+
+.hoverButtons {
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.usageSyntax {
+	cursor: pointer;
+	background: var(--color-success-tint-2);
+	color: var(--color-success);
+	font-family: var(--font-family-monospace);
+	font-size: var(--font-size-s);
+}
+</style>

packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts

@@ -0,0 +1,98 @@
+import VariablesRow from '../VariablesRow.vue';
+import { EnvironmentVariable } from '@/Interface';
+import { fireEvent, render } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { setupServer } from '@/__tests__/server';
+import { afterAll, beforeAll } from 'vitest';
+import { useSettingsStore, useUsersStore } from '@/stores';
+
+describe('VariablesRow', () => {
+	let server: ReturnType<typeof setupServer>;
+
+	beforeAll(() => {
+		server = setupServer();
+	});
+
+	beforeEach(async () => {
+		setActivePinia(createPinia());
+
+		await useSettingsStore().getSettings();
+		await useUsersStore().loginWithCookie();
+	});
+
+	afterAll(() => {
+		server.shutdown();
+	});
+
+	const stubs = ['n8n-tooltip'];
+
+	const environmentVariable: EnvironmentVariable = {
+		id: 1,
+		key: 'key',
+		value: 'value',
+	};
+
+	it('should render correctly', () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+			},
+			stubs,
+		});
+
+		expect(wrapper.html()).toMatchSnapshot();
+		expect(wrapper.container.querySelectorAll('td')).toHaveLength(4);
+	});
+
+	it('should show edit and delete buttons on hover', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-edit-button')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-delete-button')).toBeVisible();
+	});
+
+	it('should show key and value inputs in edit mode', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+				editing: true,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-key-input')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-key-input').querySelector('input')).toHaveValue(
+			environmentVariable.key,
+		);
+		expect(wrapper.getByTestId('variable-row-value-input')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-value-input').querySelector('input')).toHaveValue(
+			environmentVariable.value,
+		);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('should show cancel and save buttons in edit mode', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+				editing: true,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-cancel-button')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-save-button')).toBeVisible();
+	});
+});

packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1
+
+exports[`VariablesRow > should render correctly 1`] = `
+"<tr class=\\"variablesRow\\">
+  <td class=\\"variables-key-column\\">
+    <div><span>key</span></div>
+  </td>
+  <td class=\\"variables-value-column\\">
+    <div><span>value</span></div>
+  </td>
+  <td class=\\"variables-usage-column\\">
+    <div>
+      <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"usageSyntax\\">$vars.key</span></n8n-tooltip-stub>
+    </div>
+  </td>
+  <td>
+    <div class=\\"buttons hoverButtons\\">
+      <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\">
+        <div><button disabled=\\"disabled\\" aria-disabled=\\"true\\" aria-live=\\"polite\\" class=\\"mr-xs button button tertiary medium disabled\\" data-test-id=\\"variable-row-edit-button\\">
+            <!----><span> Edit </span></button></div>
+      </n8n-tooltip-stub>
+      <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\">
+        <div><button disabled=\\"disabled\\" aria-disabled=\\"true\\" aria-live=\\"polite\\" class=\\"button button tertiary medium disabled\\" data-test-id=\\"variable-row-delete-button\\">
+            <!----><span> Delete </span></button></div>
+      </n8n-tooltip-stub>
+    </div>
+  </td>
+</tr>"
+`;
+
+exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
+"<tr class=\\"variablesRow\\">
+  <td class=\\"variables-key-column\\">
+    <div>
+      <div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">
+        <!---->
+        <div class=\\"\\">
+          <div class=\\"el-input el-input--large n8n-input\\">
+            <!----><input type=\\"text\\" autocomplete=\\"off\\" name=\\"key\\" placeholder=\\"Enter a name\\" class=\\"el-input__inner\\">
+            <!---->
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </td>
+  <td class=\\"variables-value-column\\">
+    <div>
+      <div class=\\"container\\" data-test-id=\\"variable-row-value-input\\">
+        <!---->
+        <div class=\\"\\">
+          <div class=\\"el-input el-input--large n8n-input\\">
+            <!----><input type=\\"text\\" autocomplete=\\"off\\" name=\\"value\\" placeholder=\\"Enter a value\\" class=\\"el-input__inner\\">
+            <!---->
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </td>
+  <td class=\\"variables-usage-column\\">
+    <div>
+      <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"usageSyntax\\">$vars.key</span></n8n-tooltip-stub>
+    </div>
+  </td>
+  <td>
+    <div class=\\"buttons\\"><button aria-live=\\"polite\\" class=\\"mr-xs button button tertiary medium\\" data-test-id=\\"variable-row-cancel-button\\">
+        <!----><span> Cancel </span></button><button aria-live=\\"polite\\" class=\\"button button primary medium\\" data-test-id=\\"variable-row-save-button\\">
+        <!----><span> Save </span></button></div>
+  </td>
+</tr>"
+`;

packages/editor-ui/src/components/layouts/PageViewLayoutList.vue

@@ -1,5 +1,18 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		overflow: {
+			type: Boolean,
+			default: false,
+		},
+	},
+});
+</script>
+
 <template>
-	<div :class="$style.wrapper">
+	<div :class="{ [$style.wrapper]: true, [$style.overflow]: overflow }">
 		<div :class="$style.list">
 			<div v-if="$slots.header" :class="$style.header">
 				<slot name="header" />
@@ -18,6 +31,14 @@
 	height: 100%;
 }
 
+.overflow {
+	.list {
+		.body {
+			overflow: auto;
+		}
+	}
+}
+
 .list {
 	display: flex;
 	flex-direction: column;

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -8,14 +8,17 @@
 			</div>
 
 			<div class="mt-xs mb-l">
+				<slot name="add-button">
 					<n8n-button
 						size="large"
 						block
+						:disabled="disabled"
 						@click="$emit('click:add', $event)"
 						data-test-id="resources-list-add"
 					>
 						{{ $locale.baseText(`${resourceKey}.add`) }}
 					</n8n-button>
+				</slot>
 			</div>
 
 			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
@@ -55,7 +58,7 @@
 					/>
 				</slot>
 			</div>
-			<page-view-layout-list v-else>
+			<page-view-layout-list :overflow="type !== 'list'" v-else>
 				<template #header>
 					<div class="mb-xs">
 						<div :class="$style['filters-row']">
@@ -75,23 +78,14 @@
 							<div :class="$style['sort-and-filter']">
 								<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
 									<n8n-option
-										value="lastUpdated"
+										v-for="sortOption in sortOptions"
-										:label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"
+										:key="sortOption"
-									/>
+										:value="sortOption"
-									<n8n-option
+										:label="$locale.baseText(`${resourceKey}.sort.${sortOption}`)"
-										value="lastCreated"
-										:label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"
-									/>
-									<n8n-option
-										value="nameAsc"
-										:label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"
-									/>
-									<n8n-option
-										value="nameDesc"
-										:label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"
 									/>
 								</n8n-select>
 								<resource-filters-dropdown
+									v-if="showFiltersDropdown"
 									:keys="filterKeys"
 									:reset="resetFilters"
 									:value="filters"
@@ -121,18 +115,41 @@
 					<div class="pb-xs" />
 				</template>
 
-				<n8n-recycle-scroller
+				<slot name="preamble" />
+
+				<div
 					v-if="filteredAndSortedSubviewResources.length > 0"
+					:class="$style.listWrapper"
+					ref="listWrapperRef"
+				>
+					<n8n-recycle-scroller
+						v-if="type === 'list'"
 						data-test-id="resources-list"
 						:class="[$style.list, 'list-style-none']"
 						:items="filteredAndSortedSubviewResources"
-					:item-size="itemSize"
+						:item-size="typeProps.itemSize"
 						item-key="id"
 					>
 						<template #default="{ item, updateItemSize }">
 							<slot :data="item" :updateItemSize="updateItemSize" />
 						</template>
 					</n8n-recycle-scroller>
+					<n8n-datatable
+						v-if="typeProps.columns"
+						data-test-id="resources-table"
+						:class="$style.datatable"
+						:columns="typeProps.columns"
+						:rows="filteredAndSortedSubviewResources"
+						:currentPage="currentPage"
+						:rowsPerPage="rowsPerPage"
+						@update:currentPage="setCurrentPage"
+						@update:rowsPerPage="setRowsPerPage"
+					>
+						<template #row="{ columns, row }">
+							<slot :data="row" :columns="columns" />
+						</template>
+					</n8n-datatable>
+				</div>
 
 				<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
 					{{ $locale.baseText(`${resourceKey}.noResults`) }}
@@ -156,6 +173,8 @@
 						</span>
 					</template>
 				</n8n-text>
+
+				<slot name="postamble" />
 			</page-view-layout-list>
 		</template>
 	</page-view-layout>
@@ -177,6 +196,7 @@ import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
+import { DatatableColumn } from 'n8n-design-system';
 
 export interface IResource {
 	id: string;
@@ -213,13 +233,17 @@ export default mixins(showMessage, debounceHelper).extend({
 			type: String,
 			default: '' as IResourceKeyType,
 		},
+		displayName: {
+			type: Function as PropType<(resource: IResource) => string>,
+			default: (resource: IResource) => resource.name,
+		},
 		resources: {
 			type: Array,
 			default: (): IResource[] => [],
 		},
-		itemSize: {
+		disabled: {
-			type: Number,
+			type: Boolean,
-			default: 80,
+			default: false,
 		},
 		initialize: {
 			type: Function as PropType<() => Promise<void>>,
@@ -240,13 +264,37 @@ export default mixins(showMessage, debounceHelper).extend({
 			type: Boolean,
 			default: true,
 		},
+		showFiltersDropdown: {
+			type: Boolean,
+			default: true,
+		},
+		sortFns: {
+			type: Object as PropType<Record<string, (a: IResource, b: IResource) => number>>,
+			default: (): Record<string, (a: IResource, b: IResource) => number> => ({}),
+		},
+		sortOptions: {
+			type: Array as PropType<string[]>,
+			default: () => ['lastUpdated', 'lastCreated', 'nameAsc', 'nameDesc'],
+		},
+		type: {
+			type: String as PropType<'datatable' | 'list'>,
+			default: 'list',
+		},
+		typeProps: {
+			type: Object as PropType<{ itemSize: number } | { columns: DatatableColumn[] }>,
+			default: () => ({
+				itemSize: 0,
+			}),
+		},
 	},
 	data() {
 		return {
 			loading: true,
 			isOwnerSubview: false,
-			sortBy: 'lastUpdated',
+			sortBy: this.sortOptions[0],
 			hasFilters: false,
+			currentPage: 1,
+			rowsPerPage: 10 as number | '*',
 			resettingFilters: false,
 			EnterpriseEditionFeature,
 		};
@@ -292,7 +340,7 @@ export default mixins(showMessage, debounceHelper).extend({
 				if (this.filters.search) {
 					const searchString = this.filters.search.toLowerCase();
 
-					matches = matches && resource.name.toLowerCase().includes(searchString);
+					matches = matches && this.displayName(resource).toLowerCase().includes(searchString);
 				}
 
 				if (this.additionalFiltersHandler) {
@@ -305,15 +353,23 @@ export default mixins(showMessage, debounceHelper).extend({
 			return filtered.sort((a, b) => {
 				switch (this.sortBy) {
 					case 'lastUpdated':
-						return new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
+						return this.sortFns['lastUpdated']
+							? this.sortFns['lastUpdated'](a, b)
+							: new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
 					case 'lastCreated':
-						return new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
+						return this.sortFns['lastCreated']
+							? this.sortFns['lastCreated'](a, b)
+							: new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
 					case 'nameAsc':
-						return a.name.trim().localeCompare(b.name.trim());
+						return this.sortFns['nameAsc']
+							? this.sortFns['nameAsc'](a, b)
+							: this.displayName(a).trim().localeCompare(this.displayName(b).trim());
 					case 'nameDesc':
-						return b.name.localeCompare(a.name);
+						return this.sortFns['nameDesc']
+							? this.sortFns['nameDesc'](a, b)
+							: this.displayName(b).trim().localeCompare(this.displayName(a).trim());
 					default:
-						return 0;
+						return this.sortFns[this.sortBy] ? this.sortFns[this.sortBy](a, b) : 0;
 				}
 			});
 		},
@@ -333,6 +389,12 @@ export default mixins(showMessage, debounceHelper).extend({
 			this.loading = false;
 			this.$nextTick(this.focusSearchInput);
 		},
+		setCurrentPage(page: number) {
+			this.currentPage = page;
+		},
+		setRowsPerPage(rowsPerPage: number | '*') {
+			this.rowsPerPage = rowsPerPage;
+		},
 		resetFilters() {
 			Object.keys(this.filters).forEach((key) => {
 				this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
@@ -418,7 +480,8 @@ export default mixins(showMessage, debounceHelper).extend({
 		'filters.search'() {
 			this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
 		},
-		sortBy() {
+		sortBy(newValue) {
+			this.$emit('sort', newValue);
 			this.sendSortingTelemetry();
 		},
 	},
@@ -446,6 +509,10 @@ export default mixins(showMessage, debounceHelper).extend({
 	//flex-direction: column;
 }
 
+.listWrapper {
+	height: 100%;
+}
+
 .sort-and-filter {
 	display: flex;
 	flex-direction: row;
@@ -460,4 +527,8 @@ export default mixins(showMessage, debounceHelper).extend({
 .card-loading {
 	height: 69px;
 }
+
+.datatable {
+	padding-bottom: var(--spacing-s);
+}
 </style>

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

@@ -0,0 +1,8 @@
+export * from './useCopyToClipboard';
+export * from './useExternalHooks';
+export * from './useGlobalLinkActions';
+export * from './useI18n';
+export * from './useMessage';
+export * from './useTelemetry';
+export * from './useToast';
+export * from './useUpgradeLink';

packages/editor-ui/src/composables/useCopyToClipboard.ts

@@ -0,0 +1,5 @@
+import copyToClipboard from 'copy-to-clipboard';
+
+export function useCopyToClipboard(): (text: string) => void {
+	return copyToClipboard;
+}

packages/editor-ui/src/composables/useExternalHooks.ts

@@ -0,0 +1,12 @@
+import { IExternalHooks } from '@/Interface';
+import { IDataObject } from 'n8n-workflow';
+import { useWebhooksStore } from '@/stores';
+import { runExternalHook } from '@/mixins/externalHooks';
+
+export function useExternalHooks(): IExternalHooks {
+	return {
+		async run(eventName: string, metadata?: IDataObject): Promise<void> {
+			return await runExternalHook.call(this, eventName, useWebhooksStore(), metadata);
+		},
+	};
+}

packages/editor-ui/src/composables/useI18n.ts

@@ -0,0 +1,5 @@
+import { i18n } from '@/plugins/i18n';
+
+export function useI18n() {
+	return i18n;
+}

packages/editor-ui/src/composables/useMessage.ts

@@ -0,0 +1,65 @@
+import type { ElMessageBoxOptions } from 'element-ui/types/message-box';
+import { Message, MessageBox } from 'element-ui';
+
+export function useMessage() {
+	async function alert(
+		message: string,
+		configOrTitle: string | ElMessageBoxOptions | undefined,
+		config: ElMessageBoxOptions | undefined,
+	) {
+		const resolvedConfig = {
+			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			cancelButtonClass: 'btn--cancel',
+			confirmButtonClass: 'btn--confirm',
+		};
+
+		if (typeof configOrTitle === 'string') {
+			return await MessageBox.alert(message, configOrTitle, resolvedConfig);
+		}
+		return await MessageBox.alert(message, resolvedConfig);
+	}
+
+	async function confirm(
+		message: string,
+		configOrTitle: string | ElMessageBoxOptions | undefined,
+		config: ElMessageBoxOptions | undefined,
+	) {
+		const resolvedConfig = {
+			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			cancelButtonClass: 'btn--cancel',
+			confirmButtonClass: 'btn--confirm',
+			distinguishCancelAndClose: true,
+			showClose: config?.showClose || false,
+			closeOnClickModal: false,
+		};
+
+		if (typeof configOrTitle === 'string') {
+			return await MessageBox.confirm(message, configOrTitle, resolvedConfig);
+		}
+		return await MessageBox.confirm(message, resolvedConfig);
+	}
+
+	async function prompt(
+		message: string,
+		configOrTitle: string | ElMessageBoxOptions | undefined,
+		config: ElMessageBoxOptions | undefined,
+	) {
+		const resolvedConfig = {
+			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			cancelButtonClass: 'btn--cancel',
+			confirmButtonClass: 'btn--confirm',
+		};
+
+		if (typeof configOrTitle === 'string') {
+			return await MessageBox.prompt(message, configOrTitle, resolvedConfig);
+		}
+		return await MessageBox.prompt(message, resolvedConfig);
+	}
+
+	return {
+		alert,
+		confirm,
+		prompt,
+		message: Message,
+	};
+}

packages/editor-ui/src/composables/useTelemetry.ts

@@ -0,0 +1,5 @@
+import { Telemetry, telemetry } from '@/plugins/telemetry';
+
+export function useTelemetry(): Telemetry {
+	return telemetry;
+}

packages/editor-ui/src/composables/useToast.ts

@@ -0,0 +1,142 @@
+import { Notification } from 'element-ui';
+import type { ElNotificationComponent, ElNotificationOptions } from 'element-ui/types/notification';
+import type { MessageType } from 'element-ui/types/message';
+import { sanitizeHtml } from '@/utils';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useWorkflowsStore } from '@/stores';
+import { useI18n } from './useI18n';
+import { useExternalHooks } from './useExternalHooks';
+
+const messageDefaults: Partial<Omit<ElNotificationOptions, 'message'>> = {
+	dangerouslyUseHTMLString: true,
+	position: 'bottom-right',
+};
+
+const stickyNotificationQueue: ElNotificationComponent[] = [];
+
+export function useToast() {
+	const telemetry = useTelemetry();
+	const workflowsStore = useWorkflowsStore();
+	const externalHooks = useExternalHooks();
+	const i18n = useI18n();
+
+	function showMessage(
+		messageData: Omit<ElNotificationOptions, 'message'> & { message?: string },
+		track = true,
+	) {
+		messageData = { ...messageDefaults, ...messageData };
+		messageData.message = messageData.message
+			? sanitizeHtml(messageData.message)
+			: messageData.message;
+
+		const notification = Notification(messageData as ElNotificationOptions);
+
+		if (messageData.duration === 0) {
+			stickyNotificationQueue.push(notification);
+		}
+
+		if (messageData.type === 'error' && track) {
+			telemetry.track('Instance FE emitted error', {
+				error_title: messageData.title,
+				error_message: messageData.message,
+				workflow_id: workflowsStore.workflowId,
+			});
+		}
+
+		return notification;
+	}
+
+	function showToast(config: {
+		title: string;
+		message: string;
+		onClick?: () => void;
+		onClose?: () => void;
+		duration?: number;
+		customClass?: string;
+		closeOnClick?: boolean;
+		type?: MessageType;
+	}) {
+		// eslint-disable-next-line prefer-const
+		let notification: ElNotificationComponent;
+		if (config.closeOnClick) {
+			const cb = config.onClick;
+			config.onClick = () => {
+				if (notification) {
+					notification.close();
+				}
+
+				if (cb) {
+					cb();
+				}
+			};
+		}
+
+		notification = showMessage({
+			title: config.title,
+			message: config.message,
+			onClick: config.onClick,
+			onClose: config.onClose,
+			duration: config.duration,
+			customClass: config.customClass,
+			type: config.type,
+		});
+
+		return notification;
+	}
+
+	function collapsableDetails({ description, node }: Error) {
+		if (!description) return '';
+
+		const errorDescription =
+			description.length > 500 ? `${description.slice(0, 500)}...` : description;
+
+		return `
+				<br>
+				<br>
+				<details>
+					<summary
+						style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
+					>
+						${i18n.baseText('showMessage.showDetails')}
+					</summary>
+					<p>${node.name}: ${errorDescription}</p>
+				</details>
+			`;
+	}
+
+	function showError(e: Error | unknown, title: string, message?: string) {
+		const error = e as Error;
+		const messageLine = message ? `${message}<br/>` : '';
+		showMessage(
+			{
+				title,
+				message: `
+					${messageLine}
+					<i>${error.message}</i>
+					${collapsableDetails(error)}`,
+				type: 'error',
+				duration: 0,
+			},
+			false,
+		);
+
+		externalHooks.run('showMessage.showError', {
+			title,
+			message,
+			errorMessage: error.message,
+		});
+
+		telemetry.track('Instance FE emitted error', {
+			error_title: title,
+			error_description: message,
+			error_message: error.message,
+			workflow_id: workflowsStore.workflowId,
+		});
+	}
+
+	return {
+		showMessage,
+		showToast,
+		showError,
+	};
+}

packages/editor-ui/src/composables/useUpgradeLink.ts

@@ -0,0 +1,25 @@
+import { BaseTextKey } from '@/plugins/i18n';
+import { useUIStore, useUsageStore } from '@/stores';
+import { useI18n } from '@/composables';
+import { computed } from 'vue';
+
+export function useUpgradeLink(queryParams = { default: '', desktop: '' }) {
+	const uiStore = useUIStore();
+	const usageStore = useUsageStore();
+	const i18n = useI18n();
+
+	const upgradeLinkUrl = computed(() => {
+		const linkUrlTranslationKey = uiStore.contextBasedTranslationKeys.upgradeLinkUrl as BaseTextKey;
+		let url = i18n.baseText(linkUrlTranslationKey);
+
+		if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
+			url = `${usageStore.viewPlansUrl}${queryParams.default}`;
+		} else if (linkUrlTranslationKey.endsWith('.desktop')) {
+			url = `${url}${queryParams.desktop}`;
+		}
+
+		return url;
+	});
+
+	return { upgradeLinkUrl };
+}

packages/editor-ui/src/constants.ts

@@ -371,6 +371,7 @@ export enum VIEWS {
 	TEMPLATE = 'TemplatesWorkflowView',
 	TEMPLATES = 'TemplatesSearchView',
 	CREDENTIALS = 'CredentialsView',
+	VARIABLES = 'VariablesView',
 	NEW_WORKFLOW = 'NodeViewNew',
 	WORKFLOW = 'NodeViewExisting',
 	DEMO = 'WorkflowDemo',
@@ -434,6 +435,7 @@ export const MAPPING_PARAMS = [
 	'$resumeWebhookUrl',
 	'$runIndex',
 	'$today',
+	'$vars',
 	'$workflow',
 ];
 
@@ -457,6 +459,7 @@ export enum EnterpriseEditionFeature {
 	Sharing = 'sharing',
 	Ldap = 'ldap',
 	LogStreaming = 'logStreaming',
+	Variables = 'variables',
 	Saml = 'saml',
 }
 export const MAIN_NODE_PANEL_WIDTH = 360;

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -65,6 +65,7 @@ import { useWorkflowsEEStore } from '@/stores/workflows.ee';
 import { useUsersStore } from '@/stores/users';
 import { getWorkflowPermissions, IPermissions } from '@/permissions';
 import { ICredentialsResponse } from '@/Interface';
+import { useEnvironmentsStore } from '@/stores';
 
 let cachedWorkflowKey: string | null = '';
 let cachedWorkflow: Workflow | null = null;
@@ -150,6 +151,7 @@ export function resolveParameter(
 			mode: 'test',
 			resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 		},
+		$vars: useEnvironmentsStore().variablesAsObject,
 
 		// deprecated
 		$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,

packages/editor-ui/src/permissions.ts

@@ -4,7 +4,13 @@
  * @usage getCredentialPermissions(user, credential).isOwner;
  */
 
-import { IUser, ICredentialsResponse, IRootState, IWorkflowDb } from '@/Interface';
+import {
+	IUser,
+	ICredentialsResponse,
+	IRootState,
+	IWorkflowDb,
+	EnvironmentVariable,
+} from '@/Interface';
 import { EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
 import { useSettingsStore } from './stores/settings';
 
@@ -130,3 +136,23 @@ export const getWorkflowPermissions = (user: IUser | null, workflow: IWorkflowDb
 
 	return parsePermissionsTable(user, table);
 };
+
+export const getVariablesPermissions = (user: IUser | null) => {
+	const table: IPermissionsTable = [
+		{
+			name: 'create',
+			test: [UserRole.InstanceOwner],
+		},
+		{
+			name: 'edit',
+			test: [UserRole.InstanceOwner],
+		},
+		{
+			name: 'delete',
+			test: [UserRole.InstanceOwner],
+		},
+		{ name: 'use', test: () => true },
+	];
+
+	return parsePermissionsTable(user, table);
+};

packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts

@@ -20,6 +20,7 @@ import { NativeDoc } from 'n8n-workflow/src/Extensions/Extensions';
 import { isFunctionOption } from './typeGuards';
 import { luxonInstanceDocs } from './nativesAutocompleteDocs/luxon.instance.docs';
 import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
+import { useEnvironmentsStore } from '@/stores';
 
 /**
  * Resolution-based completions offered according to datatype.
@@ -31,7 +32,8 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 
 	if (word.from === word.to && !context.explicit) return null;
 
-	const [base, tail] = splitBaseTail(word.text);
+	// eslint-disable-next-line prefer-const
+	let [base, tail] = splitBaseTail(word.text);
 
 	let options: Completion[] = [];
 
@@ -39,6 +41,8 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 		options = luxonStaticOptions().map(stripExcessParens(context));
 	} else if (base === 'Object') {
 		options = objectGlobalOptions().map(stripExcessParens(context));
+	} else if (base === '$vars') {
+		options = variablesOptions();
 	} else {
 		let resolved: Resolved;
 
@@ -331,6 +335,22 @@ function ensureKeyCanBeResolved(obj: IDataObject, key: string) {
 	}
 }
 
+export const variablesOptions = () => {
+	const environmentsStore = useEnvironmentsStore();
+	const variables = environmentsStore.variables;
+
+	return variables.map((variable) =>
+		createCompletionOption('Object', variable.key, 'keyword', {
+			doc: {
+				name: variable.key,
+				returnType: 'string',
+				description: i18n.baseText('codeNodeEditor.completer.$vars.varName'),
+				docURL: 'https://docs.n8n.io/environments/variables/',
+			},
+		}),
+	);
+};
+
 /**
  * Methods and fields defined on a Luxon `DateTime` class instance.
  */

packages/editor-ui/src/plugins/components.ts

@@ -7,10 +7,10 @@ import VueAgile from 'vue-agile';
 import 'regenerator-runtime/runtime';
 
 import ElementUI from 'element-ui';
-import { Loading, MessageBox, Message, Notification } from 'element-ui';
+import { Loading, MessageBox, Notification } from 'element-ui';
 import { designSystemComponents } from 'n8n-design-system';
-import { ElMessageBoxOptions } from 'element-ui/types/message-box';
 import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
+import { useMessage } from '@/composables/useMessage';
 
 Vue.use(Fragment.Plugin);
 Vue.use(VueAgile);
@@ -25,62 +25,11 @@ Vue.use(Loading.directive);
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 
-Vue.prototype.$alert = async (
+const messageService = useMessage();
-	message: string,
-	configOrTitle: string | ElMessageBoxOptions | undefined,
-	config: ElMessageBoxOptions | undefined,
-) => {
-	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
-	temp = {
-		...temp,
-		cancelButtonClass: 'btn--cancel',
-		confirmButtonClass: 'btn--confirm',
-	};
 
-	if (typeof configOrTitle === 'string') {
+Vue.prototype.$alert = messageService.alert;
-		return await MessageBox.alert(message, configOrTitle, temp);
+Vue.prototype.$confirm = messageService.confirm;
-	}
+Vue.prototype.$prompt = messageService.prompt;
-	return await MessageBox.alert(message, temp);
+Vue.prototype.$message = messageService.message;
-};
-
-Vue.prototype.$confirm = async (
-	message: string,
-	configOrTitle: string | ElMessageBoxOptions | undefined,
-	config: ElMessageBoxOptions | undefined,
-) => {
-	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
-	temp = {
-		...temp,
-		cancelButtonClass: 'btn--cancel',
-		confirmButtonClass: 'btn--confirm',
-		distinguishCancelAndClose: true,
-		showClose: config.showClose || false,
-		closeOnClickModal: false,
-	};
-
-	if (typeof configOrTitle === 'string') {
-		return await MessageBox.confirm(message, configOrTitle, temp);
-	}
-	return await MessageBox.confirm(message, temp);
-};
-
-Vue.prototype.$prompt = async (
-	message: string,
-	configOrTitle: string | ElMessageBoxOptions | undefined,
-	config: ElMessageBoxOptions | undefined,
-) => {
-	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
-	temp = {
-		...temp,
-		cancelButtonClass: 'btn--cancel',
-		confirmButtonClass: 'btn--confirm',
-	};
-
-	if (typeof configOrTitle === 'string') {
-		return await MessageBox.prompt(message, configOrTitle, temp);
-	}
-	return await MessageBox.prompt(message, temp);
-};
 
 Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;

packages/editor-ui/src/plugins/i18n/index.ts

@@ -341,6 +341,7 @@ export class I18nClass {
 		$min: this.baseText('codeNodeEditor.completer.$min'),
 		$runIndex: this.baseText('codeNodeEditor.completer.$runIndex'),
 		$today: this.baseText('codeNodeEditor.completer.$today'),
+		$vars: this.baseText('codeNodeEditor.completer.$vars'),
 		$workflow: this.baseText('codeNodeEditor.completer.$workflow'),
 	};
 

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

@@ -142,6 +142,8 @@
 	"codeNodeEditor.completer.$prevNode.runIndex": "The run of the node providing input data to the current one",
 	"codeNodeEditor.completer.$runIndex": "The index of the current run of this node",
 	"codeNodeEditor.completer.$today": "A timestamp representing the current day (at midnight, as a Luxon object)",
+	"codeNodeEditor.completer.$vars": "The variables defined in your instance",
+	"codeNodeEditor.completer.$vars.varName": "Variable set on this n8n instance. All variables evaluate to strings.",
 	"codeNodeEditor.completer.$workflow": "Information about the workflow",
 	"codeNodeEditor.completer.$workflow.active": "Whether the workflow is active or not (boolean)",
 	"codeNodeEditor.completer.$workflow.id": "The ID of the workflow",
@@ -595,6 +597,7 @@
 	"mainSidebar.confirmMessage.workflowDelete.headline": "Delete Workflow?",
 	"mainSidebar.confirmMessage.workflowDelete.message": "Are you sure that you want to delete '{workflowName}'?",
 	"mainSidebar.credentials": "Credentials",
+	"mainSidebar.variables": "Variables",
 	"mainSidebar.help": "Help",
 	"mainSidebar.helpMenuItems.course": "Course",
 	"mainSidebar.helpMenuItems.documentation": "Documentation",
@@ -1601,6 +1604,39 @@
 	"importParameter.showError.invalidProtocol1.title": "Use the {node} node",
 	"importParameter.showError.invalidProtocol2.title": "Invalid Protocol",
 	"importParameter.showError.invalidProtocol.message": "The HTTP node doesn’t support {protocol} requests",
+	"variables.heading": "Variables",
+	"variables.add": "Add Variable",
+	"variables.add.unavailable": "Upgrade plan to keep using variables",
+	"variables.add.onlyOwnerCanCreate": "Only owner can create variables",
+	"variables.empty.heading": "{name}, let's set up a variable",
+	"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.noResults": "No variables found",
+	"variables.sort.nameAsc": "Sort by name (A-Z)",
+	"variables.sort.nameDesc": "Sort by name (Z-A)",
+	"variables.table.key": "Key",
+	"variables.table.value": "Value",
+	"variables.table.usage": "Usage Syntax",
+	"variables.editing.key.placeholder": "Enter a name",
+	"variables.editing.value.placeholder": "Enter a value",
+	"variables.editing.key.error.startsWithLetter": "This field may only start with a letter",
+	"variables.editing.key.error.jsonKey": "This field may contain only letters, numbers, and underscores",
+	"variables.row.button.save": "Save",
+	"variables.row.button.cancel": "Cancel",
+	"variables.row.button.edit": "Edit",
+	"variables.row.button.edit.onlyOwnerCanSave": "Only owner can edit variables",
+	"variables.row.button.delete": "Delete",
+	"variables.row.button.delete.onlyOwnerCanDelete": "Only owner can delete variables",
+	"variables.row.usage.copiedToClipboard": "Copied to clipboard",
+	"variables.row.usage.copyToClipboard": "Copy to clipboard",
+	"variables.search.placeholder": "Search variables...",
+	"variables.errors.save": "Error while saving variable",
+	"variables.errors.delete": "Error while deleting variable",
+	"variables.modals.deleteConfirm.title": "Delete variable",
+	"variables.modals.deleteConfirm.message": "Are you sure you want to delete the variable \"{name}\"? This cannot be undone.",
+	"variables.modals.deleteConfirm.confirmButton": "Delete",
+	"variables.modals.deleteConfirm.cancelButton": "Cancel",
 	"contextual.credentials.sharing.unavailable.title": "Upgrade to collaborate",
 	"contextual.credentials.sharing.unavailable.title.cloud": "Upgrade to collaborate",
 	"contextual.credentials.sharing.unavailable.title.desktop": "Upgrade to n8n Cloud to collaborate",
@@ -1625,6 +1661,14 @@
 	"contextual.workflows.sharing.unavailable.button.cloud": "Upgrade now",
 	"contextual.workflows.sharing.unavailable.button.desktop": "View plans",
 
+	"contextual.variables.unavailable.title": "Available on Enterprise plan",
+	"contextual.variables.unavailable.title.cloud": "Available on Power plan",
+	"contextual.variables.unavailable.title.desktop": "Upgrade to n8n Cloud to collaborate",
+	"contextual.variables.unavailable.description": "Variables can be used to store and access data across workflows. Reference them in n8n using the prefix <code>$vars</code> (e.g. <code>$vars.myVariable</code>). Variables are immutable and cannot be modified within your workflows.<br/><a href=\"https://docs.n8n.io/environments/variables/\" target=\"_blank\">Learn more in the docs.</a>",
+	"contextual.variables.unavailable.button": "View plans",
+	"contextual.variables.unavailable.button.cloud": "Upgrade now",
+	"contextual.variables.unavailable.button.desktop": "View plans",
+
 	"contextual.users.settings.unavailable.title": "Upgrade to add users",
 	"contextual.users.settings.unavailable.title.cloud": "Upgrade to add users",
 	"contextual.users.settings.unavailable.title.desktop": "Upgrade to add users",

packages/editor-ui/src/plugins/icons/custom.ts

@@ -0,0 +1,13 @@
+import type { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+
+export const faVariable: IconDefinition = {
+	prefix: 'fas' as IconPrefix,
+	iconName: 'variable' as IconName,
+	icon: [
+		52,
+		52,
+		[],
+		'e001',
+		'M42.6,17.8c2.4,0,7.2-2,7.2-8.4c0-6.4-4.6-6.8-6.1-6.8c-2.8,0-5.6,2-8.1,6.3c-2.5,4.4-5.3,9.1-5.3,9.1 l-0.1,0c-0.6-3.1-1.1-5.6-1.3-6.7c-0.5-2.7-3.6-8.4-9.9-8.4c-6.4,0-12.2,3.7-12.2,3.7l0,0C5.8,7.3,5.1,8.5,5.1,9.9 c0,2.1,1.7,3.9,3.9,3.9c0.6,0,1.2-0.2,1.7-0.4l0,0c0,0,4.8-2.7,5.9,0c0.3,0.8,0.6,1.7,0.9,2.7c1.2,4.2,2.4,9.1,3.3,13.5l-4.2,6 c0,0-4.7-1.7-7.1-1.7s-7.2,2-7.2,8.4s4.6,6.8,6.1,6.8c2.8,0,5.6-2,8.1-6.3c2.5-4.4,5.3-9.1,5.3-9.1c0.8,4,1.5,7.1,1.9,8.5 c1.6,4.5,5.3,7.2,10.1,7.2c0,0,5,0,10.9-3.3c1.4-0.6,2.4-2,2.4-3.6c0-2.1-1.7-3.9-3.9-3.9c-0.6,0-1.2,0.2-1.7,0.4l0,0 c0,0-4.2,2.4-5.6,0.5c-1-2-1.9-4.6-2.6-7.8c-0.6-2.8-1.3-6.2-2-9.5l4.3-6.2C35.5,16.1,40.2,17.8,42.6,17.8z',
+	],
+};

packages/editor-ui/src/plugins/icons/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
-import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
@@ -128,12 +129,12 @@ import {
 	faStickyNote as faSolidStickyNote,
 	faUserLock,
 } from '@fortawesome/free-solid-svg-icons';
+import { faVariable } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function addIcon(icon: IconDefinition) {
-function addIcon(icon: any) {
+	library.add(icon);
-	library.add(icon as IconDefinition);
 }
 
 addIcon(faAngleDoubleLeft);
@@ -239,7 +240,7 @@ addIcon(faSignOutAlt);
 addIcon(faSlidersH);
 addIcon(faSpinner);
 addIcon(faSolidStickyNote);
-addIcon(faStickyNote);
+addIcon(faStickyNote as IconDefinition);
 addIcon(faStop);
 addIcon(faSun);
 addIcon(faSync);
@@ -259,6 +260,7 @@ addIcon(faUser);
 addIcon(faUserCircle);
 addIcon(faUserFriends);
 addIcon(faUsers);
+addIcon(faVariable);
 addIcon(faVideo);
 addIcon(faTree);
 addIcon(faUserLock);

packages/editor-ui/src/router.ts

@@ -28,6 +28,7 @@ import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
 import CredentialsView from '@/views/CredentialsView.vue';
 import ExecutionsView from '@/views/ExecutionsView.vue';
 import WorkflowsView from '@/views/WorkflowsView.vue';
+import VariablesView from '@/views/VariablesView.vue';
 import { IPermissions } from './Interface';
 import { LOGIN_STATUS, ROLE } from '@/utils';
 import { RouteConfigSingleView } from 'vue-router/types/router';
@@ -178,6 +179,21 @@ export const routes = [
 			},
 		},
 	},
+	{
+		path: '/variables',
+		name: VIEWS.VARIABLES,
+		components: {
+			default: VariablesView,
+			sidebar: MainSidebar,
+		},
+		meta: {
+			permissions: {
+				allow: {
+					loginStatus: [LOGIN_STATUS.LoggedIn],
+				},
+			},
+		},
+	},
 	{
 		path: '/executions',
 		name: VIEWS.EXECUTIONS,

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: {

packages/editor-ui/src/styles/autocomplete-theme.scss

@@ -16,6 +16,12 @@
 .cm-tooltip-autocomplete {
 	background-color: var(--color-background-xlight) !important;
 
+	.cm-tooltip {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	li .cm-completionLabel {
 		color: var(--color-success);
 	}

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

@@ -6,7 +6,7 @@
 		:initialize="initialize"
 		:filters="filters"
 		:additional-filters-handler="onFilter"
-		:item-size="77"
+		:type-props="{ itemSize: 77 }"
 		@click:add="addCredential"
 		@update:filters="filters = $event"
 	>

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

@@ -241,7 +241,7 @@ import {
 	TelemetryHelpers,
 	Workflow,
 } from 'n8n-workflow';
-import {
+import type {
 	ICredentialsResponse,
 	IExecutionResponse,
 	IWorkflowDb,
@@ -277,7 +277,8 @@ import { useCredentialsStore } from '@/stores/credentials';
 import { useTagsStore } from '@/stores/tags';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 import { useCanvasStore } from '@/stores/canvas';
-import useWorkflowsEEStore from '@/stores/workflows.ee';
+import { useWorkflowsEEStore } from '@/stores/workflows.ee';
+import { useEnvironmentsStore } from '@/stores';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { getAccountAge, getConnectionInfo, getNodeViewTab } from '@/utils';
 import { useHistoryStore } from '@/stores/history';
@@ -470,6 +471,7 @@ export default mixins(
 			useWorkflowsStore,
 			useUsersStore,
 			useNodeCreatorStore,
+			useEnvironmentsStore,
 			useWorkflowsEEStore,
 			useHistoryStore,
 		),
@@ -3627,6 +3629,9 @@ export default mixins(
 		async loadCredentials(): Promise<void> {
 			await this.credentialsStore.fetchAllCredentials();
 		},
+		async loadVariables(): Promise<void> {
+			await this.environmentsStore.fetchAllVariables();
+		},
 		async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
 			const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
 
@@ -3882,6 +3887,7 @@ export default mixins(
 			this.loadCredentials(),
 			this.loadCredentialTypes(),
 		];
+		this.loadVariables();
 
 		if (this.nodeTypesStore.allNodeTypes.length === 0) {
 			loadPromises.push(this.loadNodeTypes());

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

@@ -0,0 +1,338 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useEnvironmentsStore, useUIStore, useSettingsStore, useUsersStore } from '@/stores';
+import { useI18n, useTelemetry, useToast, useUpgradeLink, useMessage } from '@/composables';
+
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import VariablesRow from '@/components/VariablesRow.vue';
+
+import { EnterpriseEditionFeature } from '@/constants';
+import { DatatableColumn, EnvironmentVariable, TemporaryEnvironmentVariable } from '@/Interface';
+import { uid } from 'n8n-design-system/utils';
+import { getVariablesPermissions } from '@/permissions';
+
+const settingsStore = useSettingsStore();
+const environmentsStore = useEnvironmentsStore();
+const usersStore = useUsersStore();
+const uiStore = useUIStore();
+const telemetry = useTelemetry();
+const i18n = useI18n();
+const message = useMessage();
+
+const layoutRef = ref<InstanceType<typeof ResourcesListLayout> | null>(null);
+
+const { showError } = useToast();
+
+const TEMPORARY_VARIABLE_UID_BASE = '@tmpvar';
+
+const allVariables = ref<Array<EnvironmentVariable | TemporaryEnvironmentVariable>>([]);
+const editMode = ref<Record<string, boolean>>({});
+
+const permissions = getVariablesPermissions(usersStore.currentUser);
+
+const isFeatureEnabled = computed(() =>
+	settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
+);
+const canCreateVariables = computed(() => isFeatureEnabled.value && permissions.create);
+
+const datatableColumns = computed<DatatableColumn[]>(() => [
+	{
+		id: 0,
+		path: 'name',
+		label: i18n.baseText('variables.table.key'),
+		classes: ['variables-key-column'],
+	},
+	{
+		id: 1,
+		path: 'value',
+		label: i18n.baseText('variables.table.value'),
+		classes: ['variables-value-column'],
+	},
+	{
+		id: 2,
+		path: 'usage',
+		label: i18n.baseText('variables.table.usage'),
+		classes: ['variables-usage-column'],
+	},
+	...(isFeatureEnabled.value
+		? [
+				{
+					id: 3,
+					path: 'actions',
+					label: '',
+				},
+		  ]
+		: []),
+]);
+
+const contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);
+const { upgradeLinkUrl } = useUpgradeLink({
+	default: '&source=variables',
+	desktop: '&utm_campaign=upgrade-variables',
+});
+
+const newlyAddedVariableIds = ref<number[]>([]);
+
+const nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: 'asc' | 'desc') => {
+	if (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+		return -1;
+	} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+		return 1;
+	} else if (
+		newlyAddedVariableIds.value.includes(a.id) &&
+		newlyAddedVariableIds.value.includes(b.id)
+	) {
+		return newlyAddedVariableIds.value.indexOf(a.id) - newlyAddedVariableIds.value.indexOf(b.id);
+	} else if (newlyAddedVariableIds.value.includes(a.id)) {
+		return -1;
+	} else if (newlyAddedVariableIds.value.includes(b.id)) {
+		return 1;
+	}
+
+	return direction === 'asc'
+		? displayName(a).trim().localeCompare(displayName(b).trim())
+		: displayName(b).trim().localeCompare(displayName(a).trim());
+};
+const sortFns = {
+	nameAsc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
+		return nameSortFn(a, b, 'asc');
+	},
+	nameDesc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
+		return nameSortFn(a, b, 'desc');
+	},
+};
+
+function resetNewVariablesList() {
+	newlyAddedVariableIds.value = [];
+}
+
+async function initialize() {
+	await environmentsStore.fetchAllVariables();
+
+	allVariables.value = [...environmentsStore.variables];
+}
+
+function addTemporaryVariable() {
+	const temporaryVariable: TemporaryEnvironmentVariable = {
+		id: uid(TEMPORARY_VARIABLE_UID_BASE),
+		key: '',
+		value: '',
+	};
+
+	if (layoutRef.value) {
+		// Reset scroll position
+		if (layoutRef.value.$refs.listWrapperRef) {
+			layoutRef.value.$refs.listWrapperRef.scrollTop = 0;
+		}
+
+		// Reset pagination
+		if (layoutRef.value.currentPage !== 1) {
+			layoutRef.value.setCurrentPage(1);
+		}
+	}
+
+	allVariables.value.unshift(temporaryVariable);
+	editMode.value[temporaryVariable.id] = true;
+
+	telemetry.track('User clicked add variable button');
+}
+
+async function saveVariable(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
+	let updatedVariable: EnvironmentVariable;
+
+	try {
+		if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+			const { id, ...rest } = data;
+			updatedVariable = await environmentsStore.createVariable(rest);
+			allVariables.value.unshift(updatedVariable);
+			allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
+			newlyAddedVariableIds.value.unshift(updatedVariable.id);
+		} else {
+			updatedVariable = await environmentsStore.updateVariable(data as EnvironmentVariable);
+			allVariables.value = allVariables.value.map((variable) =>
+				variable.id === data.id ? updatedVariable : variable,
+			);
+			toggleEditing(updatedVariable);
+		}
+	} catch (error) {
+		showError(error, i18n.baseText('variables.errors.save'));
+	}
+}
+
+function toggleEditing(data: EnvironmentVariable) {
+	editMode.value = {
+		...editMode.value,
+		[data.id]: !editMode.value[data.id],
+	};
+}
+
+function cancelEditing(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
+	if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+		allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
+	} else {
+		toggleEditing(data as EnvironmentVariable);
+	}
+}
+
+async function deleteVariable(data: EnvironmentVariable) {
+	try {
+		await message.confirm(
+			i18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }),
+			i18n.baseText('variables.modals.deleteConfirm.title'),
+			{
+				confirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'),
+				cancelButtonText: i18n.baseText('variables.modals.deleteConfirm.cancelButton'),
+			},
+		);
+	} catch (e) {
+		return;
+	}
+
+	try {
+		await environmentsStore.deleteVariable(data);
+		allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
+	} catch (error) {
+		showError(error, i18n.baseText('variables.errors.delete'));
+	}
+}
+
+function goToUpgrade() {
+	window.open(upgradeLinkUrl.value, '_blank');
+}
+
+function displayName(resource: EnvironmentVariable) {
+	return resource.key;
+}
+</script>
+
+<template>
+	<ResourcesListLayout
+		ref="layoutRef"
+		resource-key="variables"
+		:disabled="!isFeatureEnabled"
+		:resources="allVariables"
+		:initialize="initialize"
+		:shareable="false"
+		:displayName="displayName"
+		:sortFns="sortFns"
+		:sortOptions="['nameAsc', 'nameDesc']"
+		:showFiltersDropdown="false"
+		type="datatable"
+		:type-props="{ columns: datatableColumns }"
+		@sort="resetNewVariablesList"
+		@click:add="addTemporaryVariable"
+	>
+		<template #add-button>
+			<n8n-tooltip placement="top" :disabled="canCreateVariables">
+				<div>
+					<n8n-button
+						size="large"
+						block
+						:disabled="!canCreateVariables"
+						@click="addTemporaryVariable"
+						data-test-id="resources-list-add"
+					>
+						{{ $locale.baseText(`variables.add`) }}
+					</n8n-button>
+				</div>
+				<template #content>
+					<span v-if="!isFeatureEnabled">{{ i18n.baseText('variables.add.unavailable') }}</span>
+					<span v-else>{{ i18n.baseText('variables.add.onlyOwnerCanCreate') }}</span>
+				</template>
+			</n8n-tooltip>
+		</template>
+		<template v-if="!isFeatureEnabled" #preamble>
+			<n8n-action-box
+				class="mb-m"
+				data-test-id="unavailable-resources-list"
+				emoji="👋"
+				:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
+				:description="
+					$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
+				"
+				:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
+				buttonType="secondary"
+				@click="goToUpgrade"
+			/>
+		</template>
+		<template v-if="!isFeatureEnabled" #empty>
+			<n8n-action-box
+				data-test-id="empty-resources-list"
+				emoji="👋"
+				:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
+				:description="
+					$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
+				"
+				:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
+				buttonType="secondary"
+				@click="goToUpgrade"
+			/>
+		</template>
+		<template #default="{ data }">
+			<VariablesRow
+				:key="data.id"
+				:editing="editMode[data.id]"
+				:data="data"
+				@save="saveVariable"
+				@edit="toggleEditing"
+				@cancel="cancelEditing"
+				@delete="deleteVariable"
+			/>
+		</template>
+	</ResourcesListLayout>
+</template>
+
+<style lang="scss" module>
+.type-input {
+	--max-width: 265px;
+}
+
+.sidebarContainer ul {
+	padding: 0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+@use 'n8n-design-system/css/common/var.scss';
+
+:deep(.datatable) {
+	table {
+		table-layout: fixed;
+	}
+
+	th,
+	td {
+		width: 25%;
+
+		@media screen and (max-width: var.$md) {
+			width: 33.33%;
+		}
+
+		&.variables-value-column,
+		&.variables-key-column,
+		&.variables-usage-column {
+			> div {
+				width: 100%;
+
+				> span {
+					max-width: 100%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					height: 18px;
+				}
+
+				> div {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	.variables-usage-column {
+		@media screen and (max-width: var.$md) {
+			display: none;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,49 @@
+import { afterAll, beforeAll } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { setupServer } from '@/__tests__/server';
+import { render } from '@testing-library/vue';
+import VariablesView from '@/views/VariablesView.vue';
+import { useSettingsStore, useUsersStore } from '@/stores';
+
+describe('store', () => {
+	let server: ReturnType<typeof setupServer>;
+
+	beforeAll(() => {
+		server = setupServer();
+	});
+
+	beforeEach(async () => {
+		setActivePinia(createPinia());
+
+		await useSettingsStore().getSettings();
+		await useUsersStore().fetchUsers();
+		await useUsersStore().loginWithCookie();
+	});
+
+	afterAll(() => {
+		server.shutdown();
+	});
+
+	it('should render loading state', () => {
+		const wrapper = render(VariablesView);
+
+		expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
+	});
+
+	it('should render empty state', async () => {
+		const wrapper = render(VariablesView);
+
+		await wrapper.findByTestId('empty-resources-list');
+		expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
+	});
+
+	it('should render variable entries', async () => {
+		server.createList('variable', 3);
+
+		const wrapper = render(VariablesView);
+
+		await wrapper.findByTestId('resources-table');
+		expect(wrapper.getByTestId('resources-table')).toBeVisible();
+		expect(wrapper.container.querySelectorAll('tr')).toHaveLength(4);
+	});
+});

packages/nodes-base/test/nodes/Helpers.ts

@@ -133,6 +133,7 @@ export function WorkflowExecuteAdditionalData(
 		webhookWaitingBaseUrl: 'webhook-waiting',
 		webhookTestBaseUrl: 'webhook-test',
 		userId: '123',
+		variables: {},
 	};
 }
 

packages/workflow/src/Interfaces.ts

@@ -1693,6 +1693,7 @@ export interface IWorkflowExecuteAdditionalData {
 	currentNodeParameters?: INodeParameters;
 	executionTimeoutTimestamp?: number;
 	userId: string;
+	variables: IDataObject;
 }
 
 export type WorkflowExecuteMode =

pnpm-lock.yaml

@@ -880,6 +880,9 @@ importers:
       codemirror-lang-n8n-expression:
         specifier: ^0.2.0
         version: 0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      copy-to-clipboard:
+        specifier: ^3.3.3
+        version: 3.3.3
       dateformat:
         specifier: ^3.0.3
         version: 3.0.3
@@ -9831,6 +9834,12 @@ packages:
       is-plain-object: 5.0.0
     dev: true
 
+  /copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: false
+
   /copy-to@2.0.1:
     resolution: {integrity: sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==}
     dev: false
@@ -20304,6 +20313,10 @@ packages:
       through2: 2.0.5
     dev: true
 
+  /toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+    dev: false
+
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}