refactor: replace @edx/paragon and @edx/frontend-build

.env

@@ -23,13 +23,11 @@ POST_REGISTRATION_REDIRECT_URL=''
 SEARCH_CATALOG_URL=''
 # ***** Features flags *****
 DISABLE_ENTERPRISE_LOGIN=''
-ENABLE_AUTO_GENERATED_USERNAME=''
 ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
 ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
 ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
 SHOW_CONFIGURABLE_EDX_FIELDS=''
-ENABLE_IMAGE_LAYOUT=''
 # ***** Zendesk related keys *****
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''

.env.development

@@ -19,9 +19,6 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 INFO_EMAIL='info@example.com'
-# ***** Features *****
-ENABLE_DYNAMIC_REGISTRATION_FIELDS='true'
-ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 # ***** Cookies *****
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'

.github/CODEOWNERS

@@ -1 +0,0 @@
-*   @openedx/2U-infinity

.github/pull_request_template.md

@@ -25,5 +25,5 @@ Include a link to the sandbox for design changes or screenshot for before and af
 
 #### Post-merge Checklist
 
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
+* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/vanguards** to do it. 
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/ci.yml

@@ -11,17 +11,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [18, 20]
 
     steps:
     - name: Checkout
       uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install Dependencies
       run: npm ci
@@ -42,7 +41,4 @@ jobs:
       run: npm run build
 
     - name: Run Code Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.gitignore

@@ -18,4 +18,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages

.nvmrc

@@ -1 +1 @@
-20
+18

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-authn]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+

CODEOWNERS

@@ -1,2 +1,2 @@
 # The following users are the owners of all frontend-app-authn files
-*       @openedx/2u-infinity
+*       @openedx/vanguards

Makefile

@@ -1,3 +1,6 @@
+export TRANSIFEX_RESOURCE = frontend-app-authn
+transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
+
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -29,16 +32,33 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+
+ifeq ($(OPENEDX_ATLAS_PULL),)
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	  && atlas pull $(ATLAS_OPTIONS) \
+	  && atlas pull --filter=$(transifex_langs) \
 	           translations/paragon/src/i18n/messages:paragon \
-	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-	$(intl_imports) paragon frontend-platform frontend-app-authn
+	$(intl_imports) paragon frontend-app-authn
+endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -115,10 +115,6 @@ The authentication micro-frontend also requires the following additional variabl
      - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
      - ``authn`` | ``''``
 
-   * - ``ENABLE_IMAGE_LAYOUT``
-     - Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the `Modifying base container <docs/how_tos/modifying_base_container.rst>`_.
-     - ``true`` | ``''`` (empty strings are falsy)
-
 
 edX-specific Environment Variables
 ==================================
@@ -187,7 +183,7 @@ All community members are expected to follow the `Open edX Code of Conduct <http
 People
 ======
 The assigned maintainers for this component and other project details may be
-found in `Backstage <https://backstage.openedx.org/catalog/default/group/2u-infinity>`_. Backstage pulls this data from the ``catalog-info.yaml``
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
 file in this repo.
 
 Reporting Security Issues

catalog-info.yaml

@@ -13,6 +13,6 @@ metadata:
   annotations:
     openedx.org/arch-interest-groups: ""
 spec:
-  owner: group:2u-infinity
+  owner: group:vanguards
   type: 'service'
   lifecycle: 'production'

docs/how_tos/modifying_base_container.rst

