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
- Enable
rapid_diffs
andrapid_diffs_on_mr_show
- Visit any merge request
- Select 'Changes' tab
- Add
?rapid_diffs=true
to the URL, follow it - Collapse all files
- Search for text that is present in one of the files
- Observe scroll to the file with the match and the file in expanded state