chore: update browserslist DB (#561)

Co-authored-by: jansenk <1639231+jansenk@users.noreply.github.com>

.env

@@ -10,6 +10,7 @@ DATA_API_BASE_URL=''
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 ACCESS_TOKEN_COOKIE_NAME=''
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
 NEW_RELIC_APP_ID=''
 NEW_RELIC_LICENSE_KEY=''
 SITE_NAME=''
@@ -30,3 +31,8 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='true'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.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,3 +37,8 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+APP_ID=''
+MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='false'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.eslintignore

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

.eslintrc.js

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

.github/CODEOWNERS

@@ -1,6 +0,0 @@
-# Code owners for frontend-app-gradebook, editable gradebook micro-frontend (MFE)
-
-# These owners will be the default owners for everything in
-# the repo. Unless a later match takes precedence, they will
-# be requested for review when someone opens a pull request.
-*       @openedx/content-aurora

.github/dependabot.yml

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

.github/renovate.json

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

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

@@ -16,4 +16,4 @@ jobs:
     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 }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

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

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

.github/workflows/ci.yml

@@ -3,26 +3,23 @@ name: node_js CI
 on:
   push:
     branches:
-      - master
+    - master
   pull_request:
     branches:
-      - "**"
+    - '**'
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [12, 14, 16]
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -43,11 +40,14 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
 
     - name: Send failure notification
       if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
+      uses: dawidd6/action-send-mail@v6
       with:
         server_address: email-smtp.us-east-1.amazonaws.com
         server_port: 465
@@ -56,4 +56,5 @@ jobs:
         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 }}"
