Initial tab at a security tab showing advisories

Author: djc

app/components/crate-header.gjs

@@ -106,6 +106,10 @@ export default class CrateHeader extends Component {
         Dependents
       </nav.Tab>
 
+      <nav.Tab @link={{link_ 'crate.security' @crate}} data-test-security-tab>
+        Security
+      </nav.Tab>
+
       {{#if this.isOwner}}
         <nav.Tab @link={{link_ 'crate.settings' @crate}} data-test-settings-tab>
           Settings

app/controllers/crate/security.js

@@ -0,0 +1,21 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class SecurityController extends Controller {
+  @service releaseTracks;
+  @service sentry;
+
+  @tracked crate;
+  @tracked data;
+
+  constructor() {
+    super(...arguments);
+    this.reset();
+  }
+
+  reset() {
+    this.crate = undefined;
+    this.data = undefined;
+  }
+}

app/router.js

@@ -18,6 +18,7 @@ Router.map(function () {
     this.route('range', { path: '/range/:range' });
 
     this.route('reverse-dependencies', { path: 'reverse_dependencies' });
+    this.route('security');
 
     this.route('owners');
     this.route('settings', function () {

app/routes/crate/security.js

@@ -0,0 +1,59 @@
+import Route from '@ember/routing/route';
+
+import { didCancel } from 'ember-concurrency';
+
+import { AjaxError } from '../../utils/ajax';
+
+async function fetchAdvisories(crateId) {
+  let url = `https://rustsec.org/packages/${crateId}.json`;
+  let response = await fetch(url);
+  if (response.status === 404) {
+    return [];
+  } else if (response.ok) {
+    return await response.json();
+  } else {
+    throw new Error(`HTTP error! status: ${response}`);
+  }
+}
+
+export default class SecurityRoute extends Route {
+  queryParams = {
+    sort: { refreshModel: true },
+  };
+
+  async model() {
+    let crate = this.modelFor('crate');
+    try {
+      let [advisories, micromarkModule, gfmModule] = await Promise.all([
+        fetchAdvisories(crate.id),
+        import('micromark'),
+        import('micromark-extension-gfm'),
+      ]);
+
+      const convertMarkdown = markdown => {
+        return micromarkModule.micromark(markdown, {
+          extensions: [gfmModule.gfm()],
+          htmlExtensions: [gfmModule.gfmHtml()],
+        });
+      };
+
+      return { crate, advisories, convertMarkdown };
+    } catch (error) {
+      // report unexpected errors to Sentry and ignore `ajax()` errors
+      if (!didCancel(error) && !(error instanceof AjaxError)) {
+        this.sentry.captureException(error);
+      }
+    }
+  }
+
+  setupController(controller, { crate, advisories, convertMarkdown }) {
+    super.setupController(...arguments);
+    // reset when crate changes
+    if (crate && crate !== controller.crate) {
+      controller.reset();
+    }
+    controller.crate = crate;
+    controller.advisories = advisories;
+    controller.convertMarkdown = convertMarkdown;
+  }
+}

app/templates/crate/security.css

@@ -0,0 +1,18 @@
+.heading {
+  font-size: 1.17em;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+.advisories {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  margin-top: var(--space-2xs);
+  background-color: light-dark(white, #141413);
+  padding: var(--space-m) var(--space-l);
+  list-style: none;
+}

app/templates/crate/security.gjs

@@ -0,0 +1,25 @@
+import { htmlSafe } from '@ember/template';
+
+import CrateHeader from 'crates-io/components/crate-header';
+
+<template>
+  <CrateHeader @crate={{@controller.crate}} />
+  {{#if @controller.model}}
+    <h2 class='heading'>Advisories</h2>
+    <ul class='advisories' data-test-list>
+      {{#each @controller.advisories as |advisory|}}
+        <li class='row'>
+          <h3>
+            <a href='https://rustsec.org/advisories/{{advisory.id}}.html'>{{advisory.id}}</a>:
+            {{advisory.summary}}
+          </h3>
+          <p>{{htmlSafe (@controller.convertMarkdown advisory.details)}}</p>
+        </li>
+      {{/each}}
+    </ul>
+  {{else}}
+    <div class='no-results'>
+      No advisories found for this crate.
+    </div>
+  {{/if}}
+</template>

package.json

@@ -133,6 +133,8 @@
     "loader.js": "4.7.0",
     "match-json": "1.3.7",
     "memory-scroll": "2.0.1",
+    "micromark": "4.0.2",
+    "micromark-extension-gfm": "^3.0.0",
     "msw": "2.12.4",
     "playwright-msw": "3.0.1",
     "postcss": "8.5.6",