feat(frontend): add notification channels page

e2e/tests/notification-channels.spec.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {test, expect} from '@playwright/test';
+import {loginAsUser, BASE_URL} from './utils';
+
+test.describe('Notification Channels Page', () => {
+  test('redirects unauthenticated user to home and shows toast', async ({
+    page,
+  }) => {
+    await page.goto(`${BASE_URL}/settings/notification-channels`);
+
+    // Expect to be redirected to the home page.
+    await expect(page).toHaveURL(BASE_URL);
+    // FYI: We do not assert the toast because it flashes on the screen due to the redirect.
+  });
+
+  test('authenticated user sees their email channel and coming soon messages', async ({
+    page,
+  }) => {
+    // Log in as a test user
+    await loginAsUser(page, 'test user 1');
+
+    // Navigate to the notification channels page
+    await page.goto(`${BASE_URL}/settings/notification-channels`);
+
+    // Move the mouse to a neutral position to avoid hover effects on the screenshot
+    await page.mouse.move(0, 0);
+
+    // Expect the URL to be correct
+    await expect(page).toHaveURL(`${BASE_URL}/settings/notification-channels`);
+
+    // Verify Email panel content
+    const emailPanel = page.locator('webstatus-notification-email-channels');
+    await expect(emailPanel).toBeVisible();
+    await expect(emailPanel).toContainText('[email protected]');
+    await expect(emailPanel).toContainText('Enabled');
+
+    // Verify RSS panel content
+    const rssPanel = page.locator('webstatus-notification-rss-channels');
+    await expect(rssPanel).toBeVisible();
+    await expect(rssPanel).toContainText('Coming soon');
+
+    // Verify Webhook panel content
+    const webhookPanel = page.locator(
+      'webstatus-notification-webhook-channels',
+    );
+    await expect(webhookPanel).toBeVisible();
+    await expect(webhookPanel).toContainText('Coming soon');
+
+    // Take a screenshot for visual regression
+    const pageContainer = page.locator('.page-container');
+    await expect(pageContainer).toHaveScreenshot(
+      'notification-channels-authenticated.png',
+    );
+  });
+});

frontend/nginx.conf

@@ -44,6 +44,10 @@ http {
       try_files $uri $uri/ /index.html;
     }
 
+    location = /settings/notification-channels {
+      try_files $uri $uri/ /index.html;
+    }
+
     location = / {
       try_files $uri $uri/ =404;
     }

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

@@ -54,6 +54,7 @@ export type BrowsersParameter = components['parameters']['browserPathParam'];
 type PageablePath =
   | '/v1/features'
   | '/v1/features/{feature_id}/stats/wpt/browsers/{browser}/channels/{channel}/{metric_view}'
+  | '/v1/users/me/notification-channels'
   | '/v1/stats/features/browsers/{browser}/feature_counts'
   | '/v1/users/me/saved-searches'
   | '/v1/stats/baseline_status/low_date_feature_counts';
@@ -421,6 +422,28 @@ export class APIClient {
     });
   }
 
