Adapter logic to populate feature list UI (#1278)

* Adapter code for UI. Fixing stub

* Address comments

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

Co-authored-by: James C Scott III <jcscottiii@users.noreply.github.com>

---------

Co-authored-by: James C Scott III <jcscottiii@users.noreply.github.com>

Author: KyleJu

frontend/src/static/js/api/client.ts

@@ -522,4 +522,46 @@ export class APIClient {
       yield page.data; // Yield the entire page
     } while (nextPageToken !== undefined);
   }
+
+  // Fetches missing feature list for a browser for a give date
+  // via "/v1/stats/features/browsers/{browser}/missing_one_implementation_counts/{date}/features"
+  public async getMissingOneImplementationFeatures(
+    targetBrowser: BrowsersParameter,
+    otherBrowsers: BrowsersParameter[],
+    date: Date,
+  ): Promise<MissingOneImplFeaturesList> {
+    const targetDate: string = date.toISOString().substring(0, 10);
+    let nextPageToken: string | undefined;
+    const allFeatures: MissingOneImplFeaturesList = [];
+
+    do {
+      const response = await this.client.GET(
+        '/v1/stats/features/browsers/{browser}/missing_one_implementation_counts/{date}/features',
+        {
+          ...temporaryFetchOptions,
+          params: {
+            query: {
+              page_token: nextPageToken,
+              browser: otherBrowsers,
+            },
+            path: {browser: targetBrowser, date: targetDate},
+          },
+        },
+      );
+      const error = response.error;
+      if (error !== undefined) {
+        throw createAPIError(error);
+      }
+      const page: MissingOneImplFeaturesPage =
+        response.data as MissingOneImplFeaturesPage;
+
+      if (page?.data) {
+        allFeatures.push(...page.data);
+      }
+
+      nextPageToken = page?.metadata?.next_page_token;
+    } while (nextPageToken !== undefined);
+
+    return allFeatures;
+  }
 }

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

@@ -136,14 +136,32 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
   });
 
   it('renders missing one implementation features footer', async () => {
+    apiClientStub.getMissingOneImplementationFeatures.resolves([
+      {
+        feature_id: 'css',
+      },
+      {
+        feature_id: 'html',
+      },
+      {
+        feature_id: 'js',
+      },
+      {
+        feature_id: 'bluetooth',
+      },
+    ]);
     const chart = el.shadowRoot!.querySelector(
       '#missing-one-implementation-chart',
     )!;
 
     const chartClickEvent: ChartSelectPointEvent = new CustomEvent(
       'point-selected',
       {
-        detail: {label: 'Test Label', timestamp: new Date(), value: 123},
+        detail: {
+          label: 'Chromium',
+          timestamp: new Date('2024-01-01'),
+          value: 123,
+        },
         bubbles: true,
       },
     );
@@ -153,6 +171,9 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
 
     // Assert that the task and renderer are set (no need to wait for the event)
     expect(el._pointSelectedTask).to.exist;
+    await el._pointSelectedTask?.taskComplete;
+    await el.updateComplete;
+
     expect(el._renderCustomPointSelectedSuccess).to.exist;
     await el.updateComplete;
 
@@ -162,7 +183,7 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     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-08-20 for\n        chrome',
+      'The missing feature IDs on 2024-01-01 for\n        chrome',
     );
 
     const table = el.shadowRoot!.querySelector('.missing-features-table');
@@ -179,4 +200,94 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
       'first row ID',
     );
   });
