Navigate query history with Up/Down arrow keys#26484
Open
kmerz wants to merge 2 commits into
Open
Conversation
When the search bar input is focused and contains a single-line query, Up/Down arrows cycle through history inline (terminal-style). The original query is restored when navigating back past the most recent entry. Multiline queries retain normal cursor movement.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds terminal-like inline query history navigation to the search bar query input: when the editor contains a single-line query, ↑/↓ cycle through query history entries without opening the history UI, while multiline queries keep default cursor navigation.
Changes:
- Add
ArrowUp/ArrowDownACE commands to navigate query history inline for single-line queries. - Extract and export
fetchRawQueryHistory()to share history fetching between the history dropdown and new inline navigation. - Extend hotkey help metadata and add unit tests for the new navigation behavior.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
graylog2-web-interface/src/views/components/searchbar/ViewsQueryInput.test.tsx |
Adds unit tests for inline query history navigation and mocks history fetching. |
graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx |
Implements ↑/↓ history navigation commands and tracks navigation state in refs. |
graylog2-web-interface/src/views/components/searchbar/queryinput/ace-types.ts |
Extends ACE Editor typing to support on('change'), navigateUp/Down, and setValue cursor arg. |
graylog2-web-interface/src/views/components/searchbar/QueryHistoryButton.tsx |
Refactors history fetching into fetchRawQueryHistory() and reuses it for completions. |
graylog2-web-interface/src/contexts/HotkeysProvider.tsx |
Adds up/down actions to the Query Input hotkeys collection for the help modal. |
changelog/unreleased/issue-26472.toml |
Adds an unreleased changelog entry for the new shortcut behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+335
to
+347
| if (historyEntriesRef.current.length === 0) { | ||
| historyEntriesRef.current = await fetchRawQueryHistory(); | ||
| } | ||
|
|
||
| if (historyEntriesRef.current.length === 0) return; | ||
|
|
||
| const nextIndex = Math.min(historyIndexRef.current + 1, historyEntriesRef.current.length - 1); | ||
|
|
||
| if (nextIndex === historyIndexRef.current) return; | ||
|
|
||
| if (historyIndexRef.current === -1) { | ||
| savedQueryRef.current = editor.getValue(); | ||
| } |
Comment on lines
+250
to
+261
| it('does not navigate history when ArrowDown is pressed without prior ArrowUp', async () => { | ||
| const onChange = jest.fn().mockResolvedValue(''); | ||
| render(<SimpleQueryInput onChange={onChange} />); | ||
|
|
||
| const queryInput = await findQueryInput(); | ||
| queryInput.focus(); | ||
| await userEvent.keyboard('{ArrowDown}'); | ||
|
|
||
| // onChange is not called because the Down command falls through to ACE line navigation | ||
| expect(onChange).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
When the most-recently executed query is still in the editor, the first Up press now skips history[0] and lands on history[1] so the user always sees a visible change. Down navigates back symmetrically, restoring the original query in one step. Adds two tests covering this scenario.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
When the search bar query input is focused and contains a single-line query, the Up and
Down arrow keys now cycle through query history inline — similar to a terminal's command
history.
↑enters history mode and walks backwards through entries (most recent first); pressingrepeatedly advances to older entries
↓walks forward again; one step past the most recent entry restores the originally-typedquery and exits history mode
↑startsfresh from the top
The new shortcuts are also listed in the keyboard shortcut help modal under Query Input.
Motivation and Context
Fixes #26472
Reaching query history currently requires either clicking the history icon, pressing
Alt+Shift+H, or pressingCtrl+Spacewith an empty input. None of these match the musclememory most users have from terminal use. The
↑key is the most natural way to recall aprevious command.
How Has This Been Tested?
ViewsQueryInput.test.tsxcovering: entering history on↑, advancingto older entries, returning on
↓, restoring the original query when navigating back past thenewest entry, no-op
↓without prior↑, and clamping at the oldest entry withoutwrap-around.
↑shows most recent entry; repeated↑walks back;↓returns toward present;
↓past newest restores the original query; multiline query → arrowkeys move the cursor normally;
Alt+Shift+Hand history button still work as before.Screenshots (if appropriate):
Types of changes
Checklist: