feat: added focus for qb search for last search bar (#4534)

This commit is contained in:
Vikrant Gupta 2024-02-14 12:49:24 +05:30 committed by GitHub
parent d6b7587bbe
commit 037f5ae4c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 3 deletions

View File

@ -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',
};

View File

@ -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={{