feat: ensure lms api synced with latest value in config

This change make it possible if LMS url to be changed, that the last value will be picked. This is simlair openedx/frontend-app-course-authoring/pull/389 which issue overhangio/tutor-mfe/issues/86, the fixes is needed so that dynamic config would work with tutor: overhangio/tutor-mfe/pull/69
fix: use getConfig in order to support runtime configuration (#286 ) (#287 )
2022-12-08 18:22:27 +00:00 · 2022-11-28 12:06:02 -05:00 · 2022-11-14 20:35:54 +00:00 · 2022-09-29 15:02:24 -04:00 · 2022-09-29 14:49:14 -04:00 · 2022-09-29 11:34:30 +01:00
51 changed files with 1389 additions and 797 deletions
--- a/.env
+++ b/.env
@@ -30,3 +30,5 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
--- a/.env.development
+++ b/.env.development
@@ -37,3 +37,5 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+APP_ID=''
+MFE_CONFIG_API_URL=''
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,6 +14,7 @@ jobs:
    strategy:
      matrix:
        node: [16]
+        npm: [8.5.x]

    steps:
    - name: Checkout
@@ -24,6 +25,9 @@ jobs:
      with:
        node-version: ${{ matrix.node }}

+    - name: Install npm 8.5.x
+      run: npm install -g npm@${{ matrix.npm }}
+
    - name: Install dependencies
      run: npm ci

--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,5 +11,6 @@ module.exports = createConfig('jest', {
  coveragePathIgnorePatterns: [
    'src/segment.js',
    'src/postcss.config.js',
+    'testUtils', // don't unit test jest mocking tools
  ],
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.5.0",
+  "version": "1.6.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@edx/frontend-app-gradebook",
-      "version": "1.5.0",
+      "version": "1.6.0",
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-        "@edx/frontend-component-footer": "10.2.1",
-        "@edx/frontend-component-header": "2.4.5",
-        "@edx/frontend-platform": "1.15.1",
+        "@edx/frontend-component-footer": "^11.1.1",
+        "@edx/frontend-component-header": "^3.1.1",
+        "@edx/frontend-platform": "2.5.0",
        "@edx/paragon": "19.6.0",
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/free-brands-svg-icons": "^5.11.2",
@@ -31,6 +31,7 @@
        "query-string": "6.13.0",
        "react": "16.14.0",
        "react-dom": "16.14.0",
+        "react-helmet": "^6.1.0",
        "react-intl": "^2.9.0",
        "react-redux": "^7.1.1",
        "react-router": "5.2.0",
@@ -50,7 +51,6 @@
        "@edx/frontend-build": "9.1.1",
        "axios": "0.21.1",
        "axios-mock-adapter": "^1.17.0",
-        "codecov": "^3.6.1",
        "enzyme-adapter-react-16": "^1.14.0",
        "es-check": "^2.3.0",
        "fetch-mock": "^6.5.2",
@@ -3925,86 +3925,97 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.2.1.tgz",
-      "integrity": "sha512-ZhXOKWQ8sw9b8boRKOtZT8BkI5ULYPXPaTR4PeRQUBSDu3CA6J/NwcCOlh8OftR4fOY2oI19D9BImhYIB4o6eA==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-11.1.1.tgz",
+      "integrity": "sha512-ek7MdLz3/c1JU2Bw1bAS2eElAo79Rn4XR+SbAvgNVQDkWQbKlqAaDq0pUQO60unBhS2319skknLZcdHcRtTe3Q==",
      "dependencies": {
        "@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.16"
+        "@fortawesome/react-fontawesome": "0.1.18"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^1.8.0",
+        "@edx/frontend-platform": "^2.3.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
      }
    },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.16",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
-      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
-        "react": ">=16.x"
-      }
-    },
    "node_modules/@edx/frontend-component-header": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.4.5.tgz",
-      "integrity": "sha512-II0+1cKLKLT954uStqWNpFo+gVn3AyFSD+kIer7NOaH5PB/XpYdsxu4PUIftFeYbrFY3SHsBDALjOsRT+LFNsg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-3.1.1.tgz",
+      "integrity": "sha512-Qlzp3bOS+wypLrJljVpkVveP462uTR/ZDQYQHP7kKzh/5SXHIHpHMuTqdi6b8ZPSFKMZksJTnNvEAWWjgabhzA==",
      "dependencies": {
        "@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.14",
+        "@fortawesome/react-fontawesome": "^0.2.0",
        "babel-polyfill": "6.26.0",
        "react-responsive": "8.2.0",
        "react-transition-group": "4.4.2"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^1.8.0",
+        "@edx/frontend-platform": "^2.0.0",
        "@edx/paragon": ">= 7.0.0 < 20.0.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
      }
    },
+    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/react-fontawesome/node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
    "node_modules/@edx/frontend-platform": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.15.1.tgz",
-      "integrity": "sha512-vi2iG01z/mvlxKbgozGkZQTbchliq6MJ9tY4CpYy1CMjt5Rn/PDaS2sK6FKhuAlyQAR4ZqFWHrwM1wednG9RQQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.5.0.tgz",
+      "integrity": "sha512-Ws40TMkxrF9Fz71K8bqp+qui7kXYOBvl8+PYLa1K0lmzwD70FFU73mQBTvgTJKKWcw8VsjK9oJCxmjGvz6Qe1Q==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "2.2.0",
-        "axios": "0.21.4",
+        "@formatjs/intl-pluralrules": "^4.3.3",
+        "@formatjs/intl-relativetimeformat": "^10.0.1",
+        "axios": "0.26.1",
        "axios-cache-adapter": "2.7.3",
        "form-urlencoded": "4.1.4",
-        "glob": "7.1.7",
+        "glob": "7.2.0",
        "history": "4.10.1",
        "i18n-iso-countries": "4.3.1",
        "jwt-decode": "3.1.2",
-        "localforage": "1.9.0",
+        "localforage": "1.10.0",
        "localforage-memoryStorageDriver": "0.9.2",
        "lodash.camelcase": "4.3.0",
        "lodash.memoize": "4.1.2",
        "lodash.merge": "4.6.2",
        "lodash.snakecase": "4.1.1",
        "pubsub-js": "1.9.4",
-        "react-intl": "2.9.0",
+        "react-intl": "^5.25.0",
        "universal-cookie": "4.0.4"
      },
      "bin": {
-        "transifex-Makefile": "i18n/scripts/Makefile",
        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
      },
      "peerDependencies": {
-        "@edx/paragon": ">= 10.0.0 < 20.0.0",
+        "@edx/paragon": ">= 10.0.0 < 21.0.0",
        "prop-types": "^15.7.2",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
@@ -4013,31 +4024,58 @@
        "redux": "^4.0.4"
      }
    },
-    "node_modules/@edx/frontend-platform/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+    "node_modules/@edx/frontend-platform/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
      "dependencies": {
-        "follow-redirects": "^1.14.0"
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
      }
    },
-    "node_modules/@edx/frontend-platform/node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+    "node_modules/@edx/frontend-platform/node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "follow-redirects": "^1.14.8"
+      }
+    },
+    "node_modules/@edx/frontend-platform/node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@edx/frontend-platform/node_modules/react-intl": {
+      "version": "5.25.1",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
+      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "@formatjs/intl": "2.2.1",
+        "@formatjs/intl-displaynames": "5.4.3",
+        "@formatjs/intl-listformat": "6.5.3",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/react": "16 || 17 || 18",
+        "hoist-non-react-statics": "^3.3.2",
+        "intl-messageformat": "9.13.0",
+        "tslib": "^2.1.0"
      },
-      "engines": {
-        "node": "*"
+      "peerDependencies": {
+        "react": "^16.3.0 || 17 || 18",
+        "typescript": "^4.5"
      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
      }
    },
    "node_modules/@edx/new-relic-source-map-webpack-plugin": {
@@ -4109,6 +4147,119 @@
        "tslib": "^2.0.1"
      }
    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
+      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "@formatjs/intl-displaynames": "5.4.3",
+        "@formatjs/intl-listformat": "6.5.3",
+        "intl-messageformat": "9.13.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "typescript": "^4.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
+      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
+      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/@formatjs/intl-numberformat": {
      "version": "5.7.6",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-numberformat/-/intl-numberformat-5.7.6.tgz",
@@ -4119,6 +4270,64 @@
        "tslib": "^2.0.1"
      }
    },
+    "node_modules/@formatjs/intl-pluralrules": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.3.3.tgz",
+      "integrity": "sha512-NLZN8gf2qLpCuc0m565IbKLNUarEGOzk0mkdTkE4XTuNCofzoQTurW6lL3fmDlneAoYl2FiTdHa5q4o2vZF50g==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-pluralrules/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-relativetimeformat": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-10.0.1.tgz",
+      "integrity": "sha512-AABPQtPjFilXegQsnmVHrSlzjFNUffAEk5DgowY6b7WSwDI7g2W6QgW903/lbZ58emhphAbgHdtKeUBXqTiLpw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-relativetimeformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl/node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/@fortawesome/fontawesome-common-types": {
      "version": "0.2.36",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
@@ -8676,15 +8885,6 @@
        "sprintf-js": "~1.0.2"
      }
    },
-    "node_modules/argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.10"
-      }
-    },
    "node_modules/argv-formatter": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/argv-formatter/-/argv-formatter-1.0.0.tgz",
@@ -11252,26 +11452,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/codecov": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.3.tgz",
-      "integrity": "sha512-Y8Hw+V3HgR7V71xWH2vQ9lyS358CbGCldWlJFR0JirqoGtOoas3R3/OclRTvgUYFK29mmJICDPauVKmpqbwhOA==",
-      "deprecated": "https://about.codecov.io/blog/codecov-uploader-deprecation-plan/",
-      "dev": true,
-      "dependencies": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.4",
-        "js-yaml": "3.14.1",
-        "teeny-request": "7.1.1",
-        "urlgrey": "1.0.0"
-      },
-      "bin": {
-        "codecov": "bin/codecov"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -14006,15 +14186,14 @@
      }
    },
    "node_modules/eventsource": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
-      "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
      "dev": true,
-      "dependencies": {
-        "original": ">=0.0.5"
-      },
+      "optional": true,
+      "peer": true,
      "engines": {
-        "node": ">=0.8.0"
+        "node": ">=12.0.0"
      }
    },
    "node_modules/exec-buffer": {
@@ -14639,21 +14818,6 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
-    "node_modules/fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^1.3.2"
-      }
-    },
-    "node_modules/fast-url-parser/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-      "dev": true
-    },
    "node_modules/fast-xml-parser": {
      "version": "3.21.1",
      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.21.1.tgz",
@@ -15550,7 +15714,6 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-      "dev": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -16497,15 +16660,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
-      }
-    },
    "node_modules/image-webpack-loader": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz",
@@ -21603,9 +21757,9 @@
      }
    },
    "node_modules/localforage": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
-      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
      "dependencies": {
        "lie": "3.1.1"
      }
@@ -28059,6 +28213,27 @@
        "which": "^1.2.9"
      }
    },
