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/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,49 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+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 {
+  @service sentry;
+
+  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, error: false };
+    } catch (error) {
+      this.sentry.captureException(error);
+      return { crate, advisories: [], convertMarkdown: null, error: true };
+    }
+  }
+
+  setupController(controller, { crate, advisories, convertMarkdown, error }) {
+    super.setupController(...arguments);
+    controller.crate = crate;
+    controller.advisories = advisories;
+    controller.convertMarkdown = convertMarkdown;
+    controller.error = error;
+  }
+}

app/templates/crate/security.css

@@ -0,0 +1,29 @@
+.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);
+  border-radius: var(--space-3xs);
+  padding: var(--space-m) var(--space-l);
+  list-style: none;
+}
+
+.no-results {
+  padding: var(--space-l) var(--space-s);
+  background-color: light-dark(white, #141413);
+  text-align: center;
+  font-size: 20px;
+  font-weight: 300;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+}

app/templates/crate/security.gjs

@@ -0,0 +1,29 @@
+import { htmlSafe } from '@ember/template';
+
+import CrateHeader from 'crates-io/components/crate-header';
+
+<template>
+  <CrateHeader @crate={{@controller.crate}} />
+  {{#if @controller.advisories.length}}
+    <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>
+          {{htmlSafe (@controller.convertMarkdown advisory.details)}}
+        </li>
+      {{/each}}
+    </ul>
+  {{else if @controller.error}}
+    <div class='no-results' data-error>
+      An error occurred while fetching advisories.
+    </div>
+  {{else}}
+    <div class='no-results' data-no-advisories>
+      No advisories found for this crate.
+    </div>
+  {{/if}}
+</template>

e2e/acceptance/security.spec.ts

@@ -0,0 +1,80 @@
+import { expect, test } from '@/e2e/helper';
+import { http, HttpResponse } from 'msw';
+
+test.describe('Acceptance | crate security page', { tag: '@acceptance' }, () => {
+  test('show some advisories', async ({ page, msw, percy }) => {
+    let crate = await msw.db.crate.create({ name: 'foo' });
+    await msw.db.version.create({ crate, num: '1.0.0' });
+
+    let advisories = [
+      {
+        id: 'TEST-001',
+        summary: 'First test advisory',
+        details: 'This is the first test advisory with **markdown** support.',
+      },
+      {
+        id: 'TEST-002',
+        summary: 'Second test advisory',
+        details: 'This is the second test advisory with more details.',
+      },
+    ];
+
+    msw.worker.use(
+      http.get('https://rustsec.org/packages/:crateId.json', () => HttpResponse.json(advisories)),
+    );
+
+    await page.goto('/crates/foo/security');
+
+    await expect(page.locator('[data-test-list] li')).toHaveCount(2);
+
+    // Check first advisory
+    await expect(page.locator('[data-test-list] li').nth(0).locator('h3 a')).toHaveAttribute(
+      'href',
+      'https://rustsec.org/advisories/TEST-001.html',
+    );
+    await expect(page.locator('[data-test-list] li').nth(0).locator('h3 a')).toContainText('TEST-001');
+    await expect(page.locator('[data-test-list] li').nth(0).locator('h3')).toContainText('First test advisory');
+    await expect(page.locator('[data-test-list] li').nth(0).locator('p')).toContainText('markdown');
+
+    // Check second advisory
+    await expect(page.locator('[data-test-list] li').nth(1).locator('h3 a')).toHaveAttribute(
+      'href',
+      'https://rustsec.org/advisories/TEST-002.html',
+    );
+    await expect(page.locator('[data-test-list] li').nth(1).locator('h3 a')).toContainText('TEST-002');
+    await expect(page.locator('[data-test-list] li').nth(1).locator('h3')).toContainText('Second test advisory');
+
+    await percy.snapshot();
+  });
+
+  test('show no advisory data when none exist', async ({ page, msw }) => {
+    let crate = await msw.db.crate.create({ name: 'safe-crate' });
+    await msw.db.version.create({ crate, num: '1.0.0' });
+
+    msw.worker.use(
+      http.get('https://rustsec.org/packages/:crateId.json', () => HttpResponse.text('not found', { status: 404 })),
+    );
+
+    await page.goto('/crates/safe-crate/security');
+
+    await expect(page.locator('[data-no-advisories]')).toBeVisible();
+    await expect(page.locator('[data-no-advisories]')).toHaveText('No advisories found for this crate.');
+  });
+
+  test('handles errors gracefully', async ({ page, msw }) => {
+    let crate = await msw.db.crate.create({ name: 'error-crate' });
+    await msw.db.version.create({ crate, num: '1.0.0' });
+
+    msw.worker.use(
+      http.get('https://rustsec.org/packages/:crateId.json', () =>
+        HttpResponse.text('Internal Server Error', { status: 500 }),
+      ),
+    );
+
+    await page.goto('/crates/error-crate/security');
+
+    // When there's an error, the route catches it and returns empty advisories
+    await expect(page.locator('[data-error]')).toBeVisible();
+    await expect(page.locator('[data-error]')).toHaveText('An error occurred while fetching advisories.');
+  });
+});

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",