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

n8n-io · Mar 6, 2024 · 5266bcb · 5266bcb
1 parent 839793e
commit 5266bcb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 27 deletions.
diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
@@ -285,8 +285,8 @@ describe('Data mapping', () => {
 		ndv.actions.clearParameterInput('value');
 		cy.get('body').type('{esc}');
 
-		ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('exist');
-		ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]').should('not.exist');
+		ndv.getters.parameterInput('includeOtherFields').find('input[type="checkbox"]').should('exist');
+		ndv.getters.parameterInput('includeOtherFields').find('input[type="text"]').should('not.exist');
 		ndv.getters
 			.inputDataContainer()
 			.should('exist')
@@ -296,9 +296,12 @@ describe('Data mapping', () => {
 			.realMouseMove(100, 100);
 		cy.wait(50);
 
-		ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('not.exist');
 		ndv.getters
-			.parameterInput('keepOnlySet')
+			.parameterInput('includeOtherFields')
+			.find('input[type="checkbox"]')
+			.should('not.exist');
+		ndv.getters
+			.parameterInput('includeOtherFields')
 			.find('input[type="text"]')
 			.should('exist')
 			.invoke('css', 'border')

diff --git a/cypress/fixtures/Test_workflow_3.json b/cypress/fixtures/Test_workflow_3.json
@@ -20,20 +20,21 @@
 		},
 		{
 			"parameters": {
-				"values": {
-					"string": [
-						{
-							"name": "other",
-							"value": ""
-						}
+				"assignments": {
+					"assignments": [
+					  {
+						"id": "2b0f25a2-9483-4579-9f6d-91b7ac2fcb71",
+						"name": "other",
+						"value": "",
+						"type": "string"
+					  }
 					]
-				},
-				"options": {}
+				  }
 			},
 			"id": "2dfc690a-95cf-48c2-85a6-2b3bb8cd1d1d",
 			"name": "Set",
 			"type": "n8n-nodes-base.set",
-			"typeVersion": 1,
+			"typeVersion": 3.3,
 			"position": [
 				920,
 				300
@@ -43,21 +44,22 @@
 			"id": "9bee04af-1bfc-4be2-a704-e975cb887ced",
 			"name": "Set1",
 			"type": "n8n-nodes-base.set",
-			"typeVersion": 1,
+			"typeVersion": 3.3,
 			"position": [
 				1120,
 				300
 			],
 			"parameters": {
-				"values": {
-					"string": [
-						{
-							"name": "other",
-							"value": ""
-						}
+				"assignments": {
+					"assignments": [
+					  {
+						"id": "2b0f25a2-9483-4579-9f6d-91b7ac2fcb71",
+						"name": "other",
+						"value": "",
+						"type": "string"
+					  }
 					]
-				},
-				"options": {}
+				  }
 			}
 		}
 	],
@@ -118,4 +120,4 @@
 		"instanceId": "fe45a93dd232270eb40d3ba1f7907ad3935bbd72ad5e4ee09ff61e96674f9aef"
 	},
 	"tags": []
-}
+}
diff --git a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue b/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>