add reasonable width to grade format button (#198 )

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 10:59:11 -04:00 · 2021-06-24 08:59:42 -04:00 · 2021-06-23 13:56:10 -04:00 · 2021-06-22 15:25:57 -04:00 · 2021-06-21 16:01:41 -04:00 · 2021-06-16 15:34:50 -04:00
219 changed files with 12273 additions and 5949 deletions
--- a/.env
+++ b/.env
@@ -1,35 +1,33 @@
-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=''
+BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
--- a/.env.development
+++ b/.env.development
@@ -14,13 +14,11 @@ 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'
@@ -38,5 +36,4 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=null
+BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.28",
+  "version": "1.4.36",
  "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",
@@ -3292,11 +3292,11 @@
      }
    },
    "@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==",
+      "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.1.2",
+        "@cospired/i18n-iso-languages": "2.2.0",
        "axios": "0.21.1",
        "axios-cache-adapter": "^2.5.0",
        "form-urlencoded": "4.1.4",
@@ -3310,30 +3310,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",
@@ -4233,18 +4218,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 +5121,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 +5254,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 +5928,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 +6156,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 +6261,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 +6283,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 +6290,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": {
@@ -7808,6 +7825,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 +9111,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 +9851,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 +11821,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 +11848,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 +13649,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 +13678,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 +13831,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 +14106,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 +16806,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 +17029,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 +17165,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 +23866,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 +24050,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 +24097,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 +24527,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 +24590,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 +24628,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 +24769,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",
@@ -25190,6 +25349,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",
@@ -28614,8 +28778,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 +29224,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 +30223,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.39",
  "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
  "repository": {
    "type": "git",
@@ -28,13 +28,14 @@
  "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-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 +59,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": {
--- a/src/App.scss
+++ b/src/App.scss
@@ -11,5 +11,6 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.

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

-@import "./components/Gradebook/gradebook";
-@import "./components/Drawer/Drawer";
+@import "./components/GradesTab/GradesTab";
+@import "./components/WithSidebar/WithSidebar";
+@import "./components/GradebookFilters/GradebookFilters";
--- a/src/components/BulkManagementTab/BulkManagementAlerts.jsx
+++ b/src/components/BulkManagementTab/BulkManagementAlerts.jsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Alert } from '@edx/paragon';
+
+import * as appConstants from 'data/constants/app';
+import selectors from 'data/selectors';
+
+const { messages: { BulkManagementTab: messages } } = appConstants;
+
+/**
+ * <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}
+    >
+      {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/BulkManagementTab/BulkManagementAlerts.test.jsx
+++ b/src/components/BulkManagementTab/BulkManagementAlerts.test.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Alert } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import * as appConstants from 'data/constants/app';
+
+import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
+
+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().text()).toEqual(
+          appConstants.messages.BulkManagementTab.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/BulkManagementTab/FileUploadForm.jsx
+++ b/src/components/BulkManagementTab/FileUploadForm.jsx
@@ -0,0 +1,94 @@
+/* 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 {
+  Button,
+  Form,
+  FormControl,
+  FormGroup,
+} from '@edx/paragon';
+
+import { messages } from 'data/constants/app';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+const { csvUploadLabel, importBtnText } = messages.BulkManagementTab;
+
+/**
+ * <FileUploadForm />
+ * File-type input wrapped with hidden control such that when a valid file is
+ * added, it is automattically uploaded.
+ */
+export class FileUploadForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.fileInputRef = React.createRef();
+    this.handleClickImportGrades = this.handleClickImportGrades.bind(this);
+    this.handleFileInputChange = this.handleFileInputChange.bind(this);
+  }
+
+  get fileInput() {
+    return this.fileInputRef.current;
+  }
+
+  get formData() {
+    const data = new FormData();
+    data.append('csv', this.fileInput.files[0]);
+    return data;
+  }
+
+  get hasFile() {
+    return this.fileInput && this.fileInput.files[0];
+  }
+
+  handleClickImportGrades() {
+    if (this.fileInput) { this.fileInput.click(); }
+  }
+
+  handleFileInputChange() {
+    return this.hasFile && (
+      this.props.submitFileUploadFormData(this.formData).then(
+        () => { this.fileInput.value = null; },
+      )
+    );
+  }
+
+  render() {
+    return (
+      <>
+        <Form action={this.props.gradeExportUrl} method="post">
+          <FormGroup controlId="csv">
+            <FormControl
+              className="d-none"
+              type="file"
+              label={csvUploadLabel}
+              onChange={this.handleFileInputChange}
+              ref={this.fileInputRef}
+            />
+          </FormGroup>
+        </Form>
+
+        <Button variant="primary" onClick={this.handleClickImportGrades}>
+          {importBtnText}
+        </Button>
+      </>
+    );
+  }
+}
+FileUploadForm.propTypes = {
+  // redux
+  gradeExportUrl: PropTypes.string.isRequired,
+  submitFileUploadFormData: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeExportUrl: selectors.root.gradeExportUrl(state),
+});
+
+export const mapDispatchToProps = {
+  submitFileUploadFormData: thunkActions.grades.submitFileUploadFormData,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FileUploadForm);
--- a/src/components/BulkManagementTab/FileUploadForm.test.jsx
+++ b/src/components/BulkManagementTab/FileUploadForm.test.jsx
@@ -0,0 +1,188 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormGroup,
+} from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+import * as appConstants from 'data/constants/app';
+
+import { FileUploadForm, mapStateToProps, mapDispatchToProps } from './FileUploadForm';
+
+const {
+  messages: { BulkManagementTab: messages },
+} = appConstants;
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: {
+      bulkImportError: jest.fn(state => ({ bulkImportError: state })),
+    },
+    root: {
+      gradeExportUrl: jest.fn(state => ({ gradeExportUrl: state })),
+    },
+  },
+}));
+jest.mock('data/thunkActions', () => ({
+  __esModule: true,
+  default: {
+    grades: { submitFileUploadFormData: jest.fn() },
+  },
+
+}));
+jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
+jest.mock('./ResultsSummary', () => 'ResultsSummary');
+
+describe('FileUploadForm', () => {
+  describe('component', () => {
+    let props;
+    let el;
+    beforeEach(() => {
+      props = {
+        gradeExportUrl: 'fakeUrl',
+        submitFileUploadFormData: jest.fn(),
+      };
+    });
+    describe('snapshot', () => {
+      const snapshotSegments = [
+        'export form w/ alerts and file input',
+        'import btn',
+      ];
+      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+        jest.mock('@edx/paragon', () => ({
+          Button: () => 'Button',
+          Form: () => 'Form',
+          FormControl: () => 'FormControl',
+          FormGroup: () => 'FormGroup',
+        }));
+        el = shallow(<FileUploadForm {...props} />);
+        el.instance().handleFileInputChange = jest.fn().mockName('this.handleFileInputChange');
+        el.instance().fileInputRef = jest.fn().mockName('this.fileInputRef');
+        el.instance().handleClickImportGrades = jest.fn().mockName('this.handleClickImportGrades');
+        el.instance().formatHistoryRow = jest.fn(entry => entry.originalFilename);
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('render', () => {
+      beforeEach(() => {
+        el = mount(<FileUploadForm {...props} />);
+      });
+      describe('alert form', () => {
+        let form;
+        beforeEach(() => {
+          form = el.find(Form);
+        });
+        test('post action points to gradeExportUrl', () => {
+          expect(form.props().action).toEqual(props.gradeExportUrl);
+          expect(form.props().method).toEqual('post');
+        });
+        describe('file input', () => {
+          let formGroup;
+          beforeEach(() => {
+            formGroup = el.find(FormGroup);
+          });
+          test('group with controlId="csv"', () => {
+            expect(formGroup.props().controlId).toEqual('csv');
+          });
+          test('file control with onChange from handleFileInputChange', () => {
+            const control = el.find(FormControl);
+            expect(
+              control.props().onChange,
+            ).toEqual(el.instance().handleFileInputChange);
+          });
+          test('fileInputRef points to control', () => {
+            expect(el.find(FormControl).getElement().ref).toBe(el.instance().fileInputRef);
+          });
+        });
+      });
+      describe('import button', () => {
+        let btn;
+        beforeEach(() => {
+          btn = el.find(Button);
+        });
+        test('handleClickImportGrade on click', () => {
+          expect(btn.props().onClick).toEqual(el.instance().handleClickImportGrades);
+        });
+        test('text from messages.importBtn', () => {
+          expect(btn.children().text()).toEqual(messages.importBtnText);
+        });
+      });
+    });
+    describe('behavior', () => {
+      let fileInput;
+      beforeEach(() => {
+        el = mount(<FileUploadForm {...props} />);
+        fileInput = jest.spyOn(el.instance(), 'fileInput', 'get');
+      });
+      describe('handleFileInputChange', () => {
+        it('does nothing (does not fail) if fileInput has not loaded', () => {
+          fileInput.mockReturnValue(null);
+          el.instance().handleClickImportGrades();
+        });
+        it('calls fileInput.click if is loaded', () => {
+          const click = jest.fn();
+          fileInput.mockReturnValue({ click });
+          el.instance().handleClickImportGrades();
+          expect(click).toHaveBeenCalled();
+        });
+      });
+      describe('handleClickImportGrades', () => {
+        it('does nothing if file input has not loaded with files', () => {
+          fileInput.mockReturnValue(null);
+          el.instance().handleFileInputChange();
+          expect(props.submitFileUploadFormData).not.toHaveBeenCalled();
+          fileInput.mockReturnValue({ files: [] });
+          el.instance().handleFileInputChange();
+          expect(props.submitFileUploadFormData).not.toHaveBeenCalled();
+        });
+        it('calls submitFileUploadFormData and then clears fileInput if has files', () => {
+          fileInput.mockReturnValue({ files: ['some', 'files'], value: 'a value' });
+          const formData = { fake: 'form data' };
+          jest.spyOn(el.instance(), 'formData', 'get').mockReturnValue(formData);
+          const submit = jest.fn(() => ({ then: (thenCB) => { thenCB(); } }));
+          el.setProps({
+            submitFileUploadFormData: submit,
+          });
+          el.instance().handleFileInputChange();
+          expect(submit).toHaveBeenCalledWith(formData);
+          expect(el.instance().fileInput.value).toEqual(null);
+        });
+      });
+      describe('formData', () => {
+        test('returns FormData object with csv value from fileInput.files[0]', () => {
+          const file = { a: 'fake file' };
+          const value = 'aValue';
+          fileInput.mockReturnValue({ files: [file], value });
+          const expected = new FormData();
+          expected.append('csv', file);
+          expect([...el.instance().formData.entries()]).toEqual([...expected.entries()]);
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { a: 'simple', test: 'state' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('gradeExportUrl from root.gradeExportUrl', () => {
+      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('submitFileUploadFormData from thunkActions.grades', () => {
+      expect(
+        mapDispatchToProps.submitFileUploadFormData,
+      ).toEqual(thunkActions.grades.submitFileUploadFormData);
+    });
+  });
+});
--- a/src/components/BulkManagementTab/HistoryTable.jsx
+++ b/src/components/BulkManagementTab/HistoryTable.jsx
@@ -0,0 +1,68 @@
+/* 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, messages } 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,
+});
+
+const { hints } = messages.BulkManagementTab;
+
+/**
+ * <HistoryTable />
+ * Table with history of bulk management uploads, including a results summary which
+ * displays total, skipped, and failed uploads
+ */
+export const HistoryTable = ({ bulkManagementHistory }) => (
+  <>
+    <p>
+      {hints[0]}
+      <br />
+      {hints[1]}
+    </p>
+
+    <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,
+      courseId: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    }),
+  })),
+};
+
+export const mapStateToProps = (state) => ({
+  bulkManagementHistory: selectors.grades.bulkManagementHistoryEntries(state),
+});
+
+export default connect(mapStateToProps)(HistoryTable);
--- a/src/components/BulkManagementTab/HistoryTable.test.jsx
+++ b/src/components/BulkManagementTab/HistoryTable.test.jsx
@@ -0,0 +1,115 @@
+/* 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, messages } from 'data/constants/app';
+
+import ResultsSummary from './ResultsSummary';
+import { HistoryTable, mapStateToProps } from './HistoryTable';
+
+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} />);
+      });
+      const snapshotSegments = [
+        'hints display',
+        'formatted table',
+      ];
+      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('hints with break in between', () => {
+        const hints = el.find('p');
+        expect(hints.childAt(0).text()).toEqual(messages.BulkManagementTab.hints[0]);
+        expect(hints.childAt(1).is('br')).toEqual(true);
+        expect(hints.childAt(2).text()).toEqual(messages.BulkManagementTab.hints[1]);
+      });
+      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/BulkManagementTab/ResultsSummary.jsx
+++ b/src/components/BulkManagementTab/ResultsSummary.jsx
@@ -0,0 +1,40 @@
+/* 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 { bulkGradesUrlByCourseAndRow } from 'data/constants/api';
+
+/**
+ * <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 = ({
+  courseId,
+  rowId,
+  text,
+}) => (
+  <Hyperlink
+    href={bulkGradesUrlByCourseAndRow(courseId, rowId)}
+    destination="www.edx.org"
+    target="_blank"
+    rel="noopener noreferrer"
+    showLaunchIcon={false}
+  >
+    <Icon src={Download} className="d-inline-block" />
+    {text}
+  </Hyperlink>
+);
+
+ResultsSummary.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  rowId: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default ResultsSummary;
--- a/src/components/BulkManagementTab/ResultsSummary.test.jsx
+++ b/src/components/BulkManagementTab/ResultsSummary.test.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
+
+import * as api from 'data/constants/api';
+import ResultsSummary from './ResultsSummary';
+
+jest.mock('@edx/paragon', () => ({
+  Hyperlink: () => 'Hyperlink',
+  Icon: () => 'Icon',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Download: 'DownloadIcon',
+}));
+jest.mock('data/constants/api', () => ({
+  bulkGradesUrlByCourseAndRow: jest.fn((courseId, rowId) => ({ url: { courseId, rowId } })),
+}));
+
+describe('ResultsSummary component', () => {
+  const props = {
+    courseId: 'classy',
+    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(api.bulkGradesUrlByCourseAndRow(props.courseId, 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/BulkManagementTab/snapshots/BulkManagementAlerts.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/BulkManagementAlerts.test.jsx.snap
@@ -0,0 +1,37 @@
+// 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"
+  >
+    CSV processing. File uploads may take several minutes to complete.
+  </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"
+  >
+    CSV processing. File uploads may take several minutes to complete.
+  </Alert>
+</Fragment>
+`;
--- a/src/components/BulkManagementTab/snapshots/FileUploadForm.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/FileUploadForm.test.jsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileUploadForm component snapshot snapshot - loads export form w/ alerts and file input, import btn 1`] = `
+<React.Fragment>
+  <Form
+    action="fakeUrl"
+    inline={false}
+    method="post"
+  >
+    <FormGroup
+      as="div"
+      controlId="csv"
+      isInvalid={false}
+      isValid={false}
+    >
+      <ForwardRef
+        as="input"
+        className="d-none"
+        label="Upload Grade CSV"
+        onChange={[MockFunction this.handleFileInputChange]}
+        plaintext={false}
+        type="file"
+      />
+    </FormGroup>
+  </Form>
+  <ForwardRef
+    active={false}
+    disabled={false}
+    onClick={[MockFunction this.handleClickImportGrades]}
+    variant="primary"
+  >
+    Import Grades
+  </ForwardRef>
+</React.Fragment>
+`;
--- a/src/components/BulkManagementTab/snapshots/HistoryTable.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/HistoryTable.test.jsx.snap
@@ -0,0 +1,124 @@
+// 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 hints display, formatted table 1`] = `
+<Fragment>
+  <p>
+    Results appear in the table below.
+    <br />
+    Grade processing may take a few seconds.
+  </p>
+  <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/BulkManagementTab/snapshots/ResultsSummary.test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/ResultsSummary.test.jsx.snap
@@ -0,0 +1,24 @@
+// 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 {
+        "courseId": "classy",
+        "rowId": 42,
+      },
+    }
+  }
+  rel="noopener noreferrer"
+  showLaunchIcon={false}
+  target="_blank"
+>
+  <Icon
+    className="d-inline-block"
+    src="DownloadIcon"
+  />
+  texty
+</Hyperlink>
+`;
--- a/src/components/BulkManagementTab/snapshots/test.jsx.snap
+++ b/src/components/BulkManagementTab/snapshots/test.jsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementTab component snapshot snapshot - loads heading from messages.BulkManagementTab.heading, <BulkManagementAlerts />, <FileUploadForm />, <HistoryTable /> 1`] = `
+<div>
+  <h4>
+    Use this feature by downloading a CSV for bulk management, overriding grades locally, and coming back here to upload.
+  </h4>
+  <BulkManagementAlerts />
+  <FileUploadForm />
+  <HistoryTable />
+</div>
+`;
--- a/src/components/BulkManagementTab/index.jsx
+++ b/src/components/BulkManagementTab/index.jsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/button-has-type, import/no-named-as-default */
+import React from 'react';
+
+import { messages } from 'data/constants/app';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import FileUploadForm from './FileUploadForm';
+import HistoryTable from './HistoryTable';
+
+/**
+ * <BulkManagementTab />
+ * top-level view for managing uploads of bulk management override csvs.
+ */
+export const BulkManagementTab = () => (
+  <div>
+    <h4>{messages.BulkManagementTab.heading}</h4>
+    <BulkManagementAlerts />
+    <FileUploadForm />
+    <HistoryTable />
+  </div>
+);
+
+export default BulkManagementTab;
--- a/src/components/BulkManagementTab/test.jsx
+++ b/src/components/BulkManagementTab/test.jsx
@@ -0,0 +1,43 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { messages } from 'data/constants/app';
+import { BulkManagementTab } from '.';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import FileUploadForm from './FileUploadForm';
+import HistoryTable from './HistoryTable';
+
+jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
+jest.mock('./FileUploadForm', () => 'FileUploadForm');
+jest.mock('./HistoryTable', () => 'HistoryTable');
+
+describe('BulkManagementTab', () => {
+  describe('component', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<BulkManagementTab />);
+    });
+    describe('snapshot', () => {
+      const snapshotSegments = [
+        'heading from messages.BulkManagementTab.heading',
+        '<BulkManagementAlerts />',
+        '<FileUploadForm />',
+        '<HistoryTable />',
+      ];
+      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('heading - h4 loaded from messages', () => {
+        const heading = el.find('h4');
+        expect(heading.text()).toEqual(messages.BulkManagementTab.heading);
+      });
+      test('heading, then alerts, then upload form, then table', () => {
+        expect(el.childAt(0).is('h4')).toEqual(true);
+        expect(el.childAt(1).is(BulkManagementAlerts)).toEqual(true);
+        expect(el.childAt(2).is(FileUploadForm)).toEqual(true);
+        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
+      });
+    });
+  });
+});
--- 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/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/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/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
--- a/src/components/Gradebook/GradebookFilters/AssignmentFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentFilter/index.jsx
@@ -3,12 +3,14 @@ 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 actions from 'data/actions';
+import thunkActions from 'data/thunkActions';

 import SelectGroup from '../SelectGroup';

+const { fetchGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
+
 export class AssignmentFilter extends React.Component {
  constructor(props) {
    super(props);
@@ -17,17 +19,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() {
@@ -61,13 +60,9 @@ 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
@@ -77,11 +72,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 +89,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(),
    };
  });
@@ -83,14 +83,9 @@ 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();
        });
      });
    });