+        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{
+          github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/commitlint.yml

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

.github/workflows/lockfileversion-check.yml

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

.github/workflows/npm-publish.yml

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

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

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

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

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

.gitignore

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

.nvmrc

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

.releaserc

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

.tx/config

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

Makefile

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

README.md

@@ -1,120 +0,0 @@
-[![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)
-
-# 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.
-
-Jump to:
-
-- [Should I use Gradebook in my course?](#should-i-use-gradebook-in-my-course)
-- [Quickstart](#quickstart)
-
-For existing documentation see:
-
-- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
-- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#override-learner-subsection-scores-in-bulk)
-
-## Should I use Gradebook in my course?
-
-### What does this offer over the legacy gradebook?
-
-The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
-audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.
-
-UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
-scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
-‘Homework’).
-
-### What does the legacy gradebook offer that this project does not?
-
-This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
-quick links to the problems for the instructor to visit. It expects the instructor to be familiar with the problems they
-are grading and which unit they refer to.
-
-The gradebook is expected to be much more performant for larger numbers of students as well. The Instructor Dashboard
-link for the legacy gradebook reports that "this feature is available only to courses with a small number of enrolled 
-learners." However, this project comes with no such warning.
-
-### Who should not change to this gradebook?
-
-Groups whose instructors need not ever manually override grades do not need this project, but may not be any worse off
-depending on their needs. Instructors that expect to review grades infrequently enough that not having a direct link
-to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
-generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
-
-## Quickstart
-
-### Installation
-
-To install gradebook into your project:
-```
-npm i --save @edx/frontend-app-gradebook
-```
-
-## Running the UI Standalone
-
-To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.
-
-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.
-
-If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
-
-Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
-
-## Configuring for local use in edx-platform
-
-Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
-to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
-```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
-```
-
-There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
-
-1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
-check the ``enabled`` and ``enabled for all courses`` boxes.
-
-2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
-
-3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
-    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
-    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
-
-    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
-
-**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
-numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
-recalculated grade values, verify you've set all flags correctly.
-
-## Running tests
-
-1. Assuming that you're operating in the context of the edX devstack,
-run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
-running gradebook container.
-2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
-
-## Directory Structure
-
-* `config`
-  * Directory for [`webpack`](https://webpack.js.org/) configurations
-* `public`
-  * Entry point for the single-page application - `gradebook` has a single `index.html` file
-* `src`
-  * `components`
-    * Directory for presentational `React` components
-  * `containers`
-    * Directory for container `React` components
-  * `data`
-    * `actions`
-      * Directory for `Redux` action creators
-    * `constants`
-    * `reducers`
-      * Directory for `Redux` reducers
-
-## Authentication with backend API services
-
-See the [`@edx/frontend-auth`](https://github.com/edx/frontend-auth) repo for information about securing routes in your application that require user authentication.

README.rst

@@ -0,0 +1,253 @@
+frontend-app-gradebook
+#######################
+
+|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+
+Purpose
+*******
+
+Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
+
+Jump to:
+
+- `Should I use Gradebook in my course?`_
+- Quickstart_
+
+For existing documentation see:
+
+- Basic Usage: `Review Learner Grades (read-the-docs) <https://docs.openedx.org/en/latest/educators/how-tos/data/view_learner_grades.html>`_
+- Bulk Grade Management: `Override Learner Subsection Scores in Bulk (read-the-docs) <https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#override-learner-subsection-scores-in-bulk>`_
+
+Should I use Gradebook in my course?
+*************************************
+
+What does this offer over the legacy gradebook?
+================================================
+
+The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an
+audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.
+
+UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
+scored within a certain range, and by assignment types (note: Not problem types, but categories like 'Exams' or
+'Homework').
+
+What does the legacy gradebook offer that this project does not?
+=================================================================
+
+This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
+quick links to the problems for the instructor to visit. It expects the instructor to be familiar with the problems they
+are grading and which unit they refer to.
+
+The gradebook is expected to be much more performant for larger numbers of students as well. The Instructor Dashboard
+link for the legacy gradebook reports that "this feature is available only to courses with a small number of enrolled
+learners." However, this project comes with no such warning.
+
+Who should not change to this gradebook?
+=========================================
+
+Groups whose instructors need not ever manually override grades do not need this project, but may not be any worse off
+depending on their needs. Instructors that expect to review grades infrequently enough that not having a direct link
+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
+***************
+
+Installation
+============
+
+To install gradebook into your project:
+
+.. code-block:: bash
+
+  npm i --save @edx/frontend-app-gradebook
+
+Quickstart
+==========
+
+Cloning and Setup
+-----------------
+
+1. Clone your new repo:
+
+   .. code-block:: bash
+
+     git clone https://github.com/openedx/frontend-app-gradebook.git
+
+2. Use the version of Node specified in ``.nvmrc``
+
+3. Stop the Tutor devstack, if it's running:
+
+   .. code-block:: bash
+
+     tutor dev stop
+
+4. Next, we need to tell Tutor that we're going to be running this repo in development mode, and it should be excluded from the mfe container that otherwise runs every MFE. Run this:
+
+   .. code-block:: bash
+
+     tutor mounts add /path/to/frontend-app-gradebook
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start the
+   Gradebook MFE, which we're going to run on the host instead of in a container
+   managed by Tutor. Run:
+
+   .. code-block:: bash
+
+     tutor dev start lms cms mfe
+
+Startup
+-------
+
+1. Install npm dependencies:
+
+   .. code-block:: bash
+
+     cd frontend-app-gradebook && npm install
+
+2. Start the dev server:
+
+   .. code-block:: bash
+
+     npm run dev
+
+Running the UI Standalone
+==========================
+
+To install the project please refer to the `MFE Development on Tutor <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`_ instructions.
+
+When not mounted, gradebook will run in the shared MFE container at http://apps.local.openedx.io/gradebook/course-v1:edX+DemoX+Demo_Course.
+
+When mounted in the tutor ``gradebook`` container, or when running a local (host) webpack dev server, the web application runs on port **1994**, so when you go to http://apps.local.openedx.io:1994/gradebook/course-v1:edX+DemoX+Demo_Course you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+
+(Note: This may not work in Tutor; these instructions are for the deprecated Devstack) You can see the log messages for the docker container by executing ``make gradebook-logs`` in the ``devstack`` directory.
+
+Note that starting the container executes the ``npm run start`` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
+
+Plugins
+*******
+
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Running tests
+*************
+
+Run:
+
+.. code-block:: bash
+
+  nvm use
+
+  npm ci
+
+  npm test
+
+Directory Structure
+*******************
+
+* ``config``
+
+  * Directory for `webpack <https://webpack.js.org/>`_ configurations
+
+* ``public``
+
+  * Entry point for the single-page application - ``gradebook`` has a single ``index.html`` file
+
+* ``src``
+
+  * ``components``
+
+    * Directory for presentational ``React`` components
+
+  * ``containers``
+
+    * Directory for container ``React`` components
+
+  * ``data``
+
+    * ``actions``
+
+      * Directory for ``Redux`` action creators
+
+    * ``constants``
+    * ``reducers``
+
+      * Directory for ``Redux`` reducers
+
+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.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+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.
+
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-app-gradebook
+.. |Codecov| image:: https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook
+   :target: https://app.codecov.io/gh/openedx/frontend-app-gradebook
+.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg
+   :target: @edx/frontend-app-gradebook
+.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg
+   :target: @edx/frontend-app-gradebook
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg
+   :target: @edx/frontend-app-gradebook
+.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
+   :target: https://github.com/semantic-release/semantic-release

babel.config.js

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

catalog-info.yaml

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

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

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

documentation/testing/test-setup.md

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

jest.config.js

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

openedx.yaml

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

package.json

@@ -1,62 +1,60 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.5.0",
+  "version": "1.6.3",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
+    "url": "git+https://github.com/openedx/frontend-app-gradebook.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/gradebook/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "watch-tests": "jest --watch"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/frontend-app-gradebook#readme",
+  "homepage": "https://github.com/openedx/frontend-app-gradebook#readme",
   "publishConfig": {
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "not ie > 0",
-    "not ie_mob > 0"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
-    "@edx/frontend-component-footer": "10.2.1",
-    "@edx/frontend-component-header": "2.4.5",
-    "@edx/frontend-platform": "1.15.1",
-    "@edx/paragon": "19.6.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.6.1",
+    "@edx/frontend-platform": "^8.3.7",
+    "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.5",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/paragon": "^23.4.5",
     "@redux-beacon/segment": "^1.0.0",
     "@reduxjs/toolkit": "^1.5.1",
     "classnames": "^2.2.6",
     "core-js": "3.6.5",
     "email-prop-type": "^1.1.7",
-    "enzyme": "^3.10.0",
-    "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-intl": "^2.9.0",
-    "react-redux": "^7.1.1",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-redux": "^7.2.9",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.0.5",
     "redux-beacon": "^2.1.0",
@@ -65,24 +63,20 @@
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.7",
     "sass": "^1.49.0",
-    "util": "^0.12.3",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.1.1",
-    "axios": "0.21.1",
-    "axios-mock-adapter": "^1.17.0",
-    "codecov": "^3.6.1",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "@edx/browserslist-config": "^1.1.1",
+    "@openedx/frontend-build": "^14.6.2",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "es-check": "^2.3.0",
-    "fetch-mock": "^6.5.2",
-    "husky": "2.7.0",
+    "fetch-mock": "^12.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "24.9.0",
-    "react-dev-utils": "^5.0.3",
-    "react-test-renderer": "^16.10.1",
-    "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3"
+    "jest": "^29.7.0",
+    "react-dev-utils": "^12.0.1",
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.3"
   }
 }

src/App.jsx

@@ -1,33 +1,31 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } 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}>
-    <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>
+    <Head />
+    <div>
+      <Header />
+      <main>
+        <Routes>
+          <Route
+            path="/:courseId"
+            element={<GradebookPage />}
+          />
+        </Routes>
+      </main>
+      <FooterSlot />
+    </div>
   </AppProvider>
 );
 

src/App.scss

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";

src/App.test.jsx

@@ -1,74 +1,63 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import Footer from '@edx/frontend-component-footer';
-import Header from '@edx/frontend-component-header';
-
-import { routePath } from 'data/constants/app';
-import store from 'data/store';
-import GradebookPage from 'containers/GradebookPage';
-
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 jest.mock('react-router-dom', () => ({
-  BrowserRouter: () => 'BrowserRouter',
-  Route: () => 'Route',
-  Switch: () => 'Switch',
+  Routes: ({ children }) => children,
+  Route: ({ element }) => element,
 }));
+
 jest.mock('@edx/frontend-platform/react', () => ({
-  AppProvider: () => 'AppProvider',
+  AppProvider: ({ children }) => children,
 }));
-jest.mock('data/constants/app', () => ({
-  routePath: '/:courseId',
+
+jest.mock('@edx/frontend-component-header', () => ({
+  __esModule: true,
+  default: () => <div>Header</div>,
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
-jest.mock('data/store', () => 'testStore');
-jest.mock('containers/GradebookPage', () => 'GradebookPage');
-jest.mock('@edx/frontend-component-header', () => 'Header');
 
-const logo = 'fakeLogo.png';
-let el;
-let router;
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: () => <div>Footer</div>,
+}));
 
-describe('App router component', () => {
-  test('snapshot', () => {
-    expect(shallow(<App />)).toMatchSnapshot();
+jest.mock('./head/Head', () => ({
+  __esModule: true,
+  default: () => <div>Head</div>,
+}));
+
+jest.mock('containers/GradebookPage', () => ({
+  __esModule: true,
+  default: () => <div>Gradebook</div>,
+}));
+
+describe('App', () => {
+  beforeEach(() => {
+    render(<App />);
   });
-  describe('component', () => {
-    beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
-      el = shallow(<App />);
-      router = el.childAt(0);
-    });
-    describe('AppProvider', () => {
-      test('AppProvider is the parent component, passed the redux store props', () => {
-        expect(el.type()).toBe(AppProvider);
-        expect(el.props().store).toEqual(store);
-      });
-    });
-    describe('Router', () => {
-      test('first child of AppProvider', () => {
-        expect(router.type()).toBe(Router);
-      });
-      test('Header is above/outside-of the routing', () => {
-        expect(router.childAt(0).childAt(0).type()).toBe(Header);
-        expect(router.childAt(0).childAt(1).type()).toBe('main');
-      });
-      test('Routing - GradebookPage is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
-          <main>
-            <Switch>
-              <Route exact path={routePath} component={GradebookPage} />
-            </Switch>
-          </main>,
-        ));
-      });
-    });
-    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
-    });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders Head component', () => {
+    const head = screen.getByText('Head');
+    expect(head).toBeInTheDocument();
+  });
+
+  it('renders Header component', () => {
+    const header = screen.getByText('Header');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('renders Footer component', () => {
+    const footer = screen.getByText('Footer');
+    expect(footer).toBeInTheDocument();
+  });
+
+  it('renders main content wrapper', () => {
+    const main = screen.getByRole('main');
+    expect(main).toBeInTheDocument();
+    const gradebook = screen.getByText('Gradebook');
+    expect(gradebook).toBeInTheDocument();
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App router component snapshot 1`] = `
-<AppProvider
-  store="testStore"
->
-  <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 '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import messages from './messages';

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -1,20 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Alert } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
-import messages from './messages';
 
 import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
+import { renderWithIntl, screen } from '../../testUtilsExtra';
 
-jest.mock('@edx/frontend-platform/i18n', () => ({
-  defineMessages: m => m,
-  FormattedMessage: () => 'FormattedMessage',
-}));
-jest.mock('@edx/paragon', () => ({
-  Alert: () => 'Alert',
-}));
 jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
@@ -29,47 +19,19 @@ const errorMessage = 'Oh noooooo';
 
 describe('BulkManagementAlerts', () => {
   describe('component', () => {
-    let el;
-    describe('no errer, no upload success', () => {
-      beforeEach(() => {
-        el = shallow(<BulkManagementAlerts />);
+    describe('states of the warnings', () => {
+      test('no alert shown', () => {
+        renderWithIntl(<BulkManagementAlerts bulkImportError="" uploadSuccess={false} />);
+        expect(document.querySelectorAll('.alert').length).toEqual(0);
       });
-      test('snapshot - bulkImportError closed, success closed', () => {
-        expect(el).toMatchSnapshot();
+      test('Just success alert shown', () => {
+        renderWithIntl(<BulkManagementAlerts bulkImportError="" uploadSuccess />);
+        expect(document.querySelectorAll('.alert-success').length).toEqual(1);
       });
-      test('closed danger alert', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).props().show).toEqual(false);
-        expect(el.childAt(0).props().variant).toEqual('danger');
-      });
-      test('closed success alert', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).props().show).toEqual(false);
-        expect(el.childAt(1).props().variant).toEqual('success');
-      });
-    });
-    describe('no errer, no upload success', () => {
-      beforeEach(() => {
-        el = shallow(<BulkManagementAlerts uploadSuccess bulkImportError={errorMessage} />);
-      });
-      const assertions = [
-        'danger alert open with bulkImportError',
-        'success alert open with messages.successDialog',
-      ];
-      test(`snapshot - ${assertions.join(', ')}`, () => {
-        expect(el).toMatchSnapshot();
-      });
-      test('open danger alert with bulkImportError content', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).children().text()).toEqual(errorMessage);
-        expect(el.childAt(0).props().show).toEqual(true);
-      });
-      test('open success alert with messages.successDialog content', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().getElement()).toEqual(
-          <FormattedMessage {...messages.successDialog} />,
-        );
-        expect(el.childAt(1).props().show).toEqual(true);
+      test('Just error alert shown', () => {
+        renderWithIntl(<BulkManagementAlerts bulkImportError={errorMessage} uploadSuccess={false} />);
+        expect(document.querySelectorAll('.alert-danger').length).toEqual(1);
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
       });
     });
   });

src/components/BulkManagementHistoryView/HistoryTable.jsx

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

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,109 +1,187 @@
-/* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Table } from '@edx/paragon';
+import { render, screen, initializeMocks } from 'testUtilsExtra';
+import { DataTable } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
 
+import { HistoryTable, mapHistoryRows, mapStateToProps } from './HistoryTable';
 import ResultsSummary from './ResultsSummary';
-import { HistoryTable, mapStateToProps } from './HistoryTable';
 
-jest.mock('@edx/frontend-platform/i18n', () => ({
-  defineMessages: m => m,
-  FormattedMessage: () => 'FormattedMessage',
-}));
-jest.mock('@edx/paragon', () => ({
-  Table: () => 'Table',
+initializeMocks();
+
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  DataTable: jest.fn(() => <div data-testid="data-table">DataTable</div>),
 }));
+jest.mock('./ResultsSummary', () => jest.fn(() => <div data-testid="results-summary">ResultsSummary</div>));
 jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
     grades: {
-      bulkManagementHistoryEntries: jest.fn(state => ({ historyEntries: state })),
+      bulkManagementHistoryEntries: jest.fn(),
     },
   },
 }));
-jest.mock('./ResultsSummary', () => 'ResultsSummary');
 
 describe('HistoryTable', () => {
-  describe('component', () => {
-    const entry1 = {
-      originalFilename: 'blue.png',
-      user: 'Eifel',
-      timeUploaded: '65',
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockBulkManagementHistory = [
+    {
+      originalFilename: 'test-file-1.csv',
+      user: 'test-user-1',
+      timeUploaded: '2025-01-01T10:00:00Z',
       resultsSummary: {
-        rowId: 12,
-        courseId: 'Da Bu Dee',
-        text: 'Da ba daa',
+        rowId: 1,
+        text: 'Download results 1',
       },
-    };
-    const entry2 = {
-      originalFilename: 'allStar.jpg',
-      user: 'Smashmouth',
-      timeUploaded: '2000s?',
+    },
+    {
+      originalFilename: 'test-file-2.csv',
+      user: 'test-user-2',
+      timeUploaded: '2025-01-02T10:00:00Z',
       resultsSummary: {
-        courseId: 'rockstar',
         rowId: 2,
-        text: 'all that glitters is gold',
+        text: 'Download results 2',
       },
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('mapHistoryRows', () => {
+    const mockRow = {
+      resultsSummary: {
+        rowId: 1,
+        text: 'Download results',
+      },
+      originalFilename: 'test-file.csv',
+      user: 'test-user',
+      timeUploaded: '2025-01-01T10:00:00Z',
     };
-    const props = {
-      bulkManagementHistory: [entry1, entry2],
-    };
-    let el;
-    describe('snapshot', () => {
-      beforeEach(() => {
-        el = shallow(<HistoryTable {...props} />);
-      });
-      test('snapshot - loads formatted table', () => {
-        expect(el).toMatchSnapshot();
-      });
-      describe('history table', () => {
-        let table;
-        beforeEach(() => {
-          table = el.find(Table);
-        });
-        describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
-          const fieldAssertions = [
-            'maps resultsSummay to ResultsSummary',
-            'wraps filename and user',
-            'forwards the rest',
-          ];
-          test(`snapshot: ${fieldAssertions.join(', ')}`, () => {
-            expect(table.props().data).toMatchSnapshot();
-          });
-          test(fieldAssertions.join(', '), () => {
-            const rows = table.props().data;
-            expect(rows[0].resultsSummary).toEqual(<ResultsSummary {...entry1.resultsSummary} />);
-            expect(rows[0].user).toEqual(<span className="wrap-text-in-cell">{entry1.user}</span>);
-            expect(
-              rows[0].filename,
-            ).toEqual(<span className="wrap-text-in-cell">{entry1.originalFilename}</span>);
-            expect(rows[1].resultsSummary).toEqual(<ResultsSummary {...entry2.resultsSummary} />);
-            expect(rows[1].user).toEqual(<span className="wrap-text-in-cell">{entry2.user}</span>);
-            expect(
-              rows[1].filename,
-            ).toEqual(<span className="wrap-text-in-cell">{entry2.originalFilename}</span>);
-          });
-        });
-        test('columns from bulkManagementColumns', () => {
-          expect(table.props().columns).toEqual(bulkManagementColumns);
-        });
-      });
+
+    it('transforms row data correctly', () => {
+      const result = mapHistoryRows(mockRow);
+
+      expect(result).toHaveProperty('resultsSummary');
+      expect(result).toHaveProperty('filename');
+      expect(result).toHaveProperty('user');
+      expect(result).toHaveProperty('timeUploaded');
+      expect(result.timeUploaded).toBe('2025-01-01T10:00:00Z');
+    });
+
+    it('wraps filename in span with correct class', () => {
+      const result = mapHistoryRows(mockRow);
+      render(<div>{result.filename}</div>);
+
+      const filenameSpan = screen.getByText('test-file.csv');
+      expect(filenameSpan).toBeInTheDocument();
+      expect(filenameSpan).toHaveClass('wrap-text-in-cell');
+    });
+
+    it('wraps user in span with correct class', () => {
+      const result = mapHistoryRows(mockRow);
+      render(<div>{result.user}</div>);
+
+      const userSpan = screen.getByText('test-user');
+      expect(userSpan).toBeInTheDocument();
+      expect(userSpan).toHaveClass('wrap-text-in-cell');
+    });
+
+    it('renders ResultsSummary component with correct props', () => {
+      const result = mapHistoryRows(mockRow);
+      render(<div>{result.resultsSummary}</div>);
+
+      expect(ResultsSummary).toHaveBeenCalledWith(mockRow.resultsSummary, {});
+      expect(screen.getByTestId('results-summary')).toBeInTheDocument();
+    });
+  });
+
+  describe('component', () => {
+    it('renders DataTable with empty data when no history provided', () => {
+      render(<HistoryTable />);
+
+      expect(DataTable).toHaveBeenCalledWith(
+        {
+          data: [],
+          hasFixedColumnWidths: true,
+          columns: bulkManagementColumns,
+          className: 'table-striped',
+          itemCount: 0,
+        },
+        {},
+      );
+      expect(screen.getByTestId('data-table')).toBeInTheDocument();
+    });
+
+    it('renders DataTable with mapped history data', () => {
+      render(
+        <HistoryTable bulkManagementHistory={mockBulkManagementHistory} />,
+      );
+
+      expect(DataTable).toHaveBeenCalledWith(
+        {
+          data: expect.arrayContaining([
+            expect.objectContaining({
+              filename: expect.any(Object),
+              user: expect.any(Object),
+              resultsSummary: expect.any(Object),
+              timeUploaded: '2025-01-01T10:00:00Z',
+            }),
+            expect.objectContaining({
+              filename: expect.any(Object),
+              user: expect.any(Object),
+              resultsSummary: expect.any(Object),
+              timeUploaded: '2025-01-02T10:00:00Z',
+            }),
+          ]),
+          hasFixedColumnWidths: true,
+          columns: bulkManagementColumns,
+          className: 'table-striped',
+          itemCount: 2,
+        },
+        {},
+      );
+    });
+
+    it('passes correct props to DataTable', () => {
+      render(
+        <HistoryTable bulkManagementHistory={mockBulkManagementHistory} />,
+      );
+
+      const dataTableCall = DataTable.mock.calls[0][0];
+      expect(dataTableCall.hasFixedColumnWidths).toBe(true);
+      expect(dataTableCall.columns).toBe(bulkManagementColumns);
+      expect(dataTableCall.className).toBe('table-striped');
+      expect(dataTableCall.itemCount).toBe(mockBulkManagementHistory.length);
     });
   });
 
   describe('mapStateToProps', () => {
-    const testState = { a: 'simple', test: 'state' };
-    let mapped;
+    const mockState = { test: 'state' };
+    const mockHistoryEntries = [
+      { originalFilename: 'file1.csv', user: 'user1' },
+      { originalFilename: 'file2.csv', user: 'user2' },
+    ];
+
     beforeEach(() => {
-      mapped = mapStateToProps(testState);
+      selectors.grades.bulkManagementHistoryEntries.mockReturnValue(
+        mockHistoryEntries,
+      );
     });
-    test('bulkManagementHistory from grades.bulkManagementHistoryEntries', () => {
+
+    it('maps bulkManagementHistory from selector', () => {
+      const result = mapStateToProps(mockState);
+
       expect(
-        mapped.bulkManagementHistory,
-      ).toEqual(selectors.grades.bulkManagementHistoryEntries(testState));
+        selectors.grades.bulkManagementHistoryEntries,
+      ).toHaveBeenCalledWith(mockState);
+      expect(result.bulkManagementHistory).toBe(mockHistoryEntries);
     });
   });
 });

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Hyperlink, Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 
@@ -19,10 +19,8 @@ const ResultsSummary = ({
   text,
 }) => (
   <Hyperlink
-    href={lms.urls.bulkGradesUrlByRow(rowId)}
-    destination="www.edx.org"
+    destination={lms.urls.bulkGradesUrlByRow(rowId)}
     target="_blank"
-    rel="noopener noreferrer"
     showLaunchIcon={false}
   >
     <Icon src={Download} className="d-inline-block" />

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

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

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

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

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

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

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

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

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

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

src/components/BulkManagementHistoryView/index.test.jsx

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

src/components/BulkManagementHistoryView/messages.js

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   helpText: {
     id: 'gradebook.BulkManagementHistoryView',
-    defaultMessage: 'Below is a log of previous grade imports.  To download a CSV of your gradebook and import grades for override, return to the Gradebook.  Please note, after importing grades, it may take a few seconds to process the override.',
+    defaultMessage: 'Below is a log of previous grade imports. To download a CSV of your gradebook and import grades for override, return to the Gradebook. Please note, after importing grades, it may take a few seconds to process the override.',
     description: 'Bulk Management History View help text',
   },
   successDialog: {

src/components/EdxHeader/EdxHeader.test.jsx

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

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

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header snapshot - has edx link with logo url 1`] = `
-<div
-  className="mb-3"
->
-  <header
-    className="d-flex justify-content-center align-items-center p-3 border-bottom-blue"
-  >
-    <Hyperlink
-      destination="undefined/dashboard"
-    >
-      <img
-        alt="edX logo"
-        height="30"
-        src="www.ourLogo.url"
-        width="60"
-      />
-    </Hyperlink>
-    <div />
-  </header>
-</div>
-`;

src/components/EdxHeader/index.jsx

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

src/components/EdxHeader/test.jsx

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

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

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

src/components/GradebookFilters/AssignmentFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentFilter/index.jsx

@@ -1,98 +1,44 @@
 /* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
 import SelectGroup from '../SelectGroup';
+import useAssignmentFilterData from './hooks';
 
-const { fetchGradesIfAssignmentGradeFiltersSet } = thunkActions.grades;
-
-export class AssignmentFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(event) {
-    const assignment = event.target.value;
-    const selectedFilterOption = this.props.assignmentFilterOptions.find(
-      ({ label }) => label === assignment,
-    );
-    const { type, id } = selectedFilterOption || {};
-    const typedValue = { label: assignment, type, id };
-    this.props.updateAssignmentFilter(typedValue);
-    this.props.updateQueryParams({ assignment: id });
-    this.props.fetchGradesIfAssignmentGradeFiltersSet();
-  }
-
-  get options() {
-    const mapper = ({ label, subsectionLabel }) => (
-      <option key={label} value={label}>
-        {label}: {subsectionLabel}
-      </option>
-    );
-    return ([
-      <option key="0" value="">All</option>,
-      ...this.props.assignmentFilterOptions.map(mapper),
-    ]);
-  }
-
-  render() {
-    return (
-      <div className="student-filters">
-        <SelectGroup
-          id="assignment"
-          label={<FormattedMessage {...messages.assignment} />}
-          value={this.props.selectedAssignment}
-          onChange={this.handleChange}
-          disabled={this.props.assignmentFilterOptions.length === 0}
-          options={this.options}
-        />
-      </div>
-    );
-  }
-}
-
-AssignmentFilter.defaultProps = {
-  assignmentFilterOptions: [],
-  selectedAssignment: '',
+const AssignmentFilter = ({ updateQueryParams }) => {
+  const {
+    handleChange,
+    selectedAssignmentLabel,
+    assignmentFilterOptions,
+  } = useAssignmentFilterData({ updateQueryParams });
+  const { formatMessage } = useIntl();
+  const filterOptions = assignmentFilterOptions.map(({ label, subsectionLabel }) => (
+    <option key={label} value={label}>
+      {label}: {subsectionLabel}
+    </option>
+  ));
+  return (
+    <div className="student-filters">
+      <SelectGroup
+        id="assignment"
+        label={formatMessage(messages.assignment)}
+        value={selectedAssignmentLabel}
+        onChange={handleChange}
+        disabled={assignmentFilterOptions.length === 0}
+        options={[
+          <option key="0" value="">All</option>,
+          ...filterOptions,
+        ]}
+      />
+    </div>
+  );
 };
 
 AssignmentFilter.propTypes = {
   updateQueryParams: PropTypes.func.isRequired,
-  // redux
-  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    subsectionLabel: PropTypes.string,
-    type: PropTypes.string,
-    id: PropTypes.string,
-  })),
-  selectedAssignment: PropTypes.string,
-  fetchGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
-  updateAssignmentFilter: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => {
-  const { filters } = selectors;
-  return {
-    assignmentFilterOptions: filters.selectableAssignmentLabels(state),
-    selectedAssignment: filters.selectedAssignmentLabel(state),
-    selectedAssignmentType: filters.assignmentType(state),
-    selectedCohort: filters.cohort(state),
-    selectedTrack: filters.track(state),
-  };
-};
-
-export const mapDispatchToProps = {
-  updateAssignmentFilter: actions.filters.update.assignment,
-  fetchGradesIfAssignmentGradeFiltersSet,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AssignmentFilter);
+export default AssignmentFilter;

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

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

src/components/GradebookFilters/AssignmentFilter/test.jsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import { fetchGradesIfAssignmentGradeFiltersSet } from 'data/thunkActions/grades';
-import {
-  AssignmentFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('data/thunkActions/grades', () => ({
-  updateGradesIfAssignmentGradeFiltersSet: jest.fn(),
-}));
-
-jest.mock('data/selectors', () => ({
-  /** Mocking to use passed state for validation purposes */
-  filters: {
-    selectableAssignmentLabels: jest.fn(() => ([{
-      label: 'assigNment',
-      subsectionLabel: 'subsection',
-      type: 'assignMentType',
-      id: 'subsectionId',
-    }])),
-    selectedAssignmentLabel: jest.fn(() => 'assigNment'),
-    assignmentType: jest.fn(() => 'assignMentType'),
-    cohort: jest.fn(() => 'COhort'),
-    track: jest.fn(() => 'traCK'),
-  },
-}));
-
-describe('AssignmentFilter', () => {
-  let props = {
-    assignmentFilterOptions: [
-      {
-        label: 'assgN1',
-        subsectionLabel: 'subLabel1',
-        type: 'assgn_Type1',
-        id: 'assgn_iD1',
-      },
-      {
-        label: 'assgN2',
-        subsectionLabel: 'subLabel2',
-        type: 'assgn_Type2',
-        id: 'assgn_iD2',
-      },
-    ],
-    selectedAssignment: 'assgN1',
-  };
-
-  beforeEach(() => {
-    props = {
-      ...props,
-      updateQueryParams: jest.fn(),
-      fetchGradesIfAssignmentGradeFiltersSet: jest.fn(),
-      updateAssignmentFilter: jest.fn(),
-    };
-  });
-
-  describe('Component', () => {
-    describe('behavior', () => {
-      describe('handleChange', () => {
-        let el;
-        const newAssgn = 'assgN1';
-        const event = { target: { value: newAssgn } };
-        const selected = props.assignmentFilterOptions[0];
-        beforeEach(() => {
-          el = mount(<AssignmentFilter {...props} />);
-          el.instance().handleChange(event);
-        });
-        it('calls props.updateAssignmentFilter with selection', () => {
-          expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
-            label: newAssgn,
-            type: selected.type,
-            id: selected.id,
-          });
-        });
-        it('calls props.updateQueryParams with selected assignment id',
-          () => {
-            expect(props.updateQueryParams).toHaveBeenCalledWith({
-              assignment: selected.id,
-            });
-          });
-        it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
-          const method = props.fetchGradesIfAssignmentGradeFiltersSet;
-          expect(method).toHaveBeenCalledWith();
-        });
-        describe('no selected option', () => {
-          const value = 'fake';
-          beforeEach(() => {
-            el = mount(<AssignmentFilter {...props} />);
-            el.instance().handleChange({ target: { value } });
-          });
-          it('calls props.updateAssignmentFilter with selection', () => {
-            expect(props.updateAssignmentFilter).toHaveBeenCalledWith({
-              label: value,
-              type: undefined,
-              id: undefined,
-            });
-          });
-          it('calls props.updateQueryParams with selected assignment id',
-            () => {
-              expect(props.updateQueryParams).toHaveBeenCalledWith({
-                assignment: undefined,
-              });
-            });
-          it('calls props.fetchGradesIfAssignmentGradeFiltersSet', () => {
-            const method = props.fetchGradesIfAssignmentGradeFiltersSet;
-            expect(method).toHaveBeenCalledWith();
-          });
-        });
-      });
-    });
-    describe('snapshots', () => {
-      test('basic snapshot', () => {
-        const el = shallow(<AssignmentFilter {...props} />);
-        el.instance().handleChange = jest.fn().mockName('handleChange');
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const state = {
-      filters: {
-        assignment: { label: 'assigNment' },
-        assignmentType: 'assignMentType',
-        cohort: 'COhort',
-        track: 'traCK',
-      },
-    };
-    describe('assignmentFilterOptions', () => {
-      it('is selected from filters.selectableAssignmentLabels', () => {
-        expect(
-          mapStateToProps(state).assignmentFilterOptions,
-        ).toEqual(
-          selectors.filters.selectableAssignmentLabels(state),
-        );
-      });
-    });
-    describe('selectedAssignment', () => {
-      it('is selected from filters.selectedAssignmentLabel', () => {
-        expect(
-          mapStateToProps(state).selectedAssignment,
-        ).toEqual(
-          selectors.filters.selectedAssignmentLabel(state),
-        );
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('updateAssignmentFilter', () => {
-      expect(mapDispatchToProps.updateAssignmentFilter).toEqual(
-        actions.filters.update.assignment,
-      );
-    });
-    test('fetchGradesIfAsssignmentGradeFiltersSet', () => {
-      const prop = mapDispatchToProps.fetchGradesIfAssignmentGradeFiltersSet;
-      expect(prop).toEqual(fetchGradesIfAssignmentGradeFiltersSet);
-    });
-  });
-});

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

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

src/components/GradebookFilters/AssignmentGradeFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/test.jsx

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/index.jsx

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import useAssignmentFilterTypeData from './hooks';
+import AssignmentFilterType from '.';
+import { renderWithIntl } from '../../../testUtilsExtra';
+
+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();
+
+describe('AssignmentFilterType component', () => {
+  beforeAll(() => {
+    renderWithIntl(<AssignmentFilterType updateQueryParams={updateQueryParams} />);
+  });
+  describe('render', () => {
+    test('filter options', () => {
+      const options = screen.getAllByRole('option');
+      expect(options.length).toEqual(5); // 4 types + "All Types"
+      expect(options[1]).toHaveTextContent(testType);
+    });
+  });
+});

src/components/GradebookFilters/AssignmentTypeFilter/test.jsx

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

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

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

src/components/GradebookFilters/CourseGradeFilter/hooks.js

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

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

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

src/components/GradebookFilters/CourseGradeFilter/index.jsx

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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import useCourseGradeFilterData from './hooks';
+import CourseFilter from '.';
+import { renderWithIntl } from '../../../testUtilsExtra';
+
+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();
+
+describe('CourseFilter component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('render', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    describe('with selected assignment', () => {
+      beforeEach(() => {
+        renderWithIntl(<CourseFilter updateQueryParams={updateQueryParams} />);
+      });
+
+      it('renders a PercentGroup for both Max and Min filters', () => {
+        expect(screen.getByRole('spinbutton', { name: 'Min Grade' })).toHaveValue(hookData.min.value);
+        expect(screen.getByRole('spinbutton', { name: 'Max Grade' })).toHaveValue(hookData.max.value);
+      });
+      it('renders a submit button', () => {
+        expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
+        // Expect it to be enabled
+        expect(screen.getByRole('button', { name: 'Apply' })).not.toBeDisabled();
+      });
+    });
+    describe('if disabled', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        useCourseGradeFilterData.mockReturnValueOnce({ ...hookData, isDisabled: true });
+        renderWithIntl(<CourseFilter updateQueryParams={updateQueryParams} />);
+      });
+      it('disables submit', () => {
+        expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+      });
+    });
+  });
+});

