From 7025efe8654a8a55ff10e2105ddc6ce2dc5a89d6 Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Thu, 16 Mar 2023 14:10:30 +0100
Subject: [PATCH] fix(editor): Properly handle mapping of dragged expression if
 it contains hyphen (#5703)

---
 .../src/utils/__tests__/mappingUtils.test.ts  | 57 ++++++++++++++++++-
 packages/editor-ui/src/utils/mappingUtils.ts  |  2 +-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts b/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts
index c1c768397fbee..8ca79a9a90bc3 100644
--- a/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts
+++ b/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts
@@ -1,5 +1,5 @@
 import { INodeProperties } from 'n8n-workflow';
-import { getMappedResult } from '../mappingUtils';
+import { getMappedResult, getMappedExpression } from '../mappingUtils';
 
 const RLC_PARAM: INodeProperties = {
 	displayName: 'Base',
@@ -199,4 +199,59 @@ describe('Mapping Utils', () => {
 			expect(getMappedResult(RLC_PARAM, '{{ test }}', '=test')).toEqual('=test {{ test }}');
 		});
 	});
+	describe('getMappedExpression', () => {
+		it('should generate a mapped expression with simple array path', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 2,
+				path: ['sample', 'path'],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe('{{ $node.nodeName.json.sample.path }}');
+		});
+
+		it('should generate a mapped expression with mixed array path', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 2,
+				path: ['sample', 0, 'path'],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe('{{ $node.nodeName.json.sample[0].path }}');
+		});
+
+		it('should generate a mapped expression with special characters in array path', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 2,
+				path: ['sample', 'path with-space', 'path-with-hyphen'],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe(
+				'{{ $node.nodeName.json.sample["path with-space"]["path-with-hyphen"] }}',
+			);
+		});
+
+		it('should generate a mapped expression with various path elements', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 1,
+				path: ['propertyName', 'capitalizedName', 'hyphen-prop'],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe('{{ $json.propertyName.capitalizedName["hyphen-prop"] }}');
+		});
+
+		it('should generate a mapped expression with a complex path', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 1,
+				path: ['propertyName', 'capitalizedName', 'stringVal', 'some-value', 'capitalizedProp'],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe(
+				'{{ $json.propertyName.capitalizedName.stringVal["some-value"].capitalizedProp }}',
+			);
+		});
+	});
 });
diff --git a/packages/editor-ui/src/utils/mappingUtils.ts b/packages/editor-ui/src/utils/mappingUtils.ts
index e62c90443a0f6..358ceed3130f0 100644
--- a/packages/editor-ui/src/utils/mappingUtils.ts
+++ b/packages/editor-ui/src/utils/mappingUtils.ts
@@ -6,7 +6,7 @@ export function generatePath(root: string, path: Array<string | number>): string
 			return `${accu}[${part}]`;
 		}
 
-		if (part.includes(' ') || part.includes('.')) {
+		if (part.includes('-') || part.includes(' ') || part.includes('.')) {
 			return `${accu}["${part}"]`;
 		}