feat: Add max value warning and disable the submit button

Co-authored-by: lkatsikaris <lkatsikaris@@users.noreply.github.com>

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>

.env

@@ -10,6 +10,7 @@ DATA_API_BASE_URL=''
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 ACCESS_TOKEN_COOKIE_NAME=''
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
 NEW_RELIC_APP_ID=''
 NEW_RELIC_LICENSE_KEY=''
 SITE_NAME=''
@@ -30,3 +31,6 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='true'

.env.development

@@ -7,11 +7,11 @@ LOGOUT_URL='http://localhost:18000/login'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SITE_NAME=localhost
 DATA_API_BASE_URL='http://localhost:8000'
@@ -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,3 +37,6 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+APP_ID=''
+MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='false'

.eslintignore

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

.eslintrc.js

@@ -1,4 +1,5 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {
@@ -6,14 +7,22 @@ const config = createConfig('eslint', {
     '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/dependabot.yml

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

.github/pull_request_template.md

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

.github/renovate.json

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

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

@@ -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-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Setup Nodejs
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Unit Tests
+      run: npm run test
+
+    - name: Validate Package Lock
+      run: make validate-no-uncommitted-package-lock-changes
+
+    - name: Run Lint
+      run: npm run lint
+
+    - name: Run Test
+      run: npm run test
+
+    - name: Run Build
+      run: npm run build
+
+    - name: Run Coverage
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
+
+    - name: Send failure notification
+      if: ${{ failure() }}
+      uses: dawidd6/action-send-mail@v4
+      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

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    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/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
@@ -21,3 +23,5 @@ dist/
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages/

.npmignore

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

.nvmrc

@@ -0,0 +1 @@
+20

.releaserc

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

.travis.yml

@@ -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

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

Makefile

@@ -1,18 +1,14 @@
 npm-install-%: ## install specified % npm package
-	npm install $* --save-dev
+	npm ci $* --save-dev
 	git add package.json
 
-transifex_resource = frontend-app-gradebook
-transifex_langs = "ar,fr,es_419,zh_CN"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-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
+transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test is-es5
 
@@ -39,27 +35,22 @@ i18n.concat:
 
 extract_translations: | requirements i18n.extract i18n.concat
 
-# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-detect_changed_source_translations:
-	# Checking for changed translations...
-	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
-	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
-
-# Pulls translations from Transifex.
+# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull $(ATLAS_OPTIONS) \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
 
-# This target is used by Travis.
+	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-gradebook
+
+# This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json

README.md

@@ -1,10 +1,13 @@
-[![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)
+# 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)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-# Gradebook
+# Purpose
 
 Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
 
@@ -46,7 +49,8 @@ depending on their needs. Instructors that expect to review grades infrequently
 to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
 generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
 
-## Quickstart
+## Getting Started
+
 
 ### Installation
 
@@ -54,10 +58,24 @@ To install gradebook into your project:
 ```
 npm i --save @edx/frontend-app-gradebook
 ```
+Cloning and Startup
+===================
+
+1. Clone your new repo:
+
+  ``git clone https://github.com/openedx/frontend-app-gradebook.git``
+
+2. Install npm dependencies:
+
+  ``cd frontend-app-gradebook && npm install``
+
+3. Start the dev server:
+
+  ``npm start``
 
 ## 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.
 
@@ -90,6 +108,11 @@ check the ``enabled`` and ``enabled for all courses`` boxes.
 numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
 recalculated grade values, verify you've set all flags correctly.
 
+## Plugins
+This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework).
+
+The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots).
+
 ## Running tests
 
 1. Assuming that you're operating in the context of the edX devstack,
@@ -117,4 +140,58 @@ 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.
+
+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Contributing
+============
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+Getting Help
+===========
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-gradebook/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+The Open edX Code of Conduct
+============================
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+Reporting Security Issues
+=========================
+Please do not report security issues in public. Please email security@openedx.org.

babel.config.js

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

catalog-info.yaml

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

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
 ========

jest.config.js

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

package.json

@@ -1,58 +1,61 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.47",
+  "version": "1.6.2",
   "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",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
     "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/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-platform": "8.0.0",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/react-unit-test-utils": "^3.0.0",
+    "@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",
     "@fortawesome/react-fontawesome": "^0.1.5",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.1.1",
     "@redux-beacon/segment": "^1.0.0",
     "@reduxjs/toolkit": "^1.5.1",
     "classnames": "^2.2.6",
     "core-js": "3.6.5",
     "email-prop-type": "^1.1.7",
-    "enzyme": "^3.10.0",
-    "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "node-sass": "^4.14.1",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-intl": "^2.9.0",
-    "react-redux": "^5.1.1",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",
+    "react-redux": "^7.2.9",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.0.5",
     "redux-beacon": "^2.1.0",
@@ -60,25 +63,21 @@
     "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",
-    "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "@edx/browserslist-config": "^1.1.1",
+    "@openedx/frontend-build": "14.0.3",
+    "@testing-library/react": "12.1.5",
     "es-check": "^2.3.0",
-    "fetch-mock": "^6.5.2",
+    "fetch-mock": "^12.2.0",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "24.9.0",
-    "react-dev-utils": "^5.0.3",
-    "react-test-renderer": "^16.10.1",
+    "jest": "^29.7.0",
+    "react-dev-utils": "^12.0.1",
+    "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3",
-    "travis-deploy-once": "^5.0.11"
+    "redux-mock-store": "^1.5.3"
   }
 }

src/App.jsx

@@ -1,36 +1,32 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { IntlProvider } from 'react-intl';
+import { Route, Routes } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import FooterSlot from '@openedx/frontend-slot-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 EdxHeader from 'components/EdxHeader';
 import './App.scss';
