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

Introduces a new share dialog with QR code generation for saved searches.
Also adds handling for a `subscribe=true` URL parameter that prompts users to log in if needed, or automatically opens the subscription dialog.

Author: neilv-g

e2e/tests/notification-channels.spec.ts-snapshots/notification-channels-authenticated-chromium-linux.png

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Google LLC
+ * Copyright 2023 Google LLC.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

e2e/tests/notification-channels.spec.ts-snapshots/notification-channels-authenticated-dark-chromium-linux.png

@@ -38,11 +38,11 @@ function expectUrlsEqual(actualUrlStr: string, expectedUrlStr: string) {
 const USER1 = {
   username: 'test user 1',
   userID: 'abcdedf1234567890',
-};
+} as const;
 const USER2 = {
   username: 'test user 2',
   userID: 'abcdedf1234567891',
-};
+} as const;
 
 const USER1_SEARCH1 = {
   id: '74bdb85f-59d3-43b0-8061-20d5818e8c97',
@@ -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) =>
@@ -158,7 +158,9 @@ test.describe('Saved Searches on Overview Page', () => {
 
     // 5. Verify dialog closes and URL updates with q=saved:ID
     await expect(editorDialogLocator(page)).not.toBeVisible();
-    await page.waitForURL(url => url.searchParams.get('q')?.includes('saved:'));
+    await page.waitForURL(
+      url => url.searchParams.get('q')?.includes('saved:') ?? false,
+    );
     const qParam = new URL(page.url()).searchParams.get('q');
     const searchId = qParam?.split(':')[1];
     expect(searchId).toBeTruthy();
@@ -404,11 +406,19 @@ test.describe('Saved Searches on Overview Page', () => {
     // Click the share icon
     await shareButtonLocator(page).click();
 
+    // Wait for the share dialog to appear
+    const shareDialog = page.locator('webstatus-saved-search-share-dialog');
+    const dialog = shareDialog.locator('sl-dialog');
+    await expect(dialog).toBeVisible();
+
+    // Click the "Copy link" button inside the dialog
+    await dialog.locator('sl-button[variant="primary"]').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 ({
@@ -468,7 +478,9 @@ test.describe('Saved Searches on Overview Page', () => {
     await editorNameInputLocator(page).fill('My Firefox Search');
     await editorSubmitButtonLocator(page).click();
     await expect(editorDialogLocator(page)).not.toBeVisible(); // Should close now
-    await page.waitForURL(url => url.searchParams.get('q')?.includes('saved:'));
+    await page.waitForURL(
+      url => url.searchParams.get('q')?.includes('saved:') ?? false,
+    );
   });
 
   test.describe('Subscriptions', () => {

e2e/tests/notification-channels.spec.ts-snapshots/notification-channels-authenticated-dark-firefox-linux.png

@@ -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();