feat(editor): Completions for extensions in expression editor (#5130)

* 🔥 Remove test extensions

* 🚧 Add test description

* 📘 Expand types

* ⚡ Export extensions

* ⚡ Export collection

* ⚡ Mark all proxies

* ✏️ Rename for clarity

* ⚡ Export from barrel

* ✨ Create datatype completions

* ⚡ Mount datatype completions

* 🧪 Adjust tests

* ⚡ Add `path` prop

* 🔥 Remove `()` from completion labels

* ⚡ Filter out completions for pseudo-proxies

* 🐛 Fix method error

* ⚡ Add metrics

* ✏️ Improve naming

* ✨ Start completion on empty resolvable

* ✨ Implement completion previews

* ⚡ Break out completion manager

* ⚡ Implement in expression editor modal

* ✏️ Improve naming

* ⚡ Filter out irrelevant completions

* ✨ Add preview hint

* ✏️ Improve comments

* 🎨 Style preview hint

* ⚡ Expand `hasNoParams`

* ⚡ Add spacing for readability

* ⚡ Add error codes

* ✏️ Add comment

* 🐛 Fix Esc behavior

* ⚡ Parse Unicode

* ⚡ Throw on invalid `DateTime`

* ⚡ Fix second root completion detection

* ⚡ Switch message at completable prefix position

* 🐛 Fix function names for non-dev build

* 🐛 Fix `json` handling

* 🔥 Comment out previews

* ♻️ Apply feedback

* 🔥 Remove extensions

* 🚚 Rename extensions

* ⚡ Adjust some implementations

* 🔥 Remove dummy extensions

* 🐛 Fix object regex

* ♻️ Apply feedback

* ✏️ Fix typos

* ✏️ Add `fn is not a function` message

* 🔥 Remove check

* ✨ Add `isNotEmpty` for objects

* 🚚 Rename `global` to `alpha`

* 🔥 Remove `encrypt`

* ⚡ Restore `is not a function` error

* ⚡ Support `week` on `extract()`

* 🧪 Fix tests

* ⚡ Add validation to some string extensions

* ⚡ Validate number arrays in some extensions

* 🧪 Fix tests

* ✏️ Improve error message

* ⏪ Revert extensions framework changes

* 🧹 Previews cleanup

* ⚡ Condense blank completions

* ⚡ Refactor dollar completions

* ⚡ Refactor non-dollar completions

* ⚡ Refactor Luxon completions

* ⚡ Refactor datatype completions

* ⚡ Use `DATETIMEUNIT_MAP`

* ✏️ Update test description

* ⏪ Revert "Use `DATETIMEUNIT_MAP`"

This reverts commit 472a77df5cd789905d162f3c3db02ac767b89b4e.

* 🧪 Add tests

* ♻️ Restore generic extensions

* 🔥 Remove logs

* 🧪 Expand tests

* ✨ Add `Math` completions

* ✏️ List breaking change

* ⚡ Add doc tooltips

* 🐛 Fix node selector regex

* 🐛 Fix `context` resolution

* 🐛 Allow dollar completions in args

* ⚡ Make numeric array methods context-dependent

* 📝 Adjust docs

* 🐛 Fix selector ref

* ⚡ Surface error for valid URL

* 🐛 Disallow whitespace in `isEmail` check

* 🧪 Fix test for `isUrl`

* ⚡ Add comma validator in `toFloat`

* ⚡ Add validation to `$jmespath()`

* ⏪ Revert valid URL error

* ⚡ Adjust `$jmespath()` validation

* 🧪 Adjust `isUrl` test

* ⚡ Remove `{}` and `[]` from compact

* ✏️ Update docs

* 🚚 Rename `stripTags` to `removeTags`

* ⚡ Do not inject whitespace inside resolvable

* ⚡ Make completions aware of `()`

* ✏️ Add note

* ⚡ Update sorting

* ⚡ Hide active node name from node selector

* 🔥 Remove `length()` and its aliases

* ⚡ Validate non-zero for `chunk`

* ✏️ Reword all error messages

* 🐛 Fix `$now` and `$today`

* ⚡ Simplify with `stripExcessParens`

* ⚡ Fold luxon into datatype

* 🧪 Clean up tests

* 🔥 Remove tests for removed methods

* 👕 Fix type

* ⬆️ Upgrade lang pack

* ⏪ Undo change to `vitest` command

* 🔥 Remove unused method

* ⚡ Separate `return` line

* ✏️ Improve description

* 🧪 Expand tests for initial-only completions

* 🧪 Add bracket-aware completions

* ⚡ Make check for `all()` stricter

* ✏️ Adjust explanatory comments

* 🔥 Remove unneded copy

* 🔥 Remove outdated comment

* ⚡ Make naming consistent

* ✏️ Update comments

* ⚡ Improve URL scheme check

* ✏️ Add comment

* 🚚 Move extension

* ✏️ Update `BREAKING-CHANGES.md`

* ✏️ Update upcoming version

* ✏️ Fix grammar

* ✏️ Shorten message

* 🐛 Fix `Esc` behavior

* 🐛 Fix `isNumeric`

* ✨ Support native methods

* 🧪 Skip Pinia tests

* ✏️ Shorten description

* 🔥 Remove outdated comment

* 🧪 Unskip Pinia tests

* ✏️ Add comments

* 🧪 Expand tests to natives

* ✏️ Add clarifying comments

* ⚡ Use `setTimeout` to make telemetry non-blocking

* 🐛 Account for no active node in cred modal

* ✨ Resolve without workflow

* 🔥 Remove `Esc` handling on NDV

* ⚡ Use `isDateTime`

* 🚚 Move `unique` to next phase

This array extension takes optional args.

* ⚡ Merge export

* 🧪 Fix tests

* ⏪ Restore check

* ✏️ Make breaking change description more accurate

* 🧪 Fix e2e tests

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

@@ -1,4 +1,5 @@
 import mixins from 'vue-typed-mixins';
+import { Expression, ExpressionExtensions } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { ensureSyntaxTree } from '@codemirror/language';
 
@@ -19,8 +20,7 @@ export const expressionManager = mixins(workflowHelpers).extend({
 	},
 	data() {
 		return {
-			editor: null as EditorView | null,
-			errorsInSuccession: 0,
+			editor: {} as EditorView,
 		};
 	},
 	watch: {
@@ -56,13 +56,19 @@ export const expressionManager = mixins(workflowHelpers).extend({
 			return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
 		},
 
+		expressionExtensionNames(): Set<string> {
+			return new Set(
+				ExpressionExtensions.reduce<string[]>((acc, cur) => {
+					return [...acc, ...Object.keys(cur.functions)];
+				}, []),
+			);
+		},
+
 		htmlSegments(): Html[] {
 			return this.segments.filter((s): s is Html => s.kind !== 'resolvable');
 		},
 
 		segments(): Segment[] {
-			if (!this.editor) return [];
-
 			const rawSegments: RawSegment[] = [];
 
 			const fullTree = ensureSyntaxTree(
@@ -76,76 +82,49 @@ export const expressionManager = mixins(workflowHelpers).extend({
 			}
 
 			fullTree.cursor().iterate((node) => {
-				if (!this.editor || node.type.name === 'Program') return;
+				if (node.type.name === 'Program') return;
 
 				rawSegments.push({
 					from: node.from,
 					to: node.to,
 					text: this.editor.state.sliceDoc(node.from, node.to),
-					type: node.type.name,
+					token: node.type.name,
 				});
 			});
 
 			return rawSegments.reduce<Segment[]>((acc, segment) => {
-				const { from, to, text, type } = segment;
+				const { from, to, text, token } = segment;
 
-				if (type === 'Resolvable') {
-					const { resolved, error, fullError } = this.resolve(text, this.hoveringItem);
-
-					acc.push({ kind: 'resolvable', from, to, resolvable: text, resolved, error, fullError });
+				if (token === 'Plaintext') {
+					acc.push({ kind: 'plaintext', from, to, plaintext: text });
 
 					return acc;
 				}
 
-				acc.push({ kind: 'plaintext', from, to, plaintext: text });
+				const { resolved, error, fullError } = this.resolve(text, this.hoveringItem);
+
+				acc.push({ kind: 'resolvable', from, to, resolvable: text, resolved, error, fullError });
 
 				return acc;
 			}, []);
 		},
 
-		evaluationDelay() {
-			const DEFAULT_EVALUATION_DELAY = 300; // ms
-
-			const prevErrorsInSuccession = this.errorsInSuccession;
-
-			if (this.resolvableSegments.filter((s) => s.error).length > 0) {
-				this.errorsInSuccession += 1;
-			} else {
-				this.errorsInSuccession = 0;
-			}
-
-			const addsNewError = this.errorsInSuccession > prevErrorsInSuccession;
-
-			let delay = DEFAULT_EVALUATION_DELAY;
-
-			if (addsNewError && this.errorsInSuccession > 1 && this.errorsInSuccession < 5) {
-				delay = DEFAULT_EVALUATION_DELAY * this.errorsInSuccession;
-			} else if (addsNewError && this.errorsInSuccession >= 5) {
-				delay = 0;
-			}
-
-			return delay;
-		},
-
 		/**
-		 * Some segments are conditionally displayed, i.e. not displayed when they are
-		 * _part_ of the result, but displayed when they are the _entire_ result.
+		 * Segments to display in the output of an expression editor.
 		 *
-		 * Example:
-		 * - Expression `This is a {{ [] }} test` is displayed as `This is a test`.
-		 * - Expression `{{ [] }}` is displayed as `[Array: []]`.
+		 * Some segments are not displayed when they are _part_ of the result,
+		 * but displayed when they are the _entire_ result:
 		 *
-		 * Conditionally displayed segments:
-		 * - `[Array: []]`
-		 * - `[empty]` (from `''`, not from `undefined`)
+		 * - `This is a {{ [] }} test` displays as `This is a test`.
+		 * - `{{ [] }}` displays as `[Array: []]`.
 		 *
-		 * Exceptionally, for two segments, display differs based on context:
-		 * - Date is displayed as
-		 *   - `Mon Nov 14 2022 17:26:13 GMT+0100 (CST)` when part of the result
-		 *   - `[Object: "2022-11-14T17:26:13.130Z"]` when the entire result
-		 * - Non-empty array is displayed as
-		 *   - `1,2,3` when part of the result
-		 *   - `[Array: [1, 2, 3]]` when the entire result
+		 * Some segments display differently based on context:
+		 *
+		 * Date displays as
+		 * - `Mon Nov 14 2022 17:26:13 GMT+0100 (CST)` when part of the result
+		 * - `[Object: "2022-11-14T17:26:13.130Z"]` when the entire result
+		 *
+		 * Only needed in order to mimic behavior of `ParameterInputHint`.
 		 */
 		displayableSegments(): Segment[] {
 			return this.segments
@@ -191,12 +170,17 @@ export const expressionManager = mixins(workflowHelpers).extend({
 			};
 
 			try {
-				result.resolved = this.resolveExpression('=' + resolvable, undefined, {
-					targetItem: targetItem ?? undefined,
-					inputNodeName: this.ndvStore.ndvInputNodeName,
-					inputRunIndex: this.ndvStore.ndvInputRunIndex,
-					inputBranchIndex: this.ndvStore.ndvInputBranchIndex,
-				});
+				if (!useNDVStore().activeNode) {
+					// e.g. credential modal
+					result.resolved = Expression.resolveWithoutWorkflow(resolvable);
+				} else {
+					result.resolved = this.resolveExpression('=' + resolvable, undefined, {
+						targetItem: targetItem ?? undefined,
+						inputNodeName: this.ndvStore.ndvInputNodeName,
+						inputRunIndex: this.ndvStore.ndvInputRunIndex,
+						inputBranchIndex: this.ndvStore.ndvInputBranchIndex,
+					});
+				}
 			} catch (error) {
 				result.resolved = `[${error.message}]`;
 				result.error = true;
@@ -212,7 +196,10 @@ export const expressionManager = mixins(workflowHelpers).extend({
 			}
 
 			if (result.resolved === undefined) {
-				result.resolved = this.$locale.baseText('expressionModalInput.undefined');
+				result.resolved = this.isUncalledExpressionExtension(resolvable)
+					? this.$locale.baseText('expressionEditor.uncalledFunction')
+					: this.$locale.baseText('expressionModalInput.undefined');
+
 				result.error = true;
 			}
 
@@ -222,5 +209,15 @@ export const expressionManager = mixins(workflowHelpers).extend({
 
 			return result;
 		},
+
+		isUncalledExpressionExtension(resolvable: string) {
+			const end = resolvable
+				.replace(/^{{|}}$/g, '')
+				.trim()
+				.split('.')
+				.pop();
+
+			return end !== undefined && this.expressionExtensionNames.has(end);
+		},
 	},
 });