@@ -129,43 +124,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
@@ -9,19 +9,19 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
    id="assignmentGradeMin"
    label="Min Grade"
    onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
  />
  <PercentGroup
    disabled={true}
    id="assignmentGradeMax"
    label="Max Grade"
    onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
  />
  <div
    className="grade-filter-action"
  >
-    <Button
+    <ForwardRef
      active={false}
      disabled={true}
      name="assignmentGradeMinMax"
@@ -30,7 +30,7 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
      variant="outline-secondary"
    >
      Apply
-    </Button>
+    </ForwardRef>
  </div>
 </div>
 `;
@@ -44,19 +44,19 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
    id="assignmentGradeMin"
    label="Min Grade"
    onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
  />
  <PercentGroup
    disabled={false}
    id="assignmentGradeMax"
    label="Max Grade"
    onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
  />
  <div
    className="grade-filter-action"
  >
-    <Button
+    <ForwardRef
      active={false}
      disabled={false}
      name="assignmentGradeMinMax"
@@ -65,7 +65,7 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
      variant="outline-secondary"
    >
      Apply
-    </Button>
+    </ForwardRef>
  </div>
 </div>
 `;
--- a/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/index.jsx
@@ -5,9 +5,9 @@ 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 actions from 'data/actions';
+import thunkActions from 'data/thunkActions';

 import PercentGroup from '../PercentGroup';

