Introduction

I’ve recently worked on a project which had a large number of active Pull Requests in Azure DevOps. There are many reasons this isn’t ideal, but one problem it causes is that it’s hard to see what needs prioritising when reviewing Pull Requests. To solve this problem, the team would add tags to the Pull Requests to indicate which release the code was expected to be part of.

I set up some Stylus rules to help me more easily distinguish the different Pull Requests, and identify ones which need my attention.

Votes from other people

The team I was working with required 2 reviews on each Pull Request. I didn’t want to waste my time reviewing Pull Requests which already had 2 approvals. I also didn’t want to review Pull Requests where someone else had already left feedback that was being worked through, as I knew the code would be changing anyway and would therefore need re-reviewing before long.

I couldn’t find a way to write a CSS selector for a Pull Request which has 2 approvals, so I settled for identifying Pull Requests which have 2 reviews, at least one of which is an approval. The green background indicates an approved Pull Request, and the orange background indicates someone is waiting for the author to make changes. The first row shows the default Azure DevOps styling when using dark mode, and the single approval has not changed that styling.

To achieve this styling, the following snippet can be imported into Stylus.

@-moz-document regexp("https://dev.azure.com/.*/pullrequests.*") {
/* Highlight PRs which already have at least 2 reviewers, at least one of whom has approved the PR. */
/* Would like to refine this so it only highlights the PR if both reviewers have approved,
   but not sure how as the :has selectors cannot be nested. */
.bolt-table-row:has(.pr-reviewer:nth-child(2)):has(.repos-pr-reviewer-vote.approved) {
    background: #00800040;
    /* Alternative styling: green diagonal stripes */
    /*background: repeating-linear-gradient(
      -45deg,
      #60bc6542,
      #60bc6542 10px,
      #00800040 10px,
      #00800040 20px
  );*/
}

/* Highlight PRs where a reviewer is waiting for the author */
.bolt-table-row:has(.repos-pr-reviewer-vote.waiting) {
    /* Using !important as a lazy way to override the more specific selector above if a PR has one approval and one reviewer waiting for the author */
    background: #ffa5003d !important;
}
}

Release Tags

I wanted to be able to quickly spot Pull Requests belonging to specific releases. At any given point in time, there would be 3 releases I was interested in - one each for deployments to each of 3 different environments (UAT, QA, dev).

I wanted styling which would make it easy to identify these tags on the Pull Requests screen, and would also remind me which environment each Pull Request was related to. This stylus rule needs updating over time as the releases progress through the different environments, but it’s a simple change to increment the numbers.

To achieve this styling, the following snippet can be imported into Stylus.

@-moz-document regexp("https://dev.azure.com/.*/pullrequest.*") {
/* Using ^= so that it highlighted "Release XX Provisional" as well as "Release XX" */

/* Common ::after styles */
.bolt-pill:has([aria-label^="Release 81"])::after,
.bolt-pill:has([aria-label^="Release 82"])::after,
.bolt-pill:has([aria-label^="Release 83"])::after {
    padding: 2px 4px;
    display: inline-block;
}

/* UAT release - solid red */
.bolt-pill:has([aria-label^="Release 81"]) {
    border: 3px solid white;
    background: red;
}

.bolt-pill:has([aria-label^="Release 81"])::after {
    content: 'UAT';
    border-left: 3px solid white;
}

/* QA release - red border */
.bolt-pill:has([aria-label^="Release 82"]) {
    border: 3px solid red;
}

.bolt-pill:has([aria-label^="Release 82"])::after {
    content: 'QA';
    border-left: 3px solid red;
}

/* Dev release - dotted orange border */
.bolt-pill:has([aria-label^="Release 83"]) {
    border: 2px dotted orange;
}

.bolt-pill:has([aria-label^="Release 83"])::after {
    content: 'Dev';
    border-left: 2px dotted orange;
}
}