fix: Fix rows counter in the Edit Grade modal window (olive branch) (#311)

* fix: Fix rows counter in the Edit Grade modal window

* fix: Update tests

.env

@@ -1,35 +1,34 @@
-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=''
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.development

@@ -14,17 +14,16 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SITE_NAME=localhost
-
 DATA_API_BASE_URL='http://localhost:8000'
 // LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
 LMS_CLIENT_ID='login-service-client-id'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 FEATURE_FLAGS={}
-CSRF_COOKIE_NAME='csrftoken'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 SUPPORT_URL='http://localhost:18000/support'
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
 FACEBOOK_URL='https://www.facebook.com'
@@ -38,5 +37,5 @@ 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
+APP_ID=''
+MFE_CONFIG_API_URL=''

.eslintrc.js

@@ -1,6 +1,13 @@
 const { createConfig } = require('@edx/frontend-build');
 
-const config = createConfig('eslint');
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});
 
 config.settings = {
   "import/resolver": {

.github/CODEOWNERS

@@ -3,4 +3,4 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence, they will
 # be requested for review when someone opens a pull request.
-*       @edx/masters-devs-gta
+*       @openedx/content-aurora

.github/pull_request_template.md

@@ -26,4 +26,4 @@ Collectively, these should be completed by reviewers of this PR:
 - [ ] I've tested the new functionality
 
 
-FYI: @edx/masters-devs-gta
+FYI: @openedx/content-aurora

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

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

.github/workflows/ci.yml

@@ -0,0 +1,64 @@
+name: node_js CI
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node: [16]
+        npm: [8.5.x]
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Nodejs
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node }}
+
+    - name: Install npm 8.5.x
+      run: npm install -g npm@${{ matrix.npm }}
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Unit Tests
+      run: npm run test
+
+    - name: Validate Package Lock
+      run: make validate-no-uncommitted-package-lock-changes
+
+    - name: Run Lint
+      run: npm run lint
+
+    - name: Run Test
+      run: npm run test
+
+    - name: Run Build
+      run: npm run build
+
+    - name: Run Coverage
+      uses: codecov/codecov-action@v2
+
+    - name: Send failure notification
+      if: ${{ failure() }}
+      uses: dawidd6/action-send-mail@v3
+      with:
+        server_address: email-smtp.us-east-1.amazonaws.com
+        server_port: 465
+        username: ${{secrets.EDX_SMTP_USERNAME}}
+        password: ${{secrets.EDX_SMTP_PASSWORD}}
+        subject: CI workflow failed in ${{github.repository}}
+        to: masters-grades@edx.org
+        from: github-actions <github-actions@edx.org>
+        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{
+          github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,13 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master

.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create Build
+        run: npm run build
+
+      - name: Release Package
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npm semantic-release

.gitignore

@@ -5,6 +5,8 @@ npm-debug.log
 coverage
 
 dist/
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl
 
 ### pyenv ###
 .python-version
@@ -17,3 +19,7 @@ dist/
 ### Development environments ###
 .idea
 .vscode
+
+### transifex ###
+src/i18n/transifex_input.json
+temp

.npmignore

@@ -1,7 +1,6 @@
 .eslintignore
 .eslintrc.json
 .gitignore
-.travis.yml
 docker-compose.yml
 Dockerfile
 Makefile

.travis.yml

@@ -1,28 +0,0 @@
-language: node_js
-node_js: 12
-notifications:
-  email:
-    recipients:
-      - masters-grades@edx.org
-    on_success: never
-    on_failure: always
-  webhooks: https://www.travisbuddy.com/
-  on_success: never
-before_install:
-  - npm install -g greenkeeper-lockfile@1.14.0
-install:
-  - npm ci
-before_script: greenkeeper-lockfile-update
-after_script: greenkeeper-lockfile-upload
-script:
-  - make validate-no-uncommitted-package-lock-changes
-  - npm run lint
-  - npm run test
-  - npm run build
-after_success:
-  - npm run travis-deploy-once "npm run semantic-release"
-  - npm run coveralls
-env:
-  global:
-    - secure: bBLQZVw1aVUxB7GFNXGrdKeztyFrCCJusVgFcSuej9S4qmj9/jrVsEc9dEcH+BMS+b49+SvILoxzd6ZYLaRygQLzevnO1/dX596DeCKVK48PTTZRsNyafaSMCkxNKqEmRcA9hYL52xJJ5GpKo7ViWsFy8VFgUfZEJxQi8/lYbfQ1vlXRpo2LJfJh09v85roSXdQmajyGJ1Dz6elcwUX5B+BgXmIHizJXUMfFci61xTEZmgKtfeCiwFQA5pCvVMHBQhgySqT2N3eRESzRt2jAfAdcRKBYXS0rwKymdlL1ZF349Jm8xwtqm19Fwsut21181Lnn6FmccMWhQ7man3WH1xfT0ahmHNs1KJMyZcwRJd/gDfbd6iD3LB9Pt9hEQ00Qh/m7MYeahMxTEL9bp2TyILi8cTP91jeBUHCExCdv2jRrUQEnUS5vZUYRdM8CR2DLoLmNh3APndKzwgr5U8rh6RdhbQBJp97Hb/YYVrBiP2atLJAaYPY/xEQHK/YoXelQgiZ6wHBMV+tF/L0ZRn7KyVWdkbBKWfbEjRKbEJD9WD+V7HayMR81tm5CSqlrG8mTvSy2boIGiX14GV11ZEfMj5bjb6W41BW+QGqQerZvmwk/4ywe304X85PD0OBhIYPRzeLIi0Gt6lD1aOpVxgm4M03tdgYQzCPWRPq32CB+1IA=
-    - secure: w1d/E+cc4+Bf017Jpp9YsKBzLSZw9sqKZGeM2tNrO6eJZbMJqfKTmfUrRw8BoLh1Z8YRkHF7RADDy3ln7XEdeAX3j9OoC3Cz0zN6iDX6TPcI461NuOIscJYb4tyFcuWm6FhgVlBAlo/BI3q+zqKwjfWuDaORpk6+haacCmvTe5V0vWhY+MYT7M+LfnKeKVzhI4magGt8jPTE21oziIFwCqCCjJc4+AmsWoWTzU0Q7Db0DZiJnLXFfXybLbkedAgJmcSgEGZCSpaZIOkX0/Lbazsz1Ky4KASfkrYT1Z5iKQ8TE3skmx1IIu+1egN8iBbdrY+NhvV24RkT+rpUvD7TBIHTrjQ5JYLe0kGjN70vG7YlKgjNSyTjkrEd7fCKpuIol3DVjBRz3tV5aCl0t/A8mIPqKyNI94MamWsExpqsxgcb9vBVno5caZvD8ZXNrGNqanB3MSoLGxZTLKif9u+AZfLnB3xtjaiJg3/BNoWaOBPlp/M6BvGIGHElwvLrAhUvl8wzrwJcQQWpmRMh0b6enr6Y7ox/mGGs7NBCT+CNKEsWeCfY4thZzgi6/GocXyqdTpXMkNSI1PDoPmi+vKafBd+7aAYbcUlJBTU6TAxyncln0tF2JF+ghTZ0v8nNzEQ9VmV4ddyoOHx6YnHvEcenWZGMROQnMCVifyDbaHpPbPI=

.tx/config

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

Makefile

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

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
@@ -22,19 +22,13 @@ For existing documentation see:
 
 ### What does this offer over the legacy gradebook?
 
-![A screenshot of the grade listings](documentation/screenshots/grade-listings.png)
-
 The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
 audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.
 
-![Screenshot of the grade editing interface](documentation/screenshots/grade-editing.png)
-
 UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
 scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
 ‘Homework’).
 
-![Screenshot of the filtering options](documentation/screenshots/grade-filtering.png)
-
 ### What does the legacy gradebook offer that this project does not?
 
 This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give

documentation/.travis.yml.md