@@ -20,49 +20,34 @@ export class AssignmentGradeFilter extends React.Component {
  }

  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,
-    });
+    this.props.updateAssignmentLimits(this.props.localAssignmentLimits);
+    this.props.fetchGrades();
+    this.props.updateQueryParams(this.props.localAssignmentLimits);
  }

-  handleSetMax(event) {
-    this.props.setFilters({ assignmentGradeMax: event.target.value });
+  handleSetMax({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMax: value });
  }

-  handleSetMin(event) {
-    this.props.setFilters({ assignmentGradeMin: event.target.value });
+  handleSetMin({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMin: value });
  }

  render() {
+    const { assignmentGradeMin, assignmentGradeMax } = this.props.localAssignmentLimits;
    return (
      <div className="grade-filter-inputs">
        <PercentGroup
          id="assignmentGradeMin"
          label="Min Grade"
-          value={this.props.filterValues.assignmentGradeMin}
+          value={assignmentGradeMin}
          disabled={!this.props.selectedAssignment}
          onChange={this.handleSetMin}
        />
        <PercentGroup
          id="assignmentGradeMax"
          label="Max Grade"
-          value={this.props.filterValues.assignmentGradeMax}
+          value={assignmentGradeMax}
          disabled={!this.props.selectedAssignment}
          onChange={this.handleSetMax}
        />
@@ -84,42 +69,31 @@ export class AssignmentGradeFilter extends React.Component {

 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,
+  fetchGrades: PropTypes.func.isRequired,
+  localAssignmentLimits: PropTypes.shape({
+    assignmentGradeMax: PropTypes.string,
+    assignmentGradeMin: PropTypes.string,
+  }).isRequired,
  selectedAssignment: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
+  setFilter: PropTypes.func.isRequired,
  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 mapStateToProps = (state) => ({
+  localAssignmentLimits: selectors.app.assignmentGradeLimits(state),
+  selectedAssignment: selectors.filters.selectedAssignmentLabel(state),
+});

 export const mapDispatchToProps = {
-  getUserGrades: gradesActions.fetchGrades,
-  updateAssignmentLimits: filterActions.updateAssignmentLimits,
+  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
--- a/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/index.jsx
@@ -3,9 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

-import * as gradesActions from 'data/actions/grades';
 import selectors from 'data/selectors';
-
+import actions from 'data/actions';
 import SelectGroup from '../SelectGroup';

 export class AssignmentTypeFilter extends React.Component {
@@ -72,7 +71,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,14 +6,12 @@ exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
    className="grade-filter-inputs"
  >
    <PercentGroup
-      disabled={false}
      id="minimum-grade"
      label="Min Grade"
      onChange={[MockFunction handleUpdateMin]}
      value="5"
    />
    <PercentGroup
-      disabled={false}
      id="maximum-grade"
      label="Max Grade"
      onChange={[MockFunction handleUpdateMax]}
--- a/src/components/GradebookFilters/CourseGradeFilter/index.jsx
+++ b/src/components/GradebookFilters/CourseGradeFilter/index.jsx
@@ -0,0 +1,99 @@
+/* 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 selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+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 { courseGradeMin, courseGradeMax } = this.props.localCourseLimits;
+    return (
+      <>
+        <div className="grade-filter-inputs">
+          <PercentGroup
+            id="minimum-grade"
+            label="Min Grade"
+            value={courseGradeMin}
+            onChange={this.handleUpdateMin}
+          />
+          <PercentGroup
+            id="maximum-grade"
+            label="Max Grade"
+            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
--- 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
--- 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,142 @@
+/* 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 actions from 'data/actions';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+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: 'Cohort-All',
+      key: 'id',
+    });
+  }
+
+  mapTracksEntries() {
+    return optionFactory({
+      data: this.props.tracks,
+      defaultOption: 'Track-All',
+      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();
+  }
+
+  render() {
+    return (
+      <>
+        <SelectGroup
+          id="Tracks"
+          label="Tracks"
+          value={this.props.selectedTrackEntry.name}
+          onChange={this.updateTracks}
+          options={this.mapTracksEntries()}
+        />
+        <SelectGroup
+          id="Cohorts"
+          label="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,
+
+  // 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 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,39 @@ 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,
+        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 +117,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 +159,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 +181,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 +196,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/Gradebook/GradebookFilters/snapshots/test.jsx.snap
+++ b/src/components/Gradebook/GradebookFilters/snapshots/test.jsx.snap
@@ -2,6 +2,23 @@

 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}
@@ -12,20 +29,9 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
        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>
@@ -36,16 +42,6 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
    title="Overall Grade"
  >
    <Connect(CourseGradeFilter)
-      courseId="12345"
-      filterValues={
-        Object {
-          "assignmentGradeMax": "90",
-          "assignmentGradeMin": "10",
-          "courseGradeMax": "80",
-          "courseGradeMin": "20",
-        }
-      }
-      setFilters={[MockFunction]}
      updateQueryParams={[MockFunction]}
    />
  </Collapsible>
@@ -55,7 +51,6 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
    title="Student Groups"
  >
    <Connect(StudentGroupsFilter)
-      courseId="12345"
      updateQueryParams={[MockFunction]}
    />
  </Collapsible>
--- a/src/components/Gradebook/GradebookFilters/index.jsx
+++ b/src/components/Gradebook/GradebookFilters/index.jsx
@@ -3,10 +3,17 @@ 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 * as filterActions from 'data/actions/filters';
+import actions from 'data/actions';
 import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';

 import AssignmentTypeFilter from './AssignmentTypeFilter';
 import AssignmentFilter from './AssignmentFilter';
@@ -27,6 +34,7 @@ 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 });
  }

@@ -38,48 +46,38 @@ export class GradebookFilters extends React.Component {

  render() {
    const {
-      courseId,
-      filterValues,
-      setFilters,
      updateQueryParams,
    } = this.props;
    return (
      <>
+        <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="Close Filters"
+            aria-label="Close Filters"
+          />
+        </div>
+
        {this.collapsibleGroup('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,
-            }}
-          />
+          <CourseGradeFilter updateQueryParams={updateQueryParams} />
        ))}
+
        {this.collapsibleGroup('Student Groups', (
-          <StudentGroupsFilter
-            courseId={courseId}
-            updateQueryParams={updateQueryParams}
-          />
+          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
        ))}
+
        {this.collapsibleGroup('Include Course Team Members', (
          <Form.Checkbox
            checked={this.state.includeCourseRoleMembers}
@@ -96,17 +94,12 @@ 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,
+  // 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 +107,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);
--- 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,40 @@ 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(),
+      closeMenu: jest.fn().mockName('this.props.closeMenu'),
+      fetchGrades: jest.fn(),
      updateIncludeCourseRoleMembers: jest.fn(),
-      setFilters: jest.fn(),
+      updateQueryParams: jest.fn(),
    };
  });

@@ -82,24 +98,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,100 @@
+// 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>
+     Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <h3>
+     
+    fakeID
+  </h3>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    You are not authorized to view the gradebook for this course.
+  </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>
+     Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <h3>
+     
+    fakeID
+  </h3>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    The grades for this course are now frozen. Editing of grades is no longer allowed.
+  </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>
+     Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <h3>
+     
+    fakeID
+  </h3>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    The grades for this course are now frozen. Editing of grades is no longer allowed.
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    You are not authorized to view the gradebook for this course.
+  </div>
+</div>
+`;
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { configuration } from 'config';
+import selectors from 'data/selectors';
+
+export class GradebookHeader extends React.Component {
+  lmsInstructorDashboardUrl = courseId => (
+    `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`
+  );
+
+  render() {
+    return (
+      <div className="gradebook-header">
+        <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>
+        )}
+      </div>
+    );
+  }
+}
+
+GradebookHeader.defaultProps = {
+  // redux
+  courseId: '',
+  areGradesFrozen: false,
+  canUserViewGradebook: false,
+};
+
+GradebookHeader.propTypes = {
+  // redux
+  courseId: PropTypes.string,
+  areGradesFrozen: PropTypes.bool,
+  canUserViewGradebook: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  courseId: selectors.app.courseId(state),
+  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
+  canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
+});
+
+export default connect(mapStateToProps)(GradebookHeader);
--- a/src/components/GradebookHeader/test.jsx
+++ b/src/components/GradebookHeader/test.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+import { GradebookHeader, mapStateToProps } from '.';
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: { courseId: jest.fn(state => ({ courseId: state })) },
+    assignmentTypes: { areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })) },
+    roles: { canUserViewGradebook: jest.fn(state => ({ canUserViewGradebook: state })) },
+  },
+}));
+
+const courseId = 'fakeID';
+describe('GradebookHeader component', () => {
+  describe('snapshots', () => {
+    describe('default values (grades frozen, cannot view).', () => {
+      test('unauthorized warning, but no grades frozen warning', () => {
+        const props = { courseId, areGradesFrozen: false, canUserViewGradebook: false };
+        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, cannot view', () => {
+      test('unauthorized warning, and grades frozen warning.', () => {
+        const props = { courseId, areGradesFrozen: true, canUserViewGradebook: false };
+        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, can view.', () => {
+      test('grades frozen warning but no unauthorized warning', () => {
+        const props = { courseId, areGradesFrozen: true, canUserViewGradebook: true };
+        expect(shallow(<GradebookHeader {...props} />)).toMatchSnapshot();
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { a: 'test', example: 'state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(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));
+    });
+  });
+});
--- a/src/components/GradesTab/BulkManagementControls.jsx
+++ b/src/components/GradesTab/BulkManagementControls.jsx
@@ -0,0 +1,105 @@
+/* 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, Icon } from '@edx/paragon';
+
+import { StrictDict } from 'utils';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+export const basicButtonProps = () => ({
+  variant: 'outline-primary',
+  icons: {
+    default: <Icon className="fa fa-download mr-2" />,
+    pending: <Icon className="fa fa-spinner fa-spin mr-2" />,
+  },
+  disabledStates: ['pending'],
+  className: 'ml-2',
+});
+
+export const buttonStates = StrictDict({
+  pending: 'pending',
+  default: 'default',
+});
+
+/**
+ * <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.buttonProps = this.buttonProps.bind(this);
+    this.handleClickDownloadInterventions = this.handleClickDownloadInterventions.bind(this);
+    this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
+  }
+
+  buttonProps(label) {
+    return {
+      labels: { default: label, pending: label },
+      state: this.props.showSpinner ? 'pending' : 'default',
+      ...basicButtonProps(),
+    };
+  }
+
+  handleClickDownloadInterventions() {
+    this.props.downloadInterventionReport();
+    window.location.assign(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), label(not used), value(not used)
+  handleClickExportGrades() {
+    this.props.downloadBulkGradesReport();
+    window.location.assign(this.props.gradeExportUrl);
+  }
+
+  render() {
+    return this.props.showBulkManagement && (
+      <div>
+        <StatefulButton
+          {...this.buttonProps('Bulk Management')}
+          onClick={this.handleClickExportGrades}
+        />
+        <StatefulButton
+          {...this.buttonProps('Interventions')}
+          onClick={this.handleClickDownloadInterventions}
+        />
+      </div>
+    );
+  }
+}
+
+BulkManagementControls.defaultProps = {
+  showBulkManagement: false,
+  showSpinner: false,
+};
+
+BulkManagementControls.propTypes = {
+  // redux
+  downloadBulkGradesReport: PropTypes.func.isRequired,
+  downloadInterventionReport: PropTypes.func.isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
+  interventionExportUrl: PropTypes.string.isRequired,
+  showSpinner: PropTypes.bool,
+  showBulkManagement: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeExportUrl: selectors.root.gradeExportUrl(state),
+  interventionExportUrl: selectors.root.interventionExportUrl(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+  showSpinner: selectors.root.shouldShowSpinner(state),
+});
+
+export const mapDispatchToProps = {
+  downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
+  downloadInterventionReport: actions.grades.downloadReport.intervention,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
--- a/src/components/GradesTab/BulkManagementControls.test.jsx
+++ b/src/components/GradesTab/BulkManagementControls.test.jsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import {
+  BulkManagementControls,
+  basicButtonProps,
+  buttonStates,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './BulkManagementControls';
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      gradeExportUrl: (state) => ({ gradeExportUrl: state }),
+      interventionExportUrl: (state) => ({ interventionExportUrl: state }),
+      showBulkManagement: (state) => ({ showBulkManagement: state }),
+      shouldShowSpinner: (state) => ({ showSpinner: state }),
+    },
+  },
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    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(),
+      };
+    });
+    test('snapshot - empty if showBulkManagement is not truthy', () => {
+      expect(shallow(<BulkManagementControls {...props} />)).toEqual({});
+    });
+    test('snapshot - buttonProps for each button ("Bulk Management" and "Interventions")', () => {
+      el = shallow(<BulkManagementControls {...props} showBulkManagement />);
+      jest.spyOn(el.instance(), 'buttonProps').mockImplementation(
+        value => ({ buttonProps: value }),
+      );
+      jest.spyOn(el.instance(), 'handleClickExportGrades').mockName('this.handleClickExportGrades');
+      jest.spyOn(
+        el.instance(),
+        'handleClickDownloadInterventions',
+      ).mockName('this.handleClickDownloadInterventions');
+    });
+    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('buttonProps', () => {
+        test('loads default and pending labels based on passed string', () => {
+          const label = 'Fake Label';
+          const { labels, state, ...rest } = el.instance().buttonProps(label);
+          expect(rest).toEqual(basicButtonProps());
+          expect(labels).toEqual({ default: label, pending: label });
+        });
+        test('loads pending state if props.showSpinner', () => {
+          const label = 'Fake Label';
+          el.setProps({ showSpinner: true });
+          const { labels, state, ...rest } = el.instance().buttonProps(label);
+          expect(state).toEqual(buttonStates.pending);
+          expect(rest).toEqual(basicButtonProps());
+        });
+        test('loads default state if not props.showSpinner', () => {
+          const label = 'Fake Label';
+          const { labels, state, ...rest } = el.instance().buttonProps(label);
+          expect(state).toEqual(buttonStates.default);
+          expect(rest).toEqual(basicButtonProps());
+        });
+      });
+      describe('handleClickDownloadInterventions', () => {
+        const assertions = [
+          'calls props.downloadInterventionReport',
+          'sets location to props.interventionsExportUrl',
+        ];
+        it(assertions.join(' and '), () => {
+          el.instance().handleClickDownloadInterventions();
+          expect(props.downloadInterventionReport).toHaveBeenCalled();
+          expect(window.location.assign).toHaveBeenCalledWith(props.interventionExportUrl);
+        });
+      });
+      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('interventionExportUrl from root.interventionExportUrl', () => {
+      expect(mapped.interventionExportUrl).toEqual(selectors.root.interventionExportUrl(testState));
+    });
+    test('showBulkManagement from root.showBulkManagement', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+    test('showSpinner from root.shouldShowSpinner', () => {
+      expect(mapped.showSpinner).toEqual(selectors.root.shouldShowSpinner(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
+      expect(
+        mapDispatchToProps.downloadBulkGradesReport,
+      ).toEqual(actions.grades.downloadReport.bulkGrades);
+    });
+    test('downloadInterventionReport from actions.grades.downloadReport.invervention', () => {
+      expect(
+        mapDispatchToProps.downloadInterventionReport,
+      ).toEqual(actions.grades.downloadReport.intervention);
+    });
+  });
+});
--- a/src/components/GradesTab/EditModal/HistoryHeader.jsx
+++ b/src/components/GradesTab/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.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default HistoryHeader;
--- a/src/components/GradesTab/EditModal/HistoryHeader.test.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/ModalHeaders.jsx
+++ b/src/components/GradesTab/EditModal/ModalHeaders.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import selectors from 'data/selectors';
+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="Assignment"
+      value={modalState.assignmentName}
+    />
+    <HistoryHeader
+      id="student"
+      label="Student"
+      value={modalState.updateUserName}
+    />
+    <HistoryHeader
+      id="original-grade"
+      label="Original Grade"
+      value={originalGrade}
+    />
+    <HistoryHeader
+      id="current-grade"
+      label="Current Grade"
+      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/GradesTab/EditModal/ModalHeaders.test.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/AdjustedGradeInput.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/ReasonInput.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/ReasonInput.test.jsx
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/snapshots/AdjustedGradeInput.test.jsx.snap
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/snapshots/ReasonInput.test.jsx.snap
+++ b/src/components/GradesTab/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/GradesTab/EditModal/OverrideTable/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/EditModal/OverrideTable/snapshots/test.jsx.snap
@@ -0,0 +1,47 @@
+// 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": "Date",
+      },
+      Object {
+        "key": "grader",
+        "label": "Grader",
+      },
+      Object {
+        "key": "reason",
+        "label": "Reason",
+      },
+      Object {
+        "key": "adjustedGrade",
+        "label": "Adjusted grade",
+      },
+    ]
+  }
+  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/GradesTab/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesTab/EditModal/OverrideTable/index.jsx
@@ -0,0 +1,67 @@
+/* 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 selectors from 'data/selectors';
+import ReasonInput from './ReasonInput';
+import AdjustedGradeInput from './AdjustedGradeInput';
+
+const GRADE_OVERRIDE_HISTORY_COLUMNS = [
+  { label: 'Date', key: 'date' },
+  { label: 'Grader', key: 'grader' },
+  { label: 'Reason', key: 'reason' },
+  { label: 'Adjusted grade', key: 'adjustedGrade' },
+];
+
+/**
+ * <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={GRADE_OVERRIDE_HISTORY_COLUMNS}
+      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/src/components/GradesTab/EditModal/OverrideTable/test.jsx
+++ b/src/components/GradesTab/EditModal/OverrideTable/test.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+
+import {
+  OverrideTable,
+  mapStateToProps,
+} from '.';
+
+jest.mock('@edx/paragon', () => ({ Table: () => 'Table' }));
+jest.mock('./ReasonInput', () => 'ReasonInput');
+jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      modalState: {
+        todaysDate: jest.fn(state => ({ todaysDate: state })),
+      },
+    },
+    grades: {
+      hasOverrideErrors: jest.fn(state => ({ hasOverrideErrors: state })),
+      gradeOverrides: jest.fn(state => ({ gradeOverrides: state })),
+    },
+  },
+}));
+
+describe('OverrideTable', () => {
+  const props = {
+    gradeOverrides: [
+      {
+        date: 'yesterday',
+        grader: 'me',
+        reason: 'you ate my sandwich',
+        adjustedGrade: 0,
+      },
+      {
+        date: 'today',
+        grader: 'me',
+        reason: 'you brought me a new sandwich',
+        adjustedGrade: 20,
+      },
+    ],
+    hide: false,
+    todaysDate: 'todaaaaaay',
+  };
+
+  describe('Component', () => {
+    describe('snapshots', () => {
+      it('returns null if hide is true', () => {
+        expect(shallow(<OverrideTable {...props} hide />)).toEqual({});
+      });
+      describe('basic snapshot', () => {
+        test('shows a row for each entry and one editable row', () => {
+          expect(shallow(<OverrideTable {...props} />)).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { I: 'wanna', be: 'the', very: 'best' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    describe('modalState', () => {
+      test('hide from grades.hasOverrideErrors', () => {
+        expect(mapped.hide).toEqual(selectors.grades.hasOverrideErrors(testState));
+      });
+      test('gradeOverrides from grades.gradeOverrides', () => {
+        expect(mapped.gradeOverrides).toEqual(selectors.grades.gradeOverrides(testState));
+      });
+      test('todaysData from app.modalState.todaysDate', () => {
+        expect(mapped.todaysDate).toEqual(selectors.app.modalState.todaysDate(testState));
+      });
+    });
+  });
+});
--- a/src/components/GradesTab/EditModal/snapshots/HistoryHeader.test.jsx.snap
+++ b/src/components/GradesTab/EditModal/snapshots/HistoryHeader.test.jsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HistoryHeader Component snapshot 1`] = `
+<div>
+  <div
+    className="grade-history-header grade-history-water"
+  >
+    Brita
+    : 
+  </div>
+  <div>
+    hydration
+  </div>
+</div>
+`;
--- a/src/components/GradesTab/EditModal/snapshots/ModalHeaders.test.jsx.snap
+++ b/src/components/GradesTab/EditModal/snapshots/ModalHeaders.test.jsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+<div>
+  <HistoryHeader
+    id="assignment"
+    label="Assignment"
+    value="Qwerty"
+  />
+  <HistoryHeader
+    id="student"
+    label="Student"
+    value="Uiop"
+  />
+  <HistoryHeader
+    id="original-grade"
+    label="Original Grade"
+    value={20}
+  />
+  <HistoryHeader
+    id="current-grade"
+    label="Current Grade"
+    value={2}
+  />
+</div>
+`;
+
+exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
+<div>
+  <HistoryHeader
+    id="assignment"
+    label="Assignment"
+    value="Qwerty"
+  />
+  <HistoryHeader
+    id="student"
+    label="Student"
+    value="Uiop"
+  />
+  <HistoryHeader
+    id="original-grade"
+    label="Original Grade"
+    value={20}
+  />
+  <HistoryHeader
+    id="current-grade"
+    label="Current Grade"
+    value={2}
+  />
+</div>
+`;
--- a/src/components/GradesTab/EditModal/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/EditModal/snapshots/test.jsx.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+<Modal
+  body={
+    <div>
+      <ModalHeaders />
+      <StatusAlert
+        alertType="danger"
+        dialog="Weve been trying to contact you regarding..."
+        dismissible={false}
+        open={true}
+      />
+      <OverrideTable />
+      <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={
+    Array [
+      <Button
+        onClick={[MockFunction this.handleAdjustedGradeClick]}
+        variant="primary"
+      >
+        Save Grade
+      </Button>,
+    ]
+  }
+  closeText="Cancel"
+  onClose={[MockFunction this.closeAssignmentModal]}
+  open={true}
+  title="Edit Grades"
+/>
+`;
+
+exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
+<Modal
+  body={
+    <div>
+      <ModalHeaders />
+      <StatusAlert
+        alertType="danger"
+        dialog=""
+        dismissible={false}
+        open={false}
+      />
+      <OverrideTable />
+      <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={
+    Array [
+      <Button
+        onClick={[MockFunction this.handleAdjustedGradeClick]}
+        variant="primary"
+      >
+        Save Grade
+      </Button>,
+    ]
+  }
+  closeText="Cancel"
+  onClose={[MockFunction this.closeAssignmentModal]}
+  open={false}
+  title="Edit Grades"
+/>
+`;
--- a/src/components/GradesTab/EditModal/index.jsx
+++ b/src/components/GradesTab/EditModal/index.jsx
@@ -0,0 +1,102 @@
+/* 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 {
+  Button,
+  Modal,
+  StatusAlert,
+} from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import OverrideTable from './OverrideTable';
+import ModalHeaders from './ModalHeaders';
+
+/**
+ * <EditModal />
+ * Wrapper component for the modal that allows editing the grade for an individual
+ * unit, for a given student.
+ * Provides a StatusAlert with override fetch errors if any are found, an OverrideTable
+ * (with appropriate headers) for managing the actual override, and a submit button for
+ * adjusting the grade.
+ * (also provides a close button that clears the modal state)
+ */
+export class EditModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.closeAssignmentModal = this.closeAssignmentModal.bind(this);
+    this.handleAdjustedGradeClick = this.handleAdjustedGradeClick.bind(this);
+  }
+
+  closeAssignmentModal() {
+    this.props.doneViewingAssignment();
+    this.props.closeModal();
+  }
+
+  handleAdjustedGradeClick() {
+    this.props.updateGrades();
+    this.closeAssignmentModal();
+  }
+
+  render() {
+    return (
+      <Modal
+        open={this.props.open}
+        title="Edit Grades"
+        closeText="Cancel"
+        body={(
+          <div>
+            <ModalHeaders />
+            <StatusAlert
+              alertType="danger"
+              dialog={this.props.gradeOverrideHistoryError}
+              open={!!this.props.gradeOverrideHistoryError}
+              dismissible={false}
+            />
+            <OverrideTable />
+            <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 = {
+  gradeOverrideHistoryError: '',
+};
+
+EditModal.propTypes = {
+  // redux
+  gradeOverrideHistoryError: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  doneViewingAssignment: PropTypes.func.isRequired,
+  updateGrades: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeOverrideHistoryError: selectors.grades.gradeOverrideHistoryError(state),
+  open: selectors.app.modalState.open(state),
+});
+
+export const mapDispatchToProps = {
+  closeModal: actions.app.closeModal,
+  doneViewingAssignment: actions.grades.doneViewingAssignment,
+  updateGrades: thunkActions.grades.updateGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditModal);
--- a/src/components/GradesTab/EditModal/test.jsx
+++ b/src/components/GradesTab/EditModal/test.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+import {
+  EditModal,
+  mapDispatchToProps,
+  mapStateToProps,
+} from '.';
+
+jest.mock('./OverrideTable', () => 'OverrideTable');
+jest.mock('./ModalHeaders', () => 'ModalHeaders');
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+  Modal: () => 'Modal',
+  StatusAlert: () => 'StatusAlert',
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { closeModal: jest.fn() },
+    grades: { doneViewingAssignment: jest.fn() },
+  },
+}));
+jest.mock('data/thunkActions', () => ({
+  __esModule: true,
+  default: {
+    grades: { updateGrades: jest.fn() },
+  },
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      modalState: {
+        open: jest.fn(state => ({ isModalOpen: state })),
+      },
+    },
+    grades: {
+      gradeOverrideHistoryError: jest.fn(state => ({ overrideHistoryError: state })),
+    },
+  },
+}));
+describe('EditMoal', () => {
+  let props;
+  beforeEach(() => {
+    props = {
+      gradeOverrideHistoryError: 'Weve been trying to contact you regarding...',
+      open: true,
+      closeModal: jest.fn(),
+      doneViewingAssignment: jest.fn(),
+      updateGrades: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('behavior', () => {
+      let el;
+      beforeEach(() => {
+        el = shallow(<EditModal {...props} />);
+      });
+      describe('closeAssignmentModal', () => {
+        it('calls props.doneViewingAssignment and props.closeModal', () => {
+          el.instance().closeAssignmentModal();
+          expect(props.doneViewingAssignment).toHaveBeenCalledWith();
+          expect(props.closeModal).toHaveBeenCalledWith();
+        });
+      });
+      describe('handleAdjustedGradeClick', () => {
+        it('calls props.updateGardes and this.closeAssignmentModal', () => {
+          el.instance().closeAssignmentModal = jest.fn();
+          el.instance().handleAdjustedGradeClick();
+          expect(props.updateGrades).toHaveBeenCalledWith();
+          expect(el.instance().closeAssignmentModal).toHaveBeenCalledWith();
+        });
+      });
+    });
+    describe('snapshots', () => {
+      let el;
+      beforeEach(() => {
+        el = shallow(<EditModal {...props} />);
+        el.instance().closeAssignmentModal = jest.fn().mockName('this.closeAssignmentModal');
+        el.instance().handleAdjustedGradeClick = jest.fn().mockName(
+          'this.handleAdjustedGradeClick',
+        );
+      });
+      describe('gradeOverrideHistoryError is and empty and open is true', () => {
+        test('modal open and StatusAlert showing', () => {
+          expect(el.instance().render()).toMatchSnapshot();
+        });
+      });
+      describe('gradeOverrideHistoryError is empty and open is false', () => {
+        test('modal closed and StatusAlert closed', () => {
+          el.setProps({ open: false, gradeOverrideHistoryError: '' });
+          expect(el.instance().render()).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { martha: 'why did you say that name?!' };
+    let mapped;
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('gradeOverrideHistoryError from grades.gradeOverrideHistoryError', () => {
+      expect(
+        mapped.gradeOverrideHistoryError,
+      ).toEqual(selectors.grades.gradeOverrideHistoryError(testState));
+    });
+    test('open from app.modalState.open', () => {
+      expect(mapped.open).toEqual(selectors.app.modalState.open(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('closeModal from actions.app.closeModal', () => {
+      expect(mapDispatchToProps.closeModal).toEqual(actions.app.closeModal);
+    });
+    test('doneViewingAssignemtn from actions.grades.doneViewingAssignment', () => {
+      expect(
+        mapDispatchToProps.doneViewingAssignment,
+      ).toEqual(actions.grades.doneViewingAssignment);
+    });
+    test('updateGrades from thunkActions.grades.updateGrades', () => {
+      expect(mapDispatchToProps.updateGrades).toEqual(thunkActions.grades.updateGrades);
+    });
+  });
+});
--- a/src/components/GradesTab/FilterBadges/FilterBadge.jsx
+++ b/src/components/GradesTab/FilterBadges/FilterBadge.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Button } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+
+/**
+ * FilterBadge
+ * Base filter badge component, that displays a name and a close button.
+ * If showValue is true, it will also display the included value.
+ * @param {func} handleClose - close/dismiss filter event, taking a list of filternames
+ *   to reset when the filter badge closes.
+ * @param {string} filterName - api filter name (for redux connector)
+ */
+export const FilterBadge = ({
+  handleClose,
+  config: {
+    displayName,
+    isDefault,
+    hideValue,
+    value,
+    connectedFilters,
+  },
+}) => !isDefault && (
+  <div>
+    <span className="badge badge-info">
+      <span>
+        {displayName}{!hideValue && `: ${value}`}
+      </span>
+      <Button
+        className="btn-info"
+        aria-label="close"
+        onClick={handleClose(connectedFilters)}
+      >
+        <span aria-hidden="true">&times;</span>
+      </Button>
+    </span>
+    <br />
+  </div>
+);
+
+FilterBadge.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  // eslint-disable-next-line
+  filterName: PropTypes.string.isRequired,
+  // redux
+  config: PropTypes.shape({
+    connectedFilters: PropTypes.arrayOf(PropTypes.string),
+    displayName: PropTypes.string.isRequired,
+    isDefault: PropTypes.bool.isRequired,
+    hideValue: PropTypes.bool,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool,
+    ]),
+  }).isRequired,
+};
+
+export const mapStateToProps = (state, ownProps) => ({
+  config: selectors.root.filterBadgeConfig(state, ownProps.filterName),
+});
+
+export default connect(mapStateToProps)(FilterBadge);
--- a/src/components/GradesTab/FilterBadges/FilterBadge.test.jsx
+++ b/src/components/GradesTab/FilterBadges/FilterBadge.test.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Button } from '@edx/paragon';
+import selectors from 'data/selectors';
+import { FilterBadge, mapStateToProps } from './FilterBadge';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      filterBadgeConfig: jest.fn(state => ({ filterBadgeConfig: state })),
+    },
+  },
+}));
+
+describe('FilterBadge', () => {
+  describe('component', () => {
+    const config = {
+      displayName: 'a common name',
+      isDefault: false,
+      hideValue: false,
+      value: 'a common value',
+      connectedFilters: ['some', 'filters'],
+    };
+    const filterName = 'api.filter.name';
+    let handleClose;
+    let el;
+    let props;
+    beforeEach(() => {
+      handleClose = (filters) => ({ handleClose: filters });
+      props = { filterName, handleClose, config };
+    });
+    describe('with default value', () => {
+      beforeEach(() => {
+        el = shallow(
+          <FilterBadge {...props} config={{ ...config, isDefault: true }} />,
+        );
+      });
+      test('snapshot - empty', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('does not display', () => {
+        expect(el).toEqual({});
+      });
+    });
+    describe('with non-default value (active)', () => {
+      describe('if hideValue is true', () => {
+        beforeEach(() => {
+          el = shallow(
+            <FilterBadge {...props} config={{ ...config, hideValue: true }} />,
+          );
+        });
+        test('snapshot - shows displayName but not value in span', () => {
+          expect(el).toMatchSnapshot();
+        });
+        it('shows displayName but not value in span', () => {
+          expect(el.find('span.badge').childAt(0).text()).toEqual(config.displayName);
+        });
+        it('calls a handleClose event for connected filters on button click', () => {
+          expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
+        });
+      });
+      describe('if hideValue is false (default)', () => {
+        beforeEach(() => {
+          el = shallow(<FilterBadge {...props} />);
+        });
+        test('snapshot', () => {
+          expect(el).toMatchSnapshot();
+        });
+        it('shows displayName and value in span', () => {
+          expect(el.find('span.badge').childAt(0).text()).toEqual(
+            `${config.displayName}: ${config.value}`,
+          );
+        });
+        it('calls a handleClose event for connected filters on button click', () => {
+          expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
+        });
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { some: 'kind', of: 'alien' };
+    const filterName = 'Lilu Dallas Multipass';
+    test('config loads config from root.filterBadgeConfig with ownProps.filterName', () => {
+      const { config } = mapStateToProps(testState, { filterName });
+      expect(config).toEqual(selectors.root.filterBadgeConfig(testState, filterName));
+    });
+  });
+});
--- a/src/components/GradesTab/FilterBadges/snapshots/FilterBadge.test.jsx.snap
+++ b/src/components/GradesTab/FilterBadges/snapshots/FilterBadge.test.jsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBadge component with default value snapshot - empty 1`] = `""`;
+
+exports[`FilterBadge component with non-default value (active) if hideValue is false (default) snapshot 1`] = `
+<div>
+  <span
+    className="badge badge-info"
+  >
+    <span>
+      a common name
+      : a common value
+    </span>
+    <Button
+      aria-label="close"
+      className="btn-info"
+      onClick={
+        Object {
+          "handleClose": Array [
+            "some",
+            "filters",
+          ],
+        }
+      }
+    >
+      <span
+        aria-hidden="true"
+      >
+        ×
+      </span>
+    </Button>
+  </span>
+  <br />
+</div>
+`;
+
+exports[`FilterBadge component with non-default value (active) if hideValue is true snapshot - shows displayName but not value in span 1`] = `
+<div>
+  <span
+    className="badge badge-info"
+  >
+    <span>
+      a common name
+    </span>
+    <Button
+      aria-label="close"
+      className="btn-info"
+      onClick={
+        Object {
+          "handleClose": Array [
+            "some",
+            "filters",
+          ],
+        }
+      }
+    >
+      <span
+        aria-hidden="true"
+      >
+        ×
+      </span>
+    </Button>
+  </span>
+  <br />
+</div>
+`;
--- a/src/components/GradesTab/FilterBadges/snapshots/test.jsx.snap
+++ b/src/components/GradesTab/FilterBadges/snapshots/test.jsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBadges component snapshot - has a filterbadge with handleClose for each filter in badgeOrder 1`] = `
+<div>
+  <FilterBadge
+    filterName="filter1"
+    handleClose={[MockFunction this.props.handleClose]}
+    key="filter1"
+  />
+  <FilterBadge
+    filterName="filter2"
+    handleClose={[MockFunction this.props.handleClose]}
+    key="filter2"
+  />
+  <FilterBadge
+    filterName="filter3"
+    handleClose={[MockFunction this.props.handleClose]}
+    key="filter3"
+  />
+</div>
+`;
--- a/src/components/GradesTab/FilterBadges/index.jsx
+++ b/src/components/GradesTab/FilterBadges/index.jsx
@@ -0,0 +1,25 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { badgeOrder } from 'data/constants/filters';
+
+import FilterBadge from './FilterBadge';
+
+/**
+ * FilterBadges
+ * Displays a FilterBadge for each filter type in the data model with their current values.
+ * @param {func} handleClose - event taking a list of filternames to reset
+ */
+export const FilterBadges = ({ handleClose }) => (
+  <div>
+    {badgeOrder.map(filterName => (
+      <FilterBadge key={filterName} {...{ handleClose, filterName }} />
+    ))}
+  </div>
+);
+FilterBadges.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+};
+
+export default FilterBadges;
--- a/src/components/GradesTab/FilterBadges/test.jsx
+++ b/src/components/GradesTab/FilterBadges/test.jsx
@@ -0,0 +1,33 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import * as constants from 'data/constants/filters';
+import FilterBadges from '.';
+import FilterBadge from './FilterBadge';
+
+jest.mock('./FilterBadge', () => 'FilterBadge');
+
+describe('FilterBadges', () => {
+  describe('component', () => {
+    let el;
+    let handleClose;
+    const order = ['filter1', 'filter2', 'filter3'];
+    beforeEach(() => {
+      handleClose = jest.fn().mockName('this.props.handleClose');
+      constants.badgeOrder = order;
+      el = shallow(<FilterBadges handleClose={handleClose} />);
+    });
+    test('snapshot - has a filterbadge with handleClose for each filter in badgeOrder', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('has a filterbadge with handleClose for each filter in badgeOrder', () => {
+      const badgeProps = el.find(FilterBadge).map(badgeEl => badgeEl.props());
+      // key prop is not rendered by react
+      expect(badgeProps[0]).toEqual({ filterName: order[0], handleClose });
+      expect(badgeProps[1]).toEqual({ filterName: order[1], handleClose });
+      expect(badgeProps[2]).toEqual({ filterName: order[2], handleClose });
+      expect(badgeProps.length).toEqual(3);
+    });
+  });
+});
--- a/src/components/GradesTab/GradebookTable/Fields.jsx
+++ b/src/components/GradesTab/GradebookTable/Fields.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { StrictDict } from 'utils';
+
+/**
+ * Fields.Username
+ * simple label field for username, that optionally also displays external_user_key (userKey)
+ * if it is provided.
+ * @param {string} username - username for display
+ * @param {userKey} userKey - external_user_key for display
+ */
+const Username = ({ username, userKey }) => (
+  <div>
+    <span className="wrap-text-in-cell">
+      <div>
+        <div>{username}</div>
+        {userKey && <div className="student-key">{userKey}</div>}
+      </div>
+    </span>
+  </div>
+);
+Username.defaultProps = {
+  userKey: null,
+};
+Username.propTypes = {
+  username: PropTypes.string.isRequired,
+  userKey: PropTypes.string,
+};
+
+/**
+ * Fields.Email
+ * Simple label field for email value.
+ * @param {string} email - email for display
+ */
+const Email = ({ email }) => (
+  <span className="wrap-text-in-cell">{email}</span>
+);
+Email.propTypes = {
+  email: PropTypes.string.isRequired,
+};
+
+export default StrictDict({
+  Email,
+  Username,
+});
--- a/src/components/GradesTab/GradebookTable/Fields.test.jsx
+++ b/src/components/GradesTab/GradebookTable/Fields.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Fields from './Fields';
+
+describe('Gradebook Table Fields', () => {
+  describe('Username', () => {
+    let el;
+    const username = 'MyNameFromHere';
+    describe('with external_user_key', () => {
+      const props = {
+        username,
+        userKey: 'My name from another land',
+      };
+      beforeEach(() => {
+        el = shallow(<Fields.Username {...props} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('wraps external user key and username', () => {
+        expect(el.find('span').childAt(0)).toMatchSnapshot();
+        expect(el.find('span').childAt(0)).toMatchSnapshot();
+        const content = el.find('span').childAt(0);
+        expect(content.childAt(0).text()).toEqual(username);
+        expect(content.childAt(1).text()).toEqual(props.userKey);
+      });
+    });
+    describe('without external_user_key', () => {
+      beforeEach(() => {
+        el = shallow(<Fields.Username username={username} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('wraps username only', () => {
+        const content = el.find('span').childAt(0);
+        expect(content.childAt(0).text()).toEqual(username);
+        expect(content.children()).toHaveLength(1);
+      });
+    });
+  });
+
+  describe('Email', () => {
+    const email = 'myTag@place.com';
+    test('snapshot', () => {
+      expect(shallow(<Fields.Email email={email} />)).toMatchSnapshot();
+    });
+    test('wraps entry email', () => {
+      expect(shallow(<Fields.Email email={email} />).text()).toEqual(email);
+    });
+  });
+});
--- a/src/components/GradesTab/GradebookTable/GradeButton.jsx
+++ b/src/components/GradesTab/GradebookTable/GradeButton.jsx
@@ -0,0 +1,80 @@
+/* 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 selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+const { subsectionGrade } = selectors.grades;
+
+/**
+ * GradeButton
+ * The button link for a user's grade for a given subseciton.
+ * load formatting based on selected grade format, and on click, opens
+ * the editModal, loading in the current entry and subsection.
+ * @param {object} entry - user's grade entry
+ * @param {object} subsection - user's subsection grade from subsection_breakdown
+ */
+export class GradeButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  get label() {
+    return subsectionGrade[this.props.format](this.props.subsection);
+  }
+
+  onClick() {
+    this.props.setModalState({
+      userEntry: this.props.entry,
+      subsection: this.props.subsection,
+    });
+  }
+
+  render() {
+    return this.props.areGradesFrozen
+      ? this.label
+      : (
+        <Button
+          variant="link"
+          className="btn-header grade-button"
+          onClick={this.onClick}
+        >
+          {this.label}
+        </Button>
+      );
+  }
+}
+
+GradeButton.propTypes = {
+  subsection: PropTypes.shape({
+    attempted: PropTypes.bool,
+    percent: PropTypes.number,
+    score_possible: PropTypes.number,
+    subsection_name: PropTypes.string,
+    module_id: PropTypes.string,
+  }).isRequired,
+  entry: PropTypes.shape({
+    user_id: PropTypes.number,
+    username: PropTypes.string,
+  }).isRequired,
+  // redux
+  areGradesFrozen: PropTypes.bool.isRequired,
+  format: PropTypes.string.isRequired,
+  setModalState: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
+  format: selectors.grades.gradeFormat(state),
+});
+
+export const mapDispatchToProps = {
+  setModalState: thunkActions.app.setModalStateFromTable,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradeButton);
--- a/src/components/GradesTab/GradebookTable/GradeButton.test.jsx
+++ b/src/components/GradesTab/GradebookTable/GradeButton.test.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Button } from '@edx/paragon';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+import {
+  GradeButton,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './GradeButton';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    assignmentTypes: {
+      areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })),
+    },
+    grades: {
+      subsectionGrade: {
+        percent: jest.fn(subsection => ({ percent: subsection })),
+      },
+      gradeFormat: jest.fn(state => ({ gradeFormat: state })),
+    },
+  },
+}));
+
+jest.mock('data/thunkActions', () => ({
+  app: {
+    setModalStateFromTable: jest.fn(),
+  },
+}));
+
+describe('GradeButton', () => {
+  let el;
+  let props = {
+    subsection: {
+      attempted: false,
+      percent: 23,
+      score_possible: 32,
+      subsection_name: 'the things we do',
+      module_id: 'in potions',
+    },
+    entry: {
+      user_id: 2,
+      username: 'Jessie',
+    },
+    areGradesFrozen: false,
+    format: 'percent',
+  };
+  beforeEach(() => {
+    props = { ...props, setModalState: jest.fn() };
+  });
+  describe('component', () => {
+    describe('snapshots', () => {
+      test('grades are frozen', () => {
+        el = shallow(<GradeButton {...{ ...props, areGradesFrozen: true }} />);
+        const label = 'why you gotta label people?';
+        jest.spyOn(el.instance(), 'label', 'get').mockReturnValue(label);
+        el.instance().onClick = jest.fn().mockName('this.onClick');
+        expect(el.instance().render()).toMatchSnapshot();
+        expect(el.instance().render()).toEqual(label);
+      });
+      test('grades are not frozen', () => {
+        el = shallow(<GradeButton {...props} />);
+        const label = 'why you gotta label people?';
+        jest.spyOn(el.instance(), 'label', 'get').mockReturnValue(label);
+        el.instance().onClick = jest.fn().mockName('this.onClick');
+        expect(el.instance().render()).toMatchSnapshot();
+        expect(el.instance().render().props.children).toEqual(label);
+        expect(el.render().is(Button)).toEqual(true);
+      });
+    });
+    describe('label', () => {
+      it('calls the appropriate formatter with the subsection prop', () => {
+        el = shallow(<GradeButton {...props} />);
+        expect(
+          el.instance().label,
+        ).toEqual(selectors.grades.subsectionGrade[props.format](props.subsection));
+      });
+    });
+    describe('onClick', () => {
+      it('calls props.setModalState with userEntry and subsection', () => {
+        el = shallow(<GradeButton {...props} />);
+        el.instance().onClick();
+        expect(props.setModalState).toHaveBeenCalledWith({
+          userEntry: props.entry,
+          subsection: props.subsection,
+        });
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { teams: { rocket: ['jesse', 'james'] } };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('areGradesFrozen form assignmentTypes.areGradesFrozen', () => {
+      expect(
+        mapped.areGradesFrozen,
+      ).toEqual(selectors.assignmentTypes.areGradesFrozen(testState));
+    });
+    test('format form grades.format', () => {
+      expect(mapped.format).toEqual(selectors.grades.gradeFormat(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('setModalState from thunkActions.app.setModalStateFromTable', () => {
+      expect(mapDispatchToProps.setModalState).toEqual(thunkActions.app.setModalStateFromTable);
+    });
+  });
+});
--- a/src/components/GradesTab/GradebookTable/LabelReplacements.jsx
+++ b/src/components/GradesTab/GradebookTable/LabelReplacements.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { StrictDict } from 'utils';
+
+import {
+  Icon,
+  OverlayTrigger,
+  Tooltip,
+} from '@edx/paragon';
+
+import { Headings } from 'data/constants/grades';
+
+export const totalGradePercentageMessage = 'Total Grade values are always displayed as a percentage.';
+
+/**
+ * <TotalGradeLabelReplacement />
+ * Total Grade column header.
+ * displays an overlay tooltip with screen-reader text to indicate total grade percentage
+ */
+const TotalGradeLabelReplacement = () => (
+  <div>
+    <OverlayTrigger
+      trigger={['hover', 'focus']}
+      key="left-basic"
+      placement="left"
+      overlay={(<Tooltip id="course-grade-tooltip">{totalGradePercentageMessage}</Tooltip>)}
+    >
+      <div>
+        {Headings.totalGrade}
+        <div id="courseGradeTooltipIcon">
+          <Icon className="fa fa-info-circle" screenReaderText={totalGradePercentageMessage} />
+        </div>
+      </div>
+    </OverlayTrigger>
+  </div>
+);
+
+/**
+ * <UsernameLabelReplacement />
+ * Username column header.  Lists that Student Key is possibly available
+ */
+const UsernameLabelReplacement = () => (
+  <div>
+    <div>Username</div>
+    <div className="font-weight-normal student-key">Student Key*</div>
+  </div>
+);
+
+export default StrictDict({
+  TotalGradeLabelReplacement,
+  UsernameLabelReplacement,
+});
--- a/src/components/GradesTab/GradebookTable/LabelReplacements.test.jsx
+++ b/src/components/GradesTab/GradebookTable/LabelReplacements.test.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { OverlayTrigger } from '@edx/paragon';
+
+import LabelReplacements from './LabelReplacements';
+
+const {
+  TotalGradeLabelReplacement,
+  UsernameLabelReplacement,
+} = LabelReplacements;
+
+jest.mock('@edx/paragon', () => ({
+  Icon: () => 'Icon',
+  OverlayTrigger: () => 'OverlayTrigger',
+  Tooltip: () => 'Tooltip',
+}));
+
+describe('LabelReplacements', () => {
+  describe('TotalGradeLabelReplacement', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<TotalGradeLabelReplacement />);
+    });
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('displays overlay tooltip', () => {
+      expect(el.find(OverlayTrigger).props().overlay).toMatchSnapshot();
+    });
+  });
+  describe('UsernameLabelReplacement', () => {
+    test('snapshot', () => {
+      expect(shallow(<UsernameLabelReplacement />)).toMatchSnapshot();
+    });
+  });
+});
--- a/src/components/GradesTab/GradebookTable/snapshots/Fields.test.jsx.snap
+++ b/src/components/GradesTab/GradebookTable/snapshots/Fields.test.jsx.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gradebook Table Fields Email snapshot 1`] = `
+<span
+  className="wrap-text-in-cell"
+>
+  myTag@place.com
+</span>
+`;
+
+exports[`Gradebook Table Fields Username with external_user_key snapshot 1`] = `
+<div>
+  <span
+    className="wrap-text-in-cell"
+  >
+    <div>
+      <div>
+        MyNameFromHere
+      </div>
+      <div
+        className="student-key"
+      >
+        My name from another land
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 1`] = `
+<div>
+  <div>
+    MyNameFromHere
+  </div>
+  <div
+    className="student-key"
+  >
+    My name from another land
+  </div>
+</div>
+`;
+
+exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 2`] = `
+<div>
+  <div>
+    MyNameFromHere
+  </div>
+  <div
+    className="student-key"
+  >
+    My name from another land
+  </div>
+</div>
+`;
+
+exports[`Gradebook Table Fields Username without external_user_key snapshot 1`] = `
+<div>
+  <span
+    className="wrap-text-in-cell"
+  >
+    <div>
+      <div>
+        MyNameFromHere
+      </div>
+    </div>
+  </span>
+</div>
+`;
--- a/src/components/GradesTab/GradebookTable/snapshots/GradeButton.test.jsx.snap
+++ b/src/components/GradesTab/GradebookTable/snapshots/GradeButton.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradeButton component snapshots grades are frozen 1`] = `"why you gotta label people?"`;
+
+exports[`GradeButton component snapshots grades are not frozen 1`] = `
+<Button
+  className="btn-header grade-button"
+  onClick={[MockFunction this.onClick]}
+  variant="link"
+>
+  why you gotta label people?
+</Button>
+`;
--- a/src/components/GradesTab/GradebookTable/snapshots/LabelReplacements.test.jsx.snap
+++ b/src/components/GradesTab/GradebookTable/snapshots/LabelReplacements.test.jsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LabelReplacements TotalGradeLabelReplacement displays overlay tooltip 1`] = `
+<Tooltip
+  id="course-grade-tooltip"
+>
+  Total Grade values are always displayed as a percentage.
+</Tooltip>
+`;
+
+exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
+<div>
+  <OverlayTrigger
+    key="left-basic"
+    overlay={
+      <Tooltip
+        id="course-grade-tooltip"
+      >
+        Total Grade values are always displayed as a percentage.
+      </Tooltip>
+    }
+    placement="left"
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <div>
+      Total Grade (%)
+      <div
+        id="courseGradeTooltipIcon"
+      >
+        <Icon
+          className="fa fa-info-circle"
+          screenReaderText="Total Grade values are always displayed as a percentage."
+        />
+      </div>
+    </div>
+  </OverlayTrigger>
+</div>
+`;
+
+exports[`LabelReplacements UsernameLabelReplacement snapshot 1`] = `
+<div>
+  <div>
+    Username
+  </div>
+  <div
+    className="font-weight-normal student-key"
+  >
+    Student Key*
+  </div>
+</div>
+`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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