fix: restore missing Segment analytics events in Authn MFE

src/data/constants.js

@@ -9,7 +9,7 @@ export const RECOMMENDATIONS = '/recommendations';
 export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
 export const PAGE_NOT_FOUND = '/notfound';
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
-export const APP_NAME = 'authn';
+export const APP_NAME = 'authn_mfe';
 
 // Constants
 export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];

src/login/LoginPage.jsx

@@ -4,22 +4,30 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form, StatefulButton } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import Skeleton from 'react-loading-skeleton';
 import { Link } from 'react-router-dom';
 
+import AccountActivationMessage from './AccountActivationMessage';
+import {
+  ELEMENT_NAME,
+  ELEMENT_TEXT,
+  ELEMENT_TYPES,
+  PAGE_TYPES,
+} from '../cohesion/constants';
+import { setCohesionEventStates } from '../cohesion/data/actions';
 import {
   FormGroup,
   InstitutionLogistration,
   PasswordField,
   RedirectLogistration,
   ThirdPartyAuthAlert,
 } from '../common-components';
-import AccountActivationMessage from './AccountActivationMessage';
+import LoginFailureMessage from './LoginFailure';
+import messages from './messages';
 import { getThirdPartyAuthContext } from '../common-components/data/actions';
 import { thirdPartyAuthContextSelector } from '../common-components/data/selectors';
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
@@ -32,11 +40,13 @@ import {
   getTpaProvider,
   updatePathWithQueryParams,
 } from '../data/utils';
-import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
 import { backupLoginFormBegin, dismissPasswordResetBanner, loginRequest } from './data/actions';
+import { removeCookie } from '../data/utils/cookies';
+import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
 import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants';
-import LoginFailureMessage from './LoginFailure';
-import messages from './messages';
+import {
+  trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess,
+} from '../tracking/trackers/login';
 
 const DEFAULT_LOGIN_FORM_DATA = {
   formFields: { emailOrUsername: '', password: '' },
@@ -96,7 +106,7 @@ const LoginPage = ({
   const tpaHint = getTpaHint();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'login');
+    trackLoginPageViewed();
   }, []);
 
   useEffect(() => {
@@ -140,6 +150,13 @@ const LoginPage = ({
     }
   }, [thirdPartyErrorMessage]);
 
+  useEffect(() => {
+    if (loginResult.success) {
+      trackLoginSuccess();
+      removeCookie('ssoPipelineRedirectionDone');
+    }
+  }, [loginResult]);
+
   const validateFormFields = (payload) => {
     const {
       emailOrUsername,
@@ -183,6 +200,13 @@ const LoginPage = ({
       password: formData.password,
       ...queryParams,
     };
+    const eventData = {
+      pageType: PAGE_TYPES.SIGN_IN,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: ELEMENT_TEXT.SIGN_IN,
+      webElementName: ELEMENT_NAME.SIGN_IN,
+    };
+    dispatch(setCohesionEventStates(eventData));
     dispatch(loginRequest(payload));
   };
 
@@ -204,9 +228,6 @@ const LoginPage = ({
       [name]: '',
     }));
   };
-  const trackForgotPasswordLinkClick = () => {
-    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
-  };
 
   const {
     provider,
@@ -246,6 +267,7 @@ const LoginPage = ({
         success={loginResult.success}
         redirectUrl={loginResult.redirectUrl}
         finishAuthUrl={finishAuthUrl}
+        currectProvider={currentProvider}
       />
       <div className="mw-xs mt-3 mb-2">
         <LoginFailureMessage

src/login/tests/LoginPage.test.jsx

@@ -762,7 +762,11 @@ describe('LoginPage', () => {
 
   it('should send page event when login page is rendered', () => {
     render(reduxWrapper(<LoginPage {...props} />));
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+    expect(sendPageEvent).toHaveBeenCalledWith(
+      'login_and_registration',
+      'login',
+      { app_name: 'authn_mfe' },
+    );
   });
 
   it('tests that form is in invalid state when it is submitted', () => {

src/logistration/Logistration.jsx

@@ -21,7 +21,7 @@ import {
   tpaProvidersSelector,
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { APP_NAME, LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
@@ -63,7 +63,7 @@ const Logistration = ({
       authService.getCsrfTokenService()
         .getCsrfToken(getConfig().LMS_BASE_URL);
     }
-  });
+  }, []);
 
   useEffect(() => {
     if (disablePublicAccountCreation) {
@@ -72,11 +72,11 @@ const Logistration = ({
   }, [navigate, disablePublicAccountCreation]);
 
   const handleInstitutionLogin = (e) => {
-    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
     if (typeof e === 'string') {
-      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
+      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register', { app_name: APP_NAME });
     } else {
-      sendPageEvent('login_and_registration', e.target.dataset.eventName);
+      sendPageEvent('login_and_registration', e.target.dataset.eventName, { app_name: APP_NAME });
     }
 
     setInstitutionLogin(!institutionLogin);
@@ -86,7 +86,7 @@ const Logistration = ({
     if (tabKey === currentTab) {
       return;
     }
-    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
+    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement', app_name: APP_NAME });
     dispatch(clearThirdPartyAuthContextErrorMessage());
     if (tabKey === LOGIN_PAGE) {
       dispatch(backupRegistrationForm());

src/logistration/Logistration.test.jsx

@@ -11,7 +11,7 @@ import configureStore from 'redux-mock-store';
 import Logistration from './Logistration';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
-  COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
+  APP_NAME, COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
 } from '../data/constants';
 import { backupLoginForm } from '../login/data/actions';
 import { backupRegistrationForm } from '../register/data/actions';
@@ -249,6 +249,7 @@ describe('Logistration', () => {
     expect(sendPageEvent).toHaveBeenCalledWith(
       'login_and_registration',
       'institution_login',
+      { app_name: APP_NAME },
     );
 
     mergeConfig({