feat(frontend): Implement handling for moved and split features

This commit introduces the frontend implementation to handle API responses for features that have been moved (301) or split (410). This builds upon previous backend changes that enabled the API to return these status codes.

On the client side:
- For a 301 response, the feature page now performs a client-side redirect. It catches a `FeatureMovedError`, updates its state with the new feature's data from the response body, and uses `history.pushState` to update the URL. This provides a smooth user experience without a full page reload. A notice is also displayed to inform the user of the redirect.

- For a 410 response, the feature page redirects to a dedicated "Feature Gone" page, which explains that the feature was split and provides the user with links to the new features.

As this is a Single Page Application (SPA), the client-side fetch determines whether a redirect or a "gone" page is necessary. This approach is a trade-off for better UX within the SPA architecture.

Unit and end-to-end tests have been added to cover these new scenarios.

Author: jcscottiii

e2e/tests/feature-page.spec.ts

@@ -169,3 +169,51 @@ test('date range changes are preserved in the URL', async ({page}) => {
   const endDateInputElement3 = endDateSelector3.locator('input');
   expect(await endDateInputElement3.inputValue()).toBe(endDate);
 });
+
+test('redirects for a moved feature', async ({page}) => {
+  await page.goto('http://localhost:5555/features/old-feature');
+
+  // Expect the URL to be updated to the new feature's URL.
+  await expect(page).toHaveURL(
+    'http://localhost:5555/features/new-feature?redirected_from=old-feature',
+  );
+
+  // Expect the title and redirect banner to be correct.
+  await expect(page.locator('h1')).toHaveText('New Feature');
+  await expect(
+    page.locator(
+      'sl-alert:has-text("You have been redirected from an old feature ID")',
+    ),
+  ).toBeVisible();
+
+  // Wait for charts to load to avoid flakiness in the screenshot.
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
+
+  // Take a screenshot for visual verification.
+  const pageContainer = page.locator('.page-container');
+  await expect(pageContainer).toHaveScreenshot();
+});
+
+test('shows gone page for a split feature', async ({page}) => {
+  await page.goto('http://localhost:5555/features/before-split-feature');
+
+  // Expect to be redirected to the 'feature-gone-split' page.
+  await expect(page).toHaveURL(
+    'http://localhost:5555/errors-410/feature-gone-split?new_features=after-split-feature-1,after-split-feature-2',
+  );
+
+  // Assert that the content of the 410 page is correct.
+  await expect(page.locator('.new-results-header')).toContainText(
+    'Please see the following new features',
+  );
+  await expect(
+    page.locator('a[href="/features/after-split-feature-1"]'),
+  ).toBeVisible();
+  await expect(
+    page.locator('a[href="/features/after-split-feature-2"]'),
+  ).toBeVisible();
+
+  // Take a screenshot for visual verification.
+  const pageContainer = page.locator('.container'); // Assuming a generic container for the error page.
+  await expect(pageContainer).toHaveScreenshot();
+});

e2e/tests/feature-page.spec.ts-snapshots/redirects-for-a-moved-feature-1-chromium-linux.png

@@ -53,6 +53,10 @@ http {
       try_files $uri /index.html;
     }
 
+    location = /errors-410/feature-gone-split {
+      try_files $uri /index.html;
+    }
+
     # Security headers
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
     add_header X-Content-Type-Options "nosniff";

e2e/tests/feature-page.spec.ts-snapshots/redirects-for-a-moved-feature-1-firefox-linux.png

@@ -21,7 +21,11 @@ import createClient, {
   ParseAsResponse,
 } from 'openapi-fetch';
 import {type components, type paths} from 'webstatus.dev-backend';
-import {createAPIError} from './errors.js';
+import {
+  createAPIError,
+  FeatureGoneSplitError,
+  FeatureMovedError,
+} from './errors.js';
 
 import {
   MediaType,
@@ -302,17 +306,37 @@ export class APIClient {
     const qsParams: paths['/v1/features/{feature_id}']['get']['parameters']['query'] =
       {};
     if (wptMetricView) qsParams.wpt_metric_view = wptMetricView;
-    const {data, error} = await this.client.GET('/v1/features/{feature_id}', {
+    const resp = await this.client.GET('/v1/features/{feature_id}', {
       ...temporaryFetchOptions,
       params: {
         path: {feature_id: featureId},
         query: qsParams,
       },
     });
-    if (error !== undefined) {
-      throw createAPIError(error);
+    if (resp.error !== undefined) {
+      const data = resp.error;
+      if (resp.response.status === 410 && 'new_features' in data) {
+        // Type narrowing doesn't work.
+        // https://github.com/openapi-ts/openapi-typescript/issues/1723
+        // We have to force it.
+        const featureGoneData =
+          data as components['schemas']['FeatureGoneError'];
+        throw new FeatureGoneSplitError(
+          resp.error.message,
+          featureGoneData.new_features.map(f => f.id),
+        );
+      }
+      throw createAPIError(resp.error);
     }
-    return data;
+    if (resp.response.redirected) {
+      const featureId = resp.response.url.split('/').pop() || '';
+      throw new FeatureMovedError(
+        'redirected to feature',
+        featureId,
+        resp.data,
+      );
+    }
+    return resp.data;
   }
 
   public async getFeatureMetadata(

e2e/tests/feature-page.spec.ts-snapshots/redirects-for-a-moved-feature-1-webkit-linux.png

@@ -1,3 +1,5 @@
+import {type components} from 'webstatus.dev-backend';
+
 /**
  * Copyright 2024 Google LLC
  *
@@ -106,3 +108,27 @@ export class UnknownError extends ApiError {
     this.name = 'UnknownError';
   }
 }
+
+export class FeatureGoneSplitError extends ApiError {
+  newFeatureIds: Array<string>;
+  constructor(message: string, newFeatureIds: Array<string>) {
+    super(message, 410);
+    this.name = 'FeatureGoneSplitError';
+    this.newFeatureIds = newFeatureIds;
+  }
+}
+
+export class FeatureMovedError extends ApiError {
+  newFeatureId: string;
+  feature: components['schemas']['Feature'];
+  constructor(
+    message: string,
+    newFeatureId: string,
+    feature: components['schemas']['Feature'],
+  ) {
+    super(message, 301);
+    this.name = 'FeatureMovedError';
+    this.newFeatureId = newFeatureId;
+    this.feature = feature;
+  }
+}