@@ -1,39 +0,0 @@
-========================================
-Modifying the Base Container in Authn
-========================================
-
-The base container in Authn serves as the fundamental layout structure for rendering different components based on configurations. This document outlines the process for modifying the base container to accommodate changes or customize layouts as needed.
-
-Understanding Base Container Versions
---------------------------------------
-
-The base container supports two main versions:
-
-- **Default Layout:** The default layout is the standard layout used when specific configurations do not dictate otherwise.
-.. image:: ../images/default_layout.png
-- **Image Layout:** The image layout is an alternative layout option that can be enabled based on configurations.
-.. image:: ../images/image_layout.png
-
-Enabling the Image Layout
----------------------------
-
-To activate the image layout feature, navigate to your .env file and update the configurations:
-
-**Update Configuration**
-
-Locate the ``ENABLE_IMAGE_LAYOUT`` parameter and set its value to  ``true``. Additionally, ensure that the Image configuration settings are provided. Your overall configurations should resemble the following:
-
-
-   .. code-block::
-
-      # ***** Image Layout Configuration *****
-      ENABLE_IMAGE_LAYOUT = True  # Set to True to enable image layout feature
-
-      # ***** Base Container Images *****
-      BANNER_IMAGE_LARGE='' # Path to the large banner image
-      BANNER_IMAGE_MEDIUM='' # Path to the medium-sized banner image
-      BANNER_IMAGE_SMALL=''  # Path to the small banner image
-      BANNER_IMAGE_EXTRA_SMALL=''  # Path to the extra-small banner image
-
-
-This allows for the customization and adaptation of the base container layout according to specific requirements.

openedx.yaml

@@ -3,6 +3,6 @@
 
 nick: Authn MFE
 oeps: {}
-owner: openedx/2u-infinity
+owner: openedx/vanguards
 openedx-release:
   ref: master

package.json

@@ -33,53 +33,54 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^8.0.0",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
-    "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^22.1.1",
+    "@edx/frontend-platform": "^5.5.4",
+    "@openedx/paragon": "21.11.3",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@optimizely/react-sdk": "^2.9.1",
-    "@redux-devtools/extension": "3.3.0",
+    "@redux-devtools/extension": "3.2.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
     "algoliasearch-helper": "^3.14.0",
-    "classnames": "2.5.1",
-    "core-js": "3.38.1",
+    "classnames": "2.3.2",
+    "core-js": "3.32.0",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.5",
+    "form-urlencoded": "6.1.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.4.0",
+    "react-loading-skeleton": "3.3.1",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "6.26.1",
-    "react-router-dom": "6.26.1",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-zendesk": "^0.1.13",
-    "redux": "4.2.1",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
-    "redux-saga": "1.3.0",
+    "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
+    "regenerator-runtime": "0.14.0",
     "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
+    "@openedx/frontend-build": "13.0.19",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.0.3",
-    "babel-plugin-formatjs": "10.5.16",
-    "eslint-plugin-import": "2.29.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-formatjs": "10.5.10",
+    "enzyme": "3.11.0",
+    "eslint-plugin-import": "2.28.0",
     "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",
-    "jest": "29.7.0",
+    "jest": "29.6.2",
     "react-test-renderer": "^17.0.2"
   }
 }

public/index.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
+      <title>Authn | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
-              integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
+              integrity="sha512-mdT/HQRzoRP4laVz49Mndx6rcCGA3IhuyhP3gaY0E9sZPkwbtDk9ttQIq9o8qGCf5VvJv1Xsy3k2yTjfUoczqw=="
               crossorigin="anonymous"
               referrerpolicy="no-referrer">
       </script>

src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -1,50 +1,50 @@
 import React from 'react';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen } from '@testing-library/react';
