File browser in merge request
Small code changes < 100 lines total can touch 10-20 files including tests, which can be hard to review as a page of diffs requiring me to scroll up and down. It becomes exponentially harder as the change grows larger. There are a few reasons it is hard not to get lost even in small changes:
- location of changes relative to project structure is hard to understand: I don't think of the project as an alphabetically sorted list of files but a tree that shows structure
- location of change relative to other files in the change: I don't know many files I have reviewed and how many more there are to go, besides trying to use the browser scroll bar to gauge progress
- switching between files: I need to be able to jump between files to compare a new function added in one place, and how it is used elsewhere in the change.
The proposal to add a file browser that is always visible side by side with the changes could help solve these problems.
Initially requested by https://gitlab.zendesk.com/agent/tickets/16909:
Customer would like a file browser, or access to the file browser, in a merge request. For large change sets they believe this would give a nicer overview of everything. Stash offers something similar.
Another customer:
One of the things that I have grown to appreciate while using Phabricator's code review tool is the file tree view that (optionally) sits to the left of the diff. Not only does this provide a high-level outline of the structure of the patch, but it also updates to reflect one's current location. Our project typically sees rather large patches on large source files, so this view provides an easy way to orient oneself during review.
Phabricator | Atlassian Stash | gitlabtree | Cimpress Chrome extension |
---|---|---|---|
Proposal
Add a way of viewing the list of changed files that is:
- always visible (user can show/hide, but selecting a file doesn't dismiss it)
- option to view as:
- list of changed file
- tree of changed files
- tree of all files with changed files highlighted
Designs
Inline | Side-by-side | Search results | No results |
---|---|---|---|
Design notes
- File browser width = 320px
- The file list should be vertically and horizontally scrollable if the content were to overflow.
- The filter bar at the top is excluded from the scroll area and it should remain fixed.
- All the directories in the file tree should be fully expanded on page load i.e. all the files should be visible.
- When scrolling the MR page, there will be 3 fixed elements…
- Navigation tab bar consisting of the tabs discussion, commits, etc.
- Changes toolbar with “changes between”, inline/side-by-side toggle, etc.
- File browser - The file browser can have a fluid height when the page is scrolled to the top.