feat: upgraded to node v18, added .nvmrc and updated workflows

Merge pull request #185 from arbrandes/runtime-config-palm
refactor: use getConfig
2023-06-09 09:19:12 +02:00 · 2023-06-05 16:40:57 +01:00 · 2023-05-31 12:46:23 -03:00 · 2023-05-31 12:46:23 -03:00 · 2023-05-15 10:37:48 -03:00 · 2023-05-12 15:37:12 +03:00
215 changed files with 45873 additions and 13197 deletions
--- a/.env
+++ b/.env
@@ -32,4 +32,3 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
-ACCOUNT_SETTINGS_URL=''
--- a/.env.development
+++ b/.env.development
@@ -7,6 +7,7 @@ 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'
@@ -37,4 +38,3 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-ACCOUNT_SETTINGS_URL=http://localhost:1997
--- a/.env.test
+++ b/.env.test
@@ -7,6 +7,7 @@ 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'
@@ -35,4 +36,3 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-ACCOUNT_SETTINGS_URL=http://localhost:1997
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 const config = createConfig('eslint', {
  rules: {
@@ -12,7 +11,6 @@ const config = createConfig('eslint', {
    "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',
  },
 });

--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,18 +10,17 @@ on:

 jobs:
  tests:
-    runs-on: ubuntu-latest
-
+    runs-on: ubuntu-20.04
    steps:
    - name: Checkout
      uses: actions/checkout@v3
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
 # 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-file: '.nvmrc'
+        node-version: 18.15

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

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

    - name: Send failure notification
      if: ${{ failure() }}
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,32 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create Build
+        run: npm run build
+
+      - name: Release Package
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npm semantic-release
--- a/.gitignore
+++ b/.gitignore
@@ -25,5 +25,3 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
-
-src/i18n/messages
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20
+18.15
--- a/.releaserc
+++ b/.releaserc
@@ -0,0 +1,27 @@
+{
+  "branch": "master",
+  "tagFormat": "v${version}",
+  "verifyConditions": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "analyzeCommits": "@semantic-release/commit-analyzer",
+  "generateNotes": "@semantic-release/release-notes-generator",
+  "prepare": "@semantic-release/npm",
+  "publish": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "success": [],
+  "fail": []
+}
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-ora-grading]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/30
+++ b/30
@@ -2,13 +2,15 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json

-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-ora-grading
+transifex_langs = "ar,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

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

 NPM_TESTS=build i18n_extract lint test

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

-pull_translations:
-	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
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh

-	$(intl_imports) frontend-component-footer frontend-component-header frontend-platform paragon frontend-app-ora-grading
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
--- a/README.md
+++ b/README.md
@@ -0,0 +1,21 @@
+# 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.
--- a/README.rst
+++ b/README.rst
@@ -1,239 +0,0 @@
-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
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,21 +0,0 @@
-# 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'
--- a/documentation/.ci.yml.md
+++ b/documentation/.ci.yml.md
@@ -26,3 +26,4 @@ There are only two requirements for a good `make target` name
 What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project.

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

 module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
@@ -6,6 +6,9 @@ module.exports = createConfig('jest', {
    '<rootDir>/src/setupTest.js',
  ],
  modulePaths: ['<rootDir>/src/'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
  coveragePathIgnorePatterns: [
    'src/segment.js',
    'src/postcss.config.js',
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,9 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+tags:
+  - frontend-app
+  - masters
+oeps:
+  oep-2: true    # Repository metadata
+openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,19 +6,16 @@
    "type": "git",
    "url": "git+https://github.com/edx/frontend-app-ora-grading.git"
  },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "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"
+    "watch-tests": "jest --watch",
+    "prepare": "husky install"
  },
  "author": "edX",
  "license": "AGPL-3.0",
@@ -27,69 +24,70 @@
    "access": "public"
  },
  "dependencies": {
-    "@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",
+    "@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",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/paragon": "^22.16.0",
+    "@fortawesome/react-fontawesome": "^0.1.15",
    "@redux-beacon/segment": "^1.1.0",
-    "@redux-devtools/extension": "3.0.0",
    "@reduxjs/toolkit": "^1.6.1",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/user-event": "^13.5.0",
    "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.28.0",
+    "axios": "^0.21.4",
    "classnames": "^2.3.1",
-    "core-js": "3.35.1",
+    "core-js": "3.16.2",
    "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.3.0",
+    "history": "5.0.1",
    "html-react-parser": "^1.3.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.3",
-    "prop-types": "15.8.1",
-    "query-string": "7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prop-types": "15.7.2",
+    "query-string": "7.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
    "react-helmet": "^6.1.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-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-router-redux": "^5.0.0-alpha.9",
-    "redux": "4.2.1",
+    "redux": "4.1.1",
    "redux-beacon": "^2.1.0",
+    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "^0.14.0",
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "^0.13.9",
    "reselect": "^4.0.0",
    "util": "^0.12.4",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.3.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
+    "@edx/frontend-build": "12.4",
    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "^14.3.3",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
    "axios-mock-adapter": "^1.20.0",
+    "enzyme-adapter-react-16": "^1.15.6",
    "fetch-mock": "^9.11.0",
+    "husky": "^7.0.0",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "27.0.6",
    "jest-expect-message": "^1.0.2",
    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^16.14.0",
    "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.5"
+    "redux-mock-store": "^1.5.4",
+    "semantic-release": "^19.0.3"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -1,34 +0,0 @@
-{
-  "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"]
-}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';

-import { FooterSlot } from '@edx/frontend-component-footer';
+import Footer 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 NotificationsBanner from 'containers/NotificationsBanner';
+import CTA from 'containers/CTA';
 import ListView from 'containers/ListView';

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

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

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

 #root {
  display: flex;
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+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 { App } from './App';

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

 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 = {
@@ -33,28 +41,34 @@ describe('App router component', () => {
    isEnabled: true,
  };
  test('snapshot: enabled', () => {
-    expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
+    expect(shallow(<App {...props} />)).toMatchSnapshot();
  });
  test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
+    expect(shallow(<App {...props} isEnabled={false} />)).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(el.instance.findByTestId('main')[0].children).toHaveLength(1);
-        expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
+        expect(router.find('main')).toEqual(shallow(
+          <main><ListView /></main>,
+        ));
      });
    });