+import { mount } from 'enzyme';
 
 import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
 
 describe('Default Layout tests', () => {
   it('should display the form passed as a child in SmallScreenLayout', () => {
-    render(
+    const smallScreen = mount(
       <IntlProvider locale="en">
         <div>
           <DefaultSmallLayout />
-          <form aria-label="form">
+          <form>
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(smallScreen.find('form').exists()).toEqual(true);
   });
 
   it('should display the form passed as a child in MediumScreenLayout', () => {
-    render(
+    const mediumScreen = mount(
       <IntlProvider locale="en">
         <div>
           <DefaultMediumLayout />
-          <form aria-label="form">
+          <form>
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(mediumScreen.find('form').exists()).toEqual(true);
   });
 
   it('should display the form passed as a child in LargeScreenLayout', () => {
-    render(
+    const largeScreen = mount(
       <IntlProvider locale="en">
         <div>
           <DefaultLargeLayout />
-          <form aria-label="form">
+          <form>
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(largeScreen.find('form').exists()).toEqual(true);
   });
 });

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const LargeLayout = ({ fullName }) => {
+const LargeLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -20,7 +20,7 @@ const LargeLayout = ({ fullName }) => {
           <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
           <div>
             <h1 className="welcome-to-platform data-hj-suppress">
-              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
             </h1>
             <h2 className="complete-your-profile">
               {formatMessage(messages['complete.your.profile.1'])}
@@ -43,7 +43,7 @@ const LargeLayout = ({ fullName }) => {
 };
 
 LargeLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };
 
 export default LargeLayout;

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const MediumLayout = ({ fullName }) => {
+const MediumLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -22,7 +22,7 @@ const MediumLayout = ({ fullName }) => {
             <div className="medium-yellow-line mt-5 mr-n2" />
             <div>
               <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
               </h1>
               <h2 className="display-1">
                 {formatMessage(messages['complete.your.profile.1'])}
@@ -46,7 +46,7 @@ const MediumLayout = ({ fullName }) => {
 };
 
 MediumLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };
 
 export default MediumLayout;

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const SmallLayout = ({ fullName }) => {
+const SmallLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -20,7 +20,7 @@ const SmallLayout = ({ fullName }) => {
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">
-            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
           </h1>
           <h2 className="h1">
             {formatMessage(messages['complete.your.profile.1'])}
@@ -35,7 +35,7 @@ const SmallLayout = ({ fullName }) => {
 };
 
 SmallLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };
 
 export default SmallLayout;

src/base-container/components/welcome-page-layout/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'welcome.to.platform': {
     id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {fullName}!',
+    defaultMessage: 'Welcome to {siteName}, {username}!',
     description: 'Welcome message that appears on progressive profile page',
   },
   'complete.your.profile.1': {

src/base-container/data/constants.js

@@ -0,0 +1,4 @@
+const IMAGE_LAYOUT = 'image-layout';
+const DEFAULT_LAYOUT = 'default-layout';
+
+export { DEFAULT_LAYOUT, IMAGE_LAYOUT };

src/base-container/index.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { getConfig } from '@edx/frontend-platform';
 import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,24 +10,40 @@ import {
   ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
 } from './components/image-layout';
 import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
+import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';
 
-const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
-  const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT;
+const BaseContainer = ({ children, showWelcomeBanner, username }) => {
+  const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);
 
-  if (enableImageLayout) {
+  useEffect(() => {
+    const initRebrandExperiment = () => {
+      if (window.experiments?.rebrandExperiment) {
+        setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+      } else {
+        window.experiments = window.experiments || {};
+        window.experiments.rebrandExperiment = {};
+        window.experiments.rebrandExperiment.handleLoaded = () => {
+          setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+        };
+      }
+    };
+    initRebrandExperiment();
+  }, []);
+
+  if (baseContainerVersion === IMAGE_LAYOUT) {
     return (
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -42,13 +57,13 @@ const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
       <div className="col-md-12 extra-large-screen-top-stripe" />
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -60,13 +75,13 @@ const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
 
 BaseContainer.defaultProps = {
   showWelcomeBanner: false,
-  fullName: null,
+  username: null,
 };
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
   showWelcomeBanner: PropTypes.bool,
-  fullName: PropTypes.string,
+  username: PropTypes.string,
 };
 
 export default BaseContainer;

src/base-container/tests/BaseContainer.test.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { mergeConfig } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import BaseContainer from '../index';
@@ -13,34 +12,32 @@ const LargeScreen = {
 };
 
 describe('Base component tests', () => {
-  it('should show default layout', () => {
-    const { container } = render(
+  it('should should default layout', () => {
+    const baseContainer = mount(
       <IntlProvider locale="en">
-        <BaseContainer>
-          <div>Test Content</div>
-        </BaseContainer>
+        <BaseContainer />
       </IntlProvider>,
       LargeScreen,
     );
 
-    expect(container.querySelector('.banner__image')).toBeNull();
-    expect(container.querySelector('.large-screen-svg-primary')).toBeDefined();
+    expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
+    expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
   });
 
-  it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
-    mergeConfig({
-      ENABLE_IMAGE_LAYOUT: true,
-    });
+  it('[experiment] should show image layout for treatment group', () => {
+    window.experiments = {
+      rebrandExperiment: {
+        variation: 'image-layout',
+      },
+    };
 
-    const { container } = render(
+    const baseContainer = mount(
       <IntlProvider locale="en">
-        <BaseContainer showWelcomeBanner={false}>
-          <div>Test Content</div>
-        </BaseContainer>
+        <BaseContainer />
       </IntlProvider>,
       LargeScreen,
     );
 
-    expect(container.querySelector('.banner__image')).toBeDefined();
+    expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
   });
 });

src/common-components/InstitutionLogistration.jsx

@@ -60,7 +60,7 @@ const InstitutionLogistration = props => {
                     className="btn nav-item p-0 mb-1 institutions--provider-link"
                     destination={lmsBaseUrl + provider.loginUrl}
                   >
-                    {provider?.name}
+                    {provider.name}
                   </Hyperlink>
                 </td>
               </tr>

src/common-components/PasswordField.jsx

@@ -138,7 +138,7 @@ const PasswordField = (props) => {
       {props.errorMessage !== '' && (
         <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">
           {props.errorMessage}
-          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
+          <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>
         </Form.Control.Feedback>
       )}
     </Form.Group>
@@ -153,7 +153,6 @@ PasswordField.defaultProps = {
   handleChange: () => {},
   handleErrorChange: null,
   showRequirements: true,
-  showScreenReaderText: true,
   autoComplete: null,
 };
 
@@ -169,7 +168,6 @@ PasswordField.propTypes = {
   showRequirements: PropTypes.bool,
   value: PropTypes.string.isRequired,
   autoComplete: PropTypes.string,
-  showScreenReaderText: PropTypes.bool,
 };
 
 export default PasswordField;

src/common-components/RedirectLogistration.jsx

@@ -5,7 +5,7 @@ import { Navigate } from 'react-router-dom';
 import {
   AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
 } from '../data/constants';
-import setCookie from '../data/utils/cookies';
+import { setCookie } from '../data/utils';
 
 const RedirectLogistration = (props) => {
   const {

src/common-components/SocialAuthProviders.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -9,20 +8,15 @@ import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
-import { LOGIN_PAGE, REGISTER_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
-import { setCookie } from '../data/utils';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
   const { referrer, socialAuthProviders } = props;
-  const registrationFields = useSelector(state => state.register.registrationFormData);
 
   function handleSubmit(e) {
     e.preventDefault();
 
-    if (referrer === REGISTER_PAGE) {
-      setCookie('marketingEmailsOptIn', registrationFields?.configurableFormFields?.marketingEmailsOptIn);
-    }
     const url = e.currentTarget.dataset.providerUrl;
     window.location.href = getConfig().LMS_BASE_URL + url;
   }

src/common-components/ThirdPartyAuthAlert.jsx

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
-import setCookie from '../data/utils/cookies';
 
 const ThirdPartyAuthAlert = (props) => {
   const { formatMessage } = useIntl();
@@ -21,10 +20,7 @@ const ThirdPartyAuthAlert = (props) => {
     message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
   }
 
-  if (currentProvider) {
-    // Setting this cookie to capture marketingEmailsOptIn for SSO flow on the onboarding component
-    setCookie('ssoPipelineRedirectionDone', true);
-  } else {
+  if (!currentProvider) {
     return null;
   }
 

src/common-components/UnAuthOnlyRoute.jsx

@@ -4,8 +4,9 @@ import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import PropTypes from 'prop-types';
 
-import { RESET_PAGE } from '../data/constants';
-import { updatePathWithQueryParams } from '../data/utils';
+import {
+  DEFAULT_REDIRECT_URL,
+} from '../data/constants';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
@@ -24,12 +25,7 @@ const UnAuthOnlyRoute = ({ children }) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      const updatedPath = updatePathWithQueryParams(window.location.pathname);
-      if (updatedPath.startsWith(RESET_PAGE)) {
-        global.location.href = getConfig().LMS_BASE_URL;
-        return null;
-      }
-      global.location.href = getConfig().LMS_BASE_URL.concat(updatedPath);
+      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
       return null;
     }
 

src/common-components/data/constants.js

@@ -1,79 +0,0 @@
-export const registerFields = {
-  fields: {
-    country: {
-      name: 'country',
-      error_message: 'Select your country or region of residence',
-    },
-    honor_code: {
-      name: 'honor_code',
-      type: 'tos_and_honor_code',
-      error_message: '',
-    },
-  },
-};
-
-export const progressiveProfilingFields = {
-  extended_profile: [],
-  fields: {
-    level_of_education: {
-      name: 'level_of_education',
-      type: 'select',
-      label: 'Highest level of education completed',
-      error_message: '',
-      options: [
-        [
-          'p',
-          'Doctorate',
-        ],
-        [
-          'm',
-          "Master's or professional degree",
-        ],
-        [
-          'b',
-          "Bachelor's degree",
-        ],
-        [
-          'a',
-          'Associate degree',
-        ],
-        [
-          'hs',
-          'Secondary/high school',
-        ],
-        [
-          'jhs',
-          'Junior secondary/junior high/middle school',
-        ],
-        [
-          'none',
-          'No formal education',
-        ],
-        [
-          'other',
-          'Other education',
-        ],
-      ],
-    },
-    gender: {
-      name: 'gender',
-      type: 'select',
-      label: 'Gender',
-      error_message: '',
-      options: [
-        [
-          'm',
-          'Male',
-        ],
-        [
-          'f',
-          'Female',
-        ],
-        [
-          'o',
-          'Other/Prefer Not to Say',
-        ],
-      ],
-    },
-  },
-};

src/common-components/data/sagas.js

@@ -1,4 +1,3 @@
-import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 import { call, put, takeEvery } from 'redux-saga/effects';
 
@@ -8,7 +7,6 @@ import {
   getThirdPartyAuthContextSuccess,
   THIRD_PARTY_AUTH_CONTEXT,
 } from './actions';
-import { progressiveProfilingFields, registerFields } from './constants';
 import {
   getThirdPartyAuthContext,
 } from './service';
@@ -22,16 +20,7 @@ export function* fetchThirdPartyAuthContext(action) {
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    // hard code country field, level of education and gender fields
-    if (getConfig().ENABLE_HARD_CODE_OPTIONAL_FIELDS) {
-      yield put(getThirdPartyAuthContextSuccess(
-        registerFields,
-        progressiveProfilingFields,
-        thirdPartyAuthContext,
-      ));
-    } else {
-      yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
-    }
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/messages.jsx

@@ -112,26 +112,6 @@ const messages = defineMessages({
     description: 'Select ticket form',
     defaultMessage: 'Please choose your request type:',
   },
-  'registration.other.options.heading': {
-    id: 'registration.other.options.heading',
-    defaultMessage: 'Or register with:',
-    description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
-  },
-  'institution.login.button': {
-    id: 'institution.login.button',
-    defaultMessage: 'Institution/campus credentials',
-    description: 'shows institutions list',
-  },
-  'login.other.options.heading': {
-    id: 'login.other.options.heading',
-    defaultMessage: 'Or sign in with:',
-    description: 'Text that appears above other sign in options like social auth buttons',
-  },
-  'enterprise.login.btn.text': {
-    id: 'enterprise.login.btn.text',
-    defaultMessage: 'Company or school credentials',
-    description: 'Company or school login link text.',
-  },
 });
 
 export default messages;

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -5,13 +5,14 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+
+import { REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
 import {
   MemoryRouter, Route, BrowserRouter as Router, Routes,
 } from 'react-router-dom';
 
-import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
-import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
-
 const RRD = require('react-router-dom');
 // Just render plain div with its children
 // eslint-disable-next-line react/prop-types
@@ -26,10 +27,6 @@ const TestApp = () => (
           path={REGISTER_EMBEDDED_PAGE}
           element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
         />
-        <Route
-          path={PAGE_NOT_FOUND}
-          element={<span>Page not found</span>}
-        />
       </Routes>
     </div>
   </Router>
@@ -48,13 +45,15 @@ describe('EmbeddedRegistrationRoute', () => {
 
   it('should not render embedded register page if host query param is not available in the url', async () => {
     let embeddedRegistrationPage = null;
+
     await act(async () => {
       const { container } = await render(routerWrapper());
       embeddedRegistrationPage = container;
     });
 
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage.textContent).toBe('Page not found');
+    const spanElement = embeddedRegistrationPage.querySelector('span');
+
+    expect(spanElement).toBeNull();
   });
 
   it('should render embedded register page if host query param is available in the url (embedded)', async () => {
@@ -65,13 +64,15 @@ describe('EmbeddedRegistrationRoute', () => {
     };
 
     let embeddedRegistrationPage = null;
+
     await act(async () => {
       const { container } = await render(routerWrapper());
       embeddedRegistrationPage = container;
     });
 
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage).toBeTruthy();
-    expect(renderedPage.textContent).toBe('Embedded Register Page');
+    const spanElement = embeddedRegistrationPage.querySelector('span');
+
+    expect(spanElement).toBeTruthy();
+    expect(spanElement.textContent).toBe('Embedded Register Page');
   });
 });

src/common-components/tests/SocialAuthProviders.test.jsx

@@ -1,35 +1,16 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 
 import registerIcons from '../RegisterFaIcons';
 import SocialAuthProviders from '../SocialAuthProviders';
 
 registerIcons();
-const mockStore = configureStore();
 
 describe('SocialAuthProviders', () => {
   let props = {};
 
-  const initialState = {
-    register: {
-      registrationFormData: {
-        configurableFormFields: {
-          marketingEmailsOptIn: true,
-        },
-      },
-    },
-  };
-  const store = mockStore(initialState);
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <Provider store={store}>{children}</Provider>
-    </IntlProvider>
-  );
-
   const appleProvider = {
     id: 'oa2-apple-id',
     name: 'Apple',
@@ -49,11 +30,11 @@ describe('SocialAuthProviders', () => {
   it('should match social auth provider with iconImage snapshot', () => {
     props = { socialAuthProviders: [appleProvider, facebookProvider] };
 
-    const tree = renderer.create(reduxWrapper(
+    const tree = renderer.create(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    )).toJSON();
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -67,11 +48,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(reduxWrapper(
+    const tree = renderer.create(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    )).toJSON();
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -85,11 +66,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(reduxWrapper(
+    const tree = renderer.create(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    )).toJSON();
+    ).toJSON();
 
     expect(tree).toMatchSnapshot();
   });

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -5,13 +5,14 @@ import React from 'react';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';
 
 import { UnAuthOnlyRoute } from '..';
 import { REGISTER_PAGE } from '../../data/constants';
 
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
   fetchAuthenticatedUser: jest.fn(),

src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -66,14 +66,14 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
       data-prefix="fab"
       focusable="false"
       role="img"
-      style={{}}
+      style={Object {}}
       viewBox="0 0 488 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
         fill="currentColor"
-        style={{}}
+        style={Object {}}
       />
     </svg>
   </div>
@@ -93,7 +93,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 `;
 
 exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-[
+Array [
   <button
     className="btn-social btn-oa2-apple-id mr-3"
     data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"

src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -21,7 +21,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
 `;
 
 exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-[
+Array [
   <div
     className="fade alert-content alert-success mt-n2 mb-5 alert show"
     id="tpa-alert"

src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap

@@ -5,23 +5,23 @@ exports[`Zendesk Help should match login page third party auth alert message sna
   cookies={true}
   defer={true}
   webWidget={
-    {
-      "answerBot": {
-        "avatar": {
-          "name": {
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
             "*": "edX Support",
           },
           "url": undefined,
         },
         "contactOnlyAfterQuery": true,
         "suppress": false,
-        "title": {
+        "title": Object {
           "*": "edX Support",
         },
       },
-      "chat": {
-        "departments": {
-          "enabled": [
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
             "account settings",
             "billing and payments",
             "certificates",
@@ -33,17 +33,17 @@ exports[`Zendesk Help should match login page third party auth alert message sna
         },
         "suppress": false,
       },
-      "contactForm": {
+      "contactForm": Object {
         "attachments": true,
-        "selectTicketForm": {
+        "selectTicketForm": Object {
           "*": "Please choose your request type:",
         },
-        "ticketForms": [
-          {
-            "fields": [
-              {
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
                 "id": "description",
-                "prefill": {
+                "prefill": Object {
                   "*": "",
                 },
               },
@@ -53,10 +53,10 @@ exports[`Zendesk Help should match login page third party auth alert message sna
           },
         ],
       },
-      "contactOptions": {
+      "contactOptions": Object {
         "enabled": false,
       },
-      "helpCenter": {
+      "helpCenter": Object {
         "originalArticleButton": true,
       },
     }

src/config/index.js

@@ -4,15 +4,12 @@ const configuration = {
   USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
   // Features
   DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
-  ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
   ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
   ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
   ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
   MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
   SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
   SHOW_REGISTRATION_LINKS: process.env.SHOW_REGISTRATION_LINKS !== 'false',
-  ENABLE_HARD_CODE_OPTIONAL_FIELDS: process.env.ENABLE_HARD_CODE_OPTIONAL_FIELDS || false,
-  ENABLE_IMAGE_LAYOUT: process.env.ENABLE_IMAGE_LAYOUT || false,
   // Links
   ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null,
   AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,
@@ -36,7 +33,6 @@ const configuration = {
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
   ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
   ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
-  AUTO_GENERATED_USERNAME_EXPERIMENT_ID: process.env.AUTO_GENERATED_USERNAME_EXPERIMENT_ID || '',
 };
 
 export default configuration;

src/data/constants.js

@@ -37,4 +37,3 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+
 // things like auto-enrollment upon login and registration.
 export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
 export const REDIRECT = 'redirect';
-export const APP_NAME = 'authn_mfe';

src/data/segment/utils.js

@@ -1,37 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-
-import { APP_NAME } from '../constants';
-
-export const LINK_TIMEOUT = 300;
-
-/**
- * Creates an event tracker function that sends a tracking event with the given name and options.
- *
- * @param {string} name - The name of the event to be tracked.
- * @param {object} [options={}] - Additional options to be included with the event.
- * @returns {function} - A function that, when called, sends the tracking event.
- */
-export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
-  name,
-  { ...options, app_name: APP_NAME },
-);
-
-/**
- * Creates an event tracker function that sends a tracking event with the given name and options.
- *
- * @param {string} name - The name of the event to be tracked.
- * @param {object} [options={}] - Additional options to be included with the event.
- * @returns {function} - A function that, when called, sends the tracking event.
- */
-export const createPageEventTracker = (name, options = null) => () => sendPageEvent(
-  name,
-  options,
-  { app_name: APP_NAME },
-);
-
-export const createLinkTracker = (tracker, href) => (e) => {
-  e.preventDefault();
-  tracker();
-  return setTimeout(() => { window.location.href = href; }, LINK_TIMEOUT);
-};

src/data/utils/cookies.js

@@ -11,11 +11,3 @@ export default function setCookie(cookieName, cookieValue, cookieExpiry) {
     cookies.set(cookieName, cookieValue, options);
   }
 }
-
-export function removeCookie(cookieName) {
-  if (cookieName) {
-    const cookies = new Cookies();
-    const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
-    cookies.remove(cookieName, options);
-  }
-}

src/data/utils/index.js

@@ -8,4 +8,4 @@ export {
   windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';
-export { default as setCookie, removeCookie } from './cookies';
+export { default as setCookie } from './cookies';

src/field-renderer/tests/FieldRenderer.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { fireEvent, render } from '@testing-library/react';
+import { mount } from 'enzyme';
 
 import FieldRenderer from '../FieldRenderer';
 
@@ -28,14 +28,13 @@ describe('FieldRendererTests', () => {
       options: [['1997', '1997'], ['1998', '1998']],
     };
 
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('select#yob-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 1997 } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('select#yob-field');
+    field.simulate('change', { target: { value: 1997 } });
 
-    expect(input.type).toEqual('select-one');
-    expect(label.textContent).toContain(fieldData.label);
-    expect(value).toEqual('1997');
+    expect(field.type()).toEqual('select');
+    expect(fieldRenderer.find('label').text()).toEqual('Year of Birth');
+    expect(value).toEqual(1997);
   });
 
   it('should return null if no options are provided for select field', () => {
@@ -45,8 +44,8 @@ describe('FieldRendererTests', () => {
       name: 'yob-field',
     };
 
-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(container.innerHTML).toEqual('');
+    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
+    expect(fieldRenderer.html()).toBeNull();
   });
 
   it('should render textarea field', () => {
@@ -56,13 +55,12 @@ describe('FieldRendererTests', () => {
       name: 'goals-field',
     };
 
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('#goals-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'These are my goals.' } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('#goals-field').last();
+    field.simulate('change', { target: { value: 'These are my goals.' } });
 
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain('Why do you want to join this platform?');
+    expect(field.type()).toEqual('textarea');
+    expect(fieldRenderer.find('label').text()).toEqual('Why do you want to join this platform?');
     expect(value).toEqual('These are my goals.');
   });
 
@@ -73,13 +71,12 @@ describe('FieldRendererTests', () => {
       name: 'company-field',
     };
 
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#company-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'ABC' } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('#company-field').last();
+    field.simulate('change', { target: { value: 'ABC' } });
 
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
+    expect(field.type()).toEqual('input');
+    expect(fieldRenderer.find('label').text()).toEqual('Company');
     expect(value).toEqual('ABC');
   });
 
@@ -90,13 +87,12 @@ describe('FieldRendererTests', () => {
       name: 'marketing-emails-opt-in-field',
     };
 
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#marketing-emails-opt-in-field');
-    const label = container.querySelector('label');
-    fireEvent.click(input);
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('input#marketing-emails-opt-in-field');
+    field.simulate('change', { target: { checked: true, type: 'checkbox' } });
 
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
+    expect(field.prop('type')).toEqual('checkbox');
+    expect(fieldRenderer.find('label').text()).toEqual(fieldData.label);
     expect(value).toEqual(true);
   });
 
@@ -105,8 +101,8 @@ describe('FieldRendererTests', () => {
       type: 'unknown',
     };
 
-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(container.innerHTML).toContain('');
+    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
+    expect(fieldRenderer.html()).toBeNull();
   });
 
   it('should run onBlur and onFocus functions for a field if given', () => {
@@ -121,7 +117,7 @@ describe('FieldRendererTests', () => {
       functionValue = `${e.target.name} focussed`;
     };
 
-    const { container } = render(
+    const fieldRenderer = mount(
       <FieldRenderer
         handleFocus={onFocus}
         handleBlur={onBlur}
@@ -130,19 +126,19 @@ describe('FieldRendererTests', () => {
         onChangeHandler={changeHandler}
       />,
     );
-    const input = container.querySelector('#test-field');
+    const field = fieldRenderer.find('#test-field').last();
 
-    fireEvent.focus(input);
+    field.simulate('focus');
     expect(functionValue).toEqual('test-field focussed');
 
-    fireEvent.blur(input);
+    field.simulate('blur');
     expect(functionValue).toEqual('test-field blurred');
   });
 
   it('should render error message for required text fields', () => {
     const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' };
 
-    const { container } = render(
+    const fieldRenderer = mount(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -151,7 +147,7 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Enter your first name');
   });
 
   it('should render error message for required select fields', () => {
@@ -159,7 +155,7 @@ describe('FieldRendererTests', () => {
       type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']],
     };
 
-    const { container } = render(
+    const fieldRenderer = mount(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -168,13 +164,13 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Select your preference');
   });
 
   it('should render error message for required textarea fields', () => {
     const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' };
 
-    const { container } = render(
+    const fieldRenderer = mount(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -183,13 +179,13 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Tell us your goals');
   });
 
   it('should render error message for required checkbox fields', () => {
     const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' };
 
-    const { container } = render(
+    const fieldRenderer = mount(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -198,6 +194,6 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('You must agree to our Honor Code');
   });
 });

src/forgot-password/ForgotPasswordPage.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } 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,
@@ -24,10 +25,6 @@ import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
 import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
-import {
-  trackForgotPasswordPageEvent,
-  trackForgotPasswordPageViewed,
-} from '../tracking/trackers/forgotpassword';
 
 const ForgotPasswordPage = (props) => {
   const platformName = getConfig().SITE_NAME;
@@ -44,8 +41,8 @@ const ForgotPasswordPage = (props) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    trackForgotPasswordPageEvent();
-    trackForgotPasswordPageViewed();
+    sendPageEvent('login_and_registration', 'reset');
+    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
   }, []);
 
   useEffect(() => {