Merge pull request #371 from DmytroAlipov/fix-import-grades-button-palm

fix: file input handler

.env

@@ -30,4 +30,5 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.development

@@ -23,6 +23,7 @@ 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'
@@ -36,4 +37,5 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-BULK_MANAGEMENT_SPECIAL_ACCESS_COURSE_IDS=''
+APP_ID=''
+MFE_CONFIG_API_URL=''

.eslintrc.js

@@ -1,12 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-const config = createConfig('eslint');
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+
+    // 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' },
+  }],
+});
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };

.github/CODEOWNERS

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

.github/pull_request_template.md

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

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

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

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

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

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

.github/workflows/commitlint.yml

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

.github/workflows/lockfileversion-check.yml

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

.github/workflows/npm-publish.yml

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

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

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

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

.npmignore

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

.nvmrc

@@ -0,0 +1 @@
+18.15

.travis.yml

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

.tx/config

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

Makefile

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

README.md

@@ -1,4 +1,5 @@
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
+[![Codecov](https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook)](https://app.codecov.io/gh/openedx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
@@ -22,19 +23,13 @@ For existing documentation see:
 
 ### What does this offer over the legacy gradebook?
 
-![A screenshot of the grade listings](documentation/screenshots/grade-listings.png)
-
 The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
 audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.
 
-![Screenshot of the grade editing interface](documentation/screenshots/grade-editing.png)
-
 UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
 scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
 ‘Homework’).
 
-![Screenshot of the filtering options](documentation/screenshots/grade-filtering.png)
-
 ### What does the legacy gradebook offer that this project does not?
 
 This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
@@ -63,7 +58,7 @@ npm i --save @edx/frontend-app-gradebook
 
 ## Running the UI Standalone
 
-To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/openedx/devstack) instructions.
 
 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.
 
@@ -123,4 +118,4 @@ running gradebook container.
 
 ## Authentication with backend API services
 
-See the [`@edx/frontend-auth`](https://github.com/edx/frontend-auth) repo for information about securing routes in your application that require user authentication.
+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.

documentation/.travis.yml.md

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

documentation/CI.md

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

documentation/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/edx/edx-platform/blob/master/lms/djangoapps/grades/api/v1/gradebook_views.py
+https://github.com/openedx/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/edx/edx-platform/blob/master/lms/djangoapps/grades/docs/decisions/0001-gradebook-api.rst
+https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/grades/docs/decisions/0001-gradebook-api.rst
 
 Decision
 ========

documentation/testing/test-plan.md

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

documentation/testing/test-setup.md

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

jest.config.js

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

package.json

@@ -1,35 +1,39 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.39",
+  "version": "1.6.1",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
+    "url": "git+https://github.com/openedx/frontend-app-gradebook.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch",
-    "travis-deploy-once": "travis-deploy-once"
+    "watch-tests": "jest --watch"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/frontend-app-gradebook#readme",
+  "homepage": "https://github.com/openedx/frontend-app-gradebook#readme",
   "publishConfig": {
     "access": "public"
   },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.1.1",
-    "@edx/frontend-platform": "1.9.5",
-    "@edx/paragon": "14.16.4",
+    "@edx/frontend-component-footer": "^11.1.1",
+    "@edx/frontend-component-header": "^3.1.1",
+    "@edx/frontend-platform": "2.5.0",
+    "@edx/paragon": "^19.25.4",
+    "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -43,13 +47,13 @@
     "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "node-sass": "^4.14.1",
     "prop-types": "15.7.2",
     "query-string": "6.13.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-intl": "^2.9.0",
-    "react-redux": "^5.1.1",
+    "react-redux": "^7.1.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
@@ -59,24 +63,25 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.7",
-    "util": "^0.12.3",
+    "sass": "^1.49.0",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "5.5.2",
-    "axios": "0.21.1",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "12.8.27",
+    "@testing-library/react": "^12.1.0",
+    "axios": "0.21.2",
     "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
     "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "24.9.0",
-    "react-dev-utils": "^5.0.3",
+    "jest": "29.3.1",
+    "react-dev-utils": "^12.0.1",
     "react-test-renderer": "^16.10.1",
+    "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3",
-    "travis-deploy-once": "^5.0.11"
+    "semantic-release": "^19.0.3"
   }
 }

src/App.jsx

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

src/App.scss

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

src/App.test.jsx

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

src/__snapshots__/App.test.jsx.snap

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

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -1,20 +1,22 @@
 /* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
 import { Alert } from '@edx/paragon';
 
-import * as appConstants from 'data/constants/app';
 import selectors from 'data/selectors';
-
-const { messages: { BulkManagementTab: messages } } = appConstants;
+import messages from './messages';
 
 /**
  * <BulkManagementAlerts />
  * Alerts to display at the top of the BulkManagement tab
  */
-export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
+export const BulkManagementAlerts = ({
+  bulkImportError,
+  uploadSuccess,
+}) => (
   <>
     <Alert
       variant="danger"
@@ -28,7 +30,7 @@ export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
       show={uploadSuccess}
       dismissible={false}
     >
-      {messages.successDialog}
+      <FormattedMessage {...messages.successDialog} />
     </Alert>
   </>
 );

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
-import * as appConstants from 'data/constants/app';
+import messages from './messages';
 
 import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
 
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
 jest.mock('@edx/paragon', () => ({
   Alert: () => 'Alert',
 }));
@@ -61,8 +66,8 @@ describe('BulkManagementAlerts', () => {
       });
       test('open success alert with messages.successDialog content', () => {
         expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().text()).toEqual(
-          appConstants.messages.BulkManagementTab.successDialog,
+        expect(el.childAt(1).children().getElement()).toEqual(
+          <FormattedMessage {...messages.successDialog} />,
         );
         expect(el.childAt(1).props().show).toEqual(true);
       });

src/components/BulkManagementHistoryView/BulkManagementHistoryView.scss

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

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -3,10 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
 
