feat(frontend): Handle moved and split features

This commit introduces client-side handling for features that have been moved (renamed) or split into multiple new features.

The backend API (openapi.yaml) is updated to respond with:

- 301 Moved Permanently when a feature has been moved. The response body contains the data for the new feature.
- 410 Gone when a feature has been split. The response body contains a list of the new feature IDs.

On the client side:

- For a 301 response, the feature page performs a client-side redirect. It catches the FeatureMovedError, updates its internal state with the new feature's data, and uses history.pushState to update the URL. This avoids a full page reload and provides a smoother user experience. A notice is displayed to inform the user they have been redirected.
- For a 410 response, the feature page redirects to a new "Feature Gone" page. This page explains that the feature has been split and provides links to the new features.

As this is a Single Page Application (SPA), the initial page load for a feature URL always serves the main index.html. 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, though it differs from traditional server-side redirect handling for SEO.

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;
+  }
+}