feat(settings): Update account preferences help link, add Glean click event

Because: * Accounts has its own dedicated help link we should use instead * We want a metrics event for when users click on this link This commit: * Updates the link and adds the Glean event closes FXA-10220, closes FXA-10221
2024-08-07 11:19:05 -05:00 · 2024-08-07 11:19:05 -05:00 · cfcc96394b
--- a/packages/functional-tests/pages/settings/layout.ts
+++ b/packages/functional-tests/pages/settings/layout.ts
@ -11,7 +11,7 @@ export abstract class SettingsLayout extends BaseLayout {
  }

  get helpLink() {
-    return this.page.getByTestId('header-sumo-link');
+    return this.page.getByRole('link', { name: 'Help' });
  }

  get bentoDropDownMenu() {
--- a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx
@ -7,25 +7,25 @@ import { screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import HeaderLockup from '.';
 import { createMockSettingsIntegration } from '../mocks';
+import { userEvent } from '@testing-library/user-event';
+import GleanMetrics from '../../../lib/glean';

-// TODO: functional test for `data-testid="header-menu"` to be visible in
-// mobile & tablet but hidden at desktop
+jest.mock('../../../lib/glean', () => ({
+  __esModule: true,
+  default: {
+    accountPref: {
+      help: jest.fn(),
+    },
+  },
+}));

 describe('HeaderLockup', () => {
  it('renders as expected', () => {
    renderWithLocalizationProvider(
      <HeaderLockup integration={createMockSettingsIntegration()} />
    );
-    const headerHelp = screen.getByTestId('header-help');
    const headerMenu = screen.getByTestId('header-menu');

-    expect(screen.getByTestId('header-sumo-link')).toHaveAttribute(
-      'href',
-      'https://support.mozilla.org'
-    );
-    expect(headerHelp).toBeInTheDocument();
-    expect(headerHelp).toHaveAttribute('title', 'Help');
-
    expect(
      screen.getByTestId('drop-down-bento-menu-toggle')
    ).toBeInTheDocument();
@ -34,9 +34,21 @@ describe('HeaderLockup', () => {
    expect(headerMenu).toBeInTheDocument();
    expect(headerMenu).toHaveAttribute('title', 'Site navigation menu');

+    expect(screen.getByRole('link', { name: 'Help' })).toHaveAttribute(
+      'href',
+      'https://support.mozilla.org/products/mozilla-account'
+    );
    expect(screen.getByTestId('back-to-top')).toHaveAttribute(
      'title',
      'Back to top'
    );
  });
+
+  it('emits Glean event on help link click', async () => {
+    renderWithLocalizationProvider(
+      <HeaderLockup integration={createMockSettingsIntegration()} />
+    );
+    await userEvent.click(screen.getByRole('link', { name: 'Help' }));
+    expect(GleanMetrics.accountPref.help).toHaveBeenCalled();
+  });
 });
--- a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx
@ -14,6 +14,7 @@ import { ReactComponent as Menu } from './menu.svg';
 import { ReactComponent as Close } from './close.svg';
 import { SettingsIntegration } from '../interfaces';
 import Sidebar from '../Sidebar';
+import GleanMetrics from '../../../lib/glean';

 export const HeaderLockup = ({
  integration,
@ -27,6 +28,10 @@ export const HeaderLockup = ({
    ? l10n.getString('header-menu-open', null, 'Close menu')
    : l10n.getString('header-menu-closed', null, 'Site navigation menu');

+  const handleHelpLinkClick = () => {
+    GleanMetrics.accountPref.help();
+  };
+
  const left = (
    <>
      <button
@ -69,17 +74,16 @@ export const HeaderLockup = ({
  const right = (
    <>
      <LinkExternal
-        href="https://support.mozilla.org"
+        href="https://support.mozilla.org/products/mozilla-account"
        title={localizedHelpText}
-        data-testid="header-sumo-link"
        className="inline-block relative p-2 -m-2 z-[1] rounded hover:bg-grey-100"
+        onClick={handleHelpLinkClick}
      >
        <Help
          aria-label={localizedHelpText}
          title={localizedHelpText}
          role="img"
          className="w-5 text-violet-900"
-          data-testid="header-help"
        />
      </LinkExternal>
      <BentoMenu />
--- a/packages/fxa-settings/src/lib/glean/index.ts
+++ b/packages/fxa-settings/src/lib/glean/index.ts
@ -423,6 +423,9 @@ const recordEventMetric = (
    case 'account_pref_secondary_email_submit':
      accountPref.secondaryEmailSubmit.record();
      break;
+    case 'account_pref_help':
+      accountPref.help.record();
+      break;
    case 'delete_account_settings_submit':
      deleteAccount.settingsSubmit.record();
      break;
--- a/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml
+++ b/packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml
@ -2080,6 +2080,23 @@ account_pref:
      reason:
        description: If reason is "create_password", the user was taken to the create password page, set a password, and then confirmed the account unlinking.
        type: string
+  help:
+    type: event
+    description: |
+      User clicked the question mark icon "Help" link in the account settings page header
+    send_in_pings:
+      - events
+    notification_emails:
+      - vzare@mozilla.com
+      - fxa-staff@mozilla.com
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-10220
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121
+    expires: never
+    data_sensitivity:
+      - interaction

 delete_account:
  settings_submit:
--- a/packages/fxa-shared/metrics/glean/web/account.ts
+++ b/packages/fxa-shared/metrics/glean/web/account.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import StringMetricType from '@mozilla/glean/private/metrics/string';

--- a/packages/fxa-shared/metrics/glean/web/accountPref.ts
+++ b/packages/fxa-shared/metrics/glean/web/accountPref.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

@ -165,6 +165,23 @@ export const googleUnlinkSubmitConfirm = new EventMetricType<{
  ['reason']
 );

+/**
+ * User clicked the question mark icon "Help" link in the account settings page
+ * header
+ *
+ * Generated from `account_pref.help`.
+ */
+export const help = new EventMetricType(
+  {
+    category: 'account_pref',
+    name: 'help',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);
+
 /**
 * Click on "Create" or "Change" button on account settings page to add a recovery
 * key to the account
--- a/packages/fxa-shared/metrics/glean/web/cachedLogin.ts
+++ b/packages/fxa-shared/metrics/glean/web/cachedLogin.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cad.ts
+++ b/packages/fxa-shared/metrics/glean/web/cad.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cadApproveDevice.ts
+++ b/packages/fxa-shared/metrics/glean/web/cadApproveDevice.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cadFirefox.ts
+++ b/packages/fxa-shared/metrics/glean/web/cadFirefox.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cadMobilePair.ts
+++ b/packages/fxa-shared/metrics/glean/web/cadMobilePair.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cadMobilePairUseApp.ts
+++ b/packages/fxa-shared/metrics/glean/web/cadMobilePairUseApp.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts
+++ b/packages/fxa-shared/metrics/glean/web/cadRedirectDesktop.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/deleteAccount.ts
+++ b/packages/fxa-shared/metrics/glean/web/deleteAccount.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/email.ts
+++ b/packages/fxa-shared/metrics/glean/web/email.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/event.ts
+++ b/packages/fxa-shared/metrics/glean/web/event.ts
@ -2,10 +2,10 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

-import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';
 import StringMetricType from '@mozilla/glean/private/metrics/string';
+import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';

 /**
 * The name of the event
--- a/packages/fxa-shared/metrics/glean/web/index.ts
+++ b/packages/fxa-shared/metrics/glean/web/index.ts
@ -169,6 +169,7 @@ export const eventsMap = {
    appleUnlinkSubmitConfirm: 'account_pref_apple_unlink_submit_confirm',
    displayNameSubmit: 'account_pref_display_name_submit',
    secondaryEmailSubmit: 'account_pref_secondary_email_submit',
+    help: 'account_pref_help',
  },

  deleteAccount: {
--- a/packages/fxa-shared/metrics/glean/web/login.ts
+++ b/packages/fxa-shared/metrics/glean/web/login.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/passwordReset.ts
+++ b/packages/fxa-shared/metrics/glean/web/passwordReset.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/pings.ts
+++ b/packages/fxa-shared/metrics/glean/web/pings.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import PingType from '@mozilla/glean/private/ping';

--- a/packages/fxa-shared/metrics/glean/web/reg.ts
+++ b/packages/fxa-shared/metrics/glean/web/reg.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/relyingParty.ts
+++ b/packages/fxa-shared/metrics/glean/web/relyingParty.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import StringMetricType from '@mozilla/glean/private/metrics/string';

--- a/packages/fxa-shared/metrics/glean/web/session.ts
+++ b/packages/fxa-shared/metrics/glean/web/session.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import StringMetricType from '@mozilla/glean/private/metrics/string';

--- a/packages/fxa-shared/metrics/glean/web/standard.ts
+++ b/packages/fxa-shared/metrics/glean/web/standard.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import LabeledMetricType from '@mozilla/glean/private/metrics/labeled';
 import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';
--- a/packages/fxa-shared/metrics/glean/web/sync.ts
+++ b/packages/fxa-shared/metrics/glean/web/sync.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import LabeledMetricType from '@mozilla/glean/private/metrics/labeled';
 import BooleanMetricType from '@mozilla/glean/private/metrics/boolean';
--- a/packages/fxa-shared/metrics/glean/web/thirdPartyAuth.ts
+++ b/packages/fxa-shared/metrics/glean/web/thirdPartyAuth.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/thirdPartyAuthSetPassword.ts
+++ b/packages/fxa-shared/metrics/glean/web/thirdPartyAuthSetPassword.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import EventMetricType from '@mozilla/glean/private/metrics/event';

--- a/packages/fxa-shared/metrics/glean/web/utm.ts
+++ b/packages/fxa-shared/metrics/glean/web/utm.ts
@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-// AUTOGENERATED BY glean_parser v14.3.0. DO NOT EDIT. DO NOT COMMIT.
+// AUTOGENERATED BY glean_parser v14.5.1. DO NOT EDIT. DO NOT COMMIT.

 import StringMetricType from '@mozilla/glean/private/metrics/string';