+
+  it('assert correct getMissingOneImplementationFeatures calls', async () => {
+    apiClientStub.getMissingOneImplementationFeatures.resolves([
+      {
+        feature_id: 'css',
+      },
+      {
+        feature_id: 'html',
+      },
+      {
+        feature_id: 'js',
+      },
+      {
+        feature_id: 'bluetooth',
+      },
+    ]);
+    const chart = el.shadowRoot!.querySelector(
+      '#missing-one-implementation-chart',
+    )!;
+
+    const chartClickEvent: ChartSelectPointEvent = new CustomEvent(
+      'point-selected',
+      {
+        detail: {
+          label: 'Safari',
+          timestamp: new Date('2024-01-01'),
+          value: 123,
+        },
+        bubbles: true,
+      },
+    );
+    // Simulate point-selected event on the chart component
+    chart.dispatchEvent(chartClickEvent);
+    await el.updateComplete;
+
+    expect(el._pointSelectedTask).to.exist;
+    expect(
+      apiClientStub.getMissingOneImplementationFeatures,
+    ).to.have.been.calledWith(
+      'safari',
+      ['chrome', 'firefox'],
+      new Date('2024-01-01'),
+    );
+
+    const chartClickEventOne: ChartSelectPointEvent = new CustomEvent(
+      'point-selected',
+      {
+        detail: {
+          label: 'Firefox',
+          timestamp: new Date('2024-01-01'),
+          value: 123,
+        },
+        bubbles: true,
+      },
+    );
+    chart.dispatchEvent(chartClickEventOne);
+    await el.updateComplete;
+
+    expect(el._pointSelectedTask).to.exist;
+    expect(
+      apiClientStub.getMissingOneImplementationFeatures,
+    ).to.have.been.calledWith(
+      'firefox',
+      ['chrome', 'safari'],
+      new Date('2024-01-01'),
+    );
+
+    const chartClickEventTwo: ChartSelectPointEvent = new CustomEvent(
+      'point-selected',
+      {
+        detail: {
+          label: 'Chromium',
+          timestamp: new Date('2024-01-01'),
+          value: 123,
+        },
+        bubbles: true,
+      },
+    );
+    chart.dispatchEvent(chartClickEventTwo);
+    await el.updateComplete;
+
+    expect(el._pointSelectedTask).to.exist;
+    expect(
+      apiClientStub.getMissingOneImplementationFeatures,
+    ).to.have.been.calledWith(
+      'chrome',
+      ['firefox', 'safari'],
+      new Date('2024-01-01'),
+    );
+  });
 });

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

@@ -25,6 +25,7 @@ import {
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
   BROWSER_ID_TO_LABEL,
+  BROWSER_LABEL_TO_ID,
   MissingOneImplFeaturesList,
 } from '../api/client.js';
 import {ChartSelectPointEvent} from './webstatus-gchart.js';
@@ -119,45 +120,31 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
    * @param {ChartSelectPointEvent} _ The point-selected event.
    * @returns {{ task: Task | undefined; renderSuccess?: () => TemplateResult; }}
    */
-  createPointSelectedTask(_: ChartSelectPointEvent): {
+  createPointSelectedTask(event: ChartSelectPointEvent): {
     task: Task | undefined;
     renderSuccess?: () => TemplateResult;
   } {
+    const targetDate = event.detail.timestamp;
+    const label = event.detail.label;
+    const targetBrowser =
+      label === 'Chromium' ? 'chrome' : BROWSER_LABEL_TO_ID[label];
+    const otherBrowsers = this.supportedBrowsers.filter(
+      value => targetBrowser !== value,
+    );
     const task = new Task(this, {
-      task: async () => {
-        // TODO(https://github.com/GoogleChrome/webstatus.dev/issues/1181):
-        // implement the adapter logic to retrieve feature IDs.
-        const pageData = {
-          data: [
-            {
-              feature_id: 'css',
-            },
-            {
-              feature_id: 'html',
-            },
-            {
-              feature_id: 'javascript',
-            },
-            {
-              feature_id: 'bluetooth',
-            },
-          ],
-          metadata: {
-            total: 4,
-          },
-        };
-        for (let i = 0; i < 80; i++) {
-          pageData.data.push({
-            feature_id: 'item' + i,
-          });
-        }
-        this.missingFeaturesList = pageData.data;
-        // TODO:(kyleju) return these data from the API.
-        this.selectedDate = '2024-08-20';
-        this.selectedBrowser = 'chrome';
-        return this.missingFeaturesList;
+      task: async ([date, browser]) => {
+        const features =
+          await this.apiClient.getMissingOneImplementationFeatures(
+            browser,
+            otherBrowsers,
+            date,
+          );
+        this.missingFeaturesList = features;
+        this.selectedDate = targetDate.toISOString().substring(0, 10);
+        this.selectedBrowser = targetBrowser;
+        return features;
       },
-      args: () => [],
+      args: () => [targetDate, targetBrowser],
     });
     return {task: task, renderSuccess: this.pointSelectedTaskRenderOnSuccess};
   }