From b35172e442a131f76c2d902d451356ab937bba48 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 17 Nov 2022 13:57:29 +0100
Subject: [PATCH] fix: Add back mapping hint when parameter is focused (#4634)

---
 .../editor-ui/src/components/RunDataTable.vue    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index e7be285f8c..97b0493a68 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/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>