fix: Add back mapping hint when parameter is focused (#4634)

Author: mutdmour

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

@@ -53,7 +53,7 @@
 										:class="{
 											[$style.header]: true,
 											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]: i === activeColumn && mappingEnabled,
+											[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
@@ -202,6 +202,7 @@ export default mixins(externalHooks).extend({
 	data() {
 		return {
 			activeColumn: -1,
+			forceShowGrip: false,
 			draggedColumn: false,
 			draggingPath: null as null | string,
 			hoveringPath: null as null | string,
@@ -234,6 +235,9 @@ export default mixins(externalHooks).extend({
 		tableData(): ITableData {
 			return this.convertToTable(this.inputData);
 		},
+		focusedMappableInput(): string {
+			return this.ndvStore.focusedMappableInput;
+		},
 	},
 	methods: {
 		shorten,
@@ -494,6 +498,16 @@ export default mixins(externalHooks).extend({
 			this.$emit('displayModeChange', 'json');
 		},
 	},
+	watch: {
+		focusedMappableInput(curr: boolean) {
+			setTimeout(
+				() => {
+					this.forceShowGrip = !!this.focusedMappableInput;
+				},
+				curr ? 300 : 150,
+			);
+		},
+	},
 });
 </script>