Code review is at the heart of building quality software. It’s a critical step to ensure your code won’t cause issues down the line. But in the new world of automation, code review can feel like the slowest part of the software delivery process. It depends on another person taking time out of their day to give you feedback and check your work. Additionally, working within a pull request can be cumbersome and hard to navigate, slowing this process even further.
To solve this, we’ve set out to reimagine code review in Bitbucket from the ground up. And today, we’re excited to share the first milestone with you, a new pull request experience, now available as an opt-in beta feature.
A new code-first design
To help reviewers assess changes quickly, we've historically taken a "code first" design approach for the pull request view. Bitbucket displays the diff front and center so reviewers don't need to click around to see what's changed and provide feedback.
Today, we're taking this concept a huge step further: we've redesigned the pull request view to display everything the reviewer needs on a single page, without tabs.
Through several rounds of user testing, we optimized the new design around improving navigability for the reviewer. We’ve seen reviewers reduce their time-to-approve by 21% compared to the existing UI.
Let's check out the key features that help reviewers evaluate changes quickly to help deliver value to your customers faster.
Sidebar with file tree
Just like the sidebar in the new source browser, the pull request sidebar groups information into collapsible cards for quick reference at any time. One of these cards is the brand new file tree for navigating between files in the diff. Now, you can jump between files without having to scroll back to the top of the page:
Files are organized into collapsible folders in a familiar layout, and files are marked with comment counts and conflict markers so they can be addressed. If a filename is truncated, hover over the filename to reveal a tooltip with the full filename or click-and-drag the edge of the sidebar to reveal more of the tree:
You can also collapse and expand the sidebar by clicking on its edge or using the ] keyboard shortcut.
Sticky action header as you scroll
The redesigned header remains sticky to the top as you scroll down the page. Now you can easily approve or merge the PR once you've finished reviewing:
Sticky file headers and file tree highlighting as you scroll
Similarly, diff file headers are also sticky to the top of the page as you scroll so you don't lose your place viewing long diffs. And to further reinforce this, the current file is highlighted in the file tree as you scroll:
Before, it was easy to lose your place when reviewing long or similar files. Now it's always clear which file you're viewing.
Collapsible diffs
Each file's diff is collapsible so you can mark your progress and reduce scrolling as you move through the review.
And each diff's side-by-side view is now available inline, instead of in a modal window:
Try the new pull request experience today
We'd love your team to try out the new view and give us your feedback! To enable the new view:
- Click your avatar in the Bitbucket sidebar
- Select Bitbucket Labs
- Enable the New pull request experience feature
This opt-in release is a beta, and we are still working to bring some existing features over to the new view. We've made it easy to temporarily switch back to the old view using the "temporarily disable the new UI" link in the Feedback card at the bottom of the sidebar:
If you're not using Bitbucket yet but you're excited to try the new experience, sign up today!
Discuss the new code review experience with the Bitbucket Community and Alastair Wilkes (Bitbucket PM) here
