From 037f5ae4c86e98fb22f4182e2bd0de1a962c46da Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Wed, 14 Feb 2024 12:49:24 +0530
Subject: [PATCH] feat: added focus for qb search for last search bar (#4534)

---
 .../shortcuts/logsExplorerShortcuts.ts        |  2 +-
 .../filters/QueryBuilderSearch/index.tsx      | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
index a9c22be550..89cd0641d4 100644
--- a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
+++ b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
@@ -5,5 +5,5 @@ export const LogsExplorerShortcuts = {
 
 export const LogsExplorerShortcutsDescription = {
 	StageAndRunQuery: 'Stage and Run the current query',
-	FocusTheSearchBar: 'Shift the focus to the filter bar',
+	FocusTheSearchBar: 'Shift the focus to the last query filter bar',
 };
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index d03c1e3db4..46d535737a 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -2,13 +2,16 @@ import './QueryBuilderSearch.styles.scss';
 
 import { Select, Spin, Tag, Tooltip } from 'antd';
 import { OPERATORS } from 'constants/queryBuilder';
+import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { getDataTypes } from 'container/LogDetailedView/utils';
+import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import {
 	useAutoComplete,
 	WhereClauseConfig,
 } from 'hooks/queryBuilder/useAutoComplete';
 import { useFetchKeysAndValues } from 'hooks/queryBuilder/useFetchKeysAndValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { isEqual } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	KeyboardEvent,
@@ -75,7 +78,9 @@ function QueryBuilderSearch({
 		searchKey,
 	);
 
-	const { handleRunQuery } = useQueryBuilder();
+	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+
+	const { handleRunQuery, currentQuery } = useQueryBuilder();
 
 	const onTagRender = ({
 		value,
@@ -197,9 +202,32 @@ function QueryBuilderSearch({
 		});
 
 		onChange(initialTagFilters);
-		/* eslint-disable react-hooks/exhaustive-deps */
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [sourceKeys]);
 
+	const isLastQuery = useMemo(
+		() =>
+			isEqual(
+				currentQuery.builder.queryData[currentQuery.builder.queryData.length - 1],
+				query,
+			),
+		[currentQuery, query],
+	);
+
+	useEffect(() => {
+		if (isLastQuery) {
+			registerShortcut(LogsExplorerShortcuts.FocusTheSearchBar, () => {
+				// set timeout is needed here else the select treats the hotkey as input value
+				setTimeout(() => {
+					selectRef.current?.focus();
+				}, 0);
+			});
+		}
+
+		return (): void =>
+			deregisterShortcut(LogsExplorerShortcuts.FocusTheSearchBar);
+	}, [deregisterShortcut, isLastQuery, registerShortcut]);
+
 	return (
 		<div
 			style={{