fix(deps): update font awesome (#271)

* fix(deps): update font awesome

* test: fixing broken snapshot from font-awesome upgrade

I visually verified the facebook icon is fine by loading up the app.

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: David Joy <davjoy@gmail.com>

.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'

README.rst

@@ -49,13 +49,6 @@ This MFE is configured via node environment variables supplied at build time. Se
 For more information see the document: `Micro-frontend applications in Open
 edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-frontends-in-open-edx.html>`__.
 
-----------
-
-Notes
------
-
-The production Webpack configuration for this repo uses `Purgecss <https://www.purgecss.com/>`__ to remove unused CSS from the production css file. In ``webpack.prod.config.js`` the Purgecss plugin is configured to scan directories to determine what css selectors should remain. Currently the src/ directory is scanned along with all ``@edx/frontend-component*`` node modules and ``@edx/paragon``. **If you add and use a component in this repo that relies on HTML classes or ids for styling you must add it to the Purgecss configuration or it will be unstyled in the production build.**
-
 .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-profile.svg?branch=master
    :target: https://travis-ci.org/edx/frontend-app-profile
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-profile

package.json

@@ -41,21 +41,21 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.1.5",
-    "@edx/frontend-component-header": "2.2.4",
-    "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "13.1.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.25",
-    "@fortawesome/free-brands-svg-icons": "5.7.2",
-    "@fortawesome/free-regular-svg-icons": "5.7.2",
-    "@fortawesome/free-solid-svg-icons": "5.7.2",
-    "@fortawesome/react-fontawesome": "0.1.8",
-    "classnames": "2.2.6",
-    "core-js": "3.8.3",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.3.0",
+    "@edx/frontend-platform": "1.12.4",
+    "@edx/paragon": "16.6.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
+    "classnames": "2.3.1",
+    "core-js": "3.16.4",
     "email-prop-type": "1.1.7",
     "font-awesome": "4.7.0",
     "form-urlencoded": "3.0.2",
-    "history": "4.7.2",
+    "history": "4.10.1",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
     "lodash.memoize": "4.1.2",
@@ -65,30 +65,29 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-redux": "7.2.2",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "react-transition-group": "4.3.0",
-    "redux": "4.0.5",
+    "react-redux": "7.2.4",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
+    "react-transition-group": "4.4.2",
+    "redux": "4.1.1",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
     "redux-thunk": "2.3.0",
-    "regenerator-runtime": "0.13.7",
+    "regenerator-runtime": "0.13.9",
     "reselect": "4.0.0",
     "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "8.3.5",
-    "@commitlint/config-angular": "8.3.4",
-    "@edx/frontend-build": "5.6.8",
-    "codecov": "3.8.2",
+    "@commitlint/cli": "13.1.0",
+    "@commitlint/config-angular": "13.1.0",
+    "@edx/frontend-build": "8.0.4",
+    "codecov": "3.8.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "es-check": "5.2.3",
+    "es-check": "5.2.4",
     "glob": "7.1.7",
-    "husky": "3.1.0",
-    "purgecss-webpack-plugin": "1.6.0",
+    "husky": "7.0.2",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

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;
   }

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -245,7 +245,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <div
                   className="dropdown"
-                  onKeyDown={[Function]}
                 >
                   <button
                     aria-expanded={false}
@@ -327,14 +326,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             target="_blank"
           >
             View My Records
-            <span>
+            <span
+              className="d-inline-block align-text-top"
+            >
                
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
           </a>
         </div>
@@ -383,14 +404,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             target="_blank"
           >
             View My Records
-            <span>
+            <span
+              className="d-inline-block align-text-top"
+            >
                
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
           </a>
         </div>
@@ -880,17 +923,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -1178,14 +1221,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                         target="_blank"
                       >
                         View Certificate
-                        <span>
+                        <span
+                          className="d-inline-block align-text-top"
+                        >
                            
                           <span
-                            aria-hidden={false}
-                            aria-label="Opens in a new window"
-                            className="fa fa-external-link"
-                            title="Opens in a new window"
-                          />
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
                         </span>
                       </a>
                     </div>
@@ -1231,7 +1296,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <div
                   className="dropdown"
-                  onKeyDown={[Function]}
                 >
                   <button
                     aria-expanded={false}
@@ -1313,14 +1377,36 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             target="_blank"
           >
             View My Records
-            <span>
+            <span
+              className="d-inline-block align-text-top"
+            >
                
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
           </a>
         </div>
@@ -1369,14 +1455,36 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             target="_blank"
           >
             View My Records
-            <span>
+            <span
+              className="d-inline-block align-text-top"
+            >
                
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
           </a>
         </div>
@@ -1866,17 +1974,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -2044,12 +2152,31 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           className="pgn__stateful-btn-icon"
                         >
                           <span
-                            aria-hidden={true}
-                            className="icon fa fa-spinner fa-spin"
-                            id="Icon1"
-                          />
+                            className="pgn__icon icon-spin"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className=""
+                        >
+                          Saving
                         </span>
-                        Saving
                       </span>
                     </button>
                     <button
@@ -2216,14 +2343,36 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         target="_blank"
                       >
                         View Certificate
-                        <span>
+                        <span
+                          className="d-inline-block align-text-top"
+                        >
                            
                           <span
-                            aria-hidden={false}
-                            aria-label="Opens in a new window"
-                            className="fa fa-external-link"
-                            title="Opens in a new window"
-                          />
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
                         </span>
                       </a>
                     </div>
@@ -2269,7 +2418,6 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               >
                 <div
                   className="dropdown"
-                  onKeyDown={[Function]}
                 >
                   <button
                     aria-expanded={false}
@@ -2866,17 +3014,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
                     style={Object {}}
-                    viewBox="0 0 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
                       style={Object {}}
                     />
@@ -3164,14 +3312,36 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                         target="_blank"
                       >
                         View Certificate
-                        <span>
+                        <span
+                          className="d-inline-block align-text-top"
+                        >
                            
                           <span
-                            aria-hidden={false}
-                            aria-label="Opens in a new window"
-                            className="fa fa-external-link"
-                            title="Opens in a new window"
-                          />
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
                         </span>
                       </a>
                     </div>

webpack.prod.config.js

@@ -1,21 +0,0 @@
-const glob = require('glob');
-const PurgecssPlugin = require('purgecss-webpack-plugin');
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('webpack-prod', {
-  plugins: [
-    // Scan files for class names and ids and remove unused css
-    new PurgecssPlugin({
-      paths: [].concat(
-        // Scan files in this app
-        glob.sync('src/**/*', { nodir: true }),
-        // Scan files in any edx frontend-component
-        glob.sync('node_modules/@edx/frontend-component*/**/*', { nodir: true }),
-        // Scan files in paragon
-        glob.sync('node_modules/@edx/paragon/**/*', { nodir: true }),
-      ),
-      // Protect react-css-transition class names
-      whitelistPatterns: [/-enter/, /-appear/, /-exit/],
-    }),
-  ],
-});