src/components/GradebookFilters/CourseGradeFilter/test.jsx

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

src/components/GradebookFilters/PercentGroup.jsx

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

src/components/GradebookFilters/PercentGroup.test.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, initializeMocks } from 'testUtilsExtra';
 
 import PercentGroup from './PercentGroup';
 
@@ -12,6 +11,7 @@ describe('PercentGroup', () => {
   };
 
   beforeEach(() => {
+    initializeMocks();
     props = {
       ...props,
       onChange: jest.fn().mockName('props.onChange'),
@@ -19,15 +19,17 @@ describe('PercentGroup', () => {
   });
 
   describe('Component', () => {
-    describe('snapshots', () => {
-      test('basic snapshot', () => {
-        const el = shallow(<PercentGroup {...props} />);
-        expect(el).toMatchSnapshot();
-      });
-      test('disabled', () => {
-        const el = shallow(<PercentGroup {...props} disabled />);
-        expect(el).toMatchSnapshot();
-      });
+    test('is displayed', () => {
+      render(<PercentGroup {...props} />);
+      expect(screen.getByRole('spinbutton', { name: 'Group Label' })).toBeInTheDocument();
+      expect(screen.getByText('Group Label')).toBeVisible();
+      expect(screen.getByText('%')).toBeVisible();
+    });
+    test('disabled', () => {
+      render(<PercentGroup {...props} disabled />);
+      expect(screen.getByRole('spinbutton', { name: 'Group Label' })).toBeDisabled();
+      expect(screen.getByText('Group Label')).toBeVisible();
+      expect(screen.getByText('%')).toBeVisible();
     });
   });
 });

src/components/GradebookFilters/SelectGroup.jsx

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

src/components/GradebookFilters/SelectGroup.test.jsx

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

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

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

src/components/GradebookFilters/StudentGroupsFilter/hooks.js

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

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

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

src/components/GradebookFilters/StudentGroupsFilter/index.jsx

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

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import { render, screen, initializeMocks } from 'testUtilsExtra';
+
+import SelectGroup from '../SelectGroup';
+import { StudentGroupsFilter } from './index';
+import useStudentGroupsFilterData from './hooks';
+
+jest.mock('../SelectGroup', () => jest.fn(() => <div data-testid="select-group">SelectGroup</div>));
+jest.mock('./hooks', () => jest.fn());
+
+initializeMocks();
+
+describe('StudentGroupsFilter', () => {
+  const mockUpdateQueryParams = jest.fn();
+
+  const mockTracksData = {
+    value: 'test-track-value',
+    entries: [
+      { value: 'track1', name: 'Track 1' },
+      { value: 'track2', name: 'Track 2' },
+    ],
+    handleChange: jest.fn(),
+  };
+
+  const mockCohortsData = {
+    value: 'test-cohort-value',
+    entries: [
+      { value: 'cohort1', name: 'Cohort 1' },
+      { value: 'cohort2', name: 'Cohort 2' },
+    ],
+    handleChange: jest.fn(),
+    isDisabled: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useStudentGroupsFilterData.mockReturnValue({
+      tracks: mockTracksData,
+      cohorts: mockCohortsData,
+    });
+  });
+
+  it('calls useStudentGroupsFilterData hook with updateQueryParams', () => {
+    render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+    expect(useStudentGroupsFilterData).toHaveBeenCalledWith({
+      updateQueryParams: mockUpdateQueryParams,
+    });
+  });
+
+  it('renders two SelectGroup components', () => {
+    render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+    expect(SelectGroup).toHaveBeenCalledTimes(2);
+    expect(screen.getAllByTestId('select-group')).toHaveLength(2);
+  });
+
+  describe('tracks SelectGroup', () => {
+    it('renders tracks SelectGroup with correct props', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const tracksCall = SelectGroup.mock.calls[0][0];
+      expect(tracksCall.id).toBe('Tracks');
+      expect(tracksCall.value).toBe(mockTracksData.value);
+      expect(tracksCall.onChange).toBe(mockTracksData.handleChange);
+    });
+
+    it('includes trackAll option in tracks SelectGroup', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const tracksCall = SelectGroup.mock.calls[0][0];
+      const { options } = tracksCall;
+
+      expect(options).toHaveLength(3);
+      expect(options[0].props.value).toBeDefined();
+      expect(options[0].props.children).toBeDefined();
+    });
+
+    it('includes track entries in tracks SelectGroup options', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const tracksCall = SelectGroup.mock.calls[0][0];
+      const { options } = tracksCall;
+
+      expect(options[1].props.value).toBe('track1');
+      expect(options[1].props.children).toBe('Track 1');
+      expect(options[2].props.value).toBe('track2');
+      expect(options[2].props.children).toBe('Track 2');
+    });
+  });
+
+  describe('cohorts SelectGroup', () => {
+    it('renders cohorts SelectGroup with correct props', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const cohortsCall = SelectGroup.mock.calls[1][0];
+      expect(cohortsCall.id).toBe('Cohorts');
+      expect(cohortsCall.value).toBe(mockCohortsData.value);
+      expect(cohortsCall.onChange).toBe(mockCohortsData.handleChange);
+      expect(cohortsCall.disabled).toBe(mockCohortsData.isDisabled);
+    });
+
+    it('includes cohortAll option in cohorts SelectGroup', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const cohortsCall = SelectGroup.mock.calls[1][0];
+      const { options } = cohortsCall;
+
+      expect(options).toHaveLength(3);
+      expect(options[0].props.value).toBeDefined();
+      expect(options[0].props.children).toBeDefined();
+    });
+
+    it('includes cohort entries in cohorts SelectGroup options', () => {
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const cohortsCall = SelectGroup.mock.calls[1][0];
+      const { options } = cohortsCall;
+
+      expect(options[1].props.value).toBe('cohort1');
+      expect(options[1].props.children).toBe('Cohort 1');
+      expect(options[2].props.value).toBe('cohort2');
+      expect(options[2].props.children).toBe('Cohort 2');
+    });
+
+    it('passes disabled state to cohorts SelectGroup', () => {
+      useStudentGroupsFilterData.mockReturnValue({
+        tracks: mockTracksData,
+        cohorts: { ...mockCohortsData, isDisabled: true },
+      });
+
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const cohortsCall = SelectGroup.mock.calls[1][0];
+      expect(cohortsCall.disabled).toBe(true);
+    });
+  });
+
+  describe('with empty entries', () => {
+    it('handles empty tracks entries', () => {
+      useStudentGroupsFilterData.mockReturnValue({
+        tracks: { ...mockTracksData, entries: [] },
+        cohorts: mockCohortsData,
+      });
+
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const tracksCall = SelectGroup.mock.calls[0][0];
+      expect(tracksCall.options).toHaveLength(1);
+    });
+
+    it('handles empty cohorts entries', () => {
+      useStudentGroupsFilterData.mockReturnValue({
+        tracks: mockTracksData,
+        cohorts: { ...mockCohortsData, entries: [] },
+      });
+
+      render(<StudentGroupsFilter updateQueryParams={mockUpdateQueryParams} />);
+
+      const cohortsCall = SelectGroup.mock.calls[1][0];
+      expect(cohortsCall.options).toHaveLength(1);
+    });
+  });
+});

