update version to 1.4.29

update

.env

@@ -1,38 +1,35 @@
-NODE_ENV='production'
+NODE_ENV='production',
 NODE_PATH=./src
-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=''
-LANGUAGE_PREFERENCE_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=''
-DISPLAY_FEEDBACK_WIDGET='true'
-# Fallback in local style files
-PARAGON_THEME_URLS={}
+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,

.env.development

@@ -7,23 +7,24 @@ LOGOUT_URL='http://localhost:18000/login'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 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=''
+SEGMENT_KEY=null
 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'
@@ -37,8 +38,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'
-APP_ID=''
-MFE_CONFIG_API_URL=''
-DISPLAY_FEEDBACK_WIDGET='false'
-# Fallback in local style files
-PARAGON_THEME_URLS={}
+
+BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=null

.eslintignore

@@ -3,4 +3,3 @@ dist/
 node_modules/
 src/postcss.config.js
 src/segment.js
-src/lightning.js

.eslintrc.js

@@ -1,28 +1,12 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');
 
-const config = createConfig('eslint', {
-  rules: {
-    'import/no-named-as-default': 'off',
-    'import/no-named-as-default-member': 'off',
-    'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
-
-    // TOD: Remove this rule once we have a better way to handle this.
-    'import/no-import-module-exports': 'off',
-    'no-import-assign': 'off',
-    'default-param-last': 'off',
-  },
-  overrides: [{
-    files: ['*.test.js'], rules: { 'no-import-assign': 'off' },
-  }],
-});
+const config = createConfig('eslint');
 
 config.settings = {
-  'import/resolver': {
+  "import/resolver": {
     node: {
-      paths: ['src', 'node_modules'],
-      extensions: ['.js', '.jsx'],
+      paths: ["src", "node_modules"],
+      extensions: [".js", ".jsx"],
     },
   },
 };

.github/CODEOWNERS

@@ -0,0 +1,6 @@
+# Code owners for frontend-app-gradebook, editable gradebook micro-frontend (MFE)
+
+# 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

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"

.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: @openedx/content-aurora
+FYI: @edx/masters-devs-gta

.github/renovate.json

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

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

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

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

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

.github/workflows/ci.yml

@@ -1,60 +0,0 @@
-name: node_js CI
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-    branches:
-    - '**'
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-
-    - name: Setup Nodejs
-      uses: actions/setup-node@v4
-      with:
-        node-version-file: '.nvmrc'
-
-    - 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@v5
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
-
-    - name: Send failure notification
-      if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v6
-      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

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

.github/workflows/lockfileversion-check.yml

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

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

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

.github/workflows/update-browserslist-db.yml

@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}

.gitignore

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

.npmignore

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

.nvmrc

@@ -1 +0,0 @@
-24

.releaserc

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

.travis.yml

@@ -0,0 +1,28 @@
+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=

Makefile

@@ -1,56 +1,9 @@
 npm-install-%: ## install specified % npm package
-	npm ci $* --save-dev
+	npm install $* --save-dev
 	git add package.json
 
-intl_imports = ./node_modules/.bin/intl-imports.js
-transifex_utils = ./node_modules/.bin/transifex-utils.js
-i18n = ./src/i18n
-transifex_input = $(i18n)/transifex_input.json
-
-# This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
-
-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
-
-
-# Experimental: OEP-58 Pulls translations using atlas
-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-	  && atlas pull $(ATLAS_OPTIONS) \
-	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
-	           translations/frontend-platform/src/i18n/messages:frontend-platform \
-	           translations/paragon/src/i18n/messages:paragon \
-	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
-
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-gradebook
-
-# 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
+
+test:
+	npm run test 

README.md

@@ -1,13 +1,10 @@
-# 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)
-[![Codecov](https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook)](https://app.codecov.io/gh/openedx/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) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/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)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-# Purpose
+# Gradebook
 
 Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
 
@@ -18,20 +15,26 @@ Jump to:
 
 For existing documentation see:
 
-- Basic Usage: [Review Learner Grades (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/view_learner_grades.html)
-- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#override-learner-subsection-scores-in-bulk)
+- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
+- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#override-learner-subsection-scores-in-bulk)
 
 ## Should I use Gradebook in my course?
 
 ### 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
@@ -49,8 +52,7 @@ depending on their needs. Instructors that expect to review grades infrequently
 to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
 generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
 
-## Getting Started
-
+## Quickstart
 
 ### Installation
 
@@ -59,66 +61,47 @@ To install gradebook into your project:
 npm i --save @edx/frontend-app-gradebook
 ```
 
-Cloning and Startup
-===================
-
-1. Clone your new repo:
-
-   ``git clone https://github.com/openedx/frontend-app-gradebook.git``
-
-2. Use the version of Node specified in ``.nvmrc``
-
-3. Stop the Tutor devstack, if it's running:
-
-   ``tutor dev stop``
-
-4. Next, we need to tell Tutor that we're going to be running this repo in development mode, and it should be excluded from the mfe container that otherwise runs every MFE. Run this:
-
-   ``tutor mounts add /path/to/frontend-app-gradebook``
-
-5. Start Tutor in development mode. This command will start the LMS and Studio,
-   and other required MFEs like ``authn`` and ``account``, but will not start the
-   Gradebook MFE, which we're going to run on the host instead of in a container
-   managed by Tutor. Run:
-
-   ``tutor dev start lms cms mfe``
-
-## Startup
-
-1. Install npm dependencies:
-
-   ``cd frontend-app-gradebook && npm install``
-
-2. Start the dev server:
-
-   ``npm run dev``
-
 ## Running the UI Standalone
 
-To install the project please refer to the [`MFE Development on Tutor`](https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development) instructions.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.
 
-When not mounted, gradebook will run in the shared MFE container at http://apps.local.openedx.io/gradebook/course-v1:edX+DemoX+Demo_Course.
+The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
 
-When mounted in the tutor ``gradebook`` container, or when running a local (host) webpack dev server, the web application runs on port **1994**, so when you go to `http://apps.local.openedx.io:1994/gradebook/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
-
-(Note: This may not work in Tutor; these instructions are for the deprecated Devstack) You can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
+If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
 
 Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
 
-## Plugins
-This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework).
+## Configuring for local use in edx-platform
 
-The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots).
+Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
+to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
+```
+WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
+```
+
+There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
+
+1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
+check the ``enabled`` and ``enabled for all courses`` boxes.
+
+2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
+
+3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
+    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
+    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
+
+    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
+
+**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
+numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
+recalculated grade values, verify you've set all flags correctly.
 
 ## Running tests
 
-Run:
-
-``nvm use``
-
-``npm ci``
-
-``npm test``
+1. Assuming that you're operating in the context of the edX devstack,
+run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
+running gradebook container.
+2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
 
 ## Directory Structure
 
@@ -140,50 +123,4 @@ Run:
 
 ## Authentication with backend API services
 