@@ -1,77 +0,0 @@
-# Travis Configuration
-
-Your project might have different build requirements - however, this project's `.travis.yml` configuration is supposed to represent a good starting point.
-
-## Node JS Version
-
-The minimum `Node` and `npm` versions that edX supports is `8.9.3` and `5.5.1`, respectively.
-
-## Caching node_modules
-
-While [the `Travis` blog](https://blog.travis-ci.com/2016-11-21-travis-ci-now-supports-yarn) recommends
-
-```yaml
-cache:
-  directories:
-    - node_modules
-```
-
-this causes issues when testing different versions of `Node` because [`node_modules` will store the compiled native modules](https://stackoverflow.com/a/42523517/5225575).
-
-Caching the `~/.npm` directory avoids storing these native modules.
-
-## Notifications
-
-This project uses a service called [`TravisBuddy`](https://www.travisbuddy.com/), which provides Travis build context within a PR via webhooks (configured only to add feedback for build failures).
-
-![travis-buddy](https://i.imgur.com/VsR2TTs.png)
-
-## Installing `greenkeeper-lockfile`
-
-As explained in [the `Greenkeeper` documentation](https://greenkeeper.io/docs.html#greenkeeper-step-by-step), `Greenkeeper` is a service that keeps track of your project's dependencies, and will, for example, automatically open PRs with an updated `package.json` file when the latest version of a dependency is a major version ahead of the existing dependency version in your `package.json` file.
-
-This automated updating is great, but `Greenkeeper` does not update your `package-lock.json` file, just your `package.json` file. This makes sense, as the only way to update the `package-lock.json` file would be to run `npm install` when building your project, using the latest `package.json`, and then committing the updated `package-lock.json` file.
-
-This is essentially what you have to do manually when `Greenkeeper` opens a PR - `git checkout` the branch, `npm install` locally, `git commit` the `package-lock.json` changes, and then `git push` those changes to the `Greenkeeper` branch on `origin`. It's fun probably only the first time, and even then it gets old, fast.
-
-What [`greenkeeper-lockfile`](https://github.com/greenkeeperio/greenkeeper-lockfile) does is that it automates the previous steps as part of the build process.
-
-It will
-  * Check that the branch is a `Greenkeeper` branch
-  * Update the lockfile
-  * Push a commit with the updated lockfile back to the Greenkeeper branch
-
-This is why it's important to install `greenkeeper-lockfile` in the `before_install` step, and since it's used exclusively only in the Travis Build, why it's not part of the package's dependencies.
-
-## Scripts
-
-Most of the `script`s are self-explanatory - you probably want to fail a build if there are linting violations, or if any tests don't pass, or if it cannot compile your files.
-
-However, there are a couple additional `script`s that might seem less self-explanatory.
-
-### What the heck is `make validate-no-uncommitted-package-lock-changes`?
-
-There are only two requirements for a good `make target` name
-
-1. Definitely make it really verbose so people can't remember what it's called
-2. Definitely don't not use a double-negative
-
-What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project. It's important to remember that all build `script`s are executed in Travis *after* the `install` step (aka post-`npm install`).
-
-This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
-
-However, when these changes surface within a Travis build, this indicates differing dependency expectations between the committed `package.json` file and the `package-lock.json` file, which is a good reason to fail a build.
-
-### What is this `npm run is-es5` check?
-
-This project outputs production files to the `dist` folder. The `npm script`, `npm run is-es5`, checks the JavaScript files in the `dist` folder to make sure that they are `ES5`-compliant.
-
-This check is important because `ES5` JavaScript has [greater browser compatibility](http://kangax.github.io/compat-table/es5/) than [`ES2015+`](http://kangax.github.io/compat-table/es6/) - particularly for `IE11`.
-
-### `deploy` step
-
-How your project deploys will probably differ between the cookie cutter and your own application.
-
-For demonstrational purposes, the cookie cutter deploys to GitHub pages using [`Travis`'s GitHub pages configuration](https://docs.travis-ci.com/user/deployment/pages/).
-
-Your application might deploy to an `S3` bucket or to `npm`.

documentation/CI.md

@@ -0,0 +1,40 @@
+# CI Configuration
+
+Your project might have different build requirements - however, this project's `.github/ci.yml` configuration is supposed to represent a good starting point.
+
+## Node JS Version
+
+The minimum `Node` and `npm` versions that edX supports is `8.9.3` and `5.5.1`, respectively.
+
+## Scripts
+
+Most of the `script`s are self-explanatory - you probably want to fail a build if there are linting violations, or if any tests don't pass, or if it cannot compile your files.
+
+However, there are a couple additional `script`s that might seem less self-explanatory.
+
+### What the heck is `make validate-no-uncommitted-package-lock-changes`?
+
+There are only two requirements for a good `make target` name
+
+1. Definitely make it really verbose so people can't remember what it's called
+2. Definitely don't not use a double-negative
+
+What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project. It's important to remember that all build `script`s are executed in CI *after* the `install` step (aka post-`npm install`).
+
+This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
+
+However, when these changes surface within a CI build, this indicates differing dependency expectations between the committed `package.json` file and the `package-lock.json` file, which is a good reason to fail a build.
+
+### What is this `npm run is-es5` check?
+
+This project outputs production files to the `dist` folder. The `npm script`, `npm run is-es5`, checks the JavaScript files in the `dist` folder to make sure that they are `ES5`-compliant.
+
+This check is important because `ES5` JavaScript has [greater browser compatibility](http://kangax.github.io/compat-table/es5/) than [`ES2015+`](http://kangax.github.io/compat-table/es6/) - particularly for `IE11`.
+
+### `deploy` step
+
+How your project deploys will probably differ between the cookie cutter and your own application.
+
+For demonstrational purposes, the cookie cutter deploys to GitHub pages using [ GitHUb CI ].
+
+Your application might deploy to an `S3` bucket or to `npm`.

documentation/testing/test-plan.md

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

documentation/testing/test-setup.md

@@ -14,7 +14,7 @@ Suggested resources:
 - [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
 - [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)
 
-## Enable Gradebook and feature toggles for course
+## Enable Gradebook for course
 
 See README.md #Quickstart for more detailed instructions.
 
@@ -25,7 +25,13 @@ As an admin user, visit Django Admin (`{lms-url}/admin`) to modify features.
     - [ ] Set name to `grades.assume_zero_grade_if_absent`, select "Active", and click "Save"
 - In Waffle_Utils > Waffle flag course overrides:
     - [ ] Add a new flag called `grades.writeable_gradebook`, select "Force On", and enable it for your course
-    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course
+
+## Enable Bulk Management
+
+Bulk Management is an added feature to allow modifying grades in bulk via CSV upload. Bulk Management is default enabled for Master's track courses but can be selectively enabled for other courses with a waffle flag following the steps below.
+
+- In Waffle_Utils > Waffle flag course overrides:
+    - [ ] Add a new flag called `grades.bulk_management`, select "Force On", and enable it for your course.
 
 ## Create a Master's track for testing Master's-only features
 

jest.config.js

@@ -8,4 +8,9 @@ module.exports = createConfig('jest', {
   snapshotSerializers: [
     'enzyme-to-json/serializer',
   ],
+  coveragePathIgnorePatterns: [
+    'src/segment.js',
+    'src/postcss.config.js',
+    'testUtils', // don't unit test jest mocking tools
+  ],
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.26",
+  "version": "1.6.0",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -8,16 +8,15 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch",
-    "travis-deploy-once": "travis-deploy-once"
+    "watch-tests": "jest --watch"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -25,16 +24,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "browserslist": [
+    "last 2 versions",
+    "not ie > 0",
+    "not ie_mob > 0"
+  ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.1.1",
-    "@edx/frontend-platform": "1.8.1",
-    "@edx/paragon": "14.6.1",
+    "@edx/frontend-component-footer": "^11.1.1",
+    "@edx/frontend-component-header": "^3.1.1",
+    "@edx/frontend-platform": "2.5.0",
+    "@edx/paragon": "19.6.0",
     "@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",
@@ -42,13 +48,13 @@
     "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "node-sass": "^4.14.1",
     "prop-types": "15.7.2",
     "query-string": "6.13.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-intl": "^2.9.0",
-    "react-redux": "^5.1.1",
+    "react-redux": "^7.1.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
@@ -58,13 +64,14 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.7",
+    "sass": "^1.49.0",
+    "util": "^0.12.3",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "5.5.2",
+    "@edx/frontend-build": "9.1.1",
     "axios": "0.21.1",
     "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
     "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",
@@ -73,8 +80,8 @@
     "jest": "24.9.0",
     "react-dev-utils": "^5.0.3",
     "react-test-renderer": "^16.10.1",
+    "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3",
-    "travis-deploy-once": "^5.0.11"
+    "semantic-release": "^17.2.3"
   }
 }

src/App.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+import './App.scss';
+import Head from './head/Head';
+
+const App = () => (
+  <AppProvider store={store}>
+    <Head />
+    <Router>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route
+              exact
+              path={routePath}
+              component={GradebookPage}
+            />
+          </Switch>
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      </div>
+    </Router>
+  </AppProvider>
+);
+
+export default App;

src/App.scss

@@ -9,7 +9,10 @@ $fa-font-path: "~font-awesome/fonts";
 
 $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
 
+@import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";
 
-@import "./components/Gradebook/gradebook";
-@import "./components/Drawer/Drawer";
+@import "./components/GradesView/GradesView";
+@import "./components/BulkManagementHistoryView/BulkManagementHistoryView";
+@import "./components/WithSidebar/WithSidebar";
+@import "./components/GradebookFilters/GradebookFilters";

src/App.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
+import store from 'data/store';
+import GradebookPage from 'containers/GradebookPage';
+
+import App from './App';
+import Head from './head/Head';
+
+jest.mock('react-router-dom', () => ({
+  BrowserRouter: () => 'BrowserRouter',
+  Route: () => 'Route',
+  Switch: () => 'Switch',
+}));
+jest.mock('@edx/frontend-platform/react', () => ({
+  AppProvider: () => 'AppProvider',
+}));
+jest.mock('data/constants/app', () => ({
+  routePath: '/:courseId',
+}));
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('data/store', () => 'testStore');
+jest.mock('containers/GradebookPage', () => 'GradebookPage');
+jest.mock('@edx/frontend-component-header', () => 'Header');
+
+const logo = 'fakeLogo.png';
+let el;
+let router;
+
+describe('App router component', () => {
+  test('snapshot', () => {
+    expect(shallow(<App />)).toMatchSnapshot();
+  });
+  describe('component', () => {
+    beforeEach(() => {
+      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
+      el = shallow(<App />);
+      router = el.childAt(1);
+    });
+    describe('AppProvider', () => {
+      test('AppProvider is the parent component, passed the redux store props', () => {
+        expect(el.type()).toBe(AppProvider);
+        expect(el.props().store).toEqual(store);
+      });
+    });
+    describe('Head', () => {
+      test('first child of AppProvider', () => {
+        expect(el.childAt(0).type()).toBe(Head);
+      });
+    });
+    describe('Router', () => {
+      test('second child of AppProvider', () => {
+        expect(router.type()).toBe(Router);
+      });
+      test('Header is above/outside-of the routing', () => {
+        expect(router.childAt(0).childAt(0).type()).toBe(Header);
+        expect(router.childAt(0).childAt(1).type()).toBe('main');
+      });
+      test('Routing - GradebookPage is only route', () => {
+        expect(router.find('main')).toEqual(shallow(
+          <main>
+            <Switch>
+              <Route exact path={routePath} component={GradebookPage} />
+            </Switch>
+          </main>,
+        ));
+      });
+    });
+    test('Footer logo drawn from env variable', () => {
+      expect(router.find(Footer).props().logo).toEqual(logo);
+    });
+  });
+});

src/__snapshots__/App.test.jsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App router component snapshot 1`] = `
+<AppProvider
+  store="testStore"
+>
+  <injectIntl(ShimmedIntlComponent) />
+  <BrowserRouter>
+    <div>
+      <Header />
+      <main>
+        <Switch>
+          <Route
+            component="GradebookPage"
+            exact={true}
+            path="/:courseId"
+          />
+        </Switch>
+      </main>
+      <Footer />
+    </div>
+  </BrowserRouter>
+</AppProvider>
+`;

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { connect } from 'react-redux';
+
+import { Alert } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import messages from './messages';
+
+/**
+ * <BulkManagementAlerts />
+ * Alerts to display at the top of the BulkManagement tab
+ */
+export const BulkManagementAlerts = ({
+  bulkImportError,
+  uploadSuccess,
+}) => (
+  <>
+    <Alert
+      variant="danger"
+      show={!!bulkImportError}
+      dismissible={false}
+    >
+      {bulkImportError}
+    </Alert>
+    <Alert
+      variant="success"
+      show={uploadSuccess}
+      dismissible={false}
+    >
+      <FormattedMessage {...messages.successDialog} />
+    </Alert>
+  </>
+);
+
+BulkManagementAlerts.defaultProps = {
+  bulkImportError: '',
+  uploadSuccess: false,
+};
+
+BulkManagementAlerts.propTypes = {
+  // redux
+  bulkImportError: PropTypes.string,
+  uploadSuccess: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  bulkImportError: selectors.grades.bulkImportError(state),
+  uploadSuccess: selectors.grades.uploadSuccess(state),
+});
+
+export default connect(mapStateToProps)(BulkManagementAlerts);

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+import messages from './messages';
+
+import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('@edx/paragon', () => ({
+  Alert: () => 'Alert',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: {
+      bulkImportError: (state) => ({ bulkImportError: state }),
+      uploadSuccess: (state) => ({ uploadSuccess: state }),
+    },
+  },
+}));
+
+const errorMessage = 'Oh noooooo';
+
+describe('BulkManagementAlerts', () => {
+  describe('component', () => {
+    let el;
+    describe('no errer, no upload success', () => {
+      beforeEach(() => {
+        el = shallow(<BulkManagementAlerts />);
+      });
+      test('snapshot - bulkImportError closed, success closed', () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('closed danger alert', () => {
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).props().show).toEqual(false);
+        expect(el.childAt(0).props().variant).toEqual('danger');
+      });
+      test('closed success alert', () => {
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).props().show).toEqual(false);
+        expect(el.childAt(1).props().variant).toEqual('success');
+      });
+    });
+    describe('no errer, no upload success', () => {
+      beforeEach(() => {
+        el = shallow(<BulkManagementAlerts uploadSuccess bulkImportError={errorMessage} />);
+      });
+      const assertions = [
+        'danger alert open with bulkImportError',
+        'success alert open with messages.successDialog',
+      ];
+      test(`snapshot - ${assertions.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('open danger alert with bulkImportError content', () => {
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).children().text()).toEqual(errorMessage);
+        expect(el.childAt(0).props().show).toEqual(true);
+      });
+      test('open success alert with messages.successDialog content', () => {
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).children().getElement()).toEqual(
+          <FormattedMessage {...messages.successDialog} />,
+        );
+        expect(el.childAt(1).props().show).toEqual(true);
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { a: 'puppy', named: 'Ember' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('bulkImportError from grades.bulkImportError', () => {
+      expect(mapped.bulkImportError).toEqual(selectors.grades.bulkImportError(testState));
+    });
+    test('uploadSuccess from grades.uploadSuccess', () => {
+      expect(mapped.uploadSuccess).toEqual(selectors.grades.uploadSuccess(testState));
+    });
+  });
+});

src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss

@@ -0,0 +1,6 @@
+.bulk-management-history-view {
+  .help-text {
+    margin-bottom: 40px;
+    max-width: 70%;
+  }
+}

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -0,0 +1,61 @@
+/* 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 { DataTable } from '@edx/paragon';
+
+import { bulkManagementColumns } from 'data/constants/app';
+import selectors from 'data/selectors';
+
+import ResultsSummary from './ResultsSummary';
+
+export const mapHistoryRows = ({
+  resultsSummary,
+  originalFilename,
+  user,
+  ...rest
+}) => ({
+  resultsSummary: (<ResultsSummary {...resultsSummary} />),
+  filename: (<span className="wrap-text-in-cell">{originalFilename}</span>),
+  user: (<span className="wrap-text-in-cell">{user}</span>),
+  ...rest,
+});
+
+/**
+ * <HistoryTable />
+ * Table with history of bulk management uploads, including a results summary which
+ * displays total, skipped, and failed uploads
+ */
+export const HistoryTable = ({
+  bulkManagementHistory,
+}) => (
+  <DataTable
+    data={bulkManagementHistory.map(mapHistoryRows)}
+    hasFixedColumnWidths
+    columns={bulkManagementColumns}
+    className="table-striped"
+    itemCount={bulkManagementHistory.length}
+  />
+);
+HistoryTable.defaultProps = {
+  bulkManagementHistory: [],
+};
+HistoryTable.propTypes = {
+  // redux
+  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
+    originalFilename: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+    timeUploaded: PropTypes.string.isRequired,
+    resultsSummary: PropTypes.shape({
+      rowId: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    }),
+  })),
+};
+
+export const mapStateToProps = (state) => ({
+  bulkManagementHistory: selectors.grades.bulkManagementHistoryEntries(state),
+});
+
+export default connect(mapStateToProps)(HistoryTable);

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -0,0 +1,108 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DataTable } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import { bulkManagementColumns } from 'data/constants/app';
+
+import ResultsSummary from './ResultsSummary';
+import { HistoryTable, mapStateToProps } from './HistoryTable';
+
+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: {
+      bulkManagementHistoryEntries: jest.fn(state => ({ historyEntries: state })),
+    },
+  },
+}));
+jest.mock('./ResultsSummary', () => 'ResultsSummary');
+
+describe('HistoryTable', () => {
+  describe('component', () => {
+    const entry1 = {
+      originalFilename: 'blue.png',
+      user: 'Eifel',
+      timeUploaded: '65',
+      resultsSummary: {
+        rowId: 12,
+        courseId: 'Da Bu Dee',
+        text: 'Da ba daa',
+      },
+    };
+    const entry2 = {
+      originalFilename: 'allStar.jpg',
+      user: 'Smashmouth',
+      timeUploaded: '2000s?',
+      resultsSummary: {
+        courseId: 'rockstar',
+        rowId: 2,
+        text: 'all that glitters is gold',
+      },
+    };
+    const props = {
+      bulkManagementHistory: [entry1, entry2],
+    };
+    let el;
+    describe('snapshot', () => {
+      beforeEach(() => {
+        el = shallow(<HistoryTable {...props} />);
+      });
+      test('snapshot - loads formatted table', () => {
+        expect(el).toMatchSnapshot();
+      });
+      describe('history table', () => {
+        let table;
+        beforeEach(() => {
+          table = el.find(DataTable);
+        });
+        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));
+    });
+  });
+});

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Hyperlink, Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
+
+import lms from 'data/services/lms';
+
+/**
+ * <ResultsSummary {...{ courseId, rowId, text }} />
+ * displays a result summary cell for a single bulk management upgrade history entry.
+ * @param {string} courseId - course identifier
+ * @param {number} rowId - row/error identifier
+ * @param {string} text - summary string
+ */
+const ResultsSummary = ({
+  rowId,
+  text,
+}) => (
+  <Hyperlink
+    href={lms.urls.bulkGradesUrlByRow(rowId)}
+    destination="www.edx.org"
+    target="_blank"
+    rel="noopener noreferrer"
+    showLaunchIcon={false}
+  >
+    <Icon src={Download} className="d-inline-block" />
+    {text}
+  </Hyperlink>
+);
+
+ResultsSummary.propTypes = {
+  rowId: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default ResultsSummary;

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
+
+import lms from 'data/services/lms';
+import ResultsSummary from './ResultsSummary';
+
+jest.mock('@edx/paragon', () => ({
+  Hyperlink: () => 'Hyperlink',
+  Icon: () => 'Icon',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Download: 'DownloadIcon',
+}));
+jest.mock('data/services/lms', () => ({
+  urls: {
+    bulkGradesUrlByRow: jest.fn((rowId) => ({ url: { rowId } })),
+  },
+}));
+
+describe('ResultsSummary component', () => {
+  const props = {
+    rowId: 42,
+    text: 'texty',
+  };
+  let el;
+  const assertions = [
+    'safe hyperlink with bulkGradesUrl with course and row id',
+    'download icon',
+    'results text',
+  ];
+  beforeEach(() => {
+    el = shallow(<ResultsSummary {...props} />);
+  });
+  test(`snapshot - ${assertions.join(', ')}`, () => {
+    expect(el).toMatchSnapshot();
+  });
+  test('Hyperlink has target="_blank" and rel="noopener noreferrer"', () => {
+    expect(el.props().target).toEqual('_blank');
+    expect(el.props().rel).toEqual('noopener noreferrer');
+  });
+  test('Hyperlink has href to bulkGradesUrl', () => {
+    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
+  });
+  test('displays Download Icon and text', () => {
+    const icon = el.childAt(0);
+    expect(icon.is(Icon)).toEqual(true);
+    expect(icon.props().src).toEqual(Download);
+    expect(el.childAt(1).text()).toEqual(props.text);
+  });
+});

src/components/BulkManagementHistoryView/__snapshots__/BulkManagementAlerts.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementAlerts component no errer, no upload success snapshot - bulkImportError closed, success closed 1`] = `
+<Fragment>
+  <Alert
+    dismissible={false}
+    show={false}
+    variant="danger"
+  />
+  <Alert
+    dismissible={false}
+    show={false}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
+  </Alert>
+</Fragment>
+`;
+
+exports[`BulkManagementAlerts component no errer, no upload success snapshot - danger alert open with bulkImportError, success alert open with messages.successDialog 1`] = `
+<Fragment>
+  <Alert
+    dismissible={false}
+    show={true}
+    variant="danger"
+  >
+    Oh noooooo
+  </Alert>
+  <Alert
+    dismissible={false}
+    show={true}
+    variant="success"
+  >
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
+  </Alert>
+</Fragment>
+`;

src/components/BulkManagementHistoryView/__snapshots__/HistoryTable.test.jsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
+Array [
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      blue.png
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="Da Bu Dee"
+      rowId={12}
+      text="Da ba daa"
+    />,
+    "timeUploaded": "65",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Eifel
+    </span>,
+  },
+  Object {
+    "filename": <span
+      className="wrap-text-in-cell"
+    >
+      allStar.jpg
+    </span>,
+    "resultsSummary": <ResultsSummary
+      courseId="rockstar"
+      rowId={2}
+      text="all that glitters is gold"
+    />,
+    "timeUploaded": "2000s?",
+    "user": <span
+      className="wrap-text-in-cell"
+    >
+      Smashmouth
+    </span>,
+  },
+]
+`;
+
+exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
+<DataTable
+  className="table-striped"
+  columns={
+    Array [
+      Object {
+        "Header": "Gradebook",
+        "accessor": "filename",
+        "columnSortable": false,
+        "width": "col-5",
+      },
+      Object {
+        "Header": "Download Summary",
+        "accessor": "resultsSummary",
+        "columnSortable": false,
+        "width": "col",
+      },
+      Object {
+        "Header": "Who",
+        "accessor": "user",
+        "columnSortable": false,
+        "width": "col-1",
+      },
+      Object {
+        "Header": "When",
+        "accessor": "timeUploaded",
+        "columnSortable": false,
+        "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}
+  itemCount={2}
+/>
+`;

src/components/BulkManagementHistoryView/__snapshots__/ResultsSummary.test.jsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl with course and row id, download icon, results text 1`] = `
+<Hyperlink
+  destination="www.edx.org"
+  href={
+    Object {
+      "url": Object {
+        "rowId": 42,
+      },
+    }
+  }
+  rel="noopener noreferrer"
+  showLaunchIcon={false}
+  target="_blank"
+>
+  <Icon
+    className="d-inline-block"
+    src="DownloadIcon"
+  />
+  texty
+</Hyperlink>
+`;

src/components/BulkManagementHistoryView/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementHistoryView component snapshot snapshot - loads heading from messages.BulkManagementHistoryView.heading, <BulkManagementAlerts />, <HistoryTable /> 1`] = `
+<div
+  className="bulk-management-history-view"
+>
+  <h4>
+    <FormattedMessage
+      defaultMessage="Bulk Management History"
+      description="Heading text for BulkManagement History Tab"
+      id="gradebook.BulkManagementHistoryView.heading"
+    />
+  </h4>
+  <p
+    className="help-text"
+  >
+    <FormattedMessage
+      defaultMessage="Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override."
+      description="Bulk Management History View help text"
+      id="gradebook.BulkManagementHistoryView"
+    />
+  </p>
+  <BulkManagementAlerts />
+  <HistoryTable />
+</div>
+`;

src/components/BulkManagementHistoryView/index.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import HistoryTable from './HistoryTable';
+
+/**
+ * <BulkManagementHistoryView />
+ * top-level view for managing uploads of bulk management override csvs.
+ */
+export const BulkManagementHistoryView = () => (
+  <div className="bulk-management-history-view">
+    <h4><FormattedMessage {...messages.heading} /></h4>
+    <p className="help-text">
+      <FormattedMessage {...messages.helpText} />
+    </p>
+    <BulkManagementAlerts />
+    <HistoryTable />
+  </div>
+);
+
+export default BulkManagementHistoryView;

src/components/BulkManagementHistoryView/index.test.jsx

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { BulkManagementHistoryView } from '.';
+import BulkManagementAlerts from './BulkManagementAlerts';
+import HistoryTable from './HistoryTable';
+import messages from './messages';
+
+jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
+jest.mock('./HistoryTable', () => 'HistoryTable');
+
+describe('BulkManagementHistoryView', () => {
+  describe('component', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<BulkManagementHistoryView />);
+    });
+    describe('snapshot', () => {
+      const snapshotSegments = [
+        'heading from messages.BulkManagementHistoryView.heading',
+        '<BulkManagementAlerts />',
+        '<HistoryTable />',
+      ];
+      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+        expect(el).toMatchSnapshot();
+      });
+      test('heading - h4 loaded from messages', () => {
+        const heading = el.find('h4');
+        expect(heading.getElement()).toEqual((
+          <h4>
+            <FormattedMessage {...messages.heading} />
+          </h4>
+        ));
+      });
+      test('heading, then alerts, then upload form, then table', () => {
+        expect(el.childAt(0).is('h4')).toEqual(true);
+        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
+        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
+      });
+    });
+  });
+});

src/components/BulkManagementHistoryView/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'gradebook.BulkManagementHistoryView.heading',
+    defaultMessage: 'Bulk Management History',
+    description: 'Heading text for BulkManagement History Tab',
+  },
+  helpText: {
+    id: 'gradebook.BulkManagementHistoryView',
+    defaultMessage: 'Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override.',
+    description: 'Bulk Management History View help text',
+  },
+  successDialog: {
+    id: 'gradebook.BulkManagementHistoryView.successDialog',
+    defaultMessage: 'CSV processing. File uploads may take several minutes to complete.',
+    description: 'Success Dialog message in BulkManagement Tab File Upload Form',
+  },
+});
+
+export default messages;

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

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

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

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;

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

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

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}
-            isOpen={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);

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

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

src/components/Gradebook/GradebookFilters/AssignmentGradeFilter/index.jsx

@@ -1,125 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Button } from '@edx/paragon';
-
-import * as gradesActions from 'data/actions/grades';
-import * as filterActions from 'data/actions/filters';
-import selectors from 'data/selectors';
-
-import PercentGroup from '../PercentGroup';
-
-export class AssignmentGradeFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleSetMax = this.handleSetMax.bind(this);
-    this.handleSetMin = this.handleSetMin.bind(this);
-  }
-
-  handleSubmit() {
-    const {
-      assignmentGradeMin,
-      assignmentGradeMax,
-    } = this.props.filterValues;
-
-    this.props.updateAssignmentLimits(
-      assignmentGradeMin,
-      assignmentGradeMax,
-    );
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-    this.props.updateQueryParams({
-      assignmentGradeMin,
-      assignmentGradeMax,
-    });
-  }
-
-  handleSetMax(event) {
-    this.props.setFilters({ assignmentGradeMax: event.target.value });
-  }
-
-  handleSetMin(event) {
-    this.props.setFilters({ assignmentGradeMin: event.target.value });
-  }
-
-  render() {
-    return (
-      <div className="grade-filter-inputs">
-        <PercentGroup
-          id="assignmentGradeMin"
-          label="Min Grade"
-          value={this.props.filterValues.assignmentGradeMin}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMin}
-        />
-        <PercentGroup
-          id="assignmentGradeMax"
-          label="Max Grade"
-          value={this.props.filterValues.assignmentGradeMax}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMax}
-        />
-        <div className="grade-filter-action">
-          <Button
-            type="submit"
-            variant="outline-secondary"
-            name="assignmentGradeMinMax"
-            disabled={!this.props.selectedAssignment}
-            onClick={this.handleSubmit}
-          >
-            Apply
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-AssignmentGradeFilter.defaultProps = {
-  selectedAssignment: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
-};
-
-AssignmentGradeFilter.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  filterValues: PropTypes.shape({
-    assignmentGradeMin: PropTypes.string.isRequired,
-    assignmentGradeMax: PropTypes.string.isRequired,
-  }).isRequired,
-  setFilters: PropTypes.func.isRequired,
-  updateQueryParams: PropTypes.func.isRequired,
-
-  // redux
-  getUserGrades: PropTypes.func.isRequired,
-  selectedAssignmentType: PropTypes.string,
-  selectedAssignment: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateAssignmentLimits: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => {
-  const { filters } = selectors;
-  return {
-    selectedAssignment: filters.selectedAssignmentLabel(state),
-    selectedAssignmentType: filters.assignmentType(state),
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  getUserGrades: gradesActions.fetchGrades,
-  updateAssignmentLimits: filterActions.updateAssignmentLimits,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AssignmentGradeFilter);

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

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

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

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

src/components/Gradebook/GradebookFilters/__snapshots__/test.jsx.snap

@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Assignments"
-  >
-    <div>
-      <Connect(AssignmentTypeFilter)
-        updateQueryParams={[MockFunction]}
-      />
-      <Connect(AssignmentFilter)
-        courseId="12345"
-        updateQueryParams={[MockFunction]}
-      />
-      <Connect(AssignmentGradeFilter)
-        courseId="12345"
-        filterValues={
-          Object {
-            "assignmentGradeMax": "90",
-            "assignmentGradeMin": "10",
-            "courseGradeMax": "80",
-            "courseGradeMin": "20",
-          }
-        }
-        setFilters={[MockFunction]}
-        updateQueryParams={[MockFunction]}
-      />
-    </div>
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Overall Grade"
-  >
-    <Connect(CourseGradeFilter)
-      courseId="12345"
-      filterValues={
-        Object {
-          "assignmentGradeMax": "90",
-          "assignmentGradeMin": "10",
-          "courseGradeMax": "80",
-          "courseGradeMin": "20",
-        }
-      }
-      setFilters={[MockFunction]}
-      updateQueryParams={[MockFunction]}
-    />
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Student Groups"
-  >
-    <Connect(StudentGroupsFilter)
-      courseId="12345"
-      updateQueryParams={[MockFunction]}
-    />
-  </Collapsible>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title="Include Course Team Members"
-  >
-    <Checkbox
-      checked={true}
-      onChange={[MockFunction handleIncludeTeamMembersChange]}
-    >
-      Include Course Team Members
-    </Checkbox>
-  </Collapsible>
-</React.Fragment>
-`;

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

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

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

src/components/Gradebook/StatusAlerts.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { StatusAlert } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import { closeBanner } from '../../data/actions/grades';
-
-export const maxCourseGradeInvalidMessage = 'Maximum course grade value must be between 0 and 100. ';
-export const minCourseGradeInvalidMessage = 'Minimum course grade value must be between 0 and 100. ';
-
-export class StatusAlerts extends React.Component {
-  get isCourseGradeFilterAlertOpen() {
-    const r = !this.props.isMinCourseGradeFilterValid
-    || !this.props.isMaxCourseGradeFilterValid;
-    return r;
-  }
-
-  get courseGradeFilterAlertDialogText() {
-    let dialogText = '';
-    if (!this.props.isMinCourseGradeFilterValid) {
-      dialogText += minCourseGradeInvalidMessage;
-    }
-    if (!this.props.isMaxCourseGradeFilterValid) {
-      dialogText += maxCourseGradeInvalidMessage;
-    }
-    return dialogText;
-  }
-
-  render() {
-    return (
-      <>
-        <StatusAlert
-          alertType="success"
-          dialog="The grade has been successfully edited. You may see a slight delay before updates appear in the Gradebook."
-          onClose={this.props.handleCloseSuccessBanner}
-          open={this.props.showSuccessBanner}
-        />
-        <StatusAlert
-          alertType="danger"
-          dialog={this.courseGradeFilterAlertDialogText}
-          dismissible={false}
-          open={this.isCourseGradeFilterAlertOpen}
-        />
-      </>
-    );
-  }
-}
-
-StatusAlerts.defaultProps = {
-  isMinCourseGradeFilterValid: true,
-  isMaxCourseGradeFilterValid: true,
-};
-
-StatusAlerts.propTypes = {
-  isMinCourseGradeFilterValid: PropTypes.bool,
-  isMaxCourseGradeFilterValid: PropTypes.bool,
-  // redux
-  handleCloseSuccessBanner: PropTypes.func.isRequired,
-  showSuccessBanner: PropTypes.bool.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  showSuccessBanner: selectors.grades.showSuccess(state),
-});
-
-export const mapDispatchToProps = {
-  handleCloseSuccessBanner: closeBanner,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(StatusAlerts);

src/components/Gradebook/StatusAlerts.test.jsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import {
-  StatusAlerts,
-  mapDispatchToProps,
-  mapStateToProps,
-  maxCourseGradeInvalidMessage,
-  minCourseGradeInvalidMessage,
-} from './StatusAlerts';
-import { closeBanner } from '../../data/actions/grades';
-
-jest.mock('@edx/paragon', () => ({
-  StatusAlert: 'StatusAlert',
-}));
-
-describe('StatusAlerts', () => {
-  let props = {
-    showSuccessBanner: true,
-    isMaxCourseGradeFilterValid: true,
-    isMinCourseGradeFilterValid: true,
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      handleCloseSuccessBanner: jest.fn().mockName('handleCloseSuccessBanner'),
-    };
-  });
-
-  describe('snapshots', () => {
-    let el;
-    it('basic snapshot', () => {
-      el = shallow(<StatusAlerts {...props} />);
-      const courseGradeFilterAlertDialogText = 'the quiCk brown does somEthing or other';
-      jest.spyOn(
-        el.instance(),
-        'courseGradeFilterAlertDialogText',
-        'get',
-      ).mockReturnValue(courseGradeFilterAlertDialogText);
-      expect(el.instance().render()).toMatchSnapshot();
-    });
-  });
-
-  describe('behavior', () => {
-    it.each([
-      [false, false],
-      [false, true],
-      [true, false],
-      [true, true],
-    ])('min + max course grade validity', (isMinCourseGradeFilterValid, isMaxCourseGradeFilterValid) => {
-      props = {
-        ...props,
-        isMinCourseGradeFilterValid,
-        isMaxCourseGradeFilterValid,
-      };
-      const el = shallow(<StatusAlerts {...props} />);
-      expect(
-        el.instance().isCourseGradeFilterAlertOpen,
-      ).toEqual(
-        !isMinCourseGradeFilterValid || !isMaxCourseGradeFilterValid,
-      );
-      if (!isMaxCourseGradeFilterValid) {
-        expect(
-          el.instance().courseGradeFilterAlertDialogText,
-        ).toEqual(
-          expect.stringContaining(maxCourseGradeInvalidMessage),
-        );
-      }
-      if (!isMinCourseGradeFilterValid) {
-        expect(
-          el.instance().courseGradeFilterAlertDialogText,
-        ).toEqual(
-          expect.stringContaining(minCourseGradeInvalidMessage),
-        );
-      }
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    it('showSuccessBanner', () => {
-      const arbitraryValue = 'AppleBananaCucumber';
-      const state = {
-        grades: {
-          showSuccess: arbitraryValue,
-        },
-      };
-      expect(mapStateToProps(state).showSuccessBanner).toBe(arbitraryValue);
-    });
-  });
-  describe('handleCloseSuccessBanner', () => {
-    test('handleCloseSuccessBanner', () => {
-      expect(
-        mapDispatchToProps.handleCloseSuccessBanner,
-      ).toEqual(
-        closeBanner,
-      );
-    });
-  });
-});

src/components/Gradebook/__snapshots__/SearchControls.test.jsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchControls Component Snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <h4>
-    Step 1: Filter the Grade Report
-  </h4>
-  <div
-    className="d-flex justify-content-between"
-  >
-    <Button
-      className="btn-primary align-self-start"
-      id="edit-filters-btn"
-      onClick={[MockFunction toggleFilterDrawer]}
-    >
-      <Icon
-        className="fa fa-filter"
-      />
-       Edit Filters
-    </Button>
-    <div>
-      <SearchField
-        inputLabel="Search for a learner"
-        onChange={[MockFunction onChange]}
-        onClear={[MockFunction onClear]}
-        onSubmit={[MockFunction onSubmit]}
-        value="alice"
-      />
-      <small
-        className="form-text text-muted search-help-text"
-      >
-        Search by username, email, or student key
-      </small>
-    </div>
-  </div>
-</React.Fragment>
-`;

src/components/Gradebook/__snapshots__/StatusAlerts.test.jsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusAlerts snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <StatusAlert
-    alertType="success"
-    dialog="The grade has been successfully edited. You may see a slight delay before updates appear in the Gradebook."
-    onClose={[MockFunction handleCloseSuccessBanner]}
-    open={true}
-  />
-  <StatusAlert
-    alertType="danger"
-    dialog="the quiCk brown does somEthing or other"
-    dismissible={false}
-    open={false}
-  />
-</React.Fragment>
-`;

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

src/components/GradebookFilters/AssignmentFilter/__snapshots__/test.jsx.snap

@@ -7,7 +7,13 @@ exports[`AssignmentFilter Component snapshots basic snapshot 1`] = `
   <SelectGroup
     disabled={false}
     id="assignment"
-    label="Assignment"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment"
+        description="Assignment filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentFilterLabel"
+      />
+    }
     onChange={[MockFunction handleChange]}
     options={
       Array [

src/components/GradebookFilters/AssignmentFilter/index.jsx

@@ -3,12 +3,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import * as gradesActions from 'data/actions/grades';
-import * as filterActions from 'data/actions/filters';
-import selectors from 'data/selectors';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
 import SelectGroup from '../SelectGroup';
 
+const { fetchGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
+
 export class AssignmentFilter extends React.Component {
   constructor(props) {
     super(props);
@@ -17,17 +22,14 @@ export class AssignmentFilter extends React.Component {
 
   handleChange(event) {
     const assignment = event.target.value;
-    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig => assig.label === assignment);
+    const selectedFilterOption = this.props.assignmentFilterOptions.find(
+      ({ label }) => label === assignment,
+    );
     const { type, id } = selectedFilterOption || {};
     const typedValue = { label: assignment, type, id };
     this.props.updateAssignmentFilter(typedValue);
     this.props.updateQueryParams({ assignment: id });
-    this.props.updateGradesIfAssignmentGradeFiltersSet(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
+    this.props.fetchGradesIfAssignmentGradeFiltersSet();
   }
 
   get options() {
@@ -47,7 +49,7 @@ export class AssignmentFilter extends React.Component {
       <div className="student-filters">
         <SelectGroup
           id="assignment"
-          label="Assignment"
+          label={<FormattedMessage {...messages.assignment} />}
           value={this.props.selectedAssignment}
           onChange={this.handleChange}
           disabled={this.props.assignmentFilterOptions.length === 0}
@@ -61,15 +63,10 @@ export class AssignmentFilter extends React.Component {
 AssignmentFilter.defaultProps = {
   assignmentFilterOptions: [],
   selectedAssignment: '',
-  selectedAssignmentType: '',
-  selectedCohort: null,
-  selectedTrack: null,
 };
 
 AssignmentFilter.propTypes = {
-  courseId: PropTypes.string.isRequired,
   updateQueryParams: PropTypes.func.isRequired,
-
   // redux
   assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
@@ -77,11 +74,8 @@ AssignmentFilter.propTypes = {
     type: PropTypes.string,
     id: PropTypes.string,
   })),
-  selectedAssignmentType: PropTypes.string,
   selectedAssignment: PropTypes.string,
-  selectedCohort: PropTypes.string,
-  selectedTrack: PropTypes.string,
-  updateGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
+  fetchGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
   updateAssignmentFilter: PropTypes.func.isRequired,
 };
 
@@ -97,8 +91,8 @@ export const mapStateToProps = (state) => {
 };
 
 export const mapDispatchToProps = {
-  updateAssignmentFilter: filterActions.updateAssignmentFilter,
-  updateGradesIfAssignmentGradeFiltersSet: gradesActions.updateGradesIfAssignmentGradeFiltersSet,
+  updateAssignmentFilter: actions.filters.update.assignment,
+  fetchGradesIfAssignmentGradeFiltersSet,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AssignmentFilter);

src/components/GradebookFilters/AssignmentFilter/test.jsx

@@ -2,14 +2,18 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import selectors from 'data/selectors';
-import { updateAssignmentFilter } from 'data/actions/filters';
-import { updateGradesIfAssignmentGradeFiltersSet } from 'data/actions/grades';
+import actions from 'data/actions';
+import { fetchGradesIfAssignmentGradeFiltersSet } from 'data/thunkActions/grades';
 import {
   AssignmentFilter,
   mapStateToProps,
   mapDispatchToProps,
 } from '.';
 
+jest.mock('data/thunkActions/grades', () => ({
+  updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
+}));
+
 jest.mock('data/selectors', () => ({
   /** Mocking to use passed state for validation purposes */
   filters: {
@@ -28,7 +32,6 @@ jest.mock('data/selectors', () => ({
 
 describe('AssignmentFilter', () => {
   let props = {
-    courseId: '12345',
     assignmentFilterOptions: [
       {
         label: 'assgN1',
@@ -43,17 +46,14 @@ describe('AssignmentFilter', () => {
         id: 'assgn_iD2',
       },
     ],
-    selectedAssignmentType: 'assgnFilterLabel1',
     selectedAssignment: 'assgN1',
-    selectedCohort: 'a cohort',
-    selectedTrack: 'a track',
   };
 
   beforeEach(() => {
     props = {
       ...props,
       updateQueryParams: jest.fn(),
-      updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
+      fetchGradesIfAssignmentGradeFiltersSet: jest.fn(),
       updateAssignmentFilter: jest.fn(),
     };
   });
@@ -69,7 +69,6 @@ describe('AssignmentFilter', () => {
           el = mount(<AssignmentFilter {...props} />);
           el.instance().handleChange(event);
         });
-
         it('calls props.updateAssignmentFilter with selection', () => {
           expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
             label: newAssgn,
@@ -83,14 +82,33 @@ describe('AssignmentFilter', () => {
               assignment: selected.id,
             });
           });
-        it('calls props.updateGradesIfAssignmentGradeFiltersSet', () => {
-          const method = props.updateGradesIfAssignmentGradeFiltersSet;
-          expect(method).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-          );
+        it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
+          const method = props.fetchGradesIfAssignmentGradeFiltersSet;
+          expect(method).toHaveBeenCalledWith();
+        });
+        describe('no selected option', () => {
+          const value = 'fake';
+          beforeEach(() => {
+            el = mount(<AssignmentFilter {...props} />);
+            el.instance().handleChange({ target: { value } });
+          });
+          it('calls props.updateAssignmentFilter with selection', () => {
+            expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
+              label: value,
+              type: undefined,
+              id: undefined,
+            });
+          });
+          it('calls props.updateQueryParams with selected assignment id',
+            () => {
+              expect(props.updateQueryParams).toHaveBeenCalledWith({
+                assignment: undefined,
+              });
+            });
+          it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
+            const method = props.fetchGradesIfAssignmentGradeFiltersSet;
+            expect(method).toHaveBeenCalledWith();
+          });
         });
       });
     });
@@ -129,43 +147,16 @@ describe('AssignmentFilter', () => {
         );
       });
     });
-    describe('selectedAssignmentType', () => {
-      it('is selected from filters.assignmentType', () => {
-        expect(
-          mapStateToProps(state).selectedAssignmentType,
-        ).toEqual(
-          selectors.filters.assignmentType(state),
-        );
-      });
-    });
-    describe('selectedCohort', () => {
-      it('is selected from filters.cohort', () => {
-        expect(
-          mapStateToProps(state).selectedCohort,
-        ).toEqual(
-          selectors.filters.cohort(state),
-        );
-      });
-    });
-    describe('selectedTrack', () => {
-      it('is selected from filters.track', () => {
-        expect(
-          mapStateToProps(state).selectedTrack,
-        ).toEqual(
-          selectors.filters.track(state),
-        );
-      });
-    });
   });
   describe('mapDispatchToProps', () => {
     test('updateAssignmentFilter', () => {
       expect(mapDispatchToProps.updateAssignmentFilter).toEqual(
-        updateAssignmentFilter,
+        actions.filters.update.assignment,
       );
     });
-    test('updateGradesIfAsssignmentGradeFiltersSet', () => {
-      const prop = mapDispatchToProps.updateGradesIfAssignmentGradeFiltersSet;
-      expect(prop).toEqual(updateGradesIfAssignmentGradeFiltersSet);
+    test('fetchGradesIfAsssignmentGradeFiltersSet', () => {
+      const prop = mapDispatchToProps.fetchGradesIfAssignmentGradeFiltersSet;
+      expect(prop).toEqual(fetchGradesIfAssignmentGradeFiltersSet);
     });
   });
 });

src/components/GradebookFilters/AssignmentGradeFilter/__snapshots__/test.jsx.snap

@@ -7,21 +7,33 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
   <PercentGroup
     disabled={true}
     id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
     onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
   />
   <PercentGroup
     disabled={true}
     id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
     onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
   />
   <div
     className="grade-filter-action"
   >
-    <Button
+    <ForwardRef
       active={false}
       disabled={true}
       name="assignmentGradeMinMax"
@@ -30,7 +42,7 @@ exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled i
       variant="outline-secondary"
     >
       Apply
-    </Button>
+    </ForwardRef>
   </div>
 </div>
 `;
@@ -42,21 +54,33 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
   <PercentGroup
     disabled={false}
     id="assignmentGradeMin"
-    label="Min Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Min Grade"
+        description="Min-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.minGradeFilterLabel"
+      />
+    }
     onChange={[MockFunction handleSetMin]}
-    value="1"
+    value="2"
   />
   <PercentGroup
     disabled={false}
     id="assignmentGradeMax"
-    label="Max Grade"
+    label={
+      <FormattedMessage
+        defaultMessage="Max Grade"
+        description="Max-grade filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.maxGradeFilterLabel"
+      />
+    }
     onChange={[MockFunction handleSetMax]}
-    value="100"
+    value="98"
   />
   <div
     className="grade-filter-action"
   >
-    <Button
+    <ForwardRef
       active={false}
       disabled={false}
       name="assignmentGradeMinMax"
@@ -65,7 +89,7 @@ exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
       variant="outline-secondary"
     >
       Apply
-    </Button>
+    </ForwardRef>
   </div>
 </div>
 `;

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

@@ -0,0 +1,103 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import PercentGroup from '../PercentGroup';
+
+export class AssignmentGradeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSetMax = this.handleSetMax.bind(this);
+    this.handleSetMin = this.handleSetMin.bind(this);
+  }
+
+  handleSubmit() {
+    this.props.updateAssignmentLimits(this.props.localAssignmentLimits);
+    this.props.fetchGrades();
+    this.props.updateQueryParams(this.props.localAssignmentLimits);
+  }
+
+  handleSetMax({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMax: value });
+  }
+
+  handleSetMin({ target: { value } }) {
+    this.props.setFilter({ assignmentGradeMin: value });
+  }
+
+  render() {
+    const {
+      localAssignmentLimits: { assignmentGradeMax, assignmentGradeMin },
+    } = this.props;
+    return (
+      <div className="grade-filter-inputs">
+        <PercentGroup
+          id="assignmentGradeMin"
+          label={<FormattedMessage {...messages.minGrade} />}
+          value={assignmentGradeMin}
+          disabled={!this.props.selectedAssignment}
+          onChange={this.handleSetMin}
+        />
+        <PercentGroup
+          id="assignmentGradeMax"
+          label={<FormattedMessage {...messages.maxGrade} />}
+          value={assignmentGradeMax}
+          disabled={!this.props.selectedAssignment}
+          onChange={this.handleSetMax}
+        />
+        <div className="grade-filter-action">
+          <Button
+            type="submit"
+            variant="outline-secondary"
+            name="assignmentGradeMinMax"
+            disabled={!this.props.selectedAssignment}
+            onClick={this.handleSubmit}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+AssignmentGradeFilter.defaultProps = {
+  selectedAssignment: '',
+};
+
+AssignmentGradeFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // redux
+  fetchGrades: PropTypes.func.isRequired,
+  localAssignmentLimits: PropTypes.shape({
+    assignmentGradeMax: PropTypes.string,
+    assignmentGradeMin: PropTypes.string,
+  }).isRequired,
+  selectedAssignment: PropTypes.string,
+  setFilter: PropTypes.func.isRequired,
+  updateAssignmentLimits: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  localAssignmentLimits: selectors.app.assignmentGradeLimits(state),
+  selectedAssignment: selectors.filters.selectedAssignmentLabel(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  setFilter: actions.app.setLocalFilter,
+  updateAssignmentLimits: actions.filters.update.assignmentLimits,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentGradeFilter);

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

src/components/GradebookFilters/AssignmentTypeFilter/__snapshots__/test.jsx.snap

@@ -7,7 +7,13 @@ exports[`AssignmentTypeFilter Component snapshots SelectGroup disabled if no ass
   <SelectGroup
     disabled={true}
     id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
     onChange={[MockFunction handleChange]}
     options={
       Array [
@@ -40,7 +46,13 @@ exports[`AssignmentTypeFilter Component snapshots smoke test 1`] = `
   <SelectGroup
     disabled={false}
     id="assignment-types"
-    label="Assignment Types"
+    label={
+      <FormattedMessage
+        defaultMessage="Assignment Types"
+        description="Assignment Types filter select label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentTypesLabel"
+      />
+    }
     onChange={[MockFunction handleChange]}
     options={
       Array [

src/components/GradebookFilters/AssignmentTypeFilter/index.jsx

@@ -3,10 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import * as gradesActions from 'data/actions/grades';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import selectors from 'data/selectors';
+import actions from 'data/actions';
 
 import SelectGroup from '../SelectGroup';
+import messages from '../messages';
 
 export class AssignmentTypeFilter extends React.Component {
   constructor(props) {
@@ -35,7 +38,7 @@ export class AssignmentTypeFilter extends React.Component {
       <div className="student-filters">
         <SelectGroup
           id="assignment-types"
-          label="Assignment Types"
+          label={<FormattedMessage {...messages.assignmentTypes} />}
           value={this.props.selectedAssignmentType}
           onChange={this.handleChange}
           disabled={this.props.assignmentFilterOptions.length === 0}
@@ -72,7 +75,7 @@ export const mapStateToProps = (state) => ({
 });
 
 export const mapDispatchToProps = {
-  filterAssignmentType: gradesActions.filterAssignmentType,
+  filterAssignmentType: actions.filters.update.assignmentType,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AssignmentTypeFilter);

src/components/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,
       );
     });
   });

src/components/GradebookFilters/CourseGradeFilter/__snapshots__/test.jsx.snap

@@ -6,16 +6,26 @@ exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
     className="grade-filter-inputs"
   >
     <PercentGroup
-      disabled={false}
       id="minimum-grade"
-      label="Min Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Min Grade"
+          description="Min-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.minGradeFilterLabel"
+        />
+      }
       onChange={[MockFunction handleUpdateMin]}
       value="5"
     />
     <PercentGroup
-      disabled={false}
       id="maximum-grade"
-      label="Max Grade"
+      label={
+        <FormattedMessage
+          defaultMessage="Max Grade"
+          description="Max-grade filter select label in Gradebook Filters"
+          id="gradebook.GradebookFilters.maxGradeFilterLabel"
+        />
+      }
       onChange={[MockFunction handleUpdateMax]}
       value="92"
     />

src/components/GradebookFilters/CourseGradeFilter/index.jsx

@@ -0,0 +1,103 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import PercentGroup from '../PercentGroup';
+
+export class CourseGradeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleApplyClick = this.handleApplyClick.bind(this);
+    this.handleUpdateMin = this.handleUpdateMin.bind(this);
+    this.handleUpdateMax = this.handleUpdateMax.bind(this);
+    this.updateCourseGradeFilters = this.updateCourseGradeFilters.bind(this);
+  }
+
+  handleApplyClick() {
+    if (this.props.areLimitsValid) {
+      this.updateCourseGradeFilters();
+    }
+  }
+
+  handleUpdateMin({ target: { value } }) {
+    this.props.setLocalFilter({ courseGradeMin: value });
+  }
+
+  handleUpdateMax({ target: { value } }) {
+    this.props.setLocalFilter({ courseGradeMax: value });
+  }
+
+  updateCourseGradeFilters() {
+    this.props.updateFilter(this.props.localCourseLimits);
+    this.props.fetchGrades();
+    this.props.updateQueryParams(this.props.localCourseLimits);
+  }
+
+  render() {
+    const {
+      localCourseLimits: { courseGradeMin, courseGradeMax },
+    } = this.props;
+    return (
+      <>
+        <div className="grade-filter-inputs">
+          <PercentGroup
+            id="minimum-grade"
+            label={<FormattedMessage {...messages.minGrade} />}
+            value={courseGradeMin}
+            onChange={this.handleUpdateMin}
+          />
+          <PercentGroup
+            id="maximum-grade"
+            label={<FormattedMessage {...messages.maxGrade} />}
+            value={courseGradeMax}
+            onChange={this.handleUpdateMax}
+          />
+        </div>
+        <div className="grade-filter-action">
+          <Button
+            variant="outline-secondary"
+            onClick={this.handleApplyClick}
+          >
+            Apply
+          </Button>
+        </div>
+      </>
+    );
+  }
+}
+
+CourseGradeFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // Redux
+  areLimitsValid: PropTypes.bool.isRequired,
+  fetchGrades: PropTypes.func.isRequired,
+  localCourseLimits: PropTypes.shape({
+    courseGradeMin: PropTypes.string.isRequired,
+    courseGradeMax: PropTypes.string.isRequired,
+  }).isRequired,
+  setLocalFilter: PropTypes.func.isRequired,
+  updateFilter: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  areLimitsValid: selectors.app.areCourseGradeFiltersValid(state),
+  localCourseLimits: selectors.app.courseGradeLimits(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  setLocalFilter: actions.app.setLocalFilter,
+  updateFilter: actions.filters.update.courseGradeLimits,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CourseGradeFilter);

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

src/components/GradebookFilters/GradebookFilters.scss

@@ -0,0 +1,6 @@
+.filter-sidebar-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px;
+}

src/components/GradebookFilters/PercentGroup.jsx

@@ -30,7 +30,7 @@ PercentGroup.defaultProps = {
 };
 PercentGroup.propTypes = {
   id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

src/components/GradebookFilters/SelectGroup.jsx

@@ -23,7 +23,7 @@ const SelectGroup = ({
 );
 SelectGroup.propTypes = {
   id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

src/components/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>,
+]
+`;

src/components/GradebookFilters/StudentGroupsFilter/index.jsx

@@ -0,0 +1,152 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+import messages from '../messages';
+import SelectGroup from '../SelectGroup';
+
+export const optionFactory = ({ data, defaultOption, key }) => [
+  <option value={defaultOption} key="0">{defaultOption}</option>,
+  ...data.map(
+    entry => (<option key={entry[key]} value={entry.name}>{entry.name}</option>),
+  ),
+];
+
+export class StudentGroupsFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.mapCohortsEntries = this.mapCohortsEntries.bind(this);
+    this.mapTracksEntries = this.mapTracksEntries.bind(this);
+    this.updateCohorts = this.updateCohorts.bind(this);
+    this.updateTracks = this.updateTracks.bind(this);
+  }
+
+  mapCohortsEntries() {
+    return optionFactory({
+      data: this.props.cohorts,
+      defaultOption: this.translate(messages.cohortAll),
+      key: 'id',
+    });
+  }
+
+  mapTracksEntries() {
+    return optionFactory({
+      data: this.props.tracks,
+      defaultOption: this.translate(messages.trackAll),
+      key: 'slug',
+    });
+  }
+
+  selectedTrackSlugFromEvent({ target: { value } }) {
+    const selectedTrackItem = this.props.tracksByName[value];
+    return selectedTrackItem ? selectedTrackItem.slug : null;
+  }
+
+  selectedCohortIdFromEvent({ target: { value } }) {
+    const selectedCohortItem = this.props.cohortsByName[value];
+    return selectedCohortItem ? selectedCohortItem.id.toString() : null;
+  }
+
+  updateTracks(event) {
+    const track = this.selectedTrackSlugFromEvent(event);
+    this.props.updateQueryParams({ track });
+    this.props.updateTrack(track);
+    this.props.fetchGrades();
+  }
+
+  updateCohorts(event) {
+    const cohort = this.selectedCohortIdFromEvent(event);
+    this.props.updateQueryParams({ cohort });
+    this.props.updateCohort(cohort);
+    this.props.fetchGrades();
+  }
+
+  translate(message) {
+    return this.props.intl.formatMessage(message);
+  }
+
+  render() {
+    return (
+      <>
+        <SelectGroup
+          id="Tracks"
+          label={this.translate(messages.tracks)}
+          value={this.props.selectedTrackEntry.name}
+          onChange={this.updateTracks}
+          options={this.mapTracksEntries()}
+        />
+        <SelectGroup
+          id="Cohorts"
+          label={this.translate(messages.cohorts)}
+          value={this.props.selectedCohortEntry.name}
+          disabled={this.props.cohorts.length === 0}
+          onChange={this.updateCohorts}
+          options={this.mapCohortsEntries()}
+        />
+      </>
+    );
+  }
+}
+
+StudentGroupsFilter.defaultProps = {
+  cohorts: [],
+  cohortsByName: {},
+  selectedCohortEntry: { name: '' },
+  selectedTrackEntry: { name: '' },
+  tracks: [],
+  tracksByName: {},
+};
+
+StudentGroupsFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // injected
+  intl: intlShape.isRequired,
+
+  // redux
+  cohorts: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  })),
+  cohortsByName: PropTypes.objectOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  })),
+  fetchGrades: PropTypes.func.isRequired,
+  selectedTrackEntry: PropTypes.shape({ name: PropTypes.string }),
+  selectedCohortEntry: PropTypes.shape({ name: PropTypes.string }),
+  tracks: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    slug: PropTypes.string,
+  })),
+  tracksByName: PropTypes.objectOf(PropTypes.shape({
+    name: PropTypes.string,
+    slug: PropTypes.string,
+  })),
+  updateCohort: PropTypes.func.isRequired,
+  updateTrack: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  cohorts: selectors.cohorts.allCohorts(state),
+  cohortsByName: selectors.cohorts.cohortsByName(state),
+  selectedCohortEntry: selectors.root.selectedCohortEntry(state),
+  selectedTrackEntry: selectors.root.selectedTrackEntry(state),
+  tracks: selectors.tracks.allTracks(state),
+  tracksByName: selectors.tracks.tracksByName(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGrades: thunkActions.grades.fetchGrades,
+  updateCohort: actions.filters.update.cohort,
+  updateTrack: actions.filters.update.track,
+};
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter));