+    "node_modules/react-dev-utils/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/eventsource": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
+      "integrity": "sha512-bbB5tEuvC+SuRUG64X8ghvjgiRniuA4WlehWbFnoN4z6TxDXpyX+BMHF7rMgZAqoe+EbyNRUbHN0uuP9phy5jQ==",
+      "dev": true,
+      "dependencies": {
+        "original": ">=0.0.5"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
    "node_modules/react-dev-utils/node_modules/external-editor": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
@@ -28194,6 +28369,12 @@
        "node": ">=4"
      }
    },
+    "node_modules/react-dev-utils/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
    "node_modules/react-dev-utils/node_modules/mute-stream": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -28225,6 +28406,20 @@
        "node": ">=4"
      }
    },
+    "node_modules/react-dev-utils/node_modules/sockjs-client": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
+      "integrity": "sha512-PmPRkAYIeuRgX+ZSieViT4Z3Q23bLS2Itm/ck1tSf5P0/yVuFDiI5q9mcnpXoMdToaPSRS9MEyUx/aaBxrFzyw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^2.6.6",
+        "eventsource": "0.1.6",
+        "faye-websocket": "~0.11.0",
+        "inherits": "^2.0.1",
+        "json3": "^3.3.2",
+        "url-parse": "^1.1.8"
+      }
+    },
    "node_modules/react-dev-utils/node_modules/string-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -28347,6 +28542,20 @@
        }
      }
    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
    "node_modules/react-intl": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
@@ -28609,6 +28818,14 @@
        "isarray": "0.0.1"
      }
    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
@@ -30898,34 +31115,37 @@
      }
    },
    "node_modules/sockjs-client": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
-      "integrity": "sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
-        "debug": "^2.6.6",
-        "eventsource": "0.1.6",
-        "faye-websocket": "~0.11.0",
-        "inherits": "^2.0.1",
-        "json3": "^3.3.2",
-        "url-parse": "^1.1.8"
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
      }
    },
    "node_modules/sockjs-client/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
      }
    },
-    "node_modules/sockjs-client/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
    "node_modules/sockjs/node_modules/uuid": {
      "version": "8.3.2",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -31414,15 +31634,6 @@
        "readable-stream": "^2.0.2"
      }
    },
-    "node_modules/stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "dependencies": {
-        "stubs": "^3.0.0"
-      }
-    },
    "node_modules/strict-uri-encode": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -31661,12 +31872,6 @@
      "dev": true,
      "optional": true
    },
-    "node_modules/stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
    "node_modules/style-loader": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -32127,31 +32332,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/teeny-request": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
-      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
-      "dev": true,
-      "dependencies": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.1",
-        "stream-events": "^1.0.5",
-        "uuid": "^8.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/teeny-request/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
    "node_modules/temp-dir": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
@@ -32867,7 +33047,7 @@
      "version": "4.6.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-      "dev": true,
+      "devOptional": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -33189,15 +33369,6 @@
      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
      "dev": true
    },
-    "node_modules/urlgrey": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
-      "integrity": "sha512-hJfIzMPJmI9IlLkby8QrsCykQ+SXDeO2W5Q9QTW3QpqZVTx4a/K7p8/5q+/isD8vsbVaFgql/gvAoQCRQ2Cb5w==",
-      "dev": true,
-      "dependencies": {
-        "fast-url-parser": "^1.1.3"
-      }
-    },
    "node_modules/use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -37483,85 +37654,123 @@
      }
    },
    "@edx/frontend-component-footer": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.2.1.tgz",
-      "integrity": "sha512-ZhXOKWQ8sw9b8boRKOtZT8BkI5ULYPXPaTR4PeRQUBSDu3CA6J/NwcCOlh8OftR4fOY2oI19D9BImhYIB4o6eA==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-11.1.1.tgz",
+      "integrity": "sha512-ek7MdLz3/c1JU2Bw1bAS2eElAo79Rn4XR+SbAvgNVQDkWQbKlqAaDq0pUQO60unBhS2319skknLZcdHcRtTe3Q==",
      "requires": {
        "@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.16"
+        "@fortawesome/react-fontawesome": "0.1.18"
+      }
+    },
+    "@edx/frontend-component-header": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-3.1.1.tgz",
+      "integrity": "sha512-Qlzp3bOS+wypLrJljVpkVveP462uTR/ZDQYQHP7kKzh/5SXHIHpHMuTqdi6b8ZPSFKMZksJTnNvEAWWjgabhzA==",
+      "requires": {
+        "@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.2.0",
+        "babel-polyfill": "6.26.0",
+        "react-responsive": "8.2.0",
+        "react-transition-group": "4.4.2"
      },
      "dependencies": {
        "@fortawesome/react-fontawesome": {
-          "version": "0.1.16",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
-          "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+          "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
          "requires": {
-            "prop-types": "^15.7.2"
+            "prop-types": "^15.8.1"
+          },
+          "dependencies": {
+            "prop-types": {
+              "version": "15.8.1",
+              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+              "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+              "requires": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+              }
+            }
          }
        }
      }
    },
-    "@edx/frontend-component-header": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.4.5.tgz",
-      "integrity": "sha512-II0+1cKLKLT954uStqWNpFo+gVn3AyFSD+kIer7NOaH5PB/XpYdsxu4PUIftFeYbrFY3SHsBDALjOsRT+LFNsg==",
-      "requires": {
-        "@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.14",
-        "babel-polyfill": "6.26.0",
-        "react-responsive": "8.2.0",
-        "react-transition-group": "4.4.2"
-      }
-    },
    "@edx/frontend-platform": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.15.1.tgz",
-      "integrity": "sha512-vi2iG01z/mvlxKbgozGkZQTbchliq6MJ9tY4CpYy1CMjt5Rn/PDaS2sK6FKhuAlyQAR4ZqFWHrwM1wednG9RQQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.5.0.tgz",
+      "integrity": "sha512-Ws40TMkxrF9Fz71K8bqp+qui7kXYOBvl8+PYLa1K0lmzwD70FFU73mQBTvgTJKKWcw8VsjK9oJCxmjGvz6Qe1Q==",
      "requires": {
        "@cospired/i18n-iso-languages": "2.2.0",
-        "axios": "0.21.4",
+        "@formatjs/intl-pluralrules": "^4.3.3",
+        "@formatjs/intl-relativetimeformat": "^10.0.1",
+        "axios": "0.26.1",
        "axios-cache-adapter": "2.7.3",
        "form-urlencoded": "4.1.4",
-        "glob": "7.1.7",
+        "glob": "7.2.0",
        "history": "4.10.1",
        "i18n-iso-countries": "4.3.1",
        "jwt-decode": "3.1.2",
-        "localforage": "1.9.0",
+        "localforage": "1.10.0",
        "localforage-memoryStorageDriver": "0.9.2",
        "lodash.camelcase": "4.3.0",
        "lodash.memoize": "4.1.2",
        "lodash.merge": "4.6.2",
        "lodash.snakecase": "4.1.1",
        "pubsub-js": "1.9.4",
-        "react-intl": "2.9.0",
+        "react-intl": "^5.25.0",
        "universal-cookie": "4.0.4"
      },
      "dependencies": {
-        "axios": {
-          "version": "0.21.4",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
          "requires": {
-            "follow-redirects": "^1.14.0"
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
          }
        },
-        "glob": {
-          "version": "7.1.7",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+        "axios": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+          "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
+            "follow-redirects": "^1.14.8"
+          }
+        },
+        "intl-messageformat": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+          "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.4",
+            "@formatjs/fast-memoize": "1.2.1",
+            "@formatjs/icu-messageformat-parser": "2.1.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "react-intl": {
+          "version": "5.25.1",
+          "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
+          "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.4",
+            "@formatjs/icu-messageformat-parser": "2.1.0",
+            "@formatjs/intl": "2.2.1",
+            "@formatjs/intl-displaynames": "5.4.3",
+            "@formatjs/intl-listformat": "6.5.3",
+            "@types/hoist-non-react-statics": "^3.3.1",
+            "@types/react": "16 || 17 || 18",
+            "hoist-non-react-statics": "^3.3.2",
+            "intl-messageformat": "9.13.0",
+            "tslib": "^2.1.0"
          }
        }
      }
@@ -37632,6 +37841,141 @@
        "tslib": "^2.0.1"
      }
    },
+    "@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
+      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "@formatjs/intl-displaynames": "5.4.3",
+        "@formatjs/intl-listformat": "6.5.3",
+        "intl-messageformat": "9.13.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        },
+        "intl-messageformat": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+          "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.4",
+            "@formatjs/fast-memoize": "1.2.1",
+            "@formatjs/icu-messageformat-parser": "2.1.0",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl-displaynames": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
+      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl-listformat": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
+      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
    "@formatjs/intl-numberformat": {
      "version": "5.7.6",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-numberformat/-/intl-numberformat-5.7.6.tgz",
@@ -37642,6 +37986,48 @@
        "tslib": "^2.0.1"
      }
    },
+    "@formatjs/intl-pluralrules": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.3.3.tgz",
+      "integrity": "sha512-NLZN8gf2qLpCuc0m565IbKLNUarEGOzk0mkdTkE4XTuNCofzoQTurW6lL3fmDlneAoYl2FiTdHa5q4o2vZF50g==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl-relativetimeformat": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-10.0.1.tgz",
+      "integrity": "sha512-AABPQtPjFilXegQsnmVHrSlzjFNUffAEk5DgowY6b7WSwDI7g2W6QgW903/lbZ58emhphAbgHdtKeUBXqTiLpw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.25",
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
    "@fortawesome/fontawesome-common-types": {
      "version": "0.2.36",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
@@ -41242,12 +41628,6 @@
        "sprintf-js": "~1.0.2"
      }
    },
-    "argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true
-    },
    "argv-formatter": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/argv-formatter/-/argv-formatter-1.0.0.tgz",
@@ -43291,19 +43671,6 @@
      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
      "dev": true
    },
-    "codecov": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.3.tgz",
-      "integrity": "sha512-Y8Hw+V3HgR7V71xWH2vQ9lyS358CbGCldWlJFR0JirqoGtOoas3R3/OclRTvgUYFK29mmJICDPauVKmpqbwhOA==",
-      "dev": true,
-      "requires": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.4",
-        "js-yaml": "3.14.1",
-        "teeny-request": "7.1.1",
-        "urlgrey": "1.0.0"
-      }
-    },
    "collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -45417,13 +45784,12 @@
      "dev": true
    },
    "eventsource": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
-      "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
      "dev": true,
-      "requires": {
-        "original": ">=0.0.5"
-      }
+      "optional": true,
+      "peer": true
    },
    "exec-buffer": {
      "version": "3.2.0",
@@ -45938,23 +46304,6 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
-    "fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
-      "dev": true,
-      "requires": {
-        "punycode": "^1.3.2"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
-        }
-      }
-    },
    "fast-xml-parser": {
      "version": "3.21.1",
      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.21.1.tgz",
@@ -46616,7 +46965,6 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-      "dev": true,
      "requires": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -47331,15 +47679,6 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
-    "ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.4"
-      }
-    },
    "image-webpack-loader": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz",