src/components/GradebookFilters/StudentGroupsFilter/test.jsx

@@ -1,239 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { fetchGrades } from 'data/thunkActions/grades';
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import {
-  optionFactory,
-  StudentGroupsFilter,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    root: {
-      selectedCohortEntry: jest.fn(state => ({ selectedCohortEntry: state })),
-      selectedTrackEntry: jest.fn(state => ({ selectedTrackEntry: state })),
-    },
-    cohorts: {
-      allCohorts: jest.fn(state => ({ allCohorts: state })),
-      cohortsByName: jest.fn(state => ({ cohortsByName: state })),
-    },
-    tracks: {
-      allTracks: jest.fn(state => ({ allTracks: state })),
-      tracksByName: jest.fn(state => ({ tracksByName: state })),
-    },
-  },
-}));
-
-jest.mock('data/thunkActions/grades', () => ({
-  fetchGrades: jest.fn(),
-}));
-
-describe('StudentGroupsFilter', () => {
-  let props = {
-    cohorts: [
-      { name: 'cohorT1', id: 8001 },
-      { name: 'cohorT2', id: 8002 },
-      { name: 'cohorT3', id: 8003 },
-    ],
-    tracks: [
-      { name: 'TracK1', slug: 'TracK1_slug' },
-      { name: 'TracK2', slug: 'TracK2_slug' },
-      { name: 'TRACK3', slug: 'TRACK3_slug' },
-    ],
-  };
-
-  describe('optionFactory', () => {
-    it('returns a list of options with a default first entry', () => {
-      const data = [{ cMark: 'rainbow', name: 'RDash' }, { cMark: 'balloons', name: 'PPie' }];
-      const defaultOption = 'All-Ponies';
-      const key = 'cMark';
-      const options = optionFactory({ data, defaultOption, key });
-      expect(options).toMatchSnapshot();
-    });
-  });
-
-  describe('Component', () => {
-    beforeEach(() => {
-      props = {
-        ...props,
-        intl: { formatMessage: (msg) => msg.defaultMessage },
-        cohortsByName: {
-          [props.cohorts[0].name]: props.cohorts[0],
-          [props.cohorts[1].name]: props.cohorts[1],
-          [props.cohorts[2].name]: props.cohorts[2],
-        },
-        tracksByName: {
-          [props.tracks[0].name]: props.tracks[0],
-          [props.tracks[1].name]: props.tracks[1],
-          [props.tracks[2].name]: props.tracks[2],
-        },
-        fetchGrades: jest.fn(),
-        selectedCohortEntry: props.cohorts[2],
-        selectedTrackEntry: props.tracks[1],
-        updateQueryParams: jest.fn(),
-        updateCohort: jest.fn().mockName('updateCohort'),
-        updateTrack: jest.fn().mockName('updateTrack'),
-      };
-    });
-
-    describe('snapshots', () => {
-      let el;
-      beforeEach(() => {
-        el = shallow(<StudentGroupsFilter {...props} />);
-      });
-      test('basic snapshot', () => {
-        el.instance().updateTracks = jest.fn().mockName(
-          'updateTracks',
-        );
-        el.instance().updateCohorts = jest.fn().mockName(
-          'updateCohorts',
-        );
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-      test('Cohorts group disabled if no cohorts', () => {
-        el.setProps({ cohorts: [] });
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-      describe('mapCohortsEntries', () => {
-        test('cohort options: [Cohort-All, <{slug, name}...>]', () => {
-          expect(el.instance().mapCohortsEntries()).toMatchSnapshot();
-        });
-      });
-      describe('mapTracksEntries', () => {
-        test('cohort options: [Track-All, <{id, name}...>]', () => {
-          expect(el.instance().mapTracksEntries()).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('behavior', () => {
-      let el;
-      beforeEach(() => {
-        el = shallow(<StudentGroupsFilter {...props} />);
-      });
-      describe('selectedCohortIdFromEvent', () => {
-        it('returns the id of the cohort with the name matching the event', () => {
-          expect(
-            el.instance().selectedCohortIdFromEvent(
-              { target: { value: props.cohorts[1].name } },
-            ),
-          ).toEqual(props.cohorts[1].id.toString());
-        });
-        it('returns null if no matching cohort is found', () => {
-          expect(
-            el.instance().selectedCohortIdFromEvent(
-              { target: { value: 'FAKE' } },
-            ),
-          ).toEqual(null);
-        });
-      });
-      describe('selectedTrackSlugFromEvent', () => {
-        it('returns the slug of the track with the name matching the event', () => {
-          expect(
-            el.instance().selectedTrackSlugFromEvent(
-              { target: { value: props.tracks[1].name } },
-            ),
-          ).toEqual(props.tracks[1].slug);
-        });
-        it('returns null if no matching track is found', () => {
-          expect(
-            el.instance().selectedTrackSlugFromEvent(
-              { target: { value: 'FAKE' } },
-            ),
-          ).toEqual(null);
-        });
-      });
-      describe('updateTracks', () => {
-        const selectedSlug = 'SLUG';
-        beforeEach(() => {
-          el = shallow(<StudentGroupsFilter {...props} />);
-          jest.spyOn(
-            el.instance(),
-            'selectedTrackSlugFromEvent',
-          ).mockReturnValue(selectedSlug);
-          el.instance().updateTracks({ target: {} });
-        });
-        it('calls updateTrack with new value', () => {
-          expect(props.updateTrack).toHaveBeenCalledWith(selectedSlug);
-        });
-        it('calls fetchGrades', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates queryParams with track value', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            track: selectedSlug,
-          });
-        });
-      });
-      describe('updateCohorts', () => {
-        const selectedId = 23;
-        beforeEach(() => {
-          el = shallow(<StudentGroupsFilter {...props} />);
-          jest.spyOn(
-            el.instance(),
-            'selectedCohortIdFromEvent',
-          ).mockReturnValue(selectedId);
-          el.instance().updateCohorts({ target: {} });
-        });
-        it('calls updateCohort with new value', () => {
-          expect(props.updateCohort).toHaveBeenCalledWith(selectedId);
-        });
-        it('calls fetchGrades', () => {
-          expect(props.fetchGrades).toHaveBeenCalledWith();
-        });
-        it('updates queryParams with cohort value', () => {
-          expect(props.updateQueryParams).toHaveBeenCalledWith({
-            cohort: selectedId,
-          });
-        });
-      });
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { h: 'e', l: 'l', o: 'oooooooooo' };
-    let mappedProps;
-    beforeAll(() => {
-      mappedProps = mapStateToProps(testState);
-    });
-    test('cohorts from selectors.cohorts.allCohorts', () => {
-      expect(mappedProps.cohorts).toEqual(selectors.cohorts.allCohorts(testState));
-    });
-    test('cohortsByName from selectors.cohorts.cohortsByName', () => {
-      expect(mappedProps.cohortsByName).toEqual(selectors.cohorts.cohortsByName(testState));
-    });
-    test('selectedCohortEntry from selectors.root.selectedCohortEntry', () => {
-      expect(
-        mappedProps.selectedCohortEntry,
-      ).toEqual(selectors.root.selectedCohortEntry(testState));
-    });
-    test('selectedTrackEntry from selectors.root.selectedTrackEntry', () => {
-      expect(
-        mappedProps.selectedTrackEntry,
-      ).toEqual(selectors.root.selectedTrackEntry(testState));
-    });
-    test('tracks from selectors.tracks.allTracks', () => {
-      expect(mappedProps.tracks).toEqual(selectors.tracks.allTracks(testState));
-    });
-    test('tracksByName from selectors.tracks.tracksByName', () => {
-      expect(mappedProps.tracksByName).toEqual(selectors.tracks.tracksByName(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('fetchGrades from thunkActions.grades.fetchGrades', () => {
-      expect(mapDispatchToProps.fetchGrades).toEqual(fetchGrades);
-    });
-    test('updateCohort from actions.filters.update.cohort', () => {
-      expect(mapDispatchToProps.updateCohort).toEqual(actions.filters.update.cohort);
-    });
-    test('updateTrack from actions.filters.update.track', () => {
-      expect(mapDispatchToProps.updateTrack).toEqual(actions.filters.update.track);
-    });
-  });
-});

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

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

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

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

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

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

src/components/GradebookFilters/hooks.js

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

src/components/GradebookFilters/hooks.test.jsx

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

src/components/GradebookFilters/index.jsx

@@ -1,20 +1,14 @@
-/* eslint-disable react/sort-comp, import/no-named-as-default */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
 import {
   Collapsible,
   Icon,
   IconButton,
   Form,
-} from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
@@ -22,103 +16,74 @@ import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
 import CourseGradeFilter from './CourseGradeFilter';
 import StudentGroupsFilter from './StudentGroupsFilter';
+import useGradebookFiltersData from './hooks';
 
-export class GradebookFilters extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      includeCourseRoleMembers: this.props.includeCourseRoleMembers,
-    };
-    this.handleIncludeTeamMembersChange = this.handleIncludeTeamMembersChange.bind(this);
-  }
+export const GradebookFilters = ({ updateQueryParams }) => {
+  const {
+    closeMenu,
+    includeCourseTeamMembers,
+  } = useGradebookFiltersData({ updateQueryParams });
+  const { formatMessage } = useIntl();
+  const collapsibleClassName = 'filter-group mb-3';
+  return (
+    <>
+      <div className="filter-sidebar-header">
+        <h2><Icon className="fa fa-filter" /></h2>
+        <IconButton
+          className="p-1"
+          onClick={closeMenu}
+          iconAs={Icon}
+          src={Close}
+          alt={formatMessage(messages.closeFilters)}
+          aria-label={formatMessage(messages.closeFilters)}
+        />
+      </div>
 
-  handleIncludeTeamMembersChange(event) {
-    const includeCourseRoleMembers = event.target.checked;
-    this.setState({ includeCourseRoleMembers });
-    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
-    this.props.fetchGrades();
-    this.props.updateQueryParams({ includeCourseRoleMembers });
-  }
-
-  collapsibleGroup = (title, content) => (
-    <Collapsible
-      title={<FormattedMessage {...title} />}
-      defaultOpen
-      className="filter-group mb-3"
-    >
-      {content}
-    </Collapsible>
-  );
-
-  render() {
-    const {
-      intl,
-      updateQueryParams,
-    } = this.props;
-    return (
-      <>
-        <div className="filter-sidebar-header">
-          <h2><Icon className="fa fa-filter" /></h2>
-          <IconButton
-            className="p-1"
-            onClick={this.props.closeMenu}
-            iconAs={Icon}
-            src={Close}
-            alt={intl.formatMessage(messages.closeFilters)}
-            aria-label={intl.formatMessage(messages.closeFilters)}
-          />
+      <Collapsible
+        title={formatMessage(messages.assignments)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
         </div>
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.assignments, (
-          <div>
-            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
-            <AssignmentFilter updateQueryParams={updateQueryParams} />
-            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
-          </div>
-        ))}
+      <Collapsible
+        title={formatMessage(messages.overallGrade)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <CourseGradeFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.overallGrade, (
-          <CourseGradeFilter updateQueryParams={updateQueryParams} />
-        ))}
+      <Collapsible
+        title={formatMessage(messages.studentGroups)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.studentGroups, (
-          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
-        ))}
-
-        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
-          <Form.Checkbox
-            checked={this.state.includeCourseRoleMembers}
-            onChange={this.handleIncludeTeamMembersChange}
-          >
-            <FormattedMessage {...messages.includeCourseTeamMembers} />
-          </Form.Checkbox>
-        ))}
-      </>
-    );
-  }
-}
-GradebookFilters.defaultProps = {
-  includeCourseRoleMembers: false,
+      <Collapsible
+        title={formatMessage(messages.includeCourseTeamMembers)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <Form.Checkbox
+          checked={includeCourseTeamMembers.value}
+          onChange={includeCourseTeamMembers.handleChange}
+        >
+          {formatMessage(messages.includeCourseTeamMembers)}
+        </Form.Checkbox>
+      </Collapsible>
+    </>
+  );
 };
 GradebookFilters.propTypes = {
   updateQueryParams: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-  // redux
-  closeMenu: PropTypes.func.isRequired,
-  fetchGrades: PropTypes.func.isRequired,
-  includeCourseRoleMembers: PropTypes.bool,
-  updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  includeCourseRoleMembers: selectors.filters.includeCourseRoleMembers(state),
-});
-
-export const mapDispatchToProps = {
-  closeMenu: thunkActions.app.filterMenu.close,
-  fetchGrades: thunkActions.grades.fetchGrades,
-  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
-};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));
+export default GradebookFilters;

src/components/GradebookFilters/index.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen, initializeMocks } from 'testUtilsExtra';
+
+import GradebookFilters from '.';
+
+const updateQueryParams = jest.fn();
+
+initializeMocks();
+
+describe('GradebookFilters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    render(<GradebookFilters updateQueryParams={updateQueryParams} />);
+  });
+  describe('All filters render together', () => {
+    test('Assignment filters', () => {
+      expect(screen.getByRole('combobox', { name: 'Assignment Types' })).toBeInTheDocument();
+      expect(screen.getByRole('combobox', { name: 'Assignment' })).toBeInTheDocument();
+    });
+    test('CourseGrade filters', () => {
+      expect(screen.getByRole('button', { name: 'Overall Grade' })).toBeInTheDocument();
+    });
+    test('StudentGroups filters', () => {
+      expect(screen.getByRole('button', { name: 'Student Groups' })).toBeInTheDocument();
+    });
+    test('includeCourseTeamMembers', () => {
+      expect(screen.getByRole('button', { name: 'Include Course Team Members' })).toBeInTheDocument();
+    });
+  });
+});

