Expand Diff File collapsed UI to be significantly more obvious
What does this MR do?
For #16047 (closed)
This is one MR in a sequence to improve the way collapsed files are handled in Merge Request diffs.
To create the smallest impact possible, it's broken up into a few steps.
| Step | MR | Description |
|---|---|---|
| 1 | !43296 (merged) | Refactor the existing collapsed flags into something more accurate, like automaticallyCollapsed This will leave a small inconsistency where user-collapsed files will be toggling the automaticallyCollapsed property. |
| 2 | !43911 (merged) | Add a flag like userCollapsed alongside the auto flag This will require Vuex actions, mutations, getters ("how many of each type?"), etc. Update the UI to use both flags This will require some resolution code ("which flag wins?"), and various tweaks to the UI code Modify collapsed files to hide the body on userCollapsed and show the warning on automaticallyCollapsed
|
| 3.1 | !46258 (merged) | Extract translations to the shared i18n file for Diffs |
| 3.2 | We're here |
Taller, orange warning when files are automatically collapsed |
This MR increases the vertical height of automatically collapsed files and their visibility by coloring their background orange and making the expand file control a button.
Screenshots (strongly suggested)
| Media | |
|---|---|
| All types of files (expand by default, too large to display, collapse by default) |  |
| An auto-collapsed file |  |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry - [-] Documentation (if required)
-
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
- [-] Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
- [-] Label as security and @ mention
@gitlab-com/gl-security/appsec - [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
- [-] Security reports checked/validated by a reviewer from the AppSec team
Edited by Thomas Randolph