@@ -51397,9 +51736,9 @@
      }
    },
    "localforage": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
-      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
      "requires": {
        "lie": "3.1.1"
      }
@@ -56151,6 +56490,24 @@
            "which": "^1.2.9"
          }
        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "eventsource": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
+          "integrity": "sha512-bbB5tEuvC+SuRUG64X8ghvjgiRniuA4WlehWbFnoN4z6TxDXpyX+BMHF7rMgZAqoe+EbyNRUbHN0uuP9phy5jQ==",
+          "dev": true,
+          "requires": {
+            "original": ">=0.0.5"
+          }
+        },
        "external-editor": {
          "version": "2.2.0",
          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
@@ -56261,6 +56618,12 @@
          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
          "dev": true
        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
        "mute-stream": {
          "version": "0.0.7",
          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -56286,6 +56649,20 @@
            "signal-exit": "^3.0.2"
          }
        },
+        "sockjs-client": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
+          "integrity": "sha512-PmPRkAYIeuRgX+ZSieViT4Z3Q23bLS2Itm/ck1tSf5P0/yVuFDiI5q9mcnpXoMdToaPSRS9MEyUx/aaBxrFzyw==",
+          "dev": true,
+          "requires": {
+            "debug": "^2.6.6",
+            "eventsource": "0.1.6",
+            "faye-websocket": "~0.11.0",
+            "inherits": "^2.0.1",
+            "json3": "^3.3.2",
+            "url-parse": "^1.1.8"
+          }
+        },
        "string-width": {
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -56379,6 +56756,17 @@
        "use-sidecar": "^1.0.5"
      }
    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
    "react-intl": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
@@ -56582,6 +56970,12 @@
        }
      }
    },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "requires": {}
+    },
    "react-style-singleton": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
@@ -58397,33 +58791,30 @@
      }
    },
    "sockjs-client": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
-      "integrity": "sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "requires": {
-        "debug": "^2.6.6",
-        "eventsource": "0.1.6",
-        "faye-websocket": "~0.11.0",
-        "inherits": "^2.0.1",
-        "json3": "^3.3.2",
-        "url-parse": "^1.1.8"
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
      },
      "dependencies": {
        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
          "dev": true,
+          "optional": true,
+          "peer": true,
          "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
        }
      }
    },
@@ -58830,15 +59221,6 @@
        "readable-stream": "^2.0.2"
      }
    },
-    "stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "requires": {
-        "stubs": "^3.0.0"
-      }
-    },
    "strict-uri-encode": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -59021,12 +59403,6 @@
      "dev": true,
      "optional": true
    },
-    "stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
    "style-loader": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -59390,27 +59766,6 @@
        "xtend": "^4.0.0"
      }
    },
-    "teeny-request": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
-      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
-      "dev": true,
-      "requires": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.1",
-        "stream-events": "^1.0.5",
-        "uuid": "^8.0.0"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-          "dev": true
-        }
-      }
-    },
    "temp-dir": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
@@ -59948,7 +60303,7 @@
      "version": "4.6.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
-      "dev": true
+      "devOptional": true
    },
    "uglify-js": {
      "version": "3.15.4",
@@ -60197,15 +60552,6 @@
      "dev": true,
      "optional": true
    },
-    "urlgrey": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
-      "integrity": "sha512-hJfIzMPJmI9IlLkby8QrsCykQ+SXDeO2W5Q9QTW3QpqZVTx4a/K7p8/5q+/isD8vsbVaFgql/gvAoQCRQ2Cb5w==",
-      "dev": true,
-      "requires": {
-        "fast-url-parser": "^1.1.3"
-      }
-    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.5.0",
+  "version": "1.6.0",
  "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
  "repository": {
    "type": "git",
@@ -8,7 +8,6 @@
  },
  "scripts": {
    "build": "fedx-scripts webpack",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "is-es5": "es-check es5 ./dist/*.js",
    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
@@ -32,9 +31,9 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.2.1",
-    "@edx/frontend-component-header": "2.4.5",
-    "@edx/frontend-platform": "1.15.1",
+    "@edx/frontend-component-footer": "^11.1.1",
+    "@edx/frontend-component-header": "^3.1.1",
+    "@edx/frontend-platform": "2.5.0",
    "@edx/paragon": "19.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
@@ -53,6 +52,7 @@
    "query-string": "6.13.0",
    "react": "16.14.0",
    "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
    "react-intl": "^2.9.0",
    "react-redux": "^7.1.1",
    "react-router": "5.2.0",
@@ -72,7 +72,6 @@
    "@edx/frontend-build": "9.1.1",
    "axios": "0.21.1",
    "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
    "enzyme-adapter-react-16": "^1.14.0",
    "es-check": "^2.3.0",
    "fetch-mock": "^6.5.2",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,9 +10,11 @@ import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 import './App.scss';
+import Head from './head/Head';

 const App = () => (
  <AppProvider store={store}>
+    <Head />
    <Router>
      <div>
        <Header />
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -12,6 +12,7 @@ import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';

 import App from './App';
+import Head from './head/Head';

 jest.mock('react-router-dom', () => ({
  BrowserRouter: () => 'BrowserRouter',
@@ -41,7 +42,7 @@ describe('App router component', () => {
    beforeEach(() => {
      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
      el = shallow(<App />);
-      router = el.childAt(0);
+      router = el.childAt(1);
    });
    describe('AppProvider', () => {
      test('AppProvider is the parent component, passed the redux store props', () => {
@@ -49,8 +50,13 @@ describe('App router component', () => {
        expect(el.props().store).toEqual(store);
      });
    });
-    describe('Router', () => {
+    describe('Head', () => {
      test('first child of AppProvider', () => {
+        expect(el.childAt(0).type()).toBe(Head);
+      });
+    });
+    describe('Router', () => {
+      test('second child of AppProvider', () => {
        expect(router.type()).toBe(Router);
      });
      test('Header is above/outside-of the routing', () => {
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`App router component snapshot 1`] = `
 <AppProvider
  store="testStore"
 >
+  <injectIntl(ShimmedIntlComponent) />
  <BrowserRouter>
    <div>
      <Header />
--- a/src/components/BulkManagementHistoryView/HistoryTable.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';

 import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';
@@ -30,14 +30,13 @@ export const mapHistoryRows = ({
 export const HistoryTable = ({
  bulkManagementHistory,
 }) => (
-  <>
-    <Table
-      data={bulkManagementHistory.map(mapHistoryRows)}
-      hasFixedColumnWidths
-      columns={bulkManagementColumns}
-      className="table-striped"
-    />
-  </>
+  <DataTable
+    data={bulkManagementHistory.map(mapHistoryRows)}
+    hasFixedColumnWidths
+    columns={bulkManagementColumns}
+    className="table-striped"
+    itemCount={bulkManagementHistory.length}
+  />
 );
 HistoryTable.defaultProps = {
  bulkManagementHistory: [],
--- a/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';

 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,13 +9,12 @@ import { bulkManagementColumns } from 'data/constants/app';
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';

+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+
 jest.mock('@edx/frontend-platform/i18n', () => ({
  defineMessages: m => m,
  FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
-}));
 jest.mock('data/selectors', () => ({
  __esModule: true,
  default: {
@@ -62,7 +61,7 @@ describe('HistoryTable', () => {
      describe('history table', () => {
        let table;
        beforeEach(() => {
-          table = el.find(Table);
+          table = el.find(DataTable);
        });
        describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
          const fieldAssertions = [
--- a/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
@@ -42,78 +42,77 @@ Array [
 `;

 exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
-<Fragment>
-  <Table
-    className="table-striped"
-    columns={
-      Array [
-        Object {
-          "columnSortable": false,
-          "key": "filename",
-          "label": "Gradebook",
-          "width": "col-5",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "resultsSummary",
-          "label": "Download Summary",
-          "width": "col",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "user",
-          "label": "Who",
-          "width": "col-1",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "timeUploaded",
-          "label": "When",
-          "width": "col",
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            blue.png
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="Da Bu Dee"
-            rowId={12}
-            text="Da ba daa"
-          />,
-          "timeUploaded": "65",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Eifel
-          </span>,
-        },
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            allStar.jpg
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="rockstar"
-            rowId={2}
-            text="all that glitters is gold"
-          />,
-          "timeUploaded": "2000s?",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Smashmouth
-          </span>,
-        },
-      ]
-    }
-    hasFixedColumnWidths={true}
-  />
-</Fragment>
+<DataTable
+  className="table-striped"
+  columns={
+    Array [
+      Object {
+        "Header": "Gradebook",
+        "accessor": "filename",
+        "columnSortable": false,
+        "width": "col-5",
+      },
+      Object {
+        "Header": "Download Summary",
+        "accessor": "resultsSummary",
+        "columnSortable": false,
+        "width": "col",
+      },
+      Object {
+        "Header": "Who",
+        "accessor": "user",
+        "columnSortable": false,
+        "width": "col-1",
+      },
+      Object {
+        "Header": "When",
+        "accessor": "timeUploaded",
+        "columnSortable": false,
+        "width": "col",
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "filename": <span
+          className="wrap-text-in-cell"
+        >
+          blue.png
+        </span>,
+        "resultsSummary": <ResultsSummary
+          courseId="Da Bu Dee"
+          rowId={12}
+          text="Da ba daa"
+        />,
+        "timeUploaded": "65",
+        "user": <span
+          className="wrap-text-in-cell"
+        >
+          Eifel
+        </span>,
+      },
+      Object {
+        "filename": <span
+          className="wrap-text-in-cell"
+        >
+          allStar.jpg
+        </span>,
+        "resultsSummary": <ResultsSummary
+          courseId="rockstar"
+          rowId={2}
+          text="all that glitters is gold"
+        />,
+        "timeUploaded": "2000s?",
+        "user": <span
+          className="wrap-text-in-cell"
+        >
+          Smashmouth
+        </span>,
+      },
+    ]
+  }
+  hasFixedColumnWidths={true}
+  itemCount={2}
+/>
 `;
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

+import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';

-import { configuration } from 'config';
 import { views } from 'data/constants/app';
 import actions from 'data/actions';
 import selectors from 'data/selectors';
@@ -25,7 +25,7 @@ export class GradebookHeader extends React.Component {
  }

  lmsInstructorDashboardUrl = courseId => (
-    `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`
+    `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor`
  );

  handleToggleViewClick() {
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
@@ -7,6 +7,7 @@ import { Form } from '@edx/paragon';

 import selectors from 'data/selectors';
 import actions from 'data/actions';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';

 /**
 * <AdjustedGradeInput />
@@ -32,7 +33,7 @@ export class AdjustedGradeInput extends React.Component {
          value={this.props.value}
          onChange={this.onChange}
        />
-        {this.props.possibleGrade && ` / ${this.props.possibleGrade}`}
+        {this.props.possibleGrade && ` ${isRtl(getLocale()) ? '\\' : '/'} ${this.props.possibleGrade}`}
      </span>
    );
  }
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
@@ -1,40 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
-<Table
+<DataTable
  columns={
    Array [
      Object {
-        "key": "date",
-        "label": <FormattedMessage
+        "Header": <FormattedMessage
          defaultMessage="Date"
          description="Edit Modal Override Table Date column header"
          id="gradebook.GradesView.EditModal.Overrides.dateHeader"
        />,
+        "accessor": "date",
      },
      Object {
-        "key": "grader",
-        "label": <FormattedMessage
+        "Header": <FormattedMessage
          defaultMessage="Grader"
          description="Edit Modal Override Table Grader column header"
          id="gradebook.GradesView.EditModal.Overrides.graderHeader"
        />,
+        "accessor": "grader",
      },
      Object {
-        "key": "reason",
-        "label": <FormattedMessage
+        "Header": <FormattedMessage
          defaultMessage="Reason"
          description="Edit Modal Override Table Reason column header"
          id="gradebook.GradesView.EditModal.Overrides.reasonHeader"
        />,
+        "accessor": "reason",
      },
      Object {
-        "key": "adjustedGrade",
-        "label": <FormattedMessage
+        "Header": <FormattedMessage
          defaultMessage="Adjusted grade"
          description="Edit Modal Override Table Adjusted grade column header"
          id="gradebook.GradesView.EditModal.Overrides.adjustedGradeHeader"
        />,
+        "accessor": "adjustedGrade",
      },
    ]
  }
@@ -59,5 +59,6 @@ exports[`OverrideTable Component snapshots basic snapshot shows a row for each e
      },
    ]
  }
+  itemCount={2}
 />
 `;
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
@@ -27,14 +27,14 @@ export const OverrideTable = ({
    return null;
  }
  return (
-    <Table
+    <DataTable
      columns={[
-        { label: <FormattedMessage {...messages.dateHeader} />, key: columns.date },
-        { label: <FormattedMessage {...messages.graderHeader} />, key: columns.grader },
-        { label: <FormattedMessage {...messages.reasonHeader} />, key: columns.reason },
+        { Header: <FormattedMessage {...messages.dateHeader} />, accessor: columns.date },
+        { Header: <FormattedMessage {...messages.graderHeader} />, accessor: columns.grader },
+        { Header: <FormattedMessage {...messages.reasonHeader} />, accessor: columns.reason },
        {
-          label: <FormattedMessage {...messages.adjustedGradeHeader} />,
-          key: columns.adjustedGrade,
+          Header: <FormattedMessage {...messages.adjustedGradeHeader} />,
+          accessor: columns.adjustedGrade,
        },
      ]}
      data={[
@@ -45,6 +45,7 @@ export const OverrideTable = ({
          reason: <ReasonInput />,
        },
      ]}
+      itemCount={gradeOverrides.length}
    />
  );
 };
--- a/src/components/GradesView/EditModal/OverrideTable/test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/test.jsx
@@ -8,7 +8,7 @@ import {
  mapStateToProps,
 } from '.';

-jest.mock('@edx/paragon', () => ({ Table: () => 'Table' }));
+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
 jest.mock('./ReasonInput', () => 'ReasonInput');
 jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');

--- a/src/components/GradesView/EditModal/snapshots/test.jsx.snap
+++ b/src/components/GradesView/EditModal/snapshots/test.jsx.snap
@@ -5,12 +5,13 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
  body={
    <div>
      <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog="Weve been trying to contact you regarding..."
+      <Alert
        dismissible={false}
-        open={true}
-      />
+        show={true}
+        variant="danger"
+      >
+        Weve been trying to contact you regarding...
+      </Alert>
      <OverrideTable />
      <div>
        <FormattedMessage
@@ -66,12 +67,13 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
  body={
    <div>
      <ModalHeaders />
-      <StatusAlert
-        alertType="danger"
-        dialog=""
+      <Alert
        dismissible={false}
-        open={false}
-      />
+        show={false}
+        variant="danger"
+      >
+        
+      </Alert>
      <OverrideTable />
      <div>
        <FormattedMessage
--- a/src/components/GradesView/EditModal/index.jsx
+++ b/src/components/GradesView/EditModal/index.jsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import {
  Button,
  Modal,
-  StatusAlert,
+  Alert,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

@@ -53,12 +53,13 @@ export class EditModal extends React.Component {
        body={(
          <div>
            <ModalHeaders />
-            <StatusAlert
-              alertType="danger"
-              dialog={this.props.gradeOverrideHistoryError}
-              open={!!this.props.gradeOverrideHistoryError}
+            <Alert
+              variant="danger"
+              show={!!this.props.gradeOverrideHistoryError}
              dismissible={false}
-            />
+            >
+              {this.props.gradeOverrideHistoryError}
+            </Alert>
            <OverrideTable />
            <div><FormattedMessage {...messages.visibility} /></div>
            <div><FormattedMessage {...messages.saveVisibility} /></div>
--- a/src/components/GradesView/EditModal/test.jsx
+++ b/src/components/GradesView/EditModal/test.jsx
@@ -16,7 +16,7 @@ jest.mock('./ModalHeaders', () => 'ModalHeaders');
 jest.mock('@edx/paragon', () => ({
  Button: () => 'Button',
  Modal: () => 'Modal',
-  StatusAlert: () => 'StatusAlert',
+  Alert: () => 'Alert',
 }));
 jest.mock('data/actions', () => ({
  __esModule: true,
--- a/src/components/GradesView/GradebookTable/snapshots/test.jsx.snap
+++ b/src/components/GradesView/GradebookTable/snapshots/test.jsx.snap
@@ -4,48 +4,58 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
 <div
  className="gradebook-container"
 >
-  <div
-    className="gbook"
+  <DataTable
+    RowStatusComponent={[MockFunction this.nullMethod]}
+    columns={
+      Array [
+        Object {
+          "Header": <UsernameLabelReplacement />,
+          "accessor": "Username",
+        },
+        Object {
+          "Header": <FormattedMessage
+            defaultMessage="Email"
+            description="Gradebook table email column header"
+            id="gradebook.GradesView.table.headings.email"
+          />,
+          "accessor": "Email",
+        },
+        Object {
+          "Header": "field1",
+          "accessor": "field1",
+        },
+        Object {
+          "Header": "field2",
+          "accessor": "field2",
+        },
+        Object {
+          "Header": <TotalGradeLabelReplacement />,
+          "accessor": "Total Grade (%)",
+        },
+      ]
+    }
+    data={
+      Array [
+        "mappedRow: 1",
+        "mappedRow: 2",
+        "mappedRow: 3",
+      ]
+    }
+    hasFixedColumnWidths={true}
+    itemCount={3}
+    rowHeaderColumnKey="username"
  >
-    <Table
-      columns={
-        Array [
-          Object {
-            "key": "Username",
-            "label": <UsernameLabelReplacement />,
-          },
-          Object {
-            "key": "Email",
-            "label": <FormattedMessage
-              defaultMessage="Email"
-              description="Gradebook table email column header"
-              id="gradebook.GradesView.table.headings.email"
-            />,
-          },
-          Object {
-            "key": "field1",
-            "label": "field1",
-          },
-          Object {
-            "key": "field2",
-            "label": "field2",
-          },
-          Object {
-            "key": "Total Grade (%)",
-            "label": <TotalGradeLabelReplacement />,
-          },
-        ]
+    <DataTable.TableControlBar />
+    <DataTable.Table />
+    <DataTable.EmptyTable
+      content={
+        <FormattedMessage
+          defaultMessage="No results found"
+          description="Gradebook table message when no learner results were found"
+          id="gradebook.GradesView.table.noResultsFound"
+        />
      }
-      data={
-        Array [
-          "mappedRow: 1",
-          "mappedRow: 2",
-          "mappedRow: 3",
-        ]
-      }
-      hasFixedColumnWidths={true}
-      rowHeaderColumnKey="username"
    />
-  </div>
+  </DataTable>
 </div>
 `;
--- a/src/components/GradesView/GradebookTable/index.jsx
+++ b/src/components/GradesView/GradebookTable/index.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Table } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@edx/paragon';
+import { FormattedMessage, getLocale, isRtl } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
@@ -27,6 +27,7 @@ export class GradebookTable extends React.Component {
    super(props);
    this.mapHeaders = this.mapHeaders.bind(this);
    this.mapRows = this.mapRows.bind(this);
+    this.nullMethod = this.nullMethod.bind(this);
  }

  mapHeaders(heading) {
@@ -40,7 +41,7 @@ export class GradebookTable extends React.Component {
    } else {
      label = heading;
    }
-    return { label, key: heading };
+    return { Header: label, accessor: heading };
  }

  mapRows(entry) {
@@ -49,7 +50,7 @@ export class GradebookTable extends React.Component {
        <Fields.Username username={entry.username} userKey={entry.external_user_key} />
      ),
      [Headings.email]: (<Fields.Email email={entry.email} />),
-      [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}%`,
+      [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${isRtl(getLocale()) ? '\u200f' : ''}%`,
    };
    entry.section_breakdown.forEach(subsection => {
      dataRow[subsection.label] = (
@@ -59,17 +60,25 @@ export class GradebookTable extends React.Component {
    return dataRow;
  }

+  nullMethod() {
+    return null;
+  }
+
  render() {
    return (
      <div className="gradebook-container">
-        <div className="gbook">
-          <Table
-            columns={this.props.headings.map(this.mapHeaders)}
-            data={this.props.grades.map(this.mapRows)}
-            rowHeaderColumnKey="username"
-            hasFixedColumnWidths
-          />
-        </div>
+        <DataTable
+          columns={this.props.headings.map(this.mapHeaders)}
+          data={this.props.grades.map(this.mapRows)}
+          rowHeaderColumnKey="username"
+          hasFixedColumnWidths
+          itemCount={this.props.grades.length}
+          RowStatusComponent={this.nullMethod}
+        >
+          <DataTable.TableControlBar />
+          <DataTable.Table />
+          <DataTable.EmptyTable content={<FormattedMessage {...messages.noResultsFound} />} />
+        </DataTable>
      </div>
    );
  }
--- a/src/components/GradesView/GradebookTable/messages.js
+++ b/src/components/GradesView/GradebookTable/messages.js
@@ -31,6 +31,11 @@ const messages = defineMessages({
    defaultMessage: 'Total Grade values are always displayed as a percentage',
    description: 'Gradebook table message that total grades are displayed in percent format',
  },
+  noResultsFound: {
+    id: 'gradebook.GradesView.table.noResultsFound',
+    defaultMessage: 'No results found',
+    description: 'Gradebook table message when no learner results were found',
+  },
 });

 export default messages;
--- a/src/components/GradesView/GradebookTable/test.jsx
+++ b/src/components/GradesView/GradebookTable/test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';

-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
@@ -11,8 +11,12 @@ import Fields from './Fields';
 import messages from './messages';
 import { GradebookTable, mapStateToProps } from '.';

-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
+jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
+  DataTable: {
+    Table: 'DataTable.Table',
+    TableControlBar: 'DataTable.TableControlBar',
+    EmptyTable: 'DataTable.EmptyTable',
+  },
 }));
 jest.mock('./Fields', () => ({
  __esModule: true,
@@ -79,40 +83,45 @@ describe('GradebookTable', () => {
    };
    test('snapshot - fields1 and 2 between email and totalGrade, mocked rows', () => {
      el = shallow(<GradebookTable {...props} />);
+      el.instance().nullMethod = jest.fn().mockName('this.nullMethod');
      el.instance().mapRows = (entry) => `mappedRow: ${entry.percent}`;
      expect(el.instance().render()).toMatchSnapshot();
    });
+    test('null method returns null for stub component', () => {
+      el = shallow(<GradebookTable {...props} />);
+      expect(el.instance().nullMethod()).toEqual(null);
+    });
    describe('table columns (mapHeaders)', () => {
      let headings;
      beforeEach(() => {
        el = shallow(<GradebookTable {...props} />);
-        headings = el.find(Table).props().columns;
+        headings = el.find(DataTable).props().columns;
      });
-      test('username sets key and replaces label with component', () => {
+      test('username sets key and replaces Header with component', () => {
        const heading = headings[0];
-        expect(heading.key).toEqual(Headings.username);
-        expect(heading.label.type).toEqual(LabelReplacements.UsernameLabelReplacement);
+        expect(heading.accessor).toEqual(Headings.username);
+        expect(heading.Header.type).toEqual(LabelReplacements.UsernameLabelReplacement);
      });
-      test('email sets key and label from header', () => {
+      test('email sets key and Header from header', () => {
        const heading = headings[1];
-        expect(heading.key).toEqual(Headings.email);
-        expect(heading.label).toEqual(<FormattedMessage {...messages.emailHeading} />);
+        expect(heading.accessor).toEqual(Headings.email);
+        expect(heading.Header).toEqual(<FormattedMessage {...messages.emailHeading} />);
      });
-      test('subsections set key and label from header', () => {
-        expect(headings[2]).toEqual({ key: fields.field1, label: fields.field1 });
-        expect(headings[3]).toEqual({ key: fields.field2, label: fields.field2 });
+      test('subsections set key and Header from header', () => {
+        expect(headings[2]).toEqual({ accessor: fields.field1, Header: fields.field1 });
+        expect(headings[3]).toEqual({ accessor: fields.field2, Header: fields.field2 });
      });
-      test('totalGrade sets key and replaces label with component', () => {
+      test('totalGrade sets key and replaces Header with component', () => {
        const heading = headings[4];
-        expect(heading.key).toEqual(Headings.totalGrade);
-        expect(heading.label.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
+        expect(heading.accessor).toEqual(Headings.totalGrade);
+        expect(heading.Header.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
      });
    });
    describe('table data (mapRows)', () => {
      let rows;
      beforeEach(() => {
        el = shallow(<GradebookTable {...props} />);
-        rows = el.find(Table).props().data;
+        rows = el.find(DataTable).props().data;
      });
      describe.each([0, 1, 2])('gradeEntry($percent)', (gradeIndex) => {
        let row;
--- a/src/components/GradesView/GradesView.scss
+++ b/src/components/GradesView/GradesView.scss
@@ -31,7 +31,7 @@
    .import-grades-btn {
      margin-left: 20px;
    }
-    .intervention-report-description: {
+    .intervention-report-description {
      margin-right: 40px;
    }
    h4.step-message-1 {
@@ -67,104 +67,9 @@
    overflow-x: auto;
    height: 600px;
    overflow-y: auto;
-    word-break: break-word;
    position: relative;
 }

-.gbook { 
-    width: 100%;
-
-    .grade-button {
-        text-decoration: underline;
-    }
-
-    .student-key {
-        font-size: 14px;
-    }
-
-    #courseGradeTooltipIcon {
-      float: right;
-    }
-
-    .table thead tr {
-        min-height: 60px;
-        &:nth-child(1) {
-          position: sticky;
-          top: 0;
-          z-index: 10;
-          background-color: white;
-          th {
-            background-color: white;
-            border-bottom: 1px solid $gray_200;
-          }
-        }
-    }
-
-    thead, tbody, tr, td, th {
-      display: block;
-      word-break: break-word;
-    }
-
-    .table tr th:first-child {
-        border-bottom: none;
-    }
-    .table tr th:first-child,
-    .table tr td:first-child {
-        position: sticky;
-        left: 0;
-        z-index: 1; // to float over the following children in the side-scrolling case
-        background: white;
-    }
-
-    .table tr {
-      th:nth-child(1),
-      td:nth-child(1),
-      th:nth-child(2),
-      td:nth-child(2) {
-        width: 240px;
-      }
-      th:nth-last-of-type(1) {
-        width: 150px;
-      }
-      th, td {
-        width: 120px;
-      }
-    }
-    .table tbody th {
-        font-weight: normal;
-    }
-
-    .table {
-      overflow-x: hidden;
-
-      height: 100%;
-
-      tbody {
-        overflow-y: auto;
-        display: block;
-      }
-
-      thead, tbody tr {
-        display: table;
-        table-layout: fixed;
-      }
-
-      th {
-          vertical-align: top;
-          font-size: 14px;
-      }
-    }
-
-    .link-style {
-        color: #0075b4;
-        &:hover, &:focus {
-            color: #004368;
-            text-decoration: underline;
-        }
-    }
-
-}
-
 .form-group, .pgn__form-group {
  label {
    font-weight: bold;
--- a/src/components/GradesView/SearchControls.jsx
+++ b/src/components/GradesView/SearchControls.jsx
@@ -18,13 +18,14 @@ import messages from './SearchControls.messages';
 export class SearchControls extends React.Component {
  constructor(props) {
    super(props);
-    this.onChange = this.onChange.bind(this);
+
+    this.onBlur = this.onBlur.bind(this);
    this.onClear = this.onClear.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
  }

-  /** Changing the search value stores the key in Gradebook. Currently unused */
-  onChange(searchValue) {
-    this.props.setSearchValue(searchValue);
+  onBlur(e) {
+    this.props.setSearchValue(e.target.value);
  }

  onClear() {
@@ -32,13 +33,18 @@ export class SearchControls extends React.Component {
    this.props.fetchGrades();
  }

+  onSubmit(searchValue) {
+    this.props.setSearchValue(searchValue);
+    this.props.fetchGrades();
+  }
+
  render() {
    return (
      <div>
        <SearchField
-          onSubmit={this.props.fetchGrades}
+          onSubmit={this.onSubmit}
          inputLabel={<FormattedMessage {...messages.label} />}
-          onChange={this.onChange}
+          onBlur={this.onBlur}
          onClear={this.onClear}
          value={this.props.searchValue}
        />
--- a/src/components/GradesView/SearchControls.test.jsx
+++ b/src/components/GradesView/SearchControls.test.jsx
@@ -4,7 +4,11 @@ import { shallow } from 'enzyme';
 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';
-import { mapDispatchToProps, mapStateToProps, SearchControls } from './SearchControls';
+import {
+  mapDispatchToProps,
+  mapStateToProps,
+  SearchControls,
+} from './SearchControls';

 jest.mock('@edx/paragon', () => ({
  Icon: 'Icon',
@@ -15,7 +19,7 @@ jest.mock('data/selectors', () => ({
  __esModule: true,
  default: {
    app: {
-      searchValue: jest.fn(state => ({ searchValue: state })),
+      searchValue: jest.fn((state) => ({ searchValue: state })),
    },
  },
 }));
@@ -52,26 +56,45 @@ describe('SearchControls', () => {
    describe('Snapshots', () => {
      test('basic snapshot', () => {
        const wrapper = searchControls();
-        wrapper.instance().onChange = jest.fn().mockName('onChange');
+        wrapper.instance().onBlur = jest.fn().mockName('onBlur');
        wrapper.instance().onClear = jest.fn().mockName('onClear');
+        wrapper.instance().onSubmit = jest.fn().mockName('onSubmit');
        expect(wrapper.instance().render()).toMatchSnapshot();
      });
    });

-    describe('onChange', () => {
-      it('saves the changed search value to Gradebook state', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onChange('bob');
-        expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+    describe('Behavior', () => {
+      describe('onBlur', () => {
+        it('saves the search value to Gradebook state but do not fetch grade', () => {
+          const wrapper = searchControls();
+          const event = {
+            target: {
+              value: 'bob',
+            },
+          };
+          wrapper.instance().onBlur(event);
+          expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+          expect(props.fetchGrades).not.toHaveBeenCalled();
+        });
      });
-    });

-    describe('onChange', () => {
-      it('sets search value to empty string and calls fetchGrades', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onClear();
-        expect(props.setSearchValue).toHaveBeenCalledWith('');
-        expect(props.fetchGrades).toHaveBeenCalled();
+      describe('onClear', () => {
+        it('sets search value to empty string and calls fetchGrades', () => {
+          const wrapper = searchControls();
+          wrapper.instance().onClear();
+          expect(props.setSearchValue).toHaveBeenCalledWith('');
+          expect(props.fetchGrades).toHaveBeenCalled();
+        });
+      });
+
+      describe('onSubmit', () => {
+        it('sets search value to input and calls fetchGrades', () => {
+          const wrapper = searchControls();
+
+          wrapper.instance().onSubmit('John');
+          expect(props.setSearchValue).toHaveBeenCalledWith('John');
+          expect(props.fetchGrades).toHaveBeenCalled();
+        });
      });
    });

--- a/src/components/GradesView/StatusAlerts.jsx
+++ b/src/components/GradesView/StatusAlerts.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';
@@ -40,18 +40,20 @@ export class StatusAlerts extends React.Component {
  render() {
    return (
      <>
-        <StatusAlert
-          alertType="success"
-          dialog={<FormattedMessage {...messages.editSuccessAlert} />}
+        <Alert
+          variant="success"
          onClose={this.props.handleCloseSuccessBanner}
-          open={this.props.showSuccessBanner}
-        />
-        <StatusAlert
-          alertType="danger"
-          dialog={this.courseGradeFilterAlertDialogText}
+          show={this.props.showSuccessBanner}
+        >
+          <FormattedMessage {...messages.editSuccessAlert} />
+        </Alert>
+        <Alert
+          variant="danger"
          dismissible={false}
-          open={this.isCourseGradeFilterAlertOpen}
-        />
+          show={this.isCourseGradeFilterAlertOpen}
+        >
+          {this.courseGradeFilterAlertDialogText}
+        </Alert>
      </>
    );
  }
--- a/src/components/GradesView/StatusAlerts.test.jsx
+++ b/src/components/GradesView/StatusAlerts.test.jsx
@@ -13,7 +13,7 @@ import {
 } from './StatusAlerts';

 jest.mock('@edx/paragon', () => ({
-  StatusAlert: 'StatusAlert',
+  Alert: 'Alert',
 }));
 jest.mock('data/selectors', () => ({
  __esModule: true,
--- a/src/components/GradesView/snapshots/SearchControls.test.jsx.snap
+++ b/src/components/GradesView/snapshots/SearchControls.test.jsx.snap
@@ -10,9 +10,9 @@ exports[`SearchControls Component Snapshots basic snapshot 1`] = `
        id="gradebook.GradesView.search.label"
      />
    }
-    onChange={[MockFunction onChange]}
+    onBlur={[MockFunction onBlur]}
    onClear={[MockFunction onClear]}
-    onSubmit={[MockFunction fetchGrades]}
+    onSubmit={[MockFunction onSubmit]}
    value="alice"
  />
  <small
--- a/src/components/GradesView/snapshots/StatusAlerts.test.jsx.snap
+++ b/src/components/GradesView/snapshots/StatusAlerts.test.jsx.snap
@@ -2,23 +2,23 @@

 exports[`StatusAlerts snapshots basic snapshot 1`] = `
 <React.Fragment>
-  <StatusAlert
-    alertType="success"
-    dialog={
-      <FormattedMessage
-        defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
-        description="An alert text for successfully editing  a grade"
-        id="gradebook.GradesView.editSuccessAlert"
-      />
-    }
+  <Alert
    onClose={[MockFunction handleCloseSuccessBanner]}
-    open={true}
-  />
-  <StatusAlert
-    alertType="danger"
-    dialog="the quiCk brown does somEthing or other"
+    show={true}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
+      description="An alert text for successfully editing  a grade"
+      id="gradebook.GradesView.editSuccessAlert"
+    />
+  </Alert>
+  <Alert
    dismissible={false}
-    open={false}
-  />
+    show={false}
+    variant="danger"
+  >
+    the quiCk brown does somEthing or other
+  </Alert>
 </React.Fragment>
 `;
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,16 +0,0 @@
-const configuration = {
-  BASE_URL: process.env.BASE_URL,
-  LMS_BASE_URL: process.env.LMS_BASE_URL,
-  LOGIN_URL: process.env.LOGIN_URL,
-  LOGOUT_URL: process.env.LOGOUT_URL,
-  CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
-  REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
-  DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
-  SECURE_COOKIES: process.env.NODE_ENV !== 'development',
-  SEGMENT_KEY: process.env.SEGMENT_KEY,
-  ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
-};
-
-const features = {};
-
-export { configuration, features };
--- a/src/data/constants/app.js
+++ b/src/data/constants/app.js
@@ -32,26 +32,26 @@ export const localFilterKeys = StrictDict({
 */
 export const bulkManagementColumns = [
  {
-    key: 'filename',
-    label: 'Gradebook',
+    accessor: 'filename',
+    Header: 'Gradebook',
    columnSortable: false,
    width: 'col-5',
  },
  {
-    key: 'resultsSummary',
-    label: 'Download Summary',
+    accessor: 'resultsSummary',
+    Header: 'Download Summary',
    columnSortable: false,
    width: 'col',
  },
  {
-    key: 'user',
-    label: 'Who',
+    accessor: 'user',
+    Header: 'Who',
    columnSortable: false,
    width: 'col-1',
  },
  {
-    key: 'timeUploaded',
-    label: 'When',
+    accessor: 'timeUploaded',
+    Header: 'When',
    columnSortable: false,
    width: 'col',
  },
--- a/src/data/selectors/grades.js
+++ b/src/data/selectors/grades.js
@@ -3,6 +3,7 @@ import { StrictDict } from 'utils';

 import { Headings, GradeFormats } from 'data/constants/grades';
 import { formatDateForDisplay } from 'data/actions/utils';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 import simpleSelectorFactory from '../utils';
 import * as module from './grades';

@@ -156,7 +157,7 @@ export const subsectionGrade = StrictDict({
  [GradeFormats.absolute]: (subsection) => {
    const earned = module.roundGrade(subsection.score_earned);
    const possible = module.roundGrade(subsection.score_possible);
-    return subsection.attempted ? `${earned}/${possible}` : `${earned}`;
+    return subsection.attempted ? `${earned}${isRtl(getLocale()) ? '\\' : '/'}${possible}` : `${earned}`;
  },
  /**
   * subsectionGrade.percent(subsection)
--- a/src/data/services/lms/api.js
+++ b/src/data/services/lms/api.js
@@ -14,10 +14,10 @@ const { get, post, stringifyUrl } = utils;
 /*********************************************************************************
 * GET Actions
 *********************************************************************************/
-const assignmentTypes = () => get(urls.assignmentTypes);
-const cohorts = () => get(urls.cohorts);
-const roles = () => get(urls.roles);
-const tracks = () => get(urls.tracks);
+const assignmentTypes = () => get(urls.getAssignmentTypesUrl());
+const cohorts = () => get(urls.getCohortsUrl());
+const roles = () => get(urls.getRolesUrl());
+const tracks = () => get(urls.getTracksUrl());

 /**
 * fetch.gradebookData(searchText, cohort, track, options)
@@ -45,7 +45,7 @@ const gradebookData = (searchText, cohort, track, options = {}) => {
    [paramKeys.assignmentGradeMax]: options.assignmentGradeMax,
    [paramKeys.assignmentGradeMin]: options.assignmentGradeMin,
  };
-  return get(stringifyUrl(urls.gradebook, queryParams));
+  return get(stringifyUrl(urls.getGradebookUrl(), queryParams));
 };

 /**
@@ -53,7 +53,7 @@ const gradebookData = (searchText, cohort, track, options = {}) => {
 * fetches bulk operation history and raises an error if the operation fails
 * @return {Promise} - get response
 */
-const gradeBulkOperationHistory = () => get(urls.bulkHistory)
+const gradeBulkOperationHistory = () => get(urls.getBulkHistoryUrl())
  .then(response => response.data)
  .catch(() => Promise.reject(Error(messages.errors.unhandledResponse)));

@@ -87,7 +87,7 @@ const gradeOverrideHistory = (subsectionId, userId) => (
 *  }
 * @return {Promise} - post response
 */
-const updateGradebookData = (updateData) => post(urls.bulkUpdate, updateData);
+const updateGradebookData = (updateData) => post(urls.getBulkUpdateUrl(), updateData);

 /**
 * uploadGradeCsv(formData)
--- a/src/data/services/lms/api.test.js
+++ b/src/data/services/lms/api.test.js
@@ -35,28 +35,28 @@ describe('lms service api', () => {
    describe('fetch.assignmentTypes', () => {
      testSimpleFetch(
        api.fetch.assignmentTypes,
-        urls.assignmentTypes,
+        urls.getAssignmentTypesUrl(),
        'fetches from urls.assignmentTypes',
      );
    });
    describe('fetch.cohorts', () => {
      testSimpleFetch(
        api.fetch.cohorts,
-        urls.cohorts,
+        urls.getCohortsUrl(),
        'fetches from urls.cohorts',
      );
    });
    describe('fetch.roles', () => {
      testSimpleFetch(
        api.fetch.roles,
-        urls.roles,
+        urls.getRolesUrl(),
        'fetches from urls.roles',
      );
    });
    describe('fetch.tracks', () => {
      testSimpleFetch(
        api.fetch.tracks,
-        urls.tracks,
+        urls.getTracksUrl(),
        'fetches from urls.tracks',
      );
    });
@@ -98,7 +98,7 @@ describe('lms service api', () => {
        });
        test('loads only passed values if options is empty', () => (
          api.fetch.gradebookData(searchText, cohort, track).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
+            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
              [paramKeys.pageSize]: pageSize,
              [paramKeys.userContains]: searchText,
              [paramKeys.cohortId]: cohort,
@@ -114,7 +114,7 @@ describe('lms service api', () => {
        ));
        test('loads ["all"] for excludedCorseRoles if not includeCourseRoles', () => (
          api.fetch.gradebookData(searchText, cohort, track, options).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
+            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
              [paramKeys.pageSize]: pageSize,
              [paramKeys.userContains]: searchText,
              [paramKeys.cohortId]: cohort,
@@ -130,7 +130,7 @@ describe('lms service api', () => {
        ));
        test('loads null for excludedCorseRoles if includeCourseRoles', () => (
          api.fetch.gradebookData(searchText, cohort, track, options).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
+            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
              [paramKeys.pageSize]: pageSize,
              [paramKeys.userContains]: searchText,
              [paramKeys.cohortId]: cohort,
@@ -153,7 +153,7 @@ describe('lms service api', () => {
        });
        it('fetches from urls.bulkHistory and returns the data', () => (
          api.fetch.gradeBulkOperationHistory().then(url => {
-            expect(url).toEqual(urls.bulkHistory);
+            expect(url).toEqual(urls.getBulkHistoryUrl());
          })
        ));
      });
@@ -195,7 +195,7 @@ describe('lms service api', () => {
      });
      test('posts to urls.bulkUpdate with passed data', () => (
        api.updateGradebookData(updateData).then(({ data }) => {
-          expect(data).toEqual({ url: urls.bulkUpdate, data: updateData });
+          expect(data).toEqual({ url: urls.getBulkUpdateUrl(), data: updateData });
        })
      ));
    });
--- a/src/data/services/lms/urls.js
+++ b/src/data/services/lms/urls.js
@@ -1,59 +1,54 @@
+import { getConfig } from '@edx/frontend-platform';
 import { StrictDict } from 'utils';
-import { configuration } from 'config';
 import { historyRecordLimit } from './constants';
 import { filterQuery, stringifyUrl } from './utils';

-const baseUrl = `${configuration.LMS_BASE_URL}`;
-
 const courseId = window.location.pathname.split('/').filter(Boolean).pop() || '';

-const api = `${baseUrl}/api/`;
-const bulkGrades = `${api}bulk_grades/course/${courseId}/`;
-const enrollment = `${api}enrollment/v1/`;
-const grades = `${api}grades/v1/`;
-const gradebook = `${grades}gradebook/${courseId}/`;
-const bulkUpdate = `${gradebook}bulk-update`;
-const intervention = `${bulkGrades}intervention/`;
-
-const cohorts = `${baseUrl}/courses/${courseId}/cohorts/`;
-const tracks = `${enrollment}course/${courseId}?include_expired=1`;
-const bulkHistory = `${bulkGrades}history/`;
-
-const assignmentTypes = stringifyUrl(`${gradebook}grading-info`, { graded_only: true });
-const roles = stringifyUrl(`${enrollment}roles/`, { courseId });
-
+export const getUrlPrefix = () => `${getConfig().LMS_BASE_URL}/api/`;
+export const getBulkGradesUrl = () => `${getUrlPrefix()}bulk_grades/course/${courseId}/`;
+export const getEnrollmentUrl = () => `${getUrlPrefix()}enrollment/v1/`;
+export const getGradesUrl = () => `${getUrlPrefix()}grades/v1/`;
+export const getGradebookUrl = () => `${getGradesUrl()}gradebook/${courseId}/`;
+export const getBulkUpdateUrl = () => `${getGradebookUrl()}bulk-update`;
+export const getInterventionUrl = () => `${getBulkGradesUrl()}intervention/`;
+export const getCohortsUrl = () => `${getUrlPrefix()}courses/${courseId}/cohorts/`;
+export const getTracksUrl = () => `${getEnrollmentUrl()}course/${courseId}?include_expired=1`;
+export const getBulkHistoryUrl = () => `${getBulkUpdateUrl()}history/`;
+export const getAssignmentTypesUrl = () => stringifyUrl(`${getGradebookUrl()}grading-info`, { graded_only: true });
+export const getRolesUrl = () => stringifyUrl(`${getEnrollmentUrl()}roles/`, { courseId });
 /**
 * bulkGradesUrlByCourseAndRow(courseId, rowId)
 * returns the bulkGrades url with the given rowId.
 * @param {string} rowId - row/error identifier
 * @return {string} - bulk grades fetch url
 */
-export const bulkGradesUrlByRow = (rowId) => stringifyUrl(bulkGrades, { error_id: rowId });
+export const bulkGradesUrlByRow = (rowId) => stringifyUrl(getBulkGradesUrl(), { error_id: rowId });

-export const gradeCsvUrl = (options = {}) => stringifyUrl(bulkGrades, filterQuery(options));
+export const gradeCsvUrl = (options = {}) => stringifyUrl(getBulkGradesUrl(), filterQuery(options));

 export const interventionExportCsvUrl = (options = {}) => (
-  stringifyUrl(intervention, filterQuery(options))
+  stringifyUrl(getInterventionUrl(), filterQuery(options))
 );

 export const sectionOverrideHistoryUrl = (subsectionId, userId) => stringifyUrl(
-  `${grades}subsection/${subsectionId}/`,
+  `${getGradesUrl()}subsection/${subsectionId}/`,
  { user_id: userId, history_record_limit: historyRecordLimit },
 );

 export default StrictDict({
-  assignmentTypes,
-  bulkGrades,
-  bulkHistory,
-  bulkUpdate,
-  cohorts,
-  enrollment,
-  grades,
-  gradebook,
-  intervention,
-  roles,
-  tracks,
-
+  getUrlPrefix,
+  getBulkGradesUrl,
+  getEnrollmentUrl,
+  getGradesUrl,
+  getGradebookUrl,
+  getBulkUpdateUrl,
+  getInterventionUrl,
+  getCohortsUrl,
+  getTracksUrl,
+  getBulkHistoryUrl,
+  getAssignmentTypesUrl,
+  getRolesUrl,
  bulkGradesUrlByRow,
  gradeCsvUrl,
  interventionExportCsvUrl,
--- a/src/data/services/lms/urls.test.js
+++ b/src/data/services/lms/urls.test.js
@@ -17,7 +17,7 @@ describe('lms api url methods', () => {
    it('returns bulkGrades url with error_id', () => {
      const id = 'heyo';
      expect(bulkGradesUrlByRow(id)).toEqual(
-        utils.stringifyUrl(urls.bulkGrades, { error_id: id }),
+        utils.stringifyUrl(urls.getBulkGradesUrl(), { error_id: id }),
      );
    });
  });
@@ -25,12 +25,12 @@ describe('lms api url methods', () => {
    it('returns bulkGrades with filterQuery-loaded options as query', () => {
      const options = { some: 'fun', query: 'options' };
      expect(gradeCsvUrl(options)).toEqual(
-        utils.stringifyUrl(urls.bulkGrades, utils.filterQuery(options)),
+        utils.stringifyUrl(urls.getBulkGradesUrl(), utils.filterQuery(options)),
      );
    });
    it('defaults options to empty object', () => {
      expect(gradeCsvUrl()).toEqual(
-        utils.stringifyUrl(urls.bulkGrades, utils.filterQuery({})),
+        utils.stringifyUrl(urls.getBulkGradesUrl(), utils.filterQuery({})),
      );
    });
  });
@@ -38,12 +38,12 @@ describe('lms api url methods', () => {
    it('returns intervention url with filterQuery-loaded options as query', () => {
      const options = { some: 'fun', query: 'options' };
      expect(interventionExportCsvUrl(options)).toEqual(
-        utils.stringifyUrl(urls.intervention, utils.filterQuery(options)),
+        utils.stringifyUrl(urls.getInterventionUrl(), utils.filterQuery(options)),
      );
    });
    it('defaults options to empty object', () => {
      expect(interventionExportCsvUrl()).toEqual(
-        utils.stringifyUrl(urls.intervention, utils.filterQuery({})),
+        utils.stringifyUrl(urls.getInterventionUrl(), utils.filterQuery({})),
      );
    });
  });
@@ -53,7 +53,7 @@ describe('lms api url methods', () => {
      const userId = 'Tom';
      expect(sectionOverrideHistoryUrl(subsectionId, userId)).toEqual(
        utils.stringifyUrl(
-          `${urls.grades}subsection/${subsectionId}/`,
+          `${urls.getGradesUrl()}subsection/${subsectionId}/`,
          { user_id: userId, history_record_limit: historyRecordLimit },
        ),
      );
--- a/src/data/store.js
+++ b/src/data/store.js
@@ -4,19 +4,19 @@ import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProductio
 import { createLogger } from 'redux-logger';
 import { createMiddleware } from 'redux-beacon';
 import Segment from '@redux-beacon/segment';
+import { getConfig } from '@edx/frontend-platform';

 import actions from './actions';
 import selectors from './selectors';
 import reducers from './reducers';
 import eventsMap from './services/segment/mapping';
-import { configuration } from '../config';

 export const createStore = () => {
  const loggerMiddleware = createLogger();

  const middleware = [thunkMiddleware, loggerMiddleware];
  // Conditionally add the segmentMiddleware only if the SEGMENT_KEY environment variable exists.
-  if (configuration.SEGMENT_KEY) {
+  if (getConfig().SEGMENT_KEY) {
    middleware.push(createMiddleware(eventsMap, Segment()));
  }
  const store = redux.createStore(
--- a/src/data/store.test.js
+++ b/src/data/store.test.js
@@ -4,12 +4,12 @@ import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProductio
 import { createLogger } from 'redux-logger';
 import { createMiddleware } from 'redux-beacon';
 import Segment from '@redux-beacon/segment';
+import { getConfig } from '@edx/frontend-platform';

 import actions from './actions';
 import selectors from './selectors';
 import reducers from './reducers';
 import eventsMap from './services/segment/mapping';
-import { configuration } from '../config';

 import exportedStore, { createStore } from './store';

@@ -22,10 +22,10 @@ jest.mock('redux-logger', () => ({
  createLogger: () => 'logger',
 }));
 jest.mock('redux-thunk', () => 'thunkMiddleware');
-jest.mock('../config', () => ({
-  configuration: {
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
    SEGMENT_KEY: 'a-fake-segment-key',
-  },
+  })),
 }));
 jest.mock('redux-beacon', () => ({
  createMiddleware: jest.fn((map, model) => ({ map, model })),
@@ -60,9 +60,9 @@ describe('store aggregator module', () => {
        });
      });
      describe('if no SEGMENT_KEY', () => {
-        const key = configuration.SEGMENT_KEY;
+        const key = getConfig().SEGMENT_KEY;
        beforeEach(() => {
-          configuration.SEGMENT_KEY = false;
+          getConfig.mockImplementation(() => ({ SEGMENT_KEY: false }));
        });
        it('exports thunk and logger middleware, composed and applied with dev tools', () => {
          expect(createStore().middleware).toEqual(
@@ -70,7 +70,7 @@ describe('store aggregator module', () => {
          );
        });
        afterEach(() => {
-          configuration.SEGMENT_KEY = key;
+          getConfig.mockImplementation(() => ({ SEGMENT_KEY: key }));
        });
      });
    });
--- a/src/head/Head.jsx
+++ b/src/head/Head.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['gradebook.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
--- a/src/head/Head.test.jsx
+++ b/src/head/Head.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Gradebook | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
--- a/src/head/messages.js
+++ b/src/head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'gradebook.page.title': {
+    id: 'gradebook.page.title',
+    defaultMessage: 'Gradebook | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 import {
  APP_READY,
  initialize,
+  mergeConfig,
  subscribe,
 } from '@edx/frontend-platform';
 import { messages as headerMessages } from '@edx/frontend-component-header';
@@ -20,6 +21,22 @@ subscribe(APP_READY, () => {
 });

 initialize({
+  handlers: {
+    config: () => {
+      mergeConfig({
+        BASE_URL: process.env.BASE_URL,
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+        REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+        DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+        SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+        SEGMENT_KEY: process.env.SEGMENT_KEY,
+        ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+      });
+    },
+  },
  messages: [
    appMessages,
    headerMessages,
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import {
  APP_READY,
  initialize,
+  mergeConfig,
  subscribe,
 } from '@edx/frontend-platform';
 import { messages as headerMessages } from '@edx/frontend-component-header';
@@ -19,6 +20,7 @@ jest.mock('react-dom', () => ({
 jest.mock('@edx/frontend-platform', () => ({
  APP_READY: 'app-is-ready-key',
  initialize: jest.fn(),
+  mergeConfig: jest.fn(),
  subscribe: jest.fn(),
 }));
 jest.mock('@edx/frontend-component-header', () => ({
@@ -46,10 +48,23 @@ describe('app registry', () => {
      ReactDOM.render(<App />, document.getElementById('root')),
    );
  });
-  test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
+  test('initialize is called with requireAuthenticatedUser, messages, and a config handler', () => {
    expect(initialize).toHaveBeenCalledWith({
      messages: [appMessages, headerMessages, footerMessages],
      requireAuthenticatedUser: true,
+      handlers: {
+        config: expect.any(Function),
+      },
    });
  });
+  test('initialize config loads LMS_BASE_URL from env', () => {
+    const oldEnv = process.env;
+    const initializeArg = initialize.mock.calls[0][0];
+    process.env = { ...oldEnv, LMS_BASE_URL: 'http://example.com/fake' };
+    initializeArg.handlers.config();
+    expect(mergeConfig).toHaveBeenCalledWith(
+      expect.objectContaining({ LMS_BASE_URL: 'http://example.com/fake' }),
+    );
+    process.env = oldEnv;
+  });
 });
--- a/src/segment.js
+++ b/src/segment.js
@@ -1,6 +1,6 @@
 // The code in this file is from Segment's website:
 // https://segment.com/docs/sources/website/analytics.js/quickstart/
-import { configuration } from './config';
+import { getConfig } from '@edx/frontend-platform';

 (function () {
  // Create a queue, but don't obliterate an existing one!
@@ -81,5 +81,5 @@ import { configuration } from './config';

  // Load Analytics.js with your key, which will automatically
  // load the tools you've enabled for your account. Boosh!
-  analytics.load(configuration.SEGMENT_KEY);
+  analytics.load(getConfig().SEGMENT_KEY);
 }());
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -8,6 +8,8 @@ Enzyme.configure({ adapter: new Adapter() });
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.SITE_NAME = 'localhost';
+process.env.FAVICON_URL = 'http://localhost:18000/favicon.ico';

 jest.mock('@edx/frontend-platform/i18n', () => {
  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
--- a/src/testUtils.js
+++ b/src/testUtils.js
@@ -0,0 +1,187 @@
+import react from 'react';
+
+import { StrictDict } from 'utils';
+
+/**
+ * Mocked formatMessage provided by react-intl
+ */
+export const formatMessage = (msg, values) => {
+  let message = msg.defaultMessage;
+  if (values === undefined) {
+    return message;
+  }
+  Object.keys(values).forEach((key) => {
+    // eslint-disable-next-line
+    message = message.replace(`{${key}}`, values[key]);
+  });
+  return message;
+};
+
+/**
+ * Mock a single component, or a nested component so that its children render nicely
+ * in snapshots.
+ * @param {string} name - parent component name
+ * @param {obj} contents - object of child components with intended component
+ *   render name.
+ * @return {func} - mock component with nested children.
+ *
+ * usage:
+ *   mockNestedComponent('Card', { Body: 'Card.Body', Form: { Control: { Feedback: 'Form.Control.Feedback' }}... });
+ *   mockNestedComponent('IconButton', 'IconButton');
+ */
+export const mockNestedComponent = (name, contents) => {
+  if (typeof contents !== 'object') {
+    return contents;
+  }
+  const fn = () => name;
+  Object.defineProperty(fn, 'name', { value: name });
+  Object.keys(contents).forEach((nestedName) => {
+    const value = contents[nestedName];
+    fn[nestedName] = typeof value !== 'object'
+      ? value
+      : mockNestedComponent(`${name}.${nestedName}`, value);
+  });
+  return fn;
+};
+
+/**
+ * Mock a module of components.  nested components will be rendered nicely in snapshots.
+ * @param {obj} mapping - component module mock config.
+ * @return {obj} - module of flat and nested components that will render nicely in snapshots.
+ * usage:
+ *   mockNestedComponents({
+ *     Card: { Body: 'Card.Body' },
+ *     IconButton: 'IconButton',
+ *   })
+ */
+export const mockNestedComponents = (mapping) => Object.entries(mapping).reduce(
+  (obj, [name, value]) => ({
+    ...obj,
+    [name]: mockNestedComponent(name, value),
+  }),
+  {},
+);
+
+/**
+ * Mock utility for working with useState in a hooks module.
+ * Expects/requires an object containing the state object in order to ensure
+ * the mock behavior works appropriately.
+ *
+ * Expected format:
+ *   hooks = { state: { <key>: (val) => React.createRef(val), ... } }
+ *
+ * Returns a utility for mocking useState and providing access to specific state values
+ * and setState methods, as well as allowing per-test configuration of useState value returns.
+ *
+ * Example usage:
+ *   // hooks.js
+ *   import * as module from './hooks';
+ *   const state = {
+ *     isOpen: (val) => React.useState(val),
+ *     hasDoors: (val) => React.useState(val),
+ *     selected: (val) => React.useState(val),
+ *   };
+ *   ...
+ *   export const exampleHook = () => {
+ *     const [isOpen, setIsOpen] = module.state.isOpen(false);
+ *     if (!isOpen) { return null; }
+ *     return { isOpen, setIsOpen };
+ *   }
+ *   ...
+ *
+ *   // hooks.test.js
+ *   import * as hooks from './hooks';
+ *   const state = new MockUseState(hooks)
+ *   ...
+ *   describe('state hooks', () => {
+ *     state.testGetter(state.keys.isOpen);
+ *     state.testGetter(state.keys.hasDoors);
+ *     state.testGetter(state.keys.selected);
+ *   });
+ *   describe('exampleHook', () => {
+ *     beforeEach(() => { state.mock(); });
+ *     it('returns null if isOpen is default value', () => {
+ *       expect(hooks.exampleHook()).toEqual(null);
+ *     });
+ *     it('returns isOpen and setIsOpen if isOpen is not null', () => {
+ *       state.mockVal(state.keys.isOpen, true);
+ *       expect(hooks.exampleHook()).toEqual({
+ *         isOpen: true,
+ *         setIsOpen: state.setState[state.keys.isOpen],
+ *       });
+ *     });
+ *     afterEach(() => { state.restore(); });
+ *   });
+ *
+ * @param {obj} hooks - hooks module containing a 'state' object
+ */
+export class MockUseState {
+  constructor(hooks) {
+    this.hooks = hooks;
+    this.oldState = null;
+    this.setState = {};
+    this.stateVals = {};
+
+    this.mock = this.mock.bind(this);
+    this.restore = this.restore.bind(this);
+    this.mockVal = this.mockVal.bind(this);
+    this.testGetter = this.testGetter.bind(this);
+  }
+
+  /**
+   * @return {object} - StrictDict of state object keys
+   */
+  get keys() {
+    return StrictDict(Object.keys(this.hooks.state).reduce(
+      (obj, key) => ({ ...obj, [key]: key }),
+      {},
+    ));
+  }
+
+  /**
+   * Replace the hook module's state object with a mocked version, initialized to default values.
+   */
+  mock() {
+    this.oldState = this.hooks.state;
+    Object.keys(this.keys).forEach(key => {
+      this.hooks.state[key] = jest.fn(val => {
+        this.stateVals[key] = val;
+        return [val, this.setState[key]];
+      });
+    });
+    this.setState = Object.keys(this.keys).reduce(
+      (obj, key) => ({
+        ...obj,
+        [key]: jest.fn(val => {
+          this.hooks.state[key] = val;
+        }),
+      }),
+      {},
+    );
+  }
+
+  /**
+   * Restore the hook module's state object to the actual code.
+   */
+  restore() {
+    this.hooks.state = this.oldState;
+  }
+
+  /**
+   * Mock the state getter associated with a single key to return a specific value one time.
+   * @param {string} key - state key (from this.keys)
+   * @param {any} val - new value to be returned by the useState call.
+   */
+  mockVal(key, val) {
+    this.hooks.state[key].mockReturnValueOnce([val, this.setState[key]]);
+  }
+
+  testGetter(key) {
+    test(`${key} state getter should return useState passthrough`, () => {
+      const testValue = 'some value';
+      const useState = (val) => ({ useState: val });
+      jest.spyOn(react, 'useState').mockImplementationOnce(useState);
+      expect(this.hooks.state[key](testValue)).toEqual(useState(testValue));
+    });
+  }
+}
--- a/src/utils/StrictDict.js
+++ b/src/utils/StrictDict.js
@@ -4,6 +4,10 @@ const strictGet = (target, name) => {
    return target;
  }

+  if (name === '$$typeof') {
+    return typeof target;
+  }
+
  if (name in target || name === '_reactFragment') {
    return target[name];
  }
--- a/src/utils/StrictDict.test.js
+++ b/src/utils/StrictDict.test.js
@@ -45,6 +45,9 @@ describe('StrictDict', () => {
  it('allows entry listing', () => {
    expect(Object.entries(dict)).toEqual(Object.entries(rawDict));
  });
+  it('allows $$typeof access', () => {
+    expect(dict.$$typeof).toEqual(typeof rawDict);
+  });
  describe('missing key', () => {
    it('logs error with target, name, and error stack', () => {
      // eslint-ignore-next-line no-unused-vars
Author	SHA1	Message	Date
Ghassan Maslamani	ff4d0c75dd	feat: ensure lms api synced with latest value in config This change make it possible if LMS url to be changed, that the last value will be picked. This is simlair openedx/frontend-app-course-authoring/pull/389 which issue overhangio/tutor-mfe/issues/86, the fixes is needed so that dynamic config would work with tutor: overhangio/tutor-mfe/pull/69	2022-12-08 18:22:27 +00:00
Kyle McCormick	c4846f9ebd	fix: use getConfig in order to support runtime configuration (#286 ) (#287 ) Before, gradebook was reading config from `process.env` directly, which locked the app into using only static (build-time) configuration. In order to enable dynamic (runtime) configuration, we update gradebook to use frontend-platform's standard configuration interface: `mergeConfig()` and `getConfig()`. Bumps version from 1.5.0 to 1.6.0. (I would normally just do a patch release for a fix, but the version was hasn't been bumped for a while, so adding in full runtime configuration support seemed like it warranted a proper minor version bump.) Co-authored-by: Ghassan Maslamani <ghassan.maslamani@gmail.com>	2022-11-28 12:06:02 -05:00
Diana Olarte	bccd87fd49	feat: allow runtime configuration (#253 ) Allows frontend-app-gradebook to be configured at runtime using the LMS's new MFE Configuration API. Part of https://github.com/openedx/frontend-wg/issues/103	2022-11-14 20:35:54 +00:00
Simon Chen	03fa143fc1	Merge pull request #266 from fennec-tech/rtl-use-backslash-to-write-fractions RTL: use backslash to write fractions (grades)	2022-09-29 15:02:24 -04:00
Simon Chen	075846f869	Merge pull request #265 from fennec-tech/rtl-fix-percentage-direction RTL: fix (%) symbol to follow text direction	2022-09-29 14:49:14 -04:00
Abderraouf Mehdi Bouhali	1208d27d92	fix(rtl): use backslash to write fractions (grades)	2022-09-29 11:34:30 +01:00
Abderraouf Mehdi Bouhali	e345716bd4	fix(rtl): force % symbol to follow text direction	2022-09-29 10:11:26 +01:00
Maman Khan	2121a63c83	Removing codecov and coveralls packages (#245 ) * fix: removed coveralls and codecov packages with update in ci uploader * fix: pinning npm to version 8.5.x Co-authored-by: Abdullah Waheed <abdullah.waheed@arbisoft.com>	2022-09-28 10:47:57 -04:00
Matt Hughes	47cab71b3c	fix: do not squish the table with word wrapping we should handle word wrapping down at the level of specific cells which we can opt-in to non-default word-wrapping	2022-07-12 10:54:00 -04:00
Leangseu Kim	2d8af2ec00	fix: update and resolve dependencies	2022-07-07 13:23:23 -04:00
Leangseu Kim	d55abbe91e	fix: search blur state for every single charater input	2022-07-07 10:05:35 -04:00
Abdullah Waheed	a75f365bdd	refactor: migrated StatusAlert to Alert in GradesBook component refactor: migrated StatusAlert to Alert in StatusAlerts component refactor: updated unit tests mocks to set snapshot issues	2022-06-30 21:35:01 -04:00
Muhammad Abdullah Waheed	bbb7e895a5	Paragon table deprecation updation (#246 ) * refactor: updated table deprecation of HistoryTable * refactor: updated table deprecation of OverrideTable * refactor: updated table deprecation of GradebookTable * refactor: updated unit tests of OverrideTable according to new changes * fix: error for css * fix: strict dictionary error for react component * chore: update css and handle syntax errors * chore: update unit test * fix: remove datatable row status and update tests * fix: test coverage Co-authored-by: Leangseu Kim <lkim@edx.org> Co-authored-by: Ben Warzeski <bwarzeski@edx.org>	2022-06-30 14:22:29 -04:00
Muhammad Abdullah Waheed	bf70fd1450	fix: added specific npm version to fix peerDependency issue (#247 )	2022-06-16 15:06:30 +05:00