Refactor repository browsing into Vue: Folder list

• FE Weight: 6
• BE Weight: 3

Summary

(Note: this refactoring needs to be Feature Flagged)

In order to improve the experience and performance of browsing the repository file tree, we need to refactor this into Vue.

After this, we'll be able to implement the navigation without ever refreshing the whole page.

Plan:

1. [purple] Refactor repository folder list to Vue (this issue)
2. [blue] Refactor breadcrumbs
3. [green] Refactor last commit widget
4. [yellow] Integrate project buttons (might not need to be in Vue)
5. Add navigation without page refreshes

Improvements

We believe that in this step we can improve the following:

• The time that it takes to display the information of the last commit and last modified date (performance) see issue

In the future:

• Allow for quality of life improvements like:
  • navigation without page refreshes
  • better file viewers (even quick look?)

Risks

Features at risk with this issue:

• Rendering READMEs
• Navigating the file tree of a repository

Involved components

• app/views/projects/tree/

This issue should not replace existing HAML templates, but add new Vue implementation behind a feature flag.

Optional: Intended side effects

• Opportunity to improve caching on BE
• Easier to build more improvements upon this

Optional: Missing test coverage