Improve bug label for entries with many bugs.

The bug label now supports showing a single bug
along with it's metadata or a list of bugs. The
label will either link to the individual bug or a
Bugzilla bug list.

Author: Trikolon

src/app.ts

@@ -102,6 +102,19 @@ async function fetchBugMetadata(bugIds: Set<string>): Promise<BugMetaMap> {
     };
   }
 
+  // For some bugs Bugzilla may not return data, e.g. because they are sec bugs.
+  // In this case we still want to include the bug ID in the map, so it gets listed
+  // but with placeholder values.
+  for (let bugId of bugIds) {
+    if (!bugMetaMap[bugId]) {
+      bugMetaMap[bugId] = {
+        id: bugId,
+        isOpen: false,
+        summary: "Unavailable",
+      };
+    }
+  }
+
   return bugMetaMap;
 }
 

src/bug-label.ts

@@ -9,17 +9,14 @@ import { BugMeta } from "./types";
 
 /**
  * A component for displaying a bug label with a bugzilla icon.
- * The bug info is asynchronously fetched from the Bugzilla REST API.
+ * If only a single bug is provided, it will display the bug's metadata along with a link to the bug.
+ * If multiple bugs are provided, it will display a link to a Bugzilla bug list.
  */
 @customElement("bug-label")
 export class BugLabel extends LitElement {
-  // Holds all bug metadata to display.
-  @property({ type: Object })
-  bugMeta: BugMeta = {
-    id: "",
-    isOpen: true,
-    summary: "",
-  };
+  // Holds either a single bug or a list of bugs to display.
+  @property({ type: Array })
+  bugMeta: BugMeta[] = [];
 
   static styles = css`
     :host {
@@ -44,17 +41,34 @@ export class BugLabel extends LitElement {
     }
   `;
 
-  render() {
+  /**
+   * Get the URL for a Bugzilla bug list.
+   * @param bugIds The bug IDs to get the URL for.
+   * @returns The URL for the list of bugs.
+   */
+  private getBugListUrl() {
+    const url = new URL("https://bugzilla.mozilla.org/buglist.cgi");
+    url.searchParams.set("bug_id", this.bugIds.join(","));
+    return url.toString();
+  }
+
+  private get bugIds() {
+    return this.bugMeta.map((bug) => bug.id);
+  }
+
+  private renderSingleBugLabel() {
+    let bug = this.bugMeta[0];
+
     return html`
       <a
         class="bug-label"
-        href="https://bugzilla.mozilla.org/show_bug.cgi?id=${this.bugMeta.id}"
+        href="https://bugzilla.mozilla.org/show_bug.cgi?id=${bug.id}"
         target="_blank"
         rel="noopener noreferrer"
-        title=${`Bug ${this.bugMeta.id}: ${this.bugMeta.summary}`}
+        title=${`Bug ${bug.id}: ${bug.summary}`}
       >
         <img
-          class="bug-icon ${!this.bugMeta.isOpen ? "closed" : ""}"
+          class="bug-icon ${!bug.isOpen ? "closed" : ""}"
           src=${bugzillaIcon}
           alt="Bugzilla Icon"
           width="32"
@@ -63,4 +77,30 @@ export class BugLabel extends LitElement {
       </a>
     `;
   }
+
+  private renderMultipleBugsLabel() {
+    return html`
+      <a
+        class="bug-label"
+        href=${this.getBugListUrl()}
+        target="_blank"
+        rel="noopener noreferrer"
+        title=${`Bug ${this.bugIds.join(", ")}`}
+      >
+        <img class="bug-icon" src=${bugzillaIcon} alt="Bugzilla Icon" width="32" height="32" />
+      </a>
+    `;
+  }
+
+  render() {
+    if (this.bugMeta.length === 0) {
+      return html``;
+    }
+
+    if (this.bugMeta.length === 1) {
+      return this.renderSingleBugLabel();
+    } else {
+      return this.renderMultipleBugsLabel();
+    }
+  }
 }

src/exceptions-table/exceptions-table.ts

@@ -115,20 +115,8 @@ export class ExceptionsTable extends LitElement {
     }
   }
 
-  /**
-   * Renders a list of bug labels for an entry.
-   * @param entry The entry to render the bug labels for.
-   * @returns The rendered bug labels.
-   */
-  private renderBugLabels(entry: ExceptionListEntry) {
-    if (!Array.isArray(entry.bugIds) || entry.bugIds.length === 0) {
-      return html``;
-    }
-    return html`<span class="badges"
-      >${entry.bugIds.map(
-        (bugId) => html`<bug-label .bugMeta=${this.bugMeta[bugId]}></bug-label>`,
-      )}</span
-    >`;
+  private getBugMetaForEntry(entry: ExceptionListEntry) {
+    return entry.bugIds.map((id) => this.bugMeta[id]).filter((meta) => meta != null);
   }
 
   private renderTable() {
@@ -150,7 +138,7 @@ export class ExceptionsTable extends LitElement {
               (entry) => html`
                 <tr>
                   <td>
-                    <span class="badges"> ${this.renderBugLabels(entry)} </span>
+                    <bug-label .bugMeta=${this.getBugMetaForEntry(entry)}></bug-label>
                   </td>
                   <td class="${this.hasGlobalRules ? "" : "hidden-col"}">
                     ${renderUrlPattern(entry.topLevelUrlPattern)}