Skip to content

Added fuzzy file finder to web IDE

Phil Hughes requested to merge ide-file-finder into master

What does this MR do?

Adds a fuzzy file finder to the web IDE.

For performance this uses a virtual scroller. This ensures the DOM doesn't get overwhelmed with too many elements & cause the browser to crash. This in increases the performance by only rendering what the user can see.

For search it uses fuzzaldrin which ranks each item & then returns an array sorted by this ranking.

Each file has a lastOpenedAt unix timestamp attached to it which gets updated when a file is made active. This number is then used to order the initial files in the dropdown before filtering. Files opened more recently are sorted to the top of the list.

Different key commands open the dropdown. These are t, cmd p & ctrl p, these work when the editor is open & closed. esc key closes the dropdown as well as clicking outside of it. Full keyboard navigation is also available with the arrow keys changing the focused item up & down & then enter opening the selected file.

Screenshots (if relevant)

2018-04-12_09.45.44

What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/44841

Edited by Phil Hughes

Merge request reports