From 6d4e9598846c9c2eb128ce039d4aeae080178627 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 1 Dec 2022 09:33:34 +0100
Subject: [PATCH] fix(editor): JSON view values can be mapped like keys (#4702)

* fix(editor): JSON view values can be mapped like keys, resolving to the same expression

* fix(editor): JSON view list item draggable pill name
---
 packages/editor-ui/src/components/RunData.vue |  1 -
 .../editor-ui/src/components/RunDataJson.vue  | 21 ++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index a2e55fe35..2f4d3412c 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -239,7 +239,6 @@
 				class="ph-no-capture"
 				:paneType="paneType"
 				:editMode="editMode"
-				:currentOutputIndex="currentOutputIndex"
 				:sessioId="sessionId"
 				:node="node"
 				:inputData="inputData"
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 643145670..f9cfee570 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -16,7 +16,6 @@
 			:disabled="!mappingEnabled"
 			@dragstart="onDragStart"
 			@dragend="onDragEnd"
-			ref="draggable"
 		>
 			<template #preview="{ canDrop, el }">
 				<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
@@ -47,7 +46,19 @@
 					>"{{ node.key }}"</span>
 					</template>
 					<template #nodeValue="{ node }">
-						<span>{{ getContent(node.content) }}</span>
+						<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
+						<span
+							v-else
+							data-target="mappable"
+							:data-value="getJsonParameterPath(node.path)"
+							:data-name="getListItemName(node.path)"
+							:data-path="node.path"
+							:data-depth="node.level"
+							:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+						>{{ getContent(node.content) }}</span>
 					</template>
 				</vue-json-pretty>
 			</template>
@@ -81,9 +92,6 @@ export default mixins(externalHooks).extend({
 		editMode: {
 			type: Object as () => { enabled?: boolean; value?: string; },
 		},
-		currentOutputIndex: {
-			type: Number,
-		},
 		sessionId: {
 			type: String,
 		},
@@ -197,6 +205,9 @@ export default mixins(externalHooks).extend({
 		getContent(value: unknown): string {
 			return isString(value) ? `"${ value }"` : JSON.stringify(value);
 		},
+		getListItemName(path: string): string {
+			return path.replace(/^(\["?\d"?]\.?)/g, '');
+		},
 	},
 });
 </script>