fix(editor): Update assignment hint when user hovers table row (#8782)

packages/editor-ui/src/components/AssignmentCollection/Assignment.vue

@@ -10,6 +10,8 @@ import { isObject } from '@jsplumb/util';
 import type { AssignmentValue, INodeProperties } from 'n8n-workflow';
 import { computed, ref } from 'vue';
 import TypeSelect from './TypeSelect.vue';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useI18n } from '@/composables/useI18n';
 
 interface Props {
 	path: string;
@@ -29,6 +31,9 @@ const emit = defineEmits<{
 	(event: 'remove'): void;
 }>();
 
+const ndvStore = useNDVStore();
+const i18n = useI18n();
+
 const assignmentTypeToNodeProperty = (
 	type: string,
 ): Partial<INodeProperties> & Pick<INodeProperties, 'type'> => {
@@ -52,7 +57,7 @@ const assignmentTypeToNodeProperty = (
 };
 
 const nameParameter = computed<INodeProperties>(() => ({
-	name: '',
+	name: 'name',
 	displayName: '',
 	default: '',
 	requiresDataPath: 'single',
@@ -62,7 +67,7 @@ const nameParameter = computed<INodeProperties>(() => ({
 
 const valueParameter = computed<INodeProperties>(() => {
 	return {
-		name: '',
+		name: 'value',
 		displayName: '',
 		default: '',
 		placeholder: 'value',
@@ -77,7 +82,12 @@ const hint = computed(() => {
 	}
 
 	try {
-		const resolvedValue = resolveParameter(value) as unknown;
+		const resolvedValue = resolveParameter(value, {
+			targetItem: ndvStore.hoveringItem ?? undefined,
+			inputNodeName: ndvStore.ndvInputNodeName,
+			inputRunIndex: ndvStore.ndvInputRunIndex,
+			inputBranchIndex: ndvStore.ndvInputBranchIndex,
+		}) as unknown;
 
 		if (isObject(resolvedValue)) {
 			return JSON.stringify(resolvedValue);
@@ -86,12 +96,20 @@ const hint = computed(() => {
 			return resolvedValue.toString();
 		}
 
+		if (resolvedValue === '') {
+			return i18n.baseText('parameterInput.emptyString');
+		}
+
 		return resolvedValue as string;
 	} catch (error) {
 		return '';
 	}
 });
 
+const highlightHint = computed(() =>
+	Boolean(hint.value && ndvStore.hoveringItem && ndvStore.isInputParentOfActiveNode),
+);
+
 const valueIsExpression = computed(() => {
 	const { value } = assignment.value;
 
@@ -189,7 +207,13 @@ const onBlur = (): void => {
 							@update="onAssignmentValueChange"
 							@blur="onBlur"
 						/>
-						<ParameterInputHint :class="$style.hint" :hint="hint" single-line />
+						<ParameterInputHint
+							data-test-id="parameter-expression-preview-value"
+							:class="$style.hint"
+							:highlight="highlightHint"
+							:hint="hint"
+							single-line
+						/>
 					</div>
 				</template>
 			</InputTriple>