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

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=''

.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

.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

.eslintrc.js

@@ -1,12 +1,18 @@
-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: {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
+    'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
     'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
+    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'no-import-assign': 'off',
+    'no-promise-executor-return': 'off',
+    'import/no-cycle': 'off',
   },
 });
 

.github/CODEOWNERS

@@ -0,0 +1,6 @@
+# Code owners for frontend-app-ora-grading
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence, they will
+# be requested for review when someone opens a pull request.
+*       @edx/content-aurora

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/ci.yml

@@ -10,18 +10,18 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [12, 14, 16]
+    runs-on: ubuntu-latest
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-
+      uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      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: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -39,7 +39,10 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
 
     - name: Send failure notification
       if: ${{ failure() }}

.github/workflows/lockfileversion-check.yml

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

.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

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -25,3 +25,5 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint

.nvmrc

@@ -0,0 +1 @@
+20

.releaserc

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

.tx/config

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

Makefile

@@ -2,19 +2,15 @@ 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"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
-NPM_TESTS=build i18n_extract lint test is-es5
+NPM_TESTS=build i18n_extract lint test
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -44,20 +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/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
-	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && 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 frontend-platform paragon frontend-app-ora-grading
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,21 +0,0 @@
-# frontend-app-ora-grading
-
-The ORA Staff Grading App is a microfrontend (MFE) staff grading experience for Open Response Assessments (ORAs). This experience was designed to streamline the grading process and enable richer previews of submission content. 
-
-When enabled, ORAs with a staff grading step will link to this new MFE when clicking "Grade Available Responses" from the ORA or link in the instructor dashboard.
-
-## Quickstart
-
-To start the MFE and enable the feature in LMS:
-
-1. Start the MFE with `npm run start`. Take a note of the path/port (defaults to `http://localhost:1993`).
-
-2. Add the route root to `edx-platform` settings: In `edx-platform/lms/envs/private.py` or similar, add `ORA_GRADING_MICROFRONTEND_URL = 'http://localhost:1993'`
-
-3. Enable the feature: In Django Admin go to django-waffle > Flags and add/enable a new flag called `openresponseassessment.enhanced_staff_grader`.
-
-From there, visit the new experience by going to the Instructor Dashboard > Open Responses or an ORA with a Staff Graded Step and click a link to begin grading.
-
-## Resources
-
-See the [ORA Staff Grading](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading) section on ReadTheDocs for usage information.

README.rst