+    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,
-      } = el.instance.findByTestId('header')[0].props;
+      } = router.find(Header).props();
      expect(courseTitle).toEqual(props.courseMetadata.title);
      expect(courseNumber).toEqual(props.courseMetadata.number);
      expect(courseOrg).toEqual(props.courseMetadata.org);
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -8,16 +8,15 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
      courseNumber="course-number"
      courseOrg="course-org"
      courseTitle="course-title"
-      data-testid="header"
    />
    <DemoWarning />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
+    <CTA />
+    <main>
      <ListView />
    </main>
-    <FooterSlot />
+    <Footer
+      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
+    />
  </div>
 </BrowserRouter>
 `;
@@ -30,15 +29,14 @@ exports[`App router component snapshot: enabled 1`] = `
      courseNumber="course-number"
      courseOrg="course-org"
      courseTitle="course-title"
-      data-testid="header"
    />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
+    <CTA />
+    <main>
      <ListView />
    </main>
-    <FooterSlot />
+    <Footer
+      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
+    />
  </div>
 </BrowserRouter>
 `;
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,18 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

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

 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<React Strict Mode>
+<IntlProvider
+  defaultFormats={Object {}}
+  defaultLocale="en"
+  fallbackOnEmptyString={true}
+  formats={Object {}}
+  locale="en"
+  messages={Object {}}
+  onError={[Function]}
+  onWarn={[Function]}
+  textComponent={Symbol(react.fragment)}
+>
  <AppProvider
    store={
-      {
+      Object {
        "dispatch": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
@@ -20,9 +28,8 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
        Symbol(Symbol.observable): [Function],
      }
    }
-    wrapWithRouter={false}
  >
    <App />
  </AppProvider>
-</React Strict Mode>
+</IntlProvider>
 `;
--- a/src/components/ConfirmModal.jsx
+++ b/src/components/ConfirmModal.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

 import { ConfirmModal } from './ConfirmModal';

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

 import messages from './messages';

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

 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} />).snapshot).toMatchSnapshot();
+    expect(shallow(<DemoAlert {...props} />)).toMatchSnapshot();
  });
 });
--- a/src/components/FilePopoverContent/index.test.jsx
+++ b/src/components/FilePopoverContent/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

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

    describe('behavior', () => {
      test('content', () => {
-        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));
+        expect(el.text()).toContain(props.name);
+        expect(el.text()).toContain(props.description);
+        expect(el.text()).toContain(filesize(props.size));
      });
    });
  });
--- a/src/components/FilePreview/Banners/ErrorBanner.jsx
+++ b/src/components/FilePreview/Banners/ErrorBanner.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

 import ErrorBanner from './ErrorBanner';

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

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

  describe('component', () => {
    test('children node', () => {
-      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);
+      expect(el.containsMatchingElement(children)).toEqual(true);
    });

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

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

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

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

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

 import LoadingBanner from './LoadingBanner';

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

 import ImageRenderer from './ImageRenderer';

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

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

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

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

 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} />).snapshot).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />)).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} />).snapshot).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
    });
  });
 });
--- a/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

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

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

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

+pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+
 export const errors = StrictDict({
  missingPDF: 'MissingPDFException',
 });
--- a/src/components/FilePreview/BaseRenderers/textHooks.test.js
+++ b/src/components/FilePreview/BaseRenderers/textHooks.test.js
@@ -81,12 +81,13 @@ describe('Text file preview hooks', () => {
        });
      });
      describe('onError', () => {
-        it('calls get on the passed url when it changes', async () => {
+        it('calls get on the passed url when it changes', async (done) => {
          axios.get.mockReturnValueOnce(Promise.reject(
            { response: { status: testValue } },
          ));
          await hooks.fetchFile({ ...props, setContent: state.setState.content });
          expect(props.onError).toHaveBeenCalledWith(testValue);
+          done();
        });
      });
    });
--- a/src/components/FilePreview/FileCard.jsx
+++ b/src/components/FilePreview/FileCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Card, Collapsible } from '@openedx/paragon';
+import { Card, Collapsible } from '@edx/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" data-testid="preview-panel">
+      <div className="preview-panel">
        <FileInfo><FilePopoverContent {...file} /></FileInfo>
        {children}
      </div>
--- a/src/components/FilePreview/FileCard.scss
+++ b/src/components/FilePreview/FileCard.scss
@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "@edx/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: calc(map-get($container-max-widths, "sm")/2);
+    width: map-get($container-max-widths, "sm")/2;
  }
 }
--- a/src/components/FilePreview/FileCard.test.jsx
+++ b/src/components/FilePreview/FileCard.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

-import { Collapsible } from '@openedx/paragon';
+import { Collapsible } from '@edx/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.snapshot).toMatchSnapshot();
+    expect(el).toMatchSnapshot();
  });
  describe('Component', () => {
    test('collapsible title is name header', () => {
-      const { title } = el.instance.findByType(Collapsible)[0].props;
+      const title = el.find(Collapsible).prop('title');
      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
    });
    test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
-      expect(previewPanelChildren[0].matches(
+      const previewPanelChildren = el.find('.preview-panel').children();
+      expect(previewPanelChildren.at(0).equals(
        <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
      ));
-      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
+      expect(previewPanelChildren.at(1).equals(children)).toEqual(true);
    });
  });
 });
--- a/src/components/FilePreview/FileInfo.jsx
+++ b/src/components/FilePreview/FileInfo.jsx
@@ -5,8 +5,8 @@ import {
  Button,
  OverlayTrigger,
  Popover,
-} from '@openedx/paragon';
-import { InfoOutline } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { InfoOutline } from '@edx/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="sm"
+      size="small"
      variant="tertiary"
      onClick={onClick}
      iconAfter={InfoOutline}
--- a/src/components/FilePreview/FileInfo.test.jsx
+++ b/src/components/FilePreview/FileInfo.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

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

 import FileInfo from './FileInfo';

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

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

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

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

 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.snapshot).toMatchSnapshot();
+    expect(el).toMatchSnapshot();
  });
  describe('Component', () => {
    test('Test component render', () => {
-      expect(el.instance.children.length).toEqual(1);
-      expect(el.instance.findByTestId('esg-help-icon').length).toEqual(1);
+      expect(el.length).toEqual(1);
+      expect(el.find('.esg-help-icon').length).toEqual(1);
    });
  });
 });
--- a/src/components/LoadingMessage.jsx
+++ b/src/components/LoadingMessage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

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

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

 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.snapshot).toMatchSnapshot();
+      expect(el).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.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
      });
      test('`locked` shows light button variant and message', () => {
        const el = render(gradingStatuses.locked);
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
      });
      test('`graded` shows success button variant and message', () => {
        const el = render(gradingStatuses.graded);
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
      });
      test('`inProgress` shows warning button variant and message', () => {
        const el = render(gradingStatuses.inProgress);
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
      });
    });
  });
--- a/src/components/snapshots/StatusBadge.test.jsx.snap
+++ b/src/components/snapshots/StatusBadge.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

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

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

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

 import { feedbackRequirement } from 'data/services/lms/constants';
@@ -51,14 +51,13 @@ 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" data-testid="criterion-feedback-error-msg">
+          <Form.Control.Feedback type="invalid" className="feedback-error-msg">
            {this.translate(messages.criterionFeedbackError)}
          </Form.Control.Feedback>
        )}
--- a/src/containers/CriterionContainer/CriterionFeedback.test.jsx
+++ b/src/containers/CriterionContainer/CriterionFeedback.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

 import { actions, selectors } from 'data/redux';
 import {
@@ -48,27 +48,34 @@ 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.snapshot).toMatchSnapshot();
+      expect(el.instance().render()).toMatchSnapshot();
    });

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

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

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

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

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

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

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

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

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

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

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

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

 import { actions, selectors } from 'data/redux';
 import { formatMessage } from 'testUtils';
@@ -40,14 +40,14 @@ describe('Radio Criterion Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explanation',
+          explanation: 'explaination',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 1,
        },
        {
-          explanation: 'explanation 2',
+          explanation: 'explaination 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -63,21 +63,25 @@ 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.snapshot).toMatchSnapshot();
+      expect(el.instance().render()).toMatchSnapshot();
    });

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

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

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

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

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

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

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

-import { Form, FormControlFeedback } from '@openedx/paragon';
+import { Form, FormControlFeedback } from '@edx/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" data-testid="criteria-option">
+      <div key={option.name} className="criteria-option">
        <div>
-          <Form.Label className="option-label" data-testid="option-label">{option.label}</Form.Label>
-          <FormControlFeedback className="option-points" data-testid="option-points">
+          <Form.Label className="option-label">{option.label}</Form.Label>
+          <FormControlFeedback className="option-points">
            <FormattedMessage {...messages.optionPoints} values={{ points: option.points }} />
          </FormControlFeedback>
        </div>
--- a/src/containers/CriterionContainer/ReviewCriterion.test.jsx
+++ b/src/containers/CriterionContainer/ReviewCriterion.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

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

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

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

-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/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" data-testid="help-popover-option">
+            <div key={option.name} className="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" data-testid="rubric-criteria">
+      <div className="rubric-criteria">
        {isGrading || gradeStatus === gradeStatuses.graded ? (
          <RadioCriterion orderNum={orderNum} isGrading={isGrading} />
        ) : (
--- a/src/containers/CriterionContainer/index.test.jsx
+++ b/src/containers/CriterionContainer/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

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

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

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

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

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

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

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

    test('is graded and is not grading (Radio criterion get render)', () => {
-      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');
+      el.setProps({
+        isGrading: false,
+        gradeStatus: gradeStatuses.graded,
+      });
+      const rubricCritera = el.find('.rubric-criteria');
+      expect(rubricCritera.children(0).name()).toEqual('RadioCriterion');
    });
  });

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

 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.snapshot).toMatchSnapshot();
+      expect(el).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(true);
    });
    test('snapshot: disabled flag is present', () => {
      el = shallow(<DemoWarning hide={false} />);
-      expect(el.snapshot).toMatchSnapshot();
+      expect(el).toMatchSnapshot();
      expect(el.isEmptyRender()).toEqual(false);
    });
  });
--- a/src/containers/DemoWarning/snapshots/DemoWarning.test.jsx.snap
+++ b/src/containers/DemoWarning/snapshots/DemoWarning.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

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

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

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

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

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

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

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

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

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

 import * as module from './FilterStatusComponent';

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

 import * as module from './FilterStatusComponent';

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

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

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

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

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

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

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

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

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

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

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

 import { SelectedBulkAction } from './SelectedBulkAction';

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

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

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

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

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

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

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

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

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

 import { TableAction } from './TableAction';

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

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

-exports[`FilterStatusComponent component snapshot without filters 1`] = `null`;
+exports[`FilterStatusComponent component snapshot without filters 1`] = `""`;
--- a/src/containers/ListView/snapshots/ListError.test.jsx.snap
+++ b/src/containers/ListView/snapshots/ListError.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`ListError component component render tests snapshot 1`] = `
 <Alert
  actions={
-    [
+    Array [
      <Button
        onClick={[MockFunction]}
      >
@@ -30,7 +30,7 @@ exports[`ListError component component render tests snapshot 1`] = `
      description="Initialization failure alert message line 2"
      id="ora-grading.ListView.loadErrorMessage1"
      values={
-        {
+        Object {
          "backToResponses": <Hyperlink
            destination="api/openResponse/test-course-id"
          >
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leangseu Kim	54c6c57b42	feat: upgraded to node v18, added .nvmrc and updated workflows	2023-06-09 09:19:12 +02:00
Adolfo R. Brandes	6722dbdce5	Merge pull request #185 from arbrandes/runtime-config-palm	2023-06-05 16:40:57 +01:00
Adolfo R. Brandes	fed06641df	refactor: use getConfig	2023-05-31 12:46:23 -03:00
Adolfo R. Brandes	689b8b48f0	feat: Support runtime configuration frontend-platform supports runtime configuration since 2.5.0 (see the PR that introduced it[1], but it requires MFE cooperation. This implements just that: by avoiding making configuration values constant, it should now be possible to change them after initialization. Almost all changes here relate to the `LMS_BASE_URL` setting, which in most places was treated as a constant. [1] openedx/frontend-platform#335	2023-05-31 12:46:23 -03:00
Adolfo R. Brandes	258f4377d8	Merge pull request #181 from raccoongang/palm/fix-location-id	2023-05-15 10:37:48 -03:00
Eugene Dyudyunov	dcdc96778c	fix: BadOraLocationResponse error Refactor the locationId constant for the subdirectory-based deployments support. Exclude the MFE's `PUBLIC_PATH` from the constant. The `window.location.pathname` example: ``` <PUBLIC_PATH>block-v1:oragrading+oragrading+oragrading+type@openassessment+block@ee217e897a954c1faa3b29317da0f2e7 ``` Where the `PUBLIC_PATH` could be: - `'/'` - for subdomain-based deployments (default) - `'/mfe-specifix-public-path/'` - for subdirectory-based deployments	2023-05-12 15:37:12 +03:00
@@ -1 +1 @@
 
 .15