feat: import FooterSlot from component package instead of slot package (#414 )

fix(deps): update dependency @edx/frontend-component-header to v6.4.0 (#415 )
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-04-24 12:33:01 -04:00 · 2025-04-23 20:17:57 +00:00 · 2025-04-16 16:10:15 +03:30 · 2025-04-09 15:22:36 -04:00 · 2025-04-09 13:56:30 +00:00 · 2025-04-03 12:42:31 +03:30
207 changed files with 11936 additions and 19266 deletions
--- a/.env
+++ b/.env
@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=''
--- a/.env.development
+++ b/.env.development
@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 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'
@@ -38,3 +37,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=http://localhost:1997
--- a/.env.test
+++ b/.env.test
@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 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'
@@ -36,3 +35,4 @@ 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'
+ACCOUNT_SETTINGS_URL=http://localhost:1997
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,5 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');

 const config = createConfig('eslint', {
  rules: {
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,17 +10,18 @@ on:

 jobs:
  tests:
-    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
    - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
 # Because of node 18 bug (https://github.com/nodejs/node/issues/47563), Pinning node version 18.15 until the next release of node
      with:
-        node-version: 18.15
+        node-version-file: '.nvmrc'

    - name: Install dependencies
      run: npm ci
@@ -38,7 +39,10 @@ jobs:
      run: npm run build

    - name: Run Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

    - name: Send failure notification
      if: ${{ failure() }}
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -1,32 +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 Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-
-      - 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
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.16
+20
--- a/.releaserc
+++ b/.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": []
-}
--- a/.tx/config
+++ b/.tx/config
@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-ora-grading]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-
--- a/28
+++ b/28
@@ -2,16 +2,13 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json

-transifex_resource = frontend-app-ora-grading
-transifex_langs = "ar,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
-
 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

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs

 NPM_TESTS=build i18n_extract lint test

@@ -43,35 +40,18 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	  && atlas pull --filter=$(transifex_langs) \
+	  && atlas pull $(ATLAS_OPTIONS) \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/paragon/src/i18n/messages:paragon \
 	           translations/frontend-app-ora-grading/src/i18n/messages:frontend-app-ora-grading

-	$(intl_imports) frontend-component-footer frontend-component-header paragon frontend-app-ora-grading
-endif
+	$(intl_imports) frontend-component-footer frontend-component-header frontend-platform paragon frontend-app-ora-grading

 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,7 +1,8 @@
 frontend-app-ora-grading
-########################
+#############################
+
+|license-badge| |status-badge| |ci-badge| |codecov-badge|

-|ci-badge| |codecov-badge| |doc-badge| |license-badge| |status-badge|

 Purpose
 *******
@@ -22,25 +23,62 @@ app in ``edx-platform``.
 Getting Started
 ***************

+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Developing
 ==========

-One Time Setup
+Cloning and Startup
 --------------

 First, clone the repo, install code prerequisites, and start the app.

 .. code-block::

-  # Clone the repository
-  git clone git@github.com:openedx/frontend-app-ora-grading.git
-  cd frontend-app-ora-grading

-  # Install prerequisites
-  npm install
+  1. Clone your new repo:

-  # Start the MFE
-  npm run start
+  ``git clone git@github.com:openedx/frontend-app-ora-grading.git``
+
+  2. Use node v18.x.
+
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-app-ora-grading && npm install``
+
+  4. Update the application port to use for local development:
+
+    Default port is 1993. If this does not work for you, update the line
+    `PORT=1993` to your port in all .env.* files
+
+  5. Start the dev server:
+
+    ``npm start``

 The app will, by default, run on `http://localhost:1993` unless otherwise
 specified in ``.env.development:PORT`` and ``.env.development:BASE_URL``.
@@ -112,24 +150,24 @@ the `MFE production deployment guide`_

 .. _MFE production deployment guide: https://openedx.github.io/frontend-platform/#production-deployment-strategy

+Internationalization
+====================
+
+Please see refer to the `frontend-platform i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+
 Getting Help
 ************

-Documentation
-=============
-
-See `ORA Staff Grading on ReadTheDocs`_ for more in-depth usage information.
-
-.. _ORA Staff Grading on ReadTheDocs: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading
-
-More 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`_.
+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`_.

 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.
@@ -140,27 +178,30 @@ For more information about these options, see the `Getting Help`_ page.

 .. _Slack invitation: https://openedx.org/slack
 .. _community Slack workspace: https://openedx.slack.com/
-.. _Getting Help: https://openedx.org/getting-help
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect

 License
 *******

-The code in this repository is licensed under the GNU Affero General Public
-License v3.0 unless otherwise noted.
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.

 Please see `LICENSE <LICENSE>`_ for details.

 Contributing
 ************

-This project is currently only accepting bug fixes, security fixes, and 
-maintenance work. New features should be discussed in advance with the owning
-team and added to the public roadmap or they may not be accepted. You can start
-a conversation by creating a new issue on this repo summarizing your feature
-idea.
+Contributions are very welcome.  Please read `How To Contribute`_ for details.

-Please read `How To Contribute <https://openedx.org/r/how-to-contribute>`_ for
-details.
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.

 The Open edX Code of Conduct
 ****************************
@@ -181,22 +222,18 @@ file in this repo.
 Reporting Security Issues
 *************************

-Please do not report security issues in public. Please email security@openedx.org.
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml
-    :alt: CI
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-ora-grading/coverage.svg?branch=master
-    :target: https://codecov.io/github/openedx/frontend-app-ora-grading?branch=master
-    :alt: Codecov
-
-.. |doc-badge| image:: https://readthedocs.org/projects/frontend-app-ora-grading/badge/?version=latest
-    :target: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html
-    :alt: Documentation
+Please do not report security issues in public, and email security@openedx.org instead.

 .. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-ora-grading.svg
    :target: https://github.com/openedx/frontend-app-ora-grading/blob/master/LICENSE
    :alt: License

 .. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml
+    :alt: Continuous Integration
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-ora-grading/coverage.svg?branch=master
+    :target: https://codecov.io/github/openedx/frontend-app-ora-grading?branch=master
+    :alt: Codecov
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -13,7 +13,9 @@ metadata:
    - url: "https://ora-grading.stage.edx.org"
      title: "Stage Site"
      icon: "Web"
+  annotations:
+    openedx.org/release: "master"     
 spec:
-  owner: group:content-aurora
+  owner: "user:codewithemad"
  type: 'website'
  lifecycle: 'production'
--- a/documentation/.ci.yml.md
+++ b/documentation/.ci.yml.md
@@ -26,4 +26,3 @@ There are only two requirements for a good `make target` name
 What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project.

 This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
-
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');

 module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
@@ -6,9 +6,6 @@ module.exports = createConfig('jest', {
    '<rootDir>/src/setupTest.js',
  ],
  modulePaths: ['<rootDir>/src/'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
  coveragePathIgnorePatterns: [
    'src/segment.js',
    'src/postcss.config.js',
--- a/openedx.yaml
+++ b/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}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,16 +6,19 @@
    "type": "git",
    "url": "git+https://github.com/edx/frontend-app-ora-grading.git"
  },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
    "semantic-release": "semantic-release",
    "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/ora-grading/ 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",
-    "prepare": "husky install"
+    "watch-tests": "jest --watch"
  },
  "author": "edX",
  "license": "AGPL-3.0",
@@ -24,26 +27,26 @@
    "access": "public"
  },
  "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.2.2",
-    "@edx/frontend-platform": "^4.1.0",
-    "@edx/paragon": "^20.30.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/paragon": "^22.16.0",
    "@redux-beacon/segment": "^1.1.0",
+    "@redux-devtools/extension": "3.0.0",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/user-event": "^14.0.0",
    "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.27.0",
+    "axios": "^0.28.0",
    "classnames": "^2.3.1",
-    "core-js": "3.31.1",
+    "core-js": "3.35.1",
    "dompurify": "^2.3.1",
    "email-prop-type": "^3.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
    "file-saver": "^2.0.5",
    "filesize": "^8.0.6",
    "font-awesome": "4.7.0",
@@ -53,42 +56,40 @@
    "moment": "^2.29.3",
    "prop-types": "15.8.1",
    "query-string": "7.1.3",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
    "react-helmet": "^6.1.0",
-    "react-intl": "^5.20.9",
-    "react-pdf": "^5.5.0",
-    "react-redux": "^7.2.4",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-intl": "6.4.7",
+    "react-pdf": "^7.0.0",
+    "react-redux": "^7.2.9",
+    "react-router": "6.21.3",
+    "react-router-dom": "6.21.3",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "4.2.1",
    "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.14.0",
    "reselect": "^4.0.0",
    "util": "^0.12.4",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "^12.7.0",
+    "@edx/browserslist-config": "^1.3.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
    "@edx/reactifex": "^2.1.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.5",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
    "axios-mock-adapter": "^1.20.0",
-    "enzyme-adapter-react-16": "^1.15.6",
    "fetch-mock": "^9.11.0",
-    "husky": "^7.0.0",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "29.6.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
    "jest-expect-message": "^1.0.2",
    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.3.1",
    "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.4",
-    "semantic-release": "^19.0.3"
+    "redux-mock-store": "^1.5.5"
  }
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';

-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';

 import { selectors } from 'data/redux';

 import DemoWarning from 'containers/DemoWarning';
-import CTA from 'containers/CTA';
+import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';

 import './App.scss';
@@ -23,13 +23,14 @@ export const App = ({ courseMetadata, isEnabled }) => (
        courseTitle={courseMetadata.title}
        courseNumber={courseMetadata.number}
        courseOrg={courseMetadata.org}
+        data-testid="header"
      />
      {!isEnabled && <DemoWarning />}
-      <CTA />
-      <main>
+      <NotificationsBanner />
+      <main data-testid="main">
        <ListView />
      </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
    </div>
  </Router>
 );
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
@import "~@edx/brand/paragon/fonts";
@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";

 $fa-font-path: "~font-awesome/fonts";
@@ -10,6 +10,7 @@ $fa-font-path: "~font-awesome/fonts";
 $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work

@import "~@edx/frontend-component-footer/dist/_footer";
+@import "~@edx/frontend-component-header/dist/index";

 #root {
  display: flex;
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-
-import Footer from '@edx/frontend-component-footer';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-
-import ListView from 'containers/ListView';
+import { shallow } from '@edx/react-unit-test-utils';

 import { App } from './App';

@@ -20,16 +15,13 @@ jest.mock('data/redux', () => ({
 jest.mock('@edx/frontend-component-header', () => ({
  LearningHeader: 'Header',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));

 jest.mock('containers/DemoWarning', () => 'DemoWarning');
-jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 jest.mock('components/Head', () => 'Head');

-const logo = 'fakeLogo.png';
 let el;
-let router;

 describe('App router component', () => {
  const props = {
@@ -41,34 +33,28 @@ describe('App router component', () => {
    isEnabled: true,
  };
  test('snapshot: enabled', () => {
-    expect(shallow(<App {...props} />)).toMatchSnapshot();
+    expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
  });
  test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />)).toMatchSnapshot();
+    expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
  });
  describe('component', () => {
    beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
      el = shallow(<App {...props} />);
-      router = el.childAt(0);
    });
    describe('Router', () => {
      test('Routing - ListView is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
-          <main><ListView /></main>,
-        ));
+        expect(el.instance.findByTestId('main')[0].children).toHaveLength(1);
+        expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
      });
    });
-    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
-    });

    test('Header to use courseMetadata props', () => {
      const {
        courseTitle,
        courseNumber,
        courseOrg,
-      } = router.find(Header).props();
+      } = el.instance.findByTestId('header')[0].props;
      expect(courseTitle).toEqual(props.courseMetadata.title);
      expect(courseNumber).toEqual(props.courseMetadata.number);
      expect(courseOrg).toEqual(props.courseMetadata.org);
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -8,15 +8,16 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
      courseNumber="course-number"
      courseOrg="course-org"
      courseTitle="course-title"
+      data-testid="header"
    />
    <DemoWarning />
-    <CTA />
-    <main>
+    <NotificationsBanner />
+    <main
+      data-testid="main"
+    >
      <ListView />
    </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
  </div>
 </BrowserRouter>
 `;
@@ -29,14 +30,15 @@ exports[`App router component snapshot: enabled 1`] = `
      courseNumber="course-number"
      courseOrg="course-org"
      courseTitle="course-title"
+      data-testid="header"
    />
-    <CTA />
-    <main>
+    <NotificationsBanner />
+    <main
+      data-testid="main"
+    >
      <ListView />
    </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
  </div>
 </BrowserRouter>
 `;
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,23 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
+<React Strict Mode>
+  <ErrorPage
+    message="test-error-message"
+  />
+</React Strict Mode>
 `;

 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<AppProvider
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(Symbol.observable): [Function],
+<React Strict Mode>
+  <AppProvider
+    store={
+      {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(Symbol.observable): [Function],
+      }
    }
-  }
->
-  <App />
-</AppProvider>
+    wrapWithRouter={false}
+  >
+    <App />
+  </AppProvider>
+</React Strict Mode>
 `;
--- a/src/components/ConfirmModal.jsx
+++ b/src/components/ConfirmModal.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { AlertModal, ActionRow, Button } from '@edx/paragon';
+import { AlertModal, ActionRow, Button } from '@openedx/paragon';
 import { nullMethod } from 'hooks';

 export const ConfirmModal = ({
--- a/src/components/ConfirmModal.test.jsx
+++ b/src/components/ConfirmModal.test.jsx
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { ConfirmModal } from './ConfirmModal';

@@ -13,9 +13,9 @@ describe('ConfirmModal', () => {
    onConfirm: jest.fn().mockName('this.props.onConfirm'),
  };
  test('snapshot: closed', () => {
-    expect(shallow(<ConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
  });
  test('snapshot: open', () => {
-    expect(shallow(<ConfirmModal {...props} isOpen />)).toMatchSnapshot();
+    expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
  });
 });
--- a/src/components/DemoAlert/index.jsx
+++ b/src/components/DemoAlert/index.jsx
@@ -6,7 +6,7 @@ import {
  ActionRow,
  AlertModal,
  Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import messages from './messages';

--- a/src/components/DemoAlert/index.test.jsx
+++ b/src/components/DemoAlert/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { formatMessage } from 'testUtils';
 import { DemoAlert } from '.';
@@ -11,6 +11,6 @@ describe('DemoAlert component', () => {
      isOpen: true,
      onClose: jest.fn().mockName('props.onClose'),
    };
-    expect(shallow(<DemoAlert {...props} />)).toMatchSnapshot();
+    expect(shallow(<DemoAlert {...props} />).snapshot).toMatchSnapshot();
  });
 });
--- a/src/components/FilePopoverContent/index.test.jsx
+++ b/src/components/FilePopoverContent/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import filesize from 'filesize';
 import FilePopoverContent from '.';
@@ -19,20 +19,19 @@ describe('FilePopoverContent', () => {
      el = shallow(<FilePopoverContent {...props} />);
    });
    describe('snapshot', () => {
-      test('default', () => expect(el).toMatchSnapshot());
+      test('default', () => expect(el.snapshot).toMatchSnapshot());
      test('invalid size', () => {
-        el.setProps({
-          size: null,
-        });
-        expect(el).toMatchSnapshot();
+        el = shallow(<FilePopoverContent {...props} size={null} />);
+        expect(el.snapshot).toMatchSnapshot();
      });
    });

    describe('behavior', () => {
      test('content', () => {
-        expect(el.text()).toContain(props.name);
-        expect(el.text()).toContain(props.description);
-        expect(el.text()).toContain(filesize(props.size));
+        const childElements = el.instance.children;
+        expect(childElements[0].children[2].el).toContain(props.name);
+        expect(childElements[1].children[2].el).toContain(props.description);
+        expect(childElements[2].children[2].el).toContain(filesize(props.size));
      });
    });
  });
--- a/src/components/FilePreview/Banners/ErrorBanner.jsx
+++ b/src/components/FilePreview/Banners/ErrorBanner.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Alert, Button } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Button } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 const messageShape = PropTypes.shape({
--- a/src/components/FilePreview/Banners/ErrorBanner.test.jsx
+++ b/src/components/FilePreview/Banners/ErrorBanner.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import ErrorBanner from './ErrorBanner';

@@ -31,16 +31,20 @@ describe('Error Banner component', () => {
  });

  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });

  describe('component', () => {
    test('children node', () => {
-      expect(el.containsMatchingElement(children)).toEqual(true);
+      const childElement = el.instance.children[1];
+      const child = shallow(children);
+
+      expect(childElement.type).toEqual(child.type);
+      expect(childElement.children[0].el).toEqual(child.children[0].el);
    });

    test('verify actions', () => {
-      const actions = el.find('Alert').prop('actions');
+      const { actions } = el.instance.findByType('Alert')[0].props;
      expect(actions).toHaveLength(props.actions.length);

      actions.forEach((action, index) => {
@@ -52,8 +56,8 @@ describe('Error Banner component', () => {
    });

    test('verify heading', () => {
-      const heading = el.find('FormattedMessage');
-      expect(heading.props()).toEqual(props.headingMessage);
+      const heading = el.instance.findByType('FormattedMessage')[0];
+      expect(heading.props).toEqual(props.headingMessage);
    });
  });
 });
--- a/src/components/FilePreview/Banners/LoadingBanner.jsx
+++ b/src/components/FilePreview/Banners/LoadingBanner.jsx
@@ -1,6 +1,6 @@
 import React from 'react';

-import { Alert, Spinner } from '@edx/paragon';
+import { Alert, Spinner } from '@openedx/paragon';

 export const LoadingBanner = () => (
  <Alert variant="info">
--- a/src/components/FilePreview/Banners/LoadingBanner.test.jsx
+++ b/src/components/FilePreview/Banners/LoadingBanner.test.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import LoadingBanner from './LoadingBanner';

 describe('Loading Banner component', () => {
  test('snapshot', () => {
    const el = shallow(<LoadingBanner />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });
 });
--- a/src/components/FilePreview/Banners/snapshots/ErrorBanner.test.jsx.snap
+++ b/src/components/FilePreview/Banners/snapshots/ErrorBanner.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`Error Banner component snapshot 1`] = `
 <Alert
  actions={
-    Array [
+    [
      <Button
        onClick={[MockFunction action1.onClick]}
        variant="outline-primary"
--- a/src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import ImageRenderer from './ImageRenderer';

@@ -16,6 +16,6 @@ describe('Image Renderer Component', () => {
    el = shallow(<ImageRenderer {...props} />);
  });
  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });
 });
