Add opt-in user preference toggle for Rapid Diffs in merge requests

Summary

Implement a user-facing toggle that allows users to opt-in to Rapid Diffs for MRs.

Requirements

  • User preference toggle in the interface to opt-in to the new experience
  • Default to existing implementation (opt-in only)
  • Toggle state persists across sessions
  • Link to feedback issue (comment)
  • Ability to toggle back to current experience
  • Tracking of enabled (comment)

Part of the rollout strategy for &18457 (closed).

Designs

Figma

Default Hover to show popover Enabled - Dropdown
image image image
  1. When Rapid Diffs enabled = false (default)
    • Add button style confirm/tertiary with label "Try Rapid Diffs"
    • Button has "Beta" badge inside it to make it fit well visually
    • When hover over button, display popover
      • Title: Improved performance loading diffs
      • Body: Speeds up diff loading and interactions when reviewing code changes.
      • "Learn more" button goes to docs
    • When clicked then rapid diffs is enabled
      • Track rapid diffs enabled
  2. When Rapid Diffs enabled = true
    • Display dropdown button "Rapid diffs"
    • When click, display dropdown menu
      • Option 1
        • Label: "Learn more"
        • Icon: help
        • Click navigates to docs
      • Option 2
        • Label: "Leave feedback"
        • Icon: comment-dots (correction: this change is not reflected in screenshots and video)
        • Click navigates to feedback issue (tbd)
      • Option 3
        • Label: "Switch to classic loading"
        • Click set Rapid Diffs as no longer enabled
          • Decrement count for rapid diffs enabled

Other notes/considerations

  1. Did consider using a toggle button but did not think that the toggle button looked nice (Figma).
  2. Did consider putting it at the top next to Edit and Code buttons for better discovery but decided to keep it closer to the diffs which is in the "Changes" tab (Figma).
Edited by Michael Le