Fix merge request file path abbreviation
Problem to solve
The current file list file paths don't collapse in a way that gives a useful list of files that can easily be read.
Further details
Most files aren't in the root, and often files with the same name in different paths may be changed. We need to make sure each file can be distinguished.
Proposal
- The filename should always be shown
- The sections of the file path to show should be prioritized to reduce ambiguity
Design
- Instead of a flat list, the list of changed files is grouped by their unique folder path. This minimizes the chance of file names truncating since they are always one level deep in the UI.
-
File names - Truncate from the right - There is no optimal solution to truncating file names. The user can infer and recognize a truncated file from its parent folder. E.g.
parallel_diff_comment_row.vue
is truncated toparallel_diff_comment_r...
-
File paths - Truncate middle folders - The starting and ending folders are kept intact. The folders in the middle can be truncated as needed. E.g.
app/assets/javascripts/diffs/components/
is truncated toapp/assets/.../.../components/
- Use the ellipsis character
…
instead of three dots...
since an ellipsis is less wide.
What does success look like, and how can we measure that?
(If no way to measure success, link to an issue that will implement a way to measure this)
Links / references
Edited by Jeethu Karthik