feat(editor): Updating node reference pattern in expression editor (#6228)

* feat(editor): Updating node reference pattern in expression editor
* ⚡ Updated node ref when dragging data, telemetry and some comments
* ✔️ Updating tests
* 🔨 Removing old telemetry code, updating the current one based on the review feedback
* ✔️ Updating mapping e2e tests

cypress/e2e/14-mapping.cy.ts

@@ -194,7 +194,7 @@ describe('Data mapping', () => {
 		ndv.actions.mapToParameter('value');
 		ndv.getters
 			.inlineExpressionEditorInput()
-			.should('have.text', `{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }}`);
+			.should('have.text', `{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }}`);
 		ndv.getters.parameterExpressionPreview('value').should('not.exist');
 
 		ndv.actions.switchInputMode('Table');
@@ -203,7 +203,7 @@ describe('Data mapping', () => {
 			.inlineExpressionEditorInput()
 			.should(
 				'have.text',
-				`{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`,
+				`{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }} {{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input }}`,
 			);
 		ndv.actions.validateExpressionPreview('value', ' ');
 
@@ -311,12 +311,12 @@ describe('Data mapping', () => {
 		ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]')
 			.should('exist')
 			.invoke('css', 'border')
-			.then((border) => expect(border).to.include('1.5px dashed rgb(90, 76, 194)'));
+			.then((border) => expect(border).to.include('dashed rgb(90, 76, 194)'));
 
 		ndv.getters.parameterInput('value').find('input[type="text"]')
 		.should('exist')
 		.invoke('css', 'border')
-		.then((border) => expect(border).to.include('1.5px dashed rgb(90, 76, 194)'));
+		.then((border) => expect(border).to.include('dashed rgb(90, 76, 194)'));
 	});
 
 });

packages/editor-ui/src/components/ExpressionEdit.vue

@@ -181,21 +181,22 @@ export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 					trackProperties.variable_type = 'Raw value';
 				}
 
-				if (splitVar[0].startsWith('$node')) {
+				if (splitVar[0].startsWith("$('")) {
-					const sourceNodeName = splitVar[0].split('"')[1];
+					const match = /\$\('(.*?)'\)/.exec(splitVar[0]);
-					trackProperties.node_type_source =
+					if (match && match.length > 1) {
-						this.workflowsStore.getNodeByName(sourceNodeName)?.type;
+						const sourceNodeName = match[1];
-					const nodeConnections: Array<Array<{ node: string }>> =
+						trackProperties.node_type_source =
-						this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
+							this.workflowsStore.getNodeByName(sourceNodeName)?.type;
-					trackProperties.is_immediate_input =
+						const nodeConnections: Array<Array<{ node: string }>> =
-						nodeConnections &&
+							this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
-						nodeConnections[0] &&
+						trackProperties.is_immediate_input =
-						!!nodeConnections[0].find(({ node }) => node === this.ndvStore.activeNode?.name || '')
+							nodeConnections &&
-							? true
+							nodeConnections[0] &&
-							: false;
+							nodeConnections[0].some(({ node }) => node === this.ndvStore.activeNode?.name || '');
 
-					if (splitVar[1].startsWith('parameter')) {
+						if (splitVar[1].startsWith('parameter')) {
-						trackProperties.parameter_name_source = splitVar[1].split('"')[1];
+							trackProperties.parameter_name_source = splitVar[1].split('"')[1];
+						}
 					}
 				} else {
 					trackProperties.is_immediate_input = true;

packages/editor-ui/src/components/VariableSelector.vue

@@ -290,7 +290,7 @@ export default mixins(workflowHelpers).extend({
 		 * @param {number} [runIndex=0] The index of the run
 		 * @param {string} [inputName='main'] The name of the input
 		 * @param {number} [outputIndex=0] The index of the output
-		 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
+		 * @param {boolean} [useShort=false] Use short notation $json vs. $('NodeName').json
 		 */
 		getNodeRunDataOutput(
 			nodeName: string,
@@ -351,7 +351,7 @@ export default mixins(workflowHelpers).extend({
 		 * @param {string} nodeName The name of the node to get the data of
 		 * @param {IPinData[string]} pinData The node's pin data
 		 * @param {string} filterText Filter text for parameters
-		 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
+		 * @param {boolean} [useShort=false] Use short notation $json vs. $('NodeName').json
 		 */
 		getNodePinDataOutput(
 			nodeName: string,
@@ -382,7 +382,7 @@ export default mixins(workflowHelpers).extend({
 
 			// Get json data
 			if (outputData.hasOwnProperty('json')) {
-				const jsonPropertyPrefix = useShort === true ? '$json' : `$node["${nodeName}"].json`;
+				const jsonPropertyPrefix = useShort === true ? '$json' : `$('${nodeName}').item.json`;
 
 				const jsonDataOptions: IVariableSelectorOption[] = [];
 				for (const propertyName of Object.keys(outputData.json)) {
@@ -407,7 +407,7 @@ export default mixins(workflowHelpers).extend({
 
 			// Get binary data
 			if (outputData.hasOwnProperty('binary')) {
-				const binaryPropertyPrefix = useShort === true ? '$binary' : `$node["${nodeName}"].binary`;
+				const binaryPropertyPrefix = useShort === true ? '$binary' : `$('${nodeName}').item.binary`;
 
 				const binaryData = [];
 				let binaryPropertyData = [];
@@ -523,7 +523,7 @@ export default mixins(workflowHelpers).extend({
 
 				returnData.push({
 					name: key,
-					key: `$node["${nodeName}"].context["${key}"]`,
+					key: `$('${nodeName}').context["${key}"]`,
 					// @ts-ignore
 					value: nodeContext[key],
 				});
@@ -604,6 +604,7 @@ export default mixins(workflowHelpers).extend({
 			const currentNodeData: IVariableSelectorOption[] = [];
 
 			let tempOptions: IVariableSelectorOption[];
+
 			if (executionData !== null && executionData.data !== undefined) {
 				const runExecutionData: IRunExecutionData = executionData.data;
 
@@ -774,12 +775,7 @@ export default mixins(workflowHelpers).extend({
 					{
 						name: this.$locale.baseText('variableSelector.parameters'),
 						options: this.sortOptions(
-							this.getNodeParameters(
+							this.getNodeParameters(nodeName, `$('${nodeName}').params`, undefined, filterText),
-								nodeName,
-								`$node["${nodeName}"].parameter`,
-								undefined,
-								filterText,
-							),
 						),
 					} as IVariableSelectorOption,
 				];

packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap

@@ -94,7 +94,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="list"
                     data-path="[0].list"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.list }}"
+                    data-value="{{ $('Set').item.json.list }}"
                   >
                     "list"
                   </span>
@@ -143,7 +143,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                       data-name="list[0]"
                       data-path="[0].list[0]"
                       data-target="mappable"
-                      data-value="{{ $node.Set.json.list[0] }}"
+                      data-value="{{ $('Set').item.json.list[0] }}"
                     >
                       1
                     </span>
@@ -185,7 +185,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                       data-name="list[1]"
                       data-path="[0].list[1]"
                       data-target="mappable"
-                      data-value="{{ $node.Set.json.list[1] }}"
+                      data-value="{{ $('Set').item.json.list[1] }}"
                     >
                       2
                     </span>
@@ -227,7 +227,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                       data-name="list[2]"
                       data-path="[0].list[2]"
                       data-target="mappable"
-                      data-value="{{ $node.Set.json.list[2] }}"
+                      data-value="{{ $('Set').item.json.list[2] }}"
                     >
                       3
                     </span>
@@ -292,7 +292,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="record"
                     data-path="[0].record"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.record }}"
+                    data-value="{{ $('Set').item.json.record }}"
                   >
                     "record"
                   </span>
@@ -339,7 +339,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="name"
                     data-path="[0].record.name"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.record.name }}"
+                    data-value="{{ $('Set').item.json.record.name }}"
                   >
                     "name"
                   </span>
@@ -417,7 +417,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="myNumber"
                     data-path="[0].myNumber"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.myNumber }}"
+                    data-value="{{ $('Set').item.json.myNumber }}"
                   >
                     "myNumber"
                   </span>
@@ -467,7 +467,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="myStringNumber"
                     data-path="[0].myStringNumber"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.myStringNumber }}"
+                    data-value="{{ $('Set').item.json.myStringNumber }}"
                   >
                     "myStringNumber"
                   </span>
@@ -517,7 +517,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="myStringText"
                     data-path="[0].myStringText"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.myStringText }}"
+                    data-value="{{ $('Set').item.json.myStringText }}"
                   >
                     "myStringText"
                   </span>
@@ -567,7 +567,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="nil"
                     data-path="[0].nil"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.nil }}"
+                    data-value="{{ $('Set').item.json.nil }}"
                   >
                     "nil"
                   </span>
@@ -617,7 +617,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     data-name="d"
                     data-path="[0].d"
                     data-target="mappable"
-                    data-value="{{ $node.Set.json.d }}"
+                    data-value="{{ $('Set').item.json.d }}"
                   >
                     "d"
                   </span>

packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts

@@ -207,7 +207,7 @@ describe('Mapping Utils', () => {
 				path: ['sample', 'path'],
 			};
 			const result = getMappedExpression(input);
-			expect(result).toBe('{{ $node.nodeName.json.sample.path }}');
+			expect(result).toBe("{{ $('nodeName').item.json.sample.path }}");
 		});
 
 		it('should generate a mapped expression with mixed array path', () => {
@@ -217,7 +217,7 @@ describe('Mapping Utils', () => {
 				path: ['sample', 0, 'path'],
 			};
 			const result = getMappedExpression(input);
-			expect(result).toBe('{{ $node.nodeName.json.sample[0].path }}');
+			expect(result).toBe("{{ $('nodeName').item.json.sample[0].path }}");
 		});
 
 		it('should generate a mapped expression with special characters in array path', () => {
@@ -228,7 +228,7 @@ describe('Mapping Utils', () => {
 			};
 			const result = getMappedExpression(input);
 			expect(result).toBe(
-				"{{ $node.nodeName.json.sample['path with-space']['path-with-hyphen'] }}",
+				"{{ $('nodeName').item.json.sample['path with-space']['path-with-hyphen'] }}",
 			);
 		});
 
@@ -251,7 +251,7 @@ describe('Mapping Utils', () => {
 			};
 			const result = getMappedExpression(input);
 			expect(result).toBe(
-				"{{ $node.nodeName.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}",
+				"{{ $('nodeName').item.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}",
 			);
 		});
 

packages/editor-ui/src/utils/mappingUtils.ts

@@ -27,7 +27,8 @@ export function getMappedExpression({
 	distanceFromActive: number;
 	path: Array<string | number> | string;
 }) {
-	const root = distanceFromActive === 1 ? '$json' : generatePath('$node', [nodeName, 'json']);
+	const root =
+		distanceFromActive === 1 ? '$json' : generatePath(`$('${nodeName}')`, ['item', 'json']);
 
 	if (typeof path === 'string') {
 		return `{{ ${root}${path} }}`;