src/components/GradebookFilters/messages.js

@@ -66,6 +66,11 @@ const messages = defineMessages({
     defaultMessage: 'Close Filters',
     description: 'Button label for Close button in Gradebook Filters',
   },
+  apply: {
+    id: 'gradebook.GradebookFilters.apply',
+    defaultMessage: 'Apply',
+    description: 'Apply filter button text',
+  },
 });
 
 export default messages;

src/components/GradebookFilters/test.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-
-import {
-  GradebookFilters,
-  mapStateToProps,
-  mapDispatchToProps,
-} from '.';
-
-jest.mock('@edx/paragon', () => ({
-  Collapsible: 'Collapsible',
-  Form: {
-    Checkbox: 'Checkbox',
-  },
-  Icon: 'Icon',
-  IconButton: 'IconButton',
-}));
-jest.mock('@edx/paragon/icons', () => ({
-  Close: 'paragon.icons.Close',
-}));
-jest.mock('./AssignmentTypeFilter', () => 'AssignmentTypeFilter');
-jest.mock('./AssignmentFilter', () => 'AssignmentFilter');
-jest.mock('./AssignmentGradeFilter', () => 'AssignmentGradeFilter');
-jest.mock('./CourseGradeFilter', () => 'CourseGradeFilter');
-jest.mock('./StudentGroupsFilter', () => 'StudentGroupsFilter');
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    filters: {
-      includeCourseRoleMembers: jest.fn((state) => ({ includeCourseRoleMembers: state })),
-    },
-  },
-}));
-jest.mock('data/thunkActions', () => ({
-  __esModule: true,
-  default: {
-    app: { filterMenu: { close: jest.fn() } },
-    grades: { fetchGrades: jest.fn() },
-  },
-}));
-
-describe('GradebookFilters', () => {
-  let props = {
-    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().mockName('this.props.updateQueryParams'),
-    };
-  });
-
-  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__/test.jsx.snap

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

