Merge pull request #222 from eduNEXT/Jhony/gradebook_header_override_backport

feat: enabling header override

.env

@@ -10,7 +10,6 @@ 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=''
@@ -31,6 +30,3 @@ 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'
@@ -37,6 +37,3 @@ 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,4 +3,3 @@ dist/
 node_modules/
 src/postcss.config.js
 src/segment.js
-src/lightning.js

.eslintrc.js

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

.github/pull_request_template.md

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

.github/renovate.json

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

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

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

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

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

.github/workflows/ci.yml

@@ -1,63 +0,0 @@
-name: node_js CI
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-    branches:
-    - '**'
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-
-    - name: Setup Nodejs
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node }}
-
-    - 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@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
-
-    - name: Send failure notification
-      if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
-      with:
-        server_address: email-smtp.us-east-1.amazonaws.com
-        server_port: 465
-        username: ${{secrets.EDX_SMTP_USERNAME}}
-        password: ${{secrets.EDX_SMTP_PASSWORD}}
-        subject: CI workflow failed in ${{github.repository}}
-        to: masters-grades@edx.org
-        from: github-actions <github-actions@edx.org>
-        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{
-          github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

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

.github/workflows/npm-publish.yml

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

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

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

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

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

.gitignore

@@ -23,5 +23,3 @@ temp/babel-plugin-react-intl
 ### transifex ###
 src/i18n/transifex_input.json
 temp
-
-src/i18n/messages/

.npmignore

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

.nvmrc

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

.travis.yml

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

.tx/config

@@ -0,0 +1,9 @@
+[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,14 +1,18 @@
 npm-install-%: ## install specified % npm package
-	npm ci $* --save-dev
+	npm install $* --save-dev
 	git add package.json
 
-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-gradebook
+transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl
 
 NPM_TESTS=build i18n_extract lint test is-es5
 
@@ -35,22 +39,27 @@ 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)
 
-# Experimental: OEP-58 Pulls translations using atlas
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
 pull_translations:
-	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
+	tx pull -f --mode reviewed --language=$(transifex_langs)
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-gradebook
-
-# This target is used by CI.
+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json

README.md

@@ -1,13 +1,10 @@
-# frontend-app-gradebook
-
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
-[![Codecov](https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook)](https://app.codecov.io/gh/openedx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-# Purpose
+# Gradebook
 
 Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
 
@@ -49,8 +46,7 @@ depending on their needs. Instructors that expect to review grades infrequently
 to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
 generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
 
-## Getting Started
-
+## Quickstart
 
 ### Installation
 
@@ -58,24 +54,10 @@ 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/openedx/devstack) instructions.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/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.
 
@@ -108,11 +90,6 @@ 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,
@@ -140,58 +117,4 @@ running gradebook container.
 
 ## Authentication with backend API services
 
-See the [`@edx/frontend-auth`](https://github.com/edx-unsupported/frontend-auth) repo for information about securing routes in your application that require user authentication.
-
-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read `How To Contribute`_ 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.
+See the [`@edx/frontend-auth`](https://github.com/edx/frontend-auth) repo for information about securing routes in your application that require user authentication.

babel.config.js

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

catalog-info.yaml

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

documentation/.travis.yml.md

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

documentation/CI.md

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

documentation/decisions/0001-update-api-usage.rst

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

jest.config.js

@@ -1,13 +1,15 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/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,42 +1,37 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.2",
+  "version": "1.4.47",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-gradebook.git"
+    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch"
+    "watch-tests": "jest --watch",
+    "travis-deploy-once": "travis-deploy-once"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-gradebook#readme",
+  "homepage": "https://github.com/edx/frontend-app-gradebook#readme",
   "publishConfig": {
     "access": "public"
   },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.0.0",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^3.0.0",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.1.1",
-    "@edx/reactifex": "^2.1.1",
+    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.2.5",
+    "@edx/frontend-platform": "1.9.5",
+    "@edx/paragon": "14.16.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -46,16 +41,19 @@
     "classnames": "^2.2.6",
     "core-js": "3.6.5",
     "email-prop-type": "^1.1.7",
+    "enzyme": "^3.10.0",
+    "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "prop-types": "15.8.1",
+    "node-sass": "^4.14.1",
+    "prop-types": "15.7.2",
     "query-string": "6.13.0",
-    "react": "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": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-intl": "^2.9.0",
+    "react-redux": "^5.1.1",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.0.5",
     "redux-beacon": "^2.1.0",
@@ -63,24 +61,25 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.7",
-    "sass": "^1.49.0",
+    "util": "^0.12.3",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "14.0.3",
-    "@testing-library/react": "12.1.5",
-    "axios": "0.21.2",
+    "@edx/frontend-build": "5.5.2",
+    "axios": "0.21.1",
     "axios-mock-adapter": "^1.17.0",
+    "codecov": "^3.6.1",
+    "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "17.0.2",
+    "jest": "24.9.0",
+    "react-dev-utils": "^5.0.3",
+    "react-test-renderer": "^16.10.1",
     "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
-    "semantic-release": "^19.0.3"
+    "semantic-release": "^17.2.3",
+    "travis-deploy-once": "^5.0.11"
   }
 }

src/App.jsx

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

src/App.scss

@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";

src/App.test.jsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';
 
-import { Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { AppProvider } from '@edx/frontend-platform/react';
 
+import Footer from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+
+import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
@@ -11,53 +16,59 @@ import App from './App';
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
   Route: () => 'Route',
-  Routes: () => 'Routes',
+  Switch: () => 'Switch',
 }));
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+jest.mock('data/constants/app', () => ({
+  routePath: '/:courseId',
+}));
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');
-jest.mock('./head/Head', () => 'Head');
 
