feat(editor): Help users discover expressions when using drag n drop (#8869)

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

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.jsonDisplay">
+	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
 			<RunDataJsonActions
 				v-if="!editMode.enabled"
@@ -157,6 +157,9 @@ export default defineComponent({
 		jsonData(): IDataObject[] {
 			return executionDataToJson(this.inputData);
 		},
+		highlight(): boolean {
+			return !this.ndvStore.isMappingOnboarded && Boolean(this.ndvStore.focusedMappableInput);
+		},
 	},
 	methods: {
 		getShortKey(el: HTMLElement): string {
@@ -200,7 +203,9 @@ export default defineComponent({
 
 			setTimeout(() => {
 				void this.externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
-				this.$telemetry.track('User dragged data for mapping', telemetryPayload);
+				this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
+					withPostHog: true,
+				});
 			}, 1000); // ensure dest data gets set if drop
 		},
 		getContent(value: unknown): string {
@@ -232,20 +237,22 @@ export default defineComponent({
 			opacity: 1;
 		}
 	}
-}
 
-.mappable {
-	cursor: grab;
+	.mappable {
+		cursor: grab;
 
-	&:hover {
-		background-color: var(--color-json-highlight);
+		&:hover {
+			background-color: var(--color-json-highlight);
+		}
 	}
-}
 
-.dragged {
-	&,
-	&:hover {
-		background-color: var(--color-primary-tint-2);
+	&.highlight .mappable,
+	.dragged {
+		&,
+		&:hover {
+			background-color: var(--color-primary-tint-2);
+			color: var(--color-primary);
+		}
 	}
 }
 </style>