src/components/GradebookHeader/hooks.js

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

src/components/GradebookHeader/hooks.test.js

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

src/components/GradebookHeader/index.jsx

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

src/components/GradebookHeader/index.test.jsx

@@ -0,0 +1,300 @@
+import React from 'react';
+import { render, screen, initializeMocks } from 'testUtilsExtra';
+import userEvent from '@testing-library/user-event';
+
+import { instructorDashboardUrl } from 'data/services/lms/urls';
+
+import { GradebookHeader } from './index';
+import useGradebookHeaderData from './hooks';
+import messages from './messages';
+
+jest.mock('data/services/lms/urls', () => ({
+  instructorDashboardUrl: jest.fn(),
+}));
+jest.mock('./hooks', () => jest.fn());
+
+initializeMocks();
+
+describe('GradebookHeader', () => {
+  const mockHandleToggleViewClick = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    instructorDashboardUrl.mockReturnValue('https://example.com/dashboard');
+  });
+
+  describe('basic rendering', () => {
+    beforeEach(() => {
+      useGradebookHeaderData.mockReturnValue({
+        areGradesFrozen: false,
+        canUserViewGradebook: true,
+        courseId: 'course-v1:TestU+CS101+2024',
+        handleToggleViewClick: mockHandleToggleViewClick,
+        showBulkManagement: false,
+        toggleViewMessage: messages.toActivityLog,
+      });
+    });
+
+    it('renders the main header container', () => {
+      render(<GradebookHeader />);
+      const header = screen.getByText('Gradebook').closest('.gradebook-header');
+      expect(header).toHaveClass('gradebook-header');
+    });
+
+    it('renders back to dashboard link', () => {
+      render(<GradebookHeader />);
+      const dashboardLink = screen.getByRole('link');
+      expect(dashboardLink).toHaveAttribute(
+        'href',
+        'https://example.com/dashboard',
+      );
+      expect(dashboardLink).toHaveClass('mb-3');
+      expect(dashboardLink).toHaveTextContent('Back to Dashboard');
+    });
+
+    it('renders gradebook title', () => {
+      render(<GradebookHeader />);
+      const title = screen.getByRole('heading', { level: 1 });
+      expect(title).toHaveTextContent('Gradebook');
+    });
+
+    it('renders course ID subtitle', () => {
+      render(<GradebookHeader />);
+      const subtitle = screen.getByRole('heading', { level: 2 });
+      expect(subtitle).toHaveTextContent('course-v1:TestU+CS101+2024');
+      expect(subtitle).toHaveClass('text-break');
+    });
+
+    it('renders subtitle row with correct classes', () => {
+      render(<GradebookHeader />);
+      const subtitleRow = screen.getByRole('heading', {
+        level: 2,
+      }).parentElement;
+      expect(subtitleRow).toHaveClass(
+        'subtitle-row',
+        'd-flex',
+        'justify-content-between',
+        'align-items-center',
+      );
+    });
+
+    it('calls instructorDashboardUrl to get dashboard URL', () => {
+      render(<GradebookHeader />);
+      expect(instructorDashboardUrl).toHaveBeenCalled();
+    });
+
+    it('calls useGradebookHeaderData hook', () => {
+      render(<GradebookHeader />);
+      expect(useGradebookHeaderData).toHaveBeenCalled();
+    });
+  });
+
+  describe('bulk management toggle button', () => {
+    describe('when showBulkManagement is true', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: true,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('renders toggle view button', () => {
+        render(<GradebookHeader />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+      });
+
+      it('displays correct button text from toggleViewMessage', () => {
+        render(<GradebookHeader />);
+        const toggleButton = screen.getByRole('button');
+        expect(toggleButton).toHaveTextContent('View Bulk Management History');
+      });
+
+      it('calls handleToggleViewClick when button is clicked', async () => {
+        render(<GradebookHeader />);
+        const user = userEvent.setup();
+        const toggleButton = screen.getByRole('button');
+
+        await user.click(toggleButton);
+        expect(mockHandleToggleViewClick).toHaveBeenCalledTimes(1);
+      });
+
+      it('displays correct message from toggleViewMessage', () => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: true,
+          toggleViewMessage: messages.toGradesView,
+        });
+
+        render(<GradebookHeader />);
+        const toggleButton = screen.getByRole('button');
+        expect(toggleButton).toHaveTextContent('Return to Gradebook');
+      });
+    });
+
+    describe('when showBulkManagement is false', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: false,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('does not render toggle view button', () => {
+        render(<GradebookHeader />);
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('frozen grades warning', () => {
+    describe('when areGradesFrozen is true', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: true,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: false,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('renders frozen warning alert', () => {
+        render(<GradebookHeader />);
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveClass('alert', 'alert-warning');
+        expect(alert).toHaveTextContent(
+          'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+        );
+      });
+    });
+
+    describe('when areGradesFrozen is false', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: false,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('does not render frozen warning alert', () => {
+        render(<GradebookHeader />);
+        expect(
+          screen.queryByText(
+            'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+          ),
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('unauthorized warning', () => {
+    describe('when canUserViewGradebook is false', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: false,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: false,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('renders unauthorized warning alert', () => {
+        render(<GradebookHeader />);
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveClass('alert', 'alert-warning');
+        expect(alert).toHaveTextContent(
+          'You are not authorized to view the gradebook for this course.',
+        );
+      });
+    });
+
+    describe('when canUserViewGradebook is true', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValue({
+          areGradesFrozen: false,
+          canUserViewGradebook: true,
+          courseId: 'course-v1:TestU+CS101+2024',
+          handleToggleViewClick: mockHandleToggleViewClick,
+          showBulkManagement: false,
+          toggleViewMessage: messages.toActivityLog,
+        });
+      });
+
+      it('does not render unauthorized warning alert', () => {
+        render(<GradebookHeader />);
+        expect(
+          screen.queryByText(
+            'You are not authorized to view the gradebook for this course.',
+          ),
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('multiple warnings', () => {
+    it('renders both frozen and unauthorized warnings when both conditions are true', () => {
+      useGradebookHeaderData.mockReturnValue({
+        areGradesFrozen: true,
+        canUserViewGradebook: false,
+        courseId: 'course-v1:TestU+CS101+2024',
+        handleToggleViewClick: mockHandleToggleViewClick,
+        showBulkManagement: false,
+        toggleViewMessage: messages.toActivityLog,
+      });
+
+      render(<GradebookHeader />);
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts).toHaveLength(2);
+
+      expect(
+        screen.getByText(
+          'The grades for this course are now frozen. Editing of grades is no longer allowed.',
+        ),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'You are not authorized to view the gradebook for this course.',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('complete integration', () => {
+    it('renders all elements when showBulkManagement is true', () => {
+      useGradebookHeaderData.mockReturnValue({
+        areGradesFrozen: false,
+        canUserViewGradebook: true,
+        courseId: 'course-v1:TestU+CS101+2024',
+        handleToggleViewClick: mockHandleToggleViewClick,
+        showBulkManagement: true,
+        toggleViewMessage: messages.toActivityLog,
+      });
+
+      render(<GradebookHeader />);
+
+      expect(screen.getByRole('link')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+  });
+});

src/components/GradebookHeader/test.jsx

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

src/components/GradesView/BulkManagementControls.jsx

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