+  public async listNotificationChannels(
+    token: string,
+  ): Promise<components['schemas']['NotificationChannelResponse'][]> {
+    type NotificationChannelPage = SuccessResponsePageableData<
+      paths['/v1/users/me/notification-channels']['get'],
+      FetchOptions<
+        FilterKeys<paths['/v1/users/me/notification-channels'], 'get'>
+      >,
+      'application/json',
+      '/v1/users/me/notification-channels'
+    >;
+
+    return this.getAllPagesOfData<
+      '/v1/users/me/notification-channels',
+      NotificationChannelPage
+    >('/v1/users/me/notification-channels', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  }
+
   public async pingUser(
     token: string,
     pingOptions?: {githubToken?: string},

frontend/src/static/js/components/test/webstatus-notification-email-channels.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {assert, fixture, html} from '@open-wc/testing';
+import type {WebstatusNotificationEmailChannels} from '../../components/webstatus-notification-email-channels.js';
+import '../../components/webstatus-notification-email-channels.js';
+import {components} from 'webstatus.dev-backend';
+import {WebstatusNotificationPanel} from '../webstatus-notification-panel.js';
+
+type NotificationChannelResponse =
+  components['schemas']['NotificationChannelResponse'];
+
+describe('webstatus-notification-email-channels', () => {
+  it('renders email channels correctly', async () => {
+    const mockChannels: NotificationChannelResponse[] = [
+      {
+        id: '1',
+        type: 'email',
+        value: '[email protected]',
+        name: 'Email 1',
+        status: 'enabled',
+        created_at: '2023-01-01T00:00:00Z',
+        updated_at: '2023-01-01T00:00:00Z',
+      },
+      {
+        id: '2',
+        type: 'email',
+        value: '[email protected]',
+        name: 'Email 2',
+        status: 'disabled',
+        created_at: '2023-01-01T00:00:00Z',
+        updated_at: '2023-01-01T00:00:00Z',
+      },
+    ];
+
+    const el = await fixture<WebstatusNotificationEmailChannels>(html`
+      <webstatus-notification-email-channels
+        .channels=${mockChannels}
+      ></webstatus-notification-email-channels>
+    `);
+
+    const emailItems = el.shadowRoot!.querySelectorAll('.channel-item');
+    assert.equal(emailItems.length, mockChannels.length);
+
+    // Test first email channel
+    const email1Name = emailItems[0].querySelector('.name');
+    assert.include(email1Name!.textContent, '[email protected]');
+    const email1Badge = emailItems[0].querySelector('sl-badge');
+    assert.isNotNull(email1Badge);
+    assert.include(email1Badge!.textContent, 'Enabled');
+
+    // Test second email channel (disabled, so no badge)
+    const email2Name = emailItems[1].querySelector('.name');
+    assert.include(email2Name!.textContent, '[email protected]');
+    const email2Badge = emailItems[1].querySelector('sl-badge');
+    assert.isNotNull(email2Badge);
+    assert.include(email2Badge!.textContent, 'Disabled');
+  });
+
+  it('passes loading state to the base panel', async () => {
+    const el = await fixture<WebstatusNotificationEmailChannels>(html`
+      <webstatus-notification-email-channels
+        .loading=${true}
+      ></webstatus-notification-email-channels>
+    `);
+
+    const basePanel = el.shadowRoot!.querySelector<WebstatusNotificationPanel>(
+      'webstatus-notification-panel',
+    );
+    assert.isNotNull(basePanel);
+    assert.isTrue(basePanel!.loading);
+  });
+});

frontend/src/static/js/components/test/webstatus-notification-panel.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {assert, fixture, html} from '@open-wc/testing';
+import '../../components/webstatus-notification-panel.js';
+import type {WebstatusNotificationPanel} from '../../components/webstatus-notification-panel.js';
+
+describe('webstatus-notification-panel', () => {
+  it('renders content in the content slot', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel>
+        <div slot="content">Test Content</div>
+      </webstatus-notification-panel>
+    `);
+    const contentSlot = el.shadowRoot!.querySelector<HTMLSlotElement>(
+      'slot[name="content"]',
+    );
+    assert.isNotNull(contentSlot);
+    const assignedNodes = contentSlot.assignedNodes({
+      flatten: true,
+    }) as HTMLElement[];
+    assert.include(assignedNodes[0].textContent, 'Test Content');
+  });
+
+  it('renders an icon in the icon slot', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel>
+        <sl-icon name="test-icon" slot="icon"></sl-icon>
+      </webstatus-notification-panel>
+    `);
+    const iconSlot =
+      el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="icon"]');
+    assert.isNotNull(iconSlot);
+    const assignedNodes = iconSlot.assignedNodes({
+      flatten: true,
+    }) as HTMLElement[];
+    assert.equal(assignedNodes[0].tagName, 'SL-ICON');
+    assert.equal(assignedNodes[0].getAttribute('name'), 'test-icon');
+  });
+
+  it('renders a title in the title slot', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel>
+        <span slot="title">Test Title</span>
+      </webstatus-notification-panel>
+    `);
+    const titleSlot =
+      el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="title"]');
+    assert.isNotNull(titleSlot);
+    const assignedNodes = titleSlot.assignedNodes({
+      flatten: true,
+    }) as HTMLElement[];
+    assert.include(assignedNodes[0].textContent, 'Test Title');
+  });
+
+  it('renders actions in the actions slot', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel>
+        <sl-button slot="actions">Action Button</sl-button>
+      </webstatus-notification-panel>
+    `);
+    const actionsSlot = el.shadowRoot!.querySelector<HTMLSlotElement>(
+      'slot[name="actions"]',
+    );
+    assert.isNotNull(actionsSlot);
+    const assignedNodes = actionsSlot.assignedNodes({
+      flatten: true,
+    }) as HTMLElement[];
+    assert.equal(assignedNodes[0].tagName, 'SL-BUTTON');
+    assert.include(assignedNodes[0].textContent, 'Action Button');
+  });
+
+  it('displays skeletons when loading is true and hides content', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel .loading=${true}>
+        <div slot="content">Test Content</div>
+      </webstatus-notification-panel>
+    `);
+    const skeletons = el.shadowRoot!.querySelectorAll('sl-skeleton');
+    assert.equal(skeletons.length, 2);
+    const contentSlot = el.shadowRoot!.querySelector<HTMLSlotElement>(
+      'slot[name="content"]',
+    );
+    assert.isNull(contentSlot);
+  });
+
+  it('hides skeletons when loading is false and shows content', async () => {
+    const el = await fixture<WebstatusNotificationPanel>(html`
+      <webstatus-notification-panel .loading=${false}>
+        <div slot="content">Test Content</div>
+      </webstatus-notification-panel>
+    `);
+    const skeletons = el.shadowRoot!.querySelectorAll('sl-skeleton');
+    assert.equal(skeletons.length, 0);
+    const contentSlot = el.shadowRoot!.querySelector<HTMLSlotElement>(
+      'slot[name="content"]',
+    );
+    assert.isNotNull(contentSlot);
+    const assignedNodes = contentSlot.assignedNodes({
+      flatten: true,
+    }) as HTMLElement[];
+    assert.include(assignedNodes[0].textContent, 'Test Content');
+  });
+});