feat(metrics): Add '2FA Can't Scan Code Link' frontend event

packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx

@@ -15,6 +15,7 @@ import PageTwoStepAuthentication, { metricsPreInPostFix } from '.';
 import { checkCode, getCode } from '../../../lib/totp';
 import { SETTINGS_PATH } from '../../../constants';
 import * as Metrics from '../../../lib/metrics';
+import GleanMetrics from '../../../lib/glean';
 import { Account, AppContext } from '../../../models';
 import { AuthUiErrors } from 'fxa-settings/src/lib/auth-errors/auth-errors';
 import { SettingsContext } from '../../../models/contexts/SettingsContext';
@@ -26,6 +27,15 @@ jest.mock('../../../lib/totp', () => ({
   checkCode: jest.fn().mockResolvedValue(true),
 }));
 
+jest.mock('../../../lib/glean', () => ({
+  __esModule: true,
+  default: {
+    accountPref: {
+      twoStepAuthScanCodeLink: jest.fn(),
+    },
+  },
+}));
+
 const mockNavigate = jest.fn();
 jest.mock('@reach/router', () => ({
   ...jest.requireActual('@reach/router'),
@@ -127,6 +137,18 @@ describe('step 1', () => {
     });
     expect(screen.queryByTestId('2fa-qr-code')).toBeNull();
   });
+
+  it('displays the totp secret', async () => {
+    await act(async () => {
+      render();
+    });
+    await act(async () => {
+      await fireEvent.click(screen.getByTestId('cant-scan-code'));
+    });
+
+    expect(screen.getByTestId('manual-code')).toBeInTheDocument();
+    expect(GleanMetrics.accountPref.twoStepAuthScanCodeLink).toHaveBeenCalled();
+  });
 });
 
 describe('step 2', () => {

packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.tsx

@@ -20,6 +20,7 @@ import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
 import { useAsync } from 'react-async-hook';
 import { getErrorFtlId } from '../../../lib/error-utils';
 import DataBlockManual from '../../DataBlockManual';
+import GleanMetrics from '../../../lib/glean';
 
 export const metricsPreInPostFix = 'settings.two-step-authentication';
 
@@ -239,7 +240,10 @@ export const PageTwoStepAuthentication = (_: RouteComponentProps) => {
                     type="button"
                     className="mx-auto link-blue text-sm"
                     data-testid="cant-scan-code"
-                    onClick={() => setShowQrCode(false)}
+                    onClick={() => {
+                      setShowQrCode(false);
+                      GleanMetrics.accountPref.twoStepAuthScanCodeLink();
+                    }}
                   >
                     Can't scan code?
                   </button>

packages/fxa-settings/src/lib/glean/index.ts

@@ -383,6 +383,9 @@ const recordEventMetric = (
     case 'account_pref_two_step_auth_submit':
       accountPref.twoStepAuthSubmit.record();
       break;
+    case 'account_pref_two_step_auth_scan_code_link':
+      accountPref.twoStepAuthScanCodeLink.record();
+      break;
     case 'account_pref_change_password_submit':
       accountPref.changePasswordSubmit.record();
       break;

packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml

@@ -1890,6 +1890,23 @@ account_pref:
     expires: never
     data_sensitivity:
       - interaction
+  two_step_auth_scan_code_link:
+    type: event
+    description: |
+      User clicked the "Can't scan code?" link
+    send_in_pings:
+      - events
+    notification_emails:
+      - vzare@mozilla.com
+      - fxa-staff@mozilla.com
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-10038
+    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
   change_password_submit:
     type: event
     description: |
@@ -1900,7 +1917,7 @@ account_pref:
       - vzare@mozilla.com
       - fxa-staff@mozilla.com
     bugs:
-      - https://mozilla-hub.atlassian.net/browse/FXA-10040
+      - https://mozilla-hub.atlassian.net/browse/FXA-9577
     data_reviews:
       - https://bugzilla.mozilla.org/show_bug.cgi?id=1830504
       - https://bugzilla.mozilla.org/show_bug.cgi?id=1844121

packages/fxa-shared/metrics/glean/web/accountPref.ts

@@ -198,6 +198,22 @@ export const secondaryEmailSubmit = new EventMetricType(
   []
 );
 
+/**
+ * User clicked the "Can't scan code?" link
+ *
+ * Generated from `account_pref.two_step_auth_scan_code_link`.
+ */
+export const twoStepAuthScanCodeLink = new EventMetricType(
+  {
+    category: 'account_pref',
+    name: 'two_step_auth_scan_code_link',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);
+
 /**
  * Click on "Add" button on account settings page for adding 2FA to account
  *

packages/fxa-shared/metrics/glean/web/index.ts

@@ -159,6 +159,7 @@ export const eventsMap = {
     view: 'account_pref_view',
     recoveryKeySubmit: 'account_pref_recovery_key_submit',
     twoStepAuthSubmit: 'account_pref_two_step_auth_submit',
+    twoStepAuthScanCodeLink: 'account_pref_two_step_auth_scan_code_link',
     changePasswordSubmit: 'account_pref_change_password_submit',
     deviceSignout: 'account_pref_device_signout',
     appleSubmit: 'account_pref_apple_submit',