Fuzzy file finder in the merge request
Problem to solve
Efficiently navigating merge request diffs is critical to efficient code review. Software engineers should be able to jump between any file quickly and easily using mouse or keyboard. Currently there is no way to efficiently move between files using the keyboard. Implementing the fuzzy file finder pattern will enable this very useful pattern.
Target audience
As a software engineer, when I am reviewing code I want to be able to quickly jump between files using keyboard shortcuts so that I can quickly move from one file to another based on file name.
Further details
As a secondary goal, the fuzzy file finder provides a pattern for introducing the ability view unchanged files in the merge request. https://gitlab.com/gitlab-org/gitlab-ce/issues/52501
In this first iteration the fuzzy file finder should be limited to only changed files.
Proposal
When viewing a merge request (not only the Changes tab), I should be able to launch the fuzzy file finder to jump to a file in the changes tab.
The fuzzy file finder should:
- show the diff stats
- only show changed files
Designs
| Changes tab | File finder |
|---|---|
 |
 |
- Keyboard shortcuts
-
Cmd+P- Opens the file finder -
Esc- Hides the file finder -
↑or↓- To scroll through the list of files -
Enter- Select a file
-
- The file finder should work from any tab in the merge request page.
- The placeholder text of search field in the changes tab should be changed to
Search files(as per the design guidelines). The right end of the field should display the keyboard shortcut for affordance. - Clicking on the search field should make the file finder appear instantly. The search field, therefore, is not really an input field but a button.
- When the file finder appears, the search field should be in focus.
- When there is no input, the file finder should list the changed file in alphabetical order.
- The file finder should always remember the last searched text, the list of results and the file that was selected by the user.
- When scrolling through the list of files with
↑or↓keys, the search field should retain the focus. - The UI closely resembles the Web IDE implementation of the file finder with the addition of the search icon, a button to clear the text (appears when there is text in the input box) and lines changed states for the files in the list.
What does success look like, and how can we measure that?
This is a combination of UI polish and enablement for https://gitlab.com/gitlab-org/gitlab-ce/issues/52501. Success can be measured by measuring the usage of https://gitlab.com/gitlab-org/gitlab-ce/issues/52501 and qualitative feedback from customers about the merge request interface.