UI adjustments for MissingOneImplFeatureList (#1304)

* UI adjustments for MissingOneImplFeatureList

* ignore prettier due to test assertion issues

* Address comments

Author: KyleJu

frontend/src/static/js/components/test/webstatus-stats-missing-one-impl-chart-panel.test.ts

@@ -229,16 +229,14 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
       '#missing-one-implementation-list-header',
     );
     expect(header).to.exist;
-    // Note: \n before chrome due to a complaint from lint in the html.
-    expect(header!.textContent?.trim()).to.contain(
-      'The missing feature IDs on 2024-01-01 for\n          chrome',
-    );
-
-    const anchor = header!.querySelector('a');
-    expect(anchor).to.exist;
-    expect(anchor?.getAttribute('href')).to.equal(
-      '/?q=id%3Acss+OR+id%3Ahtml+OR+id%3Ajs+OR+id%3Abluetooth',
-    );
+    const expectedHeader = `
+      <div slot="header" id="missing-one-implementation-list-header">
+        The missing feature IDs on 2024-01-01 for
+        Chrome:
+        <a target="_blank" href="/?q=id%3Acss+OR+id%3Ahtml+OR+id%3Ajs+OR+id%3Abluetooth">4 features</a>
+      </div>
+    `;
+    expect(header).dom.to.equal(expectedHeader);
 
     const table = el.shadowRoot!.querySelector('.missing-features-table');
     expect(table).to.exist;
@@ -288,10 +286,13 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
       '#missing-one-implementation-list-header',
     );
     expect(header).to.exist;
-    // Note: \n before chrome due to a complaint from lint in the html.
-    expect(header!.textContent?.trim()).to.contain(
-      'No missing features for on 2024-01-01 for\n        chrome',
-    );
+    const expectedHeader = `
+      <div slot="header" id="missing-one-implementation-list-header">
+        No missing features for on 2024-01-01 for
+        Chrome
+      </div>
+    `;
+    expect(header).dom.to.equal(expectedHeader);
 
     const table = el.shadowRoot!.querySelector('.missing-features-table');
     expect(table).to.not.exist;

frontend/src/static/js/components/webstatus-stats-missing-one-impl-chart-panel.ts

@@ -59,6 +59,9 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
           overflow-x: auto;
           white-space: nowrap;
         }
+        .missing-feature-id-link {
+          padding-right: 1em;
+        }
       `,
     ];
   }
@@ -167,7 +170,7 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
           );
         this.missingFeaturesList = features;
         this.selectedDate = targetDate.toISOString().substring(0, 10);
-        this.selectedBrowser = targetBrowser;
+        this.selectedBrowser = label;
         this.updateFeatureListHref(features);
         return features;
       },
@@ -187,16 +190,17 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
     if (this.missingFeaturesList.length === 0) {
       return html`<div slot="header" id="${this.getPanelID()}-list-header">
         No missing features for on ${this.selectedDate} for
-        ${this.selectedBrowser}:
+        ${this.selectedBrowser}
       </div> `;
     }
 
     return html`
       <div slot="header" id="${this.getPanelID()}-list-header">
-        <a href="${this.featureListHref}" target="_blank">
-          The missing feature IDs on ${this.selectedDate} for
-          ${this.selectedBrowser}
-        </a>
+        The missing feature IDs on ${this.selectedDate} for
+        ${this.selectedBrowser}:
+        <a href="${this.featureListHref}" target="_blank"
+          >${this.missingFeaturesList.length} features</a
+        >
       </div>
       ${this.renderMissingFeaturesTable()}
     `;
@@ -225,7 +229,9 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
           const feature_id = this.missingFeaturesList[featureIndex].feature_id;
           cells.push(
             html` <td>
-              <a href="/features/${feature_id}">${feature_id}</a>
+              <a href="/features/${feature_id}" class="missing-feature-id-link"
+                >${feature_id}</a
+              >
             </td>`,
           );
         } else {