Fix #959: Make extracting bug IDs more robust

src/routing/pages/probe/FenixDetails.svelte

@@ -4,6 +4,7 @@
   import Brackets from '../../../components/icons/Brackets.svelte';
   import { store, dataset } from '../../../state/store';
   import { downloadString } from '../../../utils/download';
+  import { extractBugId } from '../../../utils/urls';
   import ExternalLink from '../../../components/icons/ExternalLink.svelte';
   import StatusLabel from '../../../components/StatusLabel.svelte';
 
@@ -19,7 +20,7 @@
 
 <style>
   .drawer-section {
-    padding: var(--space-2x) 0;
+    padding: var(--space-base) 0;
   }
   .drawer-section--end {
     align-self: end;
@@ -137,7 +138,7 @@
           <dt>
             <a
               class="probe-type-link"
-              href="https://mozilla.github.io/glean/book/user/metrics/index.html">{$store.probe.type}</a>
+              href="https://mozilla.github.io/glean/book/user/metrics/index.html">{$store.probe.type.replace('_', ' ')}</a>
           </dt>
         </dl>
       {/if}
@@ -170,13 +171,7 @@
         <dl>
           <dt>unit</dt>
           <dd>
-            {$store.probe.info.time_unit || $store.probe.info.memory_unit || $store.probe.info.unit}
-          </dd>
-        </dl>
-        <dl>
-          <dt>Pings</dt>
-          <dd>
-            {#each $store.probe.info.send_in_pings as ping}{ping}{/each}
+            {$store.probe.info.time_unit || $store.probe.info.memory_unit || $store.probe.info.unit || 'n/a'}
           </dd>
         </dl>
       {/if}
@@ -189,23 +184,35 @@
         </dl>
       {/if}
     </div>
-    <div class="tiled">
+    <div class="drawer-section">
+      <dl>
+        <dt>Send in Pings</dt>
+        <dd>
+          {#each $store.probe.info.send_in_pings as ping}
+            <div>{ping}</div>
+          {/each}
+        </dd>
+      </dl>
+    </div>
+    <div class="drawer-section">
       {#if $store.probe.info.bugs}
         <dl>
           <dt>bugs</dt>
           <dd>
             {#each $store.probe.info.bugs as bug}
-              <a href={bug}> {bug.split('?id=')[1]}</a>
+              <div><a href={bug}>{extractBugId(bug)}</a></div>
             {/each}
           </dd>
         </dl>
       {/if}
+    </div>
+    <div class="drawer-section">
       {#if $store.probe.info.data_reviews}
         <dl>
           <dt>data reviews</dt>
           <dd>
             {#each $store.probe.info.data_reviews as bug}
-              <a href={bug}> {bug.split('?id=')[1]}</a>
+              <div><a href={bug}>{extractBugId(bug)}</a></div>
             {/each}
           </dd>
         </dl>

src/utils/urls.js

@@ -0,0 +1,16 @@
+export function extractBugId(url) {
+  if (url.includes('bugzilla')) {
+    const match = /id=(?<id>\d+)/.exec(url);
+    if (match) {
+      return `bugzil.la/${match.groups.id}`;
+    }
+  }
+  if (url.includes('github')) {
+    const regexp = /github\.com\/(?<org>[^/]+)\/(?<project>[^/]+)\/(pull|issues)\/(?<id>\d+)/;
+    const match = regexp.exec(url);
+    if (match) {
+      return `${match.groups.org}/${match.groups.project}#${match.groups.id}`;
+    }
+  }
+  return url;
+}

tests/utils-urls.test.js

@@ -0,0 +1,27 @@
+import { extractBugId } from '../src/utils/urls';
+
+describe('extractBugId', () => {
+  it('correctly finds bugzilla ids', () => {
+    expect(
+      extractBugId('https://bugzilla.mozilla.org/show_bug.cgi?id=123456')
+    ).toEqual('bugzil.la/123456');
+    expect(
+      extractBugId('https://bugzilla.mozilla.org/show_bug.cgi?id=123456#c7')
+    ).toEqual('bugzil.la/123456');
+  });
+  it('correctly finds github ids', () => {
+    expect(extractBugId('https://github.com/org/project/issues/12345')).toEqual(
+      'org/project#12345'
+    );
+    expect(
+      extractBugId(
+        'https://github.com/org/project/pull/12345#issuecomment-123456789'
+      )
+    ).toEqual('org/project#12345');
+  });
+  it('correctly defaults to returning the url', () => {
+    expect(extractBugId('https://github.com/org/project')).toEqual(
+      'https://github.com/org/project'
+    );
+  });
+});