src/components/GradebookFilters/StudentGroupsFilter/test.jsx

@@ -3,24 +3,45 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { fetchGrades } from 'data/actions/grades';
+import { fetchGrades } from 'data/thunkActions/grades';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
 import {
+  optionFactory,
   StudentGroupsFilter,
   mapStateToProps,
   mapDispatchToProps,
 } from '.';
 
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      selectedCohortEntry: jest.fn(state => ({ selectedCohortEntry: state })),
+      selectedTrackEntry: jest.fn(state => ({ selectedTrackEntry: state })),
+    },
+    cohorts: {
+      allCohorts: jest.fn(state => ({ allCohorts: state })),
+      cohortsByName: jest.fn(state => ({ cohortsByName: state })),
+    },
+    tracks: {
+      allTracks: jest.fn(state => ({ allTracks: state })),
+      tracksByName: jest.fn(state => ({ tracksByName: state })),
+    },
+  },
+}));
+
+jest.mock('data/thunkActions/grades', () => ({
+  fetchGrades: jest.fn(),
+}));
+
 describe('StudentGroupsFilter', () => {
   let props = {
-    courseId: '12345',
     cohorts: [
       { name: 'cohorT1', id: 8001 },
       { name: 'cohorT2', id: 8002 },
       { name: 'cohorT3', id: 8003 },
     ],
-    selectedAssignmentType: 'assignMent type 1',
-    selectedCohort: '8003',
-    selectedTrack: 'TracK2_slug',
     tracks: [
       { name: 'TracK1', slug: 'TracK1_slug' },
       { name: 'TracK2', slug: 'TracK2_slug' },
@@ -28,15 +49,40 @@ describe('StudentGroupsFilter', () => {
     ],
   };
 
-  beforeEach(() => {
-    props = {
-      ...props,
-      getUserGrades: jest.fn(),
-      updateQueryParams: jest.fn(),
-    };
+  describe('optionFactory', () => {
+    it('returns a list of options with a default first entry', () => {
+      const data = [{ cMark: 'rainbow', name: 'RDash' }, { cMark: 'balloons', name: 'PPie' }];
+      const defaultOption = 'All-Ponies';
+      const key = 'cMark';
+      const options = optionFactory({ data, defaultOption, key });
+      expect(options).toMatchSnapshot();
+    });
   });
 
   describe('Component', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        intl: { formatMessage: (msg) => msg.defaultMessage },
+        cohortsByName: {
+          [props.cohorts[0].name]: props.cohorts[0],
+          [props.cohorts[1].name]: props.cohorts[1],
+          [props.cohorts[2].name]: props.cohorts[2],
+        },
+        tracksByName: {
+          [props.tracks[0].name]: props.tracks[0],
+          [props.tracks[1].name]: props.tracks[1],
+          [props.tracks[2].name]: props.tracks[2],
+        },
+        fetchGrades: jest.fn(),
+        selectedCohortEntry: props.cohorts[2],
+        selectedTrackEntry: props.tracks[1],
+        updateQueryParams: jest.fn(),
+        updateCohort: jest.fn().mockName('updateCohort'),
+        updateTrack: jest.fn().mockName('updateTrack'),
+      };
+    });
+
     describe('snapshots', () => {
       let el;
       beforeEach(() => {
@@ -72,34 +118,6 @@ describe('StudentGroupsFilter', () => {
       beforeEach(() => {
         el = shallow(<StudentGroupsFilter {...props} />);
       });
-      describe('mapSelectedCohortEntry', () => {
-        it('returns the name of the cohort with the same numerical id', () => {
-          // Because selectedCohort is the id of cohorts[2]
-          expect(el.instance().mapSelectedCohortEntry()).toEqual(
-            props.cohorts[2].name,
-          );
-        });
-        it('returns "Cohorts" if no cohort is found', () => {
-          el.setProps({ selectedCohort: '999' });
-          expect(el.instance().mapSelectedCohortEntry()).toEqual(
-            'Cohorts',
-          );
-        });
-      });
-      describe('mapSelectedTrackEntry', () => {
-        it('returns the name of the track with the selected slug', () => {
-          // Because selectedTrack is the slug of tracks[1]
-          expect(el.instance().mapSelectedTrackEntry()).toEqual(
-            props.tracks[1].name,
-          );
-        });
-        it('returns "Tracks" if no track is found', () => {
-          el.setProps({ selectedTrack: 'FAKE' });
-          expect(el.instance().mapSelectedTrackEntry()).toEqual(
-            'Tracks',
-          );
-        });
-      });
       describe('selectedCohortIdFromEvent', () => {
         it('returns the id of the cohort with the name matching the event', () => {
           expect(
@@ -142,13 +160,11 @@ describe('StudentGroupsFilter', () => {
           ).mockReturnValue(selectedSlug);
           el.instance().updateTracks({ target: {} });
         });
-        it('calls getUserGrades with selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            props.selectedCohort,
-            selectedSlug,
-            props.selectedAssignmentType,
-          );
+        it('calls updateTrack with new value', () => {
+          expect(props.updateTrack).toHaveBeenCalledWith(selectedSlug);
+        });
+        it('calls fetchGrades', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
         });
         it('updates queryParams with track value', () => {
           expect(props.updateQueryParams).toHaveBeenCalledWith({
@@ -166,13 +182,11 @@ describe('StudentGroupsFilter', () => {
           ).mockReturnValue(selectedId);
           el.instance().updateCohorts({ target: {} });
         });
-        it('calls getUserGrades with selection', () => {
-          expect(props.getUserGrades).toHaveBeenCalledWith(
-            props.courseId,
-            selectedId,
-            props.selectedTrack,
-            props.selectedAssignmentType,
-          );
+        it('calls updateCohort with new value', () => {
+          expect(props.updateCohort).toHaveBeenCalledWith(selectedId);
+        });
+        it('calls fetchGrades', () => {
+          expect(props.fetchGrades).toHaveBeenCalledWith();
         });
         it('updates queryParams with cohort value', () => {
           expect(props.updateQueryParams).toHaveBeenCalledWith({
@@ -183,56 +197,43 @@ describe('StudentGroupsFilter', () => {
     });
   });
   describe('mapStateToProps', () => {
-    const state = {
-      cohorts: { results: ['some', 'cohorts'] },
-      filters: {
-        cohort: 'COHort',
-        track: 'TRacK',
-        assignmentType: 'TYPe',
-      },
-      tracks: { results: ['a', 'few', 'tracks'] },
-    };
-    describe('cohorts', () => {
-      test('drawn from cohorts.results', () => {
-        expect(mapStateToProps(state).cohorts).toEqual(
-          state.cohorts.results,
-        );
-      });
+    const testState = { h: 'e', l: 'l', o: 'oooooooooo' };
+    let mappedProps;
+    beforeAll(() => {
+      mappedProps = mapStateToProps(testState);
     });
-    describe('selectedAssignmentType', () => {
-      test('drawn from filters.assignmentType', () => {
-        expect(mapStateToProps(state).selectedAssignmentType).toEqual(
-          state.filters.assignmentType,
-        );
-      });
+    test('cohorts from selectors.cohorts.allCohorts', () => {
+      expect(mappedProps.cohorts).toEqual(selectors.cohorts.allCohorts(testState));
     });
-    describe('selectedCohort', () => {
-      test('drawn from filters.cohort', () => {
-        expect(mapStateToProps(state).selectedCohort).toEqual(
-          state.filters.cohort,
-        );
-      });
+    test('cohortsByName from selectors.cohorts.cohortsByName', () => {
+      expect(mappedProps.cohortsByName).toEqual(selectors.cohorts.cohortsByName(testState));
     });
-    describe('selectedTrack', () => {
-      test('drawn from filters.track', () => {
-        expect(mapStateToProps(state).selectedTrack).toEqual(
-          state.filters.track,
-        );
-      });
+    test('selectedCohortEntry from selectors.root.selectedCohortEntry', () => {
+      expect(
+        mappedProps.selectedCohortEntry,
+      ).toEqual(selectors.root.selectedCohortEntry(testState));
     });
-    describe('tracks', () => {
-      test('drawn from tracks.results', () => {
-        expect(mapStateToProps(state).tracks).toEqual(
-          state.tracks.results,
-        );
-      });
+    test('selectedTrackEntry from selectors.root.selectedTrackEntry', () => {
+      expect(
+        mappedProps.selectedTrackEntry,
+      ).toEqual(selectors.root.selectedTrackEntry(testState));
+    });
+    test('tracks from selectors.tracks.allTracks', () => {
+      expect(mappedProps.tracks).toEqual(selectors.tracks.allTracks(testState));
+    });
+    test('tracksByName from selectors.tracks.tracksByName', () => {
+      expect(mappedProps.tracksByName).toEqual(selectors.tracks.tracksByName(testState));
     });
   });
   describe('mapDispatchToProps', () => {
-    describe('getUserGrades', () => {
-      test('from fetchGrades', () => {
-        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
-      });
+    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
+      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
+    });
+    test('updateCohort from actions.filters.update.cohort', () => {
+      expect(mapDispatchToProps.updateCohort).toEqual(actions.filters.update.cohort);
+    });
+    test('updateTrack from actions.filters.update.track', () => {
+      expect(mapDispatchToProps.updateTrack).toEqual(actions.filters.update.track);
     });
   });
 });

src/components/GradebookFilters/__snapshots__/test.jsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
+<React.Fragment>
+  <div
+    className="filter-sidebar-header"
+  >
+    <h2>
+      <Icon
+        className="fa fa-filter"
+      />
+    </h2>
+    <IconButton
+      alt="Close Filters"
+      aria-label="Close Filters"
+      className="p-1"
+      iconAs="Icon"
+      onClick={[MockFunction this.props.closeMenu]}
+      src="paragon.icons.Close"
+    />
+  </div>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Assignments"
+        description="Assignment filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentsFilterLabel"
+      />
+    }
+  >
+    <div>
+      <AssignmentTypeFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
+      />
+      <AssignmentFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
+      />
+      <AssignmentGradeFilter
+        updateQueryParams={[MockFunction this.props.updateQueryParams]}
+      />
+    </div>
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Overall Grade"
+        description="Overall Grade filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.overallGradeFilterLabel"
+      />
+    }
+  >
+    <CourseGradeFilter
+      updateQueryParams={[MockFunction this.props.updateQueryParams]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Student Groups"
+        description="Student Groups filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.studentGroupsFilterLabel"
+      />
+    }
+  >
+    <StudentGroupsFilter
+      updateQueryParams={[MockFunction this.props.updateQueryParams]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
+    }
+  >
+    <Checkbox
+      checked={true}
+      onChange={[MockFunction handleIncludeTeamMembersChange]}
+    >
+      <FormattedMessage
+        defaultMessage="Include Course Team Members"
+        description="Include Course Team Members filter label in Gradebook Filters"
+        id="gradebook.GradebookFilters.includeCourseTeamMembersFilterLabel"
+      />
+    </Checkbox>
+  </Collapsible>
+</React.Fragment>
+`;

src/components/GradebookFilters/index.jsx

@@ -3,11 +3,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Collapsible, Form } from '@edx/paragon';
+import {
+  Collapsible,
+  Icon,
+  IconButton,
+  Form,
+} from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import * as filterActions from 'data/actions/filters';
+import actions from 'data/actions';
 import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
 
+import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
 import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
@@ -27,65 +36,61 @@ export class GradebookFilters extends React.Component {
     const includeCourseRoleMembers = event.target.checked;
     this.setState({ includeCourseRoleMembers });
     this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
+    this.props.fetchGrades();
     this.props.updateQueryParams({ includeCourseRoleMembers });
   }
 
   collapsibleGroup = (title, content) => (
-    <Collapsible title={title} defaultOpen className="filter-group mb-3">
+    <Collapsible
+      title={<FormattedMessage {...title} />}
+      defaultOpen
+      className="filter-group mb-3"
+    >
       {content}
     </Collapsible>
   );
 
   render() {
     const {
-      courseId,
-      filterValues,
-      setFilters,
+      intl,
       updateQueryParams,
     } = this.props;
     return (
       <>
-        {this.collapsibleGroup('Assignments', (
+        <div className="filter-sidebar-header">
+          <h2><Icon className="fa fa-filter" /></h2>
+          <IconButton
+            className="p-1"
+            onClick={this.props.closeMenu}
+            iconAs={Icon}
+            src={Close}
+            alt={intl.formatMessage(messages.closeFilters)}
+            aria-label={intl.formatMessage(messages.closeFilters)}
+          />
+        </div>
+
+        {this.collapsibleGroup(messages.assignments, (
           <div>
-            <AssignmentTypeFilter
-              updateQueryParams={updateQueryParams}
-            />
-            <AssignmentFilter
-              courseId={courseId}
-              updateQueryParams={updateQueryParams}
-            />
-            <AssignmentGradeFilter
-              {...{
-                courseId,
-                filterValues,
-                setFilters,
-                updateQueryParams,
-              }}
-            />
+            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+            <AssignmentFilter updateQueryParams={updateQueryParams} />
+            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
           </div>
         ))}
-        {this.collapsibleGroup('Overall Grade', (
-          <CourseGradeFilter
-            {...{
-              filterValues,
-              setFilters,
-              courseId,
-              updateQueryParams,
-            }}
-          />
+
+        {this.collapsibleGroup(messages.overallGrade, (
+          <CourseGradeFilter updateQueryParams={updateQueryParams} />
         ))}
-        {this.collapsibleGroup('Student Groups', (
-          <StudentGroupsFilter
-            courseId={courseId}
-            updateQueryParams={updateQueryParams}
-          />
+
+        {this.collapsibleGroup(messages.studentGroups, (
+          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
         ))}
-        {this.collapsibleGroup('Include Course Team Members', (
+
+        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
           <Form.Checkbox
             checked={this.state.includeCourseRoleMembers}
             onChange={this.handleIncludeTeamMembersChange}
           >
-            Include Course Team Members
+            <FormattedMessage {...messages.includeCourseTeamMembers} />
           </Form.Checkbox>
         ))}
       </>
@@ -96,17 +101,14 @@ GradebookFilters.defaultProps = {
   includeCourseRoleMembers: false,
 };
 GradebookFilters.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  filterValues: PropTypes.shape({
-    assignmentGradeMin: PropTypes.string,
-    assignmentGradeMax: PropTypes.string,
-    courseGradeMin: PropTypes.string,
-    courseGradeMax: PropTypes.string,
-  }).isRequired,
-  setFilters: PropTypes.func.isRequired,
+  updateQueryParams: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  closeMenu: PropTypes.func.isRequired,
+  fetchGrades: PropTypes.func.isRequired,
   includeCourseRoleMembers: PropTypes.bool,
   updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
-  updateQueryParams: PropTypes.func.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -114,7 +116,9 @@ export const mapStateToProps = (state) => ({
 });
 
 export const mapDispatchToProps = {
-  updateIncludeCourseRoleMembers: filterActions.updateIncludeCourseRoleMembers,
+  closeMenu: thunkActions.app.filterMenu.close,
+  fetchGrades: thunkActions.grades.fetchGrades,
+  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(GradebookFilters);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));

src/components/GradebookFilters/messages.js

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

src/components/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,46 @@ jest.mock('@edx/paragon', () => ({
   Form: {
     Checkbox: 'Checkbox',
   },
+  Icon: 'Icon',
+  IconButton: 'IconButton',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Close: 'paragon.icons.Close',
+}));
+jest.mock('./AssignmentTypeFilter', () => 'AssignmentTypeFilter');
+jest.mock('./AssignmentFilter', () => 'AssignmentFilter');
+jest.mock('./AssignmentGradeFilter', () => 'AssignmentGradeFilter');
+jest.mock('./CourseGradeFilter', () => 'CourseGradeFilter');
+jest.mock('./StudentGroupsFilter', () => 'StudentGroupsFilter');
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    filters: {
+      includeCourseRoleMembers: jest.fn((state) => ({ includeCourseRoleMembers: state })),
+    },
+  },
+}));
+jest.mock('data/thunkActions', () => ({
+  __esModule: true,
+  default: {
+    app: { filterMenu: { close: jest.fn() } },
+    grades: { fetchGrades: jest.fn() },
+  },
 }));
 
 describe('GradebookFilters', () => {
   let props = {
-    courseId: '12345',
-    filterValues: {
-      assignmentGradeMin: '10',
-      assignmentGradeMax: '90',
-      courseGradeMin: '20',
-      courseGradeMax: '80',
-    },
     includeCourseRoleMembers: true,
   };
 
   beforeEach(() => {
     props = {
       ...props,
-      updateQueryParams: jest.fn(),
+      intl: { formatMessage: (msg) => msg.defaultMessage },
+      closeMenu: jest.fn().mockName('this.props.closeMenu'),
+      fetchGrades: jest.fn(),
       updateIncludeCourseRoleMembers: jest.fn(),
-      setFilters: jest.fn(),
+      updateQueryParams: jest.fn().mockName('this.props.updateQueryParams'),
     };
   });
 
@@ -82,24 +104,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,
-      );
-    });
-  });
 });

src/components/GradebookHeader/__snapshots__/test.jsx.snap

@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookHeader component snapshots default values (grades frozen, cannot view). unauthorized warning, but no grades frozen warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots grades frozen, can view. grades frozen warning but no unauthorized warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots grades frozen, cannot view unauthorized warning, and grades frozen warning. 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="The grades for this course are now frozen. Editing of grades is no longer allowed."
+      description="Warning message in Gradebook Header for frozen messages"
+      id="gradebook.GradebookHeader.frozenWarning"
+    />
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is bulkManagementHistory view toggle view button to grades 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="Return to Gradebook"
+        description="Button text for button navigating to Grades view."
+        id="gradebook.GradebookHeader.toGradesView"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component snapshots show bulk management, active view is grades view toggle view button to activity log 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="http://localhost:18000/courses/fakeID/instructor"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    <FormattedMessage
+      defaultMessage="Back to Dashboard"
+      description="Button text to take user back to LMS dashboard in Gradebook Header"
+      id="gradebook.GradebookHeader.backButton"
+    />
+  </a>
+  <h1>
+    <FormattedMessage
+      defaultMessage="Gradebook"
+      description="Top-level app title in Gradebook Header component"
+      id="gradebook.GradebookHeader.appLabel"
+    />
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h3>
+      fakeID
+    </h3>
+    <Button
+      onClick={[MockFunction this.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      <FormattedMessage
+        defaultMessage="View Bulk Management History"
+        description="Button text for button navigating to Bulk Managment Activity Log"
+        id="gradebook.GradebookHeader.toActivityLogButton"
+      />
+    </Button>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    <FormattedMessage
+      defaultMessage="You are not authorized to view the gradebook for this course."
+      description="Warning message in Gradebook Header when user is not allowed to view the app"
+      id="gradebook.GradebookHeader.unauthorizedWarning"
+    />
+  </div>
+</div>
+`;

src/components/GradebookHeader/index.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import messages from './messages';
+
+export class GradebookHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleToggleViewClick = this.handleToggleViewClick.bind(this);
+  }
+
+  get toggleViewMessage() {
+    return this.props.activeView === views.grades
+      ? messages.toActivityLog
+      : messages.toGradesView;
+  }
+
+  lmsInstructorDashboardUrl = courseId => (
+    `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor`
+  );
+
+  handleToggleViewClick() {
+    const newView = this.props.activeView === views.grades ? views.bulkManagementHistory : views.grades;
+    this.props.setView(newView);
+  }
+
+  render() {
+    return (
+      <div className="gradebook-header">
+        <a
+          href={this.lmsInstructorDashboardUrl(this.props.courseId)}
+          className="mb-3"
+        >
+          <span aria-hidden="true">{'<< '}</span>
+          <FormattedMessage {...messages.backToDashboard} />
+        </a>
+        <h1>
+          <FormattedMessage {...messages.gradebook} />
+        </h1>
+        <div className="subtitle-row d-flex justify-content-between align-items-center">
+          <h3>{this.props.courseId}</h3>
+          { this.props.showBulkManagement && (
+            <Button
+              variant="tertiary"
+              onClick={this.handleToggleViewClick}
+            >
+              <FormattedMessage {...this.toggleViewMessage} />
+            </Button>
+          )}
+        </div>
+        {this.props.areGradesFrozen
+          && (
+          <div className="alert alert-warning" role="alert">
+            <FormattedMessage {...messages.frozenWarning} />
+          </div>
+          )}
+        {(this.props.canUserViewGradebook === false) && (
+          <div className="alert alert-warning" role="alert">
+            <FormattedMessage {...messages.unauthorizedWarning} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+GradebookHeader.defaultProps = {
+  // redux
+  courseId: '',
+  areGradesFrozen: false,
+  canUserViewGradebook: false,
+  showBulkManagement: false,
+};
+
+GradebookHeader.propTypes = {
+  // redux
+  activeView: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  areGradesFrozen: PropTypes.bool,
+  canUserViewGradebook: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+  showBulkManagement: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  activeView: selectors.app.activeView(state),
+  courseId: selectors.app.courseId(state),
+  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
+  canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookHeader);

src/components/GradebookHeader/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  backToDashboard: {
+    id: 'gradebook.GradebookHeader.backButton',
+    defaultMessage: 'Back to Dashboard',
+    description: 'Button text to take user back to LMS dashboard in Gradebook Header',
+  },
+  gradebook: {
+    id: 'gradebook.GradebookHeader.appLabel',
+    defaultMessage: 'Gradebook',
+    description: 'Top-level app title in Gradebook Header component',
+  },
+  frozenWarning: {
+    id: 'gradebook.GradebookHeader.frozenWarning',
+    defaultMessage: 'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+    description: 'Warning message in Gradebook Header for frozen messages',
+  },
+  unauthorizedWarning: {
+    id: 'gradebook.GradebookHeader.unauthorizedWarning',
+    defaultMessage: 'You are not authorized to view the gradebook for this course.',
+    description: 'Warning message in Gradebook Header when user is not allowed to view the app',
+  },
+  toActivityLog: {
+    id: 'gradebook.GradebookHeader.toActivityLogButton',
+    defaultMessage: 'View Bulk Management History',
+    description: 'Button text for button navigating to Bulk Managment Activity Log',
+  },
+  toGradesView: {
+    id: 'gradebook.GradebookHeader.toGradesView',
+    defaultMessage: 'Return to Gradebook',
+    description: 'Button text for button navigating to Grades view.',
+  },
+});
+
+export default messages;

src/components/GradebookHeader/test.jsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { views } from 'data/constants/app';
+import messages from './messages';
+import { GradebookHeader, mapDispatchToProps, mapStateToProps } from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setView: jest.fn() },
+  },
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: {
+      activeView: jest.fn(state => ({ aciveView: state })),
+      courseId: jest.fn(state => ({ courseId: state })),
+    },
+    assignmentTypes: { areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })) },
+    roles: { canUserViewGradebook: jest.fn(state => ({ canUserViewGradebook: state })) },
+    root: { showBulkManagement: jest.fn(state => ({ showBulkManagement: state })) },
+  },
+}));
+
+const courseId = 'fakeID';
+describe('GradebookHeader component', () => {
+  const props = {
+    activeView: views.grades,
+    areGradesFrozen: false,
+    canUserViewGradebook: false,
+    courseId,
+    showBulkManagement: false,
+  };
+  beforeEach(() => {
+    props.setView = jest.fn();
+  });
+  describe('snapshots', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+      el.instance().handleToggleViewClick = jest.fn().mockName('this.handleToggleViewClick');
+    });
+    describe('default values (grades frozen, cannot view).', () => {
+      test('unauthorized warning, but no grades frozen warning', () => {
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, cannot view', () => {
+      test('unauthorized warning, and grades frozen warning.', () => {
+        el.setProps({ areGradesFrozen: true });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('grades frozen, can view.', () => {
+      test('grades frozen warning but no unauthorized warning', () => {
+        el.setProps({ areGradesFrozen: true, canUserViewGradebook: true });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is grades view', () => {
+      test('toggle view button to activity log', () => {
+        el.setProps({ showBulkManagement: true });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toActivityLog} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management, active view is bulkManagementHistory view', () => {
+      test('toggle view button to grades', () => {
+        el.setProps({ showBulkManagement: true, activeView: views.bulkManagementHistory });
+        expect(el.find(Button).getElement()).toEqual((
+          <Button
+            variant="tertiary"
+            onClick={el.instance().handleToggleViewClick}
+          >
+            <FormattedMessage {...messages.toGradesView} />
+          </Button>
+        ));
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('behavior', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<GradebookHeader {...props} />);
+    });
+    describe('handleToggleViewClick', () => {
+      test('calls setView with activity view if activeView is grades', () => {
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+      });
+      test('calls setView with grades view if activeView is bulkManagementHistory', () => {
+        el.setProps({ activeView: views.bulkManagementHistory });
+        el.instance().handleToggleViewClick();
+        expect(props.setView).toHaveBeenCalledWith(views.grades);
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { a: 'test', example: 'state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('activeView from app.activeView', () => {
+      expect(mapped.activeView).toEqual(selectors.app.activeView(testState));
+    });
+    test('courseId from app.courseId', () => {
+      expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
+    });
+    test('areGradesFrozen from assignmentTypes selector', () => {
+      expect(
+        mapped.areGradesFrozen,
+      ).toEqual(selectors.assignmentTypes.areGradesFrozen(testState));
+    });
+    test('canUserViewGradebook from roles selector', () => {
+      expect(
+        mapped.canUserViewGradebook,
+      ).toEqual(selectors.roles.canUserViewGradebook(testState));
+    });
+    test('showBulkManagement from root showBulkManagement selector', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
+    });
+  });
+});

src/components/GradesView/BulkManagementControls.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { views } from 'data/constants/app';
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import NetworkButton from 'components/NetworkButton';
+import ImportGradesButton from './ImportGradesButton';
+
+import messages from './BulkManagementControls.messages';
+
+/**
+ * <BulkManagementControls />
+ * Provides download buttons for Bulk Management and Intervention reports, only if
+ * showBulkManagement is set in redus.
+ */
+export class BulkManagementControls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
+    this.handleViewActivityLog = this.handleViewActivityLog.bind(this);
+  }
+
+  handleClickExportGrades() {
+    this.props.downloadBulkGradesReport();
+    window.location.assign(this.props.gradeExportUrl);
+  }
+
+  handleViewActivityLog() {
+    this.props.setView(views.bulkManagementHistory);
+  }
+
+  render() {
+    return this.props.showBulkManagement && (
+      <div className="d-flex">
+        <NetworkButton
+          label={messages.downloadGradesBtn}
+          onClick={this.handleClickExportGrades}
+        />
+        <ImportGradesButton />
+      </div>
+    );
+  }
+}
+
+BulkManagementControls.defaultProps = {
+  showBulkManagement: false,
+};
+
+BulkManagementControls.propTypes = {
+  // redux
+  downloadBulkGradesReport: PropTypes.func.isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
+  showBulkManagement: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeExportUrl: selectors.root.gradeExportUrl(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);

src/components/GradesView/BulkManagementControls.messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  downloadGradesBtn: {
+    id: 'gradebook.GradesView.BulkManagementControls.bulkManagementLabel',
+    defaultMessage: 'Download Grades',
+    description: 'A labeled button that allows an admin user to download course grades all at once (in bulk).',
+  },
+});
+
+export default messages;

src/components/GradesView/BulkManagementControls.test.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+import { views } from 'data/constants/app';
+
+import {
+  BulkManagementControls,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './BulkManagementControls';
+
+jest.mock('./ImportGradesButton', () => 'ImportGradesButton');
+jest.mock('components/NetworkButton', () => 'NetworkButton');
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    root: {
+      gradeExportUrl: (state) => ({ gradeExportUrl: state }),
+      interventionExportUrl: (state) => ({ interventionExportUrl: state }),
+      showBulkManagement: (state) => ({ showBulkManagement: state }),
+    },
+  },
+}));
+jest.mock('data/actions', () => ({
+  __esModule: true,
+  default: {
+    app: { setView: jest.fn() },
+    grades: {
+      downloadReport: {
+        bulkGrades: jest.fn(),
+        intervention: jest.fn(),
+      },
+    },
+  },
+}));
+
+describe('BulkManagementControls', () => {
+  describe('component', () => {
+    let el;
+    let props = {
+      gradeExportUrl: 'gradesGoHere',
+      interventionExportUrl: 'interventionsGoHere',
+    };
+    beforeEach(() => {
+      props = {
+        ...props,
+        downloadBulkGradesReport: jest.fn(),
+        downloadInterventionReport: jest.fn(),
+        setView: jest.fn(),
+      };
+    });
+    test('snapshot - empty if showBulkManagement is not truthy', () => {
+      expect(shallow(<BulkManagementControls {...props} />)).toEqual({});
+    });
+    describe('behavior', () => {
+      const oldWindowLocation = window.location;
+
+      beforeAll(() => {
+        delete window.location;
+        window.location = Object.defineProperties(
+          {},
+          {
+            ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+            assign: {
+              configurable: true,
+              value: jest.fn(),
+            },
+          },
+        );
+      });
+      beforeEach(() => {
+        window.location.assign.mockReset();
+        el = shallow(<BulkManagementControls {...props} showBulkManagement />);
+      });
+      afterAll(() => {
+        // restore `window.location` to the `jsdom` `Location` object
+        window.location = oldWindowLocation;
+      });
+      describe('handleViewActivityLog', () => {
+        it('calls props.setView(views.bulkManagementHistory)', () => {
+          el.instance().handleViewActivityLog();
+          expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+        });
+      });
+      describe('handleClickExportGrades', () => {
+        const assertions = [
+          'calls props.downloadBulkGradesReport',
+          'sets location to props.gradeExportUrl',
+        ];
+        it(assertions.join(' and '), () => {
+          el.instance().handleClickExportGrades();
+          expect(props.downloadBulkGradesReport).toHaveBeenCalled();
+          expect(window.location.assign).toHaveBeenCalledWith(props.gradeExportUrl);
+        });
+      });
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { do: 'not', test: 'me' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('gradeExportUrl from root.gradeExportUrl', () => {
+      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
+    });
+    test('showBulkManagement from root.showBulkManagement', () => {
+      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
+      expect(
+        mapDispatchToProps.downloadBulkGradesReport,
+      ).toEqual(actions.grades.downloadReport.bulkGrades);
+    });
+    test('setView from actions.app.setView', () => {
+      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
+    });
+  });
+});