Add region filter to PR list (#1545)

This allows linking to a region-specific page, as well as filtering within the page.

Author: illicitonion

org-cyf-theme/assets/custom-scripts/reviews/index.mjs

@@ -36,9 +36,14 @@ function computeStatusClass(awaitingReview) {
 const state = {
   "prs": null,
   "reviewer_filter": "",
+  "region_filter": "",
 }
 
 async function onLoad() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const region = urlParams.get("region");
+  state.region_filter = region;
+
   render();
   state.prs = (await fetchPrsWithoutLoadingReviews()).filter((pr) => pr.status === "Needs Review");
   render();
@@ -47,6 +52,18 @@ async function onLoad() {
 }
 
 function render() {
+  const regionSelect = document.querySelector("#region-filter");
+  regionSelect.textContent = "";
+  regionSelect.appendChild(makeRegionOption("All Regions", ""));
+  for (const region of Object.keys(regionAliases)) {
+    regionSelect.appendChild(makeRegionOption(region, region));
+  }
+  regionSelect.appendChild(makeRegionOption("Unknown", "Unknown"));
+  regionSelect.addEventListener("change", (event) => {
+    state.region_filter = event.target.value;
+    render();
+  });
+
   if (state.prs === null) {
     document.querySelector("#pr-list").innerText = "Loading...";
     return;
@@ -66,6 +83,9 @@ function render() {
   }
 
   for (const pr of state.prs) {
+    if (state.region_filter && !regionMatches(state.region_filter, pr.title)) {
+      continue;
+    }
     for (const review of pr.reviews) {
       if (!review.isPrAuthor) {
         reviewers.add(review.userName);
@@ -163,6 +183,36 @@ function render() {
   }
 }
 
+const regionMatches = (regionToFilter, prTitle) => {
+  if (regionToFilter == "Unknown") {
+    for (const region of Object.keys(regionAliases)) {
+      if (regionMatches(region, prTitle)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  const lowerParts = prTitle.toLowerCase().split("|").map((part) => part.trim());
+  for (const alias of [regionToFilter, ...regionAliases[regionToFilter]]) {
+    const lowerAlias = alias.toLowerCase();
+    for (const lowerPart of lowerParts) {
+      if (lowerPart == lowerAlias) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+const regionAliases = {
+  "Cape Town": ["South Africa", "SouthAfrica", "ZA", "ZA Cape Town"],
+  "Glasgow": ["Scotland"],
+  "London": [],
+  "North West": ["NW", "Manchester"],
+  "Sheffield": [],
+  "West Midlands": ["WM", "WestMidlands", "West-Midlands"],
+}
+
 const fillWithModuleHeading = (container, module, pending) => {
   container.innerText = "";
   const link = document.createElement("a");
@@ -172,6 +222,14 @@ const fillWithModuleHeading = (container, module, pending) => {
   container.append(link, text);
 }
 
+const makeRegionOption = (label, value) => {
+  const option = document.createElement("option");
+  option.textContent = label;
+  option.value = value;
+  option.selected = state.region_filter === value;
+  return option;
+}
+
 onLoad();
 
 document.querySelector("#reviewer-filter").addEventListener("keyup", (event) => {

org-cyf-theme/layouts/_default/needs-review.html

@@ -8,6 +8,7 @@
   <div id="overview" class="c-pr-overview"></div>
 
   <label for="reviewer-filter" class="is-invisible">Filter by reviewer</label><input id="reviewer-filter" name="reviewer-filter" list="known-reviewers" placeholder="Filter by reviewer" size="10" style="width: unset; margin-bottom: 1em;" /><datalist id="known-reviewers"></datalist>
+  <label for="region-filter" class="is-invisible">Filter by region</label><select id="region-filter" name="region-filter" style="width: unset; margin-bottom: 1em; font: inherit; padding: 0.25em 0.5em; border: 1px solid #ccc; border-radius: 4px; background: white; height: 2em;"></select>
 
   <div id="pr-list">Loading...</div>