-import { bulkManagementColumns, messages } from 'data/constants/app';
+import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';
+
 import ResultsSummary from './ResultsSummary';
 
 export const mapHistoryRows = ({
@@ -21,28 +22,21 @@ export const mapHistoryRows = ({
   ...rest,
 });
 
-const { hints } = messages.BulkManagementTab;
-
 /**
  * <HistoryTable />
  * Table with history of bulk management uploads, including a results summary which
  * displays total, skipped, and failed uploads
  */
-export const HistoryTable = ({ bulkManagementHistory }) => (
-  <>
-    <p>
-      {hints[0]}
-      <br />
-      {hints[1]}
-    </p>
-
-    <Table
-      data={bulkManagementHistory.map(mapHistoryRows)}
-      hasFixedColumnWidths
-      columns={bulkManagementColumns}
-      className="table-striped"
-    />
-  </>
+export const HistoryTable = ({
+  bulkManagementHistory,
+}) => (
+  <DataTable
+    data={bulkManagementHistory.map(mapHistoryRows)}
+    hasFixedColumnWidths
+    columns={bulkManagementColumns}
+    className="table-striped"
+    itemCount={bulkManagementHistory.length}
+  />
 );
 HistoryTable.defaultProps = {
   bulkManagementHistory: [],
@@ -55,7 +49,6 @@ HistoryTable.propTypes = {
     timeUploaded: PropTypes.string.isRequired,
     resultsSummary: PropTypes.shape({
       rowId: PropTypes.number.isRequired,
-      courseId: PropTypes.string.isRequired,
       text: PropTypes.string.isRequired,
     }),
   })),

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,16 +1,19 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
 
 import selectors from 'data/selectors';
-import { bulkManagementColumns, messages } from 'data/constants/app';
+import { bulkManagementColumns } from 'data/constants/app';
 
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';
 
-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
+jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
 }));
 jest.mock('data/selectors', () => ({
   __esModule: true,
@@ -52,23 +55,13 @@ describe('HistoryTable', () => {
       beforeEach(() => {
         el = shallow(<HistoryTable {...props} />);
       });
-      const snapshotSegments = [
-        'hints display',
-        'formatted table',
-      ];
-      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
+      test('snapshot - loads formatted table', () => {
         expect(el).toMatchSnapshot();
       });
-      test('hints with break in between', () => {
-        const hints = el.find('p');
-        expect(hints.childAt(0).text()).toEqual(messages.BulkManagementTab.hints[0]);
-        expect(hints.childAt(1).is('br')).toEqual(true);
-        expect(hints.childAt(2).text()).toEqual(messages.BulkManagementTab.hints[1]);
-      });
       describe('history table', () => {
         let table;
         beforeEach(() => {
-          table = el.find(Table);
+          table = el.find(DataTable);
         });
         describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
           const fieldAssertions = [

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Hyperlink, Icon } from '@edx/paragon';
 import { Download } from '@edx/paragon/icons';
 
-import { bulkGradesUrlByCourseAndRow } from 'data/constants/api';
+import lms from 'data/services/lms';
 
 /**
  * <ResultsSummary {...{ courseId, rowId, text }} />
@@ -15,12 +15,11 @@ import { bulkGradesUrlByCourseAndRow } from 'data/constants/api';
  * @param {string} text - summary string
  */
 const ResultsSummary = ({
-  courseId,
   rowId,
   text,
 }) => (
   <Hyperlink
-    href={bulkGradesUrlByCourseAndRow(courseId, rowId)}
+    href={lms.urls.bulkGradesUrlByRow(rowId)}
     destination="www.edx.org"
     target="_blank"
     rel="noopener noreferrer"
@@ -32,7 +31,6 @@ const ResultsSummary = ({
 );
 
 ResultsSummary.propTypes = {
-  courseId: PropTypes.string.isRequired,
   rowId: PropTypes.number.isRequired,
   text: PropTypes.string.isRequired,
 };

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import { Icon } from '@edx/paragon';
 import { Download } from '@edx/paragon/icons';
 
-import * as api from 'data/constants/api';
+import lms from 'data/services/lms';
 import ResultsSummary from './ResultsSummary';
 
 jest.mock('@edx/paragon', () => ({
@@ -14,13 +14,14 @@ jest.mock('@edx/paragon', () => ({
 jest.mock('@edx/paragon/icons', () => ({
   Download: 'DownloadIcon',
 }));
-jest.mock('data/constants/api', () => ({
-  bulkGradesUrlByCourseAndRow: jest.fn((courseId, rowId) => ({ url: { courseId, rowId } })),
+jest.mock('data/services/lms', () => ({
+  urls: {
+    bulkGradesUrlByRow: jest.fn((rowId) => ({ url: { rowId } })),
+  },
 }));
 
 describe('ResultsSummary component', () => {
   const props = {
-    courseId: 'classy',
     rowId: 42,
     text: 'texty',
   };
@@ -41,7 +42,7 @@ describe('ResultsSummary component', () => {
     expect(el.props().rel).toEqual('noopener noreferrer');
   });
   test('Hyperlink has href to bulkGradesUrl', () => {
-    expect(el.props().href).toEqual(api.bulkGradesUrlByCourseAndRow(props.courseId, props.rowId));
+    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
   });
   test('displays Download Icon and text', () => {
     const icon = el.childAt(0);

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

@@ -12,7 +12,11 @@ exports[`BulkManagementAlerts component no errer, no upload success snapshot - b
     show={false}
     variant="success"
   >
-    CSV processing. File uploads may take several minutes to complete.
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
   </Alert>
 </Fragment>
 `;
@@ -31,7 +35,11 @@ exports[`BulkManagementAlerts component no errer, no upload success snapshot - d
     show={true}
     variant="success"
   >
-    CSV processing. File uploads may take several minutes to complete.
+    <FormattedMessage
+      defaultMessage="CSV processing. File uploads may take several minutes to complete."
+      description="Success Dialog message in BulkManagement Tab File Upload Form"
+      id="gradebook.BulkManagementHistoryView.successDialog"
+    />
   </Alert>
 </Fragment>
 `;

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

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

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

@@ -6,7 +6,6 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
   href={
     Object {
       "url": Object {
-        "courseId": "classy",
         "rowId": 42,
       },
     }

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

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

src/components/BulkManagementHistoryView/index.jsx

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

src/components/BulkManagementHistoryView/index.test.jsx

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

src/components/BulkManagementHistoryView/messages.js

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

src/components/BulkManagementTab/FileUploadForm.jsx

@@ -1,94 +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 {
-  Button,
-  Form,
-  FormControl,
-  FormGroup,
-} from '@edx/paragon';
-
-import { messages } from 'data/constants/app';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-
-const { csvUploadLabel, importBtnText } = messages.BulkManagementTab;
-
-/**
- * <FileUploadForm />
- * File-type input wrapped with hidden control such that when a valid file is
- * added, it is automattically uploaded.
- */
-export class FileUploadForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.fileInputRef = React.createRef();
-    this.handleClickImportGrades = this.handleClickImportGrades.bind(this);
-    this.handleFileInputChange = this.handleFileInputChange.bind(this);
-  }
-
-  get fileInput() {
-    return this.fileInputRef.current;
-  }
-
-  get formData() {
-    const data = new FormData();
-    data.append('csv', this.fileInput.files[0]);
-    return data;
-  }
-
-  get hasFile() {
-    return this.fileInput && this.fileInput.files[0];
-  }
-
-  handleClickImportGrades() {
-    if (this.fileInput) { this.fileInput.click(); }
-  }
-
-  handleFileInputChange() {
-    return this.hasFile && (
-      this.props.submitFileUploadFormData(this.formData).then(
-        () => { this.fileInput.value = null; },
-      )
-    );
-  }
-
-  render() {
-    return (
-      <>
-        <Form action={this.props.gradeExportUrl} method="post">
-          <FormGroup controlId="csv">
-            <FormControl
-              className="d-none"
-              type="file"
-              label={csvUploadLabel}
-              onChange={this.handleFileInputChange}
-              ref={this.fileInputRef}
-            />
-          </FormGroup>
-        </Form>
-
-        <Button variant="primary" onClick={this.handleClickImportGrades}>
-          {importBtnText}
-        </Button>
-      </>
-    );
-  }
-}
-FileUploadForm.propTypes = {
-  // redux
-  gradeExportUrl: PropTypes.string.isRequired,
-  submitFileUploadFormData: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  gradeExportUrl: selectors.root.gradeExportUrl(state),
-});
-
-export const mapDispatchToProps = {
-  submitFileUploadFormData: thunkActions.grades.submitFileUploadFormData,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(FileUploadForm);

src/components/BulkManagementTab/FileUploadForm.test.jsx

@@ -1,188 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import {
-  Button,
-  Form,
-  FormControl,
-  FormGroup,
-} from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-import * as appConstants from 'data/constants/app';
-
-import { FileUploadForm, mapStateToProps, mapDispatchToProps } from './FileUploadForm';
-
-const {
-  messages: { BulkManagementTab: messages },
-} = appConstants;
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    grades: {
-      bulkImportError: jest.fn(state => ({ bulkImportError: state })),
-    },
-    root: {
-      gradeExportUrl: jest.fn(state => ({ gradeExportUrl: state })),
-    },
-  },
-}));
-jest.mock('data/thunkActions', () => ({
-  __esModule: true,
-  default: {
-    grades: { submitFileUploadFormData: jest.fn() },
-  },
-
-}));
-jest.mock('./BulkManagementAlerts', () => 'BulkManagementAlerts');
-jest.mock('./ResultsSummary', () => 'ResultsSummary');
-
-describe('FileUploadForm', () => {
-  describe('component', () => {
-    let props;
-    let el;
-    beforeEach(() => {
-      props = {
-        gradeExportUrl: 'fakeUrl',
-        submitFileUploadFormData: jest.fn(),
-      };
-    });
-    describe('snapshot', () => {
-      const snapshotSegments = [
-        'export form w/ alerts and file input',
-        'import btn',
-      ];
-      test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
-        jest.mock('@edx/paragon', () => ({
-          Button: () => 'Button',
-          Form: () => 'Form',
-          FormControl: () => 'FormControl',
-          FormGroup: () => 'FormGroup',
-        }));
-        el = shallow(<FileUploadForm {...props} />);
-        el.instance().handleFileInputChange = jest.fn().mockName('this.handleFileInputChange');
-        el.instance().fileInputRef = jest.fn().mockName('this.fileInputRef');
-        el.instance().handleClickImportGrades = jest.fn().mockName('this.handleClickImportGrades');
-        el.instance().formatHistoryRow = jest.fn(entry => entry.originalFilename);
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-    describe('render', () => {
-      beforeEach(() => {
-        el = mount(<FileUploadForm {...props} />);
-      });
-      describe('alert form', () => {
-        let form;
-        beforeEach(() => {
-          form = el.find(Form);
-        });
-        test('post action points to gradeExportUrl', () => {
-          expect(form.props().action).toEqual(props.gradeExportUrl);
-          expect(form.props().method).toEqual('post');
-        });
-        describe('file input', () => {
-          let formGroup;
-          beforeEach(() => {
-            formGroup = el.find(FormGroup);
-          });
-          test('group with controlId="csv"', () => {
-            expect(formGroup.props().controlId).toEqual('csv');
-          });
-          test('file control with onChange from handleFileInputChange', () => {
-            const control = el.find(FormControl);
-            expect(
-              control.props().onChange,
-            ).toEqual(el.instance().handleFileInputChange);
-          });
-          test('fileInputRef points to control', () => {
-            expect(el.find(FormControl).getElement().ref).toBe(el.instance().fileInputRef);
-          });
-        });
-      });
-      describe('import button', () => {
-        let btn;
-        beforeEach(() => {
-          btn = el.find(Button);
-        });
-        test('handleClickImportGrade on click', () => {
-          expect(btn.props().onClick).toEqual(el.instance().handleClickImportGrades);
-        });
-        test('text from messages.importBtn', () => {
-          expect(btn.children().text()).toEqual(messages.importBtnText);
-        });
-      });
-    });
-    describe('behavior', () => {
-      let fileInput;
-      beforeEach(() => {
-        el = mount(<FileUploadForm {...props} />);
-        fileInput = jest.spyOn(el.instance(), 'fileInput', 'get');
-      });
-      describe('handleFileInputChange', () => {
-        it('does nothing (does not fail) if fileInput has not loaded', () => {
-          fileInput.mockReturnValue(null);
-          el.instance().handleClickImportGrades();
-        });
-        it('calls fileInput.click if is loaded', () => {
-          const click = jest.fn();
-          fileInput.mockReturnValue({ click });
-          el.instance().handleClickImportGrades();
-          expect(click).toHaveBeenCalled();
-        });
-      });
-      describe('handleClickImportGrades', () => {
-        it('does nothing if file input has not loaded with files', () => {
-          fileInput.mockReturnValue(null);
-          el.instance().handleFileInputChange();
-          expect(props.submitFileUploadFormData).not.toHaveBeenCalled();
-          fileInput.mockReturnValue({ files: [] });
-          el.instance().handleFileInputChange();
-          expect(props.submitFileUploadFormData).not.toHaveBeenCalled();
-        });
-        it('calls submitFileUploadFormData and then clears fileInput if has files', () => {
-          fileInput.mockReturnValue({ files: ['some', 'files'], value: 'a value' });
-          const formData = { fake: 'form data' };
-          jest.spyOn(el.instance(), 'formData', 'get').mockReturnValue(formData);
-          const submit = jest.fn(() => ({ then: (thenCB) => { thenCB(); } }));
-          el.setProps({
-            submitFileUploadFormData: submit,
-          });
-          el.instance().handleFileInputChange();
-          expect(submit).toHaveBeenCalledWith(formData);
-          expect(el.instance().fileInput.value).toEqual(null);
-        });
-      });
-      describe('formData', () => {
-        test('returns FormData object with csv value from fileInput.files[0]', () => {
-          const file = { a: 'fake file' };
-          const value = 'aValue';
-          fileInput.mockReturnValue({ files: [file], value });
-          const expected = new FormData();
-          expected.append('csv', file);
-          expect([...el.instance().formData.entries()]).toEqual([...expected.entries()]);
-        });
-      });
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    const testState = { a: 'simple', test: 'state' };
-    let mapped;
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('gradeExportUrl from root.gradeExportUrl', () => {
-      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
-    });
-  });
-
-  describe('mapDispatchToProps', () => {
-    test('submitFileUploadFormData from thunkActions.grades', () => {
-      expect(
-        mapDispatchToProps.submitFileUploadFormData,
-      ).toEqual(thunkActions.grades.submitFileUploadFormData);
-    });
-  });
-});

src/components/BulkManagementTab/__snapshots__/FileUploadForm.test.jsx.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileUploadForm component snapshot snapshot - loads export form w/ alerts and file input, import btn 1`] = `
-<React.Fragment>
-  <Form
-    action="fakeUrl"
-    inline={false}
-    method="post"
-  >
-    <FormGroup
-      as="div"
-      controlId="csv"
-      isInvalid={false}
-      isValid={false}
-    >
-      <ForwardRef
-        as="input"
-        className="d-none"
-        label="Upload Grade CSV"
-        onChange={[MockFunction this.handleFileInputChange]}
-        plaintext={false}
-        type="file"
-      />
-    </FormGroup>
-  </Form>
-  <ForwardRef
-    active={false}
-    disabled={false}
-    onClick={[MockFunction this.handleClickImportGrades]}
-    variant="primary"
-  >
-    Import Grades
-  </ForwardRef>
-</React.Fragment>
-`;

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

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
-Array [
-  Object {
-    "filename": <span
-      className="wrap-text-in-cell"
-    >
-      blue.png
-    </span>,
-    "resultsSummary": <ResultsSummary
-      courseId="Da Bu Dee"
-      rowId={12}
-      text="Da ba daa"
-    />,
-    "timeUploaded": "65",
-    "user": <span
-      className="wrap-text-in-cell"
-    >
-      Eifel
-    </span>,
-  },
-  Object {
-    "filename": <span
-      className="wrap-text-in-cell"
-    >
-      allStar.jpg
-    </span>,
-    "resultsSummary": <ResultsSummary
-      courseId="rockstar"
-      rowId={2}
-      text="all that glitters is gold"
-    />,
-    "timeUploaded": "2000s?",
-    "user": <span
-      className="wrap-text-in-cell"
-    >
-      Smashmouth
-    </span>,
-  },
-]
-`;
-
-exports[`HistoryTable component snapshot snapshot - loads hints display, formatted table 1`] = `
-<Fragment>
-  <p>
-    Results appear in the table below.
-    <br />
-    Grade processing may take a few seconds.
-  </p>
-  <Table
-    className="table-striped"
-    columns={
-      Array [
-        Object {
-          "columnSortable": false,
-          "key": "filename",
-          "label": "Gradebook",
-          "width": "col-5",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "resultsSummary",
-          "label": "Download Summary",
-          "width": "col",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "user",
-          "label": "Who",
-          "width": "col-1",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "timeUploaded",
-          "label": "When",
-          "width": "col",
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            blue.png
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="Da Bu Dee"
-            rowId={12}
-            text="Da ba daa"
-          />,
-          "timeUploaded": "65",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Eifel
-          </span>,
-        },
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            allStar.jpg
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="rockstar"
-            rowId={2}
-            text="all that glitters is gold"
-          />,
-          "timeUploaded": "2000s?",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Smashmouth
-          </span>,
-        },
-      ]
-    }
-    hasFixedColumnWidths={true}
-  />
-</Fragment>
-`;

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

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BulkManagementTab component snapshot snapshot - loads heading from messages.BulkManagementTab.heading, <BulkManagementAlerts />, <FileUploadForm />, <HistoryTable /> 1`] = `
-<div>
-  <h4>
-    Use this feature by downloading a CSV for bulk management, overriding grades locally, and coming back here to upload.
-  </h4>
-  <BulkManagementAlerts />
-  <FileUploadForm />
-  <HistoryTable />
-</div>
-`;

src/components/BulkManagementTab/index.jsx

@@ -1,22 +0,0 @@
-/* eslint-disable react/button-has-type, import/no-named-as-default */
-import React from 'react';
-
-import { messages } from 'data/constants/app';
-import BulkManagementAlerts from './BulkManagementAlerts';
-import FileUploadForm from './FileUploadForm';
-import HistoryTable from './HistoryTable';
-
-/**
- * <BulkManagementTab />
- * top-level view for managing uploads of bulk management override csvs.
- */
-export const BulkManagementTab = () => (
-  <div>
-    <h4>{messages.BulkManagementTab.heading}</h4>
-    <BulkManagementAlerts />
-    <FileUploadForm />
-    <HistoryTable />
-  </div>
-);
-
-export default BulkManagementTab;

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentFilter component render snapshot 1`] = `
+<div
+  className="student-filters"
+>
+  <SelectGroup
+    disabled={false}
+    id="assignment"
+    label="Assignment"
+    onChange={[MockFunction]}
+    options={
+      Array [
+        <option
+          value=""
+        >
+          All
+        </option>,
+        <option
+          value="label1"
+        >
+          label1
+          : 
+          sLabel1
+        </option>,
+        <option
+          value="label2"
+        >
+          label2
+          : 
+          sLabel2
+        </option>,
+        <option
+          value="label3"
+        >
+          label3
+          : 
+          sLabel3
+        </option>,
+        <option
+          value="label4"
+        >
+          label4
+          : 
+          sLabel4
+        </option>,
+      ]
+    }
+    value="test-label"
+  />
+</div>
+`;

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

@@ -1,38 +0,0 @@
-// 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/GradebookFilters/AssignmentFilter/hooks.js

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

@@ -0,0 +1,88 @@
+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,96 +1,44 @@
 /* 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 { useIntl } from '@edx/frontend-platform/i18n';
 
+import messages from '../messages';
 import SelectGroup from '../SelectGroup';
+import useAssignmentFilterData from './hooks';
 
-const { fetchGradesIfAssignmentGradeFiltersSet } = 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(
-      ({ label }) => label === assignment,
-    );
-    const { type, id } = selectedFilterOption || {};
-    const typedValue = { label: assignment, type, id };
-    this.props.updateAssignmentFilter(typedValue);
-    this.props.updateQueryParams({ assignment: id });
-    this.props.fetchGradesIfAssignmentGradeFiltersSet();
-  }
-
-  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: '',
+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,
-
-  // redux
-  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    subsectionLabel: PropTypes.string,
-    type: PropTypes.string,
-    id: PropTypes.string,
-  })),
-  selectedAssignment: PropTypes.string,
-  fetchGradesIfAssignmentGradeFiltersSet: 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,
-  fetchGradesIfAssignmentGradeFiltersSet,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AssignmentFilter);
+export default AssignmentFilter;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SelectGroup from '../SelectGroup';
+import useAssignmentFilterData from './hooks';
+import AssignmentFilter from '.';
+
+jest.mock('../SelectGroup', () => 'SelectGroup');
+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();
+
+let el;
+describe('AssignmentFilter component', () => {
+  beforeAll(() => {
+    el = shallow(<AssignmentFilter updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useAssignmentFilterData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('filter options', () => {
+      const { options } = el.find(SelectGroup).props();
+      expect(options.length).toEqual(5);
+      const testOption = assignmentFilterOptions[0];
+      const optionProps = options[1].props;
+      expect(optionProps.value).toEqual(testOption.label);
+      expect(optionProps.children.join(''))
+        .toEqual(`${testOption.label}: ${testOption.subsectionLabel}`);
+    });
+  });
+});

src/components/GradebookFilters/AssignmentFilter/test.jsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import { fetchGradesIfAssignmentGradeFiltersSet } from 'data/thunkActions/grades';
-import {
-  AssignmentFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('data/thunkActions/grades', () => ({
-  updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
-}));
-
-jest.mock('data/selectors', () => ({
-  /** Mocking to use passed state for validation purposes */
-  filters: {
-    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 = {
-    assignmentFilterOptions: [
-      {
-        label: 'assgN1',
-        subsectionLabel: 'subLabel1',
-        type: 'assgn_Type1',
-        id: 'assgn_iD1',
-      },
-      {
-        label: 'assgN2',
-        subsectionLabel: 'subLabel2',
-        type: 'assgn_Type2',
-        id: 'assgn_iD2',
-      },
-    ],
-    selectedAssignment: 'assgN1',
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      updateQueryParams: jest.fn(),
-      fetchGradesIfAssignmentGradeFiltersSet: 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.fetchGradesIfAssignmentGradeFiltersSet', () => {
-          const method = props.fetchGradesIfAssignmentGradeFiltersSet;
-          expect(method).toHaveBeenCalledWith();
-        });
-      });
-    });
-    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('mapDispatchToProps', () => {
-    test('updateAssignmentFilter', () => {
-      expect(mapDispatchToProps.updateAssignmentFilter).toEqual(
-        actions.filters.update.assignment,
-      );
-    });
-    test('fetchGradesIfAsssignmentGradeFiltersSet', () => {
-      const prop = mapDispatchToProps.fetchGradesIfAssignmentGradeFiltersSet;
-      expect(prop).toEqual(fetchGradesIfAssignmentGradeFiltersSet);
-    });
-  });
-});

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

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

src/components/GradebookFilters/AssignmentGradeFilter/hooks.js

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

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

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import PercentGroup from '../PercentGroup';
+import useAssignmentGradeFilterData from './hooks';
+import AssignmentFilter from '.';
+
+jest.mock('../PercentGroup', () => 'PercentGroup');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const hookData = {
+  handleChange: jest.fn(),
+  handleSetMax: jest.fn(),
+  handleSetMin: jest.fn(),
+  selectedAssignment: 'test-assignment',
+  assignmentGradeMax: 300,
+  assignmentGradeMin: 23,
+};
+useAssignmentGradeFilterData.mockReturnValue(hookData);
+
+const updateQueryParams = jest.fn();
+
+let el;
+describe('AssignmentFilter component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<AssignmentFilter updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useAssignmentGradeFilterData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    describe('with selected assignment', () => {
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('renders a PercentGroup for both Max and Min filters', () => {
+        let props = el.find(PercentGroup).at(0).props();
+        expect(props.value).toEqual(hookData.assignmentGradeMin);
+        expect(props.disabled).toEqual(false);
+        expect(props.onChange).toEqual(hookData.handleSetMin);
+        props = el.find(PercentGroup).at(1).props();
+        expect(props.value).toEqual(hookData.assignmentGradeMax);
+        expect(props.disabled).toEqual(false);
+        expect(props.onChange).toEqual(hookData.handleSetMax);
+      });
+      it('renders a submit button', () => {
+        const props = el.find(Button).props();
+        expect(props.disabled).toEqual(false);
+        expect(props.onClick).toEqual(hookData.handleSubmit);
+      });
+    });
+    describe('without selected assignment', () => {
+      beforeEach(() => {
+        useAssignmentGradeFilterData.mockReturnValueOnce({
+          ...hookData,
+          selectedAssignment: null,
+        });
+        el = shallow(<AssignmentFilter updateQueryParams={updateQueryParams} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('disables controls', () => {
+        let props = el.find(PercentGroup).at(0).props();
+        expect(props.disabled).toEqual(true);
+        props = el.find(PercentGroup).at(1).props();
+        expect(props.disabled).toEqual(true);
+      });
+    });
+  });
+});

src/components/GradebookFilters/AssignmentGradeFilter/test.jsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import { fetchGrades } from 'data/thunkActions/grades';
-
-import {
-  AssignmentGradeFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    app: {},
-    filters: {},
-    grades: {},
-  },
-}));
-
-jest.mock('data/thunkActions/grades', () => ({
-  fetchGrades: jest.fn(),
-}));
-
-describe('AssignmentGradeFilter', () => {
-  let props = {};
-  beforeEach(() => {
-    props = {
-      ...props,
-      updateQueryParams: jest.fn(),
-      fetchGrades: jest.fn(),
-      localAssignmentLimits: {
-        assignmentGradeMax: '98',
-        assignmentGradeMin: '2',
-      },
-      selectedAssignment: 'Potions 101.5',
-      setFilter: jest.fn(),
-      updateAssignmentLimits: jest.fn(),
-    };
-  });
-
-  describe('Component', () => {
-    describe('behavior', () => {
-      let el;
-      beforeEach(() => {
-        el = mount(<AssignmentGradeFilter {...props} />);
-      });
-      describe('handleSubmit', () => {
-        beforeEach(() => {
-          el.instance().handleSubmit();
-        });
-        it('calls props.updateAssignmentLimits with local assignment limits', () => {
-          expect(props.updateAssignmentLimits).toHaveBeenCalledWith(props.localAssignmentLimits);
-        });
-        it('calls fetchUserGrades', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates queryParams with assignment grade min and max', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith(props.localAssignmentLimits);
-        });
-      });
-      describe('handleSetMin', () => {
-        it('calls setFilters for assignmentGradeMin', () => {
-          const testVal = 23;
-          el.instance().handleSetMin({ target: { value: testVal } });
-          expect(props.setFilter).toHaveBeenCalledWith({
-            assignmentGradeMin: testVal,
-          });
-        });
-      });
-      describe('handleSetMax', () => {
-        it('calls setFilters for assignmentGradeMax', () => {
-          const testVal = 92;
-          el.instance().handleSetMax({ target: { value: testVal } });
-          expect(props.setFilter).toHaveBeenCalledWith({
-            assignmentGradeMax: testVal,
-          });
-        });
-      });
-    });
-    describe('snapshots', () => {
-      let el;
-      const mockMethods = () => {
-        el.instance().handleSubmit = jest.fn().mockName('handleSubmit');
-        el.instance().handleSetMax = jest.fn().mockName('handleSetMax');
-        el.instance().handleSetMin = jest.fn().mockName('handleSetMin');
-      };
-      test('smoke test', () => {
-        el = shallow(<AssignmentGradeFilter {...props} />);
-        mockMethods(el);
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-      test('buttons and groups disabled if no selected assignment', () => {
-        el = shallow(<AssignmentGradeFilter
-          {...props}
-          selectedAssignment={undefined}
-        />);
-        mockMethods(el);
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { belle: 'in', the: 'castle' };
-    let mappedProps;
-    beforeEach(() => {
-      selectors.app.assignmentGradeLimits = jest.fn((state) => ({ gradeLimits: state }));
-      selectors.filters.selectedAssignmentLabel = jest.fn((state) => ({ assignmentLabel: state }));
-      mappedProps = mapStateToProps(testState);
-    });
-    describe('localAssignmentLimits', () => {
-      it('returns selectors.app.assignmentGradeLimits', () => {
-        expect(
-          mappedProps.localAssignmentLimits,
-        ).toEqual(selectors.app.assignmentGradeLimits(testState));
-      });
-    });
-    describe('selectedAsssignment', () => {
-      it('returns selectors.filters.selectedAssignmentLabel', () => {
-        expect(
-          mappedProps.selectedAssignment,
-        ).toEqual(selectors.filters.selectedAssignmentLabel(testState));
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('fetchGrades', () => {
-      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
-    });
-    test('setFilters', () => {
-      expect(mapDispatchToProps.setFilter).toEqual(actions.app.setLocalFilter);
-    });
-    test('updateAssignmentLimits', () => {
-      expect(
-        mapDispatchToProps.updateAssignmentLimits,
-      ).toEqual(
-        actions.filters.update.assignmentLimits,
-      );
-    });
-  });
-});

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentFilterType component render snapshot 1`] = `
+<div
+  className="student-filters"
+>
+  <SelectGroup
+    disabled={true}
+    id="assignment-types"
+    label="Assignment Types"
+    onChange={[MockFunction]}
+    options={
+      Array [
+        <option
+          value=""
+        >
+          All
+        </option>,
+        <option
+          value="test-type"
+        >
+          test-type
+        </option>,
+        <option
+          value="type1"
+        >
+          type1
+        </option>,
+        <option
+          value="type2"
+        >
+          type2
+        </option>,
+        <option
+          value="type3"
+        >
+          type3
+        </option>,
+      ]
+    }
+    value="test-type"
+  />
+</div>
+`;

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

@@ -1,67 +0,0 @@
-// 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/GradebookFilters/AssignmentTypeFilter/hooks.js

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

@@ -0,0 +1,92 @@
+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 });
+    });
+  });
+});

src/components/GradebookFilters/AssignmentTypeFilter/index.jsx

@@ -1,77 +1,42 @@
 /* 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 { useIntl } from '@edx/frontend-platform/i18n';
+
 import SelectGroup from '../SelectGroup';
+import messages from '../messages';
+import useAssignmentTypeFilterData from './hooks';
 
-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: '',
+export const AssignmentTypeFilter = ({ updateQueryParams }) => {
+  const {
+    assignmentTypes,
+    handleChange,
+    isDisabled,
+    selectedAssignmentType,
+  } = useAssignmentTypeFilterData({ updateQueryParams });
+  const { formatMessage } = useIntl();
+  return (
+    <div className="student-filters">
+      <SelectGroup
+        id="assignment-types"
+        label={formatMessage(messages.assignmentTypes)}
+        value={selectedAssignmentType}
+        onChange={handleChange}
+        disabled={isDisabled}
+        options={[
+          <option key="0" value="">All</option>,
+          ...assignmentTypes.map(entry => (
+            <option key={entry} value={entry}>{entry}</option>
+          )),
+        ]}
+      />
+    </div>
+  );
 };
 
 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);
+export default AssignmentTypeFilter;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SelectGroup from '../SelectGroup';
+import useAssignmentFilterTypeData from './hooks';
+import AssignmentFilterType from '.';
+
+jest.mock('../SelectGroup', () => 'SelectGroup');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const handleChange = jest.fn();
+const testType = 'test-type';
+const assignmentTypes = [testType, 'type1', 'type2', 'type3'];
+useAssignmentFilterTypeData.mockReturnValue({
+  handleChange,
+  selectedAssignmentType: testType,
+  assignmentTypes,
+  isDisabled: true,
+});
+
+const updateQueryParams = jest.fn();
+
+let el;
+describe('AssignmentFilterType component', () => {
+  beforeAll(() => {
+    el = shallow(<AssignmentFilterType updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useAssignmentFilterTypeData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('filter options', () => {
+      const { options } = el.find(SelectGroup).props();
+      expect(options.length).toEqual(5);
+      const optionProps = options[1].props;
+      expect(optionProps.value).toEqual(assignmentTypes[0]);
+      expect(optionProps.children).toEqual(testType);
+    });
+  });
+});

src/components/GradebookFilters/AssignmentTypeFilter/test.jsx

@@ -1,135 +0,0 @@
-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/GradebookFilters/CourseGradeFilter/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseFilter component render if disabled snapshot 1`] = `
+<Fragment>
+  <div
+    className="grade-filter-inputs"
+  >
+    <PercentGroup
+      id="minimum-grade"
+      label="Min Grade"
+      onChange={[MockFunction]}
+      value={23}
+    />
+    <PercentGroup
+      id="maximum-grade"
+      label="Max Grade"
+      onChange={[MockFunction]}
+      value={300}
+    />
+  </div>
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      disabled={true}
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</Fragment>
+`;
+
+exports[`CourseFilter component render with selected assignment snapshot 1`] = `
+<Fragment>
+  <div
+    className="grade-filter-inputs"
+  >
+    <PercentGroup
+      id="minimum-grade"
+      label="Min Grade"
+      onChange={[MockFunction]}
+      value={23}
+    />
+    <PercentGroup
+      id="maximum-grade"
+      label="Max Grade"
+      onChange={[MockFunction]}
+      value={300}
+    />
+  </div>
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      disabled={false}
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</Fragment>
+`;

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

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseGradeFilter Component snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <div
-    className="grade-filter-inputs"
-  >
-    <PercentGroup
-      id="minimum-grade"
-      label="Min Grade"
-      onChange={[MockFunction handleUpdateMin]}
-      value="5"
-    />
-    <PercentGroup
-      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/GradebookFilters/CourseGradeFilter/hooks.js

@@ -0,0 +1,33 @@
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+
+export const useCourseGradeFilterData = ({
+  updateQueryParams,
+}) => {
+  const isDisabled = !selectors.app.useAreCourseGradeFiltersValid();
+  const localCourseLimits = selectors.app.useCourseGradeLimits();
+  const fetchGrades = thunkActions.grades.useFetchGrades();
+  const setLocalFilter = actions.app.useSetLocalFilter();
+  const updateFilter = actions.filters.useUpdateCourseGradeLimits();
+
+  const handleApplyClick = () => {
+    updateFilter(localCourseLimits);
+    fetchGrades();
+    updateQueryParams(localCourseLimits);
+  };
+
+  const { courseGradeMin, courseGradeMax } = localCourseLimits;
+  return {
+    max: {
+      value: courseGradeMax,
+      onChange: (e) => setLocalFilter({ courseGradeMax: e.target.value }),
+    },
+    min: {
+      value: courseGradeMin,
+      onChange: (e) => setLocalFilter({ courseGradeMin: e.target.value }),
+    },
+    handleApplyClick,
+    isDisabled,
+  };
+};
+
+export default useCourseGradeFilterData;

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

@@ -0,0 +1,78 @@
+import { selectors, actions, thunkActions } from 'data/redux/hooks';
+
+import useCourseTypeFilterData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  selectors: {
+    app: {
+      useAreCourseGradeFiltersValid: jest.fn(),
+      useCourseGradeLimits: jest.fn(),
+    },
+  },
+  actions: {
+    app: { useSetLocalFilter: jest.fn() },
+    filters: { useUpdateCourseGradeLimits: jest.fn() },
+  },
+  thunkActions: {
+    grades: { useFetchGrades: jest.fn() },
+  },
+}));
+
+let out;
+
+const courseGradeLimits = { courseGradeMax: 120, courseGradeMin: 32 };
+selectors.app.useAreCourseGradeFiltersValid.mockReturnValue(true);
+selectors.app.useCourseGradeLimits.mockReturnValue(courseGradeLimits);
+
+const setLocalFilter = jest.fn();
+actions.app.useSetLocalFilter.mockReturnValue(setLocalFilter);
+const updateCourseGradeLimits = jest.fn();
+actions.filters.useUpdateCourseGradeLimits.mockReturnValue(updateCourseGradeLimits);
+const fetch = jest.fn();
+thunkActions.grades.useFetchGrades.mockReturnValue(fetch);
+
+const testValue = 55;
+
+const updateQueryParams = jest.fn();
+
+describe('useCourseTypeFilterData hook', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    out = useCourseTypeFilterData({ updateQueryParams });
+  });
+  describe('behavior', () => {
+    it('initializes redux hooks', () => {
+      expect(selectors.app.useAreCourseGradeFiltersValid).toHaveBeenCalledWith();
+      expect(selectors.app.useCourseGradeLimits).toHaveBeenCalledWith();
+      expect(actions.app.useSetLocalFilter).toHaveBeenCalledWith();
+      expect(actions.filters.useUpdateCourseGradeLimits).toHaveBeenCalledWith();
+      expect(thunkActions.grades.useFetchGrades).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('returns isDisabled if assigmentFilterOptions is empty', () => {
+      expect(out.isDisabled).toEqual(false);
+      selectors.app.useAreCourseGradeFiltersValid.mockReturnValue(false);
+      out = useCourseTypeFilterData({ updateQueryParams });
+      expect(out.isDisabled).toEqual(true);
+    });
+    test('min value and onChange', () => {
+      const { courseGradeMin } = courseGradeLimits;
+      expect(out.min.value).toEqual(courseGradeMin);
+      out.min.onChange({ target: { value: testValue } });
+      expect(setLocalFilter).toHaveBeenCalledWith({ courseGradeMin: testValue });
+    });
+    test('max value and onChange', () => {
+      const { courseGradeMax } = courseGradeLimits;
+      expect(out.max.value).toEqual(courseGradeMax);
+      out.max.onChange({ target: { value: testValue } });
+      expect(setLocalFilter).toHaveBeenCalledWith({ courseGradeMax: testValue });
+    });
+    it('updates filter, fetches grades, and updates query params on apply click', () => {
+      out.handleApplyClick();
+      expect(updateCourseGradeLimits).toHaveBeenCalledWith(courseGradeLimits);
+      expect(fetch).toHaveBeenCalledWith();
+      expect(updateQueryParams).toHaveBeenCalledWith(courseGradeLimits);
+    });
+  });
+});

src/components/GradebookFilters/CourseGradeFilter/index.jsx

@@ -1,99 +1,52 @@
-/* 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 { Button } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
 import PercentGroup from '../PercentGroup';
+import useCourseGradeFilterData from './hooks';
 
-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);
-  }
+export const CourseGradeFilter = ({ updateQueryParams }) => {
+  const {
+    max,
+    min,
+    isDisabled,
+    handleApplyClick,
+  } = useCourseGradeFilterData({ updateQueryParams });
+  const { formatMessage } = useIntl();
 
-  handleApplyClick() {
-    if (this.props.areLimitsValid) {
-      this.updateCourseGradeFilters();
-    }
-  }
-
-  handleUpdateMin({ target: { value } }) {
-    this.props.setLocalFilter({ courseGradeMin: value });
-  }
-
-  handleUpdateMax({ target: { value } }) {
-    this.props.setLocalFilter({ courseGradeMax: value });
-  }
-
-  updateCourseGradeFilters() {
-    this.props.updateFilter(this.props.localCourseLimits);
-    this.props.fetchGrades();
-    this.props.updateQueryParams(this.props.localCourseLimits);
-  }
-
-  render() {
-    const { courseGradeMin, courseGradeMax } = this.props.localCourseLimits;
-    return (
-      <>
-        <div className="grade-filter-inputs">
-          <PercentGroup
-            id="minimum-grade"
-            label="Min Grade"
-            value={courseGradeMin}
-            onChange={this.handleUpdateMin}
-          />
-          <PercentGroup
-            id="maximum-grade"
-            label="Max Grade"
-            value={courseGradeMax}
-            onChange={this.handleUpdateMax}
-          />
-        </div>
-        <div className="grade-filter-action">
-          <Button
-            variant="outline-secondary"
-            onClick={this.handleApplyClick}
-          >
-            Apply
-          </Button>
-        </div>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <div className="grade-filter-inputs">
+        <PercentGroup
+          id="minimum-grade"
+          label={formatMessage(messages.minGrade)}
+          value={min.value}
+          onChange={min.onChange}
+        />
+        <PercentGroup
+          id="maximum-grade"
+          label={formatMessage(messages.maxGrade)}
+          value={max.value}
+          onChange={max.onChange}
+        />
+      </div>
+      <div className="grade-filter-action">
+        <Button
+          variant="outline-secondary"
+          onClick={handleApplyClick}
+          disabled={isDisabled}
+        >
+          {formatMessage(messages.apply)}
+        </Button>
+      </div>
+    </>
+  );
+};
 
 CourseGradeFilter.propTypes = {
   updateQueryParams: PropTypes.func.isRequired,
-
-  // Redux
-  areLimitsValid: PropTypes.bool.isRequired,
-  fetchGrades: PropTypes.func.isRequired,
-  localCourseLimits: PropTypes.shape({
-    courseGradeMin: PropTypes.string.isRequired,
-    courseGradeMax: PropTypes.string.isRequired,
-  }).isRequired,
-  setLocalFilter: PropTypes.func.isRequired,
-  updateFilter: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  areLimitsValid: selectors.app.areCourseGradeFiltersValid(state),
-  localCourseLimits: selectors.app.courseGradeLimits(state),
-});
-
-export const mapDispatchToProps = {
-  fetchGrades: thunkActions.grades.fetchGrades,
-  setLocalFilter: actions.app.setLocalFilter,
-  updateFilter: actions.filters.update.courseGradeLimits,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(CourseGradeFilter);
+export default CourseGradeFilter;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import PercentGroup from '../PercentGroup';
+import useCourseGradeFilterData from './hooks';
+import CourseFilter from '.';
+
+jest.mock('../PercentGroup', () => 'PercentGroup');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const hookData = {
+  handleChange: jest.fn(),
+  max: {
+    value: 300,
+    onChange: jest.fn(),
+  },
+  min: {
+    value: 23,
+    onChange: jest.fn(),
+  },
+  selectedCourse: 'test-assignment',
+  isDisabled: false,
+};
+useCourseGradeFilterData.mockReturnValue(hookData);
+
+const updateQueryParams = jest.fn();
+
+let el;
+describe('CourseFilter component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<CourseFilter updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useCourseGradeFilterData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    describe('with selected assignment', () => {
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('renders a PercentGroup for both Max and Min filters', () => {
+        let props = el.find(PercentGroup).at(0).props();
+        expect(props.value).toEqual(hookData.min.value);
+        expect(props.onChange).toEqual(hookData.min.onChange);
+        props = el.find(PercentGroup).at(1).props();
+        expect(props.value).toEqual(hookData.max.value);
+        expect(props.onChange).toEqual(hookData.max.onChange);
+      });
+      it('renders a submit button', () => {
+        const props = el.find(Button).props();
+        expect(props.disabled).toEqual(false);
+        expect(props.onClick).toEqual(hookData.handleApplyClick);
+      });
+    });
+    describe('if disabled', () => {
+      beforeEach(() => {
+        useCourseGradeFilterData.mockReturnValueOnce({ ...hookData, isDisabled: true });
+        el = shallow(<CourseFilter updateQueryParams={updateQueryParams} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('disables submit', () => {
+        const props = el.find(Button).props();
+        expect(props.disabled).toEqual(true);
+      });
+    });
+  });
+});

src/components/GradebookFilters/CourseGradeFilter/test.jsx

@@ -1,150 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import { fetchGrades } from 'data/thunkActions/grades';
-import {
-  CourseGradeFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('@edx/paragon', () => ({
-  Button: () => 'Button',
-}));
-jest.mock('../PercentGroup', () => 'PercentGroup');
-
-jest.mock('data/thunkActions/grades', () => ({
-  fetchGrades: jest.fn(),
-}));
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    app: {
-      areCourseGradeFiltersValid: jest.fn(state => ({ areCourseGradeFiltersValid: state })),
-      courseGradeLimits: jest.fn(state => ({ courseGradeLimits: state })),
-    },
-  },
-}));
-
-describe('CourseGradeFilter', () => {
-  let props = {
-    localCourseLimits: {
-      courseGradeMin: '5',
-      courseGradeMax: '92',
-    },
-    areLimitsValid: true,
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      fetchGrades: jest.fn(),
-      setLocalFilter: jest.fn(),
-      updateQueryParams: jest.fn(),
-      updateFilter: jest.fn(),
-    };
-  });
-
-  describe('Component', () => {
-    describe('snapshots', () => {
-      test('basic snapshot', () => {
-        const el = shallow(<CourseGradeFilter {...props} />);
-        el.instance().handleUpdateMin = jest.fn().mockName(
-          'handleUpdateMin',
-        );
-        el.instance().handleUpdateMax = jest.fn().mockName(
-          'handleUpdateMax',
-        );
-        el.instance().handleApplyClick = jest.fn().mockName(
-          'handleApplyClick',
-        );
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-
-    describe('behavior', () => {
-      let el;
-      const testVal = 'TESTvalue';
-      beforeEach(() => {
-        el = shallow(<CourseGradeFilter {...props} />);
-      });
-      describe('handleApplyClick', () => {
-        beforeEach(() => {
-          el.instance().updateCourseGradeFilters = jest.fn();
-        });
-        it('calls updateCourseGradeFilters is limits are valid', () => {
-          el.instance().handleApplyClick();
-          expect(el.instance().updateCourseGradeFilters).toHaveBeenCalledWith();
-        });
-        it('does not call updateCourseGradeFilters if limits are not valid', () => {
-          el.setProps({ areLimitsValid: false });
-          el.instance().handleApplyClick();
-          expect(el.instance().updateCourseGradeFilters).not.toHaveBeenCalled();
-        });
-      });
-      describe('updateCourseGradeFilters', () => {
-        beforeEach(() => {
-          el.instance().updateCourseGradeFilters();
-        });
-        it('calls props.updateFilter with selection', () => {
-          expect(props.updateFilter).toHaveBeenCalledWith(props.localCourseLimits);
-        });
-        it('calls props.getUserGrades with selection', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates query params with courseGradeMin and courseGradeMax', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith(props.localCourseLimits);
-        });
-      });
-      describe('handleUpdateMin', () => {
-        it('calls props.setCourseGradeMin with event value', () => {
-          el.instance().handleUpdateMin(
-            { target: { value: testVal } },
-          );
-          expect(props.setLocalFilter).toHaveBeenCalledWith({
-            courseGradeMin: testVal,
-          });
-        });
-      });
-      describe('handleUpdateMax', () => {
-        it('calls props.setCourseGradeMax with event value', () => {
-          el.instance().handleUpdateMax(
-            { target: { value: testVal } },
-          );
-          expect(props.setLocalFilter).toHaveBeenCalledWith({
-            courseGradeMax: testVal,
-          });
-        });
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { peanut: 'butter', jelly: 'time' };
-    let mapped;
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('areLimitsValid from app.areCourseGradeFiltersValid', () => {
-      expect(mapped.areLimitsValid).toEqual(selectors.app.areCourseGradeFiltersValid(testState));
-    });
-    test('localCourseLimits from app.courseGradeLimits', () => {
-      expect(mapped.localCourseLimits).toEqual(selectors.app.courseGradeLimits(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
-      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
-    });
-    test('setLocalFilter from actions.app.setLocalFilter', () => {
-      expect(mapDispatchToProps.setLocalFilter).toEqual(actions.app.setLocalFilter);
-    });
-    test('updateFilter from actions.filters.update.courseGradeLimits', () => {
-      expect(mapDispatchToProps.updateFilter).toEqual(actions.filters.update.courseGradeLimits);
-    });
-  });
-});

src/components/GradebookFilters/PercentGroup.jsx

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

src/components/GradebookFilters/SelectGroup.jsx

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

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StudentGroupsFilter component render snapshot 1`] = `
+<Fragment>
+  <SelectGroup
+    id="Tracks"
+    label="Tracks"
+    onChange={[MockFunction]}
+    options={
+      Array [
+        <option
+          value="Track-All"
+        >
+          Track-All
+        </option>,
+        <option
+          value="v1"
+        >
+          n1
+        </option>,
+        <option
+          value="v2"
+        >
+          n2
+        </option>,
+        <option
+          value="v3"
+        >
+          n3
+        </option>,
+        <option
+          value="v4"
+        >
+          n4
+        </option>,
+      ]
+    }
+    value="test-track"
+  />
+  <SelectGroup
+    disabled={false}
+    id="Cohorts"
+    label="Cohorts"
+    onChange={[MockFunction]}
+    options={
+      Array [
+        <option
+          value="Cohort-All"
+        >
+          Cohort-All
+        </option>,
+        <option
+          value="v1"
+        >
+          n1
+        </option>,
+        <option
+          value="v2"
+        >
+          n2
+        </option>,
+        <option
+          value="v3"
+        >
+          n3
+        </option>,
+      ]
+    }
+    value="test-cohort"
+  />
+</Fragment>
+`;

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

@@ -1,190 +0,0 @@
-// 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="cohorT3"
-  />
-</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>,
-]
-`;
-
-exports[`StudentGroupsFilter optionFactory returns a list of options with a default first entry 1`] = `
-Array [
-  <option
-    value="All-Ponies"
-  >
-    All-Ponies
-  </option>,
-  <option
-    value="RDash"
-  >
-    RDash
-  </option>,
-  <option
-    value="PPie"
-  >
-    PPie
-  </option>,
-]
-`;

src/components/GradebookFilters/StudentGroupsFilter/hooks.js

@@ -0,0 +1,46 @@
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+
+export const useStudentGroupsFilterData = ({ updateQueryParams }) => {
+  const selectedCohortEntry = selectors.root.useSelectedCohortEntry();
+  const selectedTrackEntry = selectors.root.useSelectedTrackEntry();
+
+  const cohorts = selectors.cohorts.useAllCohorts();
+  const tracks = selectors.tracks.useAllTracks();
+
+  const updateCohort = actions.filters.useUpdateCohort();
+  const updateTrack = actions.filters.useUpdateTrack();
+
+  const fetchGrades = thunkActions.grades.useFetchGrades();
+
+  const handleUpdateTrack = (event) => {
+    const selectedTrackItem = tracks.find(track => track.slug === event.target.value);
+    const track = selectedTrackItem ? selectedTrackItem.slug.toString() : null;
+    updateQueryParams({ track });
+    updateTrack(track);
+    fetchGrades();
+  };
+
+  const handleUpdateCohort = (event) => {
+    const selectedCohortItem = cohorts.find(cohort => cohort.id === parseInt(event.target.value, 10));
+    const cohort = selectedCohortItem ? selectedCohortItem.id.toString() : null;
+    // the param expected to be cohort_id
+    updateQueryParams({ cohort });
+    updateCohort(cohort);
+    fetchGrades();
+  };
+  return {
+    cohorts: {
+      value: selectedCohortEntry?.id || '',
+      isDisabled: cohorts.length === 0,
+      handleChange: handleUpdateCohort,
+      entries: cohorts.map(({ id: value, name }) => ({ value, name })),
+    },
+    tracks: {
+      value: selectedTrackEntry?.slug || '',
+      handleChange: handleUpdateTrack,
+      entries: tracks.map(({ slug: value, name }) => ({ value, name })),
+    },
+  };
+};
+
+export default useStudentGroupsFilterData;

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

@@ -0,0 +1,141 @@
+import { selectors, actions, thunkActions } from 'data/redux/hooks';
+
+import useAssignmentFilterData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  selectors: {
+    root: {
+      useSelectedCohortEntry: jest.fn(),
+      useSelectedTrackEntry: jest.fn(),
+    },
+    cohorts: { useAllCohorts: jest.fn() },
+    tracks: { useAllTracks: jest.fn() },
+  },
+  actions: {
+    filters: {
+      useUpdateCohort: jest.fn(),
+      useUpdateTrack: jest.fn(),
+    },
+  },
+  thunkActions: {
+    grades: { useFetchGrades: jest.fn() },
+  },
+}));
+
+let out;
+
+const testCohort = { name: 'cohort-name', id: 999 };
+selectors.root.useSelectedCohortEntry.mockReturnValue(testCohort);
+const testTrack = { name: 'track-name', slug: 8080 };
+selectors.root.useSelectedTrackEntry.mockReturnValue(testTrack);
+const allCohorts = [
+  testCohort,
+  { name: 'cohort1', id: 11 },
+  { name: 'cohort2', id: 22 },
+  { name: 'cohort3', id: 33 },
+];
+selectors.cohorts.useAllCohorts.mockReturnValue(allCohorts);
+const allTracks = [
+  testTrack,
+  { name: 'track1', slug: 111 },
+  { name: 'track2', slug: 222 },
+  { name: 'track3', slug: 333 },
+];
+selectors.tracks.useAllTracks.mockReturnValue(allTracks);
+
+const updateCohort = jest.fn();
+actions.filters.useUpdateCohort.mockReturnValue(updateCohort);
+const updateTrack = jest.fn();
+actions.filters.useUpdateTrack.mockReturnValue(updateTrack);
+const fetch = jest.fn();
+thunkActions.grades.useFetchGrades.mockReturnValue(fetch);
+
+const updateQueryParams = jest.fn();
+
+describe('useAssignmentFilterData hook', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    out = useAssignmentFilterData({ updateQueryParams });
+  });
+  describe('behavior', () => {
+    it('initializes redux hooks', () => {
+      expect(selectors.root.useSelectedCohortEntry).toHaveBeenCalledWith();
+      expect(selectors.root.useSelectedTrackEntry).toHaveBeenCalledWith();
+      expect(selectors.cohorts.useAllCohorts).toHaveBeenCalledWith();
+      expect(selectors.tracks.useAllTracks).toHaveBeenCalledWith();
+      expect(actions.filters.useUpdateCohort).toHaveBeenCalledWith();
+      expect(actions.filters.useUpdateTrack).toHaveBeenCalledWith();
+      expect(thunkActions.grades.useFetchGrades).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    describe('cohorts', () => {
+      test('value from hook', () => {
+        expect(out.cohorts.value).toEqual(testCohort.id);
+      });
+      test('disabled iff no cohorts found', () => {
+        expect(out.cohorts.isDisabled).toEqual(false);
+        selectors.cohorts.useAllCohorts.mockReturnValueOnce([]);
+        out = useAssignmentFilterData({ updateQueryParams });
+        expect(out.cohorts.isDisabled).toEqual(true);
+      });
+      test('entries map id to value', () => {
+        const { entries } = out.cohorts;
+        expect(entries[0]).toEqual({ value: testCohort.id, name: testCohort.name });
+        expect(entries[1]).toEqual({ value: allCohorts[1].id, name: allCohorts[1].name });
+        expect(entries[2]).toEqual({ value: allCohorts[2].id, name: allCohorts[2].name });
+        expect(entries[3]).toEqual({ value: allCohorts[3].id, name: allCohorts[3].name });
+      });
+      test('value defaults to empty string', () => {
+        selectors.root.useSelectedCohortEntry.mockReturnValueOnce(null);
+        out = useAssignmentFilterData({ updateQueryParams });
+        expect(out.cohorts.value).toEqual('');
+      });
+      describe('handleEvent', () => {
+        it('updates filter and query params and fetches grades', () => {
+          out.cohorts.handleChange({ target: { value: testCohort.id } });
+          expect(updateCohort).toHaveBeenCalledWith(testCohort.id.toString());
+          expect(updateQueryParams).toHaveBeenCalledWith({ cohort: testCohort.id.toString() });
+          expect(fetch).toHaveBeenCalled();
+        });
+        it('passes null if no matching track is found', () => {
+          out.cohorts.handleChange({ target: { value: 'fake-name' } });
+          expect(updateCohort).toHaveBeenCalledWith(null);
+          expect(updateQueryParams).toHaveBeenCalledWith({ cohort: null });
+          expect(fetch).toHaveBeenCalled();
+        });
+      });
+    });
+    describe('tracks', () => {
+      test('value from hook', () => {
+        expect(out.tracks.value).toEqual(testTrack.slug);
+      });
+      test('entries map slug to value', () => {
+        const { entries } = out.tracks;
+        expect(entries[0]).toEqual({ value: testTrack.slug, name: testTrack.name });
+        expect(entries[1]).toEqual({ value: allTracks[1].slug, name: allTracks[1].name });
+        expect(entries[2]).toEqual({ value: allTracks[2].slug, name: allTracks[2].name });
+        expect(entries[3]).toEqual({ value: allTracks[3].slug, name: allTracks[3].name });
+      });
+      test('value defaults to empty string', () => {
+        selectors.root.useSelectedTrackEntry.mockReturnValueOnce(null);
+        out = useAssignmentFilterData({ updateQueryParams });
+        expect(out.tracks.value).toEqual('');
+      });
+      describe('handleEvent', () => {
+        it('updates filter and query params and fetches grades', () => {
+          out.tracks.handleChange({ target: { value: testTrack.slug } });
+          expect(updateTrack).toHaveBeenCalledWith(testTrack.slug.toString());
+          expect(updateQueryParams).toHaveBeenCalledWith({ track: testTrack.slug.toString() });
+          expect(fetch).toHaveBeenCalled();
+        });
+        it('passes null if no matching track is found', () => {
+          out.tracks.handleChange({ target: { value: 'fake-name' } });
+          expect(updateTrack).toHaveBeenCalledWith(null);
+          expect(updateQueryParams).toHaveBeenCalledWith({ track: null });
+          expect(fetch).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

src/components/GradebookFilters/StudentGroupsFilter/index.jsx

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

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SelectGroup from '../SelectGroup';
+import useStudentGroupsFilterData from './hooks';
+import StudentGroupsFilter from '.';
+
+jest.mock('../SelectGroup', () => 'SelectGroup');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const props = {
+  cohorts: {
+    value: 'test-cohort',
+    entries: [
+      { value: 'v1', name: 'n1' },
+      { value: 'v2', name: 'n2' },
+      { value: 'v3', name: 'n3' },
+    ],
+    handleChange: jest.fn(),
+    isDisabled: false,
+  },
+  tracks: {
+    value: 'test-track',
+    entries: [
+      { value: 'v1', name: 'n1' },
+      { value: 'v2', name: 'n2' },
+      { value: 'v3', name: 'n3' },
+      { value: 'v4', name: 'n4' },
+    ],
+    handleChange: jest.fn(),
+  },
+};
+useStudentGroupsFilterData.mockReturnValue(props);
+const updateQueryParams = jest.fn();
+
+let el;
+describe('StudentGroupsFilter component', () => {
+  beforeAll(() => {
+    jest.clearAllMocks();
+    el = shallow(<StudentGroupsFilter updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useStudentGroupsFilterData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('track options', () => {
+      const {
+        options,
+        onChange,
+        value,
+      } = el.find(SelectGroup).at(0).props();
+      expect(value).toEqual(props.tracks.value);
+      expect(onChange).toEqual(props.tracks.handleChange);
+      expect(options.length).toEqual(5);
+      const testEntry = props.tracks.entries[0];
+      const optionProps = options[1].props;
+      expect(optionProps.value).toEqual(testEntry.value);
+      expect(optionProps.children).toEqual(testEntry.name);
+    });
+    test('cohort options', () => {
+      const {
+        options,
+        onChange,
+        disabled,
+        value,
+      } = el.find(SelectGroup).at(1).props();
+      expect(value).toEqual(props.cohorts.value);
+      expect(disabled).toEqual(false);
+      expect(onChange).toEqual(props.cohorts.handleChange);
+      expect(options.length).toEqual(4);
+      const testEntry = props.cohorts.entries[0];
+      const optionProps = options[1].props;
+      expect(optionProps.value).toEqual(testEntry.value);
+      expect(optionProps.children).toEqual(testEntry.name);
+    });
+  });
+});

src/components/GradebookFilters/StudentGroupsFilter/test.jsx

@@ -1,238 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { fetchGrades } from 'data/thunkActions/grades';
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import {
-  optionFactory,
-  StudentGroupsFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    root: {
-      selectedCohortEntry: jest.fn(state => ({ selectedCohortEntry: state })),
-      selectedTrackEntry: jest.fn(state => ({ selectedTrackEntry: state })),
-    },
-    cohorts: {
-      allCohorts: jest.fn(state => ({ allCohorts: state })),
-      cohortsByName: jest.fn(state => ({ cohortsByName: state })),
-    },
-    tracks: {
-      allTracks: jest.fn(state => ({ allTracks: state })),
-      tracksByName: jest.fn(state => ({ tracksByName: state })),
-    },
-  },
-}));
-
-jest.mock('data/thunkActions/grades', () => ({
-  fetchGrades: jest.fn(),
-}));
-
-describe('StudentGroupsFilter', () => {
-  let props = {
-    cohorts: [
-      { name: 'cohorT1', id: 8001 },
-      { name: 'cohorT2', id: 8002 },
-      { name: 'cohorT3', id: 8003 },
-    ],
-    tracks: [
-      { name: 'TracK1', slug: 'TracK1_slug' },
-      { name: 'TracK2', slug: 'TracK2_slug' },
-      { name: 'TRACK3', slug: 'TRACK3_slug' },
-    ],
-  };
-
-  describe('optionFactory', () => {
-    it('returns a list of options with a default first entry', () => {
-      const data = [{ cMark: 'rainbow', name: 'RDash' }, { cMark: 'balloons', name: 'PPie' }];
-      const defaultOption = 'All-Ponies';
-      const key = 'cMark';
-      const options = optionFactory({ data, defaultOption, key });
-      expect(options).toMatchSnapshot();
-    });
-  });
-
-  describe('Component', () => {
-    beforeEach(() => {
-      props = {
-        ...props,
-        cohortsByName: {
-          [props.cohorts[0].name]: props.cohorts[0],
-          [props.cohorts[1].name]: props.cohorts[1],
-          [props.cohorts[2].name]: props.cohorts[2],
-        },
-        tracksByName: {
-          [props.tracks[0].name]: props.tracks[0],
-          [props.tracks[1].name]: props.tracks[1],
-          [props.tracks[2].name]: props.tracks[2],
-        },
-        fetchGrades: jest.fn(),
-        selectedCohortEntry: props.cohorts[2],
-        selectedTrackEntry: props.tracks[1],
-        updateQueryParams: jest.fn(),
-        updateCohort: jest.fn().mockName('updateCohort'),
-        updateTrack: jest.fn().mockName('updateTrack'),
-      };
-    });
-
-    describe('snapshots', () => {
-      let el;
-      beforeEach(() => {
-        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('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 updateTrack with new value', () => {
-          expect(props.updateTrack).toHaveBeenCalledWith(selectedSlug);
-        });
-        it('calls fetchGrades', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates queryParams with track value', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            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 updateCohort with new value', () => {
-          expect(props.updateCohort).toHaveBeenCalledWith(selectedId);
-        });
-        it('calls fetchGrades', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates queryParams with cohort value', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            cohort: selectedId,
-          });
-        });
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { h: 'e', l: 'l', o: 'oooooooooo' };
-    let mappedProps;
-    beforeAll(() => {
-      mappedProps = mapStateToProps(testState);
-    });
-    test('cohorts from selectors.cohorts.allCohorts', () => {
-      expect(mappedProps.cohorts).toEqual(selectors.cohorts.allCohorts(testState));
-    });
-    test('cohortsByName from selectors.cohorts.cohortsByName', () => {
-      expect(mappedProps.cohortsByName).toEqual(selectors.cohorts.cohortsByName(testState));
-    });
-    test('selectedCohortEntry from selectors.root.selectedCohortEntry', () => {
-      expect(
-        mappedProps.selectedCohortEntry,
-      ).toEqual(selectors.root.selectedCohortEntry(testState));
-    });
-    test('selectedTrackEntry from selectors.root.selectedTrackEntry', () => {
-      expect(
-        mappedProps.selectedTrackEntry,
-      ).toEqual(selectors.root.selectedTrackEntry(testState));
-    });
-    test('tracks from selectors.tracks.allTracks', () => {
-      expect(mappedProps.tracks).toEqual(selectors.tracks.allTracks(testState));
-    });
-    test('tracksByName from selectors.tracks.tracksByName', () => {
-      expect(mappedProps.tracksByName).toEqual(selectors.tracks.tracksByName(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
-      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
-    });
-    test('updateCohort from actions.filters.update.cohort', () => {
-      expect(mapDispatchToProps.updateCohort).toEqual(actions.filters.update.cohort);
-    });
-    test('updateTrack from actions.filters.update.track', () => {
-      expect(mapDispatchToProps.updateTrack).toEqual(actions.filters.update.track);
-    });
-  });
-});

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

@@ -4,29 +4,22 @@ exports[`PercentGroup Component snapshots basic snapshot 1`] = `
 <div
   className="percent-group"
 >
-  <FormGroup
-    as="div"
+  <Form.Group
     controlId="group id"
-    isInvalid={false}
-    isValid={false}
   >
-    <FormLabel
-      isInline={false}
-    >
+    <Form.Label>
       Group Label
-    </FormLabel>
-    <ForwardRef
-      as="input"
+    </Form.Label>
+    <Form.Control
       disabled={false}
       max={100}
       min={0}
       onChange={[MockFunction props.onChange]}
-      plaintext={false}
       step={1}
       type="number"
       value="group VALUE"
     />
-  </FormGroup>
+  </Form.Group>
   <span
     className="input-percent-label"
   >
@@ -39,29 +32,22 @@ exports[`PercentGroup Component snapshots disabled 1`] = `
 <div
   className="percent-group"
 >
-  <FormGroup
-    as="div"
+  <Form.Group
     controlId="group id"
-    isInvalid={false}
-    isValid={false}
   >
-    <FormLabel
-      isInline={false}
-    >
+    <Form.Label>
       Group Label
-    </FormLabel>
-    <ForwardRef
-      as="input"
+    </Form.Label>
+    <Form.Control
       disabled={true}
       max={100}
       min={0}
       onChange={[MockFunction props.onChange]}
-      plaintext={false}
       step={1}
       type="number"
       value="group VALUE"
     />
-  </FormGroup>
+  </Form.Group>
   <span
     className="input-percent-label"
   >

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

@@ -4,22 +4,16 @@ exports[`SelectGroup Component snapshots basic snapshot 1`] = `
 <div
   className="student-filters"
 >
-  <FormGroup
-    as="div"
+  <Form.Group
     controlId="group id"
-    isInvalid={false}
-    isValid={false}
   >
-    <FormLabel
-      isInline={false}
-    >
+    <Form.Label>
       Group Label
-    </FormLabel>
-    <ForwardRef
+    </Form.Label>
+    <Form.Control
       as="select"
       disabled={false}
       onChange={[MockFunction props.onChange]}
-      plaintext={false}
       value="group VALUE"
     >
       <option
@@ -40,8 +34,8 @@ exports[`SelectGroup Component snapshots basic snapshot 1`] = `
       >
         Option 3
       </option>
-    </ForwardRef>
-  </FormGroup>
+    </Form.Control>
+  </Form.Group>
 </div>
 `;
 
@@ -49,22 +43,16 @@ exports[`SelectGroup Component snapshots disabled 1`] = `
 <div
   className="student-filters"
 >
-  <FormGroup
-    as="div"
+  <Form.Group
     controlId="group id"
-    isInvalid={false}
-    isValid={false}
   >
-    <FormLabel
-      isInline={false}
-    >
+    <Form.Label>
       Group Label
-    </FormLabel>
-    <ForwardRef
+    </Form.Label>
+    <Form.Control
       as="select"
       disabled={true}
       onChange={[MockFunction props.onChange]}
-      plaintext={false}
       value="group VALUE"
     >
       <option
@@ -85,7 +73,7 @@ exports[`SelectGroup Component snapshots disabled 1`] = `
       >
         Option 3
       </option>
-    </ForwardRef>
-  </FormGroup>
+    </Form.Control>
+  </Form.Group>
 </div>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
-<React.Fragment>
+exports[`GradebookFilters render snapshot 1`] = `
+<Fragment>
   <div
     className="filter-sidebar-header"
   >
@@ -15,8 +15,8 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
       aria-label="Close Filters"
       className="p-1"
       iconAs="Icon"
-      onClick={[MockFunction this.props.closeMenu]}
-      src="paragon.icons.Close"
+      onClick={[MockFunction hook.closeMenu]}
+      src={[Function]}
     />
   </div>
   <Collapsible
@@ -25,13 +25,13 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
     title="Assignments"
   >
     <div>
-      <Connect(AssignmentTypeFilter)
+      <AssignmentTypeFilter
         updateQueryParams={[MockFunction]}
       />
-      <Connect(AssignmentFilter)
+      <AssignmentFilter
         updateQueryParams={[MockFunction]}
       />
-      <Connect(AssignmentGradeFilter)
+      <AssignmentGradeFilter
         updateQueryParams={[MockFunction]}
       />
     </div>
@@ -41,7 +41,7 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
     defaultOpen={true}
     title="Overall Grade"
   >
-    <Connect(CourseGradeFilter)
+    <CourseGradeFilter
       updateQueryParams={[MockFunction]}
     />
   </Collapsible>
@@ -50,7 +50,7 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
     defaultOpen={true}
     title="Student Groups"
   >
-    <Connect(StudentGroupsFilter)
+    <StudentGroupsFilter
       updateQueryParams={[MockFunction]}
     />
   </Collapsible>
@@ -59,12 +59,12 @@ exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
     defaultOpen={true}
     title="Include Course Team Members"
   >
-    <Checkbox
+    <Form.Checkbox
       checked={true}
-      onChange={[MockFunction handleIncludeTeamMembersChange]}
+      onChange={[MockFunction hook.handleChange]}
     >
       Include Course Team Members
-    </Checkbox>
+    </Form.Checkbox>
   </Collapsible>
-</React.Fragment>
+</Fragment>
 `;

src/components/GradebookFilters/hooks.js

@@ -0,0 +1,23 @@
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+
+export const useGradebookFiltersData = ({ updateQueryParams }) => {
+  const includeCourseRoleMembers = selectors.filters.useIncludeCourseRoleMembers();
+  const updateIncludeCourseRoleMembers = actions.filters.useUpdateIncludeCourseRoleMembers();
+  const closeMenu = thunkActions.app.useCloseFilterMenu();
+  const fetchGrades = thunkActions.grades.useFetchGrades();
+
+  const handleIncludeTeamMembersChange = ({ target: { checked } }) => {
+    updateIncludeCourseRoleMembers(checked);
+    fetchGrades();
+    updateQueryParams({ includeCourseRoleMembers: checked });
+  };
+  return {
+    closeMenu,
+    includeCourseTeamMembers: {
+      handleChange: handleIncludeTeamMembersChange,
+      value: includeCourseRoleMembers,
+    },
+  };
+};
+
+export default useGradebookFiltersData;

src/components/GradebookFilters/hooks.test.jsx

@@ -0,0 +1,57 @@
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+import * as hooks from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  actions: {
+    filters: { useUpdateIncludeCourseRoleMembers: jest.fn() },
+  },
+  selectors: {
+    filters: { useIncludeCourseRoleMembers: jest.fn() },
+  },
+  thunkActions: {
+    app: { useCloseFilterMenu: jest.fn() },
+    grades: { useFetchGrades: jest.fn() },
+  },
+}));
+
+selectors.filters.useIncludeCourseRoleMembers.mockReturnValue(true);
+const updateIncludeCourseRoleMembers = jest.fn();
+actions.filters.useUpdateIncludeCourseRoleMembers.mockReturnValue(updateIncludeCourseRoleMembers);
+const closeFilterMenu = jest.fn();
+thunkActions.app.useCloseFilterMenu.mockReturnValue(closeFilterMenu);
+const fetchGrades = jest.fn();
+thunkActions.grades.useFetchGrades.mockReturnValue(fetchGrades);
+
+const updateQueryParams = jest.fn();
+
+let out;
+describe('GradebookFiltersData component hooks', () => {
+  describe('useGradebookFiltersData', () => {
+    beforeEach(() => {
+      out = hooks.useGradebookFiltersData({ updateQueryParams });
+    });
+    describe('behavior', () => {
+      it('initializes hooks', () => {
+        expect(actions.filters.useUpdateIncludeCourseRoleMembers).toHaveBeenCalledWith();
+        expect(selectors.filters.useIncludeCourseRoleMembers).toHaveBeenCalledWith();
+        expect(thunkActions.app.useCloseFilterMenu).toHaveBeenCalledWith();
+        expect(thunkActions.grades.useFetchGrades).toHaveBeenCalledWith();
+      });
+    });
+    describe('output', () => {
+      test('closeMenu', () => {
+        expect(out.closeMenu).toEqual(closeFilterMenu);
+      });
+      test('includeCourseTeamMembers value', () => {
+        expect(out.includeCourseTeamMembers.value).toEqual(true);
+      });
+      test('includeCourseTeamMembers handleChange', () => {
+        const event = { target: { checked: false } };
+        out.includeCourseTeamMembers.handleChange(event);
+        expect(updateIncludeCourseRoleMembers).toHaveBeenCalledWith(false);
+        expect(fetchGrades).toHaveBeenCalledWith();
+        expect(updateQueryParams).toHaveBeenCalledWith({ includeCourseRoleMembers: false });
+      });
+    });
+  });
+});

src/components/GradebookFilters/index.jsx

@@ -1,7 +1,5 @@
-/* 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,
@@ -10,106 +8,82 @@ import {
   Form,
 } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-
+import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
 import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
 import CourseGradeFilter from './CourseGradeFilter';
 import StudentGroupsFilter from './StudentGroupsFilter';
+import useGradebookFiltersData from './hooks';
 
-export class GradebookFilters extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      includeCourseRoleMembers: this.props.includeCourseRoleMembers,
-    };
-    this.handleIncludeTeamMembersChange = this.handleIncludeTeamMembersChange.bind(this);
-  }
+export const GradebookFilters = ({ updateQueryParams }) => {
+  const {
+    closeMenu,
+    includeCourseTeamMembers,
+  } = useGradebookFiltersData({ updateQueryParams });
+  const { formatMessage } = useIntl();
+  const collapsibleClassName = 'filter-group mb-3';
+  return (
+    <>
+      <div className="filter-sidebar-header">
+        <h2><Icon className="fa fa-filter" /></h2>
+        <IconButton
+          className="p-1"
+          onClick={closeMenu}
+          iconAs={Icon}
+          src={Close}
+          alt={formatMessage(messages.closeFilters)}
+          aria-label={formatMessage(messages.closeFilters)}
+        />
+      </div>
 
-  handleIncludeTeamMembersChange(event) {
-    const includeCourseRoleMembers = event.target.checked;
-    this.setState({ includeCourseRoleMembers });
-    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
-    this.props.fetchGrades();
-    this.props.updateQueryParams({ includeCourseRoleMembers });
-  }
-
-  collapsibleGroup = (title, content) => (
-    <Collapsible title={title} defaultOpen className="filter-group mb-3">
-      {content}
-    </Collapsible>
-  );
-
-  render() {
-    const {
-      updateQueryParams,
-    } = this.props;
-    return (
-      <>
-        <div className="filter-sidebar-header">
-          <h2><Icon className="fa fa-filter" /></h2>
-          <IconButton
-            className="p-1"
-            onClick={this.props.closeMenu}
-            iconAs={Icon}
-            src={Close}
-            alt="Close Filters"
-            aria-label="Close Filters"
-          />
+      <Collapsible
+        title={formatMessage(messages.assignments)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
         </div>
+      </Collapsible>
 
-        {this.collapsibleGroup('Assignments', (
-          <div>
-            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
-            <AssignmentFilter updateQueryParams={updateQueryParams} />
-            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
-          </div>
-        ))}
+      <Collapsible
+        title={formatMessage(messages.overallGrade)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <CourseGradeFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup('Overall Grade', (
-          <CourseGradeFilter updateQueryParams={updateQueryParams} />
-        ))}
+      <Collapsible
+        title={formatMessage(messages.studentGroups)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup('Student Groups', (
-          <StudentGroupsFilter 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,
+      <Collapsible
+        title={formatMessage(messages.includeCourseTeamMembers)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <Form.Checkbox
+          checked={includeCourseTeamMembers.value}
+          onChange={includeCourseTeamMembers.handleChange}
+        >
+          {formatMessage(messages.includeCourseTeamMembers)}
+        </Form.Checkbox>
+      </Collapsible>
+    </>
+  );
 };
 GradebookFilters.propTypes = {
   updateQueryParams: PropTypes.func.isRequired,
-  // redux
-  closeMenu: PropTypes.func.isRequired,
-  fetchGrades: PropTypes.func.isRequired,
-  includeCourseRoleMembers: PropTypes.bool,
-  updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  includeCourseRoleMembers: selectors.filters.includeCourseRoleMembers(state),
-});
-
-export const mapDispatchToProps = {
-  closeMenu: thunkActions.app.filterMenu.close,
-  fetchGrades: thunkActions.grades.fetchGrades,
-  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(GradebookFilters);
+export default GradebookFilters;

src/components/GradebookFilters/index.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible } from '@edx/paragon';
+
+import { formatMessage } from 'testUtils';
+
+import AssignmentTypeFilter from './AssignmentTypeFilter';
+import AssignmentFilter from './AssignmentFilter';
+import AssignmentGradeFilter from './AssignmentGradeFilter';
+import CourseGradeFilter from './CourseGradeFilter';
+import StudentGroupsFilter from './StudentGroupsFilter';
+import messages from './messages';
+
+import useGradebookFiltersData from './hooks';
+import GradebookFilters from '.';
+
+jest.mock('./AssignmentTypeFilter', () => 'AssignmentTypeFilter');
+jest.mock('./AssignmentFilter', () => 'AssignmentFilter');
+jest.mock('./AssignmentGradeFilter', () => 'AssignmentGradeFilter');
+jest.mock('./CourseGradeFilter', () => 'CourseGradeFilter');
+jest.mock('./StudentGroupsFilter', () => 'StudentGroupsFilter');
+
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const hookProps = {
+  closeMenu: jest.fn().mockName('hook.closeMenu'),
+  includeCourseTeamMembers: {
+    value: true,
+    handleChange: jest.fn().mockName('hook.handleChange'),
+  },
+};
+useGradebookFiltersData.mockReturnValue(hookProps);
+
+let el;
+const updateQueryParams = jest.fn();
+
+describe('GradebookFilters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<GradebookFilters updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useGradebookFiltersData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('Assignment filters', () => {
+      expect(el.find(Collapsible).at(0).children()).toMatchObject(shallow(
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
+        </div>,
+      ));
+    });
+    test('CourseGrade filters', () => {
+      expect(el.find(Collapsible).at(1).children()).toMatchObject(shallow(
+        <CourseGradeFilter updateQueryParams={updateQueryParams} />,
+      ));
+    });
+    test('StudentGroups filters', () => {
+      expect(el.find(Collapsible).at(2).children()).toMatchObject(shallow(
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />,
+      ));
+    });
+    test('includeCourseTeamMembers', () => {
+      const checkbox = el.find(Collapsible).at(3).children();
+      expect(checkbox.props()).toEqual({
+        checked: true,
+        onChange: hookProps.includeCourseTeamMembers.handleChange,
+        children: formatMessage(messages.includeCourseTeamMembers),
+      });
+    });
+  });
+});

src/components/GradebookFilters/messages.js

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

src/components/GradebookFilters/test.jsx

@@ -1,120 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-
-import {
-  GradebookFilters,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('@edx/paragon', () => ({
-  Collapsible: 'Collapsible',
-  Form: {
-    Checkbox: 'Checkbox',
-  },
-  Icon: 'Icon',
-  IconButton: 'IconButton',
-}));
-jest.mock('@edx/paragon/icons', () => ({
-  Close: 'paragon.icons.Close',
-}));
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    filters: {
-      includeCourseRoleMembers: jest.fn((state) => ({ includeCourseRoleMembers: state })),
-    },
-  },
-}));
-jest.mock('data/thunkActions', () => ({
-  __esModule: true,
-  default: {
-    app: { filterMenu: { close: jest.fn() } },
-    grades: { fetchGrades: jest.fn() },
-  },
-}));
-
-describe('GradebookFilters', () => {
-  let props = {
-    includeCourseRoleMembers: true,
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      closeMenu: jest.fn().mockName('this.props.closeMenu'),
-      fetchGrades: jest.fn(),
-      updateIncludeCourseRoleMembers: jest.fn(),
-      updateQueryParams: 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 testState = { A: 'laska' };
-    test('includeCourseRoleMembers from filters.includeCourseRoleMembers', () => {
-      expect(
-        mapStateToProps(testState).includeCourseRoleMembers,
-      ).toEqual(selectors.filters.includeCourseRoleMembers(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
-      expect(mapDispatchToProps.fetchGrades).toEqual(thunkActions.grades.fetchGrades);
-    });
-    describe('updateIncludeCourseRoleMembers', () => {
-      test('from actions.filters.update.includeCourseRoleMembers', () => {
-        expect(mapDispatchToProps.updateIncludeCourseRoleMembers).toEqual(
-          actions.filters.update.includeCourseRoleMembers,
-        );
-      });
-    });
-  });
-});