Use client-side viewer instead of _sketch.html.haml

Summary

As part of the effort of refactoring the repository browser into a Vue app, we need to use client-side blob viewers instead of haml-based blob viewers when viewing a file via the repository bowser.

Note: Since this effort is behind a feature flag, do not remove the haml-based blob viewer as part of this issue, we will remove the unused code in a separate issue.

Improvements

• Performance:
  • One Vue App for File viewing
  • Much better caching as we cache in memory
• Offload the Code Highlighting/rendering to the Frontend (through Monaco)
• Potentially easier to incorporate more interactive viewers for each type of content

Risks

Blob viewers are an important part of the frontend and in some cases shared between multiple parts of the codebase. We need to be mindful of how the changes we make affects other parts of the frontend, it is advisable to gradually rollout this refactor behind a feature flag.

We should also be mindful of how this effort affects the overall performance of the repository browser.

Involved components

• _sketch.html.haml

• sketch/index.js

Guidelines

• example

Creating the component

⚠ Replace {viewer-name} in the examples below with the name of the blob viewer.

1. Create a new Vue component for the blob viewer:
   • e.g. app/assets/javascripts/repository/components/blob_viewers/{viewer-name}_viewer.vue
2. Ensure that the newly created component is imported:
   • e.g. {file-type}: () => import('./{viewer-name}_viewer.vue'),
   • {file-type} is the fileType that is passed from the backend.
3. Add tests for the Vue component added in the Step 1:
   • e.g. spec/frontend/repository/components/blob_viewers/{viewer-name}_viewer_spec.js

How to setup and validate locally (strongly suggested before assigning a reviewer)

This feature is behind the :refactor_blob_viewer feature flag.

1. Run rails c in the project root.
2. Run Feature.enable(:refactor_blob_viewer) in the rails console.
3. Upload the appropriate file type.
4. View the newly uploaded file and ensure that it works as expected.