feat: Add share dialog with QR code and support auto-subscriptions

e2e/tests/saved-searches.spec.ts

@@ -77,7 +77,7 @@ const saveButtonLocator = (page: Page) =>
     .getByTestId('saved-search-save-button')
     .getByRole('button', {name: 'Save'});
 const shareButtonLocator = (page: Page) =>
-  controlsLocator(page).getByLabel('Copy', {exact: true});
+  controlsLocator(page).getByLabel('Share', {exact: true});
 const bookmarkEmptyIconLocator = (page: Page) =>
   controlsLocator(page).getByRole('button', {name: 'Bookmark', exact: true});
 const bookmarkFilledIconLocator = (page: Page) =>
@@ -404,11 +404,19 @@ test.describe('Saved Searches on Overview Page', () => {
     // Click the share icon
     await shareButtonLocator(page).click();
 
+    // Wait for the share dialog to appear
+    const dialog = page.getByRole('dialog', {name: 'Share bookmark'});
+    await expect(dialog).toBeVisible();
+    console.log('Dialog HTML:', await dialog.innerHTML());
+
+    // Click the "Copy link" button inside the dialog
+    await page.getByTestId('copy-link-button').click();
+
     // Verify clipboard content
     const clipboardText = await page.evaluate(() =>
       navigator.clipboard.readText(),
     );
-    expectUrlsEqual(clipboardText, page.url());
+    expectUrlsEqual(clipboardText, `${page.url()}&subscribe=true`);
   });
 
   test('Edit dialog opens automatically with edit_saved_search=true URL parameter', async ({

e2e/tests/utils.ts

@@ -202,7 +202,7 @@ export async function loginAsUser(
   const popupPromise = page.waitForEvent('popup');
   await page.goto('http://localhost:5555/');
   await waitForSidebarLoaded(page);
-  await page.getByText('Log in').click();
+  await page.getByRole('banner').getByText('Log in').click();
   const popup = await popupPromise;
 
   await popup.waitForLoadState();

frontend/src/static/js/components/test/webstatus-login-prompt-dialog.test.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 {fixture, html, expect, oneEvent} from '@open-wc/testing';
+import sinon from 'sinon';
+import {WebstatusLoginPromptDialog} from '../webstatus-login-prompt-dialog.js';
+import {
+  AuthConfig,
+  firebaseAuthContext,
+} from '../../contexts/firebase-auth-context.js';
+import {provide} from '@lit/context';
+import {LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import '../webstatus-login-prompt-dialog.js';
+
+@customElement('test-auth-provider')
+class TestAuthProvider extends LitElement {
+  @property({type: Object})
+  @provide({context: firebaseAuthContext})
+  authConfig!: AuthConfig;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+describe('webstatus-login-prompt-dialog', () => {
+  let mockAuthConfig: AuthConfig;
+  let signInStub: sinon.SinonStub;
+
+  beforeEach(() => {
+    signInStub = sinon.stub().resolves();
+    mockAuthConfig = {
+      auth: {} as any,
+      provider: {} as any,
+      icon: 'github',
+      signIn: signInStub,
+    };
+  });
+
+  it('renders nothing when closed', async () => {
+    const el = await fixture<WebstatusLoginPromptDialog>(html`
+      <webstatus-login-prompt-dialog
+        .open=${false}
+      ></webstatus-login-prompt-dialog>
+    `);
+    const dialog = el.shadowRoot?.querySelector('sl-dialog');
+    expect(dialog?.open).to.be.false;
+  });
+
+  it('renders dialog when open', async () => {
+    const el = await fixture<WebstatusLoginPromptDialog>(html`
+      <webstatus-login-prompt-dialog
+        .open=${true}
+        .savedSearchName=${'My Search'}
+      ></webstatus-login-prompt-dialog>
+    `);
+    const dialog = el.shadowRoot?.querySelector('sl-dialog');
+    expect(dialog?.open).to.be.true;
+    expect(el.shadowRoot?.textContent).to.contain('My Search');
+  });
+
+  it('calls signIn on button click and dispatches login-success', async () => {
+    const wrapper = await fixture<TestAuthProvider>(html`
+      <test-auth-provider .authConfig=${mockAuthConfig}>
+        <webstatus-login-prompt-dialog
+          .open=${true}
+        ></webstatus-login-prompt-dialog>
+      </test-auth-provider>
+    `);
+    const el = wrapper.querySelector<WebstatusLoginPromptDialog>(
+      'webstatus-login-prompt-dialog',
+    )!;
+    const button = el.shadowRoot?.querySelector('sl-button[variant="primary"]');
+    expect(button).to.exist;
+
+    const eventPromise = oneEvent(el, 'login-success');
+    (button as HTMLElement).click();
+
+    await eventPromise;
+    expect(signInStub.calledOnce).to.be.true;
+    expect(el.open).to.be.false;
+  });
+});

frontend/src/static/js/components/test/webstatus-overview-content.test.ts

@@ -17,6 +17,7 @@
 import {WebstatusOverviewContent} from '../webstatus-overview-content.js';
 import '../webstatus-overview-content.js';
 import {expect, fixture, html} from '@open-wc/testing';
+import {WebstatusLoginPromptDialog} from '../webstatus-login-prompt-dialog.js';
 
 import {
   savedSearchHelpers,
@@ -50,6 +51,7 @@ describe('WebstatusOverviewContent', () => {
     element = await fixture<WebstatusOverviewContent>(html`
       <webstatus-overview-content></webstatus-overview-content>
     `);
+    element.location = {search: ''};
     element._getOrigin = () => 'http://localhost';
     sinon.stub(element, '_getEditSavedSearch').returns(false);
     sinon.stub(element, '_updatePageUrl');
@@ -280,6 +282,21 @@ describe('WebstatusOverviewContent', () => {
 
       expect(openSpy).to.have.been.calledOnce;
     });
+    it('automatically opens the login prompt when subscribe param is true and user is logged out', async () => {
+      element.location = {search: '?subscribe=true'};
+      element.userContext = null;
+      element.savedSearch = mockUserSearch;
+
+      element.requestUpdate();
+      await element.updateComplete;
+
+      const promptDialog =
+        element.shadowRoot?.querySelector<WebstatusLoginPromptDialog>(
+          'webstatus-login-prompt-dialog',
+        );
+      expect(promptDialog).to.exist;
+      expect(promptDialog?.open).to.be.true;
+    });
   });
 
   describe('Events & Interactions', () => {

frontend/src/static/js/components/test/webstatus-saved-search-controls.test.ts

@@ -141,7 +141,9 @@ describe('WebstatusSavedSearchControls', () => {
   });
 
   it('does not render active search controls when no savedSearch is provided', () => {
-    const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+    const shareButton = element.shadowRoot!.querySelector(
+      'sl-icon-button[name="share"]',
+    );
     const bookmarkButton = element.shadowRoot!.querySelector(
       'sl-icon-button[name^="star"]',
     );
@@ -182,7 +184,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -205,13 +209,33 @@ describe('WebstatusSavedSearchControls', () => {
       expect(deleteButton).to.not.exist;
     });
 
-    it('configures share button correctly', () => {
-      const copyButton = element.shadowRoot!.querySelector('sl-copy-button');
-      const expectedUrl = `http://localhost:8080/features?q=saved%3A${mockSavedSearchViewerNotBookmarked.id}`;
-      expect(copyButton).to.have.attribute('value', expectedUrl);
-      expect(formatOverviewPageUrlStub).to.have.been.calledWith(mockLocation, {
-        q: `saved:${mockSavedSearchViewerNotBookmarked.id}`,
-      });
+    it('opens modal when share button is clicked and renders QR code', async () => {
+      const shareButton = element.shadowRoot!.querySelector<SlIconButton>(
+        'sl-icon-button[name="share"]',
+      )!;
+      shareButton.click();
+      await element.updateComplete;
+
+      // Wait for dialog to appear in body.
+      await waitUntil(
+        () =>
+          document.body.querySelector('webstatus-saved-search-share-dialog') !==
+          null,
+      );
+
+      const shareDialog = document.body.querySelector(
+        'webstatus-saved-search-share-dialog',
+      )!;
+      expect(shareDialog).to.exist;
+
+      const dialog = shareDialog.shadowRoot!.querySelector('sl-dialog');
+      expect(dialog).to.exist;
+
+      const qrCode = dialog!.querySelector('sl-qr-code');
+      expect(qrCode).to.exist;
+
+      const copyButton = dialog!.querySelector('sl-button[variant="primary"]');
+      expect(copyButton).to.exist;
     });
 
     it('calls handleBookmarkSavedSearch to bookmark when bookmark button is clicked', async () => {
@@ -332,7 +356,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -446,7 +472,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -469,10 +497,13 @@ describe('WebstatusSavedSearchControls', () => {
       expect(deleteButton).to.exist;
     });
 
-    it('configures share button correctly for owner', () => {
-      const copyButton = element.shadowRoot!.querySelector('sl-copy-button');
-      const expectedUrl = `http://localhost:8080/features?q=saved%3A${mockSavedSearchOwner.id}`;
-      expect(copyButton).to.have.attribute('value', expectedUrl);
+    it('configures share button correctly for owner', async () => {
+      const shareButton = element.shadowRoot!.querySelector<SlIconButton>(
+        'sl-icon-button[name="share"]',
+      )!;
+      shareButton.click();
+      await element.updateComplete;
+
       expect(formatOverviewPageUrlStub).to.have.been.calledWith(mockLocation, {
         q: `saved:${mockSavedSearchOwner.id}`,
       });