Skip to content

GitLab Next

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
GitLab FOSS
GitLab FOSS
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
    • Iterations
  • Merge Requests 0
    • Merge Requests 0
  • Requirements
    • Requirements
    • List
  • Security & Compliance
    • Security & Compliance
    • Dependency List
    • License Compliance
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • Code Review
    • Insights
    • Issue
    • Repository
    • Value Stream
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Commits
  • Issue Boards
  • GitLab.org
  • GitLab FOSSGitLab FOSS
  • Merge Requests
  • !18323

Merged
Opened Apr 11, 2018 by Phil Hughes@iamphillDeveloper

Added fuzzy file finder to web IDE

  • Overview 49
  • Commits 27
  • Pipelines 24
  • Changes 26

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 Apr 16, 2018 by Phil Hughes
Assignee
Assign to
Reviewer
Request review from
10.8
Milestone
10.8 (Past due)
Assign milestone
Time tracking
Reference: gitlab-org/gitlab-foss!18323
Source branch: ide-file-finder

Revert this merge request

This will create a new commit in order to revert the existing changes.

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.

Cherry-pick this merge request

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.