Merge pull request #16071 from mozilla/FXA-8247-password-engagement-glean

feat(metrics): add engagement event for registration password input

packages/fxa-settings/src/components/FormPasswordWithBalloons/index.tsx

@@ -6,7 +6,6 @@ import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { UseFormMethods } from 'react-hook-form';
 import InputPassword from '../InputPassword';
 import PasswordValidator from '../../lib/password-validator';
-import { logViewEvent, settingsViewName } from '../../lib/metrics';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import { useFtlMsgResolver } from '../../models';
 import { SHOW_BALLOON_TIMEOUT, HIDE_BALLOON_TIMEOUT } from '../../constants';
@@ -24,7 +23,7 @@ export type FormPasswordWithBalloonsProps = {
   register: UseFormMethods['register'];
   getValues: UseFormMethods['getValues'];
   email: string;
-  onFocusMetricsEvent?: string;
+  onFocusMetricsEvent?: () => void;
   loading: boolean;
   children?: React.ReactNode;
   disableButtonUntilValid?: boolean;
@@ -142,7 +141,7 @@ export const FormPasswordWithBalloons = ({
   const onNewPwdFocus = () => {
     showNewPwdBalloon();
     if (!hasNewPwdFocused && onFocusMetricsEvent) {
-      logViewEvent(settingsViewName, onFocusMetricsEvent);
+      onFocusMetricsEvent();
       setHasNewPwdFocused(true);
     }
   };

packages/fxa-settings/src/components/FormPasswordWithBalloons/mocks.tsx

@@ -45,7 +45,7 @@ export const Subject = ({ passwordFormType }: SubjectProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
       email={MOCK_ACCOUNT.primaryEmail.email}
       loading={false}
-      onFocusMetricsEvent="test-event"
+      onFocusMetricsEvent={() => {}}
     />
   );
 };

packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryResetPassword/index.tsx

@@ -20,6 +20,7 @@ import {
   logErrorEvent,
   logViewEvent,
   setUserPreference,
+  settingsViewName,
   usePageViewEvent,
 } from '../../../lib/metrics';
 import { useAccount } from '../../../models/hooks';
@@ -73,6 +74,10 @@ const AccountRecoveryResetPassword = ({
     linkIsValid ? LinkStatus.valid : LinkStatus.damaged
   );
 
+  const onFocusMetricsEvent = () => {
+    logViewEvent(settingsViewName, `${viewName}.engage`);
+  };
+
   const { handleSubmit, register, getValues, errors, formState, trigger } =
     useForm<AccountRecoveryResetPasswordFormData>({
       mode: 'onTouched',
@@ -176,7 +181,7 @@ const AccountRecoveryResetPassword = ({
           )}
           email={verificationInfo.email}
           loading={false}
-          onFocusMetricsEvent={`${viewName}.engage`}
+          onFocusMetricsEvent={onFocusMetricsEvent}
         />
       </section>
 

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx

@@ -5,7 +5,11 @@
 import React, { useCallback, useState, useEffect, ReactElement } from 'react';
 import { Link, useLocation, useNavigate } from '@reach/router';
 import { useForm } from 'react-hook-form';
-import { logPageViewEvent } from '../../../lib/metrics';
+import {
+  logPageViewEvent,
+  logViewEvent,
+  settingsViewName,
+} from '../../../lib/metrics';
 import {
   IntegrationType,
   useAccount,
@@ -182,6 +186,10 @@ const CompleteResetPassword = ({
     );
   }, [navigateWithoutRerender]);
 
+  const onFocusMetricsEvent = () => {
+    logViewEvent(settingsViewName, `${viewName}.engage`);
+  };
+
   const onSubmit = useCallback(
     async ({
       newPassword,
@@ -331,7 +339,7 @@ const CompleteResetPassword = ({
             })
           )}
           loading={false}
-          onFocusMetricsEvent={`${viewName}.engage`}
+          onFocusMetricsEvent={onFocusMetricsEvent}
         />
       </section>
       <LinkRememberPassword email={linkModel.email} />

packages/fxa-settings/src/pages/Signup/index.test.tsx

@@ -68,7 +68,12 @@ jest.mock('@reach/router', () => ({
 jest.mock('../../lib/glean', () => ({
   __esModule: true,
   default: {
-    registration: { view: jest.fn(), submit: jest.fn(), success: jest.fn() },
+    registration: {
+      view: jest.fn(),
+      engage: jest.fn(),
+      submit: jest.fn(),
+      success: jest.fn(),
+    },
   },
 }));
 
@@ -221,13 +226,22 @@ describe('Signup page', () => {
     expect(checkboxes).toHaveLength(3);
   });
 
-  it('emits a metrics event on render', async () => {
+  it('emits metrics events', async () => {
     renderWithLocalizationProvider(<Subject />);
 
     await waitFor(() => {
       expect(usePageViewEvent).toHaveBeenCalledWith(viewName, REACT_ENTRYPOINT);
       expect(GleanMetrics.registration.view).toBeCalledTimes(1);
     });
+
+    fireEvent.focus(screen.getByLabelText('Password'));
+
+    await waitFor(() => {
+      expect(GleanMetrics.registration.engage).toBeCalledTimes(1);
+      expect(GleanMetrics.registration.engage).toBeCalledWith({
+        reason: 'password',
+      });
+    });
   });
 
   describe('handles submission', () => {

packages/fxa-settings/src/pages/Signup/index.tsx

@@ -10,7 +10,11 @@ import {
   isSyncDesktopIntegration,
   useFtlMsgResolver,
 } from '../../models';
-import { logViewEvent, usePageViewEvent } from '../../lib/metrics';
+import {
+  logViewEvent,
+  settingsViewName,
+  usePageViewEvent,
+} from '../../lib/metrics';
 import { FtlMsg, hardNavigateToContentServer } from 'fxa-react/lib/utils';
 import LinkExternal from 'fxa-react/components/LinkExternal';
 import FormPasswordWithBalloons from '../../components/FormPasswordWithBalloons';
@@ -65,7 +69,10 @@ const Signup = ({
 
   const canChangeEmail = !isOAuthIntegration(integration);
 
-  const onFocusMetricsEvent = `${viewName}.engage`;
+  const onFocusMetricsEvent = () => {
+    logViewEvent(settingsViewName, `${viewName}.engage`);
+    GleanMetrics.registration.engage({ reason: 'password' });
+  };
 
   const [beginSignupLoading, setBeginSignupLoading] = useState<boolean>(false);
   const [bannerErrorText, setBannerErrorText] = useState<string>('');
@@ -152,7 +159,7 @@ const Signup = ({
 
   const onFocus = () => {
     if (!isFocused) {
-      logViewEvent('flow', onFocusMetricsEvent, REACT_ENTRYPOINT);
+      logViewEvent('flow', `${viewName}.engage`, REACT_ENTRYPOINT);
       setIsFocused(true);
     }
   };

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

@@ -28,6 +28,7 @@ export const eventsMap = {
 
   registration: {
     view: 'reg_view',
+    engage: 'reg_engage',
     submit: 'reg_submit',
     success: 'reg_submit_success',
   },