Render blame info in the Source Viewer when viewing JSON files (behind a feature flag)
Summary
As part of rendering Blame file information within the Blob viewer frontend app we should ensure the Blame Info Vue component is rendered in the Source Viewer component.
Things to keep in mind
- We should request the blame information in batches as the user scrolls to keep the performance impact in the API to a minumium.
- We should minimize the performance impact on the frontend by lazy loading the blame info component (i.e. only load/bootstrap it once the user expands the gutter containing blame information).
- Once the gutter containing the blame information is expanded we should optimize the rendering of the blame information by only requesting/rendering information that is visible to the user, this can be achieved by leveraging the IntersectionObserver API
- Ensure we haven't broken any other blob-related features (e.g. line permalinks, highlighting ranges etc.)
Relevant links
- See the related Epic for more context.
- See this POC to get an idea of what we're working towards (subject to change)
Availability and Testing
Add feature specs for new controls for viewing and closing blame information from the blob viewer. Ensure E2E package and test is passing in MRs to ensure no regressions with the blob viewer. Exploratory testing of feature. May need to consider E2E test if adequate feature spec coverage can't be achieved.
Edited by Jay McCure