+const logo = 'fakeLogo.png';
 let el;
-let secondChild;
+let router;
 
 describe('App router component', () => {
   test('snapshot', () => {
-    expect(shallow(<App />).snapshot).toMatchSnapshot();
+    expect(shallow(<App />)).toMatchSnapshot();
   });
   describe('component', () => {
     beforeEach(() => {
+      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      secondChild = el.instance.children;
+      router = el.childAt(0);
     });
     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('Head', () => {
-      test('first child of AppProvider', () => {
-        expect(el.instance.children[0].type).toBe('Head');
+        expect(el.type()).toBe(AppProvider);
+        expect(el.props().store).toEqual(store);
       });
     });
     describe('Router', () => {
-      test('second child of AppProvider', () => {
-        expect(secondChild[1].type).toBe('div');
+      test('first child of AppProvider', () => {
+        expect(router.type()).toBe(Router);
       });
       test('Header is above/outside-of the routing', () => {
-        expect(secondChild[1].children[0].type).toBe('Header');
-        expect(secondChild[1].children[1].type).toBe('main');
+        expect(router.childAt(0).childAt(0).type()).toBe(Header);
+        expect(router.childAt(0).childAt(1).type()).toBe('main');
       });
       test('Routing - GradebookPage is only route', () => {
-        expect(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);
+        expect(router.find('main')).toEqual(shallow(
+          <main>
+            <Switch>
+              <Route exact path={routePath} component={GradebookPage} />
+            </Switch>
+          </main>,
+        ));
       });
     });
+    test('Footer logo drawn from env variable', () => {
+      expect(router.find(Footer).props().logo).toEqual(logo);
+    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -4,18 +4,20 @@ exports[`App router component snapshot 1`] = `
 <AppProvider
   store="testStore"
 >
-  <Head />
-  <div>
-    <Header />
-    <main>
-      <Routes>
-        <Route
-          element={<GradebookPage />}
-          path="/:courseId"
-        />
-      </Routes>
-    </main>
-    <FooterSlot />
-  </div>
+  <BrowserRouter>
+    <div>
+      <Header />
+      <main>
+        <Switch>
+          <Route
+            component="GradebookPage"
+            exact={true}
+            path="/:courseId"
+          />
+        </Switch>
+      </main>
+      <Footer />
+    </div>
+  </BrowserRouter>
 </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 '@openedx/paragon';
+import { Alert } from '@edx/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 '@edx/react-unit-test-utils';
-import { Alert } from '@openedx/paragon';
+import { shallow } from 'enzyme';
+import { Alert } from '@edx/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('@openedx/paragon', () => ({
+jest.mock('@edx/paragon', () => ({
   Alert: () => 'Alert',
 }));
 jest.mock('data/selectors', () => ({
@@ -35,17 +35,17 @@ describe('BulkManagementAlerts', () => {
         el = shallow(<BulkManagementAlerts />);
       });
       test('snapshot - bulkImportError closed, success closed', () => {
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
       });
       test('closed danger alert', () => {
-        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');
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).props().show).toEqual(false);
+        expect(el.childAt(0).props().variant).toEqual('danger');
       });
       test('closed success alert', () => {
-        expect(el.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');
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).props().show).toEqual(false);
+        expect(el.childAt(1).props().variant).toEqual('success');
       });
     });
     describe('no errer, no upload success', () => {
@@ -57,19 +57,19 @@ describe('BulkManagementAlerts', () => {
         'success alert open with messages.successDialog',
       ];
       test(`snapshot - ${assertions.join(', ')}`, () => {
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
       });
       test('open danger alert with bulkImportError content', () => {
-        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);
+        expect(el.childAt(0).is(Alert)).toEqual(true);
+        expect(el.childAt(0).children().text()).toEqual(errorMessage);
+        expect(el.childAt(0).props().show).toEqual(true);
       });
       test('open success alert with messages.successDialog content', () => {
-        expect(el.instance.children[1].type).toBe('Alert');
-        expect(el.shallowWrapper.props.children[1].props.children).toEqual(
+        expect(el.childAt(1).is(Alert)).toEqual(true);
+        expect(el.childAt(1).children().getElement()).toEqual(
           <FormattedMessage {...messages.successDialog} />,
         );
-        expect(el.instance.children[1].props.show).toEqual(true);
+        expect(el.childAt(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 { DataTable } from '@openedx/paragon';
+import { Table } from '@edx/paragon';
 
 import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';
@@ -30,13 +30,14 @@ export const mapHistoryRows = ({
 export const HistoryTable = ({
   bulkManagementHistory,
 }) => (
-  <DataTable
-    data={bulkManagementHistory.map(mapHistoryRows)}
-    hasFixedColumnWidths
-    columns={bulkManagementColumns}
-    className="table-striped"
-    itemCount={bulkManagementHistory.length}
-  />
+  <>
+    <Table
+      data={bulkManagementHistory.map(mapHistoryRows)}
+      hasFixedColumnWidths
+      columns={bulkManagementColumns}
+      className="table-striped"
+    />
+  </>
 );
 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 '@edx/react-unit-test-utils';
-import { DataTable } from '@openedx/paragon';
+import { shallow } from 'enzyme';
+import { Table } from '@edx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,12 +9,13 @@ 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: {
@@ -56,12 +57,12 @@ describe('HistoryTable', () => {
         el = shallow(<HistoryTable {...props} />);
       });
       test('snapshot - loads formatted table', () => {
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
       });
       describe('history table', () => {
         let table;
         beforeEach(() => {
-          table = el.instance.findByType(DataTable);
+          table = el.find(Table);
         });
         describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
           const fieldAssertions = [
@@ -70,10 +71,10 @@ describe('HistoryTable', () => {
             'forwards the rest',
           ];
           test(`snapshot: ${fieldAssertions.join(', ')}`, () => {
-            expect(table[0].props.data).toMatchSnapshot();
+            expect(table.props().data).toMatchSnapshot();
           });
           test(fieldAssertions.join(', '), () => {
-            const rows = table[0].props.data;
+            const rows = table.props().data;
             expect(rows[0].resultsSummary).toEqual(<ResultsSummary {...entry1.resultsSummary} />);
             expect(rows[0].user).toEqual(<span className="wrap-text-in-cell">{entry1.user}</span>);
             expect(
@@ -87,7 +88,7 @@ describe('HistoryTable', () => {
           });
         });
         test('columns from bulkManagementColumns', () => {
-          expect(table[0].props.columns).toEqual(bulkManagementColumns);
+          expect(table.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 '@openedx/paragon';
-import { Download } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@edx/paragon';
+import { Download } from '@edx/paragon/icons';
 
 import lms from 'data/services/lms';
 

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

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

src/components/BulkManagementHistoryView/__snapshots__/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 @@ exports[`HistoryTable component snapshot history table data (from bulkManagement
       Eifel
     </span>,
   },
-  {
+  Object {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -42,77 +42,78 @@ exports[`HistoryTable component snapshot history table data (from bulkManagement
 `;
 
 exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] = `
-<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}
-/>
+<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>
 `;

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={
-    {
-      "url": {
+    Object {
+      "url": Object {
         "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 '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { BulkManagementHistoryView } from '.';
@@ -24,23 +24,20 @@ describe('BulkManagementHistoryView', () => {
         '<HistoryTable />',
       ];
       test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
-        expect(el.snapshot).toMatchSnapshot();
+        expect(el).toMatchSnapshot();
       });
       test('heading - h4 loaded from messages', () => {
-        const heading = el.instance.findByType('h4')[0];
-        const expectedHeading = shallow(
+        const heading = el.find('h4');
+        expect(heading.getElement()).toEqual((
           <h4>
             <FormattedMessage {...messages.heading} />
-          </h4>,
-        );
-
-        expect(heading.el.type).toEqual(expectedHeading.type);
-        expect(heading.el.props).toEqual(expectedHeading.props);
+          </h4>
+        ));
       });
       test('heading, then alerts, then upload form, then table', () => {
-        expect(el.instance.children[0].type).toEqual('h4');
-        expect(el.instance.children[2].type).toEqual(BulkManagementAlerts);
-        expect(el.instance.children[3].type).toEqual(HistoryTable);
+        expect(el.childAt(0).is('h4')).toEqual(true);
+        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
+        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
       });
     });
   });

src/components/EdxHeader/index.jsx

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

src/components/EdxHeader/test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';
 
 import { getConfig } from '@edx/frontend-platform';
 
 import Header from '.';
 
-jest.mock('@openedx/paragon', () => ({
+jest.mock('@edx/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 />).snapshot).toMatchSnapshot();
+    expect(shallow(<Header />)).toMatchSnapshot();
   });
 });

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

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

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

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

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

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

src/components/GradebookFilters/AssignmentFilter/index.jsx

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

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

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

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

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

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

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

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

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

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

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

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

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

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

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/index.jsx

@@ -1,42 +1,81 @@
 /* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import selectors from 'data/selectors';
+import actions from 'data/actions';
 
 import SelectGroup from '../SelectGroup';
 import messages from '../messages';
-import useAssignmentTypeFilterData from './hooks';
 
-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>
-  );
+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: '',
 };
 
 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 default AssignmentTypeFilter;
+export const mapStateToProps = (state) => ({
+  assignmentTypes: selectors.assignmentTypes.allAssignmentTypes(state),
+  assignmentFilterOptions: selectors.filters.selectableAssignmentLabels(state),
+  selectedAssignmentType: selectors.filters.assignmentType(state),
+});
+
+export const mapDispatchToProps = {
+  filterAssignmentType: actions.filters.update.assignmentType,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AssignmentTypeFilter);

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

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

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

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

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

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

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

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

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

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

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

src/components/GradebookFilters/PercentGroup.jsx

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

src/components/GradebookFilters/PercentGroup.test.jsx

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

src/components/GradebookFilters/SelectGroup.jsx

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

src/components/GradebookFilters/SelectGroup.test.jsx

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
+<React.Fragment>
+  <div
+    className="filter-sidebar-header"
+  >
+    <h2>
+      <Icon
+        className="fa fa-filter"
+      />
+    </h2>
+    <IconButton
+      alt="Close Filters"
+      aria-label="Close Filters"
+      className="p-1"
+      iconAs="Icon"
+      onClick={[MockFunction this.props.closeMenu]}
+      src="paragon.icons.Close"
+    />
+  </div>
+  <Collapsible
+    className="filter-group mb-3"
+    defaultOpen={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Assignments"
+        description="Assignment filter group label in Gradebook Filters"
+        id="gradebook.GradebookFilters.assignmentsFilterLabel"
+      />
+    }
+  >
+    <div>
+      <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

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

@@ -1,59 +0,0 @@
-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,14 +1,20 @@
+/* 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 '@openedx/paragon';
-import { Close } from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+} 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';
 
 import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
@@ -16,74 +22,103 @@ import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
 import CourseGradeFilter from './CourseGradeFilter';
 import StudentGroupsFilter from './StudentGroupsFilter';
-import useGradebookFiltersData from './hooks';
 
-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>
+export class GradebookFilters extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      includeCourseRoleMembers: this.props.includeCourseRoleMembers,
+    };
+    this.handleIncludeTeamMembersChange = this.handleIncludeTeamMembersChange.bind(this);
+  }
 
-      <Collapsible
-        title={formatMessage(messages.assignments)}
-        defaultOpen
-        className={collapsibleClassName}
-      >
-        <div>
-          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
-          <AssignmentFilter updateQueryParams={updateQueryParams} />
-          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
-        </div>
-      </Collapsible>
+  handleIncludeTeamMembersChange(event) {
+    const includeCourseRoleMembers = event.target.checked;
+    this.setState({ includeCourseRoleMembers });
+    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
+    this.props.fetchGrades();
+    this.props.updateQueryParams({ includeCourseRoleMembers });
+  }
 
-      <Collapsible
-        title={formatMessage(messages.overallGrade)}
-        defaultOpen
-        className={collapsibleClassName}
-      >
-        <CourseGradeFilter updateQueryParams={updateQueryParams} />
-      </Collapsible>
-
-      <Collapsible
-        title={formatMessage(messages.studentGroups)}
-        defaultOpen
-        className={collapsibleClassName}
-      >
-        <StudentGroupsFilter updateQueryParams={updateQueryParams} />
-      </Collapsible>
-
-      <Collapsible
-        title={formatMessage(messages.includeCourseTeamMembers)}
-        defaultOpen
-        className={collapsibleClassName}
-      >
-        <Form.Checkbox
-          checked={includeCourseTeamMembers.value}
-          onChange={includeCourseTeamMembers.handleChange}
-        >
-          {formatMessage(messages.includeCourseTeamMembers)}
-        </Form.Checkbox>
-      </Collapsible>
-    </>
+  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)}
+          />
+        </div>
+
+        {this.collapsibleGroup(messages.assignments, (
+          <div>
+            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+            <AssignmentFilter updateQueryParams={updateQueryParams} />
+            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
+          </div>
+        ))}
+
+        {this.collapsibleGroup(messages.overallGrade, (
+          <CourseGradeFilter updateQueryParams={updateQueryParams} />
+        ))}
+
+        {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,
 };
 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 default GradebookFilters;
+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));

src/components/GradebookFilters/index.test.jsx

@@ -1,82 +0,0 @@
-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,11 +66,6 @@ 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

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

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

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

src/components/GradebookHeader/hooks.js

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

@@ -1,90 +0,0 @@
-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,50 +1,106 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
+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 { instructorDashboardUrl } from 'data/services/lms/urls';
-import useGradebookHeaderData from './hooks';
 import messages from './messages';
 
-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>
+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>
         )}
       </div>
-      {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.defaultProps = {
+  // redux
+  courseId: '',
+  areGradesFrozen: false,
+  canUserViewGradebook: false,
+  showBulkManagement: false,
 };
 
-export default GradebookHeader;
+GradebookHeader.propTypes = {
+  // redux
+  activeView: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  areGradesFrozen: PropTypes.bool,
+  canUserViewGradebook: PropTypes.bool,
+  setView: PropTypes.func.isRequired,
+  showBulkManagement: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  activeView: selectors.app.activeView(state),
+  courseId: selectors.app.courseId(state),
+  areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
+  canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
+  showBulkManagement: selectors.root.showBulkManagement(state),
+});
+
+export const mapDispatchToProps = {
+  setView: actions.app.setView,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookHeader);

src/components/GradebookHeader/index.test.jsx

@@ -1,77 +0,0 @@
-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 { formatMessage } from 'testUtils';
-import { instructorDashboardUrl } from 'data/services/lms/urls';
-
-import useGradebookHeaderData from './hooks';
-import GradebookHeader from '.';
-
-jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
-jest.mock('data/services/lms/urls', () => ({
-  instructorDashboardUrl: jest.fn(),
-}));
-
-instructorDashboardUrl.mockReturnValue('test-dashboard-url');
-
-const hookProps = {
-  areGradesFrozen: false,
-  canUserViewGradebook: true,
-  courseId: 'test-course-id',
-  handleToggleViewClick: jest.fn().mockName('hooks.handleToggleViewClick'),
-  showBulkManagement: false,
-  toggleViewMessage: { defaultMessage: 'toggle-view-message' },
-};
-useGradebookHeaderData.mockReturnValue(hookProps);
-
-let el;
-describe('GradebookHeader component', () => {
-  beforeAll(() => {
-    el = shallow(<GradebookHeader />);
-  });
-  describe('behavior', () => {
-    it('initializes hooks', () => {
-      expect(useGradebookHeaderData).toHaveBeenCalledWith();
-      expect(useIntl).toHaveBeenCalledWith();
-    });
-  });
-  describe('render', () => {
-    describe('default view', () => {
-      test('shapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-    describe('show bulk management', () => {
-      beforeEach(() => {
-        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, showBulkManagement: true });
-        el = shallow(<GradebookHeader />);
-      });
-      test('snapshot: show toggle view message button with handleToggleViewClick method', () => {
-        expect(el.snapshot).toMatchSnapshot();
-        const { onClick } = el.instance.findByType(Button)[0].props;
-        expect(onClick).toEqual(hookProps.handleToggleViewClick);
-        expect(el.instance.findByType(Button)[0].children[0].el).toEqual(formatMessage(hookProps.toggleViewMessage));
-      });
-    });
-    describe('frozen grades', () => {
-      beforeEach(() => {
-        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, areGradesFrozen: true });
-        el = shallow(<GradebookHeader />);
-      });
-      test('snapshot: show frozen warning', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-    describe('user cannot view gradebook', () => {
-      beforeEach(() => {
-        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, canUserViewGradebook: false });
-        el = shallow(<GradebookHeader />);
-      });
-      test('snapshot: show unauthorized warning', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-  });
-});