--- a/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx
+++ b/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { pdfjs, Document, Page } from 'react-pdf';
+import { Document, Page, pdfjs } from 'react-pdf';
 import {
  Icon, Form, ActionRow, IconButton,
-} from '@edx/paragon';
-import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
+} from '@openedx/paragon';
+import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';

 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import { rendererHooks } from './pdfHooks';

-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

 /**
 * <PDFRenderer />
--- a/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import PDFRenderer from './PDFRenderer';

@@ -42,7 +42,7 @@ describe('PDF Renderer Component', () => {
  describe('snapshots', () => {
    test('first page, prev is disabled', () => {
      hooks.rendererHooks.mockReturnValue(hookProps);
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
    });
    test('on last page, next is disabled', () => {
      hooks.rendererHooks.mockReturnValue({
@@ -51,7 +51,7 @@ describe('PDF Renderer Component', () => {
        hasNext: false,
        hasPrev: true,
      });
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
    });
  });
 });
--- a/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import TXTRenderer from './TXTRenderer';

@@ -18,6 +18,6 @@ describe('TXT Renderer Component', () => {
    onSuccess: jest.fn().mockName('this.props.onSuccess'),
  };
  test('snapshot', () => {
-    expect(shallow(<TXTRenderer {...props} />)).toMatchSnapshot();
+    expect(shallow(<TXTRenderer {...props} />).snapshot).toMatchSnapshot();
  });
 });
--- a/src/components/FilePreview/BaseRenderers/snapshots/PDFRenderer.test.jsx.snap
+++ b/src/components/FilePreview/BaseRenderers/snapshots/PDFRenderer.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
    <div
      className="page-wrapper"
      style={
-        Object {
+        {
          "height": 200,
        }
      }
@@ -80,7 +80,7 @@ exports[`PDF Renderer Component snapshots on last page, next is disabled 1`] = `
    <div
      className="page-wrapper"
      style={
-        Object {
+        {
          "height": 200,
        }
      }
--- a/src/components/FilePreview/BaseRenderers/pdfHooks.jsx
+++ b/src/components/FilePreview/BaseRenderers/pdfHooks.jsx
@@ -1,16 +1,11 @@
 import { useState, useRef } from 'react';

-import { pdfjs } from 'react-pdf';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
-
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

 import { ErrorStatuses } from 'data/constants/requests';
 import { StrictDict } from 'utils';
 import * as module from './pdfHooks';

-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
 export const errors = StrictDict({
  missingPDF: 'MissingPDFException',
 });
--- a/src/components/FilePreview/FileCard.jsx
+++ b/src/components/FilePreview/FileCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Card, Collapsible } from '@edx/paragon';
+import { Card, Collapsible } from '@openedx/paragon';
 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';

@@ -17,7 +17,7 @@ export const FileCard = ({ file, children }) => (
      defaultOpen
      title={<h3 className="file-card-title">{file.name}</h3>}
    >
-      <div className="preview-panel">
+      <div className="preview-panel" data-testid="preview-panel">
        <FileInfo><FilePopoverContent {...file} /></FileInfo>
        {children}
      </div>
--- a/src/components/FilePreview/FileCard.scss
+++ b/src/components/FilePreview/FileCard.scss
@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";

 .file-card {
  margin: map-get($spacers, 1) 0;
@@ -28,6 +28,6 @@

@include media-breakpoint-down(sm) {
  .file-card-title {
-    width: map-get($container-max-widths, "sm")/2;
+    width: calc(map-get($container-max-widths, "sm")/2);
  }
 }
--- a/src/components/FilePreview/FileCard.test.jsx
+++ b/src/components/FilePreview/FileCard.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';

 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';
@@ -24,19 +24,19 @@ describe('File Preview Card component', () => {
    el = shallow(<FileCard {...props}>{children}</FileCard>);
  });
  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });
  describe('Component', () => {
    test('collapsible title is name header', () => {
-      const title = el.find(Collapsible).prop('title');
+      const { title } = el.instance.findByType(Collapsible)[0].props;
      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
    });
    test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.find('.preview-panel').children();
-      expect(previewPanelChildren.at(0).equals(
+      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
+      expect(previewPanelChildren[0].matches(
        <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
      ));
-      expect(previewPanelChildren.at(1).equals(children)).toEqual(true);
+      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
    });
  });
 });
--- a/src/components/FilePreview/FileInfo.jsx
+++ b/src/components/FilePreview/FileInfo.jsx
@@ -5,8 +5,8 @@ import {
  Button,
  OverlayTrigger,
  Popover,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { nullMethod } from 'hooks';
 import messages from './messages';
--- a/src/components/FilePreview/FileInfo.test.jsx
+++ b/src/components/FilePreview/FileInfo.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

-import { Popover } from '@edx/paragon';
+import { Popover } from '@openedx/paragon';

 import FileInfo from './FileInfo';

@@ -13,11 +13,11 @@ describe('File Preview Card component', () => {
    el = shallow(<FileInfo {...props}>{children}</FileInfo>);
  });
  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });
  describe('Component', () => {
    test('overlay with passed children', () => {
-      const { overlay } = el.at(0).props();
+      const { overlay } = el.instance.props;
      expect(overlay.type).toEqual(Popover);
      expect(overlay.props.children).toEqual(<Popover.Content>{children}</Popover.Content>);
    });
--- a/src/components/FilePreview/FileRenderer.test.jsx
+++ b/src/components/FilePreview/FileRenderer.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { formatMessage } from 'testUtils';
 import { keyStore } from 'utils';
@@ -35,7 +35,7 @@ describe('FileRenderer', () => {
          rendererProps: { prop: 'hooks.rendererProps' },
        };
        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
+        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
      });
      test('is not loading, with error', () => {
        const hookProps = {
@@ -46,7 +46,7 @@ describe('FileRenderer', () => {
          rendererProps: { prop: 'hooks.rendererProps' },
        };
        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
+        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
      });
    });
  });
--- a/src/components/FilePreview/snapshots/FileCard.test.jsx.snap
+++ b/src/components/FilePreview/snapshots/FileCard.test.jsx.snap
@@ -18,6 +18,7 @@ exports[`File Preview Card component snapshot 1`] = `
  >
    <div
      className="preview-panel"
+      data-testid="preview-panel"
    >
      <FileInfo>
        <FilePopoverContent
--- a/src/components/FilePreview/snapshots/FileRenderer.test.jsx.snap
+++ b/src/components/FilePreview/snapshots/FileRenderer.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`FileRenderer component snapshot is not loading, with error 1`] = `
 <FileCard
  file={
-    Object {
+    {
      "downloadUrl": "file download url",
      "name": "filename.txt",
    }
@@ -19,7 +19,7 @@ exports[`FileRenderer component snapshot is not loading, with error 1`] = `
 exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
 <FileCard
  file={
-    Object {
+    {
      "downloadUrl": "file download url",
      "name": "filename.txt",
    }
--- a/src/components/FilePreview/hooks.js
+++ b/src/components/FilePreview/hooks.js
@@ -79,7 +79,7 @@ export const renderHooks = ({
    message: messages.retryButton,
  };
  const error = {
-    headerMessage: errorMessage,
+    headingMessage: errorMessage,
    children: intl.formatMessage(errorMessage),
    actions: [errorAction],
  };
--- a/src/components/FilePreview/hooks.test.js
+++ b/src/components/FilePreview/hooks.test.js
@@ -55,7 +55,7 @@ describe('FilePreview hooks', () => {
          });
          describe('error', () => {
            it('loads message from current error status, if valid, else from serverError', () => {
-              expect(hook.error.headerMessage).toEqual(
+              expect(hook.error.headingMessage).toEqual(
                hooks.ERROR_STATUSES[ErrorStatuses.serverError],
              );
              expect(hook.error.children).toEqual(
@@ -63,7 +63,7 @@ describe('FilePreview hooks', () => {
              );
              state.mockVal(state.keys.errorStatus, ErrorStatuses.notFound);
              hook = hooks.renderHooks({ intl: { formatMessage }, file });
-              expect(hook.error.headerMessage).toEqual(
+              expect(hook.error.headingMessage).toEqual(
                hooks.ERROR_STATUSES[ErrorStatuses.notFound],
              );
              expect(hook.error.children).toEqual(
--- a/src/components/Head/index.test.jsx
+++ b/src/components/Head/index.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import Head from '.';

 jest.mock('react-helmet', () => ({
@@ -17,9 +17,9 @@ jest.mock('@edx/frontend-platform', () => ({
 describe('Head', () => {
  it('snapshot', () => {
    const el = shallow(<Head />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();

-    expect(el.find('title').text()).toContain(getConfig().SITE_NAME);
-    expect(el.find('link').prop('href')).toEqual(getConfig().FAVICON_URL);
+    expect(el.instance.findByType('title')[0].el.children[0]).toContain(getConfig().SITE_NAME);
+    expect(el.instance.findByType('link')[0].props.href).toEqual(getConfig().FAVICON_URL);
  });
 });
--- a/src/components/InfoPopover/snapshots/index.test.jsx.snap
+++ b/src/components/InfoPopover/snapshots/index.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`Info Popover Component snapshot 1`] = `
  <IconButton
    alt="Display more info"
    className="esg-help-icon"
+    data-testid="esg-help-icon"
    iconAs="Icon"
    onClick={[MockFunction this.props.onClick]}
    src={[MockFunction icons.InfoOutline]}
--- a/src/components/InfoPopover/index.jsx
+++ b/src/components/InfoPopover/index.jsx
@@ -6,8 +6,8 @@ import {
  Popover,
  Icon,
  IconButton,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { nullMethod } from 'hooks';
@@ -30,6 +30,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
  >
    <IconButton
      className="esg-help-icon"
+      data-testid="esg-help-icon"
      src={InfoOutline}
      alt={intl.formatMessage(messages.altText)}
      iconAs={Icon}
--- a/src/components/InfoPopover/index.test.jsx
+++ b/src/components/InfoPopover/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { formatMessage } from 'testUtils';
 import { InfoPopover } from '.';
@@ -12,12 +12,12 @@ describe('Info Popover Component', () => {
    el = shallow(<InfoPopover onClick={onClick} intl={{ formatMessage }}>{child}</InfoPopover>);
  });
  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });
  describe('Component', () => {
    test('Test component render', () => {
-      expect(el.length).toEqual(1);
-      expect(el.find('.esg-help-icon').length).toEqual(1);
+      expect(el.instance.children.length).toEqual(1);
+      expect(el.instance.findByTestId('esg-help-icon').length).toEqual(1);
    });
  });
 });
--- a/src/components/LoadingMessage.jsx
+++ b/src/components/LoadingMessage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

 /**
--- a/src/components/StatusBadge.jsx
+++ b/src/components/StatusBadge.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

 import { StrictDict } from 'utils';
--- a/src/components/StatusBadge.test.jsx
+++ b/src/components/StatusBadge.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { gradingStatuses } from 'data/services/lms/constants';
 import { StatusBadge } from './StatusBadge';
@@ -10,25 +10,25 @@ describe('StatusBadge component', () => {
  describe('behavior', () => {
    it('does not render if status does not have configured variant', () => {
      const el = render('arbitrary');
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(true);
    });
    describe('status snapshots: loads badge with configured variant and message.', () => {
      test('`ungraded` shows primary button variant and message', () => {
        const el = render(gradingStatuses.ungraded);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
      test('`locked` shows light button variant and message', () => {
        const el = render(gradingStatuses.locked);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
      test('`graded` shows success button variant and message', () => {
        const el = render(gradingStatuses.graded);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
      test('`inProgress` shows warning button variant and message', () => {
        const el = render(gradingStatuses.inProgress);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
    });
  });
--- a/src/components/snapshots/StatusBadge.test.jsx.snap
+++ b/src/components/snapshots/StatusBadge.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `""`;
+exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `null`;

 exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
 <Badge
--- a/src/containers/CTA/CTA.test.jsx
+++ b/src/containers/CTA/CTA.test.jsx
@@ -1,11 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { CTA } from '.';
-
-describe('CTA component', () => {
-  test('snapshots', () => {
-    const el = shallow(<CTA hide />);
-    expect(el).toMatchSnapshot();
-  });
-});
--- a/src/containers/CTA/snapshots/CTA.test.jsx.snap
+++ b/src/containers/CTA/snapshots/CTA.test.jsx.snap
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTA component snapshots 1`] = `
-<PageBanner>
-  <span>
-    <FormattedMessage
-      defaultMessage="Thanks for using the new ORA staff grading experience. "
-      description="Thank user for using ora and ask for feed back"
-      id="ora-grading.CTA.feedbackMessage"
-    />
-    <Hyperlink
-      destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-      isInline={true}
-      showLaunchIcon={false}
-      target="_blank"
-      variant="muted"
-    >
-      <FormattedMessage
-        defaultMessage="Provide some feedback"
-        description="placeholder for the feedback anchor link"
-        id="ora-grading.CTA.linkMessage"
-      />
-    </Hyperlink>
-    <FormattedMessage
-      defaultMessage=" and let us know what you think!"
-      description="inform user to provide feedback"
-      id="ora-grading.CTA.letUsKnowMessage"
-    />
-  </span>
-</PageBanner>
-`;
--- a/src/containers/CTA/index.jsx
+++ b/src/containers/CTA/index.jsx
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@edx/paragon';
-
-import messages from './messages';
-
-/**
- * <CTA />
- */
-export const CTA = () => (
-  <PageBanner>
-    <span>
-      <FormattedMessage {...messages.ctaFeedbackMessage} />
-      <Hyperlink
-        isInline
-        variant="muted"
-        destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-        target="_blank"
-        showLaunchIcon={false}
-      >
-        <FormattedMessage {...messages.ctaLinkMessage} />
-      </Hyperlink>
-      <FormattedMessage {...messages.ctaLetUsKnowMessage} />
-    </span>
-  </PageBanner>
-);
-
-export default CTA;
--- a/src/containers/CTA/messages.js
+++ b/src/containers/CTA/messages.js
@@ -1,23 +0,0 @@
-/* eslint-disable quotes */
-import { defineMessages } from '@edx/frontend-platform/i18n';
-import { StrictDict } from 'utils';
-
-const messages = defineMessages({
-  ctaFeedbackMessage: {
-    id: 'ora-grading.CTA.feedbackMessage',
-    defaultMessage: 'Thanks for using the new ORA staff grading experience. ',
-    description: 'Thank user for using ora and ask for feed back',
-  },
-  ctaLinkMessage: {
-    id: 'ora-grading.CTA.linkMessage',
-    defaultMessage: 'Provide some feedback',
-    description: 'placeholder for the feedback anchor link',
-  },
-  ctaLetUsKnowMessage: {
-    id: 'ora-grading.CTA.letUsKnowMessage',
-    defaultMessage: ' and let us know what you think!',
-    description: 'inform user to provide feedback',
-  },
-});
-
-export default StrictDict(messages);
--- a/src/containers/CriterionContainer/CriterionFeedback.jsx
+++ b/src/containers/CriterionContainer/CriterionFeedback.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { feedbackRequirement } from 'data/services/lms/constants';
@@ -51,13 +51,14 @@ export class CriterionFeedback extends React.Component {
        <Form.Control
          as="textarea"
          className="criterion-feedback feedback-input"
+          data-testid="criterion-feedback-input"
          floatingLabel={this.commentMessage}
          value={value}
          onChange={this.onChange}
          disabled={!isGrading}
        />
        {isInvalid && (
-          <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          <Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
            {this.translate(messages.criterionFeedbackError)}
          </Form.Control.Feedback>
        )}
--- a/src/containers/CriterionContainer/CriterionFeedback.test.jsx
+++ b/src/containers/CriterionContainer/CriterionFeedback.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { actions, selectors } from 'data/redux';
 import {
@@ -48,34 +48,27 @@ describe('Criterion Feedback', () => {
  let el;
  beforeEach(() => {
    el = shallow(<CriterionFeedback {...props} />);
-    el.instance().onChange = jest.fn().mockName('this.onChange');
+    el.instance.onChange = jest.fn().mockName('this.onChange');
  });
  describe('snapshot', () => {
    test('is grading', () => {
-      expect(el.instance().render()).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('is graded', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('feedback value is invalid', () => {
-      el.setProps({
-        isInvalid: true,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<CriterionFeedback {...props} isInvalid />);
+      expect(el.snapshot).toMatchSnapshot();
    });

    Object.values(feedbackRequirement).forEach((requirement) => {
      test(`feedback is configured to ${requirement}`, () => {
-        el.setProps({
-          config: requirement,
-        });
-        expect(el.instance().render()).toMatchSnapshot();
+        el = shallow(<CriterionFeedback {...props} config={requirement} />);
+        expect(el.snapshot).toMatchSnapshot();
      });
    });
  });
@@ -84,33 +77,23 @@ describe('Criterion Feedback', () => {
    describe('render', () => {
      test('is grading (the feedback input is not disabled)', () => {
        expect(el.isEmptyRender()).toEqual(false);
-        expect(el.instance().props.value).toEqual(props.value);
-        const controlEl = el.find('.feedback-input');
-        expect(controlEl.prop('disabled')).toEqual(false);
-        expect(controlEl.prop('value')).toEqual(props.value);
+        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
+        expect(controlEl.props.disabled).toEqual(false);
+        expect(controlEl.props.value).toEqual(props.value);
      });
      test('is graded (the input is disabled)', () => {
-        el.setProps({
-          isGrading: false,
-          gradeStatus: gradeStatuses.graded,
-        });
-        expect(el.instance().props.value).toEqual(props.value);
-        const controlEl = el.find('.feedback-input');
-        expect(controlEl.prop('disabled')).toEqual(true);
-        expect(controlEl.prop('value')).toEqual(props.value);
+        el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
+        expect(controlEl.props.disabled).toEqual(true);
+        expect(controlEl.props.value).toEqual(props.value);
      });
      test('is having invalid feedback (feedback get render)', () => {
-        el.setProps({
-          isInvalid: true,
-        });
-        const feedbackErrorEl = el.find('.feedback-error-msg');
-        expect(el.instance().props.isInvalid).toEqual(true);
+        el = shallow(<CriterionFeedback {...props} isInvalid />);
+        const feedbackErrorEl = el.instance.findByTestId('criterion-feedback-error-msg');
        expect(feedbackErrorEl).toBeDefined();
      });
      test('is configure to disabled (the input does not get render)', () => {
-        el.setProps({
-          config: feedbackRequirement.disabled,
-        });
+        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.disabled} />);
        expect(el.isEmptyRender()).toEqual(true);
      });
    });
@@ -118,7 +101,7 @@ describe('Criterion Feedback', () => {
    describe('behavior', () => {
      test('onChange call set value', () => {
        el = shallow(<CriterionFeedback {...props} />);
-        el.instance().onChange({
+        el.instance.findByTestId('criterion-feedback-input')[0].props.onChange({
          target: {
            value: 'some value',
          },
@@ -129,33 +112,41 @@ describe('Criterion Feedback', () => {

    describe('getter commentMessage', () => {
      test('is grading', () => {
-        el.setProps({ config: feedbackRequirement.optional, isGrading: true });
-        expect(el.instance().commentMessage).toContain(
+        let commentMessage;
+
+        el = shallow(<CriterionFeedback {...props} isGrading config={feedbackRequirement.optional} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).toContain(
          messages.optional.defaultMessage,
        );

-        el.setProps({ config: feedbackRequirement.required });
-        expect(el.instance().commentMessage).not.toContain(
+        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.required} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).not.toContain(
          messages.optional.defaultMessage,
        );

-        expect(el.instance().commentMessage).toContain(
+        expect(commentMessage).toContain(
          messages.addComments.defaultMessage,
        );
      });

      test('is not grading', () => {
-        el.setProps({ config: feedbackRequirement.optional, isGrading: false });
-        expect(el.instance().commentMessage).toContain(
+        let commentMessage;
+
+        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.optional} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).toContain(
          messages.optional.defaultMessage,
        );

-        el.setProps({ config: feedbackRequirement.required });
-        expect(el.instance().commentMessage).not.toContain(
+        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.required} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).not.toContain(
          messages.optional.defaultMessage,
        );

-        expect(el.instance().commentMessage).toContain(
+        expect(commentMessage).toContain(
          messages.comments.defaultMessage,
        );
      });
@@ -163,7 +154,7 @@ describe('Criterion Feedback', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { abitaryState: 'some data' };
+    const testState = { arbitraryState: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/RadioCriterion.jsx
+++ b/src/containers/CriterionContainer/RadioCriterion.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { actions, selectors } from 'data/redux';
@@ -36,12 +36,13 @@ export class RadioCriterion extends React.Component {
      <Form.RadioSet name={config.name} value={data}>
        {config.options.map((option) => (
          <Form.Radio
-            className="criteria-option"
+            className="criteria-option align-items-center"
            key={option.name}
            value={option.name}
            description={intl.formatMessage(messages.optionPoints, { points: option.points })}
            onChange={this.onChange}
            disabled={!isGrading}
+            style={{ flexShrink: 0 }}
          >
            {option.label}
          </Form.Radio>
--- a/src/containers/CriterionContainer/RadioCriterion.test.jsx
+++ b/src/containers/CriterionContainer/RadioCriterion.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { actions, selectors } from 'data/redux';
 import { formatMessage } from 'testUtils';
@@ -40,14 +40,14 @@ describe('Radio Criterion Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 1,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -63,25 +63,21 @@ describe('Radio Criterion Container', () => {
  let el;
  beforeEach(() => {
    el = shallow(<RadioCriterion {...props} />);
-    el.instance().onChange = jest.fn().mockName('this.onChange');
+    el.instance.onChange = jest.fn().mockName('this.onChange');
  });
  describe('snapshot', () => {
    test('is grading', () => {
-      expect(el.instance().render()).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('is not grading', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<RadioCriterion {...props} isGrading={false} />);
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('radio contain invalid response', () => {
-      el.setProps({
-        isInvalid: true,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<RadioCriterion {...props} isInvalid />);
+      expect(el.snapshot).toMatchSnapshot();
    });
  });

@@ -89,36 +85,33 @@ describe('Radio Criterion Container', () => {
    describe('rendering', () => {
      test('is grading (all options are not disabled)', () => {
        expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.find('.criteria-option');
+        const optionsEl = el.instance.children;
        expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(false));
+        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(false));
      });

      test('is not grading (all options are disabled)', () => {
-        el.setProps({
-          isGrading: false,
-        });
+        el = shallow(<RadioCriterion {...props} isGrading={false} />);
        expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.find('.criteria-option');
+        const optionsEl = el.instance.children;
        expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(true));
+        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(true));
      });

      test('radio contain invalid response (error response get render)', () => {
-        el.setProps({
-          isInvalid: true,
-        });
+        el = shallow(<RadioCriterion {...props} isInvalid />);
        expect(el.isEmptyRender()).toEqual(false);
-        const radioErrorEl = el.find('.feedback-error-msg');
-        expect(el.instance().props.isInvalid).toEqual(true);
-        expect(radioErrorEl).toBeDefined();
+        const radioErrorEl = el.instance.children[2];
+        expect(radioErrorEl.props.type).toBe('invalid');
+        expect(radioErrorEl.props.className).toBe('feedback-error-msg');
+        expect(radioErrorEl).toBeTruthy();
      });
    });

    describe('behavior', () => {
      test('onChange call set crition option', () => {
        el = shallow(<RadioCriterion {...props} />);
-        el.instance().onChange({
+        el.instance.children[0].props.onChange({
          target: {
            value: 'some value',
          },
@@ -129,7 +122,7 @@ describe('Radio Criterion Container', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { arbitary: 'some data' };
+    const testState = { arbitrary: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/ReviewCriterion.jsx
+++ b/src/containers/CriterionContainer/ReviewCriterion.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Form, FormControlFeedback } from '@edx/paragon';
+import { Form, FormControlFeedback } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import { selectors } from 'data/redux';
@@ -14,10 +14,10 @@ import messages from './messages';
 export const ReviewCriterion = ({ config }) => (
  <div className="review-criterion">
    {config.options.map((option) => (
-      <div key={option.name} className="criteria-option">
+      <div key={option.name} className="criteria-option" data-testid="criteria-option">
        <div>
-          <Form.Label className="option-label">{option.label}</Form.Label>
-          <FormControlFeedback className="option-points">
+          <Form.Label className="option-label" data-testid="option-label">{option.label}</Form.Label>
+          <FormControlFeedback className="option-points" data-testid="option-points">
            <FormattedMessage {...messages.optionPoints} values={{ points: option.points }} />
          </FormControlFeedback>
        </div>
--- a/src/containers/CriterionContainer/ReviewCriterion.test.jsx
+++ b/src/containers/CriterionContainer/ReviewCriterion.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { selectors } from 'data/redux';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
@@ -29,14 +29,14 @@ describe('Review Crition Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 1,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -55,21 +55,21 @@ describe('Review Crition Container', () => {
    el = shallow(<ReviewCriterion {...props} />);
  });
  test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });

  describe('component', () => {
    test('rendering (everything show up)', () => {
      expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.find('.criteria-option');
+      const optionsEl = el.instance.findByTestId('criteria-option');
      expect(optionsEl.length).toEqual(props.config.options.length);
      optionsEl.forEach((optionEl, i) => {
        const option = props.config.options[i];
-        expect(optionEl.key()).toEqual(option.name);
-        expect(optionEl.find('.option-label').childAt(0).text()).toEqual(
+        expect(optionEl.props.key).toEqual(option.name);
+        expect(optionEl.findByTestId('option-label')[0].children[0].el).toEqual(
          option.label,
        );
-        expect(optionEl.find('.option-points').childAt(0).props()).toEqual({
+        expect(optionEl.findByTestId('option-points')[0].children[0].props).toEqual({
          ...messages.optionPoints,
          values: { points: option.points },
        });
@@ -78,7 +78,7 @@ describe('Review Crition Container', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { arbitary: 'some data' };
+    const testState = { arbitrary: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/snapshots/CriterionFeedback.test.jsx.snap
+++ b/src/containers/CriterionContainer/snapshots/CriterionFeedback.test.jsx.snap
@@ -7,9 +7,10 @@ exports[`Criterion Feedback snapshot feedback is configured to optional 1`] = `
  <Form.Control
    as="textarea"
    className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
    disabled={false}
    floatingLabel="Add comments (Optional)"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
    value="criterion value"
  />
 </Form.Group>
@@ -20,9 +21,10 @@ exports[`Criterion Feedback snapshot feedback is configured to required 1`] = `
  <Form.Control
    as="textarea"
    className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
    disabled={false}
    floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
    value="criterion value"
  />
 </Form.Group>
@@ -33,13 +35,15 @@ exports[`Criterion Feedback snapshot feedback value is invalid 1`] = `
  <Form.Control
    as="textarea"
    className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
    disabled={false}
    floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
    value="criterion value"
  />
  <Form.Control.Feedback
    className="feedback-error-msg"
+    data-testid="criterion-feedback-error-msg"
    type="invalid"
  >
    The feedback is required
@@ -52,9 +56,10 @@ exports[`Criterion Feedback snapshot is graded 1`] = `
  <Form.Control
    as="textarea"
    className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
    disabled={true}
    floatingLabel="Comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
    value="criterion value"
  />
 </Form.Group>
@@ -65,9 +70,10 @@ exports[`Criterion Feedback snapshot is grading 1`] = `
  <Form.Control
    as="textarea"
    className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
    disabled={false}
    floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
    value="criterion value"
  />
 </Form.Group>
--- a/src/containers/CriterionContainer/snapshots/RadioCriterion.test.jsx.snap
+++ b/src/containers/CriterionContainer/snapshots/RadioCriterion.test.jsx.snap
@@ -6,19 +6,31 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
  value="selected radio option"
 >
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="1 points"
    disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name"
  >
    this label
  </Form.Radio>
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="2 points"
    disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name 2"
  >
    this label 2
@@ -32,19 +44,31 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
  value="selected radio option"
 >
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="1 points"
    disabled={true}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name"
  >
    this label
  </Form.Radio>
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="2 points"
    disabled={true}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name 2"
  >
    this label 2
@@ -58,19 +82,31 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
  value="selected radio option"
 >
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="1 points"
    disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name"
  >
    this label
  </Form.Radio>
  <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
    description="2 points"
    disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
    value="option name 2"
  >
    this label 2
--- a/src/containers/CriterionContainer/snapshots/ReviewCriterion.test.jsx.snap
+++ b/src/containers/CriterionContainer/snapshots/ReviewCriterion.test.jsx.snap
@@ -6,23 +6,26 @@ exports[`Review Crition Container snapshot 1`] = `
 >
  <div
    className="criteria-option"
+    data-testid="criteria-option"
    key="option name"
  >
    <div>
      <Form.Label
        className="option-label"
+        data-testid="option-label"
      >
        this label
      </Form.Label>
      <FormControlFeedback
        className="option-points"
+        data-testid="option-points"
      >
        <FormattedMessage
          defaultMessage="{points} points"
          description="criterion option point value display"
          id="ora-grading.RadioCriterion.optionPoints"
          values={
-            Object {
+            {
              "points": 1,
            }
          }
@@ -32,23 +35,26 @@ exports[`Review Crition Container snapshot 1`] = `
  </div>
  <div
    className="criteria-option"
+    data-testid="criteria-option"
    key="option name 2"
  >
    <div>
      <Form.Label
        className="option-label"
+        data-testid="option-label"
      >
        this label 2
      </Form.Label>
      <FormControlFeedback
        className="option-points"
+        data-testid="option-points"
      >
        <FormattedMessage
          defaultMessage="{points} points"
          description="criterion option point value display"
          id="ora-grading.RadioCriterion.optionPoints"
          values={
-            Object {
+            {
              "points": 2,
            }
          }
--- a/src/containers/CriterionContainer/snapshots/index.test.jsx.snap
+++ b/src/containers/CriterionContainer/snapshots/index.test.jsx.snap
@@ -13,28 +13,31 @@ exports[`Criterion Container snapshot is graded and is not grading 1`] = `
    <InfoPopover>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name"
      >
        <strong>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <RadioCriterion
      isGrading={false}
@@ -61,28 +64,31 @@ exports[`Criterion Container snapshot is ungraded and is grading 1`] = `
    <InfoPopover>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name"
      >
        <strong>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <RadioCriterion
      isGrading={true}
@@ -109,28 +115,31 @@ exports[`Criterion Container snapshot is ungraded and is not grading 1`] = `
    <InfoPopover>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name"
      >
        <strong>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <ReviewCriterion
      orderNum={1}
--- a/src/containers/CriterionContainer/index.jsx
+++ b/src/containers/CriterionContainer/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';

 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
@@ -25,7 +25,7 @@ export const CriterionContainer = (props) => {
        <span className="criteria-title">{config.prompt}</span>
        <InfoPopover>
          {config.options.map((option) => (
-            <div key={option.name} className="help-popover-option">
+            <div key={option.name} className="help-popover-option" data-testid="help-popover-option">
              <strong>{option.label}</strong>
              <br />
              {option.explanation}
@@ -33,7 +33,7 @@ export const CriterionContainer = (props) => {
          ))}
        </InfoPopover>
      </Form.Label>
-      <div className="rubric-criteria">
+      <div className="rubric-criteria" data-testid="rubric-criteria">
        {isGrading || gradeStatus === gradeStatuses.graded ? (
          <RadioCriterion orderNum={orderNum} isGrading={isGrading} />
        ) : (
--- a/src/containers/CriterionContainer/index.test.jsx
+++ b/src/containers/CriterionContainer/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
@@ -34,14 +34,14 @@ describe('Criterion Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 2,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -58,61 +58,51 @@ describe('Criterion Container', () => {

  describe('snapshot', () => {
    test('is ungraded and is grading', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('is ungraded and is not grading', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      expect(el).toMatchSnapshot();
+      el = shallow(<CriterionContainer {...props} isGrading={false} />);
+      expect(el.snapshot).toMatchSnapshot();
    });

    test('is graded and is not grading', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      expect(el).toMatchSnapshot();
+      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      expect(el.snapshot).toMatchSnapshot();
    });
  });

  describe('component', () => {
    test('rendering and all of the option show up', () => {
      expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.find('.help-popover-option');
+      const optionsEl = el.instance.findByTestId('help-popover-option');
      expect(optionsEl.length).toEqual(props.config.options.length);
      optionsEl.forEach((optionEl, i) => {
-        expect(optionEl.key()).toEqual(props.config.options[i].name);
-        expect(optionEl.text()).toContain(props.config.options[i].explanation);
+        expect(optionEl.props.key).toEqual(props.config.options[i].name);
+        expect(optionEl.children[2].el).toContain(props.config.options[i].explanation);
      });
    });

    test('is ungraded and is grading (Radio criterion get render)', () => {
-      const rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.children(0).name()).toEqual('RadioCriterion');
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
    });

    test('is ungraded and is not grading (Review criterion get render)', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      const rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.children(0).name()).toEqual('ReviewCriterion');
+      el = shallow(<CriterionContainer {...props} isGrading={false} />);
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('ReviewCriterion');
    });

    test('is graded and is not grading (Radio criterion get render)', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      const rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.children(0).name()).toEqual('RadioCriterion');
+      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
    });
  });

  describe('mapStateToProps', () => {
-    const testState = { abitaryState: 'some data' };
+    const testState = { arbitraryState: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/messages.js
+++ b/src/containers/CriterionContainer/messages.js
@@ -14,7 +14,7 @@ const messages = defineMessages({
  optional: {
    id: 'ora-grading.CriterionFeedback.optional',
    defaultMessage: '(Optional)',
-    description: 'addtional label for optional feedback field',
+    description: 'additional label for optional feedback field',
  },
  optionPoints: {
    id: 'ora-grading.RadioCriterion.optionPoints',
--- a/src/containers/DemoWarning/DemoWarning.test.jsx
+++ b/src/containers/DemoWarning/DemoWarning.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { selectors } from 'data/redux';
 import { DemoWarning, mapStateToProps } from '.';
@@ -16,12 +16,12 @@ describe('DemoWarning component', () => {
  describe('snapshots', () => {
    test('does not render if disabled flag is missing', () => {
      el = shallow(<DemoWarning hide />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(true);
    });
    test('snapshot: disabled flag is present', () => {
      el = shallow(<DemoWarning hide={false} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(false);
    });
  });
--- a/src/containers/DemoWarning/snapshots/DemoWarning.test.jsx.snap
+++ b/src/containers/DemoWarning/snapshots/DemoWarning.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `""`;
+exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `null`;

 exports[`DemoWarning component snapshots snapshot: disabled flag is present 1`] = `
 <Alert
--- a/src/containers/DemoWarning/index.jsx
+++ b/src/containers/DemoWarning/index.jsx
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';

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

 import { selectors } from 'data/redux';
 import messages from './messages';
--- a/src/containers/ListView/EmptySubmission.jsx
+++ b/src/containers/ListView/EmptySubmission.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';

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

 import urls from 'data/services/lms/urls';
 import emptyStateSVG from './assets/empty-state.svg';
--- a/src/containers/ListView/EmptySubmission.test.jsx
+++ b/src/containers/ListView/EmptySubmission.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';

 import urls from 'data/services/lms/urls';

@@ -22,11 +22,11 @@ describe('EmptySubmission component', () => {
      el = shallow(<EmptySubmission {...props} />);
    });
    test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
    });
    test('openResponse destination', () => {
      expect(
-        el.find(Hyperlink).at(0).props().destination,
+        el.instance.findByType(Hyperlink)[0].props.destination,
      ).toEqual(urls.openResponse(props.courseId));
    });
  });
--- a/src/containers/ListView/FilterStatusComponent.jsx
+++ b/src/containers/ListView/FilterStatusComponent.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, DataTableContext } from '@edx/paragon';
+import { Button, DataTableContext } from '@openedx/paragon';

 import * as module from './FilterStatusComponent';

--- a/src/containers/ListView/FilterStatusComponent.test.jsx
+++ b/src/containers/ListView/FilterStatusComponent.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import * as module from './FilterStatusComponent';

@@ -71,20 +71,20 @@ describe('FilterStatusComponent component', () => {
      test('showFilteredFields', () => {
        mockHooks(hookProps);
        const el = shallow(<FilterStatusComponent {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
      test('showFilteredFields=false - hide filterTexts', () => {
        mockHooks(hookProps);
        const el = shallow(
          <FilterStatusComponent {...props} showFilteredFields={false} />,
        );
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
    });
    test('without filters', () => {
      mockHooks({});
      const el = shallow(<FilterStatusComponent {...props} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(true);
    });
  });
--- a/src/containers/ListView/ListError.jsx
+++ b/src/containers/ListView/ListError.jsx
@@ -6,8 +6,8 @@ import {
  Alert,
  Button,
  Hyperlink,
-} from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import urls from 'data/services/lms/urls';
--- a/src/containers/ListView/ListError.test.jsx
+++ b/src/containers/ListView/ListError.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { selectors, thunkActions } from 'data/redux';

@@ -45,7 +45,7 @@ describe('ListError component', () => {
        el = shallow(<ListError {...props} />);
      });
      test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
      });
    });
  });
--- a/src/containers/ListView/ListView.scss
+++ b/src/containers/ListView/ListView.scss
@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";

 span.pgn__icon.breadcrumb-arrow {
  width: 16px !important;
--- a/src/containers/ListView/ListViewBreadcrumb.jsx
+++ b/src/containers/ListView/ListViewBreadcrumb.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { ArrowBack, Launch } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { ArrowBack, Launch } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import { selectors } from 'data/redux';
--- a/src/containers/ListView/ListViewBreadcrumb.test.jsx
+++ b/src/containers/ListView/ListViewBreadcrumb.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';

 import * as constants from 'data/constants/app';
 import urls from 'data/services/lms/urls';
@@ -40,16 +40,16 @@ describe('ListViewBreadcrumb component', () => {
      el = shallow(<ListViewBreadcrumb {...props} />);
    });
    test('snapshot: empty (no list data)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
    });
    test('openResponse destination', () => {
      expect(
-        el.find(Hyperlink).at(0).props().destination,
+        el.instance.findByType(Hyperlink)[0].props.destination,
      ).toEqual(urls.openResponse(props.courseId));
    });
    test('ora destination', () => {
      expect(
-        el.find(Hyperlink).at(1).props().destination,
+        el.instance.findByType(Hyperlink)[1].props.destination,
      ).toEqual(urls.ora(props.courseId, constants.locationId()));
    });
  });
--- a/src/containers/ListView/SelectedBulkAction.jsx
+++ b/src/containers/ListView/SelectedBulkAction.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';

 import { FormattedMessage } from '@edx/frontend-platform/i18n';

--- a/src/containers/ListView/SelectedBulkAction.test.jsx
+++ b/src/containers/ListView/SelectedBulkAction.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { SelectedBulkAction } from './SelectedBulkAction';

@@ -10,7 +10,7 @@ describe('SelectedBulkAction component', () => {
  };
  test('snapshots', () => {
    const el = shallow(<SelectedBulkAction {...props} handleClick={() => jest.fn()} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
  });

  test('handleClick', () => {
--- a/src/containers/ListView/SubmissionsTable.jsx
+++ b/src/containers/ListView/SubmissionsTable.jsx
@@ -7,7 +7,7 @@ import {
  DataTable,
  TextFilter,
  MultiSelectDropdownFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';
@@ -63,8 +63,8 @@ export class SubmissionsTable extends React.Component {
  translate = (...args) => this.props.intl.formatMessage(...args);

  handleViewAllResponsesClick = (data) => () => {
-    const getsubmissionUUID = (row) => row.original.submissionUUID;
-    this.props.loadSelectionForReview(data.map(getsubmissionUUID));
+    const getSubmissionUUID = (row) => row.original.submissionUUID;
+    this.props.loadSelectionForReview(data.map(getSubmissionUUID));
  };

  render() {
@@ -74,6 +74,7 @@ export class SubmissionsTable extends React.Component {
    return (
      <div className="submissions-table">
        <DataTable
+          data-testid="data-table"
          isFilterable
          FilterStatusComponent={FilterStatusComponent}
          numBreakoutFilters={2}
--- a/src/containers/ListView/SubmissionsTable.test.jsx
+++ b/src/containers/ListView/SubmissionsTable.test.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import {
-  DataTable,
  MultiSelectDropdownFilter,
  TextFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import { selectors, thunkActions } from 'data/redux';
 import { gradingStatuses as statuses, submissionFields } from 'data/services/lms/constants';
@@ -122,7 +121,7 @@ describe('SubmissionsTable component', () => {
    });
    describe('render tests', () => {
      const mockMethod = (methodName) => {
-        el.instance()[methodName] = jest.fn().mockName(`this.${methodName}`);
+        el.instance[methodName] = jest.fn().mockName(`this.${methodName}`);
      };
      beforeEach(() => {
        el = shallow(<SubmissionsTable {...props} />);
@@ -136,23 +135,21 @@ describe('SubmissionsTable component', () => {
        });
        test('snapshot: empty (no list data)', () => {
          el = shallow(<SubmissionsTable {...props} listData={[]} />);
-          expect(el).toMatchSnapshot();
+          expect(el.snapshot).toMatchSnapshot();
          expect(el.isEmptyRender()).toEqual(true);
        });
        test('snapshot: happy path', () => {
-          expect(el.instance().render()).toMatchSnapshot();
+          expect(el.snapshot).toMatchSnapshot();
        });
        test('snapshot: team happy path', () => {
-          el.setProps({ isIndividual: false, listData: [...teamData] });
-          expect(el.instance().render()).toMatchSnapshot();
+          el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
+          expect(el.snapshot).toMatchSnapshot();
        });
      });
      describe('DataTable', () => {
-        let table;
        let tableProps;
        beforeEach(() => {
-          table = el.find(DataTable);
-          tableProps = table.props();
+          tableProps = el.instance.findByTestId('data-table')[0].props;
        });
        test.each([
          'isFilterable',
@@ -181,7 +178,7 @@ describe('SubmissionsTable component', () => {
            expect(columns[1]).toEqual({
              Header: messages.learnerSubmissionDate.defaultMessage,
              accessor: submissionFields.dateSubmitted,
-              Cell: el.instance().formatDate,
+              Cell: el.instance.children[0].props.columns[1].Cell,
              disableFilters: true,
            });
          });
@@ -189,7 +186,7 @@ describe('SubmissionsTable component', () => {
            expect(columns[2]).toEqual({
              Header: messages.grade.defaultMessage,
              accessor: submissionFields.score,
-              Cell: el.instance().formatGrade,
+              Cell: el.instance.children[0].props.columns[2].Cell,
              disableFilters: true,
            });
          });
@@ -197,18 +194,18 @@ describe('SubmissionsTable component', () => {
            expect(columns[3]).toEqual({
              Header: messages.gradingStatus.defaultMessage,
              accessor: submissionFields.gradingStatus,
-              Cell: el.instance().formatStatus,
+              Cell: el.instance.children[0].props.columns[3].Cell,
              Filter: MultiSelectDropdownFilter,
              filter: 'includesValue',
-              filterChoices: el.instance().gradeStatusOptions,
+              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
            });
          });
        });
        describe('team columns', () => {
          let columns;
          beforeEach(() => {
-            el.setProps({ isIndividual: false, listData: [...teamData] });
-            columns = el.find(DataTable).props().columns;
+            el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
+            columns = el.instance.findByTestId('data-table')[0].props.columns;
          });
          test('teamName column', () => {
            expect(columns[0]).toEqual({
@@ -220,7 +217,7 @@ describe('SubmissionsTable component', () => {
            expect(columns[1]).toEqual({
              Header: messages.teamSubmissionDate.defaultMessage,
              accessor: submissionFields.dateSubmitted,
-              Cell: el.instance().formatDate,
+              Cell: el.instance.children[0].props.columns[1].Cell,
              disableFilters: true,
            });
          });
@@ -228,7 +225,7 @@ describe('SubmissionsTable component', () => {
            expect(columns[2]).toEqual({
              Header: messages.grade.defaultMessage,
              accessor: submissionFields.score,
-              Cell: el.instance().formatGrade,
+              Cell: el.instance.children[0].props.columns[2].Cell,
              disableFilters: true,
            });
          });
@@ -236,10 +233,10 @@ describe('SubmissionsTable component', () => {
            expect(columns[3]).toEqual({
              Header: messages.gradingStatus.defaultMessage,
              accessor: submissionFields.gradingStatus,
-              Cell: el.instance().formatStatus,
+              Cell: el.instance.children[0].props.columns[3].Cell,
              Filter: MultiSelectDropdownFilter,
              filter: 'includesValue',
-              filterChoices: el.instance().gradeStatusOptions,
+              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
            });
          });
        });
@@ -251,24 +248,24 @@ describe('SubmissionsTable component', () => {
          const fakeDate = 16131215154955;
          const fakeDateString = 'test-date-string';
          const mock = jest.spyOn(Date.prototype, 'toLocaleString').mockReturnValue(fakeDateString);
-          expect(el.instance().formatDate({ value: fakeDate })).toEqual(fakeDateString);
+          expect(el.instance.children[0].props.columns[1].Cell({ value: fakeDate })).toEqual(fakeDateString);
          mock.mockRestore();
        });
      });
      describe('formatGrade method', () => {
        it('returns "-" if grade is null', () => {
-          expect(el.instance().formatGrade({ value: null })).toEqual('-');
+          expect(el.instance.children[0].props.columns[2].Cell({ value: null })).toEqual('-');
        });
        it('returns <pointsEarned>/<pointsPossible> if grade exists', () => {
          expect(
-            el.instance().formatGrade({ value: { pointsEarned: 1, pointsPossible: 10 } }),
+            el.instance.children[0].props.columns[2].Cell({ value: { pointsEarned: 1, pointsPossible: 10 } }),
          ).toEqual('1/10');
        });
      });
      describe('formatStatus method', () => {
        it('returns a StatusBadge with the given status', () => {
          const status = 'graded';
-          expect(el.instance().formatStatus({ value: 'graded' })).toEqual(
+          expect(el.instance.children[0].props.columns[3].Cell({ value: 'graded' })).toEqual(
            <StatusBadge status={status} />,
          );
        });
@@ -280,8 +277,8 @@ describe('SubmissionsTable component', () => {
            { original: { submissionUUID: '456' } },
            { original: { submissionUUID: '789' } },
          ];
-          el.instance().handleViewAllResponsesClick(data)();
-          expect(el.instance().props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']);
+          el.instance.children[0].props.tableActions[0].props.handleClick(data)();
+          expect(el.shallowRenderer._instance.props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']); // eslint-disable-line no-underscore-dangle
        });
      });
    });
--- a/src/containers/ListView/TableAction.jsx
+++ b/src/containers/ListView/TableAction.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';

 import { FormattedMessage } from '@edx/frontend-platform/i18n';

@@ -11,6 +11,7 @@ export const TableAction = ({ tableInstance, handleClick }) => (
    onClick={handleClick(tableInstance.rows)}
    variant="primary"
    className="view-all-responses-btn"
+    disabled={tableInstance.rows.length === 0}
  >
    <FormattedMessage {...messages.viewAllResponses} />
  </Button>
--- a/src/containers/ListView/TableAction.test.jsx
+++ b/src/containers/ListView/TableAction.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';

 import { TableAction } from './TableAction';

@@ -10,7 +10,16 @@ describe('TableAction component', () => {
  };
  test('snapshots', () => {
    const el = shallow(<TableAction {...props} handleClick={() => jest.fn()} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
+  });
+
+  test('Inactive Button "View All Responses"', () => {
+    const emptyProps = {
+      tableInstance: { rows: [] },
+      handleClick: jest.fn(),
+    };
+    const el = shallow(<TableAction {...emptyProps} />);
+    expect(el.snapshot).toMatchSnapshot();
  });

  test('handleClick', () => {
--- a/src/containers/ListView/snapshots/FilterStatusComponent.test.jsx.snap
+++ b/src/containers/ListView/snapshots/FilterStatusComponent.test.jsx.snap
@@ -34,4 +34,4 @@ exports[`FilterStatusComponent component snapshot with filters showFilteredField
 </div>
 `;

-exports[`FilterStatusComponent component snapshot without filters 1`] = `""`;
+exports[`FilterStatusComponent component snapshot without filters 1`] = `null`;
--- a/src/containers/ListView/snapshots/ListError.test.jsx.snap
+++ b/src/containers/ListView/snapshots/ListError.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`ListError component component render tests snapshot 1`] = `
 <Alert
  actions={
-    Array [
+    [
      <Button
        onClick={[MockFunction]}
      >
@@ -30,7 +30,7 @@ exports[`ListError component component render tests snapshot 1`] = `
      description="Initialization failure alert message line 2"
      id="ora-grading.ListView.loadErrorMessage1"
      values={
-        Object {
+        {
          "backToResponses": <Hyperlink
            destination="api/openResponse/test-course-id"
          >
--- a/src/containers/ListView/snapshots/SelectedBulkAction.test.jsx.snap
+++ b/src/containers/ListView/snapshots/SelectedBulkAction.test.jsx.snap
@@ -11,7 +11,7 @@ exports[`SelectedBulkAction component snapshots 1`] = `
    description="Button text to load selected responses for review/grading"
    id="ora-grading.ListView.viewSelectedResponses"
    values={
-      Object {
+      {
        "value": 2,
      }
    }
--- a/src/containers/ListView/snapshots/SubmissionsTable.test.jsx.snap
+++ b/src/containers/ListView/snapshots/SubmissionsTable.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `""`;
+exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `null`;

 exports[`SubmissionsTable component component render tests snapshots snapshot: happy path 1`] = `
 <div
@@ -9,50 +9,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
  <DataTable
    FilterStatusComponent={[MockFunction FilterStatusComponent]}
    bulkActions={
-      Array [
+      [
        <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
        />,
      ]
    }
    columns={
-      Array [
-        Object {
+      [
+        {
          "Header": "Username",
          "accessor": "username",
        },
-        Object {
-          "Cell": [MockFunction this.formatDate],
+        {
+          "Cell": [Function],
          "Header": "Learner submission date",
          "accessor": "dateSubmitted",
          "disableFilters": true,
        },
-        Object {
-          "Cell": [MockFunction this.formatGrade],
+        {
+          "Cell": [Function],
          "Header": "Grade",
          "accessor": "score",
          "disableFilters": true,
        },
-        Object {
-          "Cell": [MockFunction this.formatStatus],
+        {
+          "Cell": [Function],
          "Filter": "MultiSelectDropdownFilter",
          "Header": "Grading status",
          "accessor": "gradingStatus",
          "filter": "includesValue",
-          "filterChoices": Array [
-            Object {
+          "filterChoices": [
+            {
              "name": "Ungraded",
              "value": "ungraded",
            },
-            Object {
+            {
              "name": "Grading Completed",
              "value": "graded",
            },
-            Object {
+            {
              "name": "Currently being graded by someone else",
              "value": "locked",
            },
-            Object {
+            {
              "name": "You are currently grading this response",
              "value": "in-progress",
            },
@@ -61,29 +61,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
      ]
    }
    data={
-      Array [
-        Object {
+      [
+        {
          "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
          "gradingStatus": "ungraded",
-          "score": Object {
+          "score": {
            "pointsEarned": 1,
            "pointsPossible": 10,
          },
          "username": "username-1",
        },
-        Object {
+        {
          "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
          "gradingStatus": "graded",
-          "score": Object {
+          "score": {
            "pointsEarned": 2,
            "pointsPossible": 10,
          },
          "username": "username-2",
        },
-        Object {
+        {
          "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
          "gradingStatus": "in-progress",
-          "score": Object {
+          "score": {
            "pointsEarned": 3,
            "pointsPossible": 10,
          },
@@ -91,13 +91,14 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
        },
      ]
    }
+    data-testid="data-table"
    defaultColumnValues={
-      Object {
+      {
        "Filter": "TextFilter",
      }
    }
    initialState={
-      Object {
+      {
        "pageIndex": 0,
        "pageSize": 10,
      }
@@ -109,9 +110,9 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
    itemCount={3}
    numBreakoutFilters={2}
    tableActions={
-      Array [
+      [
        <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
        />,
      ]
    }
@@ -130,50 +131,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
  <DataTable
    FilterStatusComponent={[MockFunction FilterStatusComponent]}
    bulkActions={
-      Array [
+      [
        <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
        />,
      ]
    }
    columns={
-      Array [
-        Object {
+      [
+        {
          "Header": "Team name",
          "accessor": "teamName",
        },
-        Object {
-          "Cell": [MockFunction this.formatDate],
+        {
+          "Cell": [Function],
          "Header": "Team submission date",
          "accessor": "dateSubmitted",
          "disableFilters": true,
        },
-        Object {
-          "Cell": [MockFunction this.formatGrade],
+        {
+          "Cell": [Function],
          "Header": "Grade",
          "accessor": "score",
          "disableFilters": true,
        },
-        Object {
-          "Cell": [MockFunction this.formatStatus],
+        {
+          "Cell": [Function],
          "Filter": "MultiSelectDropdownFilter",
          "Header": "Grading status",
          "accessor": "gradingStatus",
          "filter": "includesValue",
-          "filterChoices": Array [
-            Object {
+          "filterChoices": [
+            {
              "name": "Ungraded",
              "value": "ungraded",
            },
-            Object {
+            {
              "name": "Grading Completed",
              "value": "graded",
            },
-            Object {
+            {
              "name": "Currently being graded by someone else",
              "value": "locked",
            },
-            Object {
+            {
              "name": "You are currently grading this response",
              "value": "in-progress",
            },
@@ -182,29 +183,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
      ]
    }
    data={
-      Array [
-        Object {
+      [
+        {
          "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
          "gradingStatus": "ungraded",
-          "score": Object {
+          "score": {
            "pointsEarned": 1,
            "pointsPossible": 10,
          },
          "teamName": "teamName-1",
        },
-        Object {
+        {
          "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
          "gradingStatus": "graded",
-          "score": Object {
+          "score": {
            "pointsEarned": 2,
            "pointsPossible": 10,
          },
          "teamName": "teamName-2",
        },
-        Object {
+        {
          "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
          "gradingStatus": "in-progress",
-          "score": Object {
+          "score": {
            "pointsEarned": 3,
            "pointsPossible": 10,
          },
@@ -212,13 +213,14 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
        },
      ]
    }
+    data-testid="data-table"
    defaultColumnValues={
-      Object {
+      {
        "Filter": "TextFilter",
      }
    }
    initialState={
-      Object {
+      {
        "pageIndex": 0,
        "pageSize": 10,
      }
@@ -230,9 +232,9 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
    itemCount={3}
    numBreakoutFilters={2}
    tableActions={
-      Array [
+      [
        <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
        />,
      ]
    }
--- a/src/containers/ListView/snapshots/TableAction.test.jsx.snap
+++ b/src/containers/ListView/snapshots/TableAction.test.jsx.snap
@@ -1,8 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`TableAction component Inactive Button "View All Responses" 1`] = `
+<Button
+  className="view-all-responses-btn"
+  disabled={true}
+  variant="primary"
+>
+  <FormattedMessage
+    defaultMessage="View all responses"
+    description="Button text to load all responses for review/grading"
+    id="ora-grading.ListView.viewAllResponses"
+  />
+</Button>
+`;
+
 exports[`TableAction component snapshots 1`] = `
 <Button
  className="view-all-responses-btn"
+  disabled={false}
  onClick={[MockFunction]}
  variant="primary"
 >
--- a/src/containers/ListView/snapshots/index.test.jsx.snap
+++ b/src/containers/ListView/snapshots/index.test.jsx.snap
@@ -13,10 +13,10 @@ exports[`ListView component component snapshots loaded has data 1`] = `
 <Container
  className="py-4"
 >
-  <React.Fragment>
+  <Fragment>
    <ListViewBreadcrumb />
    <SubmissionsTable />
-  </React.Fragment>
+  </Fragment>
  <ReviewModal />
 </Container>
 `;
--- a/src/containers/ListView/index.jsx
+++ b/src/containers/ListView/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Container, Spinner } from '@edx/paragon';
+import { Container, Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import { selectors, thunkActions } from 'data/redux';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brian Smith	4825c3d68c	feat: import `FooterSlot` from component package instead of slot package (#414 )	2025-04-24 12:33:01 -04:00
renovate[bot]	4e27a35e10	fix(deps): update dependency @edx/frontend-component-header to v6.4.0 (#415 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-23 20:17:57 +00:00
Stanislav Lunyachek	ad0e2af8c8	feat: ORA visual improvements	2025-04-16 16:10:15 +03:30
Brian Smith	d03e7c40d8	feat: upgrade to react 18 (#406 )	2025-04-09 15:22:36 -04:00
Régis Behmo	5a7063c123	chore: remove husky 🪓🐶 (#405 )	2025-04-09 13:56:30 +00:00
Régis Behmo	9348c4bb4c	feat: lighter build by avoiding full lodash import Incorrect lodash imports are causing MFEs to import the entire lodash library.	2025-04-03 12:42:31 +03:30
Brian Smith	5c5ff1190b	chore(deps): update `@openedx` dependencies to versions that support React 18 (#399 )	2025-03-27 16:17:00 -04:00
Jansen Kantor	7aee8562a8	Merge pull request #390 from openedx/jkantor/conflictError fix: error code expecting wrong data shape	2025-03-05 14:49:36 -05:00
Jansen Kantor	ebca59a38f	Merge branch 'master' into jkantor/conflictError	2025-03-05 14:42:07 -05:00
salman2013	f87d521bc0	chore: update catalog-info file for release data	2025-02-20 19:07:39 +03:30
Stanislav Lunyachek	5280cef554	feat: Add header styles inclusion	2025-02-20 18:19:39 +03:30
Stanislav Lunyachek	08430571ed	fix: Fix for the Paragon modal shadow, which prevents clicking on an element on the grading page	2025-02-19 18:45:39 +03:30
Jansen Kantor	3de6821c5d	Merge branch 'master' into jkantor/conflictError	2025-01-14 10:45:33 -05:00
Paulo Viadanna	fb06133a27	fix: enable scroll in grading modal	2025-01-14 19:00:42 +03:30
Jansen Kantor	12f1c72b7e	Merge branch 'master' into jkantor/conflictError	2025-01-10 14:11:49 -05:00
Jansen Kantor	ca8d08c8a0	fixup! fix: error code expecting wrong data shape	2025-01-10 14:08:32 -05:00
Jansen Kantor	30a4ca17ac	fix: error code expecting wrong data shape	2025-01-10 14:07:01 -05:00
Awais Ansari	25d76c0e59	fix: updated notifications preferences url (#389 ) * fix: updated notifiations preferences url * fix: updated test cases	2025-01-10 17:09:14 +05:00
Emad Rad	6527f505f1	chore: npm publish action removed (#366 ) We don't push MFEs to the npm registry. Achieves part of https://github.com/openedx/public-engineering/issues/284	2024-12-18 13:48:18 -05:00
milad-emami	400950cff8	feat: update react-pdf to v7 and fix worker configuration	2024-12-18 13:25:38 +03:30
Adolfo R. Brandes	0219f5cd25	chore: remove extraneous file Remove a file that was previously added by mistake.	2024-12-06 10:54:46 -03:00
Adolfo R. Brandes	fdcab456e8	fix: broken download tests Declaring `browserslist` in package.json exposed a bug in the download.js tests that wasn't causing failures before (but arguably, should): one can't use arrow functions to mock constructors because calling `new` on them doesn't work. See the NOTE under: https://jestjs.io/docs/es6-class-mocks#-module-factory-function-must-return-a-function	2024-12-06 10:54:46 -03:00
Adolfo R. Brandes	5283e7c7c6	fix: Use browserslist-config We were installing browserslist-config but not declaring it. This had the effect that webpack - and likely others - were not using it.	2024-12-06 10:54:46 -03:00
Dima Alipov	e39533c56a	fix: incorrect message for locking	2024-11-30 15:22:18 +03:30
milad-emami	212014fed9	chore: update redux-devtools-extension to @redux-devtools/extension@3.0.0	2024-11-25 12:14:34 +03:30
milad-emami	9600301a62	chore(deps): update dependency redux-mock-store to 1.5.5 Updates redux-mock-store to version 1.5.5 in both package.json and package-lock.json to ensure dependency consistency	2024-11-25 12:08:07 +03:30
Feanil Patel	1d5f64e1db	docs: Update catalog-info.yaml Correct the owner.	2024-11-20 13:14:08 -05:00
milad-emami	f5208c58aa	fix: remove fixed height from review modal body Remove height:100% property from modal body content to prevent content from sticking to bottom of page and allow proper spacing	2024-11-20 17:38:01 +03:30
milad-emami	c15680cb8c	fix: prevent radio criterion shrinking and improve alignment - Add flexShrink: 0 style to prevent radio button compression - Add align-items-center class for better vertical alignment	2024-11-20 17:36:46 +03:30
Diana Catalina Olarte	76f41439e9	fix: apply getPath to PUBLIC_PATH to allow use with CDN	2024-11-19 16:19:19 +03:30
Feanil Patel	4581cf8698	Merge pull request #371 from CodeWithEmad/chore/catalog-info chore: owner changed	2024-11-12 09:01:55 -05:00
Emad Rad	95fa32eaaa	chore: owner changed	2024-11-09 11:25:09 +03:30
Asad Ali	1f729becbe	feat: remove CTA (#347 )	2024-11-05 12:00:31 -05:00
Arslan Ashraf	7ad1df8bd0	test: Remove support for Node 18 (#365 ) Co-authored-by: Muhammad Anas <muhammad.anas@arbisoft.com>	2024-11-04 13:46:17 -05:00
Asad Ali	c9d0abe968	fix: convert notification banner to text if accounts url is not set (#362 ) * fix: convert banner to text if ACCOUNT_SETTINGS_URL is not set * refactor: refactoring * refactor: rename notificationsBannerLinkMessage to notificationsBannerPreferencesCenterMessage * refactor: remove lodash usage * refactor: remove lodash usage	2024-11-04 12:22:50 -05:00
Brian Smith	91e33748ab	feat(deps): update header to 5.6.0 (#363 )	2024-10-22 19:19:55 -04:00
Feanil Patel	8809f4cf16	Merge pull request #353 from openedx/feanil/ubuntu_upgrade build: Switch to ubuntu-latest for builds	2024-09-20 10:28:36 -04:00
Feanil Patel	7482765aa4	build: Switch to ubuntu-latest for builds This code does not have any dependencies that are specific to any specific version of ubuntu. So instead of testing on a specific version and then needing to do work to keep the versions up-to-date, we switch to the ubuntu-latest target which should be sufficient for testing purposes. This work is being done as a part of https://github.com/openedx/platform-roadmap/issues/377 closes https://github.com/openedx/frontend-app-ora-grading/issues/345	2024-09-20 10:28:31 -04:00
Kristin Aoki	7003b6102d	Merge pull request #354 from openedx/jkantor/headingMessage fix: incorrect key breaks page	2024-09-13 09:19:34 -04:00
Jansen Kantor	d608daccb1	Merge branch 'master' into jkantor/headingMessage	2024-09-12 16:03:50 -04:00
Jansen Kantor	2208737a69	fix: incorrect key crashes page	2024-09-12 16:01:02 -04:00
Muhammad Anas	567a020061	build: Upgrade to Node 20 (#349 ) * build: Upgrade to Node 20 * refactor: updated package-lock * refactor: updated the lockfile version workflow	2024-09-06 12:23:49 -04:00
Muhammad Anas	c5d9bfb2f6	test: Add Node 20 to CI matrix (#348 ) * test: Add Node 20 to CI matrix * fix: pinning node 18 verson	2024-09-03 14:30:54 -04:00
Feanil Patel	f433d33f9d	Merge pull request #328 from openedx/bilalqamar95/jest-v29-upgrade feat: updated frontend-build & frontend-platform major versions	2024-08-07 10:01:12 -04:00
Bilal Qamar	c0816e0818	Merge branch 'master' into bilalqamar95/jest-v29-upgrade	2024-07-30 14:12:20 +05:00
Feanil Patel	c83e86bf06	Merge pull request #343 from openedx/feanil/update_maintainer docs: Make it clear that this is unmaintained.	2024-07-24 10:52:01 -04:00
Feanil Patel	b6f1a9739e	docs: Make it clear that this is unmaintained.	2024-07-19 16:06:30 -04:00
Bilal Qamar	f2b6cd4cac	Merge branch 'master' into bilalqamar95/jest-v29-upgrade	2024-07-04 16:02:16 +05:00
Adolfo R. Brandes	3092bd3980	build: Update codecov and use token (#342 ) Update codecov to the latest version and start using the org-wide token for uploads. See https://github.com/openedx/wg-frontend/issues/179	2024-06-17 12:14:02 -03:00
Bilal Qamar	20dc736278	refactor: installed jest-environment-jsdom package, updated package-lock	2024-06-03 16:08:02 +05:00
Bilal Qamar	d72beeb2d4	Merge branch 'master' of github.com:openedx/frontend-app-ora-grading into bilalqamar95/jest-v29-upgrade	2024-06-03 16:06:23 +05:00
Brian Smith	64b57df976	feat: use frontend-plugin-framework to provide a FooterSlot	2024-05-23 11:28:25 -03:00
Bilal Qamar	346b371ba2	Merge branch 'master' of github.com:openedx/frontend-app-ora-grading into bilalqamar95/jest-v29-upgrade	2024-05-16 16:04:53 +05:00
Bilal Qamar	650d708a1c	refactor: major version upgrade for react-unit-test-utils	2024-05-16 16:04:13 +05:00
Awais Ansari	1d924b4812	Merge pull request #329 from openedx/aansari/INF-1375 feat: added info banner for ORA notifications	2024-04-30 21:09:29 +05:00
Awais Ansari	31ed9410a4	test: added test cases for NotificationsBanner	2024-04-30 20:07:23 +05:00
Awais Ansari	0ba3cac532	feat: added info banner for ORA notifications	2024-04-30 19:59:26 +05:00
Bilal Qamar	b23effdb7f	feat: updated frontend-build & frontend-platform major versions	2024-04-24 13:54:40 +05:00
Bilal Qamar	5bcb6fe6f3	refactor: updated snapshots for failing tests	2024-04-15 15:44:02 +05:00
Bilal Qamar	a67f201f4d	feat: updated frontend-build major version, bumps jest to v29	2024-04-15 15:43:48 +05:00
alipov_d	9cfab58663	fix: request error for empty user list responses	2024-04-03 15:25:01 -03:00
Samir Sabri	59a7d0751b	feat!: remove Transifex calls for OEP-58	2024-03-18 15:01:30 -04:00
Jeremy Ristau	9d673e803e	Merge pull request #320 from openedx/ownership-update chore: update catalog-info owner	2024-03-15 12:54:11 -04:00
Jeremy Ristau	8438915f72	fix: use correct yaml	2024-03-15 09:25:01 -04:00
Jeremy Ristau	cc6dd20f12	chore: update catalog-info owner Continuing maintainership updates for 2U 2024.	2024-03-11 21:34:25 -04:00
Mashal Malik	f67ffdd480	refactor: replace @edx/paragon and @edx/frontend-build (#294 ) * refactor: replace @edx/paragon and @edx/frontend-build * refactor: updated edx packages * fix: fixed failing test cases by remmoving paragon mock * fix: updated lock file to fix build issues --------- Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com> Co-authored-by: Muhammad Abdullah Waheed <abdullah.waheed@arbisoft.com>	2024-02-28 13:04:23 -03:00
renovate[bot]	836df49829	fix(deps): update dependency axios to ^0.28.0 [security]	2024-02-21 22:18:09 -05:00
Syed Ali Abbas Zaidi	5bed90b659	feat: migrate enzyme to edx/react-unit-test-utils (#295 ) * feat: migrate enzyme to edx/react-unit-test-utils * refactor: remove shallowWrapper usage * refactor: remove unnecessary _instance usage	2024-02-10 00:35:02 +05:00
Feanil Patel	3b39c79fbf	Merge pull request #262 from openedx/abdullahwaheed/react-intl-to-formatjs feat: babel-plugin-react-intl to babel-plugin-formatjs migration	2024-02-08 14:58:54 -05:00
Abdullah Waheed	df7a189bcd	fix: upgraded frontend-build to fix security issue	2024-02-08 14:43:21 -05:00
Abdullah Waheed	08c51b6492	fix: reverted install package functionality	2024-02-08 14:43:21 -05:00
Abdullah Waheed	3bb3d90f3a	feat: babel-plugin-react-intl to babel-plugin-formatjs migration	2024-02-08 14:43:19 -05:00
Feanil Patel	2f48cc5767	Merge pull request #247 from openedx/mashal-m/update_lockfile refactor: updated lock file version check to use new workflow	2024-02-08 14:19:55 -05:00
mashal-m	ea43ebb031	refactor: update lock file version	2024-02-08 14:10:50 -05:00
Omar Al-Ithawi	4a708da50c	feat: tutor-mfe compatiblilty for `atlas pull` (#312 ) - install atlas - remove `--filter` to pull all languages by default - use ATLAS_OPTIONS to allow custom `--filter` - include frontend-platform in `atlas pull` Refs: FC-0012 OEP-58	2024-02-05 16:58:28 -05:00
Jenkins	f135f9a111	chore(i18n): update translations	2024-02-04 10:46:33 -05:00
Jhon Vente	44d6dc616c	fix: test problems jest dom and paragon (#311 )	2024-02-02 12:13:12 -05:00
renovate[bot]	a9771fbf49	chore(deps): update dependency @testing-library/jest-dom to v6	2024-01-26 07:48:36 -05:00
renovate[bot]	8f58b72919	fix(deps): update react-router monorepo to v6.21.3	2024-01-26 05:59:50 -05:00
renovate[bot]	8da2a60b37	fix(deps): update dependency moment to v2.30.1	2024-01-26 03:17:56 -05:00
renovate[bot]	ff3e56c3f7	fix(deps): update dependency classnames to v2.5.1	2024-01-25 22:31:21 -05:00
renovate[bot]	204586e79b	fix(deps): update dependency @edx/frontend-component-header to v4.11.1	2024-01-25 20:25:00 -05:00
renovate[bot]	31be6daac3	fix(deps): update dependency @edx/frontend-component-footer to v12.7.1	2024-01-25 17:43:59 -05:00
renovate[bot]	9f1c950080	chore(deps): update dependency node to 18.19	2024-01-25 14:50:00 -05:00
renovate[bot]	66b793a1d4	fix(deps): update dependency whatwg-fetch to v3.6.20	2024-01-25 10:24:19 -05:00
renovate[bot]	72db51b65c	fix(deps): update dependency regenerator-runtime to v0.14.1	2024-01-25 06:08:35 -05:00
renovate[bot]	9121b3f1e7	fix(deps): update dependency @zip.js/zip.js to v2.7.32	2024-01-25 04:41:05 -05:00
renovate[bot]	f7e51fd1d0	fix(deps): update dependency @testing-library/user-event to v14.5.2	2024-01-25 01:58:02 -05:00
renovate[bot]	77b4f9b47e	fix(deps): update dependency core-js to v3.35.1	2024-01-25 01:25:50 -05:00
Jenkins	3ef24a626b	chore(i18n): update translations	2023-12-17 10:46:17 -05:00
renovate[bot]	d810913038	fix(deps): update dependency @edx/brand to v1.2.3	2023-10-29 15:44:21 -04:00
renovate[bot]	a6436997bb	fix(deps): update dependency core-js to v3.33.1	2023-10-23 15:16:43 -04:00
renovate[bot]	7959a39267	fix(deps): update react-router monorepo to v6.17.0	2023-10-23 13:51:41 -04:00
Feanil Patel	3a1dbfdee5	chore: Update to the new version of brand-openedx in the new scope. (#277 ) Part of https://github.com/openedx/axim-engineering/issues/23 This updates the `@edx/brand` alias to point to the `brand-openedx` package at the `openedx` scope. This does not impact imports because this package is used via an alias.	2023-10-20 17:26:09 -04:00
renovate[bot]	9b326f1ee8	fix(deps): update dependency core-js to v3.33.0	2023-10-19 03:14:33 -04:00
renovate[bot]	3a87ebda1a	fix(deps): update dependency @testing-library/user-event to v14.5.1	2023-10-19 00:43:26 -04:00
renovate[bot]	25389ff296	fix(deps): update dependency @edx/frontend-component-header to v4.8.0	2023-10-18 20:59:19 -04:00
renovate[bot]	80f782b87f	fix(deps): update dependency @edx/frontend-component-footer to v12.5.0	2023-10-18 18:57:41 -04:00
renovate[bot]	8a2d767263	chore(deps): update dependency node to 18.18	2023-10-18 15:38:22 -04:00
renovate[bot]	264bed987e	chore(deps): update dependency jest to v29.7.0	2023-10-18 11:37:15 -04:00
renovate[bot]	738d460505	chore(deps): update dependency axios-mock-adapter to v1.22.0	2023-10-18 11:34:18 -04:00
Syed Ali Abbas Zaidi	b8f43b92a1	feat: upgrade react router to v6 (#174 ) Co-authored-by: Matthew Carter <mcarter@edx.org>	2023-10-18 11:33:42 -04:00
renovate[bot]	7afffa4509	fix(deps): update dependency whatwg-fetch to v3.6.19	2023-10-18 08:44:56 -04:00
renovate[bot]	b9ad13e354	fix(deps): update dependency @zip.js/zip.js to v2.7.30	2023-10-18 05:50:38 -04:00
renovate[bot]	8ceb9e308f	fix(deps): update dependency @reduxjs/toolkit to v1.9.7	2023-10-18 03:25:31 -04:00
renovate[bot]	b58cab1249	fix(deps): update dependency @edx/paragon to v20.46.3	2023-10-17 20:47:07 -04:00
renovate[bot]	f6d8c324d9	fix(deps): update dependency @edx/frontend-platform to v4.6.3	2023-10-17 17:42:46 -04:00
renovate[bot]	0c8d2017db	chore(deps): update dependency @edx/frontend-build to v12.9.17	2023-10-17 15:28:45 -04:00
Leangseu Kim	c644da3dcc	fix: decodeURIComponent for locationId Squashed commit of the following: commit af4d469ef241a504112dceda2cb94bff24ba4a9c Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Wed Oct 4 11:27:58 2023 +0700 update test cases commit d0c28fb99bede979fbcc8f57036ecb8027996772 Merge: 1f4d50b `5492520` Author: vunguyen-dmt <34919039+vunguyen-dmt@users.noreply.github.com> Date: Wed Oct 4 11:22:24 2023 +0700 Merge branch 'openedx:master' into fix_location_id_error commit 1f4d50b36514a6e4e9e575b938bf93b81317a21c Merge: a280a35 eb73457 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:45:05 2023 +0700 Merge branch 'fix_location_id_error' of https://github.com/vunguyen-dmt/frontend-app-ora-grading into fix_location_id_error commit a280a350fcf595dd2011018d113467a9cd88cd61 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:44:28 2023 +0700 fix: decodeURIComponent for locationId commit eb734574bd0daae0c2523904763a8d755baa31f3 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:41:28 2023 +0700 update src/data/constants/app.test.js commit 513dd324a5adc7312ac92c30164e0120784acd4b Merge: e899846 `78ada8c` Author: vunguyen-dmt <34919039+vunguyen-dmt@users.noreply.github.com> Date: Wed Jul 19 16:12:14 2023 +0700 Merge branch 'master' into fix_location_id_error commit e8998461de8ba9cbbe00a1726ad6266bde5d5ef5 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Thu Jun 8 10:29:45 2023 +0700 fix: decodeURIComponent for locationId	2023-10-10 11:30:26 -04:00
Illia Shestakov	cc11ce0f81	fix(deps): replace edx.org brand dependency with openedx brand (#199 )	2023-10-10 10:48:33 -04:00
Jenkins	549252038f	chore(i18n): update translations	2023-10-01 11:51:20 -04:00
Jenkins	192c8b4601	chore(i18n): update translations	2023-09-24 11:51:22 -04:00
Jhon Vente	70e13eccfa	[DOCS] Readme updated according OEP-55 (#194 ) * docs: README updated * docs: update some badges and content * fix: getting help url --------- Co-authored-by: Edward Zarecor <ezarecor@tcril.org> Co-authored-by: Matthew Carter <mcarter@edx.org>	2023-09-12 13:01:10 -04:00
Emad Rad	e25a5a9549	Persian language (#246 ) * fix: corrected typos explaination -> explanation Critera -> Criteria addtional -> additional arbitary -> arbitrary penging -> pending downladFiles -> downloadFiles isLoadeed -> isLoaded selectror -> selector commnents -> comments stirng -> string isGragrding -> isGrading queu -> queue seleted -> selected feecback -> feedback * feat: Persian language (fa_IR) added * chore: Persian translations added * chore: sort language codes alphabetically * chore: camelCase variable used for translated messages * chore: deprecated styling updated --------- Co-authored-by: Leangseu Kim <lkim@edx.org>	2023-09-11 09:15:52 -04:00
renovate[bot]	358263de3c	fix(deps): update dependency regenerator-runtime to ^0.14.0	2023-09-05 11:35:20 -04:00
renovate[bot]	dc7fc94ab5	fix(deps): update dependency core-js to v3.32.1	2023-09-05 10:29:35 -04:00
renovate[bot]	b643afd1b8	fix(deps): update dependency @edx/frontend-component-header to v4.6.0	2023-09-05 05:30:04 -04:00
renovate[bot]	5ac1868d30	fix(deps): update dependency @edx/frontend-component-footer to v12.2.1	2023-09-05 03:35:52 -04:00
renovate[bot]	65063df731	chore(deps): update dependency node to 18.17	2023-09-05 00:55:32 -04:00
renovate[bot]	9aee97dccb	fix(deps): update dependency whatwg-fetch to v3.6.18	2023-09-04 20:24:14 -04:00
renovate[bot]	be1ce502c8	fix(deps): update dependency @zip.js/zip.js to v2.7.28	2023-09-04 18:32:59 -04:00
renovate[bot]	19e2f35522	fix(deps): update dependency @edx/frontend-platform to v4.6.1	2023-09-04 14:25:59 -04:00
renovate[bot]	d24ab3358b	chore(deps): update dependency jest to v29.6.4	2023-09-04 12:18:38 -04:00
renovate[bot]	56803fb874	chore(deps): update dependency @edx/frontend-build to v12.9.10	2023-09-04 09:43:58 -04:00
Bilal Qamar	b7b94531aa	feat: update react & react-dom to v17 (#190 ) * feat: update react & react-dom to v17 * build: update pkgs * fix: fix lint issue * build: update paragon * refactor: updated edx packages * build: update -react-redux * refactor: updated package-lock * refactor: updated package-lock * refactor: updated package-lock --------- Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Mashal Malik <107556986+Mashal-m@users.noreply.github.com>	2023-08-28 10:36:11 -04:00
@@ -1 +1 @@
 .16