feat: clean and release PR Lookup

package.json

@@ -8,12 +8,12 @@
     "@electron/github-app-auth": "^1.2.0",
     "@octokit/rest": "^18.3.5",
     "diff": "^5.1.0",
-    "dompurify": "^2.3.0",
+    "dompurify": "^3.0.6",
     "expiry-map": "^2.0.0",
     "express": "^4.17.1",
     "express-handlebars": "^5.2.0",
     "express-paginate": "^1.0.2",
-    "jsdom": "^16.6.0",
+    "jsdom": "^23.0.1",
     "markdown-it": "^12.1.0",
     "node-fetch": "^2.6.1",
     "p-memoize": "^4.0.1",

src/data.js

@@ -9,20 +9,22 @@ let octokit = null;
 const getOctokit = async () => {
   if (octokit) return octokit;
 
-  if (process.env.RELEASE_STATUS_GITHUB_APP_CREDS) {
+  const { RELEASE_STATUS_GITHUB_APP_CREDS, GITHUB_TOKEN } = process.env;
+
+  if (RELEASE_STATUS_GITHUB_APP_CREDS) {
     const authOpts = await getAuthOptionsForRepo(
       {
         owner: 'electron',
         name: 'electron',
       },
-      appCredentialsFromString(process.env.RELEASE_STATUS_GITHUB_APP_CREDS),
+      appCredentialsFromString(RELEASE_STATUS_GITHUB_APP_CREDS),
     );
     octokit = new Octokit({
       ...authOpts,
     });
-  } else if (process.env.GITHUB_TOKEN) {
+  } else if (GITHUB_TOKEN) {
     octokit = new Octokit({
-      auth: process.env.GITHUB_TOKEN,
+      auth: GITHUB_TOKEN,
     });
   } else {
     octokit = new Octokit();
@@ -99,6 +101,9 @@ const getPR = pMemoize(
           owner: 'electron',
           repo: 'electron',
           pull_number: prNumber,
+          mediaType: {
+            format: 'html',
+          },
         })
       ).data;
     } catch {

src/index.js

@@ -41,9 +41,8 @@ app.use('/release', require('./routes/release'));
 app.use('/releases', require('./routes/releases'));
 app.use('/history', require('./routes/history'));
 app.use('/release-build', require('./routes/release-build'));
-if (process.env.NODE_ENV !== 'production') {
-  app.use('/pr', require('./routes/pr'));
-}
+app.use('/pr', require('./routes/pr'));
+app.use('/pr-lookup', require('./routes/pr-lookup'));
 
 app.use(
   express.static(path.resolve(__dirname, 'static'), {

src/routes/pr-lookup.js

@@ -0,0 +1,14 @@
+const { Router } = require('express');
+
+const router = new Router();
+
+router.get('/', (req, res) =>
+  res.render('pr-lookup', {
+    title: 'PR Lookup',
+    css: 'pr-lookup',
+  }),
+);
+
+router.get('/:number', (req, res) => res.redirect(`/pr/${req.params.number}`));
+
+module.exports = router;

src/routes/pr.js

@@ -1,11 +1,22 @@
+const Handlebars = require('handlebars');
 const { Router } = require('express');
 const semver = require('semver');
+const MarkdownIt = require('markdown-it');
+const createDOMPurify = require('dompurify');
+const { JSDOM } = require('jsdom');
+
+const window = new JSDOM('').window;
+const DOMPurify = createDOMPurify(window);
 
 const a = require('../utils/a');
 const { compareTagToCommit, getReleasesOrUpdate, getPR, getPRComments } = require('../data');
 
 const router = new Router();
 
+Handlebars.registerHelper('formattedDate', (date) => new Date(date).toUTCString());
+
+Handlebars.registerHelper('html', (content) => DOMPurify.sanitize(content));
+
 async function getPRReleaseStatus(prNumber) {
   const releases = [...(await getReleasesOrUpdate())].reverse();
   const [prInfo, comments] = await Promise.all([getPR(prNumber), getPRComments(prNumber)]);
@@ -27,10 +38,10 @@ async function getPRReleaseStatus(prNumber) {
 
     // We've been merged, let's find out if this is available in a nightly
     if (prInfo.merged) {
-      const allNighlies = releases.filter(
+      const allNightlies = releases.filter(
         (r) => semver.parse(r.version).prerelease[0] === 'nightly',
       );
-      for (const nightly of allNighlies) {
+      for (const nightly of allNightlies) {
         const dateParts = nightly.date.split('-').map((n) => parseInt(n, 10));
         const releaseDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2] + 1);
         if (releaseDate > new Date(prInfo.merged_at)) {

src/static/css/pr-lookup.css

@@ -0,0 +1,27 @@
+.lookup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 20px;
+}
+
+#lookupInput {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  flex-grow: 1;
+}
+
+button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  background-color: #2b2e3b;
+  color: white;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0d4a59;
+}

src/static/css/pr.css

@@ -1,105 +1,30 @@
-.tree {
-  position: relative;
-  width: 100%;
+.grid-container {
+  display: grid;
+  grid-gap: 20px;
+  max-width: 900px;
 }
 
-.tree canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.grid-header {
+  background-color: #9feaf9;
+  margin: 0;
+  padding: 15px;
 }
 
-.primary {
-  text-align: center;
-  margin-bottom: 140px;
-  position: relative;
-  z-index: 2;
+.grid-contents {
+  padding: 0 15px 0px 15px;
 }
 
-.primary-cell {
-  text-align: center;
-  display: inline-flex;
-  flex-direction: column;
-  padding: 16px;
-  border-radius: 4px;
-  border: 1px solid #00c7e6;
-  background: white;
-  min-width: 300px;
-  box-shadow:
-    0 2px 6px rgb(9 30 66 / 25%),
-    0 0 1px 0 rgb(9 30 66 / 31%);
-  cursor: pointer;
-  user-select: none;
-  transition: box-shadow 0.1s ease-in-out;
+.grid-item {
+  background-color: whitesmoke;
 }
 
-.primary-cell:hover {
-  box-shadow:
-    0 8px 16px -4px rgb(9 30 66 / 25%),
-    0 0 1px rgb(9 30 66 / 31%);
-}
-
-.primary-cell h4 {
-  margin: 4px;
-}
-
-.backports {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  z-index: 2;
-  padding-bottom: 32px;
-}
-
-.backport {
-  flex: 1;
+.grid-sub-item h3,
+.grid-sub-item p {
   display: flex;
-  align-items: flex-start;
   justify-content: center;
 }
 
-.backport-cell {
-  text-align: center;
-  display: inline-flex;
-  flex-direction: column;
-  padding: 16px 64px;
-  border: 1px solid;
-  border-radius: 4px;
-  min-width: 220px;
-  background: white;
-  box-shadow:
-    0 2px 6px rgb(9 30 66 / 25%),
-    0 0 1px 0 rgb(9 30 66 / 31%);
-  cursor: pointer;
-  user-select: none;
-  transition: box-shadow 0.1s ease-in-out;
-}
-
-.backport-cell:hover {
-  box-shadow:
-    0 8px 16px -4px rgb(9 30 66 / 25%),
-    0 0 1px rgb(9 30 66 / 31%);
-}
-
-.backport-pending .backport-cell,
-.backport-in-flight .backport-cell {
-  border-color: #00b8d9;
-}
-
-.backport-needs-manual .backport-cell {
-  border-color: #ffab00;
-}
-
-.backport-merged .backport-cell {
-  border-color: #6554c0;
-}
-
-.backport-released .backport-cell {
-  border-color: #36b37e;
-}
-
-.backport-cell h4 {
-  margin: 4px;
+#grid-pr-body {
+  padding: 0 15px 0px 15px;
+  word-break: break-word;
 }

src/views/layouts/main.handlebars

@@ -26,6 +26,7 @@
         <div>
           <a href="/releases">All Releases</a>
           <a href="/history">History</a>
+          <a href="/pr-lookup">PR Lookup</a>
           <a href="https://electronjs.org" target="_blank" rel="noopener noreferrer">Website</a>
         </div>
       </div>

src/views/pr-lookup.handlebars

@@ -0,0 +1,11 @@
+<div class="lookup-container">
+  <input id="lookupInput" type="text" placeholder="Look Up a PR...">
+  <button onclick="lookup()">Search</button>
+</div>
+
+<script>
+  function lookup() {
+    const { value } = document.getElementById('lookupInput');
+    window.location = '/pr/' + encodeURIComponent(value);
+  }
+</script>

src/views/pr.handlebars

@@ -1,26 +1,44 @@
-<div class="tree">
-  <canvas id="connectors"></canvas>
-  <div class="primary">
-    <div class="primary-cell">
-      <h4>Source PR</h4>
-      <span>#{{ primary.pr.number }}</span>
-    </div>
+<div class="grid-container">
+  <div class="grid-item">
+    <h2 class="grid-header">PR Title</h2>
+    <p class="grid-contents">{{ primary.pr.title }}</p>
   </div>
-  <div class="backports">
-    {{#each backports}}
-      <div class="backport backport-{{ state }}">
-        <div class="backport-cell">
-          <h4>{{ targetBranch }}</h4>
-
-          {{#if pr}}
-          <span>Backport PR: #{{ pr.number }}</span>
-          {{/if}}
-
+  <div class="grid-item">
+    <h2 class="grid-header">Details</h2>
+    <p class="grid-contents"><b>Author:</b> <a target="_blank" href="https://github.com/{{ primary.pr.user.login }}">@{{ primary.pr.user.login
+        }}</a> <b>Time:</b> {{ formattedDate primary.pr.merged_at }} <b>PR: </b> <a target="_blank" href="{{primary.pr.html_url}}">#{{
+          primary.pr.number}}</a></p>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">PR Information</h2>
+    <div id="grid-pr-body">{{{ html primary.pr.body_html }}}</div>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">Release</h2>
+    <p class="grid-contents">
+      {{#if availableIn}}
+        <a href="/release/{{primary.availableIn.version}}">{{primary.availableIn.version}}</a>
+      {{else}}
+        This PR has not been released.
+      {{/if}}
+    </p>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">Backports</h2>
+    <div style="display: grid; grid-template-columns: repeat({{backports.length}}, 1fr); grid-gap: 20px;">
+      {{#each backports}}
+      <div class="grid-sub-item">
+        <h3>{{ targetBranch }}</h3>
+        <p class="grid-contents"><a href="{{ pr.html_url }}">#{{ pr.number }}</a></p>
+        <p class="grid-contents">
           {{#if availableIn}}
-          <span>Released: {{availableIn.version}}</span>
+            <a href="/release/v{{availableIn.version}}">v{{availableIn.version}}</a>
+          {{else}}
+            Not Yet Released
           {{/if}}
-        </div>
+        </p>
       </div>
-    {{/each}}
+      {{/each}}
+    </div>
   </div>
-</div>
+</div>