feat: Enable routing of traffic to Learner Record MFE when `view my r…

…ecords` button is pressed

[MICROBA-1321]
* Add two new configuration settings: `ENABLE_LEARNER_RECORD_MFE` and `LEARNER_RECORD_MFE_BASE_URL`
* Add function to `ProfilePage.jsx` to determine where learners should be routed (Credentials or Learner Record MFE) when the `View My Records` button is pressed on the profile page.

.env

@@ -35,3 +35,5 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL=''

.env.development

@@ -36,3 +36,5 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'

.env.test

@@ -17,3 +17,5 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'

src/index.jsx

@@ -5,6 +5,7 @@ import {
   APP_INIT_ERROR,
   APP_READY,
   initialize,
+  mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
 import {
@@ -55,4 +56,12 @@ initialize({
   ],
   requireAuthenticatedUser: true,
   hydrateAuthenticatedUser: true,
+  handlers: {
+    config: () => {
+      mergeConfig({
+        ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
+        LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
+      }, 'App loadConfig override handler');
+    },
+  },
 });

src/profile/ProfilePage.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { ensureConfig } from '@edx/frontend-platform';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { StatusAlert, Hyperlink } from '@edx/paragon';
@@ -44,10 +44,11 @@ ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 class ProfilePage extends React.Component {
   constructor(props, context) {
     super(props, context);
-    const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+
+    const recordsUrl = this.getRecordsUrl(context);
 
     this.state = {
-      viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
+      viewMyRecordsUrl: recordsUrl,
       accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
     };
 
@@ -66,6 +67,19 @@ class ProfilePage extends React.Component {
     });
   }
 
+  getRecordsUrl(context) {
+    let recordsUrl = null;
+
+    if (getConfig().ENABLE_LEARNER_RECORD_MFE) {
+      recordsUrl = getConfig().LEARNER_RECORD_MFE_BASE_URL;
+    } else {
+      const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+      recordsUrl = credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null;
+    }
+
+    return recordsUrl;
+  }
+
   isAuthenticatedUserProfile() {
     return this.props.match.params.username === this.context.authenticatedUser.username;
   }