-See the [`@edx/frontend-auth`](https://github.com/edx-unsupported/frontend-auth) repo for information about securing routes in your application that require user authentication.
-
-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read [How To Contribute](https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html) for details.
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-Getting Help
-===========
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a [Slack
-invitation](https://openedx.org/slack), then join our 
-[community Slack workspace](https://openedx.slack.com/)  Because this is a
-frontend repository, the best place to discuss it would be in the 
-[#wg-frontend channel](https://openedx.slack.com/archives/C04BM6YC7A6).
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-app-gradebook/issues
-
-For more information about these options, see the [Getting Help](https://openedx.org/community/connect) page.
-
-The Open edX Code of Conduct
-============================
-
-All community members are expected to follow the [Open edX Code of Conduct](https://openedx.org/code-of-conduct/).
-
-Reporting Security Issues
-=========================
-Please do not report security issues in public. Please email security@openedx.org.
+See the [`@edx/frontend-auth`](https://github.com/edx/frontend-auth) repo for information about securing routes in your application that require user authentication.

babel.config.js

@@ -1,3 +1,3 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('babel');

catalog-info.yaml

@@ -1,14 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: "frontend-app-gradebook"
-  description: "The frontend (MFE) for Open edX Gradebook"
-  annotations:
-    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
-spec:
-  owner: user:farhaanbukhsh
-  type: 'website'
-  lifecycle: 'experimental'

documentation/.travis.yml.md

@@ -0,0 +1,77 @@
+# 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

@@ -1,40 +0,0 @@
-# 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/decisions/0001-update-api-usage.rst

@@ -5,7 +5,7 @@ Context
 =======
 
 The LMS Grades API exposes a set of Gradebook-related endpoints:
-https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/grades/api/v1/gradebook_views.py
+https://github.com/edx/edx-platform/blob/master/lms/djangoapps/grades/api/v1/gradebook_views.py
 The ``bulk-update`` endpoint defined therein allows for the creation/modification of subsection
 grades for multiple users and sections in a single request.  This allows clients of the API to limit
 the number of network requests made and to more easily manage client-side data.  Moreover,
@@ -13,7 +13,7 @@ the course grade updates that occur during calls to this API are synchronous - t
 is completed before a response is given to the client.
 
 For decisions made about the implementation of this API, see:
-https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/grades/docs/decisions/0001-gradebook-api.rst
+https://github.com/edx/edx-platform/blob/master/lms/djangoapps/grades/docs/decisions/0001-gradebook-api.rst
 
 Decision
 ========

documentation/testing/test-plan.md

@@ -68,40 +68,33 @@ 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.
 
-- [ ] *Master's (or selectively-enabled) only*: "Bulk Management" allows overriding grades in bulk.
+- [ ] *Masters 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 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.
+    - [ ] 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.
     - [ ] Open the downloaded CSV and verify that students and assignments in the file match applied filters/searches.
-    - Navigate to Bulk Management History tab.
-    - [ ] Clicking the "ViewBulk Management History" tab shows the Bulk Management History view.
+    - 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.
     - [ ] 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.)
-    - [ ] Verify that Import Grades Success toast appears (and disappears after 5 seconds)
-    - Navigate back to the "Bulk Management History" view.
+    - Navigate back to the "Bulk Management" tab.
     - [ ] 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 "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.
+    - [ ] Verify that the "Interventions" tab does not appear.
+    - [ ] Verify that the "Interventions" button does not appear.
     - Open a masters-track course.
-    - [ ] 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.
+    - [ ] 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.
     - Open the interventions report and verify student info and activity info appear.

documentation/testing/test-setup.md

@@ -4,17 +4,17 @@ Instructions for setting up environments and data for testing Gradebook.
 
 ## Set up a course with graded content
 
-A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html) for notes on how to develop a course from scratch.
+A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/index.html) for notes on how to develop a course from scratch.
 
 Notably, the course needs a grading policy and subsections with scoreable content.
 After creating subsections with content, they need to be configured with an "Assignment Type" to be included in grading.
 
 Suggested resources:
-- [Establishing a Grading Policy For Your Course](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#review-how-grading-is-configured-for-your-course)
-- [Adding Exercises and Tools](https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_problems_exercises_tools.html)
-- [Set the Assignment Type and Due Date for a Subsection](https://docs.openedx.org/en/latest/educators/how-tos/course_development/set_subsection_problem_date.html#set-the-assignment-type-and-due-date-for-a-subsection)
+- [Establishing a Grading Policy For Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
+- [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 for course
+## Enable Gradebook and feature toggles for course
 
 See README.md #Quickstart for more detailed instructions.
 
@@ -25,17 +25,11 @@ 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
-
-## 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.
+    - [ ] 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
 
-[source - note: possibly outdated, edx.org-specific](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
+[source](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
 
 Add a Master's track in your course:
 - As an admin user, go to Django Admin (`{lms-url}/admin`) > Course Modes and add a new course mode

jest.config.js

@@ -1,14 +1,11 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
   modulePaths: ['<rootDir>/src/'],
-  coveragePathIgnorePatterns: [
-    'src/segment.js',
-    'src/postcss.config.js',
-    'testUtils', // don't unit test jest mocking tools
-    'testUtilsExtra', // don't unit test jest mocking tools
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
   ],
 });

openedx.yaml

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

package.json

@@ -1,60 +1,57 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.3",
+  "version": "1.4.29",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-gradebook.git"
+    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "fedx-scripts formatjs extract",
     "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",
-    "dev": "PUBLIC_PATH=/gradebook/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch"
+    "watch-tests": "jest --watch",
+    "travis-deploy-once": "travis-deploy-once"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-gradebook#readme",
+  "homepage": "https://github.com/edx/frontend-app-gradebook#readme",
   "publishConfig": {
     "access": "public"
   },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.6.1",
-    "@edx/frontend-platform": "^8.3.7",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@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",
     "@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",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
-    "@openedx/paragon": "^23.4.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",
+    "enzyme": "^3.10.0",
+    "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "prop-types": "15.8.1",
+    "node-sass": "^4.14.1",
+    "prop-types": "15.7.2",
     "query-string": "6.13.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
-    "react-redux": "^7.2.9",
-    "react-router": "6.15.0",
-    "react-router-dom": "6.15.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-intl": "^2.9.0",
+    "react-redux": "^5.1.1",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.0.5",
     "redux-beacon": "^2.1.0",
@@ -62,21 +59,24 @@
     "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/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@edx/frontend-build": "5.5.2",
+    "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": "^12.2.0",
+    "fetch-mock": "^6.5.2",
+    "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "^1.5.3"
+    "jest": "24.9.0",
+    "react-dev-utils": "^5.0.3",
+    "react-test-renderer": "^16.10.1",
+    "redux-mock-store": "^1.5.3",
+    "semantic-release": "^17.2.3",
+    "travis-deploy-once": "^5.0.11"
   }
 }

src/App.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { FooterSlot } from '@edx/frontend-component-footer';
-import Header from '@edx/frontend-component-header';
-
-import store from 'data/store';
-import GradebookPage from 'containers/GradebookPage';
-import './App.scss';
-import Head from './head/Head';
-
-const App = () => (
-  <AppProvider store={store}>
-    <Head />
-    <div>
-      <Header />
-      <main>
-        <Routes>
-          <Route
-            path="/:courseId"
-            element={<GradebookPage />}
-          />
-        </Routes>
-      </main>
-      <FooterSlot />
-    </div>
-  </AppProvider>
-);
-
-export default App;

src/App.scss

@@ -1,15 +1,15 @@
 // frontend-app-*/src/index.scss
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
+$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/GradesView/GradesView";
-@import "./components/BulkManagementHistoryView/BulkManagementHistoryView";
-@import "./components/WithSidebar/WithSidebar";
-@import "./components/GradebookFilters/GradebookFilters";
+@import "./components/Gradebook/gradebook";
+@import "./components/Drawer/Drawer";

src/App.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-jest.mock('react-router-dom', () => ({
-  Routes: ({ children }) => children,
-  Route: ({ element }) => element,
-}));
-
-jest.mock('@edx/frontend-platform/react', () => ({
-  AppProvider: ({ children }) => children,
-}));
-
-jest.mock('@edx/frontend-component-header', () => ({
-  __esModule: true,
-  default: () => <div>Header</div>,
-}));
-
-jest.mock('@edx/frontend-component-footer', () => ({
-  FooterSlot: () => <div>Footer</div>,
-}));
-
-jest.mock('./head/Head', () => ({
-  __esModule: true,
-  default: () => <div>Head</div>,
-}));
-
-jest.mock('containers/GradebookPage', () => ({
-  __esModule: true,
-  default: () => <div>Gradebook</div>,
-}));
-
-describe('App', () => {
-  beforeEach(() => {
-    render(<App />);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders Head component', () => {
-    const head = screen.getByText('Head');
-    expect(head).toBeInTheDocument();
-  });
-
-  it('renders Header component', () => {
-    const header = screen.getByText('Header');
-    expect(header).toBeInTheDocument();
-  });
-
-  it('renders Footer component', () => {
-    const footer = screen.getByText('Footer');
-    expect(footer).toBeInTheDocument();
-  });
-
-  it('renders main content wrapper', () => {
-    const main = screen.getByRole('main');
-    expect(main).toBeInTheDocument();
-    const gradebook = screen.getByText('Gradebook');
-    expect(gradebook).toBeInTheDocument();
-  });
-});

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -1,54 +0,0 @@
-/* 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 '@openedx/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

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import selectors from 'data/selectors';
-
-import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
-import { renderWithIntl, screen } from '../../testUtilsExtra';
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    grades: {
-      bulkImportError: (state) => ({ bulkImportError: state }),
-      uploadSuccess: (state) => ({ uploadSuccess: state }),
-    },
-  },
-}));
-
-const errorMessage = 'Oh noooooo';
-
-describe('BulkManagementAlerts', () => {
-  describe('component', () => {
-    describe('states of the warnings', () => {
-      test('no alert shown', () => {
-        renderWithIntl(<BulkManagementAlerts bulkImportError="" uploadSuccess={false} />);
-        expect(document.querySelectorAll('.alert').length).toEqual(0);
-      });
-      test('Just success alert shown', () => {
-        renderWithIntl(<BulkManagementAlerts bulkImportError="" uploadSuccess />);
-        expect(document.querySelectorAll('.alert-success').length).toEqual(1);
-      });
-      test('Just error alert shown', () => {
-        renderWithIntl(<BulkManagementAlerts bulkImportError={errorMessage} uploadSuccess={false} />);
-        expect(document.querySelectorAll('.alert-danger').length).toEqual(1);
-        expect(screen.getByText(errorMessage)).toBeInTheDocument();
-      });
-    });
-  });
-  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

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

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -1,61 +0,0 @@
-/* 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 '@openedx/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

@@ -1,187 +0,0 @@
-import React from 'react';
-import { render, screen, initializeMocks } from 'testUtilsExtra';
-import { DataTable } from '@openedx/paragon';
-
-import selectors from 'data/selectors';
-import { bulkManagementColumns } from 'data/constants/app';
-
-import { HistoryTable, mapHistoryRows, mapStateToProps } from './HistoryTable';
-import ResultsSummary from './ResultsSummary';
-
-initializeMocks();
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  DataTable: jest.fn(() => <div data-testid="data-table">DataTable</div>),
-}));
-jest.mock('./ResultsSummary', () => jest.fn(() => <div data-testid="results-summary">ResultsSummary</div>));
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    grades: {
-      bulkManagementHistoryEntries: jest.fn(),
-    },
-  },
-}));
-
-describe('HistoryTable', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  const mockBulkManagementHistory = [
-    {
-      originalFilename: 'test-file-1.csv',
-      user: 'test-user-1',
-      timeUploaded: '2025-01-01T10:00:00Z',
-      resultsSummary: {
-        rowId: 1,
-        text: 'Download results 1',
-      },
-    },
-    {
-      originalFilename: 'test-file-2.csv',
-      user: 'test-user-2',
-      timeUploaded: '2025-01-02T10:00:00Z',
-      resultsSummary: {
-        rowId: 2,
-        text: 'Download results 2',
-      },
-    },
-  ];
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('mapHistoryRows', () => {
-    const mockRow = {
-      resultsSummary: {
-        rowId: 1,
-        text: 'Download results',
-      },
-      originalFilename: 'test-file.csv',
-      user: 'test-user',
-      timeUploaded: '2025-01-01T10:00:00Z',
-    };
-
-    it('transforms row data correctly', () => {
-      const result = mapHistoryRows(mockRow);
-
-      expect(result).toHaveProperty('resultsSummary');
-      expect(result).toHaveProperty('filename');
-      expect(result).toHaveProperty('user');
-      expect(result).toHaveProperty('timeUploaded');
-      expect(result.timeUploaded).toBe('2025-01-01T10:00:00Z');
-    });
-
-    it('wraps filename in span with correct class', () => {
-      const result = mapHistoryRows(mockRow);
-      render(<div>{result.filename}</div>);
-
-      const filenameSpan = screen.getByText('test-file.csv');
-      expect(filenameSpan).toBeInTheDocument();
-      expect(filenameSpan).toHaveClass('wrap-text-in-cell');
-    });
-
-    it('wraps user in span with correct class', () => {
-      const result = mapHistoryRows(mockRow);
-      render(<div>{result.user}</div>);
-
-      const userSpan = screen.getByText('test-user');
-      expect(userSpan).toBeInTheDocument();
-      expect(userSpan).toHaveClass('wrap-text-in-cell');
-    });
-
-    it('renders ResultsSummary component with correct props', () => {
-      const result = mapHistoryRows(mockRow);
-      render(<div>{result.resultsSummary}</div>);
-
-      expect(ResultsSummary).toHaveBeenCalledWith(mockRow.resultsSummary, {});
-      expect(screen.getByTestId('results-summary')).toBeInTheDocument();
-    });
-  });
-
-  describe('component', () => {
-    it('renders DataTable with empty data when no history provided', () => {
-      render(<HistoryTable />);
-
-      expect(DataTable).toHaveBeenCalledWith(
-        {
-          data: [],
-          hasFixedColumnWidths: true,
-          columns: bulkManagementColumns,
-          className: 'table-striped',
-          itemCount: 0,
-        },
-        {},
-      );
-      expect(screen.getByTestId('data-table')).toBeInTheDocument();
-    });
-
-    it('renders DataTable with mapped history data', () => {
-      render(
-        <HistoryTable bulkManagementHistory={mockBulkManagementHistory} />,
-      );
-
-      expect(DataTable).toHaveBeenCalledWith(
-        {
-          data: expect.arrayContaining([
-            expect.objectContaining({
-              filename: expect.any(Object),
-              user: expect.any(Object),
-              resultsSummary: expect.any(Object),
-              timeUploaded: '2025-01-01T10:00:00Z',
-            }),
-            expect.objectContaining({
-              filename: expect.any(Object),
-              user: expect.any(Object),
-              resultsSummary: expect.any(Object),
-              timeUploaded: '2025-01-02T10:00:00Z',
-            }),
-          ]),
-          hasFixedColumnWidths: true,
-          columns: bulkManagementColumns,
-          className: 'table-striped',
-          itemCount: 2,
-        },
-        {},
-      );
-    });
-
-    it('passes correct props to DataTable', () => {
-      render(
-        <HistoryTable bulkManagementHistory={mockBulkManagementHistory} />,
-      );
-
-      const dataTableCall = DataTable.mock.calls[0][0];
-      expect(dataTableCall.hasFixedColumnWidths).toBe(true);
-      expect(dataTableCall.columns).toBe(bulkManagementColumns);
-      expect(dataTableCall.className).toBe('table-striped');
-      expect(dataTableCall.itemCount).toBe(mockBulkManagementHistory.length);
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    const mockState = { test: 'state' };
-    const mockHistoryEntries = [
-      { originalFilename: 'file1.csv', user: 'user1' },
-      { originalFilename: 'file2.csv', user: 'user2' },
-    ];
-
-    beforeEach(() => {
-      selectors.grades.bulkManagementHistoryEntries.mockReturnValue(
-        mockHistoryEntries,
-      );
-    });
-
-    it('maps bulkManagementHistory from selector', () => {
-      const result = mapStateToProps(mockState);
-
-      expect(
-        selectors.grades.bulkManagementHistoryEntries,
-      ).toHaveBeenCalledWith(mockState);
-      expect(result.bulkManagementHistory).toBe(mockHistoryEntries);
-    });
-  });
-});

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -1,36 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Hyperlink, Icon } from '@openedx/paragon';
-import { Download } from '@openedx/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
-    destination={lms.urls.bulkGradesUrlByRow(rowId)}
-    target="_blank"
-    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

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import lms from 'data/services/lms';
-import { renderWithIntl, screen } from '../../testUtilsExtra';
-import ResultsSummary from './ResultsSummary';
-
-jest.mock('data/services/lms', () => ({
-  urls: {
-    bulkGradesUrlByRow: jest.fn((rowId) => (`www.edx.org/${rowId}`)),
-  },
-}));
-
-describe('ResultsSummary component', () => {
-  const props = {
-    rowId: 42,
-    text: 'texty',
-  };
-  let link;
-  beforeEach(() => {
-    renderWithIntl(<ResultsSummary {...props} />);
-    link = screen.getByRole('link', { name: props.text });
-  });
-  test('Hyperlink has target="_blank" and rel="noopener noreferrer"', () => {
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-  });
-  test('Hyperlink has href to bulkGradesUrl', () => {
-    expect(link).toHaveAttribute('href', lms.urls.bulkGradesUrlByRow(props.rowId));
-  });
-  test('displays Download Icon and text', () => {
-    expect(link).toHaveTextContent(props.text);
-    const icon = screen.getByRole('img', { hidden: true });
-    expect(icon).toBeInTheDocument();
-  });
-});

src/components/BulkManagementHistoryView/index.jsx

@@ -1,24 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-import { render, initializeMocks, screen } from 'testUtilsExtra';
-
-import { BulkManagementHistoryView } from '.';
-import messages from './messages';
-
-jest.mock('./BulkManagementAlerts', () => jest.fn(() => <div>BulkManagementAlerts</div>));
-jest.mock('./HistoryTable', () => jest.fn(() => <div>HistoryTable</div>));
-
-initializeMocks();
-
-describe('BulkManagementHistoryView', () => {
-  describe('component', () => {
-    beforeEach(() => {
-      render(<BulkManagementHistoryView />);
-    });
-    describe('render alerts and heading', () => {
-      it('heading - h4 loaded from messages', () => {
-        expect(screen.getByText(messages.heading.defaultMessage)).toBeInTheDocument();
-        expect(screen.getByText(messages.helpText.defaultMessage)).toBeInTheDocument();
-        expect(screen.getByText('BulkManagementAlerts')).toBeInTheDocument();
-        expect(screen.getByText('HistoryTable')).toBeInTheDocument();
-      });
-    });
-  });
-});

src/components/BulkManagementHistoryView/messages.js

@@ -1,21 +0,0 @@
-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

@@ -0,0 +1,48 @@
+$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

@@ -0,0 +1,85 @@
+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/EdxHeader.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen } from '@testing-library/react';
-
-import Header from '.';
-
-jest.mock('@edx/frontend-platform', () => ({
-  ...jest.requireActual('@edx/frontend-platform'),
-  getConfig: jest.fn(),
-}));
-
-describe('Header', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('has edx link with logo url', () => {
-    const url = 'www.ourLogo.url';
-    const baseUrl = 'www.lms.url';
-    getConfig.mockReturnValue({ LOGO_URL: url, LMS_BASE_URL: baseUrl });
-
-    render(
-      <IntlProvider messages={{}} locale="en">
-        <Header />
-      </IntlProvider>,
-    );
-
-    const link = screen.getByRole('link');
-    const logo = screen.getByAltText('edX logo');
-
-    expect(link).toHaveAttribute('href', `${baseUrl}/dashboard`);
-    expect(logo).toHaveAttribute('src', url);
-  });
-});

src/components/EdxHeader/index.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Hyperlink } from '@openedx/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/FilterBadges/index.jsx

@@ -0,0 +1,198 @@
+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

@@ -0,0 +1,199 @@
+/* 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 thunkActions from 'data/thunkActions';
+import { configuration } from 'config';
+
+export class BulkManagement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.fileFormRef = React.createRef();
+    this.fileInputRef = React.createRef();
+  }
+
+  formatHistoryRow = (row) => {
+    const {
+      summaryOfRowsProcessed: {
+        total,
+        successfullyProcessed,
+        failed,
+        skipped,
+      },
+      unique_id: courseId,
+      originalFilename,
+      id,
+      user: username,
+      ...rest
+    } = row;
+    const resultsText = [
+      `${total} Students: ${successfullyProcessed} processed`,
+      ...(skipped > 0 ? [`${skipped} skipped`] : []),
+      ...(failed > 0 ? [`${failed} failed`] : []),
+    ].join(', ');
+    const resultsSummary = (
+      <a
+        href={`${configuration.LMS_BASE_URL}/api/bulk_grades/course/${courseId}/?error_id=${id}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FontAwesomeIcon icon={faDownload} />
+        {resultsText}
+      </a>
+    );
+    const createWrappedCell = (text) => (<span className="wrap-text-in-cell">{text}</span>);
+    const filename = createWrappedCell(originalFilename);
+    const user = createWrappedCell(username);
+    return {
+      resultsSummary,
+      filename,
+      user,
+      ...rest,
+    };
+  };
+
+  handleClickImportGrades = () => {
+    const fileInput = this.fileInputRef.current;
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
+  handleFileInputChange = (event) => {
+    const fileInput = event.target;
+    const file = fileInput.files[0];
+    const form = this.fileFormRef.current;
+    if (file && form) {
+      const formData = new FormData(form);
+      this.props.submitFileUploadFormData(this.props.courseId, formData).then(() => {
+        fileInput.value = null;
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <h4>Use this feature by downloading a CSV for bulk management,
+          overriding grades locally, and coming back here to upload.
+        </h4>
+        <form ref={this.fileFormRef} action={this.props.gradeExportUrl} method="post">
+          <StatusAlert
+            alertType="danger"
+            dialog={this.props.bulkImportError}
+            open={!!this.props.bulkImportError}
+            dismissible={false}
+          />
+          <StatusAlert
+            alertType="success"
+            dialog="CSV processing. File uploads may take several minutes to complete"
+            open={this.props.uploadSuccess}
+            dismissible={false}
+          />
+          <input
+            className="d-none"
+            type="file"
+            name="csv"
+            label="Upload Grade CSV"
+            onChange={this.handleFileInputChange}
+            ref={this.fileInputRef}
+          />
+        </form>
+        <Button
+          variant="primary"
+          onClick={this.handleClickImportGrades}
+        >
+          Import Grades
+        </Button>
+        <p>
+          Results appear in the table below.<br />
+          Grade processing may take a few seconds.
+        </p>
+        <Table
+          data={this.props.bulkManagementHistory.map(this.formatHistoryRow)}
+          hasFixedColumnWidths
+          columns={[
+            {
+              key: 'filename',
+              label: 'Gradebook',
+              columnSortable: false,
+              width: 'col-5',
+            },
+            {
+              key: 'resultsSummary',
+              label: 'Download Summary',
+              columnSortable: false,
+              width: 'col',
+            },
+            {
+              key: 'user',
+              label: 'Who',
+              columnSortable: false,
+              width: 'col-1',
+            },
+            {
+              key: 'timeUploaded',
+              label: 'When',
+              columnSortable: false,
+              width: 'col',
+            },
+          ]}
+          className="table-striped"
+        />
+      </div>
+    );
+  }
+}
+
+BulkManagement.defaultProps = {
+  bulkImportError: '',
+  bulkManagementHistory: [],
+  courseId: '',
+  uploadSuccess: false,
+};
+
+BulkManagement.propTypes = {
+  courseId: PropTypes.string,
+  gradeExportUrl: PropTypes.string.isRequired,
+
+  // redux
+  bulkImportError: PropTypes.string,
+  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
+    originalFilename: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+    timeUploaded: PropTypes.string.isRequired,
+    summaryOfRowsProcessed: PropTypes.shape({
+      total: PropTypes.number.isRequired,
+      successfullyProcessed: PropTypes.number.isRequired,
+      failed: PropTypes.number.isRequired,
+      skipped: PropTypes.number.isRequired,
+    }).isRequired,
+  })),
+  submitFileUploadFormData: PropTypes.func.isRequired,
+  uploadSuccess: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => {
+  const { grades } = selectors;
+  return {
+    bulkImportError: grades.bulkImportError(state),
+    bulkManagementHistory: grades.bulkManagementHistoryEntries(state),
+    uploadSuccess: grades.uploadSuccess(state),
+  };
+};
+
+export const mapDispatchToProps = {
+  submitFileUploadFormData: thunkActions.grades.submitFileUploadFormData,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagement);

src/components/Gradebook/BulkManagementControls.jsx

@@ -0,0 +1,87 @@
+/* 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 actions from 'data/actions';
+
+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: actions.grades.downloadReport.bulkGrades,
+  downloadInterventionReport: actions.grades.downloadReport.intervention,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);

src/components/Gradebook/EditModal.jsx

@@ -0,0 +1,208 @@
+/* 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 actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+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: actions.grades.doneViewingAssignment,
+  updateGrades: thunkActions.grades.updateGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditModal);

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentFilter Component snapshots basic snapshot 1`] = `
+<div
+  className="student-filters"
+>
+  <SelectGroup
+    disabled={false}
+    id="assignment"
+    label="Assignment"
+    onChange={[MockFunction handleChange]}
+    options={
+      Array [
+        <option
+          value=""
+        >
+          All
+        </option>,
+        <option
+          value="assgN1"
+        >
+          assgN1
+          : 
+          subLabel1
+        </option>,
+        <option
+          value="assgN2"
+        >
+          assgN2
+          : 
+          subLabel2
+        </option>,
+      ]
+    }
+    value="assgN1"
+  />
+</div>
+`;

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

@@ -0,0 +1,106 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+import SelectGroup from '../SelectGroup';
+
+const { updateGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
+
+export class AssignmentFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const assignment = event.target.value;
+    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig => assig.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,
+    );
+  }
+
+  get options() {
+    const mapper = ({ label, subsectionLabel }) => (
+      <option key={label} value={label}>
+        {label}: {subsectionLabel}
+      </option>
+    );
+    return ([
+      <option key="0" value="">All</option>,
+      ...this.props.assignmentFilterOptions.map(mapper),
+    ]);
+  }
+
+  render() {
+    return (
+      <div className="student-filters">
+        <SelectGroup
+          id="assignment"
+          label="Assignment"
+          value={this.props.selectedAssignment}
+          onChange={this.handleChange}
+          disabled={this.props.assignmentFilterOptions.length === 0}
+          options={this.options}
+        />
+      </div>
+    );
+  }
+}
+
+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,
+    subsectionLabel: PropTypes.string,
+    type: PropTypes.string,
+    id: PropTypes.string,
+  })),
+  selectedAssignmentType: PropTypes.string,
+  selectedAssignment: PropTypes.string,
+  selectedCohort: PropTypes.string,
+  selectedTrack: PropTypes.string,
+  updateGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
+  updateAssignmentFilter: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => {
+  const { filters } = selectors;
+  return {
+    assignmentFilterOptions: filters.selectableAssignmentLabels(state),
+    selectedAssignment: filters.selectedAssignmentLabel(state),
+    selectedAssignmentType: filters.assignmentType(state),
+    selectedCohort: filters.cohort(state),
+    selectedTrack: filters.track(state),
+  };
+};
+
+export const mapDispatchToProps = {
+  updateAssignmentFilter: actions.filters.update.assignment,
+  updateGradesIfAssignmentGradeFiltersSet,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentFilter);

src/components/Gradebook/GradebookFilters/AssignmentFilter/test.jsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import { updateGradesIfAssignmentGradeFiltersSet } 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: {
+    selectableAssignmentLabels: jest.fn(() => ([{
+      label: 'assigNment',
+      subsectionLabel: 'subsection',
+      type: 'assignMentType',
+      id: 'subsectionId',
+    }])),
+    selectedAssignmentLabel: jest.fn(() => 'assigNment'),
+    assignmentType: jest.fn(() => 'assignMentType'),
+    cohort: jest.fn(() => 'COhort'),
+    track: jest.fn(() => 'traCK'),
+  },
+}));
+
+describe('AssignmentFilter', () => {
+  let props = {
+    courseId: '12345',
+    assignmentFilterOptions: [
+      {
+        label: 'assgN1',
+        subsectionLabel: 'subLabel1',
+        type: 'assgn_Type1',
+        id: 'assgn_iD1',
+      },
+      {
+        label: 'assgN2',
+        subsectionLabel: 'subLabel2',
+        type: 'assgn_Type2',
+        id: 'assgn_iD2',
+      },
+    ],
+    selectedAssignmentType: 'assgnFilterLabel1',
+    selectedAssignment: 'assgN1',
+    selectedCohort: 'a cohort',
+    selectedTrack: 'a track',
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      updateQueryParams: jest.fn(),
+      updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
+      updateAssignmentFilter: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('behavior', () => {
+      describe('handleChange', () => {
+        let el;
+        const newAssgn = 'assgN1';
+        const event = { target: { value: newAssgn } };
+        const selected = props.assignmentFilterOptions[0];
+        beforeEach(() => {
+          el = mount(<AssignmentFilter {...props} />);
+          el.instance().handleChange(event);
+        });
+
+        it('calls props.updateAssignmentFilter with selection', () => {
+          expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
+            label: newAssgn,
+            type: selected.type,
+            id: selected.id,
+          });
+        });
+        it('calls props.updateQueryParams with selected assignment id',
+          () => {
+            expect(props.updateQueryParams).toHaveBeenCalledWith({
+              assignment: selected.id,
+            });
+          });
+        it('calls props.updateGradesIfAssignmentGradeFiltersSet', () => {
+          const method = props.updateGradesIfAssignmentGradeFiltersSet;
+          expect(method).toHaveBeenCalledWith(
+            props.courseId,
+            props.selectedCohort,
+            props.selectedTrack,
+            props.selectedAssignmentType,
+          );
+        });
+      });
+    });
+    describe('snapshots', () => {
+      test('basic snapshot', () => {
+        const el = shallow(<AssignmentFilter {...props} />);
+        el.instance().handleChange = jest.fn().mockName('handleChange');
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const state = {
+      filters: {
+        assignment: { label: 'assigNment' },
+        assignmentType: 'assignMentType',
+        cohort: 'COhort',
+        track: 'traCK',
+      },
+    };
+    describe('assignmentFilterOptions', () => {
+      it('is selected from filters.selectableAssignmentLabels', () => {
+        expect(
+          mapStateToProps(state).assignmentFilterOptions,
+        ).toEqual(
+          selectors.filters.selectableAssignmentLabels(state),
+        );
+      });
+    });
+    describe('selectedAssignment', () => {
+      it('is selected from filters.selectedAssignmentLabel', () => {
+        expect(
+          mapStateToProps(state).selectedAssignment,
+        ).toEqual(
+          selectors.filters.selectedAssignmentLabel(state),
+        );
+      });
+    });
+    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(
+        actions.filters.update.assignment,
+      );
+    });
+    test('updateGradesIfAsssignmentGradeFiltersSet', () => {
+      const prop = mapDispatchToProps.updateGradesIfAssignmentGradeFiltersSet;
+      expect(prop).toEqual(updateGradesIfAssignmentGradeFiltersSet);
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled if no selected assignment 1`] = `
+<div
+  className="grade-filter-inputs"
+>
+  <PercentGroup
+    disabled={true}
+    id="assignmentGradeMin"
+    label="Min Grade"
+    onChange={[MockFunction handleSetMin]}
+    value="1"
+  />
+  <PercentGroup
+    disabled={true}
+    id="assignmentGradeMax"
+    label="Max Grade"
+    onChange={[MockFunction handleSetMax]}
+    value="100"
+  />
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      active={false}
+      disabled={true}
+      name="assignmentGradeMinMax"
+      onClick={[MockFunction handleSubmit]}
+      type="submit"
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</div>
+`;
+
+exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
+<div
+  className="grade-filter-inputs"
+>
+  <PercentGroup
+    disabled={false}
+    id="assignmentGradeMin"
+    label="Min Grade"
+    onChange={[MockFunction handleSetMin]}
+    value="1"
+  />
+  <PercentGroup
+    disabled={false}
+    id="assignmentGradeMax"
+    label="Max Grade"
+    onChange={[MockFunction handleSetMax]}
+    value="100"
+  />
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      active={false}
+      disabled={false}
+      name="assignmentGradeMinMax"
+      onClick={[MockFunction handleSubmit]}
+      type="submit"
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,125 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Button } from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+
+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({
+      maxGrade: assignmentGradeMax,
+      minGrade: assignmentGradeMin,
+    });
+    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: thunkActions.grades.fetchGrades,
+  updateAssignmentLimits: actions.filters.update.assignmentLimits,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentGradeFilter);

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import { fetchGrades } from 'data/thunkActions/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({
+            maxGrade: props.filterValues.assignmentGradeMax,
+            minGrade: props.filterValues.assignmentGradeMin,
+          });
+        });
+        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(
+        actions.filters.update.assignmentLimits,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentTypeFilter Component snapshots SelectGroup disabled if no assignmentFilterOptions 1`] = `
+<div
+  className="student-filters"
+>
+  <SelectGroup
+    disabled={true}
+    id="assignment-types"
+    label="Assignment Types"
+    onChange={[MockFunction handleChange]}
+    options={
+      Array [
+        <option
+          value=""
+        >
+          All
+        </option>,
+        <option
+          value="assignMentType1"
+        >
+          assignMentType1
+        </option>,
+        <option
+          value="AssigNmentType2"
+        >
+          AssigNmentType2
+        </option>,
+      ]
+    }
+    value="assigNmentType2"
+  />
+</div>
+`;
+
+exports[`AssignmentTypeFilter Component snapshots smoke test 1`] = `
+<div
+  className="student-filters"
+>
+  <SelectGroup
+    disabled={false}
+    id="assignment-types"
+    label="Assignment Types"
+    onChange={[MockFunction handleChange]}
+    options={
+      Array [
+        <option
+          value=""
+        >
+          All
+        </option>,
+        <option
+          value="assignMentType1"
+        >
+          assignMentType1
+        </option>,
+        <option
+          value="AssigNmentType2"
+        >
+          AssigNmentType2
+        </option>,
+      ]
+    }
+    value="assigNmentType2"
+  />
+</div>
+`;

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

@@ -0,0 +1,77 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import SelectGroup from '../SelectGroup';
+
+export class AssignmentTypeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const assignmentType = event.target.value;
+    this.props.filterAssignmentType(assignmentType);
+    this.props.updateQueryParams({ assignmentType });
+  }
+
+  get options() {
+    const mapper = (entry) => (
+      <option key={entry} value={entry}>{entry}</option>
+    );
+    return [
+      <option key="0" value="">All</option>,
+      ...this.props.assignmentTypes.map(mapper),
+    ];
+  }
+
+  render() {
+    return (
+      <div className="student-filters">
+        <SelectGroup
+          id="assignment-types"
+          label="Assignment Types"
+          value={this.props.selectedAssignmentType}
+          onChange={this.handleChange}
+          disabled={this.props.assignmentFilterOptions.length === 0}
+          options={this.options}
+        />
+      </div>
+    );
+  }
+}
+
+AssignmentTypeFilter.defaultProps = {
+  assignmentTypes: [],
+  assignmentFilterOptions: [],
+  selectedAssignmentType: '',
+};
+
+AssignmentTypeFilter.propTypes = {
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // redux
+  assignmentTypes: PropTypes.arrayOf(PropTypes.string),
+  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    subsectionLabel: PropTypes.string,
+  })),
+  filterAssignmentType: PropTypes.func.isRequired,
+  selectedAssignmentType: PropTypes.string,
+};
+
+export const mapStateToProps = (state) => ({
+  assignmentTypes: selectors.assignmentTypes.allAssignmentTypes(state),
+  assignmentFilterOptions: selectors.filters.selectableAssignmentLabels(state),
+  selectedAssignmentType: selectors.filters.assignmentType(state),
+});
+
+export const mapDispatchToProps = {
+  filterAssignmentType: actions.filters.update.assignmentType,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentTypeFilter);

src/components/Gradebook/GradebookFilters/AssignmentTypeFilter/test.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+
+import {
+  AssignmentTypeFilter,
+  mapStateToProps,
+  mapDispatchToProps,
+} from '.';
+
+jest.mock('data/selectors', () => ({
+  /** Mocking to use passed state for validation purposes */
+  assignmentTypes: {
+    allAssignmentTypes: jest.fn(() => (['assignment', 'labs'])),
+  },
+  filters: {
+    selectableAssignmentLabels: jest.fn(() => ([{
+      label: 'assigNment',
+      subsectionLabel: 'subsection',
+      type: 'assignMentType',
+      id: 'subsectionId',
+    }])),
+    assignmentType: jest.fn(() => 'assignMentType'),
+  },
+}));
+
+describe('AssignmentTypeFilter', () => {
+  let props = {
+    assignmentTypes: ['assignMentType1', 'AssigNmentType2'],
+    assignmentFilterOptions: [
+      { label: 'filterLabel1', subsectionLabel: 'filterSubLabel2' },
+      { label: 'filterLabel2', subsectionLabel: 'filterSubLabel1' },
+    ],
+    selectedAssignmentType: 'assigNmentType2',
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      filterAssignmentType: jest.fn(),
+      updateQueryParams: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('behavior', () => {
+      describe('handleChange', () => {
+        let el;
+        const newType = 'new Type';
+        const event = { target: { value: newType } };
+        beforeEach(() => {
+          el = shallow(<AssignmentTypeFilter {...props} />);
+          el.instance().handleChange(event);
+        });
+        it('calls props.filterAssignmentType with new type', () => {
+          expect(props.filterAssignmentType).toHaveBeenCalledWith(
+            newType,
+          );
+        });
+        it('updates queryParams with assignmentType', () => {
+          expect(props.updateQueryParams).toHaveBeenCalledWith({
+            assignmentType: newType,
+          });
+        });
+      });
+    });
+    describe('snapshots', () => {
+      let el;
+      const mockMethods = () => {
+        el.instance().handleChange = jest.fn().mockName('handleChange');
+      };
+      test('smoke test', () => {
+        el = shallow(<AssignmentTypeFilter {...props} />);
+        mockMethods(el);
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+      test('SelectGroup disabled if no assignmentFilterOptions', () => {
+        el = shallow(<AssignmentTypeFilter
+          {...props}
+          assignmentFilterOptions={[]}
+        />);
+        mockMethods(el);
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const state = {
+      assignmentTypes: {
+        results: ['assignMentType1', 'assignMentType2'],
+      },
+      filters: {
+        assignmentType: 'selectedAssignMent',
+        cohort: 'selectedCOHOrt',
+        track: 'SELectedTrack',
+      },
+    };
+    describe('assignmentTypes', () => {
+      it('is selected from assignmentTypes.allAssignmentTypes', () => {
+        expect(
+          mapStateToProps(state).assignmentTypes,
+        ).toEqual(
+          selectors.assignmentTypes.allAssignmentTypes(state),
+        );
+      });
+    });
+    describe('assignmentFilterOptions', () => {
+      it('is selected from filters.selectableAssignmentLabels', () => {
+        expect(
+          mapStateToProps(state).assignmentFilterOptions,
+        ).toEqual(
+          selectors.filters.selectableAssignmentLabels(state),
+        );
+      });
+    });
+    describe('selectedAssignmentType', () => {
+      it('is selected from filters.assignmentType', () => {
+        expect(
+          mapStateToProps(state).selectedAssignmentType,
+        ).toEqual(
+          selectors.filters.assignmentType(state),
+        );
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('filterAssignmentType', () => {
+      expect(mapDispatchToProps.filterAssignmentType).toEqual(
+        actions.filters.update.assignmentType,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
+<React.Fragment>
+  <div
+    className="grade-filter-inputs"
+  >
+    <PercentGroup
+      disabled={false}
+      id="minimum-grade"
+      label="Min Grade"
+      onChange={[MockFunction handleUpdateMin]}
+      value="5"
+    />
+    <PercentGroup
+      disabled={false}
+      id="maximum-grade"
+      label="Max Grade"
+      onChange={[MockFunction handleUpdateMax]}
+      value="92"
+    />
+  </div>
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      onClick={[MockFunction handleApplyClick]}
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</React.Fragment>
+`;

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

@@ -0,0 +1,136 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  Button,
+} from '@edx/paragon';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
+import thunkActions from 'data/thunkActions';
+import PercentGroup from '../PercentGroup';
+
+export class CourseGradeFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleApplyClick = this.handleApplyClick.bind(this);
+    this.handleUpdateMin = this.handleUpdateMin.bind(this);
+    this.handleUpdateMax = this.handleUpdateMax.bind(this);
+    this.updateCourseGradeFilters = this.updateCourseGradeFilters.bind(this);
+  }
+
+  handleApplyClick() {
+    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,
+      courseId: 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: actions.filters.update.courseGradeLimits,
+  getUserGrades: thunkActions.grades.fetchGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CourseGradeFilter);

src/components/Gradebook/GradebookFilters/CourseGradeFilter/test.jsx

@@ -0,0 +1,196 @@
+/* eslint-disable import/no-named-as-default */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import { fetchGrades } from 'data/thunkActions/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({
+            courseGradeMin: props.filterValues.courseGradeMin,
+            courseGradeMax: props.filterValues.courseGradeMax,
+            courseId: 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(actions.filters.update.courseGradeLimits);
+      });
+    });
+    describe('getUserGrades', () => {
+      test('from fetchGrades', () => {
+        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
+      });
+    });
+  });
+});

src/components/Gradebook/GradebookFilters/PercentGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 const PercentGroup = ({
   id,
@@ -30,7 +30,7 @@ PercentGroup.defaultProps = {
 };
 PercentGroup.propTypes = {
   id: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

src/components/Gradebook/GradebookFilters/PercentGroup.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import PercentGroup from './PercentGroup';
+
+describe('PercentGroup', () => {
+  let props = {
+    id: 'group id',
+    label: 'Group Label',
+    value: 'group VALUE',
+    disabled: false,
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      onChange: jest.fn().mockName('props.onChange'),
+    };
+  });
+
+  describe('Component', () => {
+    describe('snapshots', () => {
+      test('basic snapshot', () => {
+        const el = shallow(<PercentGroup {...props} />);
+        expect(el).toMatchSnapshot();
+      });
+      test('disabled', () => {
+        const el = shallow(<PercentGroup {...props} disabled />);
+        expect(el).toMatchSnapshot();
+      });
+    });
+  });
+});

src/components/Gradebook/GradebookFilters/SelectGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 const SelectGroup = ({
   id,
@@ -23,7 +23,7 @@ const SelectGroup = ({
 );
 SelectGroup.propTypes = {
   id: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

src/components/Gradebook/GradebookFilters/SelectGroup.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
 
 import SelectGroup from './SelectGroup';
 
@@ -24,14 +24,15 @@ describe('SelectGroup', () => {
   });
 
   describe('Component', () => {
-    test('rendered with all options and label', () => {
-      render(<SelectGroup {...props} />);
-      expect(screen.getAllByRole('option')).toHaveLength(props.options.length);
-      expect(screen.getByLabelText(props.label)).toBeInTheDocument();
-    });
-    test('disabled', () => {
-      render(<SelectGroup {...props} disabled />);
-      expect(screen.getByRole('combobox')).toBeDisabled();
+    describe('snapshots', () => {
+      test('basic snapshot', () => {
+        const el = shallow(<SelectGroup {...props} />);
+        expect(el).toMatchSnapshot();
+      });
+      test('disabled', () => {
+        const el = shallow(<SelectGroup {...props} disabled />);
+        expect(el).toMatchSnapshot();
+      });
     });
   });
 });

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

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StudentGroupsFilter Component snapshots Cohorts group disabled if no cohorts 1`] = `
+<React.Fragment>
+  <SelectGroup
+    disabled={false}
+    id="Tracks"
+    label="Tracks"
+    onChange={[Function]}
+    options={
+      Array [
+        <option
+          value="Track-All"
+        >
+          Track-All
+        </option>,
+        <option
+          value="TracK1"
+        >
+          TracK1
+        </option>,
+        <option
+          value="TracK2"
+        >
+          TracK2
+        </option>,
+        <option
+          value="TRACK3"
+        >
+          TRACK3
+        </option>,
+      ]
+    }
+    value="TracK2"
+  />
+  <SelectGroup
+    disabled={true}
+    id="Cohorts"
+    label="Cohorts"
+    onChange={[Function]}
+    options={
+      Array [
+        <option
+          value="Cohort-All"
+        >
+          Cohort-All
+        </option>,
+      ]
+    }
+    value="Cohorts"
+  />
+</React.Fragment>
+`;
+
+exports[`StudentGroupsFilter Component snapshots basic snapshot 1`] = `
+<React.Fragment>
+  <SelectGroup
+    disabled={false}
+    id="Tracks"
+    label="Tracks"
+    onChange={[MockFunction updateTracks]}
+    options={
+      Array [
+        <option
+          value="Track-All"
+        >
+          Track-All
+        </option>,
+        <option
+          value="TracK1"
+        >
+          TracK1
+        </option>,
+        <option
+          value="TracK2"
+        >
+          TracK2
+        </option>,
+        <option
+          value="TRACK3"
+        >
+          TRACK3
+        </option>,
+      ]
+    }
+    value="TracK2"
+  />
+  <SelectGroup
+    disabled={false}
+    id="Cohorts"
+    label="Cohorts"
+    onChange={[MockFunction updateCohorts]}
+    options={
+      Array [
+        <option
+          value="Cohort-All"
+        >
+          Cohort-All
+        </option>,
+        <option
+          value="cohorT1"
+        >
+          cohorT1
+        </option>,
+        <option
+          value="cohorT2"
+        >
+          cohorT2
+        </option>,
+        <option
+          value="cohorT3"
+        >
+          cohorT3
+        </option>,
+      ]
+    }
+    value="cohorT3"
+  />
+</React.Fragment>
+`;
+
+exports[`StudentGroupsFilter Component snapshots mapCohortsEntries cohort options: [Cohort-All, <{slug, name}...>] 1`] = `
+Array [
+  <option
+    value="Cohort-All"
+  >
+    Cohort-All
+  </option>,
+  <option
+    value="cohorT1"
+  >
+    cohorT1
+  </option>,
+  <option
+    value="cohorT2"
+  >
+    cohorT2
+  </option>,
+  <option
+    value="cohorT3"
+  >
+    cohorT3
+  </option>,
+]
+`;
+
+exports[`StudentGroupsFilter Component snapshots mapTracksEntries cohort options: [Track-All, <{id, name}...>] 1`] = `
+Array [
+  <option
+    value="Track-All"
+  >
+    Track-All
+  </option>,
+  <option
+    value="TracK1"
+  >
+    TracK1
+  </option>,
+  <option
+    value="TracK2"
+  >
+    TracK2
+  </option>,
+  <option
+    value="TRACK3"
+  >
+    TRACK3
+  </option>,
+]
+`;

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

@@ -0,0 +1,154 @@
+/* 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 selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+
+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: thunkActions.grades.fetchGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter);

src/components/Gradebook/GradebookFilters/StudentGroupsFilter/test.jsx

@@ -0,0 +1,238 @@
+/* eslint-disable import/no-named-as-default */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { fetchGrades } from 'data/thunkActions/grades';
+import {
+  StudentGroupsFilter,
+  mapStateToProps,
+  mapDispatchToProps,
+} from '.';
+
+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' },
+      { name: 'TRACK3', slug: 'TRACK3_slug' },
+    ],
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      getUserGrades: jest.fn(),
+      updateQueryParams: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('snapshots', () => {
+      let el;
+      beforeEach(() => {
+        el = shallow(<StudentGroupsFilter {...props} />);
+      });
+      test('basic snapshot', () => {
+        el.instance().updateTracks = jest.fn().mockName(
+          'updateTracks',
+        );
+        el.instance().updateCohorts = jest.fn().mockName(
+          'updateCohorts',
+        );
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+      test('Cohorts group disabled if no cohorts', () => {
+        el.setProps({ cohorts: [] });
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+      describe('mapCohortsEntries', () => {
+        test('cohort options: [Cohort-All, <{slug, name}...>]', () => {
+          expect(el.instance().mapCohortsEntries()).toMatchSnapshot();
+        });
+      });
+      describe('mapTracksEntries', () => {
+        test('cohort options: [Track-All, <{id, name}...>]', () => {
+          expect(el.instance().mapTracksEntries()).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('behavior', () => {
+      let el;
+      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(
+            el.instance().selectedCohortIdFromEvent(
+              { target: { value: props.cohorts[1].name } },
+            ),
+          ).toEqual(props.cohorts[1].id.toString());
+        });
+        it('returns null if no matching cohort is found', () => {
+          expect(
+            el.instance().selectedCohortIdFromEvent(
+              { target: { value: 'FAKE' } },
+            ),
+          ).toEqual(null);
+        });
+      });
+      describe('selectedTrackSlugFromEvent', () => {
+        it('returns the slug of the track with the name matching the event', () => {
+          expect(
+            el.instance().selectedTrackSlugFromEvent(
+              { target: { value: props.tracks[1].name } },
+            ),
+          ).toEqual(props.tracks[1].slug);
+        });
+        it('returns null if no matching track is found', () => {
+          expect(
+            el.instance().selectedTrackSlugFromEvent(
+              { target: { value: 'FAKE' } },
+            ),
+          ).toEqual(null);
+        });
+      });
+      describe('updateTracks', () => {
+        const selectedSlug = 'SLUG';
+        beforeEach(() => {
+          el = shallow(<StudentGroupsFilter {...props} />);
+          jest.spyOn(
+            el.instance(),
+            'selectedTrackSlugFromEvent',
+          ).mockReturnValue(selectedSlug);
+          el.instance().updateTracks({ target: {} });
+        });
+        it('calls getUserGrades with selection', () => {
+          expect(props.getUserGrades).toHaveBeenCalledWith(
+            props.courseId,
+            props.selectedCohort,
+            selectedSlug,
+            props.selectedAssignmentType,
+          );
+        });
+        it('updates queryParams with track value', () => {
+          expect(props.updateQueryParams).toHaveBeenCalledWith({
+            track: selectedSlug,
+          });
+        });
+      });
+      describe('updateCohorts', () => {
+        const selectedId = 23;
+        beforeEach(() => {
+          el = shallow(<StudentGroupsFilter {...props} />);
+          jest.spyOn(
+            el.instance(),
+            'selectedCohortIdFromEvent',
+          ).mockReturnValue(selectedId);
+          el.instance().updateCohorts({ target: {} });
+        });
+        it('calls getUserGrades with selection', () => {
+          expect(props.getUserGrades).toHaveBeenCalledWith(
+            props.courseId,
+            selectedId,
+            props.selectedTrack,
+            props.selectedAssignmentType,
+          );
+        });
+        it('updates queryParams with cohort value', () => {
+          expect(props.updateQueryParams).toHaveBeenCalledWith({
+            cohort: selectedId,
+          });
+        });
+      });
+    });
+  });
+  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,
+        );
+      });
+    });
+    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('tracks', () => {
+      test('drawn from tracks.results', () => {
+        expect(mapStateToProps(state).tracks).toEqual(
+          state.tracks.results,
+        );
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    describe('getUserGrades', () => {
+      test('from fetchGrades', () => {
+        expect(mapDispatchToProps.getUserGrades).toEqual(fetchGrades);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PercentGroup Component snapshots basic snapshot 1`] = `
+<div
+  className="percent-group"
+>
+  <FormGroup
+    as="div"
+    controlId="group id"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      Group Label
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={false}
+      max={100}
+      min={0}
+      onChange={[MockFunction props.onChange]}
+      plaintext={false}
+      step={1}
+      type="number"
+      value="group VALUE"
+    />
+  </FormGroup>
+  <span
+    className="input-percent-label"
+  >
+    %
+  </span>
+</div>
+`;
+
+exports[`PercentGroup Component snapshots disabled 1`] = `
+<div
+  className="percent-group"
+>
+  <FormGroup
+    as="div"
+    controlId="group id"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      Group Label
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={true}
+      max={100}
+      min={0}
+      onChange={[MockFunction props.onChange]}
+      plaintext={false}
+      step={1}
+      type="number"
+      value="group VALUE"
+    />
+  </FormGroup>
+  <span
+    className="input-percent-label"
+  >
+    %
+  </span>
+</div>
+`;

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

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectGroup Component snapshots basic snapshot 1`] = `
+<div
+  className="student-filters"
+>
+  <FormGroup
+    as="div"
+    controlId="group id"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      Group Label
+    </FormLabel>
+    <ForwardRef
+      as="select"
+      disabled={false}
+      onChange={[MockFunction props.onChange]}
+      plaintext={false}
+      value="group VALUE"
+    >
+      <option
+        key="opt1"
+        value="opt1"
+      >
+        Option 1
+      </option>
+      <option
+        key="opt2"
+        value="opt2"
+      >
+        Option 2
+      </option>
+      <option
+        key="opt3"
+        value="opt3"
+      >
+        Option 3
+      </option>
+    </ForwardRef>
+  </FormGroup>
+</div>
+`;
+
+exports[`SelectGroup Component snapshots disabled 1`] = `
+<div
+  className="student-filters"
+>
+  <FormGroup
+    as="div"
+    controlId="group id"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      Group Label
+    </FormLabel>
+    <ForwardRef
+      as="select"
+      disabled={true}
+      onChange={[MockFunction props.onChange]}
+      plaintext={false}
+      value="group VALUE"
+    >
+      <option
+        key="opt1"
+        value="opt1"
+      >
+        Option 1
+      </option>
+      <option
+        key="opt2"
+        value="opt2"
+      >
+        Option 2
+      </option>
+      <option
+        key="opt3"
+        value="opt3"
+      >
+        Option 3
+      </option>
+    </ForwardRef>
+  </FormGroup>
+</div>
+`;

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

@@ -0,0 +1,75 @@
+// 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/GradebookFilters/index.jsx

@@ -0,0 +1,120 @@
+/* eslint-disable react/sort-comp, import/no-named-as-default */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Collapsible, Form } from '@edx/paragon';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import AssignmentTypeFilter from './AssignmentTypeFilter';
+import AssignmentFilter from './AssignmentFilter';
+import AssignmentGradeFilter from './AssignmentGradeFilter';
+import CourseGradeFilter from './CourseGradeFilter';
+import StudentGroupsFilter from './StudentGroupsFilter';
+
+export class GradebookFilters extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      includeCourseRoleMembers: this.props.includeCourseRoleMembers,
+    };
+    this.handleIncludeTeamMembersChange = this.handleIncludeTeamMembersChange.bind(this);
+  }
+
+  handleIncludeTeamMembersChange(event) {
+    const includeCourseRoleMembers = event.target.checked;
+    this.setState({ includeCourseRoleMembers });
+    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
+    this.props.updateQueryParams({ includeCourseRoleMembers });
+  }
+
+  collapsibleGroup = (title, content) => (
+    <Collapsible title={title} defaultOpen className="filter-group mb-3">
+      {content}
+    </Collapsible>
+  );
+
+  render() {
+    const {
+      courseId,
+      filterValues,
+      setFilters,
+      updateQueryParams,
+    } = this.props;
+    return (
+      <>
+        {this.collapsibleGroup('Assignments', (
+          <div>
+            <AssignmentTypeFilter
+              updateQueryParams={updateQueryParams}
+            />
+            <AssignmentFilter
+              courseId={courseId}
+              updateQueryParams={updateQueryParams}
+            />
+            <AssignmentGradeFilter
+              {...{
+                courseId,
+                filterValues,
+                setFilters,
+                updateQueryParams,
+              }}
+            />
+          </div>
+        ))}
+        {this.collapsibleGroup('Overall Grade', (
+          <CourseGradeFilter
+            {...{
+              filterValues,
+              setFilters,
+              courseId,
+              updateQueryParams,
+            }}
+          />
+        ))}
+        {this.collapsibleGroup('Student Groups', (
+          <StudentGroupsFilter
+            courseId={courseId}
+            updateQueryParams={updateQueryParams}
+          />
+        ))}
+        {this.collapsibleGroup('Include Course Team Members', (
+          <Form.Checkbox
+            checked={this.state.includeCourseRoleMembers}
+            onChange={this.handleIncludeTeamMembersChange}
+          >
+            Include Course Team Members
+          </Form.Checkbox>
+        ))}
+      </>
+    );
+  }
+}
+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,
+  includeCourseRoleMembers: PropTypes.bool,
+  updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
+  updateQueryParams: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  includeCourseRoleMembers: selectors.filters.includeCourseRoleMembers(state),
+});
+
+export const mapDispatchToProps = {
+  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookFilters);

src/components/Gradebook/GradebookFilters/test.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+
+import {
+  GradebookFilters,
+  mapStateToProps,
+  mapDispatchToProps,
+} from '.';
+
+jest.mock('@edx/paragon', () => ({
+  Collapsible: 'Collapsible',
+  Form: {
+    Checkbox: 'Checkbox',
+  },
+}));
+
+describe('GradebookFilters', () => {
+  let props = {
+    courseId: '12345',
+    filterValues: {
+      assignmentGradeMin: '10',
+      assignmentGradeMax: '90',
+      courseGradeMin: '20',
+      courseGradeMax: '80',
+    },
+    includeCourseRoleMembers: true,
+  };
+
+  beforeEach(() => {
+    props = {
+      ...props,
+      updateQueryParams: jest.fn(),
+      updateIncludeCourseRoleMembers: jest.fn(),
+      setFilters: jest.fn(),
+    };
+  });
+
+  describe('Component', () => {
+    describe('behavior', () => {
+      describe('handleIncludeTeamMembersChange', () => {
+        let el;
+        beforeEach(() => {
+          el = shallow(<GradebookFilters {...props} />);
+          el.instance().setState = jest.fn();
+        });
+        it('calls setState with newVal', () => {
+          el.instance().handleIncludeTeamMembersChange(
+            { target: { checked: true } },
+          );
+          expect(
+            el.instance().setState,
+          ).toHaveBeenCalledWith({ includeCourseRoleMembers: true });
+        });
+        it('calls props.updateIncludeCourseRoleMembers with newVal', () => {
+          el.instance().handleIncludeTeamMembersChange(
+            { target: { checked: false } },
+          );
+          expect(
+            props.updateIncludeCourseRoleMembers,
+          ).toHaveBeenCalledWith(false);
+        });
+        it('calls props.updateQueryParams with newVal', () => {
+          el.instance().handleIncludeTeamMembersChange(
+            { target: { checked: true } },
+          );
+          expect(
+            props.updateQueryParams,
+          ).toHaveBeenCalledWith({ includeCourseRoleMembers: true });
+        });
+      });
+    });
+    describe('snapshots', () => {
+      test('basic snapshot', () => {
+        const el = shallow(<GradebookFilters {...props} />);
+        el.instance().handleIncludeTeamMembersChange = jest.fn().mockName(
+          'handleIncludeTeamMembersChange',
+        );
+        expect(el.instance().render()).toMatchSnapshot();
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const state = {
+      filters: {
+        includeCourseRoleMembers: 'plz do',
+      },
+    };
+    describe('includeCourseRoleMembers', () => {
+      it('is drawn from filters.includeCourseRoleMembers', () => {
+        expect(mapStateToProps(state).includeCourseRoleMembers).toEqual(
+          state.filters.includeCourseRoleMembers,
+        );
+      });
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('updateIncludeCourseRoleMembers', () => {
+      expect(mapDispatchToProps.updateIncludeCourseRoleMembers).toEqual(
+        actions.filters.update.includeCourseRoleMembers,
+      );
+    });
+  });
+});

src/components/Gradebook/GradebookTable.jsx

@@ -0,0 +1,234 @@
+/* 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 { EMAIL_HEADING, TOTAL_COURSE_GRADE_HEADING, USERNAME_HEADING } from 'data/constants/grades';
+import selectors from 'data/selectors';
+import { formatDateForDisplay } from 'data/actions/utils';
+import thunkActions from 'data/thunkActions';
+
+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: thunkActions.grades.fetchGradeOverrideHistory,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookTable);

src/components/Gradebook/SearchControls.jsx

@@ -0,0 +1,111 @@
+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 thunkActions from 'data/thunkActions';
+
+/**
+ * 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: thunkActions.grades.fetchGrades,
+  searchForUser: thunkActions.grades.fetchMatchingUserGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchControls);

src/components/Gradebook/SearchControls.test.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  fetchGrades,
+  fetchMatchingUserGrades,
+} from '../../data/thunkActions/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

@@ -0,0 +1,72 @@
+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 actions from 'data/actions';
+
+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: actions.grades.banner.close,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StatusAlerts);

src/components/Gradebook/StatusAlerts.test.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import {
+  StatusAlerts,
+  mapDispatchToProps,
+  mapStateToProps,
+  maxCourseGradeInvalidMessage,
+  minCourseGradeInvalidMessage,
+} from './StatusAlerts';
+
+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(
+        actions.grades.banner.close,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,37 @@
+// 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

@@ -0,0 +1,18 @@
+// 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/gradebook.scss

@@ -24,18 +24,9 @@
     .search-help-text {
         margin-left: 20px;
     }
-    h3 {
+    h4 {
         font-weight: bold;
-        margin-top: 0rem;
-    }
-    .import-grades-btn {
-      margin-left: 20px;
-    }
-    .intervention-report-description {
-      margin-right: 40px;
-    }
-    h4.step-message-1 {
-      margin-top: 40px;
+        margin-top: 2rem;
     }
 }
 
@@ -46,7 +37,6 @@
 }
 .grade-history-header{
     float: left;
-    min-width: 170px;
 }
 
 .grade-history-assignment{
@@ -66,11 +56,106 @@
 .gradebook-container {
     width: 100%;
     overflow-x: auto;
-    max-height: 600px;
+    height: 600px;
     overflow-y: auto;
+    word-break: break-word;
     position: relative;
 }
 
+.gbook { 
+    width: 100%;
+
+    .grade-button {
+        text-decoration: underline;
+    }
+
+    .student-key {
+        font-size: 14px;
+    }
+
+    #courseGradeTooltipIcon {
+      float: right;
+    }
+
+    .table thead tr {
+        min-height: 60px;
+        &:nth-child(1) {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: white;
+          th {
+            background-color: white;
+            border-bottom: 1px solid $gray_200;
+          }
+        }
+    }
+
+    thead, tbody, tr, td, th {
+      display: block;
+      word-break: break-word;
+    }
+
+    .table tr th:first-child {
+        border-bottom: none;
+    }
+    .table tr th:first-child,
+    .table tr td:first-child {
+        position: sticky;
+        left: 0;
+        z-index: 1; // to float over the following children in the side-scrolling case
+        background: white;
+    }
+
+    .table tr {
+      th:nth-child(1),
+      td:nth-child(1),
+      th:nth-child(2),
+      td:nth-child(2) {
+        width: 240px;
+      }
+      th:nth-last-of-type(1) {
+        width: 150px;
+      }
+      th, td {
+        width: 120px;
+      }
+    }
+    .table tbody th {
+        font-weight: normal;
+    }
+
+    .table {
+      overflow-x: hidden;
+
+      height: 100%;
+
+      tbody {
+        overflow-y: auto;
+        display: block;
+      }
+
+      thead, tbody tr {
+        display: table;
+        table-layout: fixed;
+      }
+
+      th {
+          vertical-align: top;
+          font-size: 14px;
+      }
+    }
+
+    .link-style {
+        color: #0075b4;
+        &:hover, &:focus {
+            color: #004368;
+            text-decoration: underline;
+        }
+    }
+
+}
+
 .form-group, .pgn__form-group {
   label {
     font-weight: bold;
@@ -109,48 +194,3 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
 }
-
-select#ScoreView.form-control {
-  padding-right: 26px;
-}
-
-[dir=rtl] #course-grade-tooltip .arrow {
-    right: initial;
-    left: 0;
-    
-    &:before {
-        border-width: 0.4rem 0.4rem 0.4rem 0;
-        border-right-color: var(--pgn-color-black);
-    }
-}
-
-#edit-filters-btn {
-     @media (--pgn-size-breakpoint-max-width-xs) {
-        width: 100%;
-        margin-bottom: 1rem;
-    }
-}
-
-.search-container {
-     @media (--pgn-size-breakpoint-max-width-xs) {
-        width: 100%;
-    }
-}
-
-.pgn__modal-body-content .pgn__data-table-layout-wrapper {
-    @media (--pgn-size-breakpoint-max-width-xs) {
-        clear: both;
-        padding: 1rem 0;
-    }
-}
-
-.page-gradebook {
-    position: relative;
-
-    .sidebar-container {
-        position: relative;
-    }
-    aside.sidebar {
-        overflow: auto;
-    }
-}

src/components/Gradebook/index.jsx

@@ -0,0 +1,319 @@
+/* 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/hooks.js

@@ -1,33 +0,0 @@
-import {
-  selectors,
-  actions,
-  thunkActions,
-} from 'data/redux/hooks';
-
-export const useAssignmentFilterData = ({
-  updateQueryParams,
-}) => {
-  const assignmentFilterOptions = selectors.filters.useSelectableAssignmentLabels();
-  const selectedAssignmentLabel = selectors.filters.useSelectedAssignmentLabel() || '';
-
-  const updateAssignmentFilter = actions.filters.useUpdateAssignment();
-  const conditionalFetch = thunkActions.grades.useFetchGradesIfAssignmentGradeFiltersSet();
-
-  const handleChange = ({ target: { value: assignment } }) => {
-    const selectedFilterOption = assignmentFilterOptions.find(
-      ({ label }) => label === assignment,
-    );
-    const { type, id } = selectedFilterOption || {};
-    updateAssignmentFilter({ label: assignment, type, id });
-    updateQueryParams({ assignment: id });
-    conditionalFetch();
-  };
-
-  return {
-    handleChange,
-    selectedAssignmentLabel,
-    assignmentFilterOptions,
-  };
-};
-
-export default useAssignmentFilterData;

src/components/GradebookFilters/AssignmentFilter/hooks.test.js

@@ -1,88 +0,0 @@
-import { selectors, actions, thunkActions } from 'data/redux/hooks';
-
-import useAssignmentFilterData from './hooks';
-
-jest.mock('data/redux/hooks', () => ({
-  selectors: {
-    filters: {
-      useSelectableAssignmentLabels: jest.fn(),
-      useSelectedAssignmentLabel: jest.fn(),
-    },
-  },
-  actions: {
-    filters: { useUpdateAssignment: jest.fn() },
-  },
-  thunkActions: {
-    grades: { useFetchGradesIfAssignmentGradeFiltersSet: jest.fn() },
-  },
-}));
-
-let out;
-const testKey = 'test-key';
-const event = { target: { value: testKey } };
-const testId = 'test-id';
-const testType = 'test-type';
-
-const testLabel = { label: testKey, id: testId, type: testType };
-const selectableAssignmentLabels = [
-  { label: 'some' },
-  { label: 'test' },
-  { label: 'labels' },
-  testLabel,
-];
-const selectedAssignmentLabel = 'test-assignment-label';
-selectors.filters.useSelectableAssignmentLabels.mockReturnValue(selectableAssignmentLabels);
-selectors.filters.useSelectedAssignmentLabel.mockReturnValue(selectedAssignmentLabel);
-
-const updateAssignment = jest.fn();
-const fetch = jest.fn();
-actions.filters.useUpdateAssignment.mockReturnValue(updateAssignment);
-thunkActions.grades.useFetchGradesIfAssignmentGradeFiltersSet.mockReturnValue(fetch);
-
-const updateQueryParams = jest.fn();
-
-describe('useAssignmentFilterData hook', () => {
-  beforeEach(() => {
-    out = useAssignmentFilterData({ updateQueryParams });
-  });
-  describe('behavior', () => {
-    it('initializes redux hooks', () => {
-      expect(selectors.filters.useSelectableAssignmentLabels).toHaveBeenCalledWith();
-      expect(selectors.filters.useSelectedAssignmentLabel).toHaveBeenCalledWith();
-      expect(actions.filters.useUpdateAssignment).toHaveBeenCalledWith();
-      expect(thunkActions.grades.useFetchGradesIfAssignmentGradeFiltersSet)
-        .toHaveBeenCalledWith();
-    });
-  });
-  describe('output', () => {
-    describe('handleEvent', () => {
-      beforeEach(() => {
-        out.handleChange(event);
-      });
-      it('updates assignment filter with selected filter', () => {
-        expect(updateAssignment).toHaveBeenCalledWith(testLabel);
-      });
-      it('updates queryParams', () => {
-        expect(updateQueryParams).toHaveBeenCalledWith({ assignment: testId });
-      });
-      it('updates assignment filter with only label if no match', () => {
-        out.handleChange({ target: { value: 'no-match' } });
-        expect(updateAssignment).toHaveBeenCalledWith({ label: 'no-match' });
-      });
-      it('calls conditional fetch', () => {
-        expect(fetch).toHaveBeenCalled();
-      });
-    });
-    it('passes selectedAssignmentLabel from hook', () => {
-      expect(out.selectedAssignmentLabel).toEqual(selectedAssignmentLabel);
-    });
-    test('selectedAssignmentLabel is empty string if not set', () => {
-      selectors.filters.useSelectedAssignmentLabel.mockReturnValue(undefined);
-      out = useAssignmentFilterData({ updateQueryParams });
-      expect(out.selectedAssignmentLabel).toEqual('');
-    });
-    it('passes assignmentFilterOptions from hook', () => {
-      expect(out.assignmentFilterOptions).toEqual(selectableAssignmentLabels);
-    });
-  });
-});

src/components/GradebookFilters/AssignmentFilter/index.jsx

@@ -1,44 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import messages from '../messages';
-import SelectGroup from '../SelectGroup';
-import useAssignmentFilterData from './hooks';
-
-const AssignmentFilter = ({ updateQueryParams }) => {
-  const {
-    handleChange,
-    selectedAssignmentLabel,
-    assignmentFilterOptions,
-  } = useAssignmentFilterData({ updateQueryParams });
-  const { formatMessage } = useIntl();
-  const filterOptions = assignmentFilterOptions.map(({ label, subsectionLabel }) => (
-    <option key={label} value={label}>
-      {label}: {subsectionLabel}
-    </option>
-  ));
-  return (
-    <div className="student-filters">
-      <SelectGroup
-        id="assignment"
-        label={formatMessage(messages.assignment)}
-        value={selectedAssignmentLabel}
-        onChange={handleChange}
-        disabled={assignmentFilterOptions.length === 0}
-        options={[
-          <option key="0" value="">All</option>,
-          ...filterOptions,
-        ]}
-      />
-    </div>
-  );
-};
-
-AssignmentFilter.propTypes = {
-  updateQueryParams: PropTypes.func.isRequired,
-};
-
-export default AssignmentFilter;

src/components/GradebookFilters/AssignmentFilter/index.test.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { render, screen, initializeMocks } from 'testUtilsExtra';
-
-import useAssignmentFilterData from './hooks';
-import AssignmentFilter from '.';
-
-jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
-
-const handleChange = jest.fn();
-const selectedAssignmentLabel = 'test-label';
-const assignmentFilterOptions = [
-  { label: 'label1', subsectionLabel: 'sLabel1' },
-  { label: 'label2', subsectionLabel: 'sLabel2' },
-  { label: 'label3', subsectionLabel: 'sLabel3' },
-  { label: 'label4', subsectionLabel: 'sLabel4' },
-];
-useAssignmentFilterData.mockReturnValue({
-  handleChange,
-  selectedAssignmentLabel,
-  assignmentFilterOptions,
-});
-
-const updateQueryParams = jest.fn();
-
-describe('AssignmentFilter component', () => {
-  beforeAll(() => {
-    initializeMocks();
-    render(<AssignmentFilter updateQueryParams={updateQueryParams} />);
-  });
-  describe('render', () => {
-    test('filter options', () => {
-      expect(screen.getByRole('combobox', { name: 'Assignment' })).toBeInTheDocument();
-      expect(screen.getAllByRole('option')).toHaveLength(assignmentFilterOptions.length + 1); // +1 for the default option
-      expect(screen.getAllByRole('option')[assignmentFilterOptions.length]).toHaveTextContent(assignmentFilterOptions[assignmentFilterOptions.length - 1].label);
-    });
-  });
-});

src/components/GradebookFilters/AssignmentGradeFilter/hooks.js

@@ -1,36 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import { selectors, actions, thunkActions } from 'data/redux/hooks';
-
-const useAssignmentGradeFilterData = ({ updateQueryParams }) => {
-  const localAssignmentLimits = selectors.app.useAssignmentGradeLimits();
-  const selectedAssignment = selectors.filters.useSelectedAssignmentLabel();
-  const fetchGrades = thunkActions.grades.useFetchGrades();
-  const setFilter = actions.app.useSetLocalFilter();
-  const updateAssignmentLimits = actions.filters.useUpdateAssignmentLimits();
-
-  const handleSubmit = () => {
-    updateAssignmentLimits(localAssignmentLimits);
-    fetchGrades();
-    updateQueryParams(localAssignmentLimits);
-  };
-
-  const handleSetMax = ({ target: { value } }) => {
-    setFilter({ assignmentGradeMax: value });
-  };
-
-  const handleSetMin = ({ target: { value } }) => {
-    setFilter({ assignmentGradeMin: value });
-  };
-
-  const { assignmentGradeMax, assignmentGradeMin } = localAssignmentLimits;
-  return {
-    assignmentGradeMin,
-    assignmentGradeMax,
-    selectedAssignment,
-    handleSetMax,
-    handleSetMin,
-    handleSubmit,
-  };
-};
-
-export default useAssignmentGradeFilterData;

src/components/GradebookFilters/AssignmentGradeFilter/hooks.test.js

@@ -1,81 +0,0 @@
-import { selectors, actions, thunkActions } from 'data/redux/hooks';
-
-import useAssignmentGradeFilterData from './hooks';
-
-jest.mock('data/redux/hooks', () => ({
-  selectors: {
-    app: { useAssignmentGradeLimits: jest.fn() },
-    filters: { useSelectedAssignmentLabel: jest.fn() },
-  },
-  actions: {
-    app: { useSetLocalFilter: jest.fn() },
-    filters: { useUpdateAssignmentLimits: jest.fn() },
-  },
-  thunkActions: {
-    grades: { useFetchGrades: jest.fn() },
-  },
-}));
-
-let out;
-
-const assignmentGradeLimits = { assignmentGradeMax: 200, assignmentGradeMin: 3 };
-const selectedAssignmentLabel = 'test-assignment-label';
-selectors.app.useAssignmentGradeLimits.mockReturnValue(assignmentGradeLimits);
-selectors.filters.useSelectedAssignmentLabel.mockReturnValue(selectedAssignmentLabel);
-
-const setLocalFilter = jest.fn();
-const updateAssignmentLimits = jest.fn();
-const fetch = jest.fn();
-actions.app.useSetLocalFilter.mockReturnValue(setLocalFilter);
-actions.filters.useUpdateAssignmentLimits.mockReturnValue(updateAssignmentLimits);
-thunkActions.grades.useFetchGrades.mockReturnValue(fetch);
-
-const testValue = 42;
-
-const updateQueryParams = jest.fn();
-
-describe('useAssignmentFilterData hook', () => {
-  beforeEach(() => {
-    out = useAssignmentGradeFilterData({ updateQueryParams });
-  });
-  describe('behavior', () => {
-    it('initializes redux hooks', () => {
-      expect(selectors.app.useAssignmentGradeLimits).toHaveBeenCalledWith();
-      expect(selectors.filters.useSelectedAssignmentLabel).toHaveBeenCalledWith();
-      expect(actions.app.useSetLocalFilter).toHaveBeenCalledWith();
-      expect(actions.filters.useUpdateAssignmentLimits).toHaveBeenCalledWith();
-      expect(thunkActions.grades.useFetchGrades).toHaveBeenCalledWith();
-    });
-  });
-  describe('output', () => {
-    describe('handleSubmit', () => {
-      beforeEach(() => {
-        out.handleSubmit();
-      });
-      it('updates assignment limits filter', () => {
-        expect(updateAssignmentLimits).toHaveBeenCalledWith(assignmentGradeLimits);
-      });
-      it('updates queryParams', () => {
-        expect(updateQueryParams).toHaveBeenCalledWith(assignmentGradeLimits);
-      });
-      it('calls conditional fetch', () => {
-        expect(fetch).toHaveBeenCalled();
-      });
-    });
-    test('handleSetMax sets assignmentGradeMax', () => {
-      out.handleSetMax({ target: { value: testValue } });
-      expect(setLocalFilter).toHaveBeenCalledWith({ assignmentGradeMax: testValue });
-    });
-    test('handleSetMin sets assignmentGradeMin', () => {
-      out.handleSetMin({ target: { value: testValue } });
-      expect(setLocalFilter).toHaveBeenCalledWith({ assignmentGradeMin: testValue });
-    });
-    it('passes selectedAssignment from hook', () => {
-      expect(out.selectedAssignment).toEqual(selectedAssignmentLabel);
-    });
-    it('passes assignmentGradeMin and assignmentGradeMax from hook', () => {
-      expect(out.assignmentGradeMax).toEqual(assignmentGradeLimits.assignmentGradeMax);
-      expect(out.assignmentGradeMin).toEqual(assignmentGradeLimits.assignmentGradeMin);
-    });
-  });
-});

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
-
-import useAssignmentGradeFilterData from './hooks';
-import messages from '../messages';
-import PercentGroup from '../PercentGroup';
-
-export const AssignmentGradeFilter = ({ updateQueryParams }) => {
-  const {
-    assignmentGradeMin,
-    assignmentGradeMax,
-    selectedAssignment,
-    handleSetMax,
-    handleSetMin,
-    handleSubmit,
-  } = useAssignmentGradeFilterData({ updateQueryParams });
-  const { formatMessage } = useIntl();
-  return (
-    <div className="grade-filter-inputs">
-      <PercentGroup
-        id="assignmentGradeMin"
-        label={formatMessage(messages.minGrade)}
-        value={assignmentGradeMin}
-        disabled={!selectedAssignment}
-        onChange={handleSetMin}
-      />
-      <PercentGroup
-        id="assignmentGradeMax"
-        label={formatMessage(messages.maxGrade)}
-        value={assignmentGradeMax}
-        disabled={!selectedAssignment}
-        onChange={handleSetMax}
-      />
-      <div className="grade-filter-action">
-        <Button
-          type="submit"
-          variant="outline-secondary"
-          name="assignmentGradeMinMax"
-          disabled={!selectedAssignment}
-          onClick={handleSubmit}
-        >
-          {formatMessage(messages.apply)}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-AssignmentGradeFilter.propTypes = {
-  updateQueryParams: PropTypes.func.isRequired,
-};
-
-export default AssignmentGradeFilter;

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

@@ -1,74 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import useAssignmentGradeFilterData from './hooks';
-import AssignmentFilter from '.';
-import { renderWithIntl } from '../../../testUtilsExtra';
-
-jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
-
-const hookData = {
-  handleSubmit: jest.fn(),
-  handleSetMax: jest.fn(),
-  handleSetMin: jest.fn(),
-  selectedAssignment: 'test-assignment',
-  assignmentGradeMax: 300,
-  assignmentGradeMin: 23,
-};
-useAssignmentGradeFilterData.mockReturnValue(hookData);
-
-const updateQueryParams = jest.fn();
-
-describe('AssignmentFilter component', () => {
-  describe('behavior', () => {
-    it('initializes hooks', () => {
-      renderWithIntl(<AssignmentFilter updateQueryParams={updateQueryParams} />);
-      expect(useAssignmentGradeFilterData).toHaveBeenCalledWith({ updateQueryParams });
-    });
-  });
-  describe('render', () => {
-    describe('with selected assignment', () => {
-      beforeEach(() => {
-        jest.clearAllMocks();
-        renderWithIntl(<AssignmentFilter updateQueryParams={updateQueryParams} />);
-      });
-      it('renders a PercentGroup for both Max and Min filters', async () => {
-        const user = userEvent.setup();
-        const minGradeInput = screen.getByRole('spinbutton', { name: /Min Grade/i });
-        const maxGradeInput = screen.getByRole('spinbutton', { name: /Max Grade/i });
-        expect(minGradeInput).toBeInTheDocument();
-        expect(maxGradeInput).toBeInTheDocument();
-        expect(minGradeInput).toBeEnabled();
-        expect(maxGradeInput).toBeEnabled();
-        await user.type(minGradeInput, '25');
-        expect(hookData.handleSetMin).toHaveBeenCalled();
-        await user.type(maxGradeInput, '50');
-        expect(hookData.handleSetMax).toHaveBeenCalled();
-      });
-      it('renders a submit button', async () => {
-        const user = userEvent.setup();
-        const submitButton = screen.getByRole('button', { name: /Apply/ });
-        expect(submitButton).toBeInTheDocument();
-        expect(submitButton).not.toHaveAttribute('disabled');
-        await user.click(submitButton);
-        expect(hookData.handleSubmit).toHaveBeenCalled();
-      });
-    });
-    describe('without selected assignment', () => {
-      beforeEach(() => {
-        useAssignmentGradeFilterData.mockReturnValueOnce({
-          ...hookData,
-          selectedAssignment: null,
-        });
-        renderWithIntl(<AssignmentFilter updateQueryParams={updateQueryParams} />);
-      });
-      it('disables controls', () => {
-        const minGrade = screen.getByRole('spinbutton', { name: /Min Grade/ });
-        const maxGrade = screen.getByRole('spinbutton', { name: /Max Grade/ });
-        expect(minGrade).toHaveAttribute('disabled');
-        expect(maxGrade).toHaveAttribute('disabled');
-      });
-    });
-  });
-});

src/components/GradebookFilters/AssignmentTypeFilter/hooks.js

@@ -1,22 +0,0 @@
-import { selectors, actions } from 'data/redux/hooks';
-
-export const useAssignmentTypeFilterData = ({ updateQueryParams }) => {
-  const assignmentTypes = selectors.assignmentTypes.useAllAssignmentTypes() || {};
-  const assignmentFilterOptions = selectors.filters.useSelectableAssignmentLabels();
-  const selectedAssignmentType = selectors.filters.useAssignmentType() || '';
-  const filterAssignmentType = actions.filters.useUpdateAssignmentType();
-
-  const handleChange = (event) => {
-    const assignmentType = event.target.value;
-    filterAssignmentType(assignmentType);
-    updateQueryParams({ assignmentType });
-  };
-
-  return {
-    assignmentTypes,
-    handleChange,
-    isDisabled: assignmentFilterOptions.length === 0,
-    selectedAssignmentType,
-  };
-};
-export default useAssignmentTypeFilterData;

src/components/GradebookFilters/AssignmentTypeFilter/hooks.test.js

@@ -1,92 +0,0 @@
-import { selectors, actions } from 'data/redux/hooks';
-
-import useAssignmentTypeFilterData from './hooks';
-
-jest.mock('data/redux/hooks', () => ({
-  selectors: {
-    assignmentTypes: {
-      useAllAssignmentTypes: jest.fn(),
-    },
-    filters: {
-      useSelectableAssignmentLabels: jest.fn(),
-      useAssignmentType: jest.fn(),
-    },
-  },
-  actions: {
-    filters: { useUpdateAssignmentType: jest.fn() },
-  },
-}));
-
-let out;
-const testId = 'test-id';
-const testKey = 'test-key';
-
-const testType = 'test-type';
-const allTypes = [testType, 'and', 'some', 'other', 'types'];
-selectors.assignmentTypes.useAllAssignmentTypes.mockReturnValue(allTypes);
-const event = { target: { value: testType } };
-
-const testLabel = { label: testKey, id: testId, type: testType };
-const selectableAssignmentLabels = [
-  { label: 'some' },
-  { label: 'test' },
-  { label: 'labels' },
-  testLabel,
-];
-selectors.filters.useSelectableAssignmentLabels.mockReturnValue(selectableAssignmentLabels);
-selectors.filters.useAssignmentType.mockReturnValue(testType);
-
-const updateAssignmentType = jest.fn();
-actions.filters.useUpdateAssignmentType.mockReturnValue(updateAssignmentType);
-
-const updateQueryParams = jest.fn();
-
-describe('useAssignmentTypeFilterData hook', () => {
-  beforeEach(() => {
-    out = useAssignmentTypeFilterData({ updateQueryParams });
-  });
-  describe('behavior', () => {
-    it('initializes redux hooks', () => {
-      expect(selectors.assignmentTypes.useAllAssignmentTypes).toHaveBeenCalledWith();
-      expect(selectors.filters.useSelectableAssignmentLabels).toHaveBeenCalledWith();
-      expect(selectors.filters.useAssignmentType).toHaveBeenCalledWith();
-      expect(actions.filters.useUpdateAssignmentType).toHaveBeenCalledWith();
-    });
-  });
-  describe('output', () => {
-    describe('handleEvent', () => {
-      beforeEach(() => {
-        out.handleChange(event);
-      });
-      it('updates assignmentType filter with selected filter', () => {
-        expect(updateAssignmentType).toHaveBeenCalledWith(testType);
-      });
-      it('updates queryParams', () => {
-        expect(updateQueryParams).toHaveBeenCalledWith({ assignmentType: testType });
-      });
-    });
-    describe('selectedAssignmentType', () => {
-      it('returns selected assignmentType', () => {
-        expect(out.selectedAssignmentType).toEqual(testType);
-      });
-      it('returns empty string if no assignmentType is selected', () => {
-        selectors.filters.useAssignmentType.mockReturnValue(undefined);
-        out = useAssignmentTypeFilterData({ updateQueryParams });
-        expect(out.selectedAssignmentType).toEqual('');
-      });
-    });
-    it('passes assignmentTypes from hook', () => {
-      expect(out.assignmentTypes).toEqual(allTypes);
-    });
-    test('assignmentTypes is empty object if hook returns undefined', () => {
-      selectors.assignmentTypes.useAllAssignmentTypes.mockReturnValue(undefined);
-      out = useAssignmentTypeFilterData({ updateQueryParams });
-      expect(out.assignmentTypes).toEqual({});
-    });
-    it('returns isDisabled if assigmentFilterOptions is empty', () => {
-      expect(out.isDisabled).toEqual(false);
-      selectors.assignmentTypes.useAllAssignmentTypes.mockReturnValue([]);
-      out = useAssignmentTypeFilterData({ updateQueryParams });
-    });
-  });
-});