Implement shortcuts in the repository file tree browser

Context

This is part of a bigger effort to implement a file tree browser (FTB) in the repository. The keyboard shortcuts should be consistent with the shortcuts used in the Merge Request > Diffs tab file tree browser.

Keyboard shortcuts

From Code Review #545036 (comment 2657505404) / !199595 (merged):

  • f will always open file browser and focus the search field
  • shift+f will only toggle file browser visibility
  • Whenever filter is in focus, key navigates to the first item in the list. Users can use ↓↑ arrow keys to navigate the filter list. See example gitlab-ui!5061 (merged) (merged). See here for explanation

Hover state

See #545036 (comment 2682662925)

With the recent changes in !199595 (merged) from Code Review, it seems like a tooltip also appears on hover to communicate the shortcuts to users. Source Code should remain consistent with this as well.

MRs: Hover on open file tree MRs: Hover on closed file tree
open.png closed.png
Edited by 🤖 GitLab Bot 🤖