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/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>