Refactor Repository Browser to 1 Vue Application (#5531) · Epics · GitLab.org

Refactor Repository Browser to 1 Vue Application

### Release Notes Navigating a repository just got better. The experience has been streamlined by refactoring the [BLOB]() content to a Vue application so that all files and directories in the repository reside in a single application. This has increased performance and stability of the repository tree view and made it easier to work with files. ## Summary In the hopes of streamlining the experience of navigating the repository from folder to folder and quickly rendering the blob content, refactoring the Blob content to Vue would allow us to render the blob content from within the current Vue app for the Repository. @timzallmann prepared a PoC here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52912 and the results are in this [comment]. ## Improvements * Performance: * One Vue App combining Directory browsing and File viewing * Much better caching as we cache in memory * Mouseover Preloading - We already start loading of the content before the user even clicked as the average eye to click delay is 250ms, which we already use to load the content * Offload the Code Highlighting/rendering to the Frontend (through Monaco) * this is currently super heavy and would enable us to do even more things like instant switch between viewing and editing. (see [comment](https://gitlab.com/gitlab-org/gitlab/-/issues/320925#note_514399134) by @timzallmann) * Instant editing - We simply switch the Editor from read only to edit * ~~Edit: We have since decided to [Remove Editor Lite (Source Editor) from refactor plan](https://gitlab.com/gitlab-org/gitlab/-/issues/327871) as the impact of loading the the Source Editor and it's underlying dependency Monaco is too high.~~ * ~~Going forward, we can still use the Source Editor (our wrapper for Monaco) for editing blob and we can pre-fetch the Source Editor when viewing blobs so that switching to edit mode is fast.~~ * Update: We reverted back and decided to continue to pursue the Monaco for read-only rendering of blob content, including preloading the monaco-carrying bundle ahead of time when possible. See: [Recording](https://www.youtube.com/watch?v=a2qk-2sq-yk) [Agenda](https://docs.google.com/document/d/18qidhvZksXJ7TxdgmJQEJB1IVISr-aSki00bONhbAf4/edit#heading=h.8lmil0tdof5k) * Potentially easier to incorporate more interactive viewers for each type of content ## Current situation * The directory browsing is already a Vue App * Blob viewing is a JS solution which puts pre-rendered HTML from the Server into a DOM node * We have a couple of client side file viewers (PDF) * Monaco is already used in single editing, Web IDE so its already around ## Risks * SEO: make sure that the changes don't have a negative impact ## Involved components * Make sure to port the entirety of available viewers in the HAML version: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/projects/blob/viewers/ <details><summary>Viewers</summary> | Viewer | Has client-side | Migration completed | |------------------------------------------|-------------|-------------| | _audio.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _balsamiq.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _changelog.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _contributing.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _dependency_manager.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _download.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _empty.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _gitlab_ci_yml.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _gitlab_ci_yml_loading.html.haml | <ul><li>[ ] </li></ul> |<ul><li>[ ] </li></ul> | | _highlight_embed.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _image.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _license.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _loading.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _loading_auxiliary.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _markup.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _metrics_dashboard_yml.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _metrics_dashboard_yml_loading.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _notebook.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _openapi.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _pdf.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _readme.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _route_map.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _route_map_loading.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _sketch.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _stl.html.haml |<ul><li>[x] </li></ul>| <ul><li>[ ] </li></ul> | | _svg.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _text.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | | _video.html.haml | <ul><li>[ ] </li></ul> | <ul><li>[ ] </li></ul> | </details> ## Optional: Intended side effects  ## Optional: Missing test coverage

epic