feat: Add variables feature (#5602)

* feat: add variables db models and migrations

* feat: variables api endpoints

* feat: add $variables to expressions

* test: fix ActiveWorkflowRunner tests failing

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

* feat: variables licensing

* fix: could create one extra variable than licensed for

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

* feat: add support for row slot to datatable

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

* feat: add vars autocomplete

* chore: remove alert

* feat: add variables autocomplete for code and expressions

* feat: add tests for variable components

* feat: add variables search and sort

* test: update tests for variables view

* chore: fix test and linting issue

* refactor: review changes

* feat: add variable creation telemetry

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

* fix: Improve variables disabled experience and fix sorting

* fix: update action box margin

* test: update tests for variables row and datatable

* fix: Add ee controller to base controller

* fix: variables.ee routes not being added

* feat: add variables validation

* fix: fix vue-fragment bug that breaks everything

* chore: Update lock

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

* feat: add input validation

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

* test: update variables tests

* fix: fix data-testid pattern

* feat: improve overflow styles

* test: fix variables row snapshot

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

* fix: fix list layout overflow

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

* feat: add docs link

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

* feat: improve vars expressions ux, cm-tooltip

* test: fix datatable test

* feat: add MATCH_REGEX validation rule

* fix: overhaul how datatable pagination selector works

* feat: update  completer description

* fix: conditionally update usage syntax based on key validation

* test: update datatable snapshot

* fix: fix variables-row button margins

* fix: fix pagination overflow

* test: Fix broken test

* test: Update snapshot

* fix: Remove duplicate declaration

* feat: add custom variables icon

---------

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

packages/editor-ui/src/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.
  */