Add viewed checkbox to Rapid Diffs diff files

What does this MR do and why?

For #499293 (closed)

Implements the "Viewed" checkbox for diff files in Rapid Diffs MR pages, allowing users to mark files as reviewed. This matches the existing functionality in the legacy diffs view.

Key implementation details:

  • Checkbox state persists to localStorage via the existing useCodeReview Pinia store
  • FOUC prevention: An early inline script reads localStorage and injects <style> tags to hide viewed file details before the page renders
  • Each file identified by code_review_id attribute for state management
  • Viewed toggle is rendered via MergeRequestDiffFileComponent using the before_file_menu slot, keeping the feature isolated to MR-specific code
  • User-initiated collapse (via viewed checkbox) uses COLLAPSE_FILE_BY_USER to preserve scroll position; mount-time collapse uses COLLAPSE_FILE without scrolling
  • A guard in setMrPath prevents legacy mr_notes/init.js from clobbering the store path with undefined on Rapid Diffs pages

Note: The keyboard shortcut for toggling viewed state is not implemented as global keyboard shortcuts for file navigation do not exist in Rapid Diffs yet.

References

Screenshots or screen recordings

Before After
This feature did not exist in Rapid Diffs before. For the non-rapid diffs implementation, you can view any MR (including this one) on production.

How to set up and validate locally

  1. Enable the Rapid Diffs feature flag:
    Feature.enable(:rapid_diffs)
  2. Navigate to any MR's Changes tab with ?rapid_diffs=true query parameter
  3. Check the "Viewed" checkbox on a diff file
  4. Verify the file collapses and state persists on page refresh

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Randolph

Merge request reports

Loading