+import Head from './head/Head';
 
 const App = () => (
-  <IntlProvider locale="en">
-    <Provider store={store}>
-      <Router>
-        <div>
-          <EdxHeader />
-          <main>
-            <Switch>
-              <Route
-                exact
-                path={routePath}
-                component={GradebookPage}
-              />
-            </Switch>
-          </main>
-          <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-        </div>
-      </Router>
-    </Provider>
-  </IntlProvider>
+  <AppProvider store={store}>
+    <Head />
+    <div>
+      <Header />
+      <main>
+        <Routes>
+          <Route
+            path="/:courseId"
+            element={<GradebookPage />}
+          />
+        </Routes>
+      </main>
+      <FooterSlot />
+    </div>
+  </AppProvider>
 );
 
 export default App;

src/App.scss

@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";
@@ -9,6 +9,7 @@ $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/GradesView/GradesView";

src/App.test.jsx

@@ -1,86 +1,63 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { IntlProvider } from 'react-intl';
+import { Route } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
-
-import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
-import EdxHeader from 'components/EdxHeader';
 
 import App from './App';
 
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
   Route: () => 'Route',
-  Switch: () => 'Switch',
+  Routes: () => 'Routes',
 }));
-jest.mock('react-redux', () => ({
-  Provider: () => 'Provider',
+jest.mock('@edx/frontend-platform/react', () => ({
+  AppProvider: () => 'AppProvider',
 }));
-jest.mock('react-intl', () => ({
-  IntlProvider: () => 'IntlProvider',
-}));
-jest.mock('data/constants/app', () => ({
-  routePath: '/:courseId',
-}));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
-jest.mock('components/EdxHeader', () => 'EdxHeader');
+jest.mock('@edx/frontend-component-header', () => 'Header');
+jest.mock('./head/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
-let router;
+let secondChild;
 
 describe('App router component', () => {
   test('snapshot', () => {
-    expect(shallow(<App />)).toMatchSnapshot();
+    expect(shallow(<App />).snapshot).toMatchSnapshot();
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      router = el.childAt(0).childAt(0);
+      secondChild = el.instance.children;
     });
-    describe('IntlProvider', () => {
-      test('outer-wrapper component', () => {
-        expect(el.type()).toBe(IntlProvider);
-      });
-      test('"en" locale', () => {
-        expect(el.props().locale).toEqual('en');
+    describe('AppProvider', () => {
+      test('AppProvider is the parent component, passed the redux store props', () => {
+        expect(el.instance.type).toBe('AppProvider');
+        expect(el.instance.props.store).toEqual(store);
       });
     });
-    describe('Provider, inside IntlProvider', () => {
-      test('first child, passed the redux store props', () => {
-        expect(el.childAt(0).type()).toBe(Provider);
-        expect(el.childAt(0).props().store).toEqual(store);
+    describe('Head', () => {
+      test('first child of AppProvider', () => {
+        expect(el.instance.children[0].type).toBe('Head');
       });
     });
     describe('Router', () => {
-      test('first child of Provider', () => {
-        expect(router.type()).toBe(Router);
+      test('second child of AppProvider', () => {
+        expect(secondChild[1].type).toBe('div');
       });
-      test('EdxHeader is above/outside-of the routing', () => {
-        expect(router.childAt(0).childAt(0).type()).toBe(EdxHeader);
-        expect(router.childAt(0).childAt(1).type()).toBe('main');
+      test('Header is above/outside-of the routing', () => {
+        expect(secondChild[1].children[0].type).toBe('Header');
+        expect(secondChild[1].children[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>,
-        ));
+        expect(secondChild[1].findByType(Route)).toHaveLength(1);
+        expect(secondChild[1].findByType(Route)[0].props.path).toEqual('/:courseId');
+        expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -1,27 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App router component snapshot 1`] = `
-<IntlProvider
-  locale="en"
+<AppProvider
+  store="testStore"
 >
-  <Provider
-    store="testStore"
-  >
-    <BrowserRouter>
-      <div>
-        <EdxHeader />
-        <main>
-          <Switch>
-            <Route
-              component="GradebookPage"
-              exact={true}
-              path="/:courseId"
-            />
-          </Switch>
-        </main>
-        <Footer />
-      </div>
-    </BrowserRouter>
-  </Provider>
-</IntlProvider>
+  <Head />
+  <div>
+    <Header />
+    <main>
+      <Routes>
+        <Route
+          element={<GradebookPage />}
+          path="/:courseId"
+        />
+      </Routes>
+    </main>
+    <FooterSlot />
+  </div>
+</AppProvider>
 `;

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import messages from './messages';

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Alert } from '@edx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Alert } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -12,7 +12,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
   FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Alert: () => 'Alert',
 }));
 jest.mock('data/selectors', () => ({
@@ -35,17 +35,17 @@ describe('BulkManagementAlerts', () => {
         el = shallow(<BulkManagementAlerts />);
       });
       test('snapshot - bulkImportError closed, success closed', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('closed danger alert', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).props().show).toEqual(false);
-        expect(el.childAt(0).props().variant).toEqual('danger');
+        expect(el.instance.children[0].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[0].props.show).toEqual(false);
+        expect(el.instance.findByType(Alert)[0].props.variant).toEqual('danger');
       });
       test('closed success alert', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).props().show).toEqual(false);
-        expect(el.childAt(1).props().variant).toEqual('success');
+        expect(el.instance.children[1].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[1].props.show).toEqual(false);
+        expect(el.instance.findByType(Alert)[1].props.variant).toEqual('success');
       });
     });
     describe('no errer, no upload success', () => {
@@ -57,19 +57,19 @@ describe('BulkManagementAlerts', () => {
         'success alert open with messages.successDialog',
       ];
       test(`snapshot - ${assertions.join(', ')}`, () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('open danger alert with bulkImportError content', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).children().text()).toEqual(errorMessage);
-        expect(el.childAt(0).props().show).toEqual(true);
+        expect(el.instance.children[0].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[0].children[0].el).toEqual(errorMessage);
+        expect(el.instance.findByType(Alert)[0].props.show).toEqual(true);
       });
       test('open success alert with messages.successDialog content', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().getElement()).toEqual(
+        expect(el.instance.children[1].type).toBe('Alert');
+        expect(el.shallowWrapper.props.children[1].props.children).toEqual(
           <FormattedMessage {...messages.successDialog} />,
         );
-        expect(el.childAt(1).props().show).toEqual(true);
+        expect(el.instance.children[1].props.show).toEqual(true);
       });
     });
   });

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Table } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';
@@ -30,14 +30,13 @@ export const mapHistoryRows = ({
 export const HistoryTable = ({
   bulkManagementHistory,
 }) => (
-  <>
-    <Table
-      data={bulkManagementHistory.map(mapHistoryRows)}
-      hasFixedColumnWidths
-      columns={bulkManagementColumns}
-      className="table-striped"
-    />
-  </>
+  <DataTable
+    data={bulkManagementHistory.map(mapHistoryRows)}
+    hasFixedColumnWidths
+    columns={bulkManagementColumns}
+    className="table-striped"
+    itemCount={bulkManagementHistory.length}
+  />
 );
 HistoryTable.defaultProps = {
   bulkManagementHistory: [],

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Table } from '@edx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+import { DataTable } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,13 +9,12 @@ import { bulkManagementColumns } from 'data/constants/app';
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';
 
+jest.mock('@openedx/paragon', () => ({ DataTable: () => 'DataTable' }));
+
 jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
   FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
-}));
 jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
@@ -57,12 +56,12 @@ describe('HistoryTable', () => {
         el = shallow(<HistoryTable {...props} />);
       });
       test('snapshot - loads formatted table', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       describe('history table', () => {
         let table;
         beforeEach(() => {
-          table = el.find(Table);
+          table = el.instance.findByType(DataTable);
         });
         describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
           const fieldAssertions = [
@@ -71,10 +70,10 @@ describe('HistoryTable', () => {
             'forwards the rest',
           ];
           test(`snapshot: ${fieldAssertions.join(', ')}`, () => {
-            expect(table.props().data).toMatchSnapshot();
+            expect(table[0].props.data).toMatchSnapshot();
           });
           test(fieldAssertions.join(', '), () => {
-            const rows = table.props().data;
+            const rows = table[0].props.data;
             expect(rows[0].resultsSummary).toEqual(<ResultsSummary {...entry1.resultsSummary} />);
             expect(rows[0].user).toEqual(<span className="wrap-text-in-cell">{entry1.user}</span>);
             expect(
@@ -88,7 +87,7 @@ describe('HistoryTable', () => {
           });
         });
         test('columns from bulkManagementColumns', () => {
-          expect(table.props().columns).toEqual(bulkManagementColumns);
+          expect(table[0].props.columns).toEqual(bulkManagementColumns);
         });
       });
     });

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Hyperlink, Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 import ResultsSummary from './ResultsSummary';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
   Icon: () => 'Icon',
 }));
-jest.mock('@edx/paragon/icons', () => ({
+jest.mock('@openedx/paragon/icons', () => ({
   Download: 'DownloadIcon',
 }));
 jest.mock('data/services/lms', () => ({
@@ -35,19 +34,19 @@ describe('ResultsSummary component', () => {
     el = shallow(<ResultsSummary {...props} />);
   });
   test(`snapshot - ${assertions.join(', ')}`, () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('Hyperlink has target="_blank" and rel="noopener noreferrer"', () => {
-    expect(el.props().target).toEqual('_blank');
-    expect(el.props().rel).toEqual('noopener noreferrer');
+    expect(el.instance.props.target).toEqual('_blank');
+    expect(el.instance.props.rel).toEqual('noopener noreferrer');
   });
   test('Hyperlink has href to bulkGradesUrl', () => {
-    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
+    expect(el.instance.props.href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
   });
   test('displays Download Icon and text', () => {
-    const icon = el.childAt(0);
-    expect(icon.is(Icon)).toEqual(true);
-    expect(icon.props().src).toEqual(Download);
-    expect(el.childAt(1).text()).toEqual(props.text);
+    const icon = el.instance.children[0];
+    expect(icon.type).toEqual('Icon');
+    expect(icon.props.src).toEqual(Download);
+    expect(el.instance.children[1].el).toEqual(props.text);
   });
 });

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

@@ -1,8 +1,8 @@
 // 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"
     >
@@ -20,7 +20,7 @@ Array [
       Eifel
     </span>,
   },
-  Object {
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -42,78 +42,77 @@ Array [
 `;
 
 exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
-<Fragment>
-  <Table
-    className="table-striped"
-    columns={
-      Array [
-        Object {
-          "columnSortable": false,
-          "key": "filename",
-          "label": "Gradebook",
-          "width": "col-5",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "resultsSummary",
-          "label": "Download Summary",
-          "width": "col",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "user",
-          "label": "Who",
-          "width": "col-1",
-        },
-        Object {
-          "columnSortable": false,
-          "key": "timeUploaded",
-          "label": "When",
-          "width": "col",
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            blue.png
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="Da Bu Dee"
-            rowId={12}
-            text="Da ba daa"
-          />,
-          "timeUploaded": "65",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Eifel
-          </span>,
-        },
-        Object {
-          "filename": <span
-            className="wrap-text-in-cell"
-          >
-            allStar.jpg
-          </span>,
-          "resultsSummary": <ResultsSummary
-            courseId="rockstar"
-            rowId={2}
-            text="all that glitters is gold"
-          />,
-          "timeUploaded": "2000s?",
-          "user": <span
-            className="wrap-text-in-cell"
-          >
-            Smashmouth
-          </span>,
-        },
-      ]
-    }
-    hasFixedColumnWidths={true}
-  />
-</Fragment>
+<DataTable
+  className="table-striped"
+  columns={
+    [
+      {
+        "Header": "Gradebook",
+        "accessor": "filename",
+        "columnSortable": false,
+        "width": "col-5",
+      },
+      {
+        "Header": "Download Summary",
+        "accessor": "resultsSummary",
+        "columnSortable": false,
+        "width": "col",
+      },
+      {
+        "Header": "Who",
+        "accessor": "user",
+        "columnSortable": false,
+        "width": "col-1",
+      },
+      {
+        "Header": "When",
+        "accessor": "timeUploaded",
+        "columnSortable": false,
+        "width": "col",
+      },
+    ]
+  }
+  data={
+    [
+      {
+        "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>,
+      },
+      {
+        "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

@@ -4,8 +4,8 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
 <Hyperlink
   destination="www.edx.org"
   href={
-    Object {
-      "url": Object {
+    {
+      "url": {
         "rowId": 42,
       },
     }

src/components/BulkManagementHistoryView/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { BulkManagementHistoryView } from '.';
@@ -24,20 +24,23 @@ describe('BulkManagementHistoryView', () => {
         '<HistoryTable />',
       ];
       test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('heading - h4 loaded from messages', () => {
-        const heading = el.find('h4');
-        expect(heading.getElement()).toEqual((
+        const heading = el.instance.findByType('h4')[0];
+        const expectedHeading = shallow(
           <h4>
             <FormattedMessage {...messages.heading} />
-          </h4>
-        ));
+          </h4>,
+        );
+
+        expect(heading.el.type).toEqual(expectedHeading.type);
+        expect(heading.el.props).toEqual(expectedHeading.props);
       });
       test('heading, then alerts, then upload form, then table', () => {
-        expect(el.childAt(0).is('h4')).toEqual(true);
-        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
-        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
+        expect(el.instance.children[0].type).toEqual('h4');
+        expect(el.instance.children[2].type).toEqual(BulkManagementAlerts);
+        expect(el.instance.children[3].type).toEqual(HistoryTable);
       });
     });
   });

src/components/EdxHeader/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 /**

src/components/EdxHeader/test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { getConfig } from '@edx/frontend-platform';
 
 import Header from '.';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
 }));
 jest.mock('@edx/frontend-platform', () => ({
@@ -16,6 +16,6 @@ describe('Header', () => {
   test('snapshot - has edx link with logo url', () => {
     const url = 'www.ourLogo.url';
     getConfig.mockReturnValue({ LOGO_URL: url });
-    expect(shallow(<Header />)).toMatchSnapshot();
+    expect(shallow(<Header />).snapshot).toMatchSnapshot();
   });
 });

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={
+      [
+        <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,44 +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={
-      <FormattedMessage
-        defaultMessage="Assignment"
-        description="Assignment filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.assignmentFilterLabel"
-      />
-    }
-    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,98 +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 { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-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={<FormattedMessage {...messages.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 '@edx/react-unit-test-utils';
+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.snapshot).toMatchSnapshot();
+    });
+    test('filter options', () => {
+      const { options } = el.instance.findByType(SelectGroup)[0].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,162 +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('no selected option', () => {
-          const value = 'fake';
-          beforeEach(() => {
-            el = mount(<AssignmentFilter {...props} />);
-            el.instance().handleChange({ target: { value } });
-          });
-          it('calls props.updateAssignmentFilter with selection', () => {
-            expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
-              label: value,
-              type: undefined,
-              id: undefined,
-            });
-          });
-          it('calls props.updateQueryParams with selected assignment id',
-            () => {
-              expect(props.updateQueryParams).toHaveBeenCalledWith({
-                assignment: undefined,
-              });
-            });
-          it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
-            const method = props.fetchGradesIfAssignmentGradeFiltersSet;
-            expect(method).toHaveBeenCalledWith();
-          });
-        });
-      });
-    });
-    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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignmentFilter component render with selected assignment snapshot 1`] = `
+<div
+  className="grade-filter-inputs"
+>
+  <PercentGroup
+    disabled={false}
+    id="assignmentGradeMin"
+    label="Min Grade"
+    onChange={[MockFunction]}
+    value={23}
+  />
+  <PercentGroup
+    disabled={false}
+    id="assignmentGradeMax"
+    label="Max Grade"
+    onChange={[MockFunction]}
+    value={300}
+  />
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      disabled={false}
+      name="assignmentGradeMinMax"
+      type="submit"
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</div>
+`;
+
+exports[`AssignmentFilter component render without selected assignment snapshot 1`] = `
+<div
+  className="grade-filter-inputs"
+>
+  <PercentGroup
+    disabled={true}
+    id="assignmentGradeMin"
+    label="Min Grade"
+    onChange={[MockFunction]}
+    value={23}
+  />
+  <PercentGroup
+    disabled={true}
+    id="assignmentGradeMax"
+    label="Max Grade"
+    onChange={[MockFunction]}
+    value={300}
+  />
+  <div
+    className="grade-filter-action"
+  >
+    <Button
+      disabled={true}
+      name="assignmentGradeMinMax"
+      type="submit"
+      variant="outline-secondary"
+    >
+      Apply
+    </Button>
+  </div>
+</div>
+`;

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

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AssignmentGradeFilter Component snapshots buttons and groups disabled if no selected assignment 1`] = `
-<div
-  className="grade-filter-inputs"
->
-  <PercentGroup
-    disabled={true}
-    id="assignmentGradeMin"
-    label={
-      <FormattedMessage
-        defaultMessage="Min Grade"
-        description="Min-grade filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.minGradeFilterLabel"
-      />
-    }
-    onChange={[MockFunction handleSetMin]}
-    value="2"
-  />
-  <PercentGroup
-    disabled={true}
-    id="assignmentGradeMax"
-    label={
-      <FormattedMessage
-        defaultMessage="Max Grade"
-        description="Max-grade filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.maxGradeFilterLabel"
-      />
-    }
-    onChange={[MockFunction handleSetMax]}
-    value="98"
-  />
-  <div
-    className="grade-filter-action"
-  >
-    <ForwardRef
-      active={false}
-      disabled={true}
-      name="assignmentGradeMinMax"
-      onClick={[MockFunction handleSubmit]}
-      type="submit"
-      variant="outline-secondary"
-    >
-      Apply
-    </ForwardRef>
-  </div>
-</div>
-`;
-
-exports[`AssignmentGradeFilter Component snapshots smoke test 1`] = `
-<div
-  className="grade-filter-inputs"
->
-  <PercentGroup
-    disabled={false}
-    id="assignmentGradeMin"
-    label={
-      <FormattedMessage
-        defaultMessage="Min Grade"
-        description="Min-grade filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.minGradeFilterLabel"
-      />
-    }
-    onChange={[MockFunction handleSetMin]}
-    value="2"
-  />
-  <PercentGroup
-    disabled={false}
-    id="assignmentGradeMax"
-    label={
-      <FormattedMessage
-        defaultMessage="Max Grade"
-        description="Max-grade filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.maxGradeFilterLabel"
-      />
-    }
-    onChange={[MockFunction handleSetMax]}
-    value="98"
-  />
-  <div
-    className="grade-filter-action"
-  >
-    <ForwardRef
-      active={false}
-      disabled={false}
-      name="assignmentGradeMinMax"
-      onClick={[MockFunction handleSubmit]}
-      type="submit"
-      variant="outline-secondary"
-    >
-      Apply
-    </ForwardRef>
-  </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,103 +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 { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
 
+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 {
-      localAssignmentLimits: { assignmentGradeMax, assignmentGradeMin },
-    } = this.props;
-    return (
-      <div className="grade-filter-inputs">
-        <PercentGroup
-          id="assignmentGradeMin"
-          label={<FormattedMessage {...messages.minGrade} />}
-          value={assignmentGradeMin}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMin}
-        />
-        <PercentGroup
-          id="assignmentGradeMax"
-          label={<FormattedMessage {...messages.maxGrade} />}
-          value={assignmentGradeMax}
-          disabled={!this.props.selectedAssignment}
-          onChange={this.handleSetMax}
-        />
-        <div className="grade-filter-action">
-          <Button
-            type="submit"
-            variant="outline-secondary"
-            name="assignmentGradeMinMax"
-            disabled={!this.props.selectedAssignment}
-            onClick={this.handleSubmit}
-          >
-            Apply
-          </Button>
-        </div>
+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 '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/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.snapshot).toMatchSnapshot();
+      });
+      it('renders a PercentGroup for both Max and Min filters', () => {
+        let { props } = el.instance.findByType(PercentGroup)[0];
+        expect(props.value).toEqual(hookData.assignmentGradeMin);
+        expect(props.disabled).toEqual(false);
+        expect(props.onChange).toEqual(hookData.handleSetMin);
+        props = el.instance.findByType(PercentGroup)[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.instance.findByType(Button)[0];
+        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.snapshot).toMatchSnapshot();
+      });
+      it('disables controls', () => {
+        let { props } = el.instance.findByType(PercentGroup)[0];
+        expect(props.disabled).toEqual(true);
+        props = el.instance.findByType(PercentGroup)[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={
+      [
+        <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,79 +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={
-      <FormattedMessage
-        defaultMessage="Assignment Types"
-        description="Assignment Types filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.assignmentTypesLabel"
-      />
-    }
-    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={
-      <FormattedMessage
-        defaultMessage="Assignment Types"
-        description="Assignment Types filter select label in Gradebook Filters"
-        id="gradebook.GradebookFilters.assignmentTypesLabel"
-      />
-    }
-    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,81 +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 { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-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={<FormattedMessage {...messages.assignmentTypes} />}
-          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 '@edx/react-unit-test-utils';
+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.snapshot).toMatchSnapshot();
+    });
+    test('filter options', () => {
+      const { options } = el.instance.findByType(SelectGroup)[0].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,44 +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={
-        <FormattedMessage
-          defaultMessage="Min Grade"
-          description="Min-grade filter select label in Gradebook Filters"
-          id="gradebook.GradebookFilters.minGradeFilterLabel"
-        />
-      }
-      onChange={[MockFunction handleUpdateMin]}
-      value="5"
-    />
-    <PercentGroup
-      id="maximum-grade"
-      label={
-        <FormattedMessage
-          defaultMessage="Max Grade"
-          description="Max-grade filter select label in Gradebook Filters"
-          id="gradebook.GradebookFilters.maxGradeFilterLabel"
-        />
-      }
-      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,103 +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 { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
+import { Button } from '@openedx/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 {
-      localCourseLimits: { courseGradeMin, courseGradeMax },
-    } = this.props;
-    return (
-      <>
-        <div className="grade-filter-inputs">
-          <PercentGroup
-            id="minimum-grade"
-            label={<FormattedMessage {...messages.minGrade} />}
-            value={courseGradeMin}
-            onChange={this.handleUpdateMin}
-          />
-          <PercentGroup
-            id="maximum-grade"
-            label={<FormattedMessage {...messages.maxGrade} />}
-            value={courseGradeMax}
-            onChange={this.handleUpdateMax}
-          />
-        </div>
-        <div className="grade-filter-action">
-          <Button
-            variant="outline-secondary"
-            onClick={this.handleApplyClick}
-          >
-            Apply
-          </Button>
-        </div>
-      </>
-    );
-  }
-}
+  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 '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/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.snapshot).toMatchSnapshot();
+      });
+      it('renders a PercentGroup for both Max and Min filters', () => {
+        let { props } = el.instance.findByType(PercentGroup)[0];
+        expect(props.value).toEqual(hookData.min.value);
+        expect(props.onChange).toEqual(hookData.min.onChange);
+        props = el.instance.findByType(PercentGroup)[1].props;
+        expect(props.value).toEqual(hookData.max.value);
+        expect(props.onChange).toEqual(hookData.max.onChange);
+      });
+      it('renders a submit button', () => {
+        const { props } = el.instance.findByType(Button)[0];
+        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.snapshot).toMatchSnapshot();
+      });
+      it('disables submit', () => {
+        const { props } = el.instance.findByType(Button)[0];
+        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

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const PercentGroup = ({
   id,

src/components/GradebookFilters/PercentGroup.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import PercentGroup from './PercentGroup';
 
@@ -22,11 +22,11 @@ describe('PercentGroup', () => {
     describe('snapshots', () => {
       test('basic snapshot', () => {
         const el = shallow(<PercentGroup {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('disabled', () => {
         const el = shallow(<PercentGroup {...props} disabled />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/components/GradebookFilters/SelectGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const SelectGroup = ({
   id,

src/components/GradebookFilters/SelectGroup.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import SelectGroup from './SelectGroup';
 
@@ -27,11 +27,11 @@ describe('SelectGroup', () => {
     describe('snapshots', () => {
       test('basic snapshot', () => {
         const el = shallow(<SelectGroup {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('disabled', () => {
         const el = shallow(<SelectGroup {...props} disabled />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

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={
+      [
+        <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={
+      [
+        <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,152 +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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-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: this.translate(messages.cohortAll),
-      key: 'id',
-    });
-  }
-
-  mapTracksEntries() {
-    return optionFactory({
-      data: this.props.tracks,
-      defaultOption: this.translate(messages.trackAll),
-      key: 'slug',
-    });
-  }
-
-  selectedTrackSlugFromEvent({ target: { value } }) {
-    const selectedTrackItem = this.props.tracksByName[value];
-    return selectedTrackItem ? selectedTrackItem.slug : null;
-  }
-
-  selectedCohortIdFromEvent({ target: { value } }) {
-    const selectedCohortItem = this.props.cohortsByName[value];
-    return selectedCohortItem ? selectedCohortItem.id.toString() : null;
-  }
-
-  updateTracks(event) {
-    const track = this.selectedTrackSlugFromEvent(event);
-    this.props.updateQueryParams({ track });
-    this.props.updateTrack(track);
-    this.props.fetchGrades();
-  }
-
-  updateCohorts(event) {
-    const cohort = this.selectedCohortIdFromEvent(event);
-    this.props.updateQueryParams({ cohort });
-    this.props.updateCohort(cohort);
-    this.props.fetchGrades();
-  }
-
-  translate(message) {
-    return this.props.intl.formatMessage(message);
-  }
-
-  render() {
-    return (
-      <>
-        <SelectGroup
-          id="Tracks"
-          label={this.translate(messages.tracks)}
-          value={this.props.selectedTrackEntry.name}
-          onChange={this.updateTracks}
-          options={this.mapTracksEntries()}
-        />
-        <SelectGroup
-          id="Cohorts"
-          label={this.translate(messages.cohorts)}
-          value={this.props.selectedCohortEntry.name}
-          disabled={this.props.cohorts.length === 0}
-          onChange={this.updateCohorts}
-          options={this.mapCohortsEntries()}
-        />
-      </>
-    );
-  }
-}
-
-StudentGroupsFilter.defaultProps = {
-  cohorts: [],
-  cohortsByName: {},
-  selectedCohortEntry: { name: '' },
-  selectedTrackEntry: { name: '' },
-  tracks: [],
-  tracksByName: {},
+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,
-
-  // injected
-  intl: intlShape.isRequired,
-
-  // redux
-  cohorts: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  })),
-  cohortsByName: PropTypes.objectOf(PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  })),
-  fetchGrades: PropTypes.func.isRequired,
-  selectedTrackEntry: PropTypes.shape({ name: PropTypes.string }),
-  selectedCohortEntry: PropTypes.shape({ name: PropTypes.string }),
-  tracks: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    slug: PropTypes.string,
-  })),
-  tracksByName: PropTypes.objectOf(PropTypes.shape({
-    name: PropTypes.string,
-    slug: PropTypes.string,
-  })),
-  updateCohort: PropTypes.func.isRequired,
-  updateTrack: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  cohorts: selectors.cohorts.allCohorts(state),
-  cohortsByName: selectors.cohorts.cohortsByName(state),
-  selectedCohortEntry: selectors.root.selectedCohortEntry(state),
-  selectedTrackEntry: selectors.root.selectedTrackEntry(state),
-  tracks: selectors.tracks.allTracks(state),
-  tracksByName: selectors.tracks.tracksByName(state),
-});
-
-export const mapDispatchToProps = {
-  fetchGrades: thunkActions.grades.fetchGrades,
-  updateCohort: actions.filters.update.cohort,
-  updateTrack: actions.filters.update.track,
-};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StudentGroupsFilter));
+export default StudentGroupsFilter;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+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.snapshot).toMatchSnapshot();
+    });
+    test('track options', () => {
+      const {
+        options,
+        onChange,
+        value,
+      } = el.instance.findByType(SelectGroup)[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.instance.findByType(SelectGroup)[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,239 +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,
-        intl: { formatMessage: (msg) => msg.defaultMessage },
-        cohortsByName: {
-          [props.cohorts[0].name]: props.cohorts[0],
-          [props.cohorts[1].name]: props.cohorts[1],
-          [props.cohorts[2].name]: props.cohorts[2],
-        },
-        tracksByName: {
-          [props.tracks[0].name]: props.tracks[0],
-          [props.tracks[1].name]: props.tracks[1],
-          [props.tracks[2].name]: props.tracks[2],
-        },
-        fetchGrades: jest.fn(),
-        selectedCohortEntry: props.cohorts[2],
-        selectedTrackEntry: props.tracks[1],
-        updateQueryParams: jest.fn(),
-        updateCohort: jest.fn().mockName('updateCohort'),
-        updateTrack: jest.fn().mockName('updateTrack'),
-      };
-    });
-
-    describe('snapshots', () => {
-      let el;
-      beforeEach(() => {
-        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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookFilters render snapshot 1`] = `
+<Fragment>
+  <div
+    className="filter-sidebar-header"
+  >
+    <h2>
+      <Icon
+        className="fa fa-filter"
+      />
+    </h2>
+    <IconButton
+      alt="Close Filters"
+      aria-label="Close Filters"
+      className="p-1"
+      iconAs="Icon"
+      onClick={[MockFunction hook.closeMenu]}
+      src="Close"
+    />
+  </div>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title="Assignments"
+  >
+    <div>
+      <AssignmentTypeFilter
+        updateQueryParams={[MockFunction]}
+      />
+      <AssignmentFilter
+        updateQueryParams={[MockFunction]}
+      />
+      <AssignmentGradeFilter
+        updateQueryParams={[MockFunction]}
+      />
+    </div>
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title="Overall Grade"
+  >
+    <CourseGradeFilter
+      updateQueryParams={[MockFunction]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title="Student Groups"
+  >
+    <StudentGroupsFilter
+      updateQueryParams={[MockFunction]}
+    />
+  </Collapsible>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title="Include Course Team Members"
+  >
+    <Form.Checkbox
+      checked={true}
+      onChange={[MockFunction hook.handleChange]}
+    >
+      Include Course Team Members
+    </Form.Checkbox>
+  </Collapsible>
+</Fragment>
+`;

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

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

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.filterMenu.useCloseMenu();
+  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,59 @@
+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: {
+      filterMenu: { useCloseMenu: 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.filterMenu.useCloseMenu.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.filterMenu.useCloseMenu).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,20 +1,14 @@
-/* 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,
   Icon,
   IconButton,
   Form,
-} from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
@@ -22,103 +16,74 @@ 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={<FormattedMessage {...title} />}
-      defaultOpen
-      className="filter-group mb-3"
-    >
-      {content}
-    </Collapsible>
-  );
-
-  render() {
-    const {
-      intl,
-      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={intl.formatMessage(messages.closeFilters)}
-            aria-label={intl.formatMessage(messages.closeFilters)}
-          />
+      <Collapsible
+        title={formatMessage(messages.assignments)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
         </div>
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.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(messages.overallGrade, (
-          <CourseGradeFilter updateQueryParams={updateQueryParams} />
-        ))}
+      <Collapsible
+        title={formatMessage(messages.studentGroups)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.studentGroups, (
-          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
-        ))}
-
-        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
-          <Form.Checkbox
-            checked={this.state.includeCourseRoleMembers}
-            onChange={this.handleIncludeTeamMembersChange}
-          >
-            <FormattedMessage {...messages.includeCourseTeamMembers} />
-          </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,
-  // injected
-  intl: intlShape.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 injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));
+export default GradebookFilters;

src/components/GradebookFilters/index.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible } from '@openedx/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.snapshot).toMatchSnapshot();
+    });
+    test('Assignment filters', () => {
+      expect(el.instance.findByType(Collapsible)[0].children[0]).toMatchObject(shallow(
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
+        </div>,
+      ));
+    });
+    test('CourseGrade filters', () => {
+      expect(el.instance.findByType(Collapsible)[1].children[0]).toMatchObject(shallow(
+        <CourseGradeFilter updateQueryParams={updateQueryParams} />,
+      ));
+    });
+    test('StudentGroups filters', () => {
+      expect(el.instance.findByType(Collapsible)[2].children[0]).toMatchObject(shallow(
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />,
+      ));
+    });
+    test('includeCourseTeamMembers', () => {
+      const checkbox = el.instance.findByType(Collapsible)[3].children[0];
+      expect(checkbox.props).toEqual({
+        checked: true,
+        onChange: hookProps.includeCourseTeamMembers.handleChange,
+      });
+      expect(checkbox.children[0].el).toEqual(formatMessage(messages.includeCourseTeamMembers));
+    });
+  });
+});

src/components/GradebookFilters/messages.js

@@ -66,6 +66,11 @@ const messages = defineMessages({
     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,121 +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,
-      intl: { formatMessage: (msg) => msg.defaultMessage },
-      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,
-        );
-      });
-    });
-  });
-});

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

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookHeader component render default view shapshot 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="test-dashboard-url"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h2
+      className="text-break"
+    >
+      test-course-id
+    </h2>
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component render frozen grades snapshot: show frozen warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="test-dashboard-url"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h2
+      className="text-break"
+    >
+      test-course-id
+    </h2>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    The grades for this course are now frozen. Editing of grades is no longer allowed.
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component render show bulk management snapshot: show toggle view message button with handleToggleViewClick method 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="test-dashboard-url"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h2
+      className="text-break"
+    >
+      test-course-id
+    </h2>
+    <Button
+      onClick={[MockFunction hooks.handleToggleViewClick]}
+      variant="tertiary"
+    >
+      toggle-view-message
+    </Button>
+  </div>
+</div>
+`;
+
+exports[`GradebookHeader component render user cannot view gradebook snapshot: show unauthorized warning 1`] = `
+<div
+  className="gradebook-header"
+>
+  <a
+    className="mb-3"
+    href="test-dashboard-url"
+  >
+    <span
+      aria-hidden="true"
+    >
+      &lt;&lt; 
+    </span>
+    Back to Dashboard
+  </a>
+  <h1>
+    Gradebook
+  </h1>
+  <div
+    className="subtitle-row d-flex justify-content-between align-items-center"
+  >
+    <h2
+      className="text-break"
+    >
+      test-course-id
+    </h2>
+  </div>
+  <div
+    className="alert alert-warning"
+    role="alert"
+  >
+    You are not authorized to view the gradebook for this course.
+  </div>
+</div>
+`;

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

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

src/components/GradebookHeader/hooks.js

@@ -0,0 +1,35 @@
+import { views } from 'data/constants/app';
+import { actions, selectors } from 'data/redux/hooks';
+
+import messages from './messages';
+
+export const useGradebookHeaderData = () => {
+  const activeView = selectors.app.useActiveView();
+  const courseId = selectors.app.useCourseId();
+  const areGradesFrozen = selectors.assignmentTypes.useAreGradesFrozen();
+  const canUserViewGradebook = selectors.roles.useCanUserViewGradebook();
+  const showBulkManagement = selectors.root.useShowBulkManagement();
+  const setView = actions.app.useSetView();
+
+  const handleToggleViewClick = () => setView(
+    activeView === views.grades
+      ? views.bulkManagementHistory
+      : views.grades,
+  );
+
+  const toggleViewMessage = activeView === views.grades
+    ? messages.toActivityLog
+    : messages.toGradesView;
+
+  return {
+    areGradesFrozen,
+    canUserViewGradebook,
+    courseId,
+    showBulkManagement,
+
+    handleToggleViewClick,
+    toggleViewMessage,
+  };
+};
+
+export default useGradebookHeaderData;

src/components/GradebookHeader/hooks.test.js

@@ -0,0 +1,90 @@
+import { views } from 'data/constants/app';
+import { actions, selectors } from 'data/redux/hooks';
+
+import messages from './messages';
+import useGradebookHeaderData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  actions: {
+    app: {
+      useSetView: jest.fn(),
+    },
+  },
+  selectors: {
+    app: {
+      useActiveView: jest.fn(),
+      useCourseId: jest.fn(),
+    },
+    assignmentTypes: {
+      useAreGradesFrozen: jest.fn(),
+    },
+    roles: {
+      useCanUserViewGradebook: jest.fn(),
+    },
+    root: {
+      useShowBulkManagement: jest.fn(),
+    },
+  },
+}));
+
+const activeView = 'test-active-view';
+selectors.app.useActiveView.mockReturnValue(activeView);
+const courseId = 'test-course-id';
+selectors.app.useCourseId.mockReturnValue(courseId);
+const areGradesFrozen = 'test-are-grades-frozen';
+selectors.assignmentTypes.useAreGradesFrozen.mockReturnValue(areGradesFrozen);
+const canUserViewGradebook = 'test-can-user-view-gradebook';
+selectors.roles.useCanUserViewGradebook.mockReturnValue(canUserViewGradebook);
+const showBulkManagement = 'test-show-bulk-management';
+selectors.root.useShowBulkManagement.mockReturnValue(showBulkManagement);
+
+const setView = jest.fn();
+actions.app.useSetView.mockReturnValue(setView);
+
+let out;
+describe('useGradebookHeaderData hooks', () => {
+  describe('initialization', () => {
+    it('initializes redux hooks', () => {
+      out = useGradebookHeaderData();
+      expect(selectors.app.useActiveView).toHaveBeenCalled();
+      expect(selectors.app.useCourseId).toHaveBeenCalled();
+      expect(selectors.assignmentTypes.useAreGradesFrozen).toHaveBeenCalled();
+      expect(selectors.roles.useCanUserViewGradebook).toHaveBeenCalled();
+      expect(selectors.root.useShowBulkManagement).toHaveBeenCalled();
+      expect(actions.app.useSetView).toHaveBeenCalled();
+    });
+  });
+  describe('output', () => {
+    test('redux fields', () => {
+      out = useGradebookHeaderData();
+      expect(out.areGradesFrozen).toEqual(areGradesFrozen);
+      expect(out.canUserViewGradebook).toEqual(canUserViewGradebook);
+      expect(out.courseId).toEqual(courseId);
+      expect(out.showBulkManagement).toEqual(showBulkManagement);
+    });
+    describe('handleToggleViewClick', () => {
+      it('calls setView with bulkManagemnetHistory message if grades view is active', () => {
+        selectors.app.useActiveView.mockReturnValueOnce(views.grades);
+        out = useGradebookHeaderData();
+        out.handleToggleViewClick();
+        expect(setView).toHaveBeenCalledWith(views.bulkManagementHistory);
+      });
+      it('calls setView with grades view if grades view is not active', () => {
+        out = useGradebookHeaderData();
+        out.handleToggleViewClick();
+        expect(setView).toHaveBeenCalledWith(views.grades);
+      });
+    });
+    describe('toggleViewMessage', () => {
+      it('returns toActivityLog message if grades view is active', () => {
+        selectors.app.useActiveView.mockReturnValueOnce(views.grades);
+        out = useGradebookHeaderData();
+        expect(out.toggleViewMessage).toEqual(messages.toActivityLog);
+      });
+      it('returns toGradesView message if grades view is not active', () => {
+        out = useGradebookHeaderData();
+        expect(out.toggleViewMessage).toEqual(messages.toGradesView);
+      });
+    });
+  });
+});

src/components/GradebookHeader/index.jsx

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