Merge pull request #17468 from mozilla/FXA-9576-2fa-setup-code-success

feat(metrics): add 2fa setup successful code submission event

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

@@ -33,6 +33,7 @@ jest.mock('../../../lib/glean', () => ({
     accountPref: {
       twoStepAuthScanCodeLink: jest.fn(),
       twoStepAuthQrView: jest.fn(),
+      twoStepAuthQrCodeSuccess: jest.fn(),
     },
   },
 }));
@@ -316,6 +317,9 @@ describe('step 3', () => {
       await fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
     expect(getCode).toBeCalledTimes(1);
+    expect(
+      GleanMetrics.accountPref.twoStepAuthQrCodeSuccess
+    ).toHaveBeenCalled();
 
     expect(mockNavigate).toHaveBeenCalledWith(
       SETTINGS_PATH + '#two-step-authentication',

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

@@ -128,6 +128,7 @@ export const PageTwoStepAuthentication = (_: RouteComponentProps) => {
     const isValidCode = await checkCode(totpInfo.result.secret, totp);
     setTotpVerified(isValidCode);
     if (isValidCode) {
+      GleanMetrics.accountPref.twoStepAuthQrCodeSuccess();
       showRecoveryCodes();
     } else {
       setInvalidCodeError(

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

@@ -398,6 +398,9 @@ const recordEventMetric = (
     case 'account_pref_two_step_auth_qr_view':
       accountPref.twoStepAuthQrView.record();
       break;
+    case 'account_pref_two_step_auth_qr_code_success':
+      accountPref.twoStepAuthQrCodeSuccess.record();
+      break;
     case 'account_pref_change_password_submit':
       accountPref.changePasswordSubmit.record();
       break;

packages/fxa-settings/src/pages/InlineTotpSetup/container.test.tsx

@@ -12,6 +12,7 @@ import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localiz
 import { MozServices } from '../../lib/types';
 import { OAuthIntegration } from '../../models';
 import InlineTotpSetupContainer from './container';
+import GleanMetrics from '../../lib/glean';
 import {
   MOCK_TOTP_TOKEN,
   MOCK_QUERY_PARAMS,
@@ -56,6 +57,15 @@ jest.mock('../../lib/totp', () => {
 const mockTotpStatusQuery = jest.fn();
 const mockCreateTotpMutation = jest.fn();
 
+jest.mock('../../lib/glean', () => ({
+  __esModule: true,
+  default: {
+    accountPref: {
+      twoStepAuthQrCodeSuccess: jest.fn(),
+    },
+  },
+}));
+
 function setMocks() {
   mockLocationHook.mockReturnValue({
     pathname: '/inline_totp_setup',
@@ -318,6 +328,9 @@ describe('InlineTotpSetupContainer', () => {
             .calls[0][0];
           const verifyCodeHandler = args.verifyCodeHandler;
           await verifyCodeHandler('1010');
+          expect(
+            GleanMetrics.accountPref.twoStepAuthQrCodeSuccess
+          ).toHaveBeenCalled();
           expect(mockNavigateHook).toHaveBeenCalledWith(
             `/inline_recovery_setup?${new URLSearchParams(MOCK_QUERY_PARAMS)}`,
             { state: MOCK_SIGNIN_RECOVERY_LOCATION_STATE }

packages/fxa-settings/src/pages/InlineTotpSetup/container.tsx

@@ -21,6 +21,7 @@ import { SigninRecoveryLocationState } from '../InlineRecoverySetup/interfaces';
 import { hardNavigate } from 'fxa-react/lib/utils';
 import { QueryParams } from '../..';
 import { queryParamsToMetricsContext } from '../../lib/metrics';
+import GleanMetrics from '../../lib/glean';
 
 export const InlineTotpSetupContainer = ({
   isSignedIn,
@@ -146,6 +147,7 @@ export const InlineTotpSetupContainer = ({
           ...Object.assign({}, signinState),
           ...(totp ? { totp } : {}),
         };
+        GleanMetrics.accountPref.twoStepAuthQrCodeSuccess();
         navTo(
           'inline_recovery_setup',
           Object.keys(state).length > 0 ? state : undefined

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

@@ -1966,6 +1966,23 @@ account_pref:
     expires: never
     data_sensitivity:
       - interaction
+  two_step_auth_qr_code_success:
+    type: event
+    description: |
+      Authentication code was successfully entered and submitted.
+    send_in_pings:
+      - events
+    notification_emails:
+      - vzare@mozilla.com
+      - fxa-staff@mozilla.com
+    bugs:
+      - https://mozilla-hub.atlassian.net/browse/FXA-9576
+    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: |

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

@@ -364,6 +364,22 @@ export const secondaryEmailSubmit = new EventMetricType(
   []
 );
 
+/**
+ * Authentication code was successfully entered and submitted.
+ *
+ * Generated from `account_pref.two_step_auth_qr_code_success`.
+ */
+export const twoStepAuthQrCodeSuccess = new EventMetricType(
+  {
+    category: 'account_pref',
+    name: 'two_step_auth_qr_code_success',
+    sendInPings: ['events'],
+    lifetime: 'ping',
+    disabled: false,
+  },
+  []
+);
+
 /**
  * User started the 2FA setup process by viewing step 1 of the funnel, complete
  * with QR code for scanning.

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

@@ -161,6 +161,7 @@ export const eventsMap = {
     twoStepAuthSubmit: 'account_pref_two_step_auth_submit',
     twoStepAuthScanCodeLink: 'account_pref_two_step_auth_scan_code_link',
     twoStepAuthQrView: 'account_pref_two_step_auth_qr_view',
+    twoStepAuthQrCodeSuccess: 'account_pref_two_step_auth_qr_code_success',
     changePasswordSubmit: 'account_pref_change_password_submit',
     deviceSignout: 'account_pref_device_signout',
     appleSubmit: 'account_pref_apple_submit',