@@ -0,0 +1,239 @@
+frontend-app-ora-grading
+#############################
+
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
+
+
+Purpose
+*******
+
+The ORA Staff Grading App is a micro-frontend (MFE) staff grading experience
+for Open Response Assessments (ORAs). This experience was designed to
+streamline the grading process and enable richer previews of submission content
+and, eventually, replace on-platform grading workflows for ORA.
+
+When enabled, ORAs with a staff grading step will link to this new MFE when
+clicking "Grade Available Responses" from the ORA or link in the instructor
+dashboard.
+
+The ORA Staff Grader depends on the `lms/djangoapps/ora_staff_grader
+<https://github.com/openedx/edx-platform/tree/master/lms/djangoapps/ora_staff_grader>`_
+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
+==========
+
+Cloning and Startup
+--------------
+
+First, clone the repo, install code prerequisites, and start the app.
+
+.. code-block::
+
+
+  1. Clone your new repo:
+
+  ``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``.
+
+Next, enable the ORA Grading micro-frontend in `edx-platform`
+
+#. Add the path to the ORA Grading app in `edx-platform`:
+
+   #. Go to your environment settings (e.g. `edx-platform/lms/envs/private.py`)
+
+   #. Add the environment variable, ``ORA_GRADING_MICROFRONTEND_URL`` pointing
+      to the ORA Grading app location (e.g. ``http://localhost:1993``).
+
+#. Start / restart the ``edx-platform`` ``lms``.
+
+#. Enable the ORA Grading feature in Django Admin.
+
+   #. Go to Django Admin (`{lms-root}/admin`)
+
+   #. Navigate to ``django-waffle`` > ``Flags`` and click ``add/enable a new
+      flag``.
+
+   #. Add a new flag called ``openresponseassessment.enhanced_staff_grader``
+      and enable it.
+
+From there, visit an Open Response Assessment with a Staff Graded Step and
+click the "View and grade responses" button to begin grading in the ORA Staff
+Grader experience.
+
+
+Making Changes
+--------------
+
+Get / install the latest code:
+
+.. code-block::
+
+  # Grab the latest code
+  git checkout master
+  git pull
+
+  # Install/update the dev requirements
+  npm install
+
+
+Before committing:
+
+.. code-block::
+
+  # Make a new branch for your changes
+  git checkout -b <your_github_username>/<short_description>
+
+  # Using your favorite editor, edit the code to make your change.
+
+  # Run your new tests
+  npm test
+
+  # Commit all your changes
+  git commit ...
+  git push
+
+  # Open a PR and ask for review.
+
+Deploying
+=========
+
+This component follows the standard deploy process for MFEs. For details, see
+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
+************
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-ora-grading/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+License
+*******
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+************
+
+Contributions are very welcome.  Please read `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
+****************************
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-ora-grading
+
+Reporting Security Issues
+*************************
+
+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

catalog-info.yaml

@@ -0,0 +1,21 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-ora-grading'
+  description: "Frontend grading experience for Open Response Assessments (ORAs)"
+  links:
+    - url: "https://ora-grading.edx.org"
+      title: "Production Site"
+      icon: "Web"
+    - url: "https://ora-grading.stage.edx.org"
+      title: "Stage Site"
+      icon: "Web"
+  annotations:
+    openedx.org/release: "master"     
+spec:
+  owner: "user:codewithemad"
+  type: 'website'
+  lifecycle: 'production'

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

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

openedx.yaml

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

package.json

@@ -6,18 +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",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "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",
@@ -26,71 +27,69 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.5.1",
-    "@edx/paragon": "^19.9.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.1.15",
+    "@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": "^13.5.0",
+    "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.21.4",
+    "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "core-js": "3.16.2",
+    "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",
-    "history": "5.0.1",
+    "history": "5.3.0",
     "html-react-parser": "^1.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
-    "prop-types": "15.7.2",
-    "query-string": "7.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "prop-types": "15.8.1",
+    "query-string": "7.1.3",
+    "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.2.0",
-    "react-router-dom": "5.2.0",
+    "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.1.1",
+    "redux": "4.2.1",
     "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
-    "regenerator-runtime": "^0.13.9",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
     "util": "^0.12.4",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "^11.0.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
+    "@edx/browserslist-config": "^1.3.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
+    "@edx/reactifex": "^2.1.1",
+    "@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",
-    "codecov": "^3.8.3",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "es-check": "^6.0.0",
     "fetch-mock": "^9.11.0",
-    "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "27.0.6",
+    "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"
   }
 }

renovate.json

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

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

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;

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

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

src/__snapshots__/index.test.jsx.snap

@@ -1,26 +1,18 @@
 // 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`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
+<React Strict Mode>
   <AppProvider
     store={
-      Object {
+      {
         "dispatch": [Function],
         "getState": [Function],
         "replaceReducer": [Function],
@@ -28,8 +20,9 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
         Symbol(Symbol.observable): [Function],
       }
     }
+    wrapWithRouter={false}
   >
     <App />
   </AppProvider>
-</IntlProvider>
+</React Strict Mode>
 `;

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 = ({

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

src/components/DemoAlert/index.jsx

@@ -6,7 +6,7 @@ import {
   ActionRow,
   AlertModal,
   Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import messages from './messages';
 

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

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

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({

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

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">

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

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"

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

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 />

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

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

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

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',
 });

src/components/FilePreview/BaseRenderers/textHooks.test.js

@@ -81,13 +81,12 @@ describe('Text file preview hooks', () => {
         });
       });
       describe('onError', () => {
-        it('calls get on the passed url when it changes', async (done) => {
+        it('calls get on the passed url when it changes', async () => {
           axios.get.mockReturnValueOnce(Promise.reject(
             { response: { status: testValue } },
           ));
           await hooks.fetchFile({ ...props, setContent: state.setState.content });
           expect(props.onError).toHaveBeenCalledWith(testValue);
-          done();
         });
       });
     });

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>

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

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

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';
@@ -26,7 +26,7 @@ export const FileInfo = ({ onClick, children }) => (
     )}
   >
     <Button
-      size="small"
+      size="sm"
       variant="tertiary"
       onClick={onClick}
       iconAfter={InfoOutline}

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

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

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

src/components/FilePreview/__snapshots__/FileInfo.test.jsx.snap

@@ -21,7 +21,7 @@ exports[`File Preview Card component snapshot 1`] = `
   <Button
     iconAfter={[MockFunction icons.InfoOutline]}
     onClick={[MockFunction this.props.onClick]}
-    size="small"
+    size="sm"
     variant="tertiary"
   >
     <FormattedMessage

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",
     }

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

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(

src/components/Head/index.jsx

@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 
-function Head() {
+const Head = () => {
   const { formatMessage } = useIntl();
   return (
     <Helmet>
@@ -15,6 +15,6 @@ function Head() {
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
   );
-}
+};
 
 export default Head;

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

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

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}

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

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';
 
 /**

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

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

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

src/config/index.js

@@ -1,16 +0,0 @@
-const configuration = {
-  // BASE_URL: process.env.BASE_URL,
-  LMS_BASE_URL: process.env.LMS_BASE_URL,
-  // LOGIN_URL: process.env.LOGIN_URL,
-  // LOGOUT_URL: process.env.LOGOUT_URL,
-  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
-  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
-  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
-  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
-  // SEGMENT_KEY: process.env.SEGMENT_KEY,
-  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
-};
-
-const features = {};
-
-export { configuration, features };

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

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

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;

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

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

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(() => {

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';
@@ -33,27 +33,26 @@ export class RadioCriterion extends React.Component {
       isInvalid,
     } = this.props;
     return (
-      <>
-        <Form.RadioSet name={config.name} value={data}>
-          {config.options.map((option) => (
-            <Form.Radio
-              className="criteria-option"
-              key={option.name}
-              value={option.name}
-              description={intl.formatMessage(messages.optionPoints, { points: option.points })}
-              onChange={this.onChange}
-              disabled={!isGrading}
-            >
-              {option.label}
-            </Form.Radio>
-          ))}
-          {isInvalid && (
-            <Form.Control.Feedback type="invalid" className="feedback-error-msg">
-              {intl.formatMessage(messages.rubricSelectedError)}
-            </Form.Control.Feedback>
-          )}
-        </Form.RadioSet>
-      </>
+      <Form.RadioSet name={config.name} value={data}>
+        {config.options.map((option) => (
+          <Form.Radio
+            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>
+        ))}
+        {isInvalid && (
+        <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          {intl.formatMessage(messages.rubricSelectedError)}
+        </Form.Control.Feedback>
+        )}
+      </Form.RadioSet>
     );
   }
 }

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(() => {

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>

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(() => {

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>

src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap

@@ -1,91 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Radio Criterion Container snapshot is grading 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="1 points"
+    disabled={false}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="2 points"
+    disabled={false}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+</Form.RadioSet>
 `;
 
 exports[`Radio Criterion Container snapshot is not grading 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="1 points"
+    disabled={true}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={true}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={true}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="2 points"
+    disabled={true}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+</Form.RadioSet>
 `;
 
 exports[`Radio Criterion Container snapshot radio contain invalid response 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="1 points"
+    disabled={false}
+    key="option name"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-    <Form.Control.Feedback
-      className="feedback-error-msg"
-      type="invalid"
-    >
-      Rubric selection is required
-    </Form.Control.Feedback>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option align-items-center"
+    description="2 points"
+    disabled={false}
+    key="option name 2"
+    onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+  <Form.Control.Feedback
+    className="feedback-error-msg"
+    type="invalid"
+  >
+    Rubric selection is required
+  </Form.Control.Feedback>
+</Form.RadioSet>
 `;

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

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}

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} />
         ) : (

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(() => {

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

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

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

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

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

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

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

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

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

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

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;

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';
@@ -22,7 +22,7 @@ export const ListViewBreadcrumb = ({ courseId, oraName }) => (
     </Hyperlink>
     <p className="py-4">
       <span className="h3">{oraName}</span>
-      <Hyperlink className="align-middle" destination={urls.ora(courseId, locationId)}>
+      <Hyperlink className="align-middle" destination={urls.ora(courseId, locationId())}>
         <Icon src={Launch} className="d-inline-block" />
       </Hyperlink>
     </p>

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,17 +40,17 @@ 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,
-      ).toEqual(urls.ora(props.courseId, constants.locationId));
+        el.instance.findByType(Hyperlink)[1].props.destination,
+      ).toEqual(urls.ora(props.courseId, constants.locationId()));
     });
   });
   describe('mapStateToProps', () => {

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

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', () => {