Merge pull request #222 from eduNEXT/Jhony/gradebook_header_override_backport

feat: enabling header override
2021-12-20 17:20:03 +00:00 · 2021-12-20 12:10:27 -05:00 · 2021-12-20 17:08:42 +00:00 · 2021-12-20 11:58:26 -05:00 · 2021-12-06 14:43:21 +00:00 · 2021-11-30 11:13:05 +01:00
298 changed files with 16545 additions and 6537 deletions
--- a/.env
+++ b/.env
@@ -1,35 +1,32 @@
-NODE_ENV='production',
+NODE_ENV='production'
 NODE_PATH=./src
-BASE_URL=null,
-LMS_BASE_URL=null,
-LOGIN_URL=null,
-LOGOUT_URL=null,
-CSRF_TOKEN_API_PATH=null,
-REFRESH_ACCESS_TOKEN_ENDPOINT=null,
-DATA_API_BASE_URL=null,
-SEGMENT_KEY=null,
-FEATURE_FLAGS={},
-ACCESS_TOKEN_COOKIE_NAME=null,
-CSRF_COOKIE_NAME='csrftoken',
-NEW_RELIC_APP_ID=null,
-NEW_RELIC_LICENSE_KEY=null,
-SITE_NAME='',
-MARKETING_SITE_BASE_URL=null,
-SUPPORT_URL=null,
-CONTACT_URL=null,
-OPEN_SOURCE_URL=null,
-TERMS_OF_SERVICE_URL=null,
-PRIVACY_POLICY_URL=null,
-FACEBOOK_URL=null,
-TWITTER_URL=null,
-YOU_TUBE_URL=null,
-LINKED_IN_URL=null,
-REDDIT_URL=null,
-APPLE_APP_STORE_URL=null,
-GOOGLE_PLAY_URL=null,
-ENTERPRISE_MARKETING_URL=null,
-ENTERPRISE_MARKETING_UTM_SOURCE=null,
-ENTERPRISE_MARKETING_UTM_CAMPAIGN=null,
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null,
-
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=null,
+BASE_URL=''
+LMS_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+CSRF_TOKEN_API_PATH=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+DATA_API_BASE_URL=''
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+ACCESS_TOKEN_COOKIE_NAME=''
+NEW_RELIC_APP_ID=''
+NEW_RELIC_LICENSE_KEY=''
+SITE_NAME=''
+MARKETING_SITE_BASE_URL=''
+SUPPORT_URL=''
+CONTACT_URL=''
+OPEN_SOURCE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
+FACEBOOK_URL=''
+TWITTER_URL=''
+YOU_TUBE_URL=''
+LINKED_IN_URL=''
+REDDIT_URL=''
+APPLE_APP_STORE_URL=''
+GOOGLE_PLAY_URL=''
+ENTERPRISE_MARKETING_URL=''
+ENTERPRISE_MARKETING_UTM_SOURCE=''
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
--- a/.env.development
+++ b/.env.development
@@ -14,17 +14,16 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SITE_NAME=localhost
-
 DATA_API_BASE_URL='http://localhost:8000'
 // LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
 LMS_CLIENT_ID='login-service-client-id'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 FEATURE_FLAGS={}
-CSRF_COOKIE_NAME='csrftoken'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 SUPPORT_URL='http://localhost:18000/support'
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
 FACEBOOK_URL='https://www.facebook.com'
@@ -38,5 +37,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'
-
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=null
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,13 @@
 const { createConfig } = require('@edx/frontend-build');

-const config = createConfig('eslint');
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});

 config.settings = {
  "import/resolver": {
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@master
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@ npm-debug.log
 coverage

 dist/
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl

 ### pyenv ###
 .python-version
@@ -17,3 +19,7 @@ dist/
 ### Development environments ###
 .idea
 .vscode
+
+### transifex ###
+src/i18n/transifex_input.json
+temp
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[edx-platform.frontend-app-gradebook]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type = KEYVALUEJSON
+
--- a/64
+++ b/64
@@ -2,8 +2,64 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json

-validate-no-uncommitted-package-lock-changes:
-	git diff --exit-code package-lock.json
+transifex_resource = frontend-app-gradebook
+transifex_langs = "ar,fr,es_419,zh_CN"

-test:
-	npm run test 
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
+
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+NPM_TESTS=build i18n_extract lint test is-es5
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
+
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)
+
+# This target is used by Travis.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json
--- a/README.md
+++ b/README.md
@@ -22,19 +22,13 @@ For existing documentation see:

 ### What does this offer over the legacy gradebook?

-![A screenshot of the grade listings](documentation/screenshots/grade-listings.png)
-
 The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
 audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.

-![Screenshot of the grade editing interface](documentation/screenshots/grade-editing.png)
-
 UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
 scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
 ‘Homework’).

-![Screenshot of the filtering options](documentation/screenshots/grade-filtering.png)
-
 ### What does the legacy gradebook offer that this project does not?

 This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
--- a/documentation/screenshots/grade-editing.png
+++ b/documentation/screenshots/grade-editing.png
--- a/documentation/screenshots/grade-filtering.png
+++ b/documentation/screenshots/grade-filtering.png
--- a/documentation/screenshots/grade-listings.png
+++ b/documentation/screenshots/grade-listings.png
--- a/documentation/testing/test-plan.md
+++ b/documentation/testing/test-plan.md
@@ -68,33 +68,40 @@ Confirm the following workflows:
    - [ ] Clicking "Save Grade" applies the override, shows the successful "grade has been edited" banner and updates score in grades table (may take a few seconds).
    - [ ] Opening back up the "Edit Grades" modal shows the change as an entry in the override history table.

- [ ] *Masters only*: "Bulk Management" allows overriding grades in bulk.
+- [ ] *Master's (or selectively-enabled) only*: "Bulk Management" allows overriding grades in bulk.
    - Open a non-masters-track course.
-    - [ ] Verify that the "Bulk Management" tab does not appear.
    - [ ] Verify that the "Bulk Management" button does not appear.
+    - [ ] Verify that the "Download Interventions" interface does not appear.
    - Open a masters-track course.
-    - [ ] Verify that the "Bulk Management" tab appears to the right of the "Grades" tab.
-    - [ ] Verify that the "Bulk Management" button appears.
-    - Click the "Bulk Management" button. This downloads existing student/assignment info.
+    - [ ] Verify that the "Bulk Management History" button appears at the right of the header.
+    - [ ] Verify that the "Download Interventions" interface appears.
+    - [ ] Verify that the "Download Grades" button appears.
+    - [ ] Verify that the "Import Grades" button appears.
+    - Click the "Download Grades" button. This downloads existing student/assignment info.
    - [ ] Open the downloaded CSV and verify that students and assignments in the file match applied filters/searches.
-    - Add values in the "new_override-{subsection-short-id}" columns for student grades to be overridden and save the CSV file.
-    - [ ] Clicking the "Bulk Management" tab shows the Bulk Management page.
+    - Navigate to Bulk Management History tab.
+    - [ ] Clicking the "ViewBulk Management History" tab shows the Bulk Management History view.
    - [ ] The bulk management history table appears with columns: "Gradebook", "Download Summary", "Who", "When".
    - [ ] Previous bulk management imports (if applicable) appear in the table.
+    - Add values in the "new_override-{subsection-short-id}" columns for student grades to be overridden and save the CSV file.
+    - Navigate back to Gradebook view
    - Click the "Import Grades" button and select the modified CSV file.
    - [ ] Verify that the "CSV processing" banner appears.
    - Wait for processing to complete and reload the page. (Can take seconds to minutes depending on environment and size of the override.)
-    - Navigate back to the "Bulk Management" tab.
+    - [ ] Verify that Import Grades Success toast appears (and disappears after 5 seconds)
+    - Navigate back to the "Bulk Management History" view.
    - [ ] Verify that a new entry appears in the results table indicating how many students were affected by the bulk grade change.
    - Click the "Download Summary" link to see the summary of changes from the bulk grade changes.
    - [ ] Verify that students are shown with modified subsections and actions: "No Action" for unchanged users, "Success" for successful overrides.

 - [ ] *Masters only*: Interventions report shows student activity in the course.
    - Open a non-masters-track course.
-    - [ ] Verify that the "Interventions" tab does not appear.
-    - [ ] Verify that the "Interventions" button does not appear.
+    - [ ] Verify that the "View Bulk Management History" button does not appear.
+    - [ ] Verify that the "Interventions" interface does not appear.
+    - [ ] Verify that the "Download Grades" and "Import Grades" buttons do not appear.
    - Open a masters-track course.
-    - [ ] Verify that the "Interventions" tab appears to the right of the "Grades" tab.
-    - [ ] Verify that the "Interventions" button appears.
-    - Click on the "Interventions" button to generate a CSV students and activity info.
+    - [ ] Verify that the "View Bulk Management History" button appears at the right of the header.
+    - [ ] Verify that the "Interventions" interface appears.
+    - [ ] Verify that the "Download Grades" and "Import Grades" buttons appear.
+    - Click on the "Download Interventions" button to generate a CSV students and activity info.
    - Open the interventions report and verify student info and activity info appear.
--- a/documentation/testing/test-setup.md
+++ b/documentation/testing/test-setup.md
@@ -14,7 +14,7 @@ Suggested resources:
 - [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
 - [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)

-## Enable Gradebook and feature toggles for course
+## Enable Gradebook for course

 See README.md #Quickstart for more detailed instructions.

@@ -25,7 +25,13 @@ As an admin user, visit Django Admin (`{lms-url}/admin`) to modify features.
    - [ ] Set name to `grades.assume_zero_grade_if_absent`, select "Active", and click "Save"
 - In Waffle_Utils > Waffle flag course overrides:
    - [ ] Add a new flag called `grades.writeable_gradebook`, select "Force On", and enable it for your course
-    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course
+
+## Enable Bulk Management
+
+Bulk Management is an added feature to allow modifying grades in bulk via CSV upload. Bulk Management is default enabled for Master's track courses but can be selectively enabled for other courses with a waffle flag following the steps below.
+
+- In Waffle_Utils > Waffle flag course overrides:
+    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course.

 ## Create a Master's track for testing Master's-only features

--- a/jest.config.js
+++ b/jest.config.js
@@ -8,4 +8,8 @@ module.exports = createConfig('jest', {
  snapshotSerializers: [
    'enzyme-to-json/serializer',
  ],
+  coveragePathIgnorePatterns: [
+    'src/segment.js',
+    'src/postcss.config.js',
+  ],
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.28",
+  "version": "1.4.47",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1275,9 +1275,9 @@
      }
    },
    "@cospired/i18n-iso-languages": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.1.2.tgz",
-      "integrity": "sha512-XylKOsWRyQm9sNanZnppRORXTLaL34uThyBQpTFwOGAYvNg9PeYsyTTfLA1FTCh02RV+kiwt/O/y14DR/OqpWg=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.2.0.tgz",
+      "integrity": "sha512-hywY9u9apWGeLxQuRcXw7IW0XkMdXum/hr3TpmHY2fAbXMTFlhhkPCdsQeHzjxMQwTnMgXaZ4j4WOCwKtlDRCQ=="
    },
    "@edx/brand": {
      "version": "npm:@edx/brand-edx.org@1.6.1",
@@ -3241,62 +3241,96 @@
      }
    },
    "@edx/frontend-component-footer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.1.1.tgz",
-      "integrity": "sha512-NF64Dgznzy4A4nsfzC+HXAmtcmHwAAQCp17qtyUQ8a+LJhXUi/eXbrYhD8t0GboDHCI2HfRK2YOeiVJ3XjsNsw==",
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.1.6.tgz",
+      "integrity": "sha512-ls9E2Lvy0WNaZEWA7Imxq/qrw9C0HiTZRh4mavzbJsBvuo9QwZh0OsA/jam5dQnf4IlgHwGwP8cIDEujdhQ/vg==",
      "requires": {
-        "@fortawesome/fontawesome-svg-core": "1.2.32",
-        "@fortawesome/free-brands-svg-icons": "5.8.2",
-        "@fortawesome/free-regular-svg-icons": "5.8.2",
-        "@fortawesome/free-solid-svg-icons": "5.8.2",
-        "@fortawesome/react-fontawesome": "0.1.13"
+        "@fortawesome/fontawesome-svg-core": "1.2.36",
+        "@fortawesome/free-brands-svg-icons": "5.15.4",
+        "@fortawesome/free-regular-svg-icons": "5.15.4",
+        "@fortawesome/free-solid-svg-icons": "5.15.4",
+        "@fortawesome/react-fontawesome": "0.1.15"
      },
      "dependencies": {
        "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
-          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+          "version": "0.2.36",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+          "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
        },
        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
-          "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+          "version": "1.2.36",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+          "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.32"
+            "@fortawesome/fontawesome-common-types": "^0.2.36"
          }
        },
        "@fortawesome/free-brands-svg-icons": {
-          "version": "5.8.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
+          "version": "5.15.4",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+          "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
+            "@fortawesome/fontawesome-common-types": "^0.2.36"
          }
        },
        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.8.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==",
+          "version": "5.15.4",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+          "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
+            "@fortawesome/fontawesome-common-types": "^0.2.36"
          }
        },
        "@fortawesome/react-fontawesome": {
-          "version": "0.1.13",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.13.tgz",
-          "integrity": "sha512-/HrLnIft5Ks2511Pz6TxHBIctC9QalVscAC64sufQ4sJH/sXaQlG3uR9LCu6VpEwkBemgcBLrz/QPNP/ddbjDg==",
+          "version": "0.1.15",
+          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz",
+          "integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==",
          "requires": {
            "prop-types": "^15.7.2"
          }
        }
      }
    },
-    "@edx/frontend-platform": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.8.1.tgz",
-      "integrity": "sha512-oHLSamyIDuCtdS7eDzLcYs4zsAOGf4uuywnnIKg1CnlEHzUrXnfmcajbNM3Wre5jJocGH+1qACuaGLELO+3sAQ==",
+    "@edx/frontend-component-header": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.2.5.tgz",
+      "integrity": "sha512-8ZfdQBgp5beLd3r+xIxpDQT4/eYggUrzkHe4iJk322lYqmjAEHio9jrLnHv7lW/B8ooH3qZNl+sJlT2UcWRxmg==",
      "requires": {
-        "@cospired/i18n-iso-languages": "2.1.2",
+        "babel-polyfill": "6.26.0",
+        "react-responsive": "8.0.3",
+        "react-transition-group": "4.3.0"
+      },
+      "dependencies": {
+        "react-responsive": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
+          "integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
+          "requires": {
+            "hyphenate-style-name": "^1.0.0",
+            "matchmediaquery": "^0.3.0",
+            "prop-types": "^15.6.1",
+            "shallow-equal": "^1.1.0"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
+    "@edx/frontend-platform": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.9.5.tgz",
+      "integrity": "sha512-noCb39j1CeCnLFhCAKMrJUBDoyKLRv2ORfEkEPeIFxGG7b49sSFR4J/ijHXJgwJ7WhUo6+hj42Fg/Zt3xEYj7g==",
+      "requires": {
+        "@cospired/i18n-iso-languages": "2.2.0",
        "axios": "0.21.1",
        "axios-cache-adapter": "^2.5.0",
        "form-urlencoded": "4.1.4",
@@ -3310,30 +3344,15 @@
        "lodash.memoize": "4.1.2",
        "lodash.merge": "4.6.2",
        "lodash.snakecase": "4.1.1",
-        "pubsub-js": "1.7.0",
+        "pubsub-js": "1.9.3",
        "react-intl": "2.9.0",
        "universal-cookie": "4.0.4"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.21.1",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-          "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-          "requires": {
-            "follow-redirects": "^1.10.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
-        }
      }
    },
    "@edx/paragon": {
-      "version": "14.6.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.6.1.tgz",
-      "integrity": "sha512-y80VLJZ6ZYEEw+T4/BFR+rqWPyb8Q8rlQRin/BssMNbEErsZLG+JpGU6Ff/r1n3XhvXC+B1XL4dZCb+kM6Wz2w==",
+      "version": "14.16.4",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.16.4.tgz",
+      "integrity": "sha512-3af3jXEyg+ojIhWOov64VZo7LWgdLuPgS5SaaraGWpTFhcp9WnKaFxicqGtzhx9lH4RqS+SC7gua5pn2xR4UzA==",
      "requires": {
        "@fortawesome/fontawesome-svg-core": "^1.2.30",
        "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -3443,11 +3462,18 @@
      }
    },
    "@fortawesome/free-regular-svg-icons": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.2.tgz",
-      "integrity": "sha512-499WODlsDcXA9hM+Y3ZqoWj1kKhVLCHS8PnJs3zEaoPr5W6yrE9Jnp3C9Hb9KpwnRMh3IRXZ3XqxyUaQFMMRFw==",
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.18"
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.36",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+          "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+        }
      }
    },
    "@fortawesome/free-solid-svg-icons": {
@@ -4233,18 +4259,35 @@
      "resolved": "https://registry.npmjs.org/@redux-beacon/segment/-/segment-1.1.0.tgz",
      "integrity": "sha512-NLRoP3Jfx5z99YX6TFFznwXIMjqjD6/qdMZIKFRgGO8NtMWrCruA8EeQYPJZUBnuOjw6RtOA1UdjbqyRmdhc/Q=="
    },
+    "@reduxjs/toolkit": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.1.tgz",
+      "integrity": "sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==",
+      "requires": {
+        "immer": "^8.0.1",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      },
+      "dependencies": {
+        "immer": {
+          "version": "8.0.4",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.4.tgz",
+          "integrity": "sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ=="
+        }
+      }
+    },
    "@restart/context": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
    },
    "@restart/hooks": {
-      "version": "0.3.26",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
-      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
      "requires": {
-        "lodash": "^4.17.20",
-        "lodash-es": "^4.17.20"
+        "dequal": "^2.0.2"
      }
    },
    "@semantic-release/commit-analyzer": {
@@ -5119,14 +5162,6 @@
        "@types/node": "*"
      }
    },
-    "@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "requires": {
-        "classnames": "*"
-      }
-    },
    "@types/color-name": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -5260,9 +5295,9 @@
      "dev": true
    },
    "@types/react": {
-      "version": "17.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
-      "integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
+      "integrity": "sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==",
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -5934,9 +5969,9 @@
      "dev": true
    },
    "aria-hidden": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.2.tgz",
-      "integrity": "sha512-WAMH9q3vRimVqP+B0q2eDvx7IPDoY17A2fWwj5atTA/zTYJCNcS6HJ5YErZ5FO3PUHhrV0y0yR1NA0dRNm913A==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
+      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
      "requires": {
        "tslib": "^1.0.0"
      },
@@ -6162,6 +6197,23 @@
      "dev": true,
      "requires": {
        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
      }
    },
    "assert-ok": {
@@ -6250,6 +6302,14 @@
        "postcss-value-parser": "^4.1.0"
      }
    },
+    "available-typed-arrays": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
+      "integrity": "sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==",
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
    "aws-sign2": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -6264,7 +6324,6 @@
      "version": "0.21.1",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "dev": true,
      "requires": {
        "follow-redirects": "^1.10.0"
      },
@@ -6272,18 +6331,17 @@
        "follow-redirects": {
          "version": "1.13.1",
          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
-          "dev": true
+          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
        }
      }
    },
    "axios-cache-adapter": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.5.0.tgz",
-      "integrity": "sha512-YcMPdMoqmSLoZx7A5YD/PdYGuX6/Y9M2tHBhaIXvXrPeGgNnbW7nb3+uArWlT53WGHLfclnu2voMmS7jGXVg6A==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.3.tgz",
+      "integrity": "sha512-A+ZKJ9lhpjthOEp4Z3QR/a9xC4du1ALaAsejgRGrH9ef6kSDxdFrhRpulqsh9khsEnwXxGfgpUuDp1YXMNMEiQ==",
      "requires": {
        "cache-control-esm": "1.0.0",
-        "lodash": "^4.17.11"
+        "md5": "^2.2.1"
      }
    },
    "axios-mock-adapter": {
@@ -6559,7 +6617,6 @@
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
      "requires": {
        "babel-runtime": "^6.26.0",
        "core-js": "^2.5.0",
@@ -6569,14 +6626,12 @@
        "core-js": {
          "version": "2.6.11",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
-          "dev": true
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
        },
        "regenerator-runtime": {
          "version": "0.10.5",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-          "dev": true
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
        }
      }
    },
@@ -6614,7 +6669,6 @@
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
      "requires": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
@@ -6623,14 +6677,12 @@
        "core-js": {
          "version": "2.6.11",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
-          "dev": true
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
        },
        "regenerator-runtime": {
          "version": "0.11.1",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
        }
      }
    },
@@ -7808,6 +7860,11 @@
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
      "dev": true
    },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
    "check-types": {
      "version": "8.0.3",
      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -9089,6 +9146,11 @@
        "which": "^1.2.9"
      }
    },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
    "crypto-browserify": {
      "version": "3.12.0",
      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -9824,6 +9886,11 @@
      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
      "dev": true
    },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
    "des.js": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -11789,18 +11856,11 @@
      }
    },
    "focus-lock": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.8.1.tgz",
-      "integrity": "sha512-/LFZOIo82WDsyyv7h7oc0MJF9ACOvDRdx9rWPZ2pgMfNWu/z8hQDBtOchuB/0BVLmuFOZjV02YwUVzNsWx/EzA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.1.tgz",
+      "integrity": "sha512-/2Nj60Cps6yOLSO+CkVbeSKfwfns5XbX6HOedIK9PdzODP04N9c3xqOcPXayN0WsT9YjJvAnXmI0NdqNIDf5Kw==",
      "requires": {
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
+        "tslib": "^2.0.3"
      }
    },
    "follow-redirects": {
@@ -11823,6 +11883,11 @@
      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
      "dev": true
    },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
+    },
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -13619,8 +13684,7 @@
    "is-arguments": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
-      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
-      "dev": true
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
    },
    "is-arrayish": {
      "version": "0.2.1",
@@ -13649,6 +13713,11 @@
        "call-bind": "^1.0.0"
      }
    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
    "is-callable": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
@@ -13797,6 +13866,11 @@
      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
      "dev": true
    },
+    "is-generator-function": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.9.tgz",
+      "integrity": "sha512-ZJ34p1uvIfptHCN7sFTjGibB9/oBg17sHqzDLfuwhvmN/qLVvIQXRQ8licZQ35WJ8KuEQt/etnnzQFI9C9Ue/A=="
+    },
    "is-gif": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
@@ -14067,6 +14141,117 @@
        "text-extensions": "^1.0.0"
      }
    },
+    "is-typed-array": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.5.tgz",
+      "integrity": "sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==",
+      "requires": {
+        "available-typed-arrays": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.18.0-next.2",
+        "foreach": "^2.0.5",
+        "has-symbols": "^1.0.1"
+      },
+      "dependencies": {
+        "call-bind": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+          "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+          "requires": {
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.0.2"
+          }
+        },
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          },
+          "dependencies": {
+            "has-symbols": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+              "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+            }
+          }
+        },
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+          "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA=="
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        }
+      }
+    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -16656,11 +16841,6 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
    },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
    "lodash.camelcase": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -16884,7 +17064,7 @@
      "dependencies": {
        "query-string": {
          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
+          "resolved": "http://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
          "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
          "requires": {
            "strict-uri-encode": "^1.0.0"
@@ -17020,6 +17200,16 @@
        "css-mediaquery": "^0.1.2"
      }
    },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -23711,9 +23901,9 @@
      }
    },
    "pubsub-js": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.7.0.tgz",
-      "integrity": "sha512-Pb68P9qFZxnvDipHMuj9oT1FoIgBcXJ9C9eWdHCLZAnulaUoJ3+Y87RhGMYilWpun6DMWVmvK70T4RP4drZMSA=="
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.3.tgz",
+      "integrity": "sha512-FhYYlPNOywTh7zN38u5AlG67emA47w6JZd7YgdQU1w8gQbZhhIGxVM0AQosdaINHb2ALb+fhfnVyBJAt4D4IzA=="
    },
    "pump": {
      "version": "3.0.0",
@@ -23895,37 +24085,41 @@
      }
    },
    "react-bootstrap": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
-      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.1.tgz",
+      "integrity": "sha512-ojEPQ6OtyIMdLg0Smofk+85PKN6MLKQX3bU0Vwmok/4yNa8DQ2vCGhO2IgHJvT+ERQZ4X+gAQcdn6msAHSwLBg==",
      "requires": {
-        "@babel/runtime": "^7.13.8",
+        "@babel/runtime": "^7.14.0",
        "@restart/context": "^2.1.4",
        "@restart/hooks": "^0.3.26",
-        "@types/classnames": "^2.2.10",
        "@types/invariant": "^2.2.33",
        "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.9.35",
+        "@types/react": ">=16.14.8",
        "@types/react-transition-group": "^4.4.1",
        "@types/warning": "^3.0.0",
-        "classnames": "^2.2.6",
-        "dom-helpers": "^5.1.2",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
        "invariant": "^2.2.4",
        "prop-types": "^15.7.2",
        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.0",
+        "react-overlays": "^5.0.1",
        "react-transition-group": "^4.4.1",
        "uncontrollable": "^7.2.1",
        "warning": "^4.0.3"
      },
      "dependencies": {
        "@babel/runtime": {
-          "version": "7.13.17",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
-          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
+        },
+        "classnames": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
        }
      }
    },
@@ -23938,9 +24132,9 @@
      },
      "dependencies": {
        "@babel/runtime": {
-          "version": "7.13.17",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
-          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
@@ -24368,12 +24562,12 @@
      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
    },
    "react-focus-lock": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.0.tgz",
-      "integrity": "sha512-XLxj6uTXgz0US8TmqNU2jMfnXwZG0mH2r/afQqvPEaX6nyEll5LHVcEXk2XDUQ34RVeLPkO/xK5x6c/qiuSq/A==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.1.tgz",
+      "integrity": "sha512-gOToRZKVEymGEjFaTRUKgJsdYQrNosoiK7yZnXnnd8bYew4vMzk3Rxb0Q4nyrGwsFuUmgQiSAulQirA0J+v4hA==",
      "requires": {
        "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.8.1",
+        "focus-lock": "^0.9.1",
        "prop-types": "^15.6.2",
        "react-clientside-effect": "^1.2.2",
        "use-callback-ref": "^1.2.1",
@@ -24431,9 +24625,9 @@
      },
      "dependencies": {
        "@babel/runtime": {
-          "version": "7.13.17",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
-          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
@@ -24469,9 +24663,9 @@
      }
    },
    "react-remove-scroll": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.1.tgz",
-      "integrity": "sha512-K7XZySEzOHMTq7dDwcHsZA6Y7/1uX5RsWhRXVYv8rdh+y9Qz2nMwl9RX/Mwnj/j7JstCGmxyfyC0zbVGXYh3mA==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.2.tgz",
+      "integrity": "sha512-mMSIZYQF3jS2uRJXeFDRaVGA+BGs/hIryV64YUKsHFtpgwZloOUcdu0oW8K6OU8uLHt/kM5d0lUZbdpIVwgXtQ==",
      "requires": {
        "react-remove-scroll-bar": "^2.1.0",
        "react-style-singleton": "^2.1.0",
@@ -24610,9 +24804,9 @@
      }
    },
    "react-transition-group": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
      "requires": {
        "@babel/runtime": "^7.5.5",
        "dom-helpers": "^5.0.1",
@@ -24620,6 +24814,12 @@
        "prop-types": "^15.6.2"
      }
    },
+    "reactifex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz",
+      "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
+      "dev": true
+    },
    "read-pkg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -25190,6 +25390,11 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
    "resolve": {
      "version": "1.17.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -26291,6 +26496,11 @@
        "kind-of": "^6.0.2"
      }
    },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
    "shebang-command": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -28614,8 +28824,7 @@
    "tslib": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
-      "dev": true
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
    },
    "tty-browserify": {
      "version": "0.0.0",
@@ -29061,20 +29270,16 @@
      }
    },
    "util": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-      "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
-      "dev": true,
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz",
+      "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==",
      "requires": {
-        "inherits": "2.0.1"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
-          "dev": true
-        }
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "safe-buffer": "^5.1.2",
+        "which-typed-array": "^1.1.2"
      }
    },
    "util-deprecate": {
@@ -30064,6 +30269,152 @@
      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
    },
+    "which-typed-array": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.4.tgz",
+      "integrity": "sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==",
+      "requires": {
+        "available-typed-arrays": "^1.0.2",
+        "call-bind": "^1.0.0",
+        "es-abstract": "^1.18.0-next.1",
+        "foreach": "^2.0.5",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.1",
+        "is-typed-array": "^1.1.3"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          },
+          "dependencies": {
+            "call-bind": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+              "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+              "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+              }
+            },
+            "has-symbols": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+              "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+            }
+          }
+        },
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          },
+          "dependencies": {
+            "call-bind": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+              "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+              "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+              }
+            }
+          }
+        },
+        "object-inspect": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz",
+          "integrity": "sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA=="
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          },
+          "dependencies": {
+            "call-bind": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+              "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+              "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+              }
+            }
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          },
+          "dependencies": {
+            "call-bind": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+              "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+              "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+              }
+            }
+          }
+        }
+      }
+    },
    "wide-align": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.28",
+  "version": "1.4.47",
  "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
  "repository": {
    "type": "git",
@@ -10,6 +10,7 @@
    "build": "fedx-scripts webpack",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "is-es5": "es-check es5 ./dist/*.js",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
    "prepush": "npm run lint",
@@ -27,14 +28,16 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.1.1",
-    "@edx/frontend-platform": "1.8.1",
-    "@edx/paragon": "14.6.1",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.2.5",
+    "@edx/frontend-platform": "1.9.5",
+    "@edx/paragon": "14.16.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.5",
    "@redux-beacon/segment": "^1.0.0",
+    "@reduxjs/toolkit": "^1.5.1",
    "classnames": "^2.2.6",
    "core-js": "3.6.5",
    "email-prop-type": "^1.1.7",
@@ -58,6 +61,7 @@
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "regenerator-runtime": "^0.13.7",
+    "util": "^0.12.3",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
@@ -73,6 +77,7 @@
    "jest": "24.9.0",
    "react-dev-utils": "^5.0.3",
    "react-test-renderer": "^16.10.1",
+    "reactifex": "1.1.1",
    "redux-mock-store": "^1.5.3",
    "semantic-release": "^17.2.3",
    "travis-deploy-once": "^5.0.11"
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+import './App.scss';
+
+const App = () => (
+  <AppProvider store={store}>
+    <Router>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route
+              exact
+              path={routePath}
+              component={GradebookPage}
+            />
+          </Switch>
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      </div>
+    </Router>
+  </AppProvider>
+);
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@@ -9,7 +9,10 @@ $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-header/dist/index";
@import "~@edx/frontend-component-footer/dist/_footer";

-@import "./components/Gradebook/gradebook";
-@import "./components/Drawer/Drawer";
+@import "./components/GradesView/GradesView";
+@import "./components/BulkManagementHistoryView/BulkManagementHistoryView";
+@import "./components/WithSidebar/WithSidebar";
+@import "./components/GradebookFilters/GradebookFilters";
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+
+import App from './App';
+
+jest.mock('react-router-dom', () => ({
+  BrowserRouter: () => 'BrowserRouter',
+  Route: () => 'Route',
+  Switch: () => 'Switch',
+}));
+jest.mock('@edx/frontend-platform/react', () => ({
+  AppProvider: () => 'AppProvider',
+}));
+jest.mock('data/constants/app', () => ({
+  routePath: '/:courseId',
+}));
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('data/store', () => 'testStore');
+jest.mock('containers/GradebookPage', () => 'GradebookPage');
+jest.mock('@edx/frontend-component-header', () => 'Header');
+
+const logo = 'fakeLogo.png';
+let el;
+let router;
+
+describe('App router component', () => {
+  test('snapshot', () => {
+    expect(shallow(<App />)).toMatchSnapshot();
+  });
+  describe('component', () => {
+    beforeEach(() => {
+      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
+      el = shallow(<App />);
+      router = el.childAt(0);
+    });
+    describe('AppProvider', () => {
+      test('AppProvider is the parent component, passed the redux store props', () => {
+        expect(el.type()).toBe(AppProvider);
+        expect(el.props().store).toEqual(store);
+      });
+    });
+    describe('Router', () => {
+      test('first child of AppProvider', () => {
+        expect(router.type()).toBe(Router);
+      });
+      test('Header is above/outside-of the routing', () => {
+        expect(router.childAt(0).childAt(0).type()).toBe(Header);
+        expect(router.childAt(0).childAt(1).type()).toBe('main');
+      });
+      test('Routing - GradebookPage is only route', () => {
+        expect(router.find('main')).toEqual(shallow(
+          <main>
+            <Switch>
+              <Route exact path={routePath} component={GradebookPage} />
+            </Switch>
+          </main>,
+        ));
+      });
+    });
+    test('Footer logo drawn from env variable', () => {
+      expect(router.find(Footer).props().logo).toEqual(logo);
+    });
+  });
+});
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App router component snapshot 1`] = `
+<AppProvider
+  store="testStore"
+>
+  <BrowserRouter>
+    <div>
+      <Header />
+      <main>
+        <Switch>
+          <Route
+            component="GradebookPage"
+            exact={true}
+            path="/:courseId"
+          />
+        </Switch>
+      </main>
+      <Footer />
+    </div>
+  </BrowserRouter>
+</AppProvider>
+`;
--- a/src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx
+++ b/src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx
@@ -0,0 +1,54 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { connect } from 'react-redux';
+
+import { Alert } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import messages from './messages';
+
+/**
+ * <BulkManagementAlerts />
+ * Alerts to display at the top of the BulkManagement tab
+ */
+export const BulkManagementAlerts = ({
+  bulkImportError,
+  uploadSuccess,
+}) => (
+  <>
+    <Alert
+      variant="danger"
+      show={!!bulkImportError}
+      dismissible={false}
+    >
+      {bulkImportError}
+    </Alert>
+    <Alert
+      variant="success"
+      show={uploadSuccess}
+      dismissible={false}
+    >
+      <FormattedMessage {...messages.successDialog} />
+    </Alert>
+  </>
+);
+
+BulkManagementAlerts.defaultProps = {
+  bulkImportError: '',
+  uploadSuccess: false,
+};
+
+BulkManagementAlerts.propTypes = {
+  // redux
+  bulkImportError: PropTypes.string,
+  uploadSuccess: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  bulkImportError: selectors.grades.bulkImportError(state),
+  uploadSuccess: selectors.grades.uploadSuccess(state),
+});
+
+export default connect(mapStateToProps)(BulkManagementAlerts);
--- a/src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx
+++ b/src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+import messages from './messages';
+
+import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('@edx/paragon', () => ({
+  Alert: () => 'Alert',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: {
+      bulkImportError: (state) => ({ bulkImportError: state }),
+      uploadSuccess: (state) => ({ uploadSuccess: state }),
+    },
+  },
+}));
+
+const errorMessage = 'Oh noooooo';
+
+describe('BulkManagementAlerts', () => {
+  describe('component', () => {
+    let el;
+    describe('no errer, no upload success', () => {
+      beforeEach(() => {
+        el = shallow(<BulkManagementAlerts />);
+      });
+      test('snapshot - bulkImportError closed, success closed', () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('closed danger alert', () => {
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).props().show).toEqual(false);
+        expect(el.childAt(0).props().variant).toEqual('danger');
+      });
+      test('closed success alert', () => {
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).props().show).toEqual(false);
+        expect(el.childAt(1).props().variant).toEqual('success');
+      });
+    });
+    describe('no errer, no upload success', () => {
+      beforeEach(() => {
+        el = shallow(<BulkManagementAlerts uploadSuccess bulkImportError={errorMessage} />);
+      });
+      const assertions = [
+        'danger alert open with bulkImportError',
+        'success alert open with messages.successDialog',
+      ];
+      test(`snapshot - ${assertions.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('open danger alert with bulkImportError content', () => {
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).children().text()).toEqual(errorMessage);
+        expect(el.childAt(0).props().show).toEqual(true);
+      });
+      test('open success alert with messages.successDialog content', () => {
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).children().getElement()).toEqual(
+          <FormattedMessage {...messages.successDialog} />,
+        );
+        expect(el.childAt(1).props().show).toEqual(true);
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { a: 'puppy', named: 'Ember' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('bulkImportError from grades.bulkImportError', () => {
+      expect(mapped.bulkImportError).toEqual(selectors.grades.bulkImportError(testState));
+    });
+    test('uploadSuccess from grades.uploadSuccess', () => {
+      expect(mapped.uploadSuccess).toEqual(selectors.grades.uploadSuccess(testState));
+    });
+  });
+});
--- a/src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss
+++ b/src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss
@@ -0,0 +1,6 @@
+.bulk-management-history-view {
+  .help-text {
+    margin-bottom: 40px;
+    max-width: 70%;
+  }
+}
--- a/src/components/BulkManagementHistoryView/HistoryTable.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.jsx
@@ -0,0 +1,62 @@
+/* eslint-disable react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Table } from '@edx/paragon';
+
+import { bulkManagementColumns } from 'data/constants/app';
+import selectors from 'data/selectors';
+
+import ResultsSummary from './ResultsSummary';
+
+export const mapHistoryRows = ({
+  resultsSummary,
+  originalFilename,
+  user,
+  ...rest
+}) => ({
+  resultsSummary: (<ResultsSummary {...resultsSummary} />),
+  filename: (<span className="wrap-text-in-cell">{originalFilename}</span>),
+  user: (<span className="wrap-text-in-cell">{user}</span>),
+  ...rest,
+});
+
+/**
+ * <HistoryTable />
+ * Table with history of bulk management uploads, including a results summary which
+ * displays total, skipped, and failed uploads
+ */
+export const HistoryTable = ({
+  bulkManagementHistory,
+}) => (
+  <>
+    <Table
+      data={bulkManagementHistory.map(mapHistoryRows)}
+      hasFixedColumnWidths
+      columns={bulkManagementColumns}
+      className="table-striped"
+    />
+  </>
+);
+HistoryTable.defaultProps = {
+  bulkManagementHistory: [],
+};
+HistoryTable.propTypes = {
+  // redux
+  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
+    originalFilename: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+    timeUploaded: PropTypes.string.isRequired,
+    resultsSummary: PropTypes.shape({
+      rowId: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    }),
+  })),
+};
+
+export const mapStateToProps = (state) => ({
+  bulkManagementHistory: selectors.grades.bulkManagementHistoryEntries(state),
+});
+
+export default connect(mapStateToProps)(HistoryTable);
--- a/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
+++ b/src/components/BulkManagementHistoryView/HistoryTable.test.jsx
@@ -0,0 +1,109 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Table } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import { bulkManagementColumns } from 'data/constants/app';
+
+import ResultsSummary from './ResultsSummary';
+import { HistoryTable, mapStateToProps } from './HistoryTable';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('@edx/paragon', () => ({
+  Table: () => 'Table',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: {
+      bulkManagementHistoryEntries: jest.fn(state => ({ historyEntries: state })),
+    },
+  },
+}));
+jest.mock('./ResultsSummary', () => 'ResultsSummary');
+
+describe('HistoryTable', () => {
+  describe('component', () => {
+    const entry1 = {
+      originalFilename: 'blue.png',
+      user: 'Eifel',
+      timeUploaded: '65',
+      resultsSummary: {
+        rowId: 12,
+        courseId: 'Da Bu Dee',
+        text: 'Da ba daa',
+      },
+    };
+    const entry2 = {
+      originalFilename: 'allStar.jpg',
+      user: 'Smashmouth',
+      timeUploaded: '2000s?',
+      resultsSummary: {
+        courseId: 'rockstar',
+        rowId: 2,
+        text: 'all that glitters is gold',
+      },
+    };
+    const props = {
+      bulkManagementHistory: [entry1, entry2],
+    };
+    let el;
+    describe('snapshot', () => {
+      beforeEach(() => {
+        el = shallow(<HistoryTable {...props} />);
+      });
+      test('snapshot - loads formatted table', () => {
+        expect(el).toMatchSnapshot();
+      });
+      describe('history table', () => {
+        let table;
+        beforeEach(() => {
+          table = el.find(Table);
+        });
+        describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
+          const fieldAssertions = [
+            'maps resultsSummay to ResultsSummary',
+            'wraps filename and user',
+            'forwards the rest',
+          ];
+          test(`snapshot: ${fieldAssertions.join(', ')}`, () => {
+            expect(table.props().data).toMatchSnapshot();
+          });
+          test(fieldAssertions.join(', '), () => {
+            const rows = table.props().data;
+            expect(rows[0].resultsSummary).toEqual(<ResultsSummary {...entry1.resultsSummary} />);
+            expect(rows[0].user).toEqual(<span className="wrap-text-in-cell">{entry1.user}</span>);
+            expect(
+              rows[0].filename,
+            ).toEqual(<span className="wrap-text-in-cell">{entry1.originalFilename}</span>);
+            expect(rows[1].resultsSummary).toEqual(<ResultsSummary {...entry2.resultsSummary} />);
+            expect(rows[1].user).toEqual(<span className="wrap-text-in-cell">{entry2.user}</span>);
+            expect(
+              rows[1].filename,
+            ).toEqual(<span className="wrap-text-in-cell">{entry2.originalFilename}</span>);
+          });
+        });
+        test('columns from bulkManagementColumns', () => {
+          expect(table.props().columns).toEqual(bulkManagementColumns);
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { a: 'simple', test: 'state' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('bulkManagementHistory from grades.bulkManagementHistoryEntries', () => {
+      expect(
+        mapped.bulkManagementHistory,
+      ).toEqual(selectors.grades.bulkManagementHistoryEntries(testState));
+    });
+  });
+});
--- a/src/components/BulkManagementHistoryView/ResultsSummary.jsx
+++ b/src/components/BulkManagementHistoryView/ResultsSummary.jsx
@@ -0,0 +1,38 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Hyperlink, Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
+
+import lms from 'data/services/lms';
+
+/**
+ * <ResultsSummary {...{ courseId, rowId, text }} />
+ * displays a result summary cell for a single bulk management upgrade history entry.
+ * @param {string} courseId - course identifier
+ * @param {number} rowId - row/error identifier
+ * @param {string} text - summary string
+ */
+const ResultsSummary = ({
+  rowId,
+  text,
+}) => (
+  <Hyperlink
+    href={lms.urls.bulkGradesUrlByRow(rowId)}
+    destination="www.edx.org"
+    target="_blank"
+    rel="noopener noreferrer"
+    showLaunchIcon={false}
+  >
+    <Icon src={Download} className="d-inline-block" />
+    {text}
+  </Hyperlink>
+);
+
+ResultsSummary.propTypes = {
+  rowId: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default ResultsSummary;
--- a/src/components/BulkManagementHistoryView/ResultsSummary.test.jsx
+++ b/src/components/BulkManagementHistoryView/ResultsSummary.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
+
+import lms from 'data/services/lms';
+import ResultsSummary from './ResultsSummary';
+
+jest.mock('@edx/paragon', () => ({
+  Hyperlink: () => 'Hyperlink',
+  Icon: () => 'Icon',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Download: 'DownloadIcon',
+}));
+jest.mock('data/services/lms', () => ({
+  urls: {
+    bulkGradesUrlByRow: jest.fn((rowId) => ({ url: { rowId } })),
+  },
+}));
+
+describe('ResultsSummary component', () => {
+  const props = {
+    rowId: 42,
+    text: 'texty',
+  };
+  let el;
+  const assertions = [
+    'safe hyperlink with bulkGradesUrl with course and row id',
+    'download icon',
+    'results text',
+  ];
+  beforeEach(() => {
+    el = shallow(<ResultsSummary {...props} />);
+  });
+  test(`snapshot - ${assertions.join(', ')}`, () => {
+    expect(el).toMatchSnapshot();
+  });
+  test('Hyperlink has target="_blank" and rel="noopener noreferrer"', () => {
+    expect(el.props().target).toEqual('_blank');
+    expect(el.props().rel).toEqual('noopener noreferrer');
+  });
+  test('Hyperlink has href to bulkGradesUrl', () => {
+    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
+  });
+  test('displays Download Icon and text', () => {
+    const icon = el.childAt(0);
+    expect(icon.is(Icon)).toEqual(true);
+    expect(icon.props().src).toEqual(Download);
+    expect(el.childAt(1).text()).toEqual(props.text);
+  });
+});
--- a/src/components/BulkManagementHistoryView/snapshots/BulkManagementAlerts.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/BulkManagementAlerts.test.jsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementAlerts component no errer, no upload success snapshot - bulkImportError closed, success closed 1`] = `
+<Fragment>
+  <Alert
+    dismissible={false}
+    show={false}
+    variant="danger"
+  />
+  <Alert
+    dismissible={false}
+    show={false}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
+  </Alert>
+</Fragment>
+`;
+
+exports[`BulkManagementAlerts component no errer, no upload success snapshot - danger alert open with bulkImportError, success alert open with messages.successDialog 1`] = `
+<Fragment>
+  <Alert
+    dismissible={false}
+    show={true}
+    variant="danger"
+  >
+    Oh noooooo
+  </Alert>
+  <Alert
+    dismissible={false}
+    show={true}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
+  </Alert>
+</Fragment>
+`;
--- a/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/HistoryTable.test.jsx.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
+Array [
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      blue.png
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="Da Bu Dee"
+      rowId={12}
+      text="Da ba daa"
+    />,
+    "timeUploaded": "65",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Eifel
+    </span>,
+  },
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      allStar.jpg
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="rockstar"
+      rowId={2}
+      text="all that glitters is gold"
+    />,
+    "timeUploaded": "2000s?",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Smashmouth
+    </span>,
+  },
+]
+`;
+
+exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
+<Fragment>
+  <Table
+    className="table-striped"
+    columns={
+      Array [
+        Object {
+          "columnSortable": false,
+          "key": "filename",
+          "label": "Gradebook",
+          "width": "col-5",
+        },
+        Object {
+          "columnSortable": false,
+          "key": "resultsSummary",
+          "label": "Download Summary",
+          "width": "col",
+        },
+        Object {
+          "columnSortable": false,
+          "key": "user",
+          "label": "Who",
+          "width": "col-1",
+        },
+        Object {
+          "columnSortable": false,
+          "key": "timeUploaded",
+          "label": "When",
+          "width": "col",
+        },
+      ]
+    }
+    data={
+      Array [
+        Object {
+          "filename": <span
+            className="wrap-text-in-cell"
+          >
+            blue.png
+          </span>,
+          "resultsSummary": <ResultsSummary
+            courseId="Da Bu Dee"
+            rowId={12}
+            text="Da ba daa"
+          />,
+          "timeUploaded": "65",
+          "user": <span
+            className="wrap-text-in-cell"
+          >
+            Eifel
+          </span>,
+        },
+        Object {
+          "filename": <span
+            className="wrap-text-in-cell"
+          >
+            allStar.jpg
+          </span>,
+          "resultsSummary": <ResultsSummary
+            courseId="rockstar"
+            rowId={2}
+            text="all that glitters is gold"
+          />,
+          "timeUploaded": "2000s?",
+          "user": <span
+            className="wrap-text-in-cell"
+          >
+            Smashmouth
+          </span>,
+        },
+      ]
+    }
+    hasFixedColumnWidths={true}
+  />
+</Fragment>
+`;
--- a/src/components/BulkManagementHistoryView/snapshots/ResultsSummary.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/ResultsSummary.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl with course and row id, download icon, results text 1`] = `
+<Hyperlink
+  destination="www.edx.org"
+  href={
+    Object {
+      "url": Object {
+        "rowId": 42,
+      },
+    }
+  }
+  rel="noopener noreferrer"
+  showLaunchIcon={false}
+  target="_blank"
+>
+  <Icon
+    className="d-inline-block"
+    src="DownloadIcon"
+  />
+  texty
+</Hyperlink>
+`;
--- a/src/components/BulkManagementHistoryView/snapshots/index.test.jsx.snap
+++ b/src/components/BulkManagementHistoryView/snapshots/index.test.jsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementHistoryView component snapshot snapshot - loads heading from messages.BulkManagementHistoryView.heading, <BulkManagementAlerts />, <HistoryTable /> 1`] = `
+<div
+  className="bulk-management-history-view"
+>
+  <h4>
+    <FormattedMessage
+      defaultMessage="Bulk Management History"
+      description="Heading text for BulkManagement History Tab"
+      id="gradebook.BulkManagementHistoryView.heading"
+    />
+  </h4>
+  <p
+    className="help-text"
+  >
+    <FormattedMessage
+      defaultMessage="Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override."
+      description="Bulk Management History View help text"
+      id="gradebook.BulkManagementHistoryView"
+    />
+  </p>
+  <BulkManagementAlerts />
+  <HistoryTable />
+</div>
+`;
--- a/src/components/BulkManagementHistoryView/index.jsx
+++ b/src/components/BulkManagementHistoryView/index.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import HistoryTable from './HistoryTable';
+
+/**
+ * <BulkManagementHistoryView />
+ * top-level view for managing uploads of bulk management override csvs.
+ */
+export const BulkManagementHistoryView = () => (
+  <div className="bulk-management-history-view">
+    <h4><FormattedMessage {...messages.heading} /></h4>
+    <p className="help-text">
+      <FormattedMessage {...messages.helpText} />
+    </p>
+    <BulkManagementAlerts />
+    <HistoryTable />
+  </div>
+);
+
+export default BulkManagementHistoryView;
--- a/src/components/BulkManagementHistoryView/index.test.jsx
+++ b/src/components/BulkManagementHistoryView/index.test.jsx
@@ -0,0 +1,44 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { BulkManagementHistoryView } from '.';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import HistoryTable from './HistoryTable';
+import messages from './messages';
+
+jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
+jest.mock('./HistoryTable', () => 'HistoryTable');
+
+describe('BulkManagementHistoryView', () => {
+  describe('component', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<BulkManagementHistoryView />);
+    });
+    describe('snapshot', () => {
+      const snapshotSegments = [
+        'heading from messages.BulkManagementHistoryView.heading',
+        '<BulkManagementAlerts />',
+        '<HistoryTable />',
+      ];
+      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('heading - h4 loaded from messages', () => {
+        const heading = el.find('h4');
+        expect(heading.getElement()).toEqual((
+          <h4>
+            <FormattedMessage {...messages.heading} />
+          </h4>
+        ));
+      });
+      test('heading, then alerts, then upload form, then table', () => {
+        expect(el.childAt(0).is('h4')).toEqual(true);
+        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
+        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
+      });
+    });
+  });
+});
--- a/src/components/BulkManagementHistoryView/messages.js
+++ b/src/components/BulkManagementHistoryView/messages.js
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'gradebook.BulkManagementHistoryView.heading',
+    defaultMessage: 'Bulk Management History',
+    description: 'Heading text for BulkManagement History Tab',
+  },
+  helpText: {
+    id: 'gradebook.BulkManagementHistoryView',
+    defaultMessage: 'Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override.',
+    description: 'Bulk Management History View help text',
+  },
+  successDialog: {
+    id: 'gradebook.BulkManagementHistoryView.successDialog',
+    defaultMessage: 'CSV processing. File uploads may take several minutes to complete.',
+    description: 'Success Dialog message in BulkManagement Tab File Upload Form',
+  },
+});
+
+export default messages;
--- a/src/components/Drawer/Drawer.scss
+++ b/src/components/Drawer/Drawer.scss
@@ -1,48 +0,0 @@
-$drawer-width: 350px;
-
-.drawer-contents {
-    overflow-x: auto;
-    transition: margin 300ms cubic-bezier(0.4,0,0.2,1);
-    margin-left: 0;
-    .drawer.open + & {
-        margin-left: $drawer-width;
-    }
-    &.opened {
-        width: calc(100vw - #{$drawer-width});
-    }
-}
-
-.drawer-contents {
-    overflow-x: auto;
-    transition: margin 300ms cubic-bezier(0.4,0,0.2,1);
-    margin-left: 0;
-    .drawer.open + & {
-        margin-left: $drawer-width;
-    }
-    &.opened {
-        width: calc(100vw - #{$drawer-width});
-    }
-}
-
-.drawer-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: 15px;
-}
-
-.drawer-container .collapsible {
-    margin-bottom: 1em;
-}
-
-.drawer {
-    height: 100%;
-    width: $drawer-width;
-    position: absolute;
-    transform: translateX(-$drawer-width);
-    flex-direction: column;
-    transition: transform 300ms cubic-bezier(0.4,0,0.2,1);
-    &.open {
-        transform: translateX(0%);
-    }
-}
--- a/src/components/Drawer/index.jsx
+++ b/src/components/Drawer/index.jsx
@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Button } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-
-export default class Drawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: props.initiallyOpen,
-      transitioning: false,
-    };
-  }
-
-  close = () => {
-    if (this.state.open) {
-      this.toggleOpen();
-    }
-  };
-
-  toggleOpen = () => {
-    this.setState({ transitioning: true });
-    // defer the transition to the next repaint so we can be sure that
-    // opening drawer is visible before it transitions
-    // (the start state of the opening animation doesn't work if the element starts hidden)
-    this.deferToNextRepaint(() => this.setState(prevState => ({ open: !prevState.open })));
-  };
-
-  handleSlideDone = (e) => {
-    if (e.currentTarget === e.target) {
-      this.setState({ transitioning: false });
-    }
-  };
-
-  deferToNextRepaint(callback) {
-    window.requestAnimationFrame(() => window.setTimeout(callback, 0));
-  }
-
-  render() {
-    return (
-      <div className="d-flex drawer-container">
-        <aside
-          className={classNames(
-            'drawer',
-            {
-              open: this.state.open,
-              'd-none': !this.state.transitioning && !this.state.open,
-            },
-          )}
-          onTransitionEnd={this.handleSlideDone}
-        >
-          <div className="drawer-header">
-            <h2>{this.props.title}</h2>
-            <Button
-              className="p-1"
-              onClick={this.close}
-              aria-label="Close Filters"
-            >
-              <FontAwesomeIcon icon={faTimes} />
-            </Button>
-          </div>
-          {this.props.children}
-        </aside>
-        <div
-          className={classNames(
-            'drawer-contents',
-            'position-relative',
-            !this.state.drawerTransitioning && this.state.drawerOpen && 'opened',
-          )}
-        >
-          {this.props.mainContent(this.toggleOpen)}
-        </div>
-      </div>
-    );
-  }
-}
-
-Drawer.propTypes = {
-  initiallyOpen: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired,
-  mainContent: PropTypes.func.isRequired,
-  title: PropTypes.node.isRequired,
-};
--- a/src/components/EdxHeader/snapshots/test.jsx.snap
+++ b/src/components/EdxHeader/snapshots/test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header snapshot - has edx link with logo url 1`] = `
+<div
+  className="mb-3"
+>
+  <header
+    className="d-flex justify-content-center align-items-center p-3 border-bottom-blue"
+  >
+    <Hyperlink
+      destination="undefined/dashboard"
+    >
+      <img
+        alt="edX logo"
+        height="30"
+        src="www.ourLogo.url"
+        width="60"
+      />
+    </Hyperlink>
+    <div />
+  </header>
+</div>
+`;
--- a/src/components/EdxHeader/index.jsx
+++ b/src/components/EdxHeader/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Hyperlink } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+/**
+ * <EdxHeader />
+ * Gradebook MFE app header.
+ * Displays edx logo, linked to lms dashboard
+ */
+const EdxHeader = () => (
+  <div className="mb-3">
+    <header className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
+      <Hyperlink destination={`${getConfig().LMS_BASE_URL}/dashboard`}>
+        <img src={getConfig().LOGO_URL} alt="edX logo" height="30" width="60" />
+      </Hyperlink>
+      <div />
+    </header>
+  </div>
+);
+
+export default EdxHeader;
--- a/src/components/EdxHeader/test.jsx
+++ b/src/components/EdxHeader/test.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { getConfig } from '@edx/frontend-platform';
+
+import Header from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Hyperlink: () => 'Hyperlink',
+}));
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+describe('Header', () => {
+  test('snapshot - has edx link with logo url', () => {
+    const url = 'www.ourLogo.url';
+    getConfig.mockReturnValue({ LOGO_URL: url });
+    expect(shallow(<Header />)).toMatchSnapshot();
+  });
+});
--- a/src/components/FilterBadges/index.jsx
+++ b/src/components/FilterBadges/index.jsx
@@ -1,198 +0,0 @@
-import { connect } from 'react-redux';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import initialFilters from '../../data/constants/filters';
-
-function FilterBadge({
-  name, value, onClick, showValue,
-}) {
-  return (
-    <div>
-      <span className="badge badge-info">
-        <span>{name}{showValue && `: ${value}`}</span>
-        <button type="button" className="btn-info" aria-label="Close" onClick={onClick}>
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </span>
-      <br />
-    </div>
-  );
-}
-
-FilterBadge.defaultProps = {
-  showValue: true,
-};
-
-FilterBadge.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]).isRequired,
-  onClick: PropTypes.func.isRequired,
-  showValue: PropTypes.bool,
-};
-
-function RangeFilterBadge({
-  displayName,
-  filterName1,
-  filterValue1,
-  filterName2,
-  filterValue2,
-  handleBadgeClose,
-}) {
-  return ((filterValue1 !== initialFilters[filterName1])
-  || (filterValue2 !== initialFilters[filterName2]))
-   && (
-   <FilterBadge
-     name={displayName}
-     value={`${filterValue1} - ${filterValue2}`}
-     onClick={handleBadgeClose}
-   />
-   );
-}
-RangeFilterBadge.propTypes = {
-  displayName: PropTypes.string.isRequired,
-  filterName1: PropTypes.string.isRequired,
-  filterValue1: PropTypes.string.isRequired,
-  filterName2: PropTypes.string.isRequired,
-  filterValue2: PropTypes.string.isRequired,
-  handleBadgeClose: PropTypes.func.isRequired,
-};
-
-function SingleValueFilterBadge({
-  displayName, filterName, filterValue, handleBadgeClose, showValue,
-}) {
-  return (filterValue !== initialFilters[filterName])
-  && (
-  <FilterBadge
-    name={displayName}
-    value={filterValue}
-    onClick={handleBadgeClose}
-    showValue={showValue}
-  />
-  );
-}
-
-SingleValueFilterBadge.defaultProps = {
-  showValue: true,
-};
-
-SingleValueFilterBadge.propTypes = {
-  displayName: PropTypes.string.isRequired,
-  filterName: PropTypes.string.isRequired,
-  filterValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]).isRequired,
-  handleBadgeClose: PropTypes.func.isRequired,
-  showValue: PropTypes.bool,
-};
-
-function FilterBadges({
-  assignment,
-  assignmentType,
-  track,
-  cohort,
-  assignmentGradeMin,
-  assignmentGradeMax,
-  courseGradeMin,
-  courseGradeMax,
-  includeCourseRoleMembers,
-  handleFilterBadgeClose,
-}) {
-  return (
-    <div>
-      <SingleValueFilterBadge
-        displayName="Assignment Type"
-        filterName="assignmentType"
-        filterValue={assignmentType}
-        handleBadgeClose={handleFilterBadgeClose(['assignmentType'])}
-      />
-      <SingleValueFilterBadge
-        displayName="Assignment"
-        filterName="assignment"
-        filterValue={assignment}
-        handleBadgeClose={handleFilterBadgeClose(['assignment', 'assignmentGradeMax', 'assignmentGradeMin'])}
-      />
-      <RangeFilterBadge
-        displayName="Assignment Grade"
-        filterName1="assignmentGradeMin"
-        filterValue1={assignmentGradeMin}
-        filterName2="assignmentGradeMax"
-        filterValue2={assignmentGradeMax}
-        handleBadgeClose={handleFilterBadgeClose(['assignmentGradeMin', 'assignmentGradeMax'])}
-      />
-      <RangeFilterBadge
-        displayName="Course Grade"
-        filterName1="courseGradeMin"
-        filterValue1={courseGradeMin}
-        filterName2="courseGradeMax"
-        filterValue2={courseGradeMax}
-        handleBadgeClose={handleFilterBadgeClose(['courseGradeMin', 'courseGradeMax'])}
-      />
-      <SingleValueFilterBadge
-        displayName="Track"
-        filterName="track"
-        filterValue={track}
-        handleBadgeClose={handleFilterBadgeClose(['track'])}
-      />
-      <SingleValueFilterBadge
-        displayName="Cohort"
-        filterName="cohort"
-        filterValue={cohort}
-        handleBadgeClose={handleFilterBadgeClose(['cohort'])}
-      />
-      <SingleValueFilterBadge
-        displayName="Including Course Team Members"
-        filterName="includeCourseRoleMembers"
-        filterValue={includeCourseRoleMembers}
-        showValue={false}
-        handleBadgeClose={handleFilterBadgeClose(['includeCourseRoleMembers'])}
-      />
-    </div>
-  );
-}
-
-const mapStateToProps = state => (
-  {
-    assignment: (state.filters.assignment || {}).label,
-    assignmentType: state.filters.assignmentType,
-    track: state.filters.track,
-    cohort: state.filters.cohort,
-    assignmentGradeMin: state.filters.assignmentGradeMin,
-    assignmentGradeMax: state.filters.assignmentGradeMax,
-    courseGradeMin: state.filters.courseGradeMin,
-    courseGradeMax: state.filters.courseGradeMax,
-    includeCourseRoleMembers: state.filters.includeCourseRoleMembers,
-  }
-);
-
-const ConnectedFilterBadges = connect(mapStateToProps)(FilterBadges);
-export default ConnectedFilterBadges;
-
-FilterBadges.defaultProps = {
-  assignment: initialFilters.assignmentType,
-  assignmentType: initialFilters.assignmentType,
-  track: initialFilters.track,
-  cohort: initialFilters.cohort,
-  assignmentGradeMin: initialFilters.assignmentGradeMin,
-  assignmentGradeMax: initialFilters.assignmentGradeMax,
-  courseGradeMin: initialFilters.courseGradeMin,
-  courseGradeMax: initialFilters.courseGradeMax,
-  includeCourseRoleMembers: initialFilters.includeCourseRoleMembers,
-};
-
-FilterBadges.propTypes = {
-  assignment: PropTypes.string,
-  assignmentType: PropTypes.string,
-  track: PropTypes.string,
-  cohort: PropTypes.string,
-  assignmentGradeMin: PropTypes.string,
-  assignmentGradeMax: PropTypes.string,
-  courseGradeMin: PropTypes.string,
-  courseGradeMax: PropTypes.string,
-  includeCourseRoleMembers: PropTypes.bool,
-  handleFilterBadgeClose: PropTypes.func.isRequired,
-};
--- a/src/components/Gradebook/BulkManagement.jsx
+++ b/src/components/Gradebook/BulkManagement.jsx
@@ -1,199 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import {
-  Button,
-  StatusAlert,
-  Table,
-} from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
-
-import selectors from 'data/selectors';
-import { configuration } from '../../config';
-import { submitFileUploadFormData } from '../../data/actions/grades';
-
-export class BulkManagement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.fileFormRef = React.createRef();
-    this.fileInputRef = React.createRef();
-  }
-
-  formatHistoryRow = (row) => {
-    const {
-      summaryOfRowsProcessed: {
-        total,
-        successfullyProcessed,
-        failed,
-        skipped,
-      },
-      unique_id: courseId,
-      originalFilename,
-      id,
-      user: username,
-      ...rest
-    } = row;
-    const resultsText = [
-      `${total} Students: ${successfullyProcessed} processed`,
-      ...(skipped > 0 ? [`${skipped} skipped`] : []),
-      ...(failed > 0 ? [`${failed} failed`] : []),
-    ].join(', ');
-    const resultsSummary = (
-      <a
-        href={`${configuration.LMS_BASE_URL}/api/bulk_grades/course/${courseId}/?error_id=${id}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FontAwesomeIcon icon={faDownload} />
-        {resultsText}
-      </a>
-    );
-    const createWrappedCell = (text) => (<span className="wrap-text-in-cell">{text}</span>);
-    const filename = createWrappedCell(originalFilename);
-    const user = createWrappedCell(username);
-    return {
-      resultsSummary,
-      filename,
-      user,
-      ...rest,
-    };
-  };
-
-  handleClickImportGrades = () => {
-    const fileInput = this.fileInputRef.current;
-    if (fileInput) {
-      fileInput.click();
-    }
-  };
-
-  handleFileInputChange = (event) => {
-    const fileInput = event.target;
-    const file = fileInput.files[0];
-    const form = this.fileFormRef.current;
-    if (file && form) {
-      const formData = new FormData(form);
-      this.props.submitFileUploadFormData(this.props.courseId, formData).then(() => {
-        fileInput.value = null;
-      });
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <h4>Use this feature by downloading a CSV for bulk management,
-          overriding grades locally, and coming back here to upload.
-        </h4>
-        <form ref={this.fileFormRef} action={this.props.gradeExportUrl} method="post">
-          <StatusAlert
-            alertType="danger"
-            dialog={this.props.bulkImportError}
-            open={!!this.props.bulkImportError}
-            dismissible={false}
-          />
-          <StatusAlert
-            alertType="success"
-            dialog="CSV processing. File uploads may take several minutes to complete"
-            open={this.props.uploadSuccess}
-            dismissible={false}
-          />
-          <input
-            className="d-none"
-            type="file"
-            name="csv"
-            label="Upload Grade CSV"
-            onChange={this.handleFileInputChange}
-            ref={this.fileInputRef}
-          />
-        </form>
-        <Button
-          variant="primary"
-          onClick={this.handleClickImportGrades}
-        >
-          Import Grades
-        </Button>
-        <p>
-          Results appear in the table below.<br />
-          Grade processing may take a few seconds.
-        </p>
-        <Table
-          data={this.props.bulkManagementHistory.map(this.formatHistoryRow)}
-          hasFixedColumnWidths
-          columns={[
-            {
-              key: 'filename',
-              label: 'Gradebook',
-              columnSortable: false,
-              width: 'col-5',
-            },
-            {
-              key: 'resultsSummary',
-              label: 'Download Summary',
-              columnSortable: false,
-              width: 'col',
-            },
-            {
-              key: 'user',
-              label: 'Who',
-              columnSortable: false,
-              width: 'col-1',
-            },
-            {
-              key: 'timeUploaded',
-              label: 'When',
-              columnSortable: false,
-              width: 'col',
-            },
-          ]}
-          className="table-striped"
-        />
-      </div>
-    );
-  }
-}
-
-BulkManagement.defaultProps = {
-  bulkImportError: '',
-  bulkManagementHistory: [],
-  courseId: '',
-  uploadSuccess: false,
-};
-
-BulkManagement.propTypes = {
-  courseId: PropTypes.string,
-  gradeExportUrl: PropTypes.string.isRequired,
-
-  // redux
-  bulkImportError: PropTypes.string,
-  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
-    originalFilename: PropTypes.string.isRequired,
-    user: PropTypes.string.isRequired,
-    timeUploaded: PropTypes.string.isRequired,
-    summaryOfRowsProcessed: PropTypes.shape({
-      total: PropTypes.number.isRequired,
-      successfullyProcessed: PropTypes.number.isRequired,
-      failed: PropTypes.number.isRequired,
-      skipped: PropTypes.number.isRequired,
-    }).isRequired,
-  })),
-  submitFileUploadFormData: PropTypes.func.isRequired,
-  uploadSuccess: PropTypes.bool,
-};
-
-export const mapStateToProps = (state) => {
-  const { grades } = selectors;
-  return {
-    bulkImportError: grades.bulkImportError(state),
-    bulkManagementHistory: grades.bulkManagementHistoryEntries(state),
-    uploadSuccess: grades.uploadSuccess(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  submitFileUploadFormData,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(BulkManagement);
--- a/src/components/Gradebook/BulkManagementControls.jsx
+++ b/src/components/Gradebook/BulkManagementControls.jsx
@@ -1,90 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { StatefulButton } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
-
-import {
-  downloadBulkGradesReport,
-  downloadInterventionReport,
-} from '../../data/actions/grades';
-
-export class BulkManagementControls extends React.Component {
-  handleClickDownloadInterventions = () => {
-    this.props.downloadInterventionReport(this.props.courseId);
-    window.location = this.props.interventionExportUrl;
-  };
-
-  // At present, we don't store label and value in google analytics. By setting the label
-  // property of the below events, I want to verify that we can set the label of google anlatyics
-  // The following properties of a google analytics event are:
-  // category (used), name(used), lavel(not used), value(not used)
-  handleClickExportGrades = () => {
-    this.props.downloadBulkGradesReport(this.props.courseId);
-    window.location = this.props.gradeExportUrl;
-  };
-
-  render() {
-    return (
-      <div>
-        <StatefulButton
-          variant="outline-primary"
-          onClick={this.handleClickExportGrades}
-          state={this.props.showSpinner ? 'pending' : 'default'}
-          labels={{
-            default: 'Bulk Management',
-            pending: 'Bulk Management',
-          }}
-          icons={{
-            default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
-            pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
-          }}
-          disabledStates={['pending']}
-        />
-        <StatefulButton
-          variant="outline-primary"
-          onClick={this.handleClickDownloadInterventions}
-          state={this.props.showSpinner ? 'pending' : 'default'}
-          className="ml-2"
-          labels={{
-            default: 'Interventions*',
-            pending: 'Interventions*',
-          }}
-          icons={{
-            default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
-            pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
-          }}
-          disabledStates={['pending']}
-        />
-      </div>
-    );
-  }
-}
-
-BulkManagementControls.defaultProps = {
-  courseId: '',
-  showSpinner: false,
-};
-
-BulkManagementControls.propTypes = {
-  courseId: PropTypes.string,
-  gradeExportUrl: PropTypes.string.isRequired,
-  interventionExportUrl: PropTypes.string.isRequired,
-  showSpinner: PropTypes.bool,
-
-  // redux
-  downloadBulkGradesReport: PropTypes.func.isRequired,
-  downloadInterventionReport: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = () => ({ });
-
-export const mapDispatchToProps = {
-  downloadBulkGradesReport,
-  downloadInterventionReport,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
--- a/src/components/Gradebook/EditModal.jsx
+++ b/src/components/Gradebook/EditModal.jsx
@@ -1,210 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import {
-  Button,
-  Modal,
-  StatusAlert,
-  Table,
-} from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import {
-  doneViewingAssignment,
-  updateGrades,
-} from '../../data/actions/grades';
-
-const GRADE_OVERRIDE_HISTORY_COLUMNS = [
-  { label: 'Date', key: 'date' },
-  { label: 'Grader', key: 'grader' },
-  { label: 'Reason', key: 'reason' },
-  { label: 'Adjusted grade', key: 'adjustedGrade' },
-];
-
-export class EditModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.overrideReasonInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.overrideReasonInput.current.focus();
-  }
-
-  handleAdjustedGradeClick = () => {
-    this.props.updateGrades(
-      this.props.courseId, [
-        {
-          user_id: this.props.updateUserId,
-          usage_id: this.props.updateModuleId,
-          grade: {
-            earned_graded_override: this.props.adjustedGradeValue,
-            comment: this.props.reasonForChange,
-          },
-        },
-      ],
-      this.props.filterValue,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-    );
-
-    this.closeAssignmentModal();
-  }
-
-  closeAssignmentModal = () => {
-    this.props.doneViewingAssignment();
-    this.props.setGradebookState({
-      adjustedGradePossible: '',
-      adjustedGradeValue: '',
-      modalOpen: false,
-      reasonForChange: '',
-      updateModuleId: null,
-      updateUserId: null,
-    });
-  };
-
-  render() {
-    return (
-      <Modal
-        open={this.props.open}
-        title="Edit Grades"
-        closeText="Cancel"
-        body={(
-          <div>
-            <div>
-              <div className="grade-history-header grade-history-assignment">Assignment: </div>
-              <div>{this.props.assignmentName}</div>
-              <div className="grade-history-header grade-history-student">Student: </div>
-              <div>{this.props.updateUserName}</div>
-              <div className="grade-history-header grade-history-original-grade">Original Grade: </div>
-              <div>{this.props.gradeOriginalEarnedGraded}</div>
-              <div className="grade-history-header grade-history-current-grade">Current Grade: </div>
-              <div>{this.props.gradeOverrideCurrentEarnedGradedOverride}</div>
-            </div>
-            <StatusAlert
-              alertType="danger"
-              dialog={this.props.gradeOverrideHistoryError}
-              open={!!this.props.gradeOverrideHistoryError}
-              dismissible={false}
-            />
-            {!this.props.gradeOverrideHistoryError && (
-              <Table
-                columns={GRADE_OVERRIDE_HISTORY_COLUMNS}
-                data={[...this.props.gradeOverrides, {
-                  date: this.props.todaysDate,
-                  reason: (<input
-                    type="text"
-                    name="reasonForChange"
-                    value={this.props.reasonForChange}
-                    onChange={this.props.setReasonForChange}
-                    ref={this.overrideReasonInput}
-                  />),
-                  adjustedGrade: (
-                    <span>
-                      <input
-                        type="text"
-                        name="adjustedGradeValue"
-                        value={this.props.adjustedGradeValue}
-                        onChange={this.props.setAdjustedGradeValue}
-                      />
-                      {(this.props.adjustedGradePossible || this.props.gradeOriginalPossibleGraded) && ' / '}
-                      {this.props.adjustedGradePossible || this.props.gradeOriginalPossibleGraded}
-                    </span>),
-                }]}
-              />
-            )}
-
-            <div>Showing most recent actions (max 5). To see more, please contact
-              support.
-            </div>
-            <div>Note: Once you save, your changes will be visible to students.</div>
-          </div>
-        )}
-        buttons={[
-          <Button
-            variant="primary"
-            onClick={this.handleAdjustedGradeClick}
-          >
-            Save Grade
-          </Button>,
-        ]}
-        onClose={this.closeAssignmentModal}
-      />
-    );
-  }
-}
-
-EditModal.defaultProps = {
-  adjustedGradeValue: null,
-  courseId: '',
-  gradeOverrideCurrentEarnedGradedOverride: null,
-  gradeOverrideHistoryError: '',
-  gradeOverrides: [],
-  gradeOriginalEarnedGraded: null,
-  gradeOriginalPossibleGraded: null,
-  selectedCohort: null,
-  selectedTrack: null,
-  updateModuleId: '',
-  updateUserId: '',
-  updateUserName: '',
-};
-
-EditModal.propTypes = {
-  courseId: PropTypes.string,
-
-  // Gradebook State
-  adjustedGradePossible: PropTypes.string.isRequired,
-  // should pick one?
-  adjustedGradeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  assignmentName: PropTypes.string.isRequired,
-  filterValue: PropTypes.string.isRequired,
-  open: PropTypes.bool.isRequired,
-  reasonForChange: PropTypes.string.isRequired,
-  todaysDate: PropTypes.string.isRequired,
-  updateModuleId: PropTypes.string,
-  updateUserId: PropTypes.number,
-  updateUserName: PropTypes.string,
-
-  // Gradebook State Setters
-  setAdjustedGradeValue: PropTypes.func.isRequired,
-  setGradebookState: PropTypes.func.isRequired,
-  setReasonForChange: PropTypes.func.isRequired,
-
-  // redux
-  doneViewingAssignment: PropTypes.func.isRequired,
-  gradeOverrideCurrentEarnedGradedOverride: PropTypes.number,
-  gradeOverrideHistoryError: PropTypes.string,
-  gradeOverrides: PropTypes.arrayOf(PropTypes.shape({
-    date: PropTypes.string,
-    grader: PropTypes.string,
-    reason: PropTypes.string,
-    adjustedGrade: PropTypes.number,
-  })),
-  gradeOriginalEarnedGraded: PropTypes.number,
-  gradeOriginalPossibleGraded: PropTypes.number,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateGrades: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => {
-  const { filters, grades } = selectors;
-  return {
-    gradeOverrides: grades.gradeOverrides(state),
-    gradeOverrideCurrentEarnedGradedOverride: grades.gradeOverrideCurrentEarnedGradedOverride(state),
-    gradeOverrideHistoryError: grades.gradeOverrideHistoryError(state),
-    gradeOriginalEarnedGraded: grades.gradeOriginalEarnedGraded(state),
-    gradeOriginalPossibleGraded: grades.gradeOriginalPossibleGraded(state),
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  doneViewingAssignment,
-  updateGrades,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(EditModal);
--- a/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/index.jsx
@@ -1,125 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Button } from '@edx/paragon';
-
-import * as gradesActions from 'data/actions/grades';
-import * as filterActions from 'data/actions/filters';
-import selectors from 'data/selectors';
-
-import PercentGroup from '../PercentGroup';
-
-export class AssignmentGradeFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleSetMax = this.handleSetMax.bind(this);
-    this.handleSetMin = this.handleSetMin.bind(this);
-  }
-
-  handleSubmit() {
-    const {
-      assignmentGradeMin,
-      assignmentGradeMax,
-    } = this.props.filterValues;
-
-    this.props.updateAssignmentLimits(
-      assignmentGradeMin,
-      assignmentGradeMax,
-    );
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-    this.props.updateQueryParams({
-      assignmentGradeMin,
-      assignmentGradeMax,
-    });
-  }
-
-  handleSetMax(event) {
-    this.props.setFilters({ assignmentGradeMax: event.target.value });
-  }
-
-  handleSetMin(event) {
-    this.props.setFilters({ assignmentGradeMin: event.target.value });
-  }
-
-  render() {
-    return (
-      <div className="grade-filter-inputs">
-        <PercentGroup
-          id="assignmentGradeMin"
-          label="Min Grade"
-          value={this.props.filterValues.assignmentGradeMin}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMin}
-        />
-        <PercentGroup
-          id="assignmentGradeMax"
-          label="Max Grade"
-          value={this.props.filterValues.assignmentGradeMax}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMax}
-        />
-        <div className="grade-filter-action">
-          <Button
-            type="submit"
-            variant="outline-secondary"
-            name="assignmentGradeMinMax"
-            disabled={!this.props.selectedAssignment}
-            onClick={this.handleSubmit}
-          >
-            Apply
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-AssignmentGradeFilter.defaultProps = {
-  selectedAssignment: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-};
-
-AssignmentGradeFilter.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  filterValues: PropTypes.shape({
-    assignmentGradeMin: PropTypes.string.isRequired,
-    assignmentGradeMax: PropTypes.string.isRequired,
-  }).isRequired,
-  setFilters: PropTypes.func.isRequired,
-  updateQueryParams: PropTypes.func.isRequired,
-
-  // redux
-  getUserGrades: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedAssignment: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateAssignmentLimits: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => {
-  const { filters } = selectors;
-  return {
-    selectedAssignment: filters.selectedAssignmentLabel(state),
-    selectedAssignmentType: filters.assignmentType(state),
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  getUserGrades: gradesActions.fetchGrades,
-  updateAssignmentLimits: filterActions.updateAssignmentLimits,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AssignmentGradeFilter);
--- a/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/test.jsx
@@ -1,174 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import { updateAssignmentLimits } from 'data/actions/filters';
-import { fetchGrades } from 'data/actions/grades';
-
-import {
-  AssignmentGradeFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-describe('AssignmentGradeFilter', () => {
-  let props = {
-    filterValues: {
-      assignmentGradeMin: '1',
-      assignmentGradeMax: '100',
-    },
-    courseId: '12345',
-
-    selectedAssignmentType: 'assgnFilterLabel1',
-    selectedAssignment: 'assgN1',
-    selectedCohort: 'a cohort',
-    selectedTrack: 'a track',
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      setFilters: jest.fn(),
-      updateQueryParams: jest.fn(),
-      getUserGrades: jest.fn(),
-      updateAssignmentLimits: jest.fn(),
-    };
-  });
-
-  describe('Component', () => {
-    describe('behavior', () => {
-      describe('handleSubmit', () => {
-        let el;
-        beforeEach(() => {
-          el = mount(<AssignmentGradeFilter {...props} />);
-          el.instance().handleSubmit();
-        });
-        it('calls props.updateAssignmentLimits with min and max', () => {
-          expect(props.updateAssignmentLimits).toHaveBeenCalledWith(
-            props.filterValues.assignmentGradeMin,
-            props.filterValues.assignmentGradeMax,
-          );
-        });
-        it('calls getUserGrades w/ selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-          );
-        });
-        it('updates queryParams with assignment grade min and max', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            assignmentGradeMin: props.filterValues.assignmentGradeMin,
-            assignmentGradeMax: props.filterValues.assignmentGradeMax,
-          });
-        });
-      });
-      describe('handleSetMin', () => {
-        it('calls setFilters for assignmentGradeMin', () => {
-          const testVal = 23;
-          const el = mount(<AssignmentGradeFilter {...props} />);
-          el.instance().handleSetMin({ target: { value: testVal } });
-          expect(props.setFilters).toHaveBeenCalledWith({
-            assignmentGradeMin: testVal,
-          });
-        });
-      });
-      describe('handleSetMax', () => {
-        it('calls setFilters for assignmentGradeMax', () => {
-          const testVal = 92;
-          const el = mount(<AssignmentGradeFilter {...props} />);
-          el.instance().handleSetMax({ target: { value: testVal } });
-          expect(props.setFilters).toHaveBeenCalledWith({
-            assignmentGradeMax: testVal,
-          });
-        });
-      });
-    });
-    describe('snapshots', () => {
-      let el;
-      const mockMethods = () => {
-        el.instance().handleSubmit = jest.fn().mockName('handleSubmit');
-        el.instance().handleSetMax = jest.fn().mockName('handleSetMax');
-        el.instance().handleSetMin = jest.fn().mockName('handleSetMin');
-      };
-      test('smoke test', () => {
-        el = shallow(<AssignmentGradeFilter {...props} />);
-        mockMethods(el);
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-      test('buttons and groups disabled if no selected assignment', () => {
-        el = shallow(<AssignmentGradeFilter
-          {...props}
-          selectedAssignment={undefined}
-        />);
-        mockMethods(el);
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const state = {
-      filters: {
-        assignment: { label: 'assigNment' },
-        assignmentType: 'assignMentType',
-        cohort: 'COhort',
-        track: 'traCK',
-      },
-    };
-    describe('selectedAsssignment', () => {
-      it('is undefined if no assignment is passed', () => {
-        expect(
-          mapStateToProps({ filters: {} }).selectedAssignment,
-        ).toEqual(undefined);
-      });
-      it('returns the label of selected assignment if there is one', () => {
-        expect(
-          mapStateToProps(state).selectedAssignment,
-        ).toEqual(
-          state.filters.assignment.label,
-        );
-      });
-    });
-    describe('selectedAssignmentType', () => {
-      it('is drawn from state.filters.assignmentType', () => {
-        expect(
-          mapStateToProps(state).selectedAssignmentType,
-        ).toEqual(
-          state.filters.assignmentType,
-        );
-      });
-    });
-    describe('selectedCohort', () => {
-      it('is drawn from state.filters.cohort', () => {
-        expect(
-          mapStateToProps(state).selectedCohort,
-        ).toEqual(
-          state.filters.cohort,
-        );
-      });
-    });
-    describe('selectedTrack', () => {
-      it('is drawn from state.filters.track', () => {
-        expect(
-          mapStateToProps(state).selectedTrack,
-        ).toEqual(
-          state.filters.track,
-        );
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('getUserGrades', () => {
-      expect(mapDispatchToProps.getUserGrades).toEqual(
-        fetchGrades,
-      );
-    });
-    test('updateAssignmentLimits', () => {
-      expect(
-        mapDispatchToProps.updateAssignmentLimits,
-      ).toEqual(
-        updateAssignmentLimits,
-      );
-    });
-  });
-});
--- a/src/components/Gradebook/GradebookFilters/CourseGradeFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/CourseGradeFilter/index.jsx
@@ -1,136 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import {
-  Button,
-} from '@edx/paragon';
-
-import { updateCourseGradeFilter } from 'data/actions/filters';
-import { fetchGrades } from 'data/actions/grades';
-import selectors from 'data/selectors';
-import PercentGroup from '../PercentGroup';
-
-export class CourseGradeFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleApplyClick = this.handleApplyClick.bind(this);
-    this.handleUpdateMin = this.handleUpdateMin.bind(this);
-    this.handleUpdateMax = this.handleUpdateMax.bind(this);
-    this.updateCourseGradeFilters = this.updateCourseGradeFilters.bind(this);
-  }
-
-  handleApplyClick() {
-    const { courseGradeMin, courseGradeMax } = this.props.filterValues;
-    const isMinValid = this.isGradeFilterValueInRange(courseGradeMin);
-    const isMaxValid = this.isGradeFilterValueInRange(courseGradeMax);
-
-    this.props.setFilters({
-      isMinCourseGradeFilterValid: isMinValid,
-      isMaxCourseGradeFilterValid: isMaxValid,
-    });
-
-    if (isMinValid && isMaxValid) {
-      this.updateCourseGradeFilters();
-    }
-  }
-
-  updateCourseGradeFilters() {
-    const { courseGradeMin, courseGradeMax } = this.props.filterValues;
-    this.props.updateFilter(
-      courseGradeMin,
-      courseGradeMax,
-      this.props.courseId,
-    );
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-      { courseGradeMin, courseGradeMax },
-    );
-    this.props.updateQueryParams({ courseGradeMin, courseGradeMax });
-  }
-
-  handleUpdateMin(event) {
-    this.props.setFilters({ courseGradeMin: event.target.value });
-  }
-
-  handleUpdateMax(event) {
-    this.props.setFilters({ courseGradeMax: event.target.value });
-  }
-
-  isGradeFilterValueInRange = (value) => {
-    const valueAsInt = parseInt(value, 10);
-    return valueAsInt >= 0 && valueAsInt <= 100;
-  };
-
-  render() {
-    return (
-      <>
-        <div className="grade-filter-inputs">
-          <PercentGroup
-            id="minimum-grade"
-            label="Min Grade"
-            value={this.props.filterValues.courseGradeMin}
-            onChange={this.handleUpdateMin}
-          />
-          <PercentGroup
-            id="maximum-grade"
-            label="Max Grade"
-            value={this.props.filterValues.courseGradeMax}
-            onChange={this.handleUpdateMax}
-          />
-        </div>
-        <div className="grade-filter-action">
-          <Button
-            variant="outline-secondary"
-            onClick={this.handleApplyClick}
-          >
-            Apply
-          </Button>
-        </div>
-      </>
-    );
-  }
-}
-
-CourseGradeFilter.defaultProps = {
-  courseId: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-};
-
-CourseGradeFilter.propTypes = {
-  courseId: PropTypes.string,
-  filterValues: PropTypes.shape({
-    courseGradeMin: PropTypes.string.isRequired,
-    courseGradeMax: PropTypes.string.isRequired,
-  }).isRequired,
-  setFilters: PropTypes.func.isRequired,
-  updateQueryParams: PropTypes.func.isRequired,
-
-  // Redux
-  getUserGrades: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateFilter: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => {
-  const { filters } = selectors;
-  return {
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-    selectedAssignmentType: filters.assignmentType(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  updateFilter: updateCourseGradeFilter,
-  getUserGrades: fetchGrades,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(CourseGradeFilter);
--- a/src/components/Gradebook/GradebookFilters/CourseGradeFilter/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/CourseGradeFilter/test.jsx
@@ -1,196 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { updateCourseGradeFilter } from 'data/actions/filters';
-import { fetchGrades } from 'data/actions/grades';
-import {
-  CourseGradeFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('@edx/paragon', () => ({
-  Button: 'Button',
-  Collapsible: 'Collapsible',
-}));
-
-describe('CourseGradeFilter', () => {
-  let props = {
-    filterValues: {
-      courseGradeMin: '5',
-      courseGradeMax: '92',
-    },
-    courseId: '12345',
-    selectedAssignmentType: 'assignMent type 1',
-    selectedCohort: 'COHort',
-    selectedTrack: 'TracK',
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      getUserGrades: jest.fn(),
-      setFilters: jest.fn(),
-      updateQueryParams: jest.fn(),
-      updateFilter: jest.fn(),
-    };
-  });
-
-  describe('Component', () => {
-    describe('snapshots', () => {
-      test('basic snapshot', () => {
-        const el = shallow(<CourseGradeFilter {...props} />);
-        el.instance().handleUpdateMin = jest.fn().mockName(
-          'handleUpdateMin',
-        );
-        el.instance().handleUpdateMax = jest.fn().mockName(
-          'handleUpdateMax',
-        );
-        el.instance().handleApplyClick = jest.fn().mockName(
-          'handleApplyClick',
-        );
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-
-    describe('behavior', () => {
-      let el;
-      const testVal = 'TESTvalue';
-      beforeEach(() => {
-        el = shallow(<CourseGradeFilter {...props} />);
-      });
-      describe('handleApplyClick', () => {
-        beforeEach(() => {
-          el.instance().updateCourseGradeFilters = jest.fn();
-        });
-        it('calls setFilters for isMin(Max)CourseGradeFilterValid', () => {
-          el.instance().isGradeFilterValueInRange = jest.fn().mockImplementation(v => v >= 50);
-          el.instance().handleApplyClick();
-          expect(props.setFilters).toHaveBeenCalledWith({
-            isMinCourseGradeFilterValid: false,
-            isMaxCourseGradeFilterValid: true,
-          });
-        });
-        it('calls updateCourseGradeFilters only if both min and max are valid', () => {
-          const isValid = jest.fn().mockImplementation(v => v >= 50);
-          el.instance().isGradeFilterValueInRange = isValid;
-          el.instance().handleApplyClick();
-          expect(el.instance().updateCourseGradeFilters).not.toHaveBeenCalled();
-          isValid.mockImplementation(v => v <= 50);
-          el.instance().handleApplyClick();
-          expect(el.instance().updateCourseGradeFilters).not.toHaveBeenCalled();
-          isValid.mockImplementation(v => v >= 0);
-          el.instance().handleApplyClick();
-          expect(el.instance().updateCourseGradeFilters).toHaveBeenCalled();
-        });
-      });
-      describe('updateCourseGradeFilters', () => {
-        beforeEach(() => {
-          el.instance().updateCourseGradeFilters();
-        });
-        it('calls props.updateFilter with selection', () => {
-          expect(props.updateFilter).toHaveBeenCalledWith(
-            props.filterValues.courseGradeMin,
-            props.filterValues.courseGradeMax,
-            props.courseId,
-          );
-        });
-        it('calls props.getUserGrades with selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-            {
-              courseGradeMin: props.filterValues.courseGradeMin,
-              courseGradeMax: props.filterValues.courseGradeMax,
-            },
-          );
-        });
-        it('updates query params with courseGradeMin and courseGradeMax', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            courseGradeMin: props.filterValues.courseGradeMin,
-            courseGradeMax: props.filterValues.courseGradeMax,
-          });
-        });
-      });
-      describe('handleUpdateMin', () => {
-        it('calls props.setCourseGradeMin with event value', () => {
-          el.instance().handleUpdateMin(
-            { target: { value: testVal } },
-          );
-          expect(props.setFilters).toHaveBeenCalledWith({
-            courseGradeMin: testVal,
-          });
-        });
-      });
-      describe('handleUpdateMax', () => {
-        it('calls props.setCourseGradeMax with event value', () => {
-          el.instance().handleUpdateMax(
-            { target: { value: testVal } },
-          );
-          expect(props.setFilters).toHaveBeenCalledWith({
-            courseGradeMax: testVal,
-          });
-        });
-      });
-      describe('isFilterValueInRange', () => {
-        it('returns true for values between 0 and 100', () => {
-          expect(el.instance().isGradeFilterValueInRange('0')).toEqual(true);
-          expect(el.instance().isGradeFilterValueInRange(1.1)).toEqual(true);
-          expect(el.instance().isGradeFilterValueInRange('43')).toEqual(true);
-          expect(el.instance().isGradeFilterValueInRange(98.6)).toEqual(true);
-          expect(el.instance().isGradeFilterValueInRange(100)).toEqual(true);
-        });
-        it('returns false for values below 0 and above 100', () => {
-          expect(el.instance().isGradeFilterValueInRange(-1)).toEqual(false);
-          expect(el.instance().isGradeFilterValueInRange(101)).toEqual(false);
-        });
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const state = {
-      filters: {
-        cohort: 'COHort',
-        track: 'TRacK',
-        assignmentType: 'TYPe',
-      },
-    };
-    describe('selectedAssignmentType', () => {
-      test('drawn from filters.assignmentType', () => {
-        expect(mapStateToProps(state).selectedAssignmentType).toEqual(
-          state.filters.assignmentType,
-        );
-      });
-    });
-    describe('selectedCohort', () => {
-      test('drawn from filters.cohort', () => {
-        expect(mapStateToProps(state).selectedCohort).toEqual(
-          state.filters.cohort,
-        );
-      });
-    });
-    describe('selectedTrack', () => {
-      test('drawn from filters.track', () => {
-        expect(mapStateToProps(state).selectedTrack).toEqual(
-          state.filters.track,
-        );
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    describe('updateFilter', () => {
-      test('from updateCourseGradeFilter', () => {
-        expect(mapDispatchToProps.updateFilter).toEqual(updateCourseGradeFilter);
-      });
-    });
-    describe('getUserGrades', () => {
-      test('from fetchGrades', () => {
-        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
-      });
-    });
-  });
-});
--- a/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/index.jsx
@@ -1,153 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-
-import { fetchGrades } from 'data/actions/grades';
-import selectors from 'data/selectors';
-import SelectGroup from '../SelectGroup';
-
-export class StudentGroupsFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.updateCohorts = this.updateCohorts.bind(this);
-    this.updateTracks = this.updateTracks.bind(this);
-  }
-
-  mapCohortsEntries = () => {
-    const mapper = ({ id, name }) => (
-      <option key={id} value={name}>{name}</option>
-    );
-    return [
-      <option value="Cohort-All" key="0">Cohort-All</option>,
-      ...this.props.cohorts.map(mapper),
-    ];
-  };
-
-  mapTracksEntries = () => {
-    const mapper = ({ slug, name }) => (
-      <option key={slug} value={name}>{name}</option>
-    );
-    return [
-      <option value="Track-All" key="0">Track-All</option>,
-      ...this.props.tracks.map(mapper),
-    ];
-  };
-
-  mapSelectedCohortEntry = () => {
-    const selectedCohortEntry = this.props.cohorts.find(
-      (x) => x.id === parseInt(this.props.selectedCohort, 10),
-    );
-    return selectedCohortEntry ? selectedCohortEntry.name : 'Cohorts';
-  };
-
-  mapSelectedTrackEntry = () => {
-    const selectedTrackEntry = this.props.tracks.find(
-      ({ slug }) => slug === this.props.selectedTrack,
-    );
-    return selectedTrackEntry ? selectedTrackEntry.name : 'Tracks';
-  };
-
-  selectedTrackSlugFromEvent(event) {
-    const selectedTrackItem = this.props.tracks.find(
-      ({ name }) => name === event.target.value,
-    );
-    return selectedTrackItem ? selectedTrackItem.slug : null;
-  }
-
-  selectedCohortIdFromEvent(event) {
-    const selectedCohortItem = this.props.cohorts.find(
-      x => x.name === event.target.value,
-    );
-    return selectedCohortItem ? selectedCohortItem.id.toString() : null;
-  }
-
-  updateTracks(event) {
-    const selectedTrackSlug = this.selectedTrackSlugFromEvent(event);
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      selectedTrackSlug,
-      this.props.selectedAssignmentType,
-    );
-    this.props.updateQueryParams({ track: selectedTrackSlug });
-  }
-
-  updateCohorts(event) {
-    const selectedCohortId = this.selectedCohortIdFromEvent(event);
-    this.props.getUserGrades(
-      this.props.courseId,
-      selectedCohortId,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-    this.props.updateQueryParams({ cohort: selectedCohortId });
-  }
-
-  render() {
-    return (
-      <>
-        <SelectGroup
-          id="Tracks"
-          label="Tracks"
-          value={this.mapSelectedTrackEntry()}
-          onChange={this.updateTracks}
-          options={this.mapTracksEntries()}
-        />
-        <SelectGroup
-          id="Cohorts"
-          label="Cohorts"
-          value={this.mapSelectedCohortEntry()}
-          disabled={this.props.cohorts.length === 0}
-          onChange={this.updateCohorts}
-          options={this.mapCohortsEntries()}
-        />
-      </>
-    );
-  }
-}
-
-StudentGroupsFilter.defaultProps = {
-  cohorts: [],
-  courseId: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-  tracks: [],
-};
-
-StudentGroupsFilter.propTypes = {
-  courseId: PropTypes.string,
-  updateQueryParams: PropTypes.func.isRequired,
-
-  // redux
-  cohorts: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  })),
-  getUserGrades: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  tracks: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    slug: PropTypes.string,
-  })),
-};
-
-export const mapStateToProps = (state) => {
-  const { filters, cohorts, tracks } = selectors;
-  return {
-    cohorts: cohorts.allCohorts(state),
-    selectedAssignmentType: filters.assignmentType(state),
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-    tracks: tracks.allTracks(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  getUserGrades: fetchGrades,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter);
--- a/src/components/Gradebook/GradebookFilters/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/snapshots/test.jsx.snap
@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Assignments"
-  >
-    <div>
-      <Connect(AssignmentTypeFilter)
-        updateQueryParams={[MockFunction]}
-      />
-      <Connect(AssignmentFilter)
-        courseId="12345"
-        updateQueryParams={[MockFunction]}
-      />
-      <Connect(AssignmentGradeFilter)
-        courseId="12345"
-        filterValues={
-          Object {
-            "assignmentGradeMax": "90",
-            "assignmentGradeMin": "10",
-            "courseGradeMax": "80",
-            "courseGradeMin": "20",
-          }
-        }
-        setFilters={[MockFunction]}
-        updateQueryParams={[MockFunction]}
-      />
-    </div>
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Overall Grade"
-  >
-    <Connect(CourseGradeFilter)
-      courseId="12345"
-      filterValues={
-        Object {
-          "assignmentGradeMax": "90",
-          "assignmentGradeMin": "10",
-          "courseGradeMax": "80",
-          "courseGradeMin": "20",
-        }
-      }
-      setFilters={[MockFunction]}
-      updateQueryParams={[MockFunction]}
-    />
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Student Groups"
-  >
-    <Connect(StudentGroupsFilter)
-      courseId="12345"
-      updateQueryParams={[MockFunction]}
-    />
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Include Course Team Members"
-  >
-    <Checkbox
-      checked={true}
-      onChange={[MockFunction handleIncludeTeamMembersChange]}
-    >
-      Include Course Team Members
-    </Checkbox>
-  </Collapsible>
-</React.Fragment>
-`;
--- a/src/components/Gradebook/GradebookTable.jsx
+++ b/src/components/Gradebook/GradebookTable.jsx
@@ -1,234 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import {
-  Table, OverlayTrigger, Tooltip, Icon,
-} from '@edx/paragon';
-
-import { formatDateForDisplay } from '../../data/actions/utils';
-import { fetchGradeOverrideHistory } from '../../data/actions/grades';
-import { EMAIL_HEADING, TOTAL_COURSE_GRADE_HEADING, USERNAME_HEADING } from '../../data/constants/grades';
-import selectors from '../../data/selectors';
-
-const DECIMAL_PRECISION = 2;
-
-export class GradebookTable extends React.Component {
-  setNewModalState = (userEntry, subsection) => {
-    this.props.fetchGradeOverrideHistory(
-      subsection.module_id,
-      userEntry.user_id,
-    );
-
-    let adjustedGradePossible = '';
-    if (subsection.attempted) {
-      adjustedGradePossible = subsection.score_possible;
-    }
-
-    this.props.setGradebookState({
-      adjustedGradePossible,
-      adjustedGradeValue: '',
-      assignmentName: `${subsection.subsection_name}`,
-      modalOpen: true,
-      reasonForChange: '',
-      todaysDate: formatDateForDisplay(new Date()),
-      updateModuleId: subsection.module_id,
-      updateUserId: userEntry.user_id,
-      updateUserName: userEntry.username,
-    });
-  }
-
-  getLearnerInformation = entry => (
-    <div>
-      <div>{entry.username}</div>
-      {entry.external_user_key && <div className="student-key">{entry.external_user_key}</div>}
-    </div>
-  )
-
-  roundGrade = percent => parseFloat((percent || 0).toFixed(DECIMAL_PRECISION));
-
-  formatter = {
-    percent: (entries, areGradesFrozen) => entries.map((entry) => {
-      const learnerInformation = this.getLearnerInformation(entry);
-      const results = {
-        [USERNAME_HEADING]: (
-          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
-        ),
-        [EMAIL_HEADING]: (
-          <span className="wrap-text-in-cell">{entry.email}</span>
-        ),
-      };
-
-      const assignments = entry.section_breakdown
-        .reduce((acc, subsection) => {
-          if (areGradesFrozen) {
-            acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
-          } else {
-            acc[subsection.label] = (
-              <button
-                className="btn btn-header link-style grade-button"
-                onClick={() => this.setNewModalState(entry, subsection)}
-              >
-                {this.roundGrade(subsection.percent * 100)}%
-              </button>
-            );
-          }
-          return acc;
-        }, {});
-      const totals = { [TOTAL_COURSE_GRADE_HEADING]: `${this.roundGrade(entry.percent * 100)}%` };
-      return Object.assign(results, assignments, totals);
-    }),
-
-    absolute: (entries, areGradesFrozen) => entries.map((entry) => {
-      const learnerInformation = this.getLearnerInformation(entry);
-      const results = {
-        [USERNAME_HEADING]: (
-          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
-        ),
-        [EMAIL_HEADING]: (
-          <span className="wrap-text-in-cell">{entry.email}</span>
-        ),
-      };
-
-      const assignments = entry.section_breakdown
-        .reduce((acc, subsection) => {
-          const scoreEarned = this.roundGrade(subsection.score_earned);
-          const scorePossible = this.roundGrade(subsection.score_possible);
-          let label = `${scoreEarned}`;
-          if (subsection.attempted) {
-            label = `${scoreEarned}/${scorePossible}`;
-          }
-          if (areGradesFrozen) {
-            acc[subsection.label] = label;
-          } else {
-            acc[subsection.label] = (
-              <button
-                className="btn btn-header link-style"
-                onClick={() => this.setNewModalState(entry, subsection)}
-              >
-                {label}
-              </button>
-            );
-          }
-          return acc;
-        }, {});
-
-      // Show this as a percent no matter what the other setting is. The data
-      // we're getting gives the final grade as a percentage so making it appear
-      // to be "out of" 100 is misleading.
-      const totals = { [TOTAL_COURSE_GRADE_HEADING]: `${this.roundGrade(entry.percent * 100)}%` };
-      return Object.assign(results, assignments, totals);
-    }),
-  };
-
-  formatHeadings = () => {
-    let headings = [...this.props.headings];
-
-    if (headings.length > 0) {
-      const headerLabelReplacements = {};
-      headerLabelReplacements[USERNAME_HEADING] = (
-        <div>
-          <div>Username</div>
-          <div className="font-weight-normal student-key">Student Key*</div>
-        </div>
-      );
-      headerLabelReplacements[EMAIL_HEADING] = 'Email*';
-
-      const totalGradePercentageMessage = 'Total Grade values are always displayed as a percentage.';
-      headerLabelReplacements[TOTAL_COURSE_GRADE_HEADING] = (
-        <div>
-          <OverlayTrigger
-            trigger={['hover', 'focus']}
-            key="left-basic"
-            placement="left"
-            overlay={(<Tooltip id="course-grade-tooltip">{totalGradePercentageMessage}</Tooltip>)}
-          >
-            <div>
-              {TOTAL_COURSE_GRADE_HEADING}
-              <div id="courseGradeTooltipIcon">
-                <Icon className="fa fa-info-circle" screenReaderText={totalGradePercentageMessage} />
-              </div>
-            </div>
-          </OverlayTrigger>
-        </div>
-      );
-
-      headings = headings.map(heading => {
-        const result = {
-          label: heading,
-          key: heading,
-        };
-        if (headerLabelReplacements[heading] !== undefined) {
-          result.label = headerLabelReplacements[heading];
-        }
-        return result;
-      });
-    }
-
-    return headings;
-  }
-
-  render() {
-    return (
-      <div className="gradebook-container">
-        <div className="gbook">
-          <Table
-            columns={this.formatHeadings()}
-            data={this.formatter[this.props.format](
-              this.props.grades,
-              this.props.areGradesFrozen,
-            )}
-            rowHeaderColumnKey="username"
-            hasFixedColumnWidths
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-GradebookTable.defaultProps = {
-  areGradesFrozen: false,
-  grades: [],
-};
-
-GradebookTable.propTypes = {
-  setGradebookState: PropTypes.func.isRequired,
-  // redux
-  areGradesFrozen: PropTypes.bool,
-  format: PropTypes.string.isRequired,
-  grades: PropTypes.arrayOf(PropTypes.shape({
-    percent: PropTypes.number,
-    section_breakdown: PropTypes.arrayOf(PropTypes.shape({
-      attempted: PropTypes.bool,
-      category: PropTypes.string,
-      label: PropTypes.string,
-      module_id: PropTypes.string,
-      percent: PropTypes.number,
-      scoreEarned: PropTypes.number,
-      scorePossible: PropTypes.number,
-      subsection_name: PropTypes.string,
-    })),
-    user_id: PropTypes.number,
-    user_name: PropTypes.string,
-  })),
-  headings: PropTypes.arrayOf(PropTypes.string).isRequired,
-  fetchGradeOverrideHistory: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => {
-  const { assignmentTypes, grades, root } = selectors;
-  return {
-    areGradesFrozen: assignmentTypes.areGradesFrozen(state),
-    format: grades.gradeFormat(state),
-    grades: grades.allGrades(state),
-    headings: root.getHeadings(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  fetchGradeOverrideHistory,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(GradebookTable);
--- a/src/components/Gradebook/SearchControls.jsx
+++ b/src/components/Gradebook/SearchControls.jsx
@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Button, Icon, SearchField } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import {
-  fetchGrades,
-  fetchMatchingUserGrades,
-} from '../../data/actions/grades';
-
-/**
- * Controls for filtering the GradebookTable. Contains the "Edit Filters" button for opening the filter drawer
- * as well as the search box for searching by username/email.
- */
-export class SearchControls extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onClear = this.onClear.bind(this);
-  }
-
-  /** Submitting searches for user matching the username/email in `value` */
-  onSubmit(value) {
-    this.props.searchForUser(
-      this.props.courseId,
-      value,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-  }
-
-  /** Changing the search value stores the key in Gradebook. Currently unused */
-  onChange(filterValue) {
-    this.props.setFilterValue(filterValue);
-  }
-
-  /** Clearing the search box falls back to showing students with already applied filters */
-  onClear() {
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-  }
-
-  render() {
-    return (
-      <>
-        <h4>Step 1: Filter the Grade Report</h4>
-        <div className="d-flex justify-content-between">
-          <Button
-            id="edit-filters-btn"
-            className="btn-primary align-self-start"
-            onClick={this.props.toggleFilterDrawer}
-          >
-            <Icon className="fa fa-filter" /> Edit Filters
-          </Button>
-          <div>
-            <SearchField
-              onSubmit={this.onSubmit}
-              inputLabel="Search for a learner"
-              onChange={this.onChange}
-              onClear={this.onClear}
-              value={this.props.filterValue}
-            />
-            <small className="form-text text-muted search-help-text">Search by username, email, or student key</small>
-          </div>
-        </div>
-      </>
-    );
-  }
-}
-
-SearchControls.defaultProps = {
-  courseId: '',
-  filterValue: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-};
-
-SearchControls.propTypes = {
-  courseId: PropTypes.string,
-  filterValue: PropTypes.string,
-  setFilterValue: PropTypes.func.isRequired,
-  toggleFilterDrawer: PropTypes.func.isRequired,
-  // From Redux
-  getUserGrades: PropTypes.func.isRequired,
-  searchForUser: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-};
-
-export const mapStateToProps = (state) => {
-  const { filters } = selectors;
-  return {
-    selectedAssignmentType: filters.assignmentType(state),
-    selectedTrack: filters.track(state),
-    selectedCohort: filters.cohort(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  getUserGrades: fetchGrades,
-  searchForUser: fetchMatchingUserGrades,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SearchControls);
--- a/src/components/Gradebook/SearchControls.test.jsx
+++ b/src/components/Gradebook/SearchControls.test.jsx
@@ -1,118 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import {
-  fetchGrades,
-  fetchMatchingUserGrades,
-} from '../../data/actions/grades';
-import { mapDispatchToProps, mapStateToProps, SearchControls } from './SearchControls';
-
-jest.mock('@edx/paragon', () => ({
-  Icon: 'Icon',
-  Button: 'Button',
-  SearchField: 'SearchField',
-}));
-
-describe('SearchControls', () => {
-  let props;
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    props = {
-      courseId: 'course-v1:edX+DEV101+T1',
-      filterValue: 'alice',
-      selectedAssignmentType: 'homework',
-      selectedCohort: 'spring term',
-      selectedTrack: 'masters',
-      getUserGrades: jest.fn(),
-      searchForUser: jest.fn(),
-      setFilterValue: jest.fn(),
-      toggleFilterDrawer: jest.fn().mockName('toggleFilterDrawer'),
-    };
-  });
-
-  const searchControls = (overriddenProps) => {
-    props = { ...props, ...overriddenProps };
-    return shallow(<SearchControls {...props} />);
-  };
-
-  describe('Component', () => {
-    describe('onSubmit', () => {
-      it('calls props.searchForUser with correct data', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onSubmit('bob');
-
-        expect(props.searchForUser).toHaveBeenCalledWith(
-          props.courseId,
-          'bob',
-          props.selectedCohort,
-          props.selectedTrack,
-          props.selectedAssignmentType,
-        );
-      });
-    });
-
-    describe('onChange', () => {
-      it('saves the changed search value to Gradebook state', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onChange('bob');
-        expect(props.setFilterValue).toHaveBeenCalledWith('bob');
-      });
-    });
-
-    describe('onClear', () => {
-      it('re-runs search with existing filters', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onClear();
-        expect(props.getUserGrades).toHaveBeenCalledWith(
-          props.courseId,
-          props.selectedCohort,
-          props.selectedTrack,
-          props.selectedAssignmentType,
-        );
-      });
-    });
-
-    describe('mapStateToProps', () => {
-      const state = {
-        filters: {
-          assignmentType: 'labs',
-          track: 'honor',
-          cohort: 'fall term',
-        },
-      };
-
-      it('maps assignment type filter correctly', () => {
-        expect(mapStateToProps(state).selectedAssignmentType).toEqual(state.filters.assignmentType);
-      });
-
-      it('maps track filter correctly', () => {
-        expect(mapStateToProps(state).selectedTrack).toEqual(state.filters.track);
-      });
-
-      it('maps cohort filter correctly', () => {
-        expect(mapStateToProps(state).selectedCohort).toEqual(state.filters.cohort);
-      });
-    });
-
-    describe('mapDispatchToProps', () => {
-      test('getUserGrades', () => {
-        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
-      });
-
-      test('searchForUser', () => {
-        expect(mapDispatchToProps.searchForUser).toEqual(fetchMatchingUserGrades);
-      });
-    });
-
-    describe('Snapshots', () => {
-      test('basic snapshot', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onChange = jest.fn().mockName('onChange');
-        wrapper.instance().onClear = jest.fn().mockName('onClear');
-        wrapper.instance().onSubmit = jest.fn().mockName('onSubmit');
-        expect(wrapper.instance().render()).toMatchSnapshot();
-      });
-    });
-  });
-});
--- a/src/components/Gradebook/StatusAlerts.test.jsx
+++ b/src/components/Gradebook/StatusAlerts.test.jsx
@@ -1,99 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import {
-  StatusAlerts,
-  mapDispatchToProps,
-  mapStateToProps,
-  maxCourseGradeInvalidMessage,
-  minCourseGradeInvalidMessage,
-} from './StatusAlerts';
-import { closeBanner } from '../../data/actions/grades';
-
-jest.mock('@edx/paragon', () => ({
-  StatusAlert: 'StatusAlert',
-}));
-
-describe('StatusAlerts', () => {
-  let props = {
-    showSuccessBanner: true,
-    isMaxCourseGradeFilterValid: true,
-    isMinCourseGradeFilterValid: true,
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      handleCloseSuccessBanner: jest.fn().mockName('handleCloseSuccessBanner'),
-    };
-  });
-
-  describe('snapshots', () => {
-    let el;
-    it('basic snapshot', () => {
-      el = shallow(<StatusAlerts {...props} />);
-      const courseGradeFilterAlertDialogText = 'the quiCk brown does somEthing or other';
-      jest.spyOn(
-        el.instance(),
-        'courseGradeFilterAlertDialogText',
-        'get',
-      ).mockReturnValue(courseGradeFilterAlertDialogText);
-      expect(el.instance().render()).toMatchSnapshot();
-    });
-  });
-
-  describe('behavior', () => {
-    it.each([
-      [false, false],
-      [false, true],
-      [true, false],
-      [true, true],
-    ])('min + max course grade validity', (isMinCourseGradeFilterValid, isMaxCourseGradeFilterValid) => {
-      props = {
-        ...props,
-        isMinCourseGradeFilterValid,
-        isMaxCourseGradeFilterValid,
-      };
-      const el = shallow(<StatusAlerts {...props} />);
-      expect(
-        el.instance().isCourseGradeFilterAlertOpen,
-      ).toEqual(
-        !isMinCourseGradeFilterValid || !isMaxCourseGradeFilterValid,
-      );
-      if (!isMaxCourseGradeFilterValid) {
-        expect(
-          el.instance().courseGradeFilterAlertDialogText,
-        ).toEqual(
-          expect.stringContaining(maxCourseGradeInvalidMessage),
-        );
-      }
-      if (!isMinCourseGradeFilterValid) {
-        expect(
-          el.instance().courseGradeFilterAlertDialogText,
-        ).toEqual(
-          expect.stringContaining(minCourseGradeInvalidMessage),
-        );
-      }
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    it('showSuccessBanner', () => {
-      const arbitraryValue = 'AppleBananaCucumber';
-      const state = {
-        grades: {
-          showSuccess: arbitraryValue,
-        },
-      };
-      expect(mapStateToProps(state).showSuccessBanner).toBe(arbitraryValue);
-    });
-  });
-  describe('handleCloseSuccessBanner', () => {
-    test('handleCloseSuccessBanner', () => {
-      expect(
-        mapDispatchToProps.handleCloseSuccessBanner,
-      ).toEqual(
-        closeBanner,
-      );
-    });
-  });
-});
--- a/src/components/Gradebook/snapshots/SearchControls.test.jsx.snap
+++ b/src/components/Gradebook/snapshots/SearchControls.test.jsx.snap
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchControls Component Snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <h4>
-    Step 1: Filter the Grade Report
-  </h4>
-  <div
-    className="d-flex justify-content-between"
-  >
-    <Button
-      className="btn-primary align-self-start"
-      id="edit-filters-btn"
-      onClick={[MockFunction toggleFilterDrawer]}
-    >
-      <Icon
-        className="fa fa-filter"
-      />
-       Edit Filters
-    </Button>
-    <div>
-      <SearchField
-        inputLabel="Search for a learner"
-        onChange={[MockFunction onChange]}
-        onClear={[MockFunction onClear]}
-        onSubmit={[MockFunction onSubmit]}
-        value="alice"
-      />
-      <small
-        className="form-text text-muted search-help-text"
-      >
-        Search by username, email, or student key
-      </small>
-    </div>
-  </div>
-</React.Fragment>
-`;
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -1,319 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Icon,
-  InputSelect,
-  Tab,
-  Tabs,
-} from '@edx/paragon';
-import queryString from 'query-string';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
-import { configuration } from '../../config';
-import PageButtons from '../PageButtons';
-import Drawer from '../Drawer';
-import initialFilters from '../../data/constants/filters';
-import ConnectedFilterBadges from '../FilterBadges';
-
-import BulkManagement from './BulkManagement';
-import BulkManagementControls from './BulkManagementControls';
-import EditModal from './EditModal';
-import GradebookFilters from './GradebookFilters';
-import GradebookTable from './GradebookTable';
-import SearchControls from './SearchControls';
-import StatusAlerts from './StatusAlerts';
-
-export default class Gradebook extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      adjustedGradePossible: '',
-      adjustedGradeValue: 0,
-      assignmentGradeMin: '0',
-      assignmentGradeMax: '100',
-      assignmentName: '',
-      courseGradeMin: '0',
-      courseGradeMax: '100',
-      filterValue: '',
-      isMinCourseGradeFilterValid: true,
-      isMaxCourseGradeFilterValid: true,
-      modalOpen: false,
-      reasonForChange: '',
-      todaysDate: '',
-      updateModuleId: null,
-      updateUserId: null,
-    };
-    this.myRef = React.createRef();
-  }
-
-  componentDidMount() {
-    const urlQuery = queryString.parse(this.props.location.search);
-    this.props.initializeFilters(urlQuery);
-    this.props.getRoles(this.props.courseId);
-
-    const newStateFields = {};
-    ['assignmentGradeMin', 'assignmentGradeMax', 'courseGradeMin', 'courseGradeMax'].forEach((attr) => {
-      if (urlQuery[attr]) {
-        newStateFields[attr] = urlQuery[attr];
-      }
-    });
-
-    this.setState(newStateFields);
-  }
-
-  onChange(e) {
-    this.setState({ [e.target.name]: e.target.value });
-  }
-
-  getActiveTabs = () => {
-    if (this.props.showBulkManagement) {
-      return ['Grades', 'Bulk Management'];
-    }
-    return ['Grades'];
-  };
-
-  updateQueryParams = (queryParams) => {
-    const parsed = queryString.parse(this.props.location.search);
-    Object.keys(queryParams).forEach((key) => {
-      if (queryParams[key]) {
-        parsed[key] = queryParams[key];
-      } else {
-        delete parsed[key];
-      }
-    });
-    this.props.history.push(`?${queryString.stringify(parsed)}`);
-  };
-
-  lmsInstructorDashboardUrl = courseId => `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`;
-
-  handleFilterBadgeClose = filterNames => () => {
-    this.props.resetFilters(filterNames);
-    const queryParams = {};
-    filterNames.forEach((filterName) => {
-      queryParams[filterName] = false;
-    });
-    this.updateQueryParams(queryParams);
-    const stateUpdate = {};
-    const rangeStateFilters = ['assignmentGradeMin', 'assignmentGradeMax', 'courseGradeMin', 'courseGradeMax'];
-    rangeStateFilters.forEach((filterName) => {
-      if (filterNames.includes(filterName)) {
-        stateUpdate[filterName] = initialFilters[filterName];
-      }
-    });
-    this.setState(stateUpdate);
-    this.props.getUserGrades(
-      this.props.courseId,
-      filterNames.includes('cohort') ? initialFilters.cohort : this.props.selectedCohort,
-      filterNames.includes('track') ? initialFilters.track : this.props.selectedTrack,
-      filterNames.includes('assignmentType') ? initialFilters.assignmentType : this.props.selectedAssignmentType,
-    );
-  }
-
-  createStateFieldSetter = (key) => (value) => this.setState({ [key]: value });
-
-  createStateFieldOnChange = (key) => ({ target }) => this.setState({ [key]: target.value });
-
-  createLimitedSetter = (...keys) => (values) => this.setState(
-    keys.reduce(
-      (obj, key) => (values[key] === undefined ? obj : { ...obj, [key]: values[key] }),
-      {},
-    ),
-  )
-
-  safeSetState = this.createLimitedSetter(
-    'adjustedGradePossible',
-    'adjustedGradeValue',
-    'assignmentName',
-    'filterValue',
-    'modalOpen',
-    'reasonForChange',
-    'todaysDate',
-    'updateModuleId',
-    'updateUserId',
-    'updateUserName',
-  );
-
-  setFilters = this.createLimitedSetter(
-    'assignmentGradeMin',
-    'assignmentGradeMax',
-    'courseGradeMin',
-    'courseGradeMax',
-    'isMinCourseGradeFilterValid',
-    'isMaxCourseGradeFilterValid',
-  );
-
-  filterValues = () => ({
-    assignmentGradeMin: this.state.assignmentGradeMin,
-    assignmentGradeMax: this.state.assignmentGradeMax,
-    courseGradeMin: this.state.courseGradeMin,
-    courseGradeMax: this.state.courseGradeMax,
-  });
-
-  render() {
-    return (
-      <Drawer
-        mainContent={toggleFilterDrawer => (
-          <div className="px-3 gradebook-content">
-            <a
-              href={this.lmsInstructorDashboardUrl(this.props.courseId)}
-              className="mb-3"
-            >
-              <span aria-hidden="true">{'<< '}</span> Back to Dashboard
-            </a>
-            <h1>Gradebook</h1>
-            <h3> {this.props.courseId}</h3>
-            {this.props.areGradesFrozen
-              && (
-              <div className="alert alert-warning" role="alert">
-                The grades for this course are now frozen. Editing of grades is no longer allowed.
-              </div>
-              )}
-            {(this.props.canUserViewGradebook === false)
-              && (
-              <div className="alert alert-warning" role="alert">
-                You are not authorized to view the gradebook for this course.
-              </div>
-              )}
-            <Tabs defaultActiveKey="grades">
-              <Tab eventKey="grades" title="Grades">
-                {this.props.showSpinner && (
-                  <div className="spinner-overlay">
-                    <Icon className="fa fa-spinner fa-spin fa-5x color-black" />
-                  </div>
-                )}
-                <SearchControls
-                  courseId={this.props.courseId}
-                  filterValue={this.state.filterValue}
-                  setFilterValue={this.createStateFieldSetter('filterValue')}
-                  toggleFilterDrawer={toggleFilterDrawer}
-                />
-                <ConnectedFilterBadges
-                  handleFilterBadgeClose={this.handleFilterBadgeClose}
-                />
-                <StatusAlerts
-                  isMinCourseGradeFilterValid={this.state.isMinCourseGradeFilterValid}
-                  isMaxCourseGradeFilterValid={this.state.isMaxCourseGradeFilterValid}
-                />
-                <h4>Step 2: View or Modify Individual Grades</h4>
-                {this.props.totalUsersCount
-                  ? (
-                    <div>
-                      Showing
-                      <span className="font-weight-bold"> {this.props.filteredUsersCount} </span>
-                      of
-                      <span className="font-weight-bold"> {this.props.totalUsersCount} </span>
-                      total learners
-                    </div>
-                  )
-                  : null}
-                <div className="d-flex justify-content-between align-items-center mb-2">
-                  <InputSelect
-                    label="Score View:"
-                    name="ScoreView"
-                    value="percent"
-                    options={[{ label: 'Percent', value: 'percent' }, { label: 'Absolute', value: 'absolute' }]}
-                    onChange={this.props.toggleFormat}
-                  />
-                  {this.props.showBulkManagement && (
-                    <BulkManagementControls
-                      courseId={this.props.courseId}
-                      gradeExportUrl={this.props.gradeExportUrl}
-                      interventionExportUrl={this.props.interventionExportUrl}
-                      showSpinner={this.props.showSpinner}
-                    />
-                  )}
-                </div>
-                <GradebookTable setGradebookState={this.safeSetState} />
-                {PageButtons(this.props)}
-                <p>* available for learners in the Master&apos;s track only</p>
-                <EditModal
-                  assignmentName={this.state.assignmentName}
-                  adjustedGradeValue={this.state.adjustedGradeValue}
-                  adjustedGradePossible={this.state.adjustedGradePossible}
-                  courseId={this.props.courseId}
-                  filterValue={this.state.filterValue}
-                  onChange={this.onChange}
-                  open={this.state.modalOpen}
-                  reasonForChange={this.state.reasonForChange}
-                  setAdjustedGradeValue={this.createStateFieldOnChange('adjustedGradeValue')}
-                  setGradebookState={this.safeSetState}
-                  setReasonForChange={this.createStateFieldOnChange('reasonForChange')}
-                  todaysDate={this.state.todaysDate}
-                  updateModuleId={this.state.updateModuleId}
-                  updateUserId={this.state.updateUserId}
-                  updateUserName={this.state.updateUserName}
-                />
-
-              </Tab>
-              {this.props.showBulkManagement
-                && (
-                <Tab eventKey="bulk_management" title="Bulk Management">
-                  <BulkManagement
-                    courseId={this.props.courseId}
-                    gradeExportUrl={this.props.gradeExportUrl}
-                  />
-                </Tab>
-                )}
-            </Tabs>
-          </div>
-        )}
-        initiallyOpen={false}
-        title={(
-          <>
-            <FontAwesomeIcon icon={faFilter} /> Filter By...
-          </>
-        )}
-      >
-        <GradebookFilters
-          setFilters={this.setFilters}
-          filterValues={this.filterValues()}
-          updateQueryParams={this.updateQueryParams}
-          courseId={this.props.courseId}
-        />
-      </Drawer>
-    );
-  }
-}
-
-Gradebook.defaultProps = {
-  areGradesFrozen: false,
-  canUserViewGradebook: false,
-  courseId: '',
-  filteredUsersCount: null,
-  location: {
-    search: '',
-  },
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-  showBulkManagement: false,
-  showSpinner: false,
-  totalUsersCount: null,
-};
-
-Gradebook.propTypes = {
-  areGradesFrozen: PropTypes.bool,
-  canUserViewGradebook: PropTypes.bool,
-  courseId: PropTypes.string,
-  filteredUsersCount: PropTypes.number,
-  getRoles: PropTypes.func.isRequired,
-  getUserGrades: PropTypes.func.isRequired,
-  gradeExportUrl: PropTypes.string.isRequired,
-  history: PropTypes.shape({
-    push: PropTypes.func,
-  }).isRequired,
-  initializeFilters: PropTypes.func.isRequired,
-  interventionExportUrl: PropTypes.string.isRequired,
-  location: PropTypes.shape({
-    search: PropTypes.string,
-  }),
-  resetFilters: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  showBulkManagement: PropTypes.bool,
-  showSpinner: PropTypes.bool,
-  toggleFormat: PropTypes.func.isRequired,
-  totalUsersCount: PropTypes.number,
-};
--- a/src/components/Gradebook/GradebookFilters/AssignmentFilter/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/AssignmentFilter/snapshots/test.jsx.snap
@@ -7,7 +7,13 @@ exports[`AssignmentFilter Component snapshots basic snapshot 1`] = `
  <SelectGroup
    disabled={false}
    id="assignment"
-    label="Assignment"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment"
+        description="Assignment filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentFilterLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
--- a/src/components/Gradebook/GradebookFilters/AssignmentFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentFilter/index.jsx
@@ -3,12 +3,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import * as gradesActions from 'data/actions/grades';
-import * as filterActions from 'data/actions/filters';
-import selectors from 'data/selectors';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
 import SelectGroup from '../SelectGroup';

+const { fetchGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
+
 export class AssignmentFilter extends React.Component {
  constructor(props) {
    super(props);
@@ -17,17 +22,14 @@ export class AssignmentFilter extends React.Component {

  handleChange(event) {
    const assignment = event.target.value;
-    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig => assig.label === assignment);
+    const selectedFilterOption = this.props.assignmentFilterOptions.find(
+      ({ label }) => label === assignment,
+    );
    const { type, id } = selectedFilterOption || {};
    const typedValue = { label: assignment, type, id };
    this.props.updateAssignmentFilter(typedValue);
    this.props.updateQueryParams({ assignment: id });
-    this.props.updateGradesIfAssignmentGradeFiltersSet(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
+    this.props.fetchGradesIfAssignmentGradeFiltersSet();
  }

  get options() {
@@ -47,7 +49,7 @@ export class AssignmentFilter extends React.Component {
      <div className="student-filters">
        <SelectGroup
          id="assignment"
-          label="Assignment"
+          label={<FormattedMessage {...messages.assignment} />}
          value={this.props.selectedAssignment}
          onChange={this.handleChange}
          disabled={this.props.assignmentFilterOptions.length === 0}
@@ -61,15 +63,10 @@ export class AssignmentFilter extends React.Component {
 AssignmentFilter.defaultProps = {
  assignmentFilterOptions: [],
  selectedAssignment: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
 };

 AssignmentFilter.propTypes = {
-  courseId: PropTypes.string.isRequired,
  updateQueryParams: PropTypes.func.isRequired,
-
  // redux
  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
@@ -77,11 +74,8 @@ AssignmentFilter.propTypes = {
    type: PropTypes.string,
    id: PropTypes.string,
  })),
-  selectedAssignmentType: PropTypes.string,
  selectedAssignment: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
+  fetchGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
  updateAssignmentFilter: PropTypes.func.isRequired,
 };

@@ -97,8 +91,8 @@ export const mapStateToProps = (state) => {
 };

 export const mapDispatchToProps = {
-  updateAssignmentFilter: filterActions.updateAssignmentFilter,
-  updateGradesIfAssignmentGradeFiltersSet: gradesActions.updateGradesIfAssignmentGradeFiltersSet,
+  updateAssignmentFilter: actions.filters.update.assignment,
+  fetchGradesIfAssignmentGradeFiltersSet,
 };

 export default connect(mapStateToProps, mapDispatchToProps)(AssignmentFilter);
--- a/src/components/Gradebook/GradebookFilters/AssignmentFilter/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentFilter/test.jsx
@@ -2,14 +2,18 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';

 import selectors from 'data/selectors';
-import { updateAssignmentFilter } from 'data/actions/filters';
-import { updateGradesIfAssignmentGradeFiltersSet } from 'data/actions/grades';
+import actions from 'data/actions';
+import { fetchGradesIfAssignmentGradeFiltersSet } from 'data/thunkActions/grades';
 import {
  AssignmentFilter,
  mapStateToProps,
  mapDispatchToProps,
 } from '.';

+jest.mock('data/thunkActions/grades', () => ({
+  updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
+}));
+
 jest.mock('data/selectors', () => ({
  /** Mocking to use passed state for validation purposes */
  filters: {
@@ -28,7 +32,6 @@ jest.mock('data/selectors', () => ({

 describe('AssignmentFilter', () => {
  let props = {
-    courseId: '12345',
    assignmentFilterOptions: [
      {
        label: 'assgN1',
@@ -43,17 +46,14 @@ describe('AssignmentFilter', () => {
        id: 'assgn_iD2',
      },
    ],
-    selectedAssignmentType: 'assgnFilterLabel1',
    selectedAssignment: 'assgN1',
-    selectedCohort: 'a cohort',
-    selectedTrack: 'a track',
  };

  beforeEach(() => {
    props = {
      ...props,
      updateQueryParams: jest.fn(),
-      updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
+      fetchGradesIfAssignmentGradeFiltersSet: jest.fn(),
      updateAssignmentFilter: jest.fn(),
    };
  });
@@ -69,7 +69,6 @@ describe('AssignmentFilter', () => {
          el = mount(<AssignmentFilter {...props} />);
          el.instance().handleChange(event);
        });
-
        it('calls props.updateAssignmentFilter with selection', () => {
          expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
            label: newAssgn,
@@ -83,14 +82,33 @@ describe('AssignmentFilter', () => {
              assignment: selected.id,
            });
          });
-        it('calls props.updateGradesIfAssignmentGradeFiltersSet', () => {
-          const method = props.updateGradesIfAssignmentGradeFiltersSet;
-          expect(method).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-          );
+        it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
+          const method = props.fetchGradesIfAssignmentGradeFiltersSet;
+          expect(method).toHaveBeenCalledWith();
+        });
+        describe('no selected option', () => {
+          const value = 'fake';
+          beforeEach(() => {
+            el = mount(<AssignmentFilter {...props} />);
+            el.instance().handleChange({ target: { value } });
+          });
+          it('calls props.updateAssignmentFilter with selection', () => {
+            expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
+              label: value,
+              type: undefined,
+              id: undefined,
+            });
+          });
+          it('calls props.updateQueryParams with selected assignment id',
+            () => {
+              expect(props.updateQueryParams).toHaveBeenCalledWith({
+                assignment: undefined,
+              });
+            });
+          it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
+            const method = props.fetchGradesIfAssignmentGradeFiltersSet;
+            expect(method).toHaveBeenCalledWith();
+          });
        });
      });
    });
@@ -129,43 +147,16 @@ describe('AssignmentFilter', () => {
        );
      });
    });
-    describe('selectedAssignmentType', () => {
-      it('is selected from filters.assignmentType', () => {
-        expect(
-          mapStateToProps(state).selectedAssignmentType,
-        ).toEqual(
-          selectors.filters.assignmentType(state),
-        );
-      });
-    });
-    describe('selectedCohort', () => {
-      it('is selected from filters.cohort', () => {
-        expect(
-          mapStateToProps(state).selectedCohort,
-        ).toEqual(
-          selectors.filters.cohort(state),
-        );
-      });
-    });
-    describe('selectedTrack', () => {
-      it('is selected from filters.track', () => {
-        expect(
-          mapStateToProps(state).selectedTrack,
-        ).toEqual(
-          selectors.filters.track(state),
-        );
-      });
-    });
  });
  describe('mapDispatchToProps', () => {
    test('updateAssignmentFilter', () => {
      expect(mapDispatchToProps.updateAssignmentFilter).toEqual(
-        updateAssignmentFilter,
+        actions.filters.update.assignment,
      );
    });
-    test('updateGradesIfAsssignmentGradeFiltersSet', () => {
-      const prop = mapDispatchToProps.updateGradesIfAssignmentGradeFiltersSet;
-      expect(prop).toEqual(updateGradesIfAssignmentGradeFiltersSet);
+    test('fetchGradesIfAsssignmentGradeFiltersSet', () => {
+      const prop = mapDispatchToProps.fetchGradesIfAssignmentGradeFiltersSet;
+      expect(prop).toEqual(fetchGradesIfAssignmentGradeFiltersSet);
    });
  });
 });
--- a/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/snapshots/test.jsx.snap
@@ -7,21 +7,33 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
  <PercentGroup
    disabled={true}
    id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
  />
  <PercentGroup
    disabled={true}
    id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
  />
  <div
    className="grade-filter-action"
  >
-    <Button
+    <ForwardRef
      active={false}
      disabled={true}
      name="assignmentGradeMinMax"
@@ -30,7 +42,7 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
      variant="outline-secondary"
    >
      Apply
-    </Button>
+    </ForwardRef>
  </div>
 </div>
 `;
@@ -42,21 +54,33 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
  <PercentGroup
    disabled={false}
    id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
  />
  <PercentGroup
    disabled={false}
    id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
    onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
  />
  <div
    className="grade-filter-action"
  >
-    <Button
+    <ForwardRef
      active={false}
      disabled={false}
      name="assignmentGradeMinMax"
@@ -65,7 +89,7 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
      variant="outline-secondary"
    >
      Apply
-    </Button>
+    </ForwardRef>
  </div>
 </div>
 `;
--- a/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx
+++ b/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx
@@ -0,0 +1,103 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import PercentGroup from '../PercentGroup';
+
+export class AssignmentGradeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSetMax = this.handleSetMax.bind(this);
+    this.handleSetMin = this.handleSetMin.bind(this);
+  }
+
+  handleSubmit() {
+    this.props.updateAssignmentLimits(this.props.localAssignmentLimits);
+    this.props.fetchGrades();
+    this.props.updateQueryParams(this.props.localAssignmentLimits);
+  }
+
+  handleSetMax({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMax: value });
+  }
+
+  handleSetMin({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMin: value });
+  }
+
+  render() {
+    const {
+      localAssignmentLimits: { assignmentGradeMax, assignmentGradeMin },
+    } = this.props;
+    return (
+      <div className="grade-filter-inputs">
+        <PercentGroup
+          id="assignmentGradeMin"
+          label={<FormattedMessage {...messages.minGrade} />}
+          value={assignmentGradeMin}
+          disabled={!this.props.selectedAssignment}
+          onChange={this.handleSetMin}
+        />
+        <PercentGroup
+          id="assignmentGradeMax"
+          label={<FormattedMessage {...messages.maxGrade} />}
+          value={assignmentGradeMax}
+          disabled={!this.props.selectedAssignment}
+          onChange={this.handleSetMax}
+        />
+        <div className="grade-filter-action">
+          <Button
+            type="submit"
+            variant="outline-secondary"
+            name="assignmentGradeMinMax"
+            disabled={!this.props.selectedAssignment}
+            onClick={this.handleSubmit}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+AssignmentGradeFilter.defaultProps = {
+  selectedAssignment: '',
+};
+
+AssignmentGradeFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // redux
+  fetchGrades: PropTypes.func.isRequired,
+  localAssignmentLimits: PropTypes.shape({
+    assignmentGradeMax: PropTypes.string,
+    assignmentGradeMin: PropTypes.string,
+  }).isRequired,
+  selectedAssignment: PropTypes.string,
+  setFilter: PropTypes.func.isRequired,
+  updateAssignmentLimits: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  localAssignmentLimits: selectors.app.assignmentGradeLimits(state),
+  selectedAssignment: selectors.filters.selectedAssignmentLabel(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  setFilter: actions.app.setLocalFilter,
+  updateAssignmentLimits: actions.filters.update.assignmentLimits,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentGradeFilter);
--- a/src/components/GradebookFilters/AssignmentGradeFilter/test.jsx
+++ b/src/components/GradebookFilters/AssignmentGradeFilter/test.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { fetchGrades } from 'data/thunkActions/grades';
+
+import {
+  AssignmentGradeFilter,
+  mapStateToProps,
+  mapDispatchToProps,
+} from '.';
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {},
+    filters: {},
+    grades: {},
+  },
+}));
+
+jest.mock('data/thunkActions/grades', () => ({
+  fetchGrades: jest.fn(),
+}));
+
+describe('AssignmentGradeFilter', () => {
+  let props = {};
+  beforeEach(() => {
+    props = {
+      ...props,
+      updateQueryParams: jest.fn(),
+      fetchGrades: jest.fn(),
+      localAssignmentLimits: {
+        assignmentGradeMax: '98',
+        assignmentGradeMin: '2',
+      },
+      selectedAssignment: 'Potions 101.5',
+      setFilter: jest.fn(),
+      updateAssignmentLimits: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('behavior', () => {
+      let el;
+      beforeEach(() => {
+        el = mount(<AssignmentGradeFilter {...props} />);
+      });
+      describe('handleSubmit', () => {
+        beforeEach(() => {
+          el.instance().handleSubmit();
+        });
+        it('calls props.updateAssignmentLimits with local assignment limits', () => {
+          expect(props.updateAssignmentLimits).toHaveBeenCalledWith(props.localAssignmentLimits);
+        });
+        it('calls fetchUserGrades', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
+        });
+        it('updates queryParams with assignment grade min and max', () => {
+          expect(props.updateQueryParams).toHaveBeenCalledWith(props.localAssignmentLimits);
+        });
+      });
+      describe('handleSetMin', () => {
+        it('calls setFilters for assignmentGradeMin', () => {
+          const testVal = 23;
+          el.instance().handleSetMin({ target: { value: testVal } });
+          expect(props.setFilter).toHaveBeenCalledWith({
+            assignmentGradeMin: testVal,
+          });
+        });
+      });
+      describe('handleSetMax', () => {
+        it('calls setFilters for assignmentGradeMax', () => {
+          const testVal = 92;
+          el.instance().handleSetMax({ target: { value: testVal } });
+          expect(props.setFilter).toHaveBeenCalledWith({
+            assignmentGradeMax: testVal,
+          });
+        });
+      });
+    });
+    describe('snapshots', () => {
+      let el;
+      const mockMethods = () => {
+        el.instance().handleSubmit = jest.fn().mockName('handleSubmit');
+        el.instance().handleSetMax = jest.fn().mockName('handleSetMax');
+        el.instance().handleSetMin = jest.fn().mockName('handleSetMin');
+      };
+      test('smoke test', () => {
+        el = shallow(<AssignmentGradeFilter {...props} />);
+        mockMethods(el);
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+      test('buttons and groups disabled if no selected assignment', () => {
+        el = shallow(<AssignmentGradeFilter
+          {...props}
+          selectedAssignment={undefined}
+        />);
+        mockMethods(el);
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { belle: 'in', the: 'castle' };
+    let mappedProps;
+    beforeEach(() => {
+      selectors.app.assignmentGradeLimits = jest.fn((state) => ({ gradeLimits: state }));
+      selectors.filters.selectedAssignmentLabel = jest.fn((state) => ({ assignmentLabel: state }));
+      mappedProps = mapStateToProps(testState);
+    });
+    describe('localAssignmentLimits', () => {
+      it('returns selectors.app.assignmentGradeLimits', () => {
+        expect(
+          mappedProps.localAssignmentLimits,
+        ).toEqual(selectors.app.assignmentGradeLimits(testState));
+      });
+    });
+    describe('selectedAsssignment', () => {
+      it('returns selectors.filters.selectedAssignmentLabel', () => {
+        expect(
+          mappedProps.selectedAssignment,
+        ).toEqual(selectors.filters.selectedAssignmentLabel(testState));
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('fetchGrades', () => {
+      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
+    });
+    test('setFilters', () => {
+      expect(mapDispatchToProps.setFilter).toEqual(actions.app.setLocalFilter);
+    });
+    test('updateAssignmentLimits', () => {
+      expect(
+        mapDispatchToProps.updateAssignmentLimits,
+      ).toEqual(
+        actions.filters.update.assignmentLimits,
+      );
+    });
+  });
+});
--- a/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/snapshots/test.jsx.snap
@@ -7,7 +7,13 @@ exports[`AssignmentTypeFilter Component snapshots SelectGroup disabled if no ass
  <SelectGroup
    disabled={true}
    id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
@@ -40,7 +46,13 @@ exports[`AssignmentTypeFilter Component snapshots smoke test 1`] = `
  <SelectGroup
    disabled={false}
    id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
    onChange={[MockFunction handleChange]}
    options={
      Array [
--- a/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/index.jsx
@@ -3,10 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import * as gradesActions from 'data/actions/grades';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import selectors from 'data/selectors';
+import actions from 'data/actions';

 import SelectGroup from '../SelectGroup';
+import messages from '../messages';

 export class AssignmentTypeFilter extends React.Component {
  constructor(props) {
@@ -35,7 +38,7 @@ export class AssignmentTypeFilter extends React.Component {
      <div className="student-filters">
        <SelectGroup
          id="assignment-types"
-          label="Assignment Types"
+          label={<FormattedMessage {...messages.assignmentTypes} />}
          value={this.props.selectedAssignmentType}
          onChange={this.handleChange}
          disabled={this.props.assignmentFilterOptions.length === 0}
@@ -72,7 +75,7 @@ export const mapStateToProps = (state) => ({
 });

 export const mapDispatchToProps = {
-  filterAssignmentType: gradesActions.filterAssignmentType,
+  filterAssignmentType: actions.filters.update.assignmentType,
 };

 export default connect(mapStateToProps, mapDispatchToProps)(AssignmentTypeFilter);
--- a/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';

 import selectors from 'data/selectors';
-import { filterAssignmentType } from 'data/actions/grades';
+import actions from 'data/actions';

 import {
  AssignmentTypeFilter,
@@ -128,7 +128,7 @@ describe('AssignmentTypeFilter', () => {
  describe('mapDispatchToProps', () => {
    test('filterAssignmentType', () => {
      expect(mapDispatchToProps.filterAssignmentType).toEqual(
-        filterAssignmentType,
+        actions.filters.update.assignmentType,
      );
    });
  });
--- a/src/components/Gradebook/GradebookFilters/CourseGradeFilter/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/CourseGradeFilter/snapshots/test.jsx.snap
@@ -6,16 +6,26 @@ exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
    className="grade-filter-inputs"
  >
    <PercentGroup
-      disabled={false}
      id="minimum-grade"
-      label="Min Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Min Grade"
+          description="Min-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.minGradeFilterLabel"
+        />
+      }
      onChange={[MockFunction handleUpdateMin]}
      value="5"
    />
    <PercentGroup
-      disabled={false}
      id="maximum-grade"
-      label="Max Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Max Grade"
+          description="Max-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.maxGradeFilterLabel"
+        />
+      }
      onChange={[MockFunction handleUpdateMax]}
      value="92"
    />
--- a/src/components/GradebookFilters/CourseGradeFilter/index.jsx
+++ b/src/components/GradebookFilters/CourseGradeFilter/index.jsx
@@ -0,0 +1,103 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import PercentGroup from '../PercentGroup';
+
+export class CourseGradeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleApplyClick = this.handleApplyClick.bind(this);
+    this.handleUpdateMin = this.handleUpdateMin.bind(this);
+    this.handleUpdateMax = this.handleUpdateMax.bind(this);
+    this.updateCourseGradeFilters = this.updateCourseGradeFilters.bind(this);
+  }
+
+  handleApplyClick() {
+    if (this.props.areLimitsValid) {
+      this.updateCourseGradeFilters();
+    }
+  }
+
+  handleUpdateMin({ target: { value } }) {
+    this.props.setLocalFilter({ courseGradeMin: value });
+  }
+
+  handleUpdateMax({ target: { value } }) {
+    this.props.setLocalFilter({ courseGradeMax: value });
+  }
+
+  updateCourseGradeFilters() {
+    this.props.updateFilter(this.props.localCourseLimits);
+    this.props.fetchGrades();
+    this.props.updateQueryParams(this.props.localCourseLimits);
+  }
+
+  render() {
+    const {
+      localCourseLimits: { courseGradeMin, courseGradeMax },
+    } = this.props;
+    return (
+      <>
+        <div className="grade-filter-inputs">
+          <PercentGroup
+            id="minimum-grade"
+            label={<FormattedMessage {...messages.minGrade} />}
+            value={courseGradeMin}
+            onChange={this.handleUpdateMin}
+          />
+          <PercentGroup
+            id="maximum-grade"
+            label={<FormattedMessage {...messages.maxGrade} />}
+            value={courseGradeMax}
+            onChange={this.handleUpdateMax}
+          />
+        </div>
+        <div className="grade-filter-action">
+          <Button
+            variant="outline-secondary"
+            onClick={this.handleApplyClick}
+          >
+            Apply
+          </Button>
+        </div>
+      </>
+    );
+  }
+}
+
+CourseGradeFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // Redux
+  areLimitsValid: PropTypes.bool.isRequired,
+  fetchGrades: PropTypes.func.isRequired,
+  localCourseLimits: PropTypes.shape({
+    courseGradeMin: PropTypes.string.isRequired,
+    courseGradeMax: PropTypes.string.isRequired,
+  }).isRequired,
+  setLocalFilter: PropTypes.func.isRequired,
+  updateFilter: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  areLimitsValid: selectors.app.areCourseGradeFiltersValid(state),
+  localCourseLimits: selectors.app.courseGradeLimits(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  setLocalFilter: actions.app.setLocalFilter,
+  updateFilter: actions.filters.update.courseGradeLimits,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CourseGradeFilter);
--- a/src/components/GradebookFilters/CourseGradeFilter/test.jsx
+++ b/src/components/GradebookFilters/CourseGradeFilter/test.jsx
@@ -0,0 +1,150 @@
+/* eslint-disable import/no-named-as-default */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { fetchGrades } from 'data/thunkActions/grades';
+import {
+  CourseGradeFilter,
+  mapStateToProps,
+  mapDispatchToProps,
+} from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('../PercentGroup', () => 'PercentGroup');
+
+jest.mock('data/thunkActions/grades', () => ({
+  fetchGrades: jest.fn(),
+}));
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      areCourseGradeFiltersValid: jest.fn(state => ({ areCourseGradeFiltersValid: state })),
+      courseGradeLimits: jest.fn(state => ({ courseGradeLimits: state })),
+    },
+  },
+}));
+
+describe('CourseGradeFilter', () => {
+  let props = {
+    localCourseLimits: {
+      courseGradeMin: '5',
+      courseGradeMax: '92',
+    },
+    areLimitsValid: true,
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      fetchGrades: jest.fn(),
+      setLocalFilter: jest.fn(),
+      updateQueryParams: jest.fn(),
+      updateFilter: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('snapshots', () => {
+      test('basic snapshot', () => {
+        const el = shallow(<CourseGradeFilter {...props} />);
+        el.instance().handleUpdateMin = jest.fn().mockName(
+          'handleUpdateMin',
+        );
+        el.instance().handleUpdateMax = jest.fn().mockName(
+          'handleUpdateMax',
+        );
+        el.instance().handleApplyClick = jest.fn().mockName(
+          'handleApplyClick',
+        );
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+
+    describe('behavior', () => {
+      let el;
+      const testVal = 'TESTvalue';
+      beforeEach(() => {
+        el = shallow(<CourseGradeFilter {...props} />);
+      });
+      describe('handleApplyClick', () => {
+        beforeEach(() => {
+          el.instance().updateCourseGradeFilters = jest.fn();
+        });
+        it('calls updateCourseGradeFilters is limits are valid', () => {
+          el.instance().handleApplyClick();
+          expect(el.instance().updateCourseGradeFilters).toHaveBeenCalledWith();
+        });
+        it('does not call updateCourseGradeFilters if limits are not valid', () => {
+          el.setProps({ areLimitsValid: false });
+          el.instance().handleApplyClick();
+          expect(el.instance().updateCourseGradeFilters).not.toHaveBeenCalled();
+        });
+      });
+      describe('updateCourseGradeFilters', () => {
+        beforeEach(() => {
+          el.instance().updateCourseGradeFilters();
+        });
+        it('calls props.updateFilter with selection', () => {
+          expect(props.updateFilter).toHaveBeenCalledWith(props.localCourseLimits);
+        });
+        it('calls props.getUserGrades with selection', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
+        });
+        it('updates query params with courseGradeMin and courseGradeMax', () => {
+          expect(props.updateQueryParams).toHaveBeenCalledWith(props.localCourseLimits);
+        });
+      });
+      describe('handleUpdateMin', () => {
+        it('calls props.setCourseGradeMin with event value', () => {
+          el.instance().handleUpdateMin(
+            { target: { value: testVal } },
+          );
+          expect(props.setLocalFilter).toHaveBeenCalledWith({
+            courseGradeMin: testVal,
+          });
+        });
+      });
+      describe('handleUpdateMax', () => {
+        it('calls props.setCourseGradeMax with event value', () => {
+          el.instance().handleUpdateMax(
+            { target: { value: testVal } },
+          );
+          expect(props.setLocalFilter).toHaveBeenCalledWith({
+            courseGradeMax: testVal,
+          });
+        });
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { peanut: 'butter', jelly: 'time' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('areLimitsValid from app.areCourseGradeFiltersValid', () => {
+      expect(mapped.areLimitsValid).toEqual(selectors.app.areCourseGradeFiltersValid(testState));
+    });
+    test('localCourseLimits from app.courseGradeLimits', () => {
+      expect(mapped.localCourseLimits).toEqual(selectors.app.courseGradeLimits(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
+      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
+    });
+    test('setLocalFilter from actions.app.setLocalFilter', () => {
+      expect(mapDispatchToProps.setLocalFilter).toEqual(actions.app.setLocalFilter);
+    });
+    test('updateFilter from actions.filters.update.courseGradeLimits', () => {
+      expect(mapDispatchToProps.updateFilter).toEqual(actions.filters.update.courseGradeLimits);
+    });
+  });
+});
--- a/src/components/GradebookFilters/GradebookFilters.scss
+++ b/src/components/GradebookFilters/GradebookFilters.scss
@@ -0,0 +1,6 @@
+.filter-sidebar-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px;
+}
--- a/src/components/Gradebook/GradebookFilters/PercentGroup.jsx
+++ b/src/components/Gradebook/GradebookFilters/PercentGroup.jsx
@@ -30,7 +30,7 @@ PercentGroup.defaultProps = {
 };
 PercentGroup.propTypes = {
  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
--- a/src/components/Gradebook/GradebookFilters/PercentGroup.test.jsx
+++ b/src/components/Gradebook/GradebookFilters/PercentGroup.test.jsx
--- a/src/components/Gradebook/GradebookFilters/SelectGroup.jsx
+++ b/src/components/Gradebook/GradebookFilters/SelectGroup.jsx
@@ -23,7 +23,7 @@ const SelectGroup = ({
 );
 SelectGroup.propTypes = {
  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
--- a/src/components/Gradebook/GradebookFilters/SelectGroup.test.jsx
+++ b/src/components/Gradebook/GradebookFilters/SelectGroup.test.jsx
--- a/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/snapshots/test.jsx.snap
@@ -47,7 +47,7 @@ exports[`StudentGroupsFilter Component snapshots Cohorts group disabled if no co
        </option>,
      ]
    }
-    value="Cohorts"
+    value="cohorT3"
  />
 </React.Fragment>
 `;
@@ -168,3 +168,23 @@ Array [
  </option>,
 ]
 `;
+
+exports[`StudentGroupsFilter optionFactory returns a list of options with a default first entry 1`] = `
+Array [
+  <option
+    value="All-Ponies"
+  >
+    All-Ponies
+  </option>,
+  <option
+    value="RDash"
+  >
+    RDash
+  </option>,
+  <option
+    value="PPie"
+  >
+    PPie
+  </option>,
+]
+`;
--- a/src/components/GradebookFilters/StudentGroupsFilter/index.jsx
+++ b/src/components/GradebookFilters/StudentGroupsFilter/index.jsx
@@ -0,0 +1,152 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import SelectGroup from '../SelectGroup';
+
+export const optionFactory = ({ data, defaultOption, key }) => [
+  <option value={defaultOption} key="0">{defaultOption}</option>,
+  ...data.map(
+    entry => (<option key={entry[key]} value={entry.name}>{entry.name}</option>),
+  ),
+];
+
+export class StudentGroupsFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.mapCohortsEntries = this.mapCohortsEntries.bind(this);
+    this.mapTracksEntries = this.mapTracksEntries.bind(this);
+    this.updateCohorts = this.updateCohorts.bind(this);
+    this.updateTracks = this.updateTracks.bind(this);
+  }
+
+  mapCohortsEntries() {
+    return optionFactory({
+      data: this.props.cohorts,
+      defaultOption: this.translate(messages.cohortAll),
+      key: 'id',
+    });
+  }
+
+  mapTracksEntries() {
+    return optionFactory({
+      data: this.props.tracks,
+      defaultOption: this.translate(messages.trackAll),
+      key: 'slug',
+    });
+  }
+
+  selectedTrackSlugFromEvent({ target: { value } }) {
+    const selectedTrackItem = this.props.tracksByName[value];
+    return selectedTrackItem ? selectedTrackItem.slug : null;
+  }
+
+  selectedCohortIdFromEvent({ target: { value } }) {
+    const selectedCohortItem = this.props.cohortsByName[value];
+    return selectedCohortItem ? selectedCohortItem.id.toString() : null;
+  }
+
+  updateTracks(event) {
+    const track = this.selectedTrackSlugFromEvent(event);
+    this.props.updateQueryParams({ track });
+    this.props.updateTrack(track);
+    this.props.fetchGrades();
+  }
+
+  updateCohorts(event) {
+    const cohort = this.selectedCohortIdFromEvent(event);
+    this.props.updateQueryParams({ cohort });
+    this.props.updateCohort(cohort);
+    this.props.fetchGrades();
+  }
+
+  translate(message) {
+    return this.props.intl.formatMessage(message);
+  }
+
+  render() {
+    return (
+      <>
+        <SelectGroup
+          id="Tracks"
+          label={this.translate(messages.tracks)}
+          value={this.props.selectedTrackEntry.name}
+          onChange={this.updateTracks}
+          options={this.mapTracksEntries()}
+        />
+        <SelectGroup
+          id="Cohorts"
+          label={this.translate(messages.cohorts)}
+          value={this.props.selectedCohortEntry.name}
+          disabled={this.props.cohorts.length === 0}
+          onChange={this.updateCohorts}
+          options={this.mapCohortsEntries()}
+        />
+      </>
+    );
+  }
+}
+
+StudentGroupsFilter.defaultProps = {
+  cohorts: [],
+  cohortsByName: {},
+  selectedCohortEntry: { name: '' },
+  selectedTrackEntry: { name: '' },
+  tracks: [],
+  tracksByName: {},
+};
+
+StudentGroupsFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // injected
+  intl: intlShape.isRequired,
+
+  // redux
+  cohorts: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  })),
+  cohortsByName: PropTypes.objectOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  })),
+  fetchGrades: PropTypes.func.isRequired,
+  selectedTrackEntry: PropTypes.shape({ name: PropTypes.string }),
+  selectedCohortEntry: PropTypes.shape({ name: PropTypes.string }),
+  tracks: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    slug: PropTypes.string,
+  })),
+  tracksByName: PropTypes.objectOf(PropTypes.shape({
+    name: PropTypes.string,
+    slug: PropTypes.string,
+  })),
+  updateCohort: PropTypes.func.isRequired,
+  updateTrack: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  cohorts: selectors.cohorts.allCohorts(state),
+  cohortsByName: selectors.cohorts.cohortsByName(state),
+  selectedCohortEntry: selectors.root.selectedCohortEntry(state),
+  selectedTrackEntry: selectors.root.selectedTrackEntry(state),
+  tracks: selectors.tracks.allTracks(state),
+  tracksByName: selectors.tracks.tracksByName(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  updateCohort: actions.filters.update.cohort,
+  updateTrack: actions.filters.update.track,
+};
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter));
--- a/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/StudentGroupsFilter/test.jsx
@@ -3,24 +3,45 @@
 import React from 'react';
 import { shallow } from 'enzyme';

-import { fetchGrades } from 'data/actions/grades';
+import { fetchGrades } from 'data/thunkActions/grades';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
 import {
+  optionFactory,
  StudentGroupsFilter,
  mapStateToProps,
  mapDispatchToProps,
 } from '.';

+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      selectedCohortEntry: jest.fn(state => ({ selectedCohortEntry: state })),
+      selectedTrackEntry: jest.fn(state => ({ selectedTrackEntry: state })),
+    },
+    cohorts: {
+      allCohorts: jest.fn(state => ({ allCohorts: state })),
+      cohortsByName: jest.fn(state => ({ cohortsByName: state })),
+    },
+    tracks: {
+      allTracks: jest.fn(state => ({ allTracks: state })),
+      tracksByName: jest.fn(state => ({ tracksByName: state })),
+    },
+  },
+}));
+
+jest.mock('data/thunkActions/grades', () => ({
+  fetchGrades: jest.fn(),
+}));
+
 describe('StudentGroupsFilter', () => {
  let props = {
-    courseId: '12345',
    cohorts: [
      { name: 'cohorT1', id: 8001 },
      { name: 'cohorT2', id: 8002 },
      { name: 'cohorT3', id: 8003 },
    ],
-    selectedAssignmentType: 'assignMent type 1',
-    selectedCohort: '8003',
-    selectedTrack: 'TracK2_slug',
    tracks: [
      { name: 'TracK1', slug: 'TracK1_slug' },
      { name: 'TracK2', slug: 'TracK2_slug' },
@@ -28,15 +49,40 @@ describe('StudentGroupsFilter', () => {
    ],
  };

-  beforeEach(() => {
-    props = {
-      ...props,
-      getUserGrades: jest.fn(),
-      updateQueryParams: jest.fn(),
-    };
+  describe('optionFactory', () => {
+    it('returns a list of options with a default first entry', () => {
+      const data = [{ cMark: 'rainbow', name: 'RDash' }, { cMark: 'balloons', name: 'PPie' }];
+      const defaultOption = 'All-Ponies';
+      const key = 'cMark';
+      const options = optionFactory({ data, defaultOption, key });
+      expect(options).toMatchSnapshot();
+    });
  });

  describe('Component', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        intl: { formatMessage: (msg) => msg.defaultMessage },
+        cohortsByName: {
+          [props.cohorts[0].name]: props.cohorts[0],
+          [props.cohorts[1].name]: props.cohorts[1],
+          [props.cohorts[2].name]: props.cohorts[2],
+        },
+        tracksByName: {
+          [props.tracks[0].name]: props.tracks[0],
+          [props.tracks[1].name]: props.tracks[1],
+          [props.tracks[2].name]: props.tracks[2],
+        },
+        fetchGrades: jest.fn(),
+        selectedCohortEntry: props.cohorts[2],
+        selectedTrackEntry: props.tracks[1],
+        updateQueryParams: jest.fn(),
+        updateCohort: jest.fn().mockName('updateCohort'),
+        updateTrack: jest.fn().mockName('updateTrack'),
+      };
+    });
+
    describe('snapshots', () => {
      let el;
      beforeEach(() => {
@@ -72,34 +118,6 @@ describe('StudentGroupsFilter', () => {
      beforeEach(() => {
        el = shallow(<StudentGroupsFilter {...props} />);
      });
-      describe('mapSelectedCohortEntry', () => {
-        it('returns the name of the cohort with the same numerical id', () => {
-          // Because selectedCohort is the id of cohorts[2]
-          expect(el.instance().mapSelectedCohortEntry()).toEqual(
-            props.cohorts[2].name,
-          );
-        });
-        it('returns "Cohorts" if no cohort is found', () => {
-          el.setProps({ selectedCohort: '999' });
-          expect(el.instance().mapSelectedCohortEntry()).toEqual(
-            'Cohorts',
-          );
-        });
-      });
-      describe('mapSelectedTrackEntry', () => {
-        it('returns the name of the track with the selected slug', () => {
-          // Because selectedTrack is the slug of tracks[1]
-          expect(el.instance().mapSelectedTrackEntry()).toEqual(
-            props.tracks[1].name,
-          );
-        });
-        it('returns "Tracks" if no track is found', () => {
-          el.setProps({ selectedTrack: 'FAKE' });
-          expect(el.instance().mapSelectedTrackEntry()).toEqual(
-            'Tracks',
-          );
-        });
-      });
      describe('selectedCohortIdFromEvent', () => {
        it('returns the id of the cohort with the name matching the event', () => {
          expect(
@@ -142,13 +160,11 @@ describe('StudentGroupsFilter', () => {
          ).mockReturnValue(selectedSlug);
          el.instance().updateTracks({ target: {} });
        });
-        it('calls getUserGrades with selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            selectedSlug,
-            props.selectedAssignmentType,
-          );
+        it('calls updateTrack with new value', () => {
+          expect(props.updateTrack).toHaveBeenCalledWith(selectedSlug);
+        });
+        it('calls fetchGrades', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
        });
        it('updates queryParams with track value', () => {
          expect(props.updateQueryParams).toHaveBeenCalledWith({
@@ -166,13 +182,11 @@ describe('StudentGroupsFilter', () => {
          ).mockReturnValue(selectedId);
          el.instance().updateCohorts({ target: {} });
        });
-        it('calls getUserGrades with selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            selectedId,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-          );
+        it('calls updateCohort with new value', () => {
+          expect(props.updateCohort).toHaveBeenCalledWith(selectedId);
+        });
+        it('calls fetchGrades', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
        });
        it('updates queryParams with cohort value', () => {
          expect(props.updateQueryParams).toHaveBeenCalledWith({
@@ -183,56 +197,43 @@ describe('StudentGroupsFilter', () => {
    });
  });
  describe('mapStateToProps', () => {
-    const state = {
-      cohorts: { results: ['some', 'cohorts'] },
-      filters: {
-        cohort: 'COHort',
-        track: 'TRacK',
-        assignmentType: 'TYPe',
-      },
-      tracks: { results: ['a', 'few', 'tracks'] },
-    };
-    describe('cohorts', () => {
-      test('drawn from cohorts.results', () => {
-        expect(mapStateToProps(state).cohorts).toEqual(
-          state.cohorts.results,
-        );
-      });
+    const testState = { h: 'e', l: 'l', o: 'oooooooooo' };
+    let mappedProps;
+    beforeAll(() => {
+      mappedProps = mapStateToProps(testState);
    });
-    describe('selectedAssignmentType', () => {
-      test('drawn from filters.assignmentType', () => {
-        expect(mapStateToProps(state).selectedAssignmentType).toEqual(
-          state.filters.assignmentType,
-        );
-      });
+    test('cohorts from selectors.cohorts.allCohorts', () => {
+      expect(mappedProps.cohorts).toEqual(selectors.cohorts.allCohorts(testState));
    });
-    describe('selectedCohort', () => {
-      test('drawn from filters.cohort', () => {
-        expect(mapStateToProps(state).selectedCohort).toEqual(
-          state.filters.cohort,
-        );
-      });
+    test('cohortsByName from selectors.cohorts.cohortsByName', () => {
+      expect(mappedProps.cohortsByName).toEqual(selectors.cohorts.cohortsByName(testState));
    });
-    describe('selectedTrack', () => {
-      test('drawn from filters.track', () => {
-        expect(mapStateToProps(state).selectedTrack).toEqual(
-          state.filters.track,
-        );
-      });
+    test('selectedCohortEntry from selectors.root.selectedCohortEntry', () => {
+      expect(
+        mappedProps.selectedCohortEntry,
+      ).toEqual(selectors.root.selectedCohortEntry(testState));
    });
-    describe('tracks', () => {
-      test('drawn from tracks.results', () => {
-        expect(mapStateToProps(state).tracks).toEqual(
-          state.tracks.results,
-        );
-      });
+    test('selectedTrackEntry from selectors.root.selectedTrackEntry', () => {
+      expect(
+        mappedProps.selectedTrackEntry,
+      ).toEqual(selectors.root.selectedTrackEntry(testState));
+    });
+    test('tracks from selectors.tracks.allTracks', () => {
+      expect(mappedProps.tracks).toEqual(selectors.tracks.allTracks(testState));
+    });
+    test('tracksByName from selectors.tracks.tracksByName', () => {
+      expect(mappedProps.tracksByName).toEqual(selectors.tracks.tracksByName(testState));
    });
  });
  describe('mapDispatchToProps', () => {
-    describe('getUserGrades', () => {
-      test('from fetchGrades', () => {
-        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
-      });
+    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
+      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
+    });
+    test('updateCohort from actions.filters.update.cohort', () => {
+      expect(mapDispatchToProps.updateCohort).toEqual(actions.filters.update.cohort);
+    });
+    test('updateTrack from actions.filters.update.track', () => {
+      expect(mapDispatchToProps.updateTrack).toEqual(actions.filters.update.track);
    });
  });
 });
--- a/src/components/Gradebook/GradebookFilters/snapshots/PercentGroup.test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/snapshots/PercentGroup.test.jsx.snap
--- a/src/components/Gradebook/GradebookFilters/snapshots/SelectGroup.test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/snapshots/SelectGroup.test.jsx.snap
--- a/src/components/GradebookFilters/snapshots/test.jsx.snap
+++ b/src/components/GradebookFilters/snapshots/test.jsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
+<React.Fragment>
+  <div
+    className="filter-sidebar-header"
+  >
+    <h2>
+      <Icon
+        className="fa fa-filter"
+      />
+    </h2>
+    <IconButton
+      alt="Close Filters"
+      aria-label="Close Filters"
+      className="p-1"
+      iconAs="Icon"
+      onClick={[MockFunction this.props.closeMenu]}
+      src="paragon.icons.Close"
+    />
+  </div>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Assignments"
+        description="Assignment filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentsFilterLabel"
+      />
+    }
+  >
+    <div>
+      <Connect(AssignmentTypeFilter)
+        updateQueryParams={[MockFunction]}
+      />
+      <Connect(AssignmentFilter)
+        updateQueryParams={[MockFunction]}
+      />
+      <Connect(AssignmentGradeFilter)
+        updateQueryParams={[MockFunction]}
+      />
+    </div>
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Overall Grade"
+        description="Overall Grade filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.overallGradeFilterLabel"
+      />
+    }
+  >
+    <Connect(CourseGradeFilter)
+      updateQueryParams={[MockFunction]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Student Groups"
+        description="Student Groups filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.studentGroupsFilterLabel"
+      />
+    }
+  >
+    <InjectIntl(ShimmedIntlComponent)
+      updateQueryParams={[MockFunction]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
+    }
+  >
+    <Checkbox
+      checked={true}
+      onChange={[MockFunction handleIncludeTeamMembersChange]}
+    >
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
+    </Checkbox>
+  </Collapsible>
+</React.Fragment>
+`;
--- a/src/components/Gradebook/GradebookFilters/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/index.jsx
@@ -3,11 +3,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import { Collapsible, Form } from '@edx/paragon';
+import {
+  Collapsible,
+  Icon,
+  IconButton,
+  Form,
+} from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';

-import * as filterActions from 'data/actions/filters';
+import actions from 'data/actions';
 import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';

+import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
 import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
@@ -27,65 +36,61 @@ export class GradebookFilters extends React.Component {
    const includeCourseRoleMembers = event.target.checked;
    this.setState({ includeCourseRoleMembers });
    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
+    this.props.fetchGrades();
    this.props.updateQueryParams({ includeCourseRoleMembers });
  }

  collapsibleGroup = (title, content) => (
-    <Collapsible title={title} defaultOpen className="filter-group mb-3">
+    <Collapsible
+      title={<FormattedMessage {...title} />}
+      defaultOpen
+      className="filter-group mb-3"
+    >
      {content}
    </Collapsible>
  );

  render() {
    const {
-      courseId,
-      filterValues,
-      setFilters,
+      intl,
      updateQueryParams,
    } = this.props;
    return (
      <>
-        {this.collapsibleGroup('Assignments', (
+        <div className="filter-sidebar-header">
+          <h2><Icon className="fa fa-filter" /></h2>
+          <IconButton
+            className="p-1"
+            onClick={this.props.closeMenu}
+            iconAs={Icon}
+            src={Close}
+            alt={intl.formatMessage(messages.closeFilters)}
+            aria-label={intl.formatMessage(messages.closeFilters)}
+          />
+        </div>
+
+        {this.collapsibleGroup(messages.assignments, (
          <div>
-            <AssignmentTypeFilter
-              updateQueryParams={updateQueryParams}
-            />
-            <AssignmentFilter
-              courseId={courseId}
-              updateQueryParams={updateQueryParams}
-            />
-            <AssignmentGradeFilter
-              {...{
-                courseId,
-                filterValues,
-                setFilters,
-                updateQueryParams,
-              }}
-            />
+            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+            <AssignmentFilter updateQueryParams={updateQueryParams} />
+            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
          </div>
        ))}
-        {this.collapsibleGroup('Overall Grade', (
-          <CourseGradeFilter
-            {...{
-              filterValues,
-              setFilters,
-              courseId,
-              updateQueryParams,
-            }}
-          />
+
+        {this.collapsibleGroup(messages.overallGrade, (
+          <CourseGradeFilter updateQueryParams={updateQueryParams} />
        ))}
-        {this.collapsibleGroup('Student Groups', (
-          <StudentGroupsFilter
-            courseId={courseId}
-            updateQueryParams={updateQueryParams}
-          />
+
+        {this.collapsibleGroup(messages.studentGroups, (
+          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
        ))}
-        {this.collapsibleGroup('Include Course Team Members', (
+
+        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
          <Form.Checkbox
            checked={this.state.includeCourseRoleMembers}
            onChange={this.handleIncludeTeamMembersChange}
          >
-            Include Course Team Members
+            <FormattedMessage {...messages.includeCourseTeamMembers} />
          </Form.Checkbox>
        ))}
      </>
@@ -96,17 +101,14 @@ GradebookFilters.defaultProps = {
  includeCourseRoleMembers: false,
 };
 GradebookFilters.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  filterValues: PropTypes.shape({
-    assignmentGradeMin: PropTypes.string,
-    assignmentGradeMax: PropTypes.string,
-    courseGradeMin: PropTypes.string,
-    courseGradeMax: PropTypes.string,
-  }).isRequired,
-  setFilters: PropTypes.func.isRequired,
+  updateQueryParams: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  closeMenu: PropTypes.func.isRequired,
+  fetchGrades: PropTypes.func.isRequired,
  includeCourseRoleMembers: PropTypes.bool,
  updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
-  updateQueryParams: PropTypes.func.isRequired,
 };

 export const mapStateToProps = (state) => ({
@@ -114,7 +116,9 @@ export const mapStateToProps = (state) => ({
 });

 export const mapDispatchToProps = {
-  updateIncludeCourseRoleMembers: filterActions.updateIncludeCourseRoleMembers,
+  closeMenu: thunkActions.app.filterMenu.close,
+  fetchGrades: thunkActions.grades.fetchGrades,
+  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
 };

-export default connect(mapStateToProps, mapDispatchToProps)(GradebookFilters);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));
--- a/src/components/GradebookFilters/messages.js
+++ b/src/components/GradebookFilters/messages.js
@@ -0,0 +1,71 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  assignments: {
+    id: 'gradebook.GradebookFilters.assignmentsFilterLabel',
+    defaultMessage: 'Assignments',
+    description: 'Assignment filter group label in Gradebook Filters',
+  },
+  overallGrade: {
+    id: 'gradebook.GradebookFilters.overallGradeFilterLabel',
+    defaultMessage: 'Overall Grade',
+    description: 'Overall Grade filter group label in Gradebook Filters',
+  },
+  studentGroups: {
+    id: 'gradebook.GradebookFilters.studentGroupsFilterLabel',
+    defaultMessage: 'Student Groups',
+    description: 'Student Groups filter group label in Gradebook Filters',
+  },
+  includeCourseTeamMembers: {
+    id: 'gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel',
+    defaultMessage: 'Include Course Team Members',
+    description: 'Include Course Team Members filter label in Gradebook Filters',
+  },
+  assignment: {
+    id: 'gradebook.GradebookFilters.assignmentFilterLabel',
+    defaultMessage: 'Assignment',
+    description: 'Assignment filter select label in Gradebook Filters',
+  },
+  assignmentTypes: {
+    id: 'gradebook.GradebookFilters.assignmentTypesLabel',
+    defaultMessage: 'Assignment Types',
+    description: 'Assignment Types filter select label in Gradebook Filters',
+  },
+  maxGrade: {
+    id: 'gradebook.GradebookFilters.maxGradeFilterLabel',
+    defaultMessage: 'Max Grade',
+    description: 'Max-grade filter select label in Gradebook Filters',
+  },
+  minGrade: {
+    id: 'gradebook.GradebookFilters.minGradeFilterLabel',
+    defaultMessage: 'Min Grade',
+    description: 'Min-grade filter select label in Gradebook Filters',
+  },
+  cohorts: {
+    id: 'gradebook.GradebookFilters.cohorts',
+    defaultMessage: 'Cohorts',
+    description: 'Cohorts filter select label in Gradebook Filters',
+  },
+  cohortAll: {
+    id: 'gradebook.GradebookFilters.cohortsAll',
+    defaultMessage: 'Cohort-All',
+    description: 'Cohorts filter select default in Gradebook Filters',
+  },
+  tracks: {
+    id: 'gradebook.GradebookFilters.tracks',
+    defaultMessage: 'Tracks',
+    description: 'Tracks filter select label in Gradebook Filters',
+  },
+  trackAll: {
+    id: 'gradebook.GradebookFilters.trackAll',
+    defaultMessage: 'Track-All',
+    description: 'Tracks filter select default in Gradebook Filters',
+  },
+  closeFilters: {
+    id: 'gradebook.GradebookFilters.closeFilters',
+    defaultMessage: 'Close Filters',
+    description: 'Button label for Close button in Gradebook Filters',
+  },
+});
+
+export default messages;
--- a/src/components/Gradebook/GradebookFilters/test.jsx
+++ b/src/components/Gradebook/GradebookFilters/test.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';

-import { updateIncludeCourseRoleMembers } from 'data/actions/filters';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';

 import {
  GradebookFilters,
@@ -14,26 +16,41 @@ jest.mock('@edx/paragon', () => ({
  Form: {
    Checkbox: 'Checkbox',
  },
+  Icon: 'Icon',
+  IconButton: 'IconButton',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Close: 'paragon.icons.Close',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    filters: {
+      includeCourseRoleMembers: jest.fn((state) => ({ includeCourseRoleMembers: state })),
+    },
+  },
+}));
+jest.mock('data/thunkActions', () => ({
+  __esModule: true,
+  default: {
+    app: { filterMenu: { close: jest.fn() } },
+    grades: { fetchGrades: jest.fn() },
+  },
 }));

 describe('GradebookFilters', () => {
  let props = {
-    courseId: '12345',
-    filterValues: {
-      assignmentGradeMin: '10',
-      assignmentGradeMax: '90',
-      courseGradeMin: '20',
-      courseGradeMax: '80',
-    },
    includeCourseRoleMembers: true,
  };

  beforeEach(() => {
    props = {
      ...props,
-      updateQueryParams: jest.fn(),
+      intl: { formatMessage: (msg) => msg.defaultMessage },
+      closeMenu: jest.fn().mockName('this.props.closeMenu'),
+      fetchGrades: jest.fn(),
      updateIncludeCourseRoleMembers: jest.fn(),
-      setFilters: jest.fn(),
+      updateQueryParams: jest.fn(),
    };
  });

@@ -82,24 +99,23 @@ describe('GradebookFilters', () => {
    });
  });
  describe('mapStateToProps', () => {
-    const state = {
-      filters: {
-        includeCourseRoleMembers: 'plz do',
-      },
-    };
-    describe('includeCourseRoleMembers', () => {
-      it('is drawn from filters.includeCourseRoleMembers', () => {
-        expect(mapStateToProps(state).includeCourseRoleMembers).toEqual(
-          state.filters.includeCourseRoleMembers,
+    const testState = { A: 'laska' };
+    test('includeCourseRoleMembers from filters.includeCourseRoleMembers', () => {
+      expect(
+        mapStateToProps(testState).includeCourseRoleMembers,
+      ).toEqual(selectors.filters.includeCourseRoleMembers(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
+      expect(mapDispatchToProps.fetchGrades).toEqual(thunkActions.grades.fetchGrades);
+    });
+    describe('updateIncludeCourseRoleMembers', () => {
+      test('from actions.filters.update.includeCourseRoleMembers', () => {
+        expect(mapDispatchToProps.updateIncludeCourseRoleMembers).toEqual(
+          actions.filters.update.includeCourseRoleMembers,
        );
      });
    });
  });
-  describe('mapDispatchToProps', () => {
-    test('updateIncludeCourseRoleMembers', () => {
-      expect(mapDispatchToProps.updateIncludeCourseRoleMembers).toEqual(
-        updateIncludeCourseRoleMembers,
-      );
-    });
-  });
 });
--- a/src/components/GradebookHeader/snapshots/test.jsx.snap
+++ b/src/components/GradebookHeader/snapshots/test.jsx.snap
@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookHeader component snapshots default values (grades frozen, cannot view). unauthorized warning, but no grades frozen warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots grades frozen, can view. grades frozen warning but no unauthorized warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots grades frozen, cannot view unauthorized warning, and grades frozen warning. 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is bulkManagementHistory view toggle view button to grades 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="Return to Gradebook"
+        description="Button text for button navigating to Grades view."
+        id="gradebook.GradebookHeader.toGradesView"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is grades view toggle view button to activity log 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="View Bulk Management History"
+        description="Button text for button navigating to Bulk Managment Activity Log"
+        id="gradebook.GradebookHeader.toActivityLogButton"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { configuration } from 'config';
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import messages from './messages';
+
+export class GradebookHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleToggleViewClick = this.handleToggleViewClick.bind(this);
+  }
+
+  get toggleViewMessage() {
+    return this.props.activeView === views.grades
+      ? messages.toActivityLog
+      : messages.toGradesView;
+  }
+
+  lmsInstructorDashboardUrl = courseId => (
+    `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`
+  );
+
+  handleToggleViewClick() {
+    const newView = this.props.activeView === views.grades ? views.bulkManagementHistory : views.grades;
+    this.props.setView(newView);
+  }
+
+  render() {
+    return (
+      <div className="gradebook-header">
+        <a
+          href={this.lmsInstructorDashboardUrl(this.props.courseId)}
+          className="mb-3"
+        >
+          <span aria-hidden="true">{'<< '}</span>
+          <FormattedMessage {...messages.backToDashboard} />
+        </a>
+        <h1>
+          <FormattedMessage {...messages.gradebook} />
+        </h1>
+        <div className="subtitle-row d-flex justify-content-between align-items-center">
+          <h3>{this.props.courseId}</h3>
+          { this.props.showBulkManagement && (
+            <Button
+              variant="tertiary"
+              onClick={this.handleToggleViewClick}
+            >
+              <FormattedMessage {...this.toggleViewMessage} />
+            </Button>
+          )}
+        </div>
+        {this.props.areGradesFrozen
+          && (
+          <div className="alert alert-warning" role="alert">
+            <FormattedMessage {...messages.frozenWarning} />
+          </div>
+          )}
+        {(this.props.canUserViewGradebook === false) && (
+          <div className="alert alert-warning" role="alert">
+            <FormattedMessage {...messages.unauthorizedWarning} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+GradebookHeader.defaultProps = {
+  // redux
+  courseId: '',
+  areGradesFrozen: false,
+  canUserViewGradebook: false,
+  showBulkManagement: false,
+};
+
+GradebookHeader.propTypes = {
+  // redux
+  activeView: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  areGradesFrozen: PropTypes.bool,
+  canUserViewGradebook: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+  showBulkManagement: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  activeView: selectors.app.activeView(state),
+  courseId: selectors.app.courseId(state),
+  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
+  canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookHeader);
--- a/src/components/GradebookHeader/messages.js
+++ b/src/components/GradebookHeader/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  backToDashboard: {
+    id: 'gradebook.GradebookHeader.backButton',
+    defaultMessage: 'Back to Dashboard',
+    description: 'Button text to take user back to LMS dashboard in Gradebook Header',
+  },
+  gradebook: {
+    id: 'gradebook.GradebookHeader.appLabel',
+    defaultMessage: 'Gradebook',
+    description: 'Top-level app title in Gradebook Header component',
+  },
+  frozenWarning: {
+    id: 'gradebook.GradebookHeader.frozenWarning',
+    defaultMessage: 'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+    description: 'Warning message in Gradebook Header for frozen messages',
+  },
+  unauthorizedWarning: {
+    id: 'gradebook.GradebookHeader.unauthorizedWarning',
+    defaultMessage: 'You are not authorized to view the gradebook for this course.',
+    description: 'Warning message in Gradebook Header when user is not allowed to view the app',
+  },
+  toActivityLog: {
+    id: 'gradebook.GradebookHeader.toActivityLogButton',
+    defaultMessage: 'View Bulk Management History',
+    description: 'Button text for button navigating to Bulk Managment Activity Log',
+  },
+  toGradesView: {
+    id: 'gradebook.GradebookHeader.toGradesView',
+    defaultMessage: 'Return to Gradebook',
+    description: 'Button text for button navigating to Grades view.',
+  },
+});
+
+export default messages;
--- a/src/components/GradebookHeader/test.jsx
+++ b/src/components/GradebookHeader/test.jsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { views } from 'data/constants/app';
+import messages from './messages';
+import { GradebookHeader, mapDispatchToProps, mapStateToProps } from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setView: jest.fn() },
+  },
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      activeView: jest.fn(state => ({ aciveView: state })),
+      courseId: jest.fn(state => ({ courseId: state })),
+    },
+    assignmentTypes: { areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })) },
+    roles: { canUserViewGradebook: jest.fn(state => ({ canUserViewGradebook: state })) },
+    root: { showBulkManagement: jest.fn(state => ({ showBulkManagement: state })) },
+  },
+}));
+
+const courseId = 'fakeID';
+describe('GradebookHeader component', () => {
+  const props = {
+    activeView: views.grades,
+    areGradesFrozen: false,
+    canUserViewGradebook: false,
+    courseId,
+    showBulkManagement: false,
+  };
+  beforeEach(() => {
+    props.setView = jest.fn();
+  });
+  describe('snapshots', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+      el.instance().handleToggleViewClick = jest.fn().mockName('this.handleToggleViewClick');
+    });
+    describe('default values (grades frozen, cannot view).', () => {
+      test('unauthorized warning, but no grades frozen warning', () => {
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, cannot view', () => {
+      test('unauthorized warning, and grades frozen warning.', () => {
+        el.setProps({ areGradesFrozen: true });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, can view.', () => {
+      test('grades frozen warning but no unauthorized warning', () => {
+        el.setProps({ areGradesFrozen: true, canUserViewGradebook: true });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is grades view', () => {
+      test('toggle view button to activity log', () => {
+        el.setProps({ showBulkManagement: true });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toActivityLog} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is bulkManagementHistory view', () => {
+      test('toggle view button to grades', () => {
+        el.setProps({ showBulkManagement: true, activeView: views.bulkManagementHistory });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toGradesView} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('behavior', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+    });
+    describe('handleToggleViewClick', () => {
+      test('calls setView with activity view if activeView is grades', () => {
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+      });
+      test('calls setView with grades view if activeView is bulkManagementHistory', () => {
+        el.setProps({ activeView: views.bulkManagementHistory });
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.grades);
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { a: 'test', example: 'state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('activeView from app.activeView', () => {
+      expect(mapped.activeView).toEqual(selectors.app.activeView(testState));
+    });
+    test('courseId from app.courseId', () => {
+      expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
+    });
+    test('areGradesFrozen from assignmentTypes selector', () => {
+      expect(
+        mapped.areGradesFrozen,
+      ).toEqual(selectors.assignmentTypes.areGradesFrozen(testState));
+    });
+    test('canUserViewGradebook from roles selector', () => {
+      expect(
+        mapped.canUserViewGradebook,
+      ).toEqual(selectors.roles.canUserViewGradebook(testState));
+    });
+    test('showBulkManagement from root showBulkManagement selector', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
+    });
+  });
+});
--- a/src/components/GradesView/BulkManagementControls.jsx
+++ b/src/components/GradesView/BulkManagementControls.jsx
@@ -0,0 +1,71 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import NetworkButton from 'components/NetworkButton';
+import ImportGradesButton from './ImportGradesButton';
+
+import messages from './BulkManagementControls.messages';
+
+/**
+ * <BulkManagementControls />
+ * Provides download buttons for Bulk Management and Intervention reports, only if
+ * showBulkManagement is set in redus.
+ */
+export class BulkManagementControls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
+    this.handleViewActivityLog = this.handleViewActivityLog.bind(this);
+  }
+
+  handleClickExportGrades() {
+    this.props.downloadBulkGradesReport();
+    window.location.assign(this.props.gradeExportUrl);
+  }
+
+  handleViewActivityLog() {
+    this.props.setView(views.bulkManagementHistory);
+  }
+
+  render() {
+    return this.props.showBulkManagement && (
+      <div className="d-flex">
+        <NetworkButton
+          label={messages.downloadGradesBtn}
+          onClick={this.handleClickExportGrades}
+        />
+        <ImportGradesButton />
+      </div>
+    );
+  }
+}
+
+BulkManagementControls.defaultProps = {
+  showBulkManagement: false,
+};
+
+BulkManagementControls.propTypes = {
+  // redux
+  downloadBulkGradesReport: PropTypes.func.isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
+  showBulkManagement: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeExportUrl: selectors.root.gradeExportUrl(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
--- a/src/components/GradesView/BulkManagementControls.messages.js
+++ b/src/components/GradesView/BulkManagementControls.messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  downloadGradesBtn: {
+    id: 'gradebook.GradesView.BulkManagementControls.bulkManagementLabel',
+    defaultMessage: 'Download Grades',
+    description: 'Button text for bulk grades download control in GradesView',
+  },
+});
+
+export default messages;
--- a/src/components/GradesView/BulkManagementControls.test.jsx
+++ b/src/components/GradesView/BulkManagementControls.test.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { views } from 'data/constants/app';
+
+import {
+  BulkManagementControls,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './BulkManagementControls';
+
+jest.mock('./ImportGradesButton', () => 'ImportGradesButton');
+jest.mock('components/NetworkButton', () => 'NetworkButton');
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      gradeExportUrl: (state) => ({ gradeExportUrl: state }),
+      interventionExportUrl: (state) => ({ interventionExportUrl: state }),
+      showBulkManagement: (state) => ({ showBulkManagement: state }),
+    },
+  },
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setView: jest.fn() },
+    grades: {
+      downloadReport: {
+        bulkGrades: jest.fn(),
+        intervention: jest.fn(),
+      },
+    },
+  },
+}));
+
+describe('BulkManagementControls', () => {
+  describe('component', () => {
+    let el;
+    let props = {
+      gradeExportUrl: 'gradesGoHere',
+      interventionExportUrl: 'interventionsGoHere',
+    };
+    beforeEach(() => {
+      props = {
+        ...props,
+        downloadBulkGradesReport: jest.fn(),
+        downloadInterventionReport: jest.fn(),
+        setView: jest.fn(),
+      };
+    });
+    test('snapshot - empty if showBulkManagement is not truthy', () => {
+      expect(shallow(<BulkManagementControls {...props} />)).toEqual({});
+    });
+    describe('behavior', () => {
+      const oldWindowLocation = window.location;
+
+      beforeAll(() => {
+        delete window.location;
+        window.location = Object.defineProperties(
+          {},
+          {
+            ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+            assign: {
+              configurable: true,
+              value: jest.fn(),
+            },
+          },
+        );
+      });
+      beforeEach(() => {
+        window.location.assign.mockReset();
+        el = shallow(<BulkManagementControls {...props} showBulkManagement />);
+      });
+      afterAll(() => {
+        // restore `window.location` to the `jsdom` `Location` object
+        window.location = oldWindowLocation;
+      });
+      describe('handleViewActivityLog', () => {
+        it('calls props.setView(views.bulkManagementHistory)', () => {
+          el.instance().handleViewActivityLog();
+          expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+        });
+      });
+      describe('handleClickExportGrades', () => {
+        const assertions = [
+          'calls props.downloadBulkGradesReport',
+          'sets location to props.gradeExportUrl',
+        ];
+        it(assertions.join(' and '), () => {
+          el.instance().handleClickExportGrades();
+          expect(props.downloadBulkGradesReport).toHaveBeenCalled();
+          expect(window.location.assign).toHaveBeenCalledWith(props.gradeExportUrl);
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { do: 'not', test: 'me' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('gradeExportUrl from root.gradeExportUrl', () => {
+      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
+    });
+    test('showBulkManagement from root.showBulkManagement', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
+      expect(
+        mapDispatchToProps.downloadBulkGradesReport,
+      ).toEqual(actions.grades.downloadReport.bulkGrades);
+    });
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
+    });
+  });
+});
--- a/src/components/GradesView/EditModal/HistoryHeader.jsx
+++ b/src/components/GradesView/EditModal/HistoryHeader.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * HistoryHeader
+ * simple display container for an individual history table header
+ * @param {string} id - header id
+ * @param {string} label - header label
+ * @param {string} value - header value
+ */
+const HistoryHeader = ({ id, label, value }) => (
+  <div>
+    <div className={`grade-history-header grade-history-${id}`}>{label}: </div>
+    <div>{value}</div>
+  </div>
+);
+HistoryHeader.defaultProps = {
+  value: null,
+};
+HistoryHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default HistoryHeader;
--- a/src/components/GradesView/EditModal/HistoryHeader.test.jsx
+++ b/src/components/GradesView/EditModal/HistoryHeader.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import HistoryHeader from './HistoryHeader';
+
+describe('HistoryHeader', () => {
+  const props = {
+    id: 'water',
+    label: 'Brita',
+    value: 'hydration',
+  };
+  describe('Component', () => {
+    test('snapshot', () => {
+      expect(shallow(<HistoryHeader {...props} />)).toMatchSnapshot();
+    });
+  });
+});
--- a/src/components/GradesView/EditModal/ModalHeaders.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+
+import messages from './messages';
+import HistoryHeader from './HistoryHeader';
+
+/**
+ * <ModalHeaders />
+ * Provides a list of HistoryHeaders for the student name, assignment,
+ * original grade, and current override grade.
+ */
+export const ModalHeaders = ({
+  modalState,
+  originalGrade,
+  currentGrade,
+}) => (
+  <div>
+    <HistoryHeader
+      id="assignment"
+      label={<FormattedMessage {...messages.assignmentHeader} />}
+      value={modalState.assignmentName}
+    />
+    <HistoryHeader
+      id="student"
+      label={<FormattedMessage {...messages.studentHeader} />}
+      value={modalState.updateUserName}
+    />
+    <HistoryHeader
+      id="original-grade"
+      label={<FormattedMessage {...messages.originalGradeHeader} />}
+      value={originalGrade}
+    />
+    <HistoryHeader
+      id="current-grade"
+      label={<FormattedMessage {...messages.currentGradeHeader} />}
+      value={currentGrade}
+    />
+  </div>
+);
+ModalHeaders.defaultProps = {
+  currentGrade: null,
+  originalGrade: null,
+};
+ModalHeaders.propTypes = {
+  // redux
+  currentGrade: PropTypes.number,
+  originalGrade: PropTypes.number,
+  modalState: PropTypes.shape({
+    assignmentName: PropTypes.string.isRequired,
+    updateUserName: PropTypes.string,
+  }).isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  modalState: {
+    assignmentName: selectors.app.modalState.assignmentName(state),
+    updateUserName: selectors.app.modalState.updateUserName(state),
+  },
+  currentGrade: selectors.grades.gradeOverrideCurrentEarnedGradedOverride(state),
+  originalGrade: selectors.grades.gradeOriginalEarnedGraded(state),
+});
+
+export default connect(mapStateToProps)(ModalHeaders);
--- a/src/components/GradesView/EditModal/ModalHeaders.test.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.test.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+
+import {
+  ModalHeaders,
+  mapStateToProps,
+} from './ModalHeaders';
+
+jest.mock('./HistoryHeader', () => 'HistoryHeader');
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      editUpdateData: jest.fn(state => ({ editUpdateData: state })),
+      modalState: {
+        assignmentName: jest.fn(state => ({ assignmentName: state })),
+        updateUserName: jest.fn(state => ({ updateUserName: state })),
+      },
+    },
+    grades: {
+      gradeOverrideCurrentEarnedGradedOverride: jest.fn(state => ({ currentGrade: state })),
+      gradeOriginalEarnedGraded: jest.fn(state => ({ originalGrade: state })),
+    },
+  },
+}));
+describe('ModalHeaders', () => {
+  let el;
+  const props = {
+    currentGrade: 2,
+    originalGrade: 20,
+    modalState: {
+      assignmentName: 'Qwerty',
+      updateUserName: 'Uiop',
+    },
+  };
+
+  describe('Component', () => {
+    describe('snapshots', () => {
+      beforeEach(() => {
+      });
+      describe('gradeOverrideHistoryError is and empty and open is true', () => {
+        test('modal open and StatusAlert showing', () => {
+          el = shallow(<ModalHeaders {...props} />);
+          expect(el).toMatchSnapshot();
+        });
+      });
+      describe('gradeOverrideHistoryError is empty and open is false', () => {
+        test('modal closed and StatusAlert closed', () => {
+          el = shallow(
+            <ModalHeaders {...props} open={false} gradeOverrideHistoryError="" />,
+          );
+          expect(el).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { he: 'lives in a', pineapple: 'under the sea' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    describe('modalState', () => {
+      test('assignmentName from app.modalState.assignmentName', () => {
+        expect(
+          mapped.modalState.assignmentName,
+        ).toEqual(selectors.app.modalState.assignmentName(testState));
+      });
+      test('updateUserName from app.modalState.updateUserName', () => {
+        expect(
+          mapped.modalState.updateUserName,
+        ).toEqual(selectors.app.modalState.updateUserName(testState));
+      });
+    });
+    describe('originalGrade', () => {
+      test('from grades.gradeOverrideCurrentEarnedGradedOverride', () => {
+        expect(mapped.currentGrade).toEqual(
+          selectors.grades.gradeOverrideCurrentEarnedGradedOverride(testState),
+        );
+      });
+    });
+    describe('originalGrade', () => {
+      test('from grades.gradeOriginalEarnedGrades', () => {
+        expect(mapped.originalGrade).toEqual(
+          selectors.grades.gradeOriginalEarnedGraded(testState),
+        );
+      });
+    });
+  });
+});
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
@@ -0,0 +1,64 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Form } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+
+/**
+ * <AdjustedGradeInput />
+ * Input control for adjusting the grade of a unit
+ * displays an "/ ${possibleGrade} if there is one in the data model.
+ */
+export class AdjustedGradeInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange = ({ target }) => {
+    this.props.setModalState({ adjustedGradeValue: target.value });
+  };
+
+  render() {
+    return (
+      <span>
+        <Form.Control
+          type="text"
+          name="adjustedGradeValue"
+          value={this.props.value}
+          onChange={this.onChange}
+        />
+        {this.props.possibleGrade && ` / ${this.props.possibleGrade}`}
+      </span>
+    );
+  }
+}
+AdjustedGradeInput.defaultProps = {
+  possibleGrade: null,
+};
+AdjustedGradeInput.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+  possibleGrade: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  setModalState: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  possibleGrade: selectors.root.editModalPossibleGrade(state),
+  value: selectors.app.modalState.adjustedGradeValue(state),
+});
+
+export const mapDispatchToProps = {
+  setModalState: actions.app.setModalState,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AdjustedGradeInput);
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import {
+  AdjustedGradeInput,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './AdjustedGradeInput';
+
+jest.mock('@edx/paragon', () => ({
+  Form: { Control: () => 'Form.Control' },
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      editModalPossibleGrade: jest.fn(state => ({ updateUserName: state })),
+    },
+    app: {
+      modalState: { adjustedGradeValue: jest.fn(state => ({ adjustedGradeValue: state })) },
+    },
+  },
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setModalState: jest.fn() },
+  },
+}));
+describe('AdjustedGradeInput', () => {
+  let el;
+  let props = {
+    value: 1,
+    possibleGrade: 5,
+  };
+  beforeEach(() => {
+    props = {
+      ...props,
+      setModalState: jest.fn(),
+    };
+  });
+  describe('Component', () => {
+    beforeEach(() => {
+      el = shallow(<AdjustedGradeInput {...props} />);
+    });
+    describe('snapshots', () => {
+      test('displays input control and "out of possible grade" label', () => {
+        el.instance().onChange = jest.fn().mockName('this.onChange');
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('behavior', () => {
+      describe('onChange', () => {
+        it('calls props.setModalState event target value', () => {
+          const value = 42;
+          el.instance().onChange({ target: { value } });
+          expect(props.setModalState).toHaveBeenCalledWith({
+            adjustedGradeValue: value,
+          });
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { like: 'no one', ever: 'was' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    describe('modalState', () => {
+      test('possibleGrade from root.editModalPossibleGrade', () => {
+        expect(
+          mapped.possibleGrade,
+        ).toEqual(selectors.root.editModalPossibleGrade(testState));
+      });
+      test('updateUserName from app.modalState.updateUserName', () => {
+        expect(
+          mapped.value,
+        ).toEqual(selectors.app.modalState.adjustedGradeValue(testState));
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('setModalState from actions.app.setModalState', () => {
+      expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
+    });
+  });
+});
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Form } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+
+/**
+ * <ReasonInput />
+ * Input control for the "reason for change" field in the Edit modal.
+ */
+export class ReasonInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ref = React.createRef();
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.ref.current.focus();
+  }
+
+  onChange = (event) => {
+    this.props.setModalState({ reasonForChange: event.target.value });
+  };
+
+  render() {
+    return (
+      <Form.Control
+        type="text"
+        name="reasonForChange"
+        value={this.props.value}
+        onChange={this.onChange}
+        ref={this.ref}
+      />
+    );
+  }
+}
+ReasonInput.propTypes = {
+  // redux
+  setModalState: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  value: selectors.app.modalState.reasonForChange(state),
+});
+
+export const mapDispatchToProps = {
+  setModalState: actions.app.setModalState,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReasonInput);
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import {
+  ReasonInput,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './ReasonInput';
+
+jest.mock('@edx/paragon', () => ({
+  Form: { Control: () => 'Form.Control' },
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      modalState: { reasonForChange: jest.fn(state => ({ reasonForChange: state })) },
+    },
+  },
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setModalState: jest.fn() },
+  },
+}));
+describe('ReasonInput', () => {
+  let el;
+  let props = {
+    value: 'did not answer the question',
+  };
+  beforeEach(() => {
+    props = {
+      ...props,
+      setModalState: jest.fn(),
+    };
+  });
+  describe('Component', () => {
+    beforeEach(() => {
+      el = shallow(<ReasonInput {...props} />, { disableLifecycleMethods: true });
+    });
+    describe('snapshots', () => {
+      test('displays reason for change input control', () => {
+        el.instance().onChange = jest.fn().mockName('this.onChange');
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('behavior', () => {
+      describe('onChange', () => {
+        it('calls props.setModalState event target value', () => {
+          const value = 42;
+          el.instance().onChange({ target: { value } });
+          expect(props.setModalState).toHaveBeenCalledWith({
+            reasonForChange: value,
+          });
+        });
+      });
+      describe('componentDidMount', () => {
+        it('focuses the input ref', () => {
+          const focus = jest.fn();
+          expect(el.instance().ref).toEqual({ current: null });
+          el.instance().ref.current = { focus };
+          el.instance().componentDidMount();
+          expect(el.instance().ref.current.focus).toHaveBeenCalledWith();
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { to: { catchThem: 'my real test', trainThem: 'my cause!' } };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    describe('modalState', () => {
+      test('value from app.modalState.reasonForChange', () => {
+        expect(mapped.value).toEqual(selectors.app.modalState.reasonForChange(testState));
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('setModalState from actions.app.setModalState', () => {
+      expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
+    });
+  });
+});
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/AdjustedGradeInput.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/AdjustedGradeInput.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdjustedGradeInput Component snapshots displays input control and "out of possible grade" label 1`] = `
+<span>
+  <Control
+    name="adjustedGradeValue"
+    onChange={[MockFunction this.onChange]}
+    type="text"
+    value={1}
+  />
+   / 5
+</span>
+`;
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/ReasonInput.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/ReasonInput.test.jsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReasonInput Component snapshots displays reason for change input control 1`] = `
+<Control
+  name="reasonForChange"
+  onChange={[MockFunction this.onChange]}
+  type="text"
+  value="did not answer the question"
+/>
+`;
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/test.jsx.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
+<Table
+  columns={
+    Array [
+      Object {
+        "key": "date",
+        "label": <FormattedMessage
+          defaultMessage="Date"
+          description="Edit Modal Override Table Date column header"
+          id="gradebook.GradesView.EditModal.Overrides.dateHeader"
+        />,
+      },
+      Object {
+        "key": "grader",
+        "label": <FormattedMessage
+          defaultMessage="Grader"
+          description="Edit Modal Override Table Grader column header"
+          id="gradebook.GradesView.EditModal.Overrides.graderHeader"
+        />,
+      },
+      Object {
+        "key": "reason",
+        "label": <FormattedMessage
+          defaultMessage="Reason"
+          description="Edit Modal Override Table Reason column header"
+          id="gradebook.GradesView.EditModal.Overrides.reasonHeader"
+        />,
+      },
+      Object {
+        "key": "adjustedGrade",
+        "label": <FormattedMessage
+          defaultMessage="Adjusted grade"
+          description="Edit Modal Override Table Adjusted grade column header"
+          id="gradebook.GradesView.EditModal.Overrides.adjustedGradeHeader"
+        />,
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "adjustedGrade": 0,
+        "date": "yesterday",
+        "grader": "me",
+        "reason": "you ate my sandwich",
+      },
+      Object {
+        "adjustedGrade": 20,
+        "date": "today",
+        "grader": "me",
+        "reason": "you brought me a new sandwich",
+      },
+      Object {
+        "adjustedGrade": <AdjustedGradeInput />,
+        "date": "todaaaaaay",
+        "reason": <ReasonInput />,
+      },
+    ]
+  }
+/>
+`;
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -0,0 +1,72 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Table } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
+import selectors from 'data/selectors';
+
+import messages from './messages';
+import ReasonInput from './ReasonInput';
+import AdjustedGradeInput from './AdjustedGradeInput';
+
+/**
+ * <OverrideTable />
+ * Table containing previous grade override entries, and an "edit" row
+ * with todays date, an AdjustedGradeInput and a ReasonInput
+ */
+export const OverrideTable = ({
+  hide,
+  gradeOverrides,
+  todaysDate,
+}) => {
+  if (hide) {
+    return null;
+  }
+  return (
+    <Table
+      columns={[
+        { label: <FormattedMessage {...messages.dateHeader} />, key: columns.date },
+        { label: <FormattedMessage {...messages.graderHeader} />, key: columns.grader },
+        { label: <FormattedMessage {...messages.reasonHeader} />, key: columns.reason },
+        {
+          label: <FormattedMessage {...messages.adjustedGradeHeader} />,
+          key: columns.adjustedGrade,
+        },
+      ]}
+      data={[
+        ...gradeOverrides,
+        {
+          adjustedGrade: <AdjustedGradeInput />,
+          date: todaysDate,
+          reason: <ReasonInput />,
+        },
+      ]}
+    />
+  );
+};
+OverrideTable.defaultProps = {
+  gradeOverrides: [],
+};
+OverrideTable.propTypes = {
+  // redux
+  gradeOverrides: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.string,
+    grader: PropTypes.string,
+    reason: PropTypes.string,
+    adjustedGrade: PropTypes.number,
+  })),
+  hide: PropTypes.bool.isRequired,
+  todaysDate: PropTypes.string.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  hide: selectors.grades.hasOverrideErrors(state),
+  gradeOverrides: selectors.grades.gradeOverrides(state),
+  todaysDate: selectors.app.modalState.todaysDate(state),
+});
+
+export default connect(mapStateToProps)(OverrideTable);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sofiane Bébert	edbbe42f3b	Merge pull request #222 from eduNEXT/Jhony/gradebook_header_override_backport feat: enabling header override	2021-12-20 17:20:03 +00:00
Jhony Avella	3ee7e40ecd	feat: enabling header override feat: new versions of package.json and lock fix: tests after adding header component Fixing tests change package files Signed-off-by: Jhony Avella <jhony.avella@edunext.co>	2021-12-20 12:10:27 -05:00
Sofiane Bébert	310d0844fd	Merge pull request #221 from eduNEXT/Jhony/fix_course_id_extraction_backport fix: build the course_id properly when MFE is deployed in a subdirectory	2021-12-20 17:08:42 +00:00
Jhony Avella	7fd06c2373	fix: build the course id properly when the MFE is deployed in a subdirectory	2021-12-20 11:58:26 -05:00
Sofiane Bébert	45b922d6e6	Merge pull request #218 from regisb/regisb/transifex feat: add compatibility with transifex	2021-12-06 14:43:21 +00:00
Régis Behmo	12574a7561	feat: add compatibility with transifex Now that the frontend-app-gradebook resource was added to Transifex, we can start pulling strings fromt there. For now, the project contains very few translated string. Strings were pulled by running: make pull_translations This is for https://github.com/openedx/build-test-release-wg/issues/107	2021-11-30 11:13:05 +01:00
Ned Batchelder	8f1c89a025	build: use the organization commitlint check	2021-10-07 13:55:57 -04:00
Ben Warzeski	a1de3a8612	feat: Bulk Management reorganization, phase 1 (#206 ) * move GradesTab and BulkHistoryTab to views and control from container through redux * add data logic for view control and import success toast * add NetworkButton component for download/upload buttons * remove download button from Bulk History view and update heading and help text * add View control button to GradebookHeader if bulk management available * remove FilterMenuToggle from SearchControls * update BulkManagementControls to now include upload/download grades buttons * add Import Success toast * rename UserLabel to FilteredUsersLabel for clarity * add InterventionsReport component * update GradesView top-level component * messageing update (separate messages into per-component files) * style updates * update test plan * clean up css and add docstrings * typo fix * fix typo in bulk management view header	2021-08-26 10:37:35 -04:00
Nathan Sprenkle	4e26247ac3	docs: remove outdated screenshots (#211 )	2021-08-19 13:49:29 -04:00
Ben Warzeski	f21e6da598	download bulk management history if showBulkManagement (#210 ) * download bulk management history if showBulkManagement * separate fetchBulkUpgrade call from fetchTracks * 1.4.47	2021-08-09 10:49:04 -04:00
Nathan Sprenkle	650e9321b1	Simplify Bulk Management Config (#200 ) * refactor: simplify bulk management enabling Formerly, a course had to have bulk management enabled and have a master's track. This painted us into a corner where we had to create a workaround for enabling bulk management on non-master's track courses. Instead, this relies only on an enabled flag from edx-platform (based on a course waffle flag) which simplifies the enabling code here. * feat: remove unneeded bulk management allow-list	2021-08-04 11:04:55 -04:00
Ben Warzeski	e8a8cca483	fix: add excludedCourseRoles to bulk-grades fetch (#209 )	2021-08-04 09:46:51 -04:00
Ben Warzeski	f5d2a34660	Fix cohort url (#208 ) * fix cohorts fetch url * v1.4.45	2021-08-03 15:37:12 -04:00
Ben Warzeski	97d3a29a7f	fix: add track back into lms api service calls. (#207 ) * fix: add track back into lms api service calls. * fix tests * v1.4.44	2021-07-30 11:59:01 -04:00
Leangseu Kim	5b8f67e8d2	fix: update csv import error messages update csv error according discussed Ticket[au-66] version bump	2021-07-26 12:59:42 -04:00
Ben Warzeski	c6e33307ba	refactor: add transifex support to user-facing messages (#203 ) * clean up and test segment integration * add transifex config * move user-facing messages into messages files and translate in usage * lint cleanup * fix introduced typos * remove dead code * remove should-be-ignored temp translation files * make HistoryHeader use node-type to support translations * fix apostrophe * fix snapshot * v1.4.42	2021-07-22 10:45:18 -04:00
Ben Warzeski	a4df8f7238	refactor: update test coverage (#202 ) * clean up and test segment integration * add tests for action utils * add tests for store aggregator and utils * clean up un-used paths in thunkAction testUtils * clean up filter reducer coverage * add filter reducer tests for filterMenu actions * clean up grades selectors coverage * separate App and add unit tests * ignore external files in coverage analysis * remove old/unused code from StrictDict and clean up tests * clean up FileUploadForm coverage * more cleanup for StrictDict tests * clean up GradesTab test coverage * clean up GradesTab coverage * ignore reducer-mapping for unit-test coverage * clean up AssignmentFilter test coverage * add index-level test coverage * temp remove snapshots * re-add App snapshot * v1.4.41	2021-07-02 12:32:18 -04:00
Ben Warzeski	15b76edb5d	refactor: lms service testing (#199 ) * v1.4.40 * ignore accepted import eslint errors * clean up LmsApiService into smaller, tested modules in lms service * set default format before initial fetches * fix bulk grades export and grade filtering * fix clearing assignment grade filter badge * re-connect grade format control	2021-06-30 11:50:07 -04:00
Ben Warzeski	1ab2fee004	add reasonable width to grade format button (#198 )	2021-06-24 10:59:11 -04:00
Ben Warzeski	9c9ba45fec	Fix grade format button (#197 ) * re-organize components based on function * clean up GradebookFilters test * fix grade format button * v1.4.39 * uuuugh, actually fix button	2021-06-24 08:59:42 -04:00
Ben Warzeski	85d566d257	re-organize components based on function (#196 ) * re-organize components based on function * clean up GradebookFilters test * fix grade format button * v1.4.39	2021-06-23 13:56:10 -04:00
Ben Warzeski	5688adcd57	Refactor: add unit tests and docstrings to remaining components (#195 ) * add unit tests and docstrings * v1.4.38	2021-06-22 15:25:57 -04:00
Ben Warzeski	b4f4a27f73	refactor - Bulk management tab unit tests (#194 ) * simplify histry row entries * clean up BulkManagement tab component and add docstrings/unit tests * slightly more breakup and docstrings * fix: make updateQueryParams push to history again * update paragon to get latest Hyperlink version * fix display issues from PR * make redux exposure only available in development * fix message * add oxford comma * update snapshots * v1.4.37	2021-06-21 16:01:41 -04:00
Ben Warzeski	868048381b	refactor: unit test and docstring FilterBadges (#193 ) * unit test and docstring FilterBadges * v1.4.38	2021-06-16 15:34:50 -04:00
Chris Chávez	02c154ef50	fix: Hard-coded link in Header component changed by LMS_BASE_URL env var (#186 ) * feat: LOGO_DESTINATION env var added for use it on Header component On index.js file of the Header component, currenly there is a hard-coded link of "https://www.edx.org". I added a new enviroment variable LOGO_DESTINATION to use it in this Header. I have also added a mechanism to use the LMS_BASE_URL environment variable if the LOGO_DESTINATION environment variable is not found or is null. * fix: Hard-coded link in Header component changed by a env var `index.jsx` file of Header component updated with change the hard-coded link of https://www.edx.org with a component property. `index.jsx` file of root project updated. Added the environment variable LMS BASE_URL to the parameters of the Header Component * fix: lint errors in previous commits * style: change structure of the solution	2021-06-14 13:51:20 -04:00
Ben Warzeski	7acefe0468	refactor: gradebook table tests (#192 ) * clean up, test, and docstring Gradebook table * v1.4.36	2021-06-09 14:34:15 -04:00
Ben Warzeski	a836cc1b5b	refactor: add edit modal tests (#191 ) * update drawer layout and container logic * add tests and docstrings for EditModal components * typo fix and merge conflict * v1.4.35	2021-06-09 10:48:23 -04:00
David Joy	6a3db4a11b	Conditionally enable segment and clean up environment variables (#181 ) * fix(deps): bumping frontend-platform to latest This picks up a change in which a blank SEGMENT_KEY no longer causes the MFE to make a request to segment which results in a 404. This was a requested fix for lilac. * fix: cleanup environment variables - Removes stray commas from the end of each environment variable in .env - Removes CSRF_COOKIE_NAME completely - it is not used. - Replaces default values with empty strings ‘’ - this will make the defaults falsy, rather than have them get converted to a string “null” value, which is very misleading. It also enables the SEGMENT_KEY fix mentioned in the prior commit to work. * fix: conditionally enable the segment middleware Only add it if SEGMENT_KEY is truthy. * build: bumping version number	2021-06-08 11:14:37 -04:00
Ben Warzeski	d727420c37	refactor: update drawer logic and container layout (#190 ) * update drawer layout and container logic * stop renaming the FilterBadges component * docstring for WithSidebar * add unit tests * v1.4.33	2021-06-07 16:24:37 -04:00
Ben Warzeski	2029a7cef3	State to redux (#187 ) * add app redux module * simplify fetchGrades logic now that almost everything it needs is in redux * simplified thunkAction logic with new app store * component redux helper cleanup * simplify PageButtons * simplify FilterBadges props * clean up BulkManagement * re-org and simplify data logic for EditModal * re-org and simplify data logic for Gradebook Table * clean up StatusAlerts * clean up SearchControls * clean up GradebookHeader * clean up AssignmentFilter * clean up AssignmentGradeFilter * simplify CourseGradeFilter * simplify StudentGroupsFilter * simplify GradebookFilters.index * simplify Gradebook component :-) * linting * fix on-clear search behavior * remove un-needed GradeButton variants * add FilterBadge docstrings * v1.4.32	2021-06-07 10:09:07 -04:00
Nathan Sprenkle	8462249d55	Trim unused footer props/vars (#189 )	2021-06-04 13:46:07 -04:00
Ben Warzeski	40059ec41e	Fix page buttons (#188 ) * add prev/next grades selectors * fix PageButtons props	2021-06-01 12:23:33 -04:00
Ben Warzeski	2ee522352e	pull GradebookHeader out of monolith (#185 ) * pull GradebookHeader out of monolith * v1.4.30	2021-05-26 15:05:43 -04:00
Ben Warzeski	189152f51b	refactor: redux refactor to use redux toolkit (#182 ) * add redux-toolkit * update actions to use redux toolkit action creators * add StrictDict * ready for testing * update testing for reducers * update unit testing for reducers * export reducers from initial state * update unit test * reorder the test reducer's handler * remove unnecessary testing data update * update actions to use redux toolkit action creators * testing * thunkActions tests * component thunkAction reference updates * linting * a little bit of doc and syntax cleanup * fix tests * assignment type actions tests * actions testing and cleanup * selectors cleanup * fix store action reference * update package-lock.json * add a bit of test coverage * strict selector export * docstrings for test utils * docstrings * fix assignment filtering * some cleanup * update version to 1.4.29 Co-authored-by: Leangseu Kim <lkim@edx.org>	2021-05-25 15:08:36 -04:00