build(deps): bump on-headers and compression

Bumps [on-headers](https://github.com/jshttp/on-headers) and [compression](https://github.com/expressjs/compression). These dependencies needed to be updated together.

Updates `on-headers` from 1.0.2 to 1.1.0
- [Release notes](https://github.com/jshttp/on-headers/releases)
- [Changelog](https://github.com/jshttp/on-headers/blob/master/HISTORY.md)
- [Commits](https://github.com/jshttp/on-headers/compare/v1.0.2...v1.1.0)

Updates `compression` from 1.8.0 to 1.8.1
- [Release notes](https://github.com/expressjs/compression/releases)
- [Changelog](https://github.com/expressjs/compression/blob/master/HISTORY.md)
- [Commits](https://github.com/expressjs/compression/compare/1.8.0...v1.8.1)

---
updated-dependencies:
- dependency-name: on-headers
  dependency-version: 1.1.0
  dependency-type: indirect
- dependency-name: compression
  dependency-version: 1.8.1
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.env

@@ -34,3 +34,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
 DISPLAY_FEEDBACK_WIDGET='true'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/login'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -41,3 +40,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 DISPLAY_FEEDBACK_WIDGET='false'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.eslintrc.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/renovate.json

@@ -0,0 +1,33 @@
+{
+    "extends": [
+      "config:base",
+      "schedule:weekly",
+      ":automergeLinters",
+      ":automergeMinor",
+      ":automergeTesters",
+      ":enableVulnerabilityAlerts",
+      ":rebaseStalePrs",
+      ":semanticCommits",
+      ":updateNotScheduled"
+    ],
+    "packageRules": [
+      {
+        "matchDepTypes": [
+          "devDependencies"
+        ],
+        "matchUpdateTypes": [
+          "lockFileMaintenance",
+          "minor",
+          "patch",
+          "pin"
+        ],
+        "automerge": true
+      },
+      {
+        "matchPackagePatterns": ["@edx", "@openedx"],
+        "matchUpdateTypes": ["minor", "patch"],
+        "automerge": true
+      }
+    ],
+    "timezone": "America/New_York"
+  }

.github/workflows/ci.yml

@@ -10,19 +10,16 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
-
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      uses: actions/checkout@v4
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -43,11 +40,14 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
 
     - name: Send failure notification
       if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
+      uses: dawidd6/action-send-mail@v6
       with:
         server_address: email-smtp.us-east-1.amazonaws.com
         server_port: 465

.github/workflows/lockfileversion-check.yml

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

.github/workflows/npm-publish.yml

@@ -1,36 +0,0 @@
-name: Release CI
-on:
-  push:
-    tags:
-      - '*'
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Setup Nodejs Env
-        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ env.NODE_VER }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create Build
-        run: npm run build
-
-      - name: Release Package
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-        run: npm semantic-release

.gitignore

@@ -23,3 +23,5 @@ temp/babel-plugin-react-intl
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages/

.nvmrc

@@ -1 +1 @@
-18.15
+20

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

.tx/config

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

Makefile

@@ -1,15 +1,11 @@
 npm-install-%: ## install specified % npm package
 	npm ci $* --save-dev
 	git add package.json
-export TRANSIFEX_RESOURCE = frontend-app-gradebook
-transifex_langs = "ar,de,es_419,fa_IR,fr,fr_CA,hi,it,pt,ru,uk,zh_CN"
 
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-formatjs
@@ -39,27 +35,7 @@ i18n.concat:
 
 extract_translations: | requirements i18n.extract i18n.concat
 
-# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-detect_changed_source_translations:
-	# Checking for changed translations...
-	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
 # Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
@@ -73,7 +49,6 @@ pull_translations:
 	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
 
 	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-gradebook
-endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -18,8 +18,8 @@ Jump to:
 
 For existing documentation see:
 
-- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
-- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#override-learner-subsection-scores-in-bulk)
+- Basic Usage: [Review Learner Grades (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/view_learner_grades.html)
+- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#override-learner-subsection-scores-in-bulk)
 
 ## Should I use Gradebook in my course?
 
@@ -58,62 +58,67 @@ To install gradebook into your project:
 ```
 npm i --save @edx/frontend-app-gradebook
 ```
+
 Cloning and Startup
 ===================
 
 1. Clone your new repo:
 
-  ``git clone https://github.com/openedx/frontend-app-gradebook.git``
+   ``git clone https://github.com/openedx/frontend-app-gradebook.git``
 
-2. Install npm dependencies:
+2. Use the version of Node specified in ``.nvmrc``
 
-  ``cd frontend-app-gradebook && npm install``
+3. Stop the Tutor devstack, if it's running:
 
-3. Start the dev server:
+   ``tutor dev stop``
 
-  ``npm start``
+4. Next, we need to tell Tutor that we're going to be running this repo in development mode, and it should be excluded from the mfe container that otherwise runs every MFE. Run this:
+
+   ``tutor mounts add /path/to/frontend-app-gradebook``
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start the
+   Gradebook MFE, which we're going to run on the host instead of in a container
+   managed by Tutor. Run:
+
+   ``tutor dev start lms cms mfe``
+
+## Startup
+
+1. Install npm dependencies:
+
+   ``cd frontend-app-gradebook && npm install``
+
+2. Start the dev server:
+
+   ``npm run dev``
 
 ## Running the UI Standalone
 
-To install the project please refer to the [`edX Developer Stack`](https://github.com/openedx/devstack) instructions.
+To install the project please refer to the [`MFE Development on Tutor`](https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development) instructions.
 
-The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+When not mounted, gradebook will run in the shared MFE container at http://apps.local.openedx.io/gradebook/course-v1:edX+DemoX+Demo_Course.
 
-If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
+When mounted in the tutor ``gradebook`` container, or when running a local (host) webpack dev server, the web application runs on port **1994**, so when you go to `http://apps.local.openedx.io:1994/gradebook/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+
+(Note: This may not work in Tutor; these instructions are for the deprecated Devstack) You can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
 
 Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
 
-## Configuring for local use in edx-platform
+## Plugins
+This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework).
 
-Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
-to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
-```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
-```
-
-There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
-
-1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
-check the ``enabled`` and ``enabled for all courses`` boxes.
-
-2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
-
-3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
-    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
-    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
-
-    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
-
-**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
-numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
-recalculated grade values, verify you've set all flags correctly.
+The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots).
 
 ## Running tests
 
-1. Assuming that you're operating in the context of the edX devstack,
-run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
-running gradebook container.
-2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
+Run:
+
+``nvm use``
+
+``npm ci``
+
+``npm test``
 
 ## Directory Structure
 
@@ -146,9 +151,7 @@ noted.
 Contributing
 ============
 
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
+Contributions are very welcome.  Please read [How To Contribute](https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html) for details.
 
 This project is currently accepting all types of contributions, bug fixes,
 security fixes, maintenance work, or new features.  However, please make sure
@@ -163,29 +166,23 @@ Getting Help
 If you're having trouble, we have discussion forums at
 https://discuss.openedx.org where you can connect with others in the community.
 
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
+Our real-time conversations are on Slack. You can request a [Slack
+invitation](https://openedx.org/slack), then join our 
+[community Slack workspace](https://openedx.slack.com/)  Because this is a
+frontend repository, the best place to discuss it would be in the 
+[#wg-frontend channel](https://openedx.slack.com/archives/C04BM6YC7A6).
 
 For anything non-trivial, the best path is to open an issue in this repository
 with as many details about the issue you are facing as you can provide.
 
 https://github.com/openedx/frontend-app-gradebook/issues
 
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
+For more information about these options, see the [Getting Help](https://openedx.org/community/connect) page.
 
 The Open edX Code of Conduct
 ============================
 
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+All community members are expected to follow the [Open edX Code of Conduct](https://openedx.org/code-of-conduct/).
 
 Reporting Security Issues
 =========================

babel.config.js

@@ -1,3 +1,3 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('babel');

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-app-gradebook"
+  description: "The frontend (MFE) for Open edX Gradebook"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
+spec:
+  owner: user:farhaanbukhsh
+  type: 'website'
+  lifecycle: 'experimental'

documentation/testing/test-setup.md

@@ -4,15 +4,15 @@ Instructions for setting up environments and data for testing Gradebook.
 
 ## Set up a course with graded content
 
-A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/index.html) for notes on how to develop a course from scratch.
+A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html) for notes on how to develop a course from scratch.
 
 Notably, the course needs a grading policy and subsections with scoreable content.
 After creating subsections with content, they need to be configured with an "Assignment Type" to be included in grading.
 
 Suggested resources:
-- [Establishing a Grading Policy For Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)
+- [Establishing a Grading Policy For Your Course](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#review-how-grading-is-configured-for-your-course)
+- [Adding Exercises and Tools](https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_problems_exercises_tools.html)
+- [Set the Assignment Type and Due Date for a Subsection](https://docs.openedx.org/en/latest/educators/how-tos/course_development/set_subsection_problem_date.html#set-the-assignment-type-and-due-date-for-a-subsection)
 
 ## Enable Gradebook for course
 
@@ -35,7 +35,7 @@ Bulk Management is an added feature to allow modifying grades in bulk via CSV up
 
 ## Create a Master's track for testing Master's-only features
 
-[source](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
+[source - note: possibly outdated, edx.org-specific](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
 
 Add a Master's track in your course:
 - As an admin user, go to Django Admin (`{lms-url}/admin`) > Course Modes and add a new course mode

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [

openedx.yaml

@@ -1,9 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-tags:
-  - frontend-app
-  - masters
-oeps:
-  oep-2: true    # Repository metadata
-openedx-release: {ref: master}

package.json

@@ -15,6 +15,7 @@
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/gradebook/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "watch-tests": "jest --watch"
   },
@@ -29,17 +30,18 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.2.0",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.5.4",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.4.0",
+    "@edx/frontend-platform": "^8.3.7",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "20.45.0",
-    "@edx/react-unit-test-utils": "1.7.1",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.5",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/paragon": "^23.4.5",
     "@redux-beacon/segment": "^1.0.0",
     "@reduxjs/toolkit": "^1.5.1",
     "classnames": "^2.2.6",
@@ -49,8 +51,8 @@
     "history": "4.10.1",
     "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.9",
     "react-router": "6.15.0",
@@ -67,19 +69,15 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "13.0.1",
-    "@testing-library/react": "12.1.5",
-    "axios": "0.21.2",
-    "axios-mock-adapter": "^1.17.0",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/react": "^16.2.0",
     "es-check": "^2.3.0",
-    "fetch-mock": "^6.5.2",
-    "husky": "2.7.0",
+    "fetch-mock": "^12.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
     "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.3",
-    "semantic-release": "^19.0.3"
+    "redux-mock-store": "^1.5.3"
   }
 }

src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';
 
 import store from 'data/store';
@@ -24,7 +24,7 @@ const App = () => (
           />
         </Routes>
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
     </div>
   </AppProvider>
 );

src/App.scss

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";

src/App.test.jsx

@@ -3,8 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { Route } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
-
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
@@ -18,13 +16,12 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');
 jest.mock('./head/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 let secondChild;
 
@@ -34,7 +31,6 @@ describe('App router component', () => {
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
       secondChild = el.instance.children;
     });
@@ -63,8 +59,5 @@ describe('App router component', () => {
         expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(secondChild[1].findByType(Footer)[0].props.logo).toEqual(logo);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`App router component snapshot 1`] = `
         />
       </Routes>
     </main>
-    <Footer />
+    <FooterSlot />
   </div>
 </AppProvider>
 `;

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import messages from './messages';

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -12,7 +12,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
   FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Alert: () => 'Alert',
 }));
 jest.mock('data/selectors', () => ({

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,7 +9,7 @@ import { bulkManagementColumns } from 'data/constants/app';
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';
 
-jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+jest.mock('@openedx/paragon', () => ({ DataTable: () => 'DataTable' }));
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Hyperlink, Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Download } from '@edx/paragon/icons';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 import ResultsSummary from './ResultsSummary';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
   Icon: () => 'Icon',
 }));
-jest.mock('@edx/paragon/icons', () => ({
+jest.mock('@openedx/paragon/icons', () => ({
   Download: 'DownloadIcon',
 }));
 jest.mock('data/services/lms', () => ({

src/components/BulkManagementHistoryView/__snapshots__/HistoryTable.test.jsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
-Array [
-  Object {
+[
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -20,7 +20,7 @@ Array [
       Eifel
     </span>,
   },
-  Object {
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -45,26 +45,26 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
 <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,
@@ -73,8 +73,8 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
     ]
   }
   data={
-    Array [
-      Object {
+    [
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >
@@ -92,7 +92,7 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
           Eifel
         </span>,
       },
-      Object {
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >

src/components/BulkManagementHistoryView/__snapshots__/ResultsSummary.test.jsx.snap

@@ -4,8 +4,8 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
 <Hyperlink
   destination="www.edx.org"
   href={
-    Object {
-      "url": Object {
+    {
+      "url": {
         "rowId": 42,
       },
     }

src/components/EdxHeader/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 /**

src/components/EdxHeader/test.jsx

@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import Header from '.';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
 }));
 jest.mock('@edx/frontend-platform', () => ({

src/components/GradebookFilters/AssignmentFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilter component render snapshot 1`] = `
     label="Assignment"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import useAssignmentGradeFilterData from './hooks';
 import messages from '../messages';

src/components/GradebookFilters/AssignmentGradeFilter/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import PercentGroup from '../PercentGroup';
 import useAssignmentGradeFilterData from './hooks';

src/components/GradebookFilters/AssignmentTypeFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilterType component render snapshot 1`] = `
     label="Assignment Types"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/CourseGradeFilter/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';

src/components/GradebookFilters/CourseGradeFilter/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import PercentGroup from '../PercentGroup';
 import useCourseGradeFilterData from './hooks';

src/components/GradebookFilters/PercentGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const PercentGroup = ({
   id,

src/components/GradebookFilters/SelectGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const SelectGroup = ({
   id,

src/components/GradebookFilters/StudentGroupsFilter/__snapshots__/index.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Tracks"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Track-All"
         >
@@ -43,7 +43,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Cohorts"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Cohort-All"
         >

src/components/GradebookFilters/index.jsx

@@ -6,8 +6,8 @@ import {
   Icon,
   IconButton,
   Form,
-} from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';

src/components/GradebookFilters/index.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 
 import { formatMessage } from 'testUtils';
 

src/components/GradebookHeader/__snapshots__/index.test.jsx.snap

@@ -21,7 +21,9 @@ exports[`GradebookHeader component render default view shapshot 1`] = `
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>
@@ -49,7 +51,9 @@ exports[`GradebookHeader component render frozen grades snapshot: show frozen wa
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>
@@ -83,7 +87,9 @@ exports[`GradebookHeader component render show bulk management snapshot: show to
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
     <Button
@@ -117,7 +123,9 @@ exports[`GradebookHeader component render user cannot view gradebook snapshot: s
   <div
     className="subtitle-row d-flex justify-content-between align-items-center"
   >
-    <h2>
+    <h2
+      className="text-break"
+    >
       test-course-id
     </h2>
   </div>

src/components/GradebookHeader/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { instructorDashboardUrl } from 'data/services/lms/urls';
 import useGradebookHeaderData from './hooks';
@@ -26,7 +26,7 @@ export const GradebookHeader = () => {
       </a>
       <h1>{formatMessage(messages.gradebook)}</h1>
       <div className="subtitle-row d-flex justify-content-between align-items-center">
-        <h2>{courseId}</h2>
+        <h2 className="text-break">{courseId}</h2>
         {showBulkManagement && (
           <Button variant="tertiary" onClick={handleToggleViewClick}>
             {formatMessage(toggleViewMessage)}

src/components/GradebookHeader/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { formatMessage } from 'testUtils';
 import { instructorDashboardUrl } from 'data/services/lms/urls';

src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`BulkManagementControls render snapshot - show - network and import butt
 >
   <NetworkButton
     label={
-      Object {
+      {
         "defaultMessage": "Download Grades",
         "description": "A labeled button that allows an admin user to download course grades all at once (in bulk).",
         "id": "gradebook.GradesView.BulkManagementControls.bulkManagementLabel",

src/components/GradesView/EditModal/ModalHeaders.jsx

@@ -22,7 +22,7 @@ export const HistoryKeys = StrictDict({
  */
 export const ModalHeaders = () => {
   const { assignmentName, updateUserName } = selectors.app.useModalData();
-  const { currentGrade, originalGrade } = selectors.grades.useGradeData();
+  const { gradeOverrideCurrentEarnedGradedOverride, gradeOriginalEarnedGraded } = selectors.grades.useGradeData();
   const { formatMessage } = useIntl();
   return (
     <div>
@@ -39,12 +39,12 @@ export const ModalHeaders = () => {
       <HistoryHeader
         id={HistoryKeys.originalGrade}
         label={formatMessage(messages.originalGradeHeader)}
-        value={originalGrade}
+        value={gradeOriginalEarnedGraded}
       />
       <HistoryHeader
         id={HistoryKeys.currentGrade}
         label={formatMessage(messages.currentGradeHeader)}
-        value={currentGrade}
+        value={gradeOverrideCurrentEarnedGradedOverride}
       />
     </div>
   );

src/components/GradesView/EditModal/ModalHeaders.test.jsx

@@ -25,8 +25,8 @@ const modalData = {
 };
 selectors.app.useModalData.mockReturnValue(modalData);
 const gradeData = {
-  currentGrade: 'test-current-grade',
-  originalGrade: 'test-original-grade',
+  gradeOverrideCurrentEarnedGradedOverride: 'test-current-grade',
+  gradeOriginalEarnedGraded: 'test-original-grade',
 };
 selectors.grades.useGradeData.mockReturnValue(gradeData);
 
@@ -70,7 +70,7 @@ describe('ModalHeaders', () => {
       expect(headerProps).toMatchObject({
         id: HistoryKeys.originalGrade,
         label: formatMessage(messages.originalGradeHeader),
-        value: gradeData.originalGrade,
+        value: gradeData.gradeOriginalEarnedGraded,
       });
     });
     test('currentGrade header', () => {
@@ -78,7 +78,7 @@ describe('ModalHeaders', () => {
       expect(headerProps).toMatchObject({
         id: HistoryKeys.currentGrade,
         label: formatMessage(messages.currentGradeHeader),
-        value: gradeData.currentGrade,
+        value: gradeData.gradeOverrideCurrentEarnedGradedOverride,
       });
     });
   });

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useAdjustedGradeInputData from './hooks';
 

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useAdjustedGradeInputData from './hooks';
 import AdjustedGradeInput from '.';

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useReasonInputData from './hooks';
 

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useReasonInputData from './hooks';
 import ReasonInput from '.';

src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx

@@ -5,7 +5,7 @@ import useReasonInputData from './hooks';
 import ReasonInput, { controlTestId } from '.';
 
 jest.unmock('react');
-jest.unmock('@edx/paragon');
+jest.unmock('@openedx/paragon');
 jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
 
 const focus = jest.fn();

src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap

@@ -4,22 +4,22 @@ exports[`OverrideTable component render snapshot 1`] = `
 <DataTable
   columns="test-columns"
   data={
-    Array [
-      Object {
+    [
+      {
         "test": "data",
       },
-      Object {
+      {
         "andOther": "test-data",
       },
-      Object {
+      {
         "adjustedGrade": <AdjustedGradeInput />,
-        "date": Object {
+        "date": {
           "formatted": 2000-01-01T00:00:00.000Z,
         },
         "reason": <ReasonInput />,
       },
     ]
   }
-  itemCount={2}
+  itemCount={3}
 />
 `;

src/components/GradesView/EditModal/OverrideTable/hooks.js

@@ -9,7 +9,7 @@ const useOverrideTableData = () => {
   const { formatMessage } = useIntl();
 
   const hide = selectors.grades.useHasOverrideErrors();
-  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults;
+  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults || [];
   const tableProps = {};
   if (!hide) {
     tableProps.columns = [

src/components/GradesView/EditModal/OverrideTable/index.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
 import React from 'react';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { formatDateForDisplay } from 'utils';
 
@@ -20,18 +20,20 @@ export const OverrideTable = () => {
 
   if (hide) { return null; }
 
+  const tableData = [
+    ...data,
+    {
+      adjustedGrade: <AdjustedGradeInput />,
+      date: formatDateForDisplay(new Date()),
+      reason: <ReasonInput />,
+    },
+  ];
+
   return (
     <DataTable
       columns={columns}
-      data={[
-        ...data,
-        {
-          adjustedGrade: <AdjustedGradeInput />,
-          date: formatDateForDisplay(new Date()),
-          reason: <ReasonInput />,
-        },
-      ]}
-      itemCount={data.length}
+      data={tableData}
+      itemCount={tableData.length}
     />
   );
 };

src/components/GradesView/EditModal/OverrideTable/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { formatDateForDisplay } from 'utils';
 

src/components/GradesView/EditModal/index.jsx

@@ -5,7 +5,7 @@ import {
   Alert,
   ModalDialog,
   ActionRow,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import OverrideTable from './OverrideTable';

src/components/GradesView/EditModal/index.test.jsx

@@ -4,7 +4,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 import {
   ActionRow,
   ModalDialog,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { formatMessage } from 'testUtils';

src/components/GradesView/FilterBadges/FilterBadge.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux/hooks';

src/components/GradesView/FilterBadges/FilterBadge.test.jsx

@@ -3,11 +3,11 @@ import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { formatMessage } from 'testUtils';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { selectors } from 'data/redux/hooks';
 import FilterBadge from './FilterBadge';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Button: () => 'Button',
 }));
 jest.mock('data/redux/hooks', () => ({

src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap

@@ -19,8 +19,8 @@ exports[`FilterBadge render do not hide value snapshot 1`] = `
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],
@@ -55,8 +55,8 @@ exports[`FilterBadge render hide Value snapshot 1`] = `
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],

src/components/GradesView/FilterMenuToggle/__snapshots__/index.test.jsx.snap

@@ -7,6 +7,7 @@ exports[`FilterMenuToggle component render snapshot 1`] = `
   onClick={[MockFunction hooks.toggleFilterMenu]}
 >
   <Icon
+    className="mr-1"
     src="FilterAlt"
   />
    

src/components/GradesView/FilterMenuToggle/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Button, Icon } from '@edx/paragon';
+import { Button, Icon } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { FilterAlt } from '@edx/paragon/icons';
+import { FilterAlt } from '@openedx/paragon/icons';
 
 import { thunkActions } from 'data/redux/hooks';
 
@@ -21,7 +21,7 @@ export const FilterMenuToggle = () => {
       className="btn-primary align-self-start"
       onClick={toggleFilterMenu}
     >
-      <Icon src={FilterAlt} /> {formatMessage(messages.editFilters)}
+      <Icon src={FilterAlt} className="mr-1" /> {formatMessage(messages.editFilters)}
     </Button>
   );
 };

src/components/GradesView/FilteredUsersLabel/__snapshots__/index.test.jsx.snap

@@ -3,14 +3,14 @@
 exports[`FilteredUsersLabel component render snapshot 1`] = `
 <format-message-function
   message={
-    Object {
+    {
       "defaultMessage": "Showing {filteredUsers} of {totalUsers} total learners",
       "description": "Users visibility label",
       "id": "gradebook.GradesTab.usersVisibilityLabel",
     }
   }
   values={
-    Object {
+    {
       "filteredUsers": <BoldText
         text={100}
       />,

src/components/GradesView/GradebookTable/GradeButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { selectors, thunkActions } from 'data/redux/hooks';
 import transforms from 'data/redux/transforms';

src/components/GradesView/GradebookTable/LabelReplacements.jsx

@@ -5,7 +5,7 @@ import {
   Icon,
   OverlayTrigger,
   Tooltip,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { StrictDict } from 'utils';
 

src/components/GradesView/GradebookTable/LabelReplacements.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { getLocale } from '@edx/frontend-platform/i18n';
 
-import { OverlayTrigger } from '@edx/paragon';
+import { OverlayTrigger } from '@openedx/paragon';
 
 import LabelReplacements from './LabelReplacements';
 
@@ -12,7 +12,7 @@ const {
   MastersOnlyLabelReplacement,
 } = LabelReplacements;
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Icon: () => 'Icon',
   OverlayTrigger: () => 'OverlayTrigger',
   Tooltip: () => 'Tooltip',

src/components/GradesView/GradebookTable/__snapshots__/Fields.test.jsx.snap

@@ -28,32 +28,32 @@ exports[`Gradebook Table Fields Username with external_user_key snapshot 1`] = `
 `;
 
 exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
             "MyNameFromHere",
           ],
-          "props": Object {},
+          "props": {},
           "type": "div",
         },
-        Object {
-          "children": Array [
+        {
+          "children": [
             "My name from another land",
           ],
-          "props": Object {
+          "props": {
             "className": "student-key",
           },
           "type": "div",
         },
       ],
-      "props": Object {},
+      "props": {},
       "type": "div",
     },
   ],
-  "props": Object {
+  "props": {
     "className": "wrap-text-in-cell",
   },
   "type": "span",

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -32,7 +32,7 @@ exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -84,7 +84,7 @@ exports[`snapshot left to right overlay placement 1`] = `
     }
     placement="right"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -118,7 +118,7 @@ exports[`snapshot right to left overlay placement 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]

src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap

@@ -7,13 +7,13 @@ exports[`GradebookTable snapshot 1`] = `
   <DataTable
     RowStatusComponent={[MockFunction hooks.nullMethod]}
     columns={
-      Array [
+      [
         "some",
         "columns",
       ]
     }
     data={
-      Array [
+      [
         "some",
         "data",
       ]

src/components/GradesView/GradebookTable/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import useGradebookTableData from './hooks';
 

src/components/GradesView/GradebookTable/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import useGradebookTableData from './hooks';
 import GradebookTable from '.';

src/components/GradesView/GradesView.scss

@@ -46,6 +46,7 @@
 }
 .grade-history-header{
     float: left;
+    min-width: 170px;
 }
 
 .grade-history-assignment{
@@ -65,7 +66,7 @@
 .gradebook-container {
     width: 100%;
     overflow-x: auto;
-    height: 600px;
+    max-height: 600px;
     overflow-y: auto;
     position: relative;
 }
@@ -119,6 +120,37 @@ select#ScoreView.form-control {
     
     &:before {
         border-width: 0.4rem 0.4rem 0.4rem 0;
-        border-right-color: $black;
+        border-right-color: var(--pgn-color-black);
+    }
+}
+
+#edit-filters-btn {
+     @media (--pgn-size-breakpoint-max-width-xs) {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}
+
+.search-container {
+     @media (--pgn-size-breakpoint-max-width-xs) {
+        width: 100%;
+    }
+}
+
+.pgn__modal-body-content .pgn__data-table-layout-wrapper {
+    @media (--pgn-size-breakpoint-max-width-xs) {
+        clear: both;
+        padding: 1rem 0;
+    }
+}
+
+.page-gradebook {
+    position: relative;
+
+    .sidebar-container {
+        position: relative;
+    }
+    aside.sidebar {
+        overflow: auto;
     }
 }

src/components/GradesView/ImportGradesButton/__snapshots__/index.test.jsx.snap

@@ -41,7 +41,7 @@ exports[`ImportGradesButton component render snapshot 1`] = `
     className="import-grades-btn"
     import={true}
     label={
-      Object {
+      {
         "defaultMessage": "Import Grades",
         "description": "A labeled button to import grades in the BulkManagement Tab File Upload Form",
         "id": "gradebook.GradesView.importGradesBtnText",

src/components/GradesView/ImportGradesButton/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import NetworkButton from 'components/NetworkButton';
 import messages from './messages';

src/components/GradesView/ImportGradesButton/index.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import NetworkButton from 'components/NetworkButton';
 import useImportGradesButtonData from './hooks';

src/components/GradesView/ImportGradesButton/ref.test.jsx

@@ -5,7 +5,7 @@ import useImportGradesButtonData from './hooks';
 import ImportGradesButton from '.';
 
 jest.unmock('react');
-jest.unmock('@edx/paragon');
+jest.unmock('@openedx/paragon');
 jest.mock('components/NetworkButton', () => 'network-button');
 jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
 

src/components/GradesView/ImportSuccessToast/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Toast } from '@edx/paragon';
+import { Toast } from '@openedx/paragon';
 
 import useImportSuccessToastData from './hooks';
 

src/components/GradesView/InterventionsReport/__snapshots__/index.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`InterventionsReport component output snapshot 1`] = `
     </div>
     <NetworkButton
       label={
-        Object {
+        {
           "defaultMessage": "Download Interventions",
           "description": "The labeled button to download the Intervention report from the Grades View",
           "id": "gradebook.GradesView.InterventionsReport.downloadBtn",

src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap

@@ -4,7 +4,7 @@ exports[`PageButtons component render snapshot 1`] = `
 <div
   className="d-flex justify-content-center"
   style={
-    Object {
+    {
       "paddingBottom": "20px",
     }
   }
@@ -13,7 +13,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="prev-disabled"
     onClick={[MockFunction hooks.prev.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }
@@ -25,7 +25,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="next-disabled"
     onClick={[MockFunction hooks.next.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }

src/components/GradesView/PageButtons/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import usePageButtonsData from './hooks';
 

src/components/GradesView/PageButtons/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import usePageButtonsData from './hooks';
 import PageButtons from '.';

src/components/GradesView/ScoreViewInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from 'data/redux/hooks';

src/components/GradesView/SearchControls/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchControls component render snapshot 1`] = `
-<div>
+<div
+  className="search-container"
+>
   <SearchField
     inputLabel="test-input-label"
     onBlur={[MockFunction hooks.onBlur]}

src/components/GradesView/SearchControls/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SearchField } from '@edx/paragon';
+import { SearchField } from '@openedx/paragon';
 import useSearchControlsData from './hooks';
 
 /**
@@ -18,7 +18,7 @@ export const SearchControls = () => {
   } = useSearchControlsData();
 
   return (
-    <div>
+    <div className="search-container">
       <SearchField
         onSubmit={onSubmit}
         inputLabel={inputLabel}

src/components/GradesView/SearchControls/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { SearchField } from '@edx/paragon';
+import { SearchField } from '@openedx/paragon';
 
 import useSearchControlsData from './hooks';
 import SearchControls from '.';

src/components/GradesView/SpinnerIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Icon } from '@edx/paragon';
+import { Icon } from '@openedx/paragon';
 
 import { selectors } from 'data/redux/hooks';
 

src/components/GradesView/StatusAlerts/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import useStatusAlertsData from './hooks';
 

src/components/GradesView/StatusAlerts/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import useStatusAlertsData from './hooks';
 import StatusAlerts from '.';

src/components/GradesView/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`GradesView component render snapshot 1`] = `
     filter-step-heading
   </h3>
   <div
-    className="d-flex justify-content-between"
+    className="d-flex justify-content-between flex-wrap"
   >
     <FilterMenuToggle />
     <SearchControls />

src/components/GradesView/index.jsx

@@ -34,7 +34,7 @@ export const GradesView = ({ updateQueryParams }) => {
         {stepHeadings.filter}
       </h3>
 
-      <div className="d-flex justify-content-between">
+      <div className="d-flex justify-content-between flex-wrap">
         <FilterMenuToggle />
         <SearchControls />
       </div>

src/components/NetworkButton/__snapshots__/test.jsx.snap

@@ -4,12 +4,12 @@ exports[`NetworkButton component snapshots snapshot 1`] = `
 <StatefulButton
   className="ml-2 test-class"
   disabledStates={
-    Array [
+    [
       "pending",
     ]
   }
   icons={
-    Object {
+    {
       "default": <Icon
         className="fa mr-2 fa-download"
       />,
@@ -19,7 +19,7 @@ exports[`NetworkButton component snapshots snapshot 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "default": <FormattedMessage
         defaultMessage="test button label"
         description="test button label description"

src/components/NetworkButton/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 
-import { StatefulButton, Icon } from '@edx/paragon';
+import { StatefulButton, Icon } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';

src/components/NetworkButton/test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Icon, StatefulButton } from '@edx/paragon';
+import { Icon, StatefulButton } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -10,7 +10,7 @@ import { NetworkButton, mapStateToProps, buttonStates } from '.';
 jest.mock('@edx/frontend-platform/i18n', () => ({
   FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Icon: () => 'Icon',
   StatefulButton: () => 'StatefulButton',
 }));

src/containers/GradebookPage/test.jsx

@@ -20,7 +20,7 @@ jest.mock('query-string', () => ({
   stringify: (val) => `stringify: ${JSON.stringify(val, Object.keys(val).sort())}`,
 }));
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Tab: () => 'Tab',
   Tabs: () => 'Tabs',
 }));