Skip to content

Use <details> for Rapid Diffs file body

What does this MR do and why?

This MR adds <details> element to toggle diff file contents in Rapid Diffs.

<details> element allows us to search the text when the contents are collapsed. This is a perfect match for collapsed diff files because even in the collapsed state we can still search for references.

Searching on the page would automatically expand diff files if there's a match. The files stay collapsed unless we navigate to the search match. For example if we have 100 files matching the same query only the first file would expand because it's the first in navigation.

Screenshots or screen recordings

Before After
Screen_Recording_2025-06-23_at_10.16.19 Screen_Recording_2025-06-23_at_10.12.46

How to set up and validate locally

  1. Enable rapid_diffs and rapid_diffs_on_mr_show
  2. Visit any merge request
  3. Select 'Changes' tab
  4. Add ?rapid_diffs=true to the URL, follow it
  5. Collapse all files
  6. Search for text that is present in one of the files
  7. Observe scroll to the file with the match and the file in expanded state

Merge request reports

Loading