fix(editor): Use selected input item for autocomplete (#10019)

n8n-io · Jul 12, 2024 · 1d2b403 · 1d2b403
1 parent 56dd491
commit 1d2b403
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 34 deletions.
diff --git a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue b/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue
@@ -88,7 +88,7 @@ const hint = computed(() => {
 			undefined,
 			ndvStore.isInputParentOfActiveNode
 				? {
-						targetItem: ndvStore.hoveringItem ?? undefined,
+						targetItem: ndvStore.expressionTargetItem ?? undefined,
 						inputNodeName: ndvStore.ndvInputNodeName,
 						inputRunIndex: ndvStore.ndvInputRunIndex,
 						inputBranchIndex: ndvStore.ndvInputBranchIndex,
@@ -104,9 +104,7 @@ const hint = computed(() => {
 	return stringifyExpressionResult(result);
 });
 
-const highlightHint = computed(() =>
-	Boolean(hint.value && ndvStore.hoveringItem && ndvStore.isInputParentOfActiveNode),
-);
+const highlightHint = computed(() => Boolean(hint.value && ndvStore.getHoveringItem));
 
 const valueIsExpression = computed(() => {
 	const { value } = assignment.value;

diff --git a/...r-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts b/...r-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts
@@ -7,7 +7,6 @@ describe('InlineExpressionEditorOutput.vue', () => {
 		const { getByTestId } = renderComponent(InlineExpressionEditorOutput, {
 			pinia: createTestingPinia(),
 			props: {
-				hoveringItemNumber: 0,
 				visible: true,
 				segments: [
 					{
@@ -56,7 +55,6 @@ describe('InlineExpressionEditorOutput.vue', () => {
 		const { getByTestId } = renderComponent(InlineExpressionEditorOutput, {
 			pinia: createTestingPinia(),
 			props: {
-				hoveringItemNumber: 0,
 				visible: true,
 				segments: [
 					{

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -149,7 +149,7 @@ const parameterHint = computed(() => {
 	return props.hint;
 });
 
-const targetItem = computed(() => ndvStore.hoveringItem);
+const targetItem = computed(() => ndvStore.expressionTargetItem);
 
 const isInputParentOfActiveNode = computed(() => ndvStore.isInputParentOfActiveNode);
 

diff --git a/packages/editor-ui/src/composables/useExpressionEditor.ts b/packages/editor-ui/src/composables/useExpressionEditor.ts
@@ -330,22 +330,7 @@ export const useExpressionEditor = ({
 		return result;
 	}
 
-	const targetItem = computed<TargetItem | null>(() => {
-		if (ndvStore.hoveringItem) {
-			return ndvStore.hoveringItem;
-		}
-
-		if (ndvStore.expressionOutputItemIndex && ndvStore.ndvInputNodeName) {
-			return {
-				nodeName: ndvStore.ndvInputNodeName,
-				runIndex: ndvStore.ndvInputRunIndex ?? 0,
-				outputIndex: ndvStore.ndvInputBranchIndex ?? 0,
-				itemIndex: ndvStore.expressionOutputItemIndex,
-			};
-		}
-
-		return null;
-	});
+	const targetItem = computed<TargetItem | null>(() => ndvStore.expressionTargetItem);
 
 	const resolvableSegments = computed<Resolvable[]>(() => {
 		return segments.value.filter((s): s is Resolvable => s.kind === 'resolvable');

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts
@@ -1,5 +1,4 @@
-import { resolveParameter } from '@/composables/useWorkflowHelpers';
-import { prefixMatch, longestCommonPrefix } from './utils';
+import { prefixMatch, longestCommonPrefix, resolveAutocompleteExpression } from './utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { Resolved } from './types';
 import { escapeMappingString } from '@/utils/mappingUtils';
@@ -31,7 +30,7 @@ export function bracketAccessCompletions(context: CompletionContext): Completion
 	let resolved: Resolved;
 
 	try {
-		resolved = resolveParameter(`={{ ${base} }}`);
+		resolved = resolveAutocompleteExpression(`={{ ${base} }}`);
 	} catch {
 		return null;
 	}

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
@@ -1,4 +1,3 @@
-import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import { i18n } from '@/plugins/i18n';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
@@ -48,6 +47,7 @@ import {
 	isSplitInBatchesAbsent,
 	longestCommonPrefix,
 	prefixMatch,
+	resolveAutocompleteExpression,
 	sortCompletionsAlpha,
 	splitBaseTail,
 	stripExcessParens,
@@ -83,7 +83,7 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 		let resolved: Resolved;
 
 		try {
-			resolved = resolveParameter(`={{ ${base} }}`);
+			resolved = resolveAutocompleteExpression(`={{ ${base} }}`);
 		} catch (error) {
 			return null;
 		}
@@ -126,7 +126,7 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
 
 function explicitDataTypeOptions(expression: string): Completion[] {
 	try {
-		const resolved = resolveParameter(`={{ ${expression} }}`);
+		const resolved = resolveAutocompleteExpression(`={{ ${expression} }}`);
 		return datatypeOptions({
 			resolved,
 			base: expression,

diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts
@@ -82,7 +82,7 @@ export const isAllowedInDotNotation = (str: string) => {
 
 export function receivesNoBinaryData() {
 	try {
-		return resolveParameter('={{ $binary }}')?.data === undefined;
+		return resolveAutocompleteExpression('={{ $binary }}')?.data === undefined;
 	} catch {
 		return true;
 	}
@@ -92,7 +92,7 @@ export function hasNoParams(toResolve: string) {
 	let params;
 
 	try {
-		params = resolveParameter(`={{ ${toResolve}.params }}`);
+		params = resolveAutocompleteExpression(`={{ ${toResolve}.params }}`);
 	} catch {
 		return true;
 	}
@@ -104,6 +104,21 @@ export function hasNoParams(toResolve: string) {
 	return paramKeys.length === 1 && isPseudoParam(paramKeys[0]);
 }
 
+export function resolveAutocompleteExpression(expression: string) {
+	const ndvStore = useNDVStore();
+	return resolveParameter(
+		expression,
+		ndvStore.isInputParentOfActiveNode
+			? {
+					targetItem: ndvStore.expressionTargetItem ?? undefined,
+					inputNodeName: ndvStore.ndvInputNodeName,
+					inputRunIndex: ndvStore.ndvInputRunIndex,
+					inputBranchIndex: ndvStore.ndvInputBranchIndex,
+				}
+			: {},
+	);
+}
+
 // ----------------------------------
 //        state-based utils
 // ----------------------------------

diff --git a/packages/editor-ui/src/stores/ndv.store.ts b/packages/editor-ui/src/stores/ndv.store.ts
@@ -151,16 +151,29 @@ export const useNDVStore = defineStore(STORES.NDV, {
 			const parentNodes = workflow.getParentNodes(this.activeNode.name, NodeConnectionType.Main, 1);
 			return parentNodes.includes(inputNodeName);
 		},
-		hoveringItemNumber(): number {
-			return (this.hoveringItem?.itemIndex ?? 0) + 1;
-		},
 		getHoveringItem(): TargetItem | null {
 			if (this.isInputParentOfActiveNode) {
 				return this.hoveringItem;
 			}
 
 			return null;
 		},
+		expressionTargetItem(): TargetItem | null {
+			if (this.getHoveringItem) {
+				return this.getHoveringItem;
+			}
+
+			if (this.expressionOutputItemIndex && this.ndvInputNodeName) {
+				return {
+					nodeName: this.ndvInputNodeName,
+					runIndex: this.ndvInputRunIndex ?? 0,
+					outputIndex: this.ndvInputBranchIndex ?? 0,
+					itemIndex: this.expressionOutputItemIndex,
+				};
+			}
+
+			return null;
+		},
 		isNDVOpen(): boolean {
 			return this.activeNodeName !== null;
 		},