Merge pull request #376 from arbrandes/fix-route-quince

[Quince backport] fix: Route with PUBLIC_PATH

.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=''
@@ -32,3 +33,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='true'

.env.development

@@ -12,6 +12,7 @@ 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'
@@ -39,3 +40,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='false'

.eslintignore

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

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 const config = createConfig('eslint', {
@@ -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/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

@@ -11,22 +11,18 @@ on:
 jobs:
   test:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [16]
-        npm: [8.5.x]
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
+
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
-
-    - name: Install npm 8.5.x
-      run: npm install -g npm@${{ matrix.npm }}
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install dependencies
       run: npm ci

.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

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/npm-publish.yml

@@ -15,10 +15,13 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: ${{ env.NODE_VER }}
 
       - name: Install dependencies
         run: npm ci

.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 }}

.nvmrc

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

Makefile

@@ -1,10 +1,10 @@
 npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
+export TRANSIFEX_RESOURCE = frontend-app-gradebook
+transifex_langs = "ar,de,es_419,fa_IR,fr,fr_CA,hi,it,pt,ru,uk,zh_CN"
 
-transifex_resource = frontend-app-gradebook
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
-
+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
@@ -49,15 +49,30 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull --filter=$(transifex_langs) \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
+
+	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-gradebook
+endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,4 +1,5 @@
 [![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
+[![Codecov](https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook)](https://app.codecov.io/gh/openedx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
@@ -57,7 +58,7 @@ npm i --save @edx/frontend-app-gradebook
 
 ## Running the UI Standalone
 
-To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/openedx/devstack) instructions.
 
 The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
 
@@ -117,4 +118,4 @@ running gradebook container.
 
 ## Authentication with backend API services
 
-See the [`@edx/frontend-auth`](https://github.com/edx/frontend-auth) repo for information about securing routes in your application that require user authentication.
+See the [`@edx/frontend-auth`](https://github.com/edx-unsupported/frontend-auth) repo for information about securing routes in your application that require user authentication.

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

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
+    "url": "git+https://github.com/openedx/frontend-app-gradebook.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
@@ -20,21 +20,21 @@
   },
   "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": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "2.5.0",
-    "@edx/paragon": "19.6.0",
+    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
+    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "5.5.4",
+    "@edx/paragon": "20.45.0",
+    "@edx/react-unit-test-utils": "1.7.0",
+    "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -48,15 +48,14 @@
     "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": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
-    "react-intl": "^2.9.0",
-    "react-redux": "^7.1.1",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.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,23 +64,24 @@
     "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",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "12.9.3",
+    "@testing-library/react": "12.1.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "axios": "0.21.2",
     "axios-mock-adapter": "^1.17.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "24.9.0",
-    "react-dev-utils": "^5.0.3",
-    "react-test-renderer": "^16.10.1",
+    "jest": "^26.6.3",
+    "react-dev-utils": "^12.0.1",
+    "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
-    "semantic-release": "^17.2.3"
+    "semantic-release": "^19.0.3"
   }
 }

src/App.jsx

@@ -1,12 +1,11 @@
 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 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';
@@ -15,21 +14,18 @@ import Head from './head/Head';
 const App = () => (
   <AppProvider store={store}>
     <Head />
-    <Router>
-      <div>
-        <Header />
-        <main>
-          <Switch>
-            <Route
-              exact
-              path={routePath}
-              component={GradebookPage}
-            />
-          </Switch>
-        </main>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-      </div>
-    </Router>
+    <div>
+      <Header />
+      <main>
+        <Routes>
+          <Route
+            path="/:courseId"
+            element={<GradebookPage />}
+          />
+        </Routes>
+      </main>
+      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+    </div>
   </AppProvider>
 );
 

src/App.test.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-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 Header from '@edx/frontend-component-header';
 
-import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
@@ -17,14 +16,10 @@ import Head from './head/Head';
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
   Route: () => 'Route',
-  Switch: () => 'Switch',
 }));
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('data/constants/app', () => ({
-  routePath: '/:courseId',
-}));
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
@@ -32,7 +27,7 @@ jest.mock('@edx/frontend-component-header', () => 'Header');
 
 const logo = 'fakeLogo.png';
 let el;
-let router;
+let secondChild;
 
 describe('App router component', () => {
   test('snapshot', () => {
@@ -42,7 +37,7 @@ describe('App router component', () => {
     beforeEach(() => {
       process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      router = el.childAt(1);
+      secondChild = el.childAt(1);
     });
     describe('AppProvider', () => {
       test('AppProvider is the parent component, passed the redux store props', () => {
@@ -57,24 +52,24 @@ describe('App router component', () => {
     });
     describe('Router', () => {
       test('second child of AppProvider', () => {
-        expect(router.type()).toBe(Router);
+        expect(secondChild.type()).toBe('div');
       });
       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');
+        expect(secondChild.childAt(0).type()).toBe(Header);
+        expect(secondChild.childAt(1).type()).toBe('main');
       });
       test('Routing - GradebookPage is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
+        expect(secondChild.find('main')).toEqual(shallow(
           <main>
-            <Switch>
-              <Route exact path={routePath} component={GradebookPage} />
-            </Switch>
+            <Routes>
+              <Route path="/:courseId" element={<GradebookPage />} />
+            </Routes>
           </main>,
         ));
       });
     });
     test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
+      expect(secondChild.find(Footer).props().logo).toEqual(logo);
     });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -4,21 +4,18 @@ exports[`App router component snapshot 1`] = `
 <AppProvider
   store="testStore"
 >
-  <injectIntl(ShimmedIntlComponent) />
-  <BrowserRouter>
-    <div>
-      <Header />
-      <main>
-        <Switch>
-          <Route
-            component="GradebookPage"
-            exact={true}
-            path="/:courseId"
-          />
-        </Switch>
-      </main>
-      <Footer />
-    </div>
-  </BrowserRouter>
+  <Head />
+  <div>
+    <Header />
+    <main>
+      <Component>
+        <Route
+          element={<GradebookPage />}
+          path="/:courseId"
+        />
+      </Component>
+    </main>
+    <Footer />
+  </div>
 </AppProvider>
 `;

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

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

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

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

src/components/GradebookFilters/AssignmentFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentFilter/index.jsx

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

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SelectGroup from '../SelectGroup';
+import useAssignmentFilterData from './hooks';
+import AssignmentFilter from '.';
+
+jest.mock('../SelectGroup', () => 'SelectGroup');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const handleChange = jest.fn();
+const selectedAssignmentLabel = 'test-label';
+const assignmentFilterOptions = [
+  { label: 'label1', subsectionLabel: 'sLabel1' },
+  { label: 'label2', subsectionLabel: 'sLabel2' },
+  { label: 'label3', subsectionLabel: 'sLabel3' },
+  { label: 'label4', subsectionLabel: 'sLabel4' },
+];
+useAssignmentFilterData.mockReturnValue({
+  handleChange,
+  selectedAssignmentLabel,
+  assignmentFilterOptions,
+});
+
+const updateQueryParams = jest.fn();
+
+let el;
+describe('AssignmentFilter component', () => {
+  beforeAll(() => {
+    el = shallow(<AssignmentFilter updateQueryParams={updateQueryParams} />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useAssignmentFilterData).toHaveBeenCalledWith({ updateQueryParams });
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('filter options', () => {
+      const { options } = el.find(SelectGroup).props();
+      expect(options.length).toEqual(5);
+      const testOption = assignmentFilterOptions[0];
+      const optionProps = options[1].props;
+      expect(optionProps.value).toEqual(testOption.label);
+      expect(optionProps.children.join(''))
+        .toEqual(`${testOption.label}: ${testOption.subsectionLabel}`);
+    });
+  });
+});

src/components/GradebookFilters/AssignmentFilter/test.jsx

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

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

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

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

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

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

src/components/GradebookFilters/AssignmentGradeFilter/test.jsx

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

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

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/hooks.js

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/index.jsx

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

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

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

src/components/GradebookFilters/AssignmentTypeFilter/test.jsx

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

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

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

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

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

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

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

src/components/GradebookFilters/CourseGradeFilter/test.jsx

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

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

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

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

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

src/components/GradebookFilters/StudentGroupsFilter/hooks.js

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

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

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

src/components/GradebookFilters/StudentGroupsFilter/index.jsx

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

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

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

src/components/GradebookFilters/StudentGroupsFilter/test.jsx

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

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

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

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

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

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

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

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

@@ -1,98 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookFilters Component snapshots basic snapshot 1`] = `
-<React.Fragment>
-  <div
-    className="filter-sidebar-header"
-  >
-    <h2>
-      <Icon
-        className="fa fa-filter"
-      />
-    </h2>
-    <IconButton
-      alt="Close Filters"
-      aria-label="Close Filters"
-      className="p-1"
-      iconAs="Icon"
-      onClick={[MockFunction this.props.closeMenu]}
-      src="paragon.icons.Close"
-    />
-  </div>
-  <Collapsible
-    className="filter-group mb-3"
-    defaultOpen={true}
-    title={
-      <FormattedMessage
-        defaultMessage="Assignments"
-        description="Assignment filter group label in Gradebook Filters"
-        id="gradebook.GradebookFilters.assignmentsFilterLabel"
-      />
-    }
-  >
-    <div>
-      <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,7 +1,5 @@
-/* eslint-disable react/sort-comp, import/no-named-as-default */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
 import {
   Collapsible,
@@ -10,11 +8,7 @@ import {
   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';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import AssignmentTypeFilter from './AssignmentTypeFilter';
@@ -22,103 +16,74 @@ import AssignmentFilter from './AssignmentFilter';
 import AssignmentGradeFilter from './AssignmentGradeFilter';
 import CourseGradeFilter from './CourseGradeFilter';
 import StudentGroupsFilter from './StudentGroupsFilter';
+import useGradebookFiltersData from './hooks';
 
-export class GradebookFilters extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      includeCourseRoleMembers: this.props.includeCourseRoleMembers,
-    };
-    this.handleIncludeTeamMembersChange = this.handleIncludeTeamMembersChange.bind(this);
-  }
+export const GradebookFilters = ({ updateQueryParams }) => {
+  const {
+    closeMenu,
+    includeCourseTeamMembers,
+  } = useGradebookFiltersData({ updateQueryParams });
+  const { formatMessage } = useIntl();
+  const collapsibleClassName = 'filter-group mb-3';
+  return (
+    <>
+      <div className="filter-sidebar-header">
+        <h2><Icon className="fa fa-filter" /></h2>
+        <IconButton
+          className="p-1"
+          onClick={closeMenu}
+          iconAs={Icon}
+          src={Close}
+          alt={formatMessage(messages.closeFilters)}
+          aria-label={formatMessage(messages.closeFilters)}
+        />
+      </div>
 
-  handleIncludeTeamMembersChange(event) {
-    const includeCourseRoleMembers = event.target.checked;
-    this.setState({ includeCourseRoleMembers });
-    this.props.updateIncludeCourseRoleMembers(includeCourseRoleMembers);
-    this.props.fetchGrades();
-    this.props.updateQueryParams({ includeCourseRoleMembers });
-  }
-
-  collapsibleGroup = (title, content) => (
-    <Collapsible
-      title={<FormattedMessage {...title} />}
-      defaultOpen
-      className="filter-group mb-3"
-    >
-      {content}
-    </Collapsible>
-  );
-
-  render() {
-    const {
-      intl,
-      updateQueryParams,
-    } = this.props;
-    return (
-      <>
-        <div className="filter-sidebar-header">
-          <h2><Icon className="fa fa-filter" /></h2>
-          <IconButton
-            className="p-1"
-            onClick={this.props.closeMenu}
-            iconAs={Icon}
-            src={Close}
-            alt={intl.formatMessage(messages.closeFilters)}
-            aria-label={intl.formatMessage(messages.closeFilters)}
-          />
+      <Collapsible
+        title={formatMessage(messages.assignments)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <div>
+          <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
+          <AssignmentFilter updateQueryParams={updateQueryParams} />
+          <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
         </div>
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.assignments, (
-          <div>
-            <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
-            <AssignmentFilter updateQueryParams={updateQueryParams} />
-            <AssignmentGradeFilter updateQueryParams={updateQueryParams} />
-          </div>
-        ))}
+      <Collapsible
+        title={formatMessage(messages.overallGrade)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <CourseGradeFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.overallGrade, (
-          <CourseGradeFilter updateQueryParams={updateQueryParams} />
-        ))}
+      <Collapsible
+        title={formatMessage(messages.studentGroups)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <StudentGroupsFilter updateQueryParams={updateQueryParams} />
+      </Collapsible>
 
-        {this.collapsibleGroup(messages.studentGroups, (
-          <StudentGroupsFilter updateQueryParams={updateQueryParams} />
-        ))}
-
-        {this.collapsibleGroup(messages.includeCourseTeamMembers, (
-          <Form.Checkbox
-            checked={this.state.includeCourseRoleMembers}
-            onChange={this.handleIncludeTeamMembersChange}
-          >
-            <FormattedMessage {...messages.includeCourseTeamMembers} />
-          </Form.Checkbox>
-        ))}
-      </>
-    );
-  }
-}
-GradebookFilters.defaultProps = {
-  includeCourseRoleMembers: false,
+      <Collapsible
+        title={formatMessage(messages.includeCourseTeamMembers)}
+        defaultOpen
+        className={collapsibleClassName}
+      >
+        <Form.Checkbox
+          checked={includeCourseTeamMembers.value}
+          onChange={includeCourseTeamMembers.handleChange}
+        >
+          {formatMessage(messages.includeCourseTeamMembers)}
+        </Form.Checkbox>
+      </Collapsible>
+    </>
+  );
 };
 GradebookFilters.propTypes = {
   updateQueryParams: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-  // redux
-  closeMenu: PropTypes.func.isRequired,
-  fetchGrades: PropTypes.func.isRequired,
-  includeCourseRoleMembers: PropTypes.bool,
-  updateIncludeCourseRoleMembers: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  includeCourseRoleMembers: selectors.filters.includeCourseRoleMembers(state),
-});
-
-export const mapDispatchToProps = {
-  closeMenu: thunkActions.app.filterMenu.close,
-  fetchGrades: thunkActions.grades.fetchGrades,
-  updateIncludeCourseRoleMembers: actions.filters.update.includeCourseRoleMembers,
-};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GradebookFilters));
+export default GradebookFilters;

src/components/GradebookFilters/index.test.jsx

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

src/components/GradebookFilters/messages.js

@@ -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__/index.test.jsx.snap

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

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

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

src/components/GradebookHeader/hooks.js

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

src/components/GradebookHeader/hooks.test.js

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

src/components/GradebookHeader/index.jsx

@@ -1,106 +1,50 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
-import { views } from 'data/constants/app';
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
+import { instructorDashboardUrl } from 'data/services/lms/urls';
+import useGradebookHeaderData from './hooks';
 import messages from './messages';
 
-export 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 => (
-    `${getConfig().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>{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,77 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { formatMessage } from 'testUtils';
+import { instructorDashboardUrl } from 'data/services/lms/urls';
+
+import useGradebookHeaderData from './hooks';
+import GradebookHeader from '.';
+
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+jest.mock('data/services/lms/urls', () => ({
+  instructorDashboardUrl: jest.fn(),
+}));
+
+instructorDashboardUrl.mockReturnValue('test-dashboard-url');
+
+const hookProps = {
+  areGradesFrozen: false,
+  canUserViewGradebook: true,
+  courseId: 'test-course-id',
+  handleToggleViewClick: jest.fn().mockName('hooks.handleToggleViewClick'),
+  showBulkManagement: false,
+  toggleViewMessage: { defaultMessage: 'toggle-view-message' },
+};
+useGradebookHeaderData.mockReturnValue(hookProps);
+
+let el;
+describe('GradebookHeader component', () => {
+  beforeAll(() => {
+    el = shallow(<GradebookHeader />);
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      expect(useGradebookHeaderData).toHaveBeenCalledWith();
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+  });
+  describe('render', () => {
+    describe('default view', () => {
+      test('shapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+    });
+    describe('show bulk management', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, showBulkManagement: true });
+        el = shallow(<GradebookHeader />);
+      });
+      test('snapshot: show toggle view message button with handleToggleViewClick method', () => {
+        expect(el).toMatchSnapshot();
+        const { onClick, children } = el.find(Button).props();
+        expect(onClick).toEqual(hookProps.handleToggleViewClick);
+        expect(children).toEqual(formatMessage(hookProps.toggleViewMessage));
+      });
+    });
+    describe('frozen grades', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, areGradesFrozen: true });
+        el = shallow(<GradebookHeader />);
+      });
+      test('snapshot: show frozen warning', () => {
+        expect(el).toMatchSnapshot();
+      });
+    });
+    describe('user cannot view gradebook', () => {
+      beforeEach(() => {
+        useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, canUserViewGradebook: false });
+        el = shallow(<GradebookHeader />);
+      });
+      test('snapshot: show unauthorized warning', () => {
+        expect(el).toMatchSnapshot();
+      });
+    });
+  });
+});

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);

src/components/GradesView/BulkManagementControls.test.jsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import { views } from 'data/constants/app';
-
-import {
-  BulkManagementControls,
-  mapStateToProps,
-  mapDispatchToProps,
-} from './BulkManagementControls';
-
-jest.mock('./ImportGradesButton', () => 'ImportGradesButton');
-jest.mock('components/NetworkButton', () => 'NetworkButton');
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    root: {
-      gradeExportUrl: (state) => ({ gradeExportUrl: state }),
-      interventionExportUrl: (state) => ({ interventionExportUrl: state }),
-      showBulkManagement: (state) => ({ showBulkManagement: state }),
-    },
-  },
-}));
-jest.mock('data/actions', () => ({
-  __esModule: true,
-  default: {
-    app: { setView: jest.fn() },
-    grades: {
-      downloadReport: {
-        bulkGrades: jest.fn(),
-        intervention: jest.fn(),
-      },
-    },
-  },
-}));
-
-describe('BulkManagementControls', () => {
-  describe('component', () => {
-    let el;
-    let props = {
-      gradeExportUrl: 'gradesGoHere',
-      interventionExportUrl: 'interventionsGoHere',
-    };
-    beforeEach(() => {
-      props = {
-        ...props,
-        downloadBulkGradesReport: jest.fn(),
-        downloadInterventionReport: jest.fn(),
-        setView: jest.fn(),
-      };
-    });
-    test('snapshot - empty if showBulkManagement is not truthy', () => {
-      expect(shallow(<BulkManagementControls {...props} />)).toEqual({});
-    });
-    describe('behavior', () => {
-      const oldWindowLocation = window.location;
-
-      beforeAll(() => {
-        delete window.location;
-        window.location = Object.defineProperties(
-          {},
-          {
-            ...Object.getOwnPropertyDescriptors(oldWindowLocation),
-            assign: {
-              configurable: true,
-              value: jest.fn(),
-            },
-          },
-        );
-      });
-      beforeEach(() => {
-        window.location.assign.mockReset();
-        el = shallow(<BulkManagementControls {...props} showBulkManagement />);
-      });
-      afterAll(() => {
-        // restore `window.location` to the `jsdom` `Location` object
-        window.location = oldWindowLocation;
-      });
-      describe('handleViewActivityLog', () => {
-        it('calls props.setView(views.bulkManagementHistory)', () => {
-          el.instance().handleViewActivityLog();
-          expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
-        });
-      });
-      describe('handleClickExportGrades', () => {
-        const assertions = [
-          'calls props.downloadBulkGradesReport',
-          'sets location to props.gradeExportUrl',
-        ];
-        it(assertions.join(' and '), () => {
-          el.instance().handleClickExportGrades();
-          expect(props.downloadBulkGradesReport).toHaveBeenCalled();
-          expect(window.location.assign).toHaveBeenCalledWith(props.gradeExportUrl);
-        });
-      });
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    let mapped;
-    const testState = { do: 'not', test: 'me' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('gradeExportUrl from root.gradeExportUrl', () => {
-      expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
-    });
-    test('showBulkManagement from root.showBulkManagement', () => {
-      expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
-      expect(
-        mapDispatchToProps.downloadBulkGradesReport,
-      ).toEqual(actions.grades.downloadReport.bulkGrades);
-    });
-    test('setView from actions.app.setView', () => {
-      expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
-    });
-  });
-});

src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementControls render snapshot - show - network and import buttons 1`] = `
+<div
+  className="d-flex"
+>
+  <NetworkButton
+    label={
+      Object {
+        "defaultMessage": "Download Grades",
+        "description": "A labeled button that allows an admin user to download course grades all at once (in bulk).",
+        "id": "gradebook.GradesView.BulkManagementControls.bulkManagementLabel",
+      }
+    }
+    onClick={[MockFunction]}
+  />
+  <ImportGradesButton />
+</div>
+`;

src/components/GradesView/BulkManagementControls/hooks.js

@@ -0,0 +1,18 @@
+import { actions, selectors } from 'data/redux/hooks';
+
+export const useBulkManagementControlsData = () => {
+  const gradeExportUrl = selectors.root.useGradeExportUrl();
+  const showBulkManagement = selectors.root.useShowBulkManagement();
+  const downloadBulkGradesReport = actions.grades.useDownloadBulkGradesReport();
+
+  const handleClickExportGrades = () => {
+    downloadBulkGradesReport();
+    window.location.assign(gradeExportUrl);
+  };
+
+  return {
+    show: showBulkManagement,
+    handleClickExportGrades,
+  };
+};
+export default useBulkManagementControlsData;

src/components/GradesView/BulkManagementControls/hooks.test.js

@@ -0,0 +1,72 @@
+import { actions, selectors } from 'data/redux/hooks';
+
+import useBulkManagementControlsData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  actions: {
+    grades: {
+      useDownloadBulkGradesReport: jest.fn(),
+    },
+  },
+  selectors: {
+    root: {
+      useGradeExportUrl: jest.fn(),
+      useShowBulkManagement: jest.fn(),
+    },
+  },
+}));
+
+const downloadBulkGrades = jest.fn();
+actions.grades.useDownloadBulkGradesReport.mockReturnValue(downloadBulkGrades);
+const gradeExportUrl = 'test-grade-export-url';
+selectors.root.useGradeExportUrl.mockReturnValue(gradeExportUrl);
+selectors.root.useShowBulkManagement.mockReturnValue(true);
+
+let hook;
+describe('useBulkManagementControlsData', () => {
+  const oldWindowLocation = window.location;
+  beforeAll(() => {
+    delete window.location;
+    window.location = Object.defineProperties(
+      {},
+      {
+        ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+        assign: { configurable: true, value: jest.fn() },
+      },
+    );
+  });
+  beforeEach(() => {
+    window.location.assign.mockReset();
+    hook = useBulkManagementControlsData();
+  });
+  afterAll(() => {
+    // restore `window.location` to the `jsdom` `Location` object
+    window.location = oldWindowLocation;
+  });
+  describe('initialization', () => {
+    it('initializes redux hooks', () => {
+      expect(selectors.root.useGradeExportUrl).toHaveBeenCalledWith();
+      expect(selectors.root.useShowBulkManagement).toHaveBeenCalledWith();
+      expect(actions.grades.useDownloadBulkGradesReport).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('forwards show from showBulkManagement', () => {
+      expect(hook.show).toEqual(true);
+      selectors.root.useShowBulkManagement.mockReturnValue(false);
+      hook = useBulkManagementControlsData();
+      expect(hook.show).toEqual(false);
+    });
+    describe('handleClickExportGrades', () => {
+      beforeEach(() => {
+        hook.handleClickExportGrades();
+      });
+      it('downloads bulk grades report', () => {
+        expect(downloadBulkGrades).toHaveBeenCalledWith();
+      });
+      it('sets window location to grade export url', () => {
+        expect(window.location.assign).toHaveBeenCalledWith(gradeExportUrl);
+      });
+    });
+  });
+});

src/components/GradesView/BulkManagementControls/index.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+
+import NetworkButton from 'components/NetworkButton';
+import ImportGradesButton from '../ImportGradesButton';
+
+import useBulkManagementControlsData from './hooks';
+import messages from './messages';
+
+/**
+ * <BulkManagementControls />
+ * Provides download buttons for Bulk Management and Intervention reports, only if
+ * showBulkManagement is set in redus.
+ */
+export const BulkManagementControls = () => {
+  const {
+    show,
+    handleClickExportGrades,
+  } = useBulkManagementControlsData();
+
+  if (!show) { return null; }
+  return (
+    <div className="d-flex">
+      <NetworkButton
+        label={messages.downloadGradesBtn}
+        onClick={handleClickExportGrades}
+      />
+      <ImportGradesButton />
+    </div>
+  );
+};
+
+export default BulkManagementControls;

src/components/GradesView/BulkManagementControls/index.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import useBulkManagementControlsData from './hooks';
+import BulkManagementControls from '.';
+
+jest.mock('../ImportGradesButton', () => 'ImportGradesButton');
+jest.mock('components/NetworkButton', () => 'NetworkButton');
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+  show: true,
+  handleClickExportGrades: jest.fn(),
+};
+useBulkManagementControlsData.mockReturnValue(hookProps);
+
+describe('BulkManagementControls', () => {
+  describe('behavior', () => {
+    shallow(<BulkManagementControls />);
+    expect(useBulkManagementControlsData).toHaveBeenCalledWith();
+  });
+  describe('render', () => {
+    test('snapshot - show - network and import buttons', () => {
+      expect(shallow(<BulkManagementControls />)).toMatchSnapshot();
+    });
+    test('snapshot - empty if show is not truthy', () => {
+      useBulkManagementControlsData.mockReturnValueOnce({ ...hookProps, show: false });
+      expect(shallow(<BulkManagementControls />).isEmptyRender()).toEqual(true);
+    });
+  });
+});

src/components/GradesView/EditModal/ModalHeaders.jsx

@@ -1,68 +1,53 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import selectors from 'data/selectors';
+import { StrictDict } from 'utils';
+import { selectors } from 'data/redux/hooks';
 
 import messages from './messages';
 import HistoryHeader from './HistoryHeader';
 
+export const HistoryKeys = StrictDict({
+  assignment: 'assignment',
+  student: 'student',
+  originalGrade: 'original-grade',
+  currentGrade: 'current-grade',
+});
+
 /**
  * <ModalHeaders />
  * Provides a list of HistoryHeaders for the student name, assignment,
  * original grade, and current override grade.
  */
-export const ModalHeaders = ({
-  modalState,
-  originalGrade,
-  currentGrade,
-}) => (
-  <div>
-    <HistoryHeader
-      id="assignment"
-      label={<FormattedMessage {...messages.assignmentHeader} />}
-      value={modalState.assignmentName}
-    />
-    <HistoryHeader
-      id="student"
-      label={<FormattedMessage {...messages.studentHeader} />}
-      value={modalState.updateUserName}
-    />
-    <HistoryHeader
-      id="original-grade"
-      label={<FormattedMessage {...messages.originalGradeHeader} />}
-      value={originalGrade}
-    />
-    <HistoryHeader
-      id="current-grade"
-      label={<FormattedMessage {...messages.currentGradeHeader} />}
-      value={currentGrade}
-    />
-  </div>
-);
-ModalHeaders.defaultProps = {
-  currentGrade: null,
-  originalGrade: null,
-};
-ModalHeaders.propTypes = {
-  // redux
-  currentGrade: PropTypes.number,
-  originalGrade: PropTypes.number,
-  modalState: PropTypes.shape({
-    assignmentName: PropTypes.string.isRequired,
-    updateUserName: PropTypes.string,
-  }).isRequired,
+export const ModalHeaders = () => {
+  const { assignmentName, updateUserName } = selectors.app.useModalData();
+  const { currentGrade, originalGrade } = selectors.grades.useGradeData();
+  const { formatMessage } = useIntl();
+  return (
+    <div>
+      <HistoryHeader
+        id={HistoryKeys.assignment}
+        label={formatMessage(messages.assignmentHeader)}
+        value={assignmentName}
+      />
+      <HistoryHeader
+        id={HistoryKeys.student}
+        label={formatMessage(messages.studentHeader)}
+        value={updateUserName}
+      />
+      <HistoryHeader
+        id={HistoryKeys.originalGrade}
+        label={formatMessage(messages.originalGradeHeader)}
+        value={originalGrade}
+      />
+      <HistoryHeader
+        id={HistoryKeys.currentGrade}
+        label={formatMessage(messages.currentGradeHeader)}
+        value={currentGrade}
+      />
+    </div>
+  );
 };
 
-export const mapStateToProps = (state) => ({
-  modalState: {
-    assignmentName: selectors.app.modalState.assignmentName(state),
-    updateUserName: selectors.app.modalState.updateUserName(state),
-  },
-  currentGrade: selectors.grades.gradeOverrideCurrentEarnedGradedOverride(state),
-  originalGrade: selectors.grades.gradeOriginalEarnedGraded(state),
-});
-
-export default connect(mapStateToProps)(ModalHeaders);
+export default ModalHeaders;

src/components/GradesView/EditModal/ModalHeaders.test.jsx

@@ -1,93 +1,84 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import selectors from 'data/selectors';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { selectors } from 'data/redux/hooks';
 
-import {
-  ModalHeaders,
-  mapStateToProps,
-} from './ModalHeaders';
+import { formatMessage } from 'testUtils';
+
+import HistoryHeader from './HistoryHeader';
+import ModalHeaders, { HistoryKeys } from './ModalHeaders';
+import messages from './messages';
 
 jest.mock('./HistoryHeader', () => 'HistoryHeader');
 
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    app: {
-      editUpdateData: jest.fn(state => ({ editUpdateData: state })),
-      modalState: {
-        assignmentName: jest.fn(state => ({ assignmentName: state })),
-        updateUserName: jest.fn(state => ({ updateUserName: state })),
-      },
-    },
-    grades: {
-      gradeOverrideCurrentEarnedGradedOverride: jest.fn(state => ({ currentGrade: state })),
-      gradeOriginalEarnedGraded: jest.fn(state => ({ originalGrade: state })),
-    },
+jest.mock('data/redux/hooks', () => ({
+  selectors: {
+    app: { useModalData: jest.fn() },
+    grades: { useGradeData: jest.fn() },
   },
 }));
-describe('ModalHeaders', () => {
-  let el;
-  const props = {
-    currentGrade: 2,
-    originalGrade: 20,
-    modalState: {
-      assignmentName: 'Qwerty',
-      updateUserName: 'Uiop',
-    },
-  };
 
-  describe('Component', () => {
-    describe('snapshots', () => {
-      beforeEach(() => {
-      });
-      describe('gradeOverrideHistoryError is and empty and open is true', () => {
-        test('modal open and StatusAlert showing', () => {
-          el = shallow(<ModalHeaders {...props} />);
-          expect(el).toMatchSnapshot();
-        });
-      });
-      describe('gradeOverrideHistoryError is empty and open is false', () => {
-        test('modal closed and StatusAlert closed', () => {
-          el = shallow(
-            <ModalHeaders {...props} open={false} gradeOverrideHistoryError="" />,
-          );
-          expect(el).toMatchSnapshot();
-        });
-      });
+const modalData = {
+  assignmentName: 'test-assignment-name',
+  updateUserName: 'test-user-name',
+};
+selectors.app.useModalData.mockReturnValue(modalData);
+const gradeData = {
+  currentGrade: 'test-current-grade',
+  originalGrade: 'test-original-grade',
+};
+selectors.grades.useGradeData.mockReturnValue(gradeData);
+
+let el;
+describe('ModalHeaders', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<ModalHeaders />);
+  });
+  describe('behavior', () => {
+    it('initializes intl', () => {
+      expect(useIntl).toHaveBeenCalled();
+    });
+    it('initializes redux hooks', () => {
+      expect(selectors.app.useModalData).toHaveBeenCalled();
+      expect(selectors.grades.useGradeData).toHaveBeenCalled();
     });
   });
-
-  describe('mapStateToProps', () => {
-    const testState = { he: 'lives in a', pineapple: 'under the sea' };
-    let mapped;
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
     });
-    describe('modalState', () => {
-      test('assignmentName from app.modalState.assignmentName', () => {
-        expect(
-          mapped.modalState.assignmentName,
-        ).toEqual(selectors.app.modalState.assignmentName(testState));
-      });
-      test('updateUserName from app.modalState.updateUserName', () => {
-        expect(
-          mapped.modalState.updateUserName,
-        ).toEqual(selectors.app.modalState.updateUserName(testState));
+    test('assignment header', () => {
+      const headerProps = el.find(HistoryHeader).at(0).props();
+      expect(headerProps).toMatchObject({
+        id: HistoryKeys.assignment,
+        label: formatMessage(messages.assignmentHeader),
+        value: modalData.assignmentName,
       });
     });
-    describe('originalGrade', () => {
-      test('from grades.gradeOverrideCurrentEarnedGradedOverride', () => {
-        expect(mapped.currentGrade).toEqual(
-          selectors.grades.gradeOverrideCurrentEarnedGradedOverride(testState),
-        );
+    test('student header', () => {
+      const headerProps = el.find(HistoryHeader).at(1).props();
+      expect(headerProps).toMatchObject({
+        id: HistoryKeys.student,
+        label: formatMessage(messages.studentHeader),
+        value: modalData.updateUserName,
       });
     });
-    describe('originalGrade', () => {
-      test('from grades.gradeOriginalEarnedGrades', () => {
-        expect(mapped.originalGrade).toEqual(
-          selectors.grades.gradeOriginalEarnedGraded(testState),
-        );
+    test('originalGrade header', () => {
+      const headerProps = el.find(HistoryHeader).at(2).props();
+      expect(headerProps).toMatchObject({
+        id: HistoryKeys.originalGrade,
+        label: formatMessage(messages.originalGradeHeader),
+        value: gradeData.originalGrade,
+      });
+    });
+    test('currentGrade header', () => {
+      const headerProps = el.find(HistoryHeader).at(3).props();
+      expect(headerProps).toMatchObject({
+        id: HistoryKeys.currentGrade,
+        label: formatMessage(messages.currentGradeHeader),
+        value: gradeData.currentGrade,
       });
     });
   });

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx

@@ -1,65 +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 { Form } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
-
-/**
- * <AdjustedGradeInput />
- * Input control for adjusting the grade of a unit
- * displays an "/ ${possibleGrade} if there is one in the data model.
- */
-export class AdjustedGradeInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange = ({ target }) => {
-    this.props.setModalState({ adjustedGradeValue: target.value });
-  };
-
-  render() {
-    return (
-      <span>
-        <Form.Control
-          type="text"
-          name="adjustedGradeValue"
-          value={this.props.value}
-          onChange={this.onChange}
-        />
-        {this.props.possibleGrade && ` ${isRtl(getLocale()) ? '\\' : '/'} ${this.props.possibleGrade}`}
-      </span>
-    );
-  }
-}
-AdjustedGradeInput.defaultProps = {
-  possibleGrade: null,
-};
-AdjustedGradeInput.propTypes = {
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]).isRequired,
-  possibleGrade: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  setModalState: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  possibleGrade: selectors.root.editModalPossibleGrade(state),
-  value: selectors.app.modalState.adjustedGradeValue(state),
-});
-
-export const mapDispatchToProps = {
-  setModalState: actions.app.setModalState,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AdjustedGradeInput);

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import {
-  AdjustedGradeInput,
-  mapStateToProps,
-  mapDispatchToProps,
-} from './AdjustedGradeInput';
-
-jest.mock('@edx/paragon', () => ({
-  Form: { Control: () => 'Form.Control' },
-}));
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    root: {
-      editModalPossibleGrade: jest.fn(state => ({ updateUserName: state })),
-    },
-    app: {
-      modalState: { adjustedGradeValue: jest.fn(state => ({ adjustedGradeValue: state })) },
-    },
-  },
-}));
-jest.mock('data/actions', () => ({
-  __esModule: true,
-  default: {
-    app: { setModalState: jest.fn() },
-  },
-}));
-describe('AdjustedGradeInput', () => {
-  let el;
-  let props = {
-    value: 1,
-    possibleGrade: 5,
-  };
-  beforeEach(() => {
-    props = {
-      ...props,
-      setModalState: jest.fn(),
-    };
-  });
-  describe('Component', () => {
-    beforeEach(() => {
-      el = shallow(<AdjustedGradeInput {...props} />);
-    });
-    describe('snapshots', () => {
-      test('displays input control and "out of possible grade" label', () => {
-        el.instance().onChange = jest.fn().mockName('this.onChange');
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-    describe('behavior', () => {
-      describe('onChange', () => {
-        it('calls props.setModalState event target value', () => {
-          const value = 42;
-          el.instance().onChange({ target: { value } });
-          expect(props.setModalState).toHaveBeenCalledWith({
-            adjustedGradeValue: value,
-          });
-        });
-      });
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    const testState = { like: 'no one', ever: 'was' };
-    let mapped;
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    describe('modalState', () => {
-      test('possibleGrade from root.editModalPossibleGrade', () => {
-        expect(
-          mapped.possibleGrade,
-        ).toEqual(selectors.root.editModalPossibleGrade(testState));
-      });
-      test('updateUserName from app.modalState.updateUserName', () => {
-        expect(
-          mapped.value,
-        ).toEqual(selectors.app.modalState.adjustedGradeValue(testState));
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('setModalState from actions.app.setModalState', () => {
-      expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
-    });
-  });
-});

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdjustedGradeInput component render snapshot 1`] = `
+<span>
+  <Form.Control
+    name="adjustedGradeValue"
+    onChange={[MockFunction hook.onChange]}
+    type="text"
+    value="test-value"
+  />
+  some-hint-text
+</span>
+`;

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.js

@@ -0,0 +1,21 @@
+import { actions, selectors } from 'data/redux/hooks';
+import { getLocalizedSlash } from 'i18n/utils';
+
+const useAdjustedGradeInputData = () => {
+  const possibleGrade = selectors.root.useEditModalPossibleGrade();
+  const value = selectors.app.useModalData().adjustedGradeValue;
+  const setModalState = actions.app.useSetModalState();
+  const hintText = possibleGrade && ` ${getLocalizedSlash()} ${possibleGrade}`;
+
+  const onChange = ({ target }) => {
+    setModalState({ adjustedGradeValue: target.value });
+  };
+
+  return {
+    value,
+    onChange,
+    hintText,
+  };
+};
+
+export default useAdjustedGradeInputData;

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.test.jsx

@@ -0,0 +1,67 @@
+import { getLocalizedSlash } from 'i18n/utils';
+import { actions, selectors } from 'data/redux/hooks';
+import useAdjustedGradeInputData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  selectors: {
+    root: {
+      useEditModalPossibleGrade: jest.fn(),
+    },
+    app: {
+      useModalData: jest.fn(),
+    },
+  },
+  actions: {
+    app: {
+      useSetModalState: jest.fn(),
+    },
+  },
+}));
+jest.mock('i18n/utils', () => ({ getLocalizedSlash: jest.fn() }));
+
+const localizedSlash = 'localized-slash';
+getLocalizedSlash.mockReturnValue(localizedSlash);
+
+const possibleGrade = 105;
+selectors.root.useEditModalPossibleGrade.mockReturnValue(possibleGrade);
+const modalData = { adjustedGradeValue: 70 };
+const setModalState = jest.fn();
+selectors.app.useModalData.mockReturnValue(modalData);
+actions.app.useSetModalState.mockReturnValue(setModalState);
+
+let out;
+describe('useAdjustedGradeInputData hook', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    out = useAdjustedGradeInputData();
+  });
+  describe('behavior', () => {
+    it('initializes redux hooks', () => {
+      expect(selectors.root.useEditModalPossibleGrade).toHaveBeenCalled();
+      expect(selectors.app.useModalData).toHaveBeenCalled();
+      expect(actions.app.useSetModalState).toHaveBeenCalled();
+    });
+  });
+  describe('output', () => {
+    it('forwards adjusted grade value as value from modal data', () => {
+      expect(out.value).toEqual(modalData.adjustedGradeValue);
+    });
+    describe('hintText', () => {
+      it('passes an undefined value if possibleGrade is not available', () => {
+        selectors.root.useEditModalPossibleGrade.mockReturnValueOnce(undefined);
+        out = useAdjustedGradeInputData();
+        expect(out.hintText).toEqual(undefined);
+      });
+      it('passes localized slash and possible grade if available', () => {
+        expect(out.hintText).toEqual(` ${localizedSlash} ${possibleGrade}`);
+      });
+    });
+    describe('onChange', () => {
+      it('sets modal state with event target value', () => {
+        const testValue = 'test-value';
+        out.onChange({ target: { value: testValue } });
+        expect(setModalState).toHaveBeenCalledWith({ adjustedGradeValue: testValue });
+      });
+    });
+  });
+});

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+
+import useAdjustedGradeInputData from './hooks';
+
+/**
+ * <AdjustedGradeInput />
+ * Input control for adjusting the grade of a unit
+ * displays an "/ ${possibleGrade} if there is one in the data model.
+ */
+export const AdjustedGradeInput = () => {
+  const {
+    value,
+    onChange,
+    hintText,
+  } = useAdjustedGradeInputData();
+  return (
+    <span>
+      <Form.Control
+        type="text"
+        name="adjustedGradeValue"
+        value={value}
+        onChange={onChange}
+      />
+      {hintText}
+    </span>
+  );
+};
+
+AdjustedGradeInput.propTypes = {};
+
+export default AdjustedGradeInput;

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Form } from '@edx/paragon';
+
+import useAdjustedGradeInputData from './hooks';
+import AdjustedGradeInput from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+  hintText: 'some-hint-text',
+  onChange: jest.fn().mockName('hook.onChange'),
+  value: 'test-value',
+};
+useAdjustedGradeInputData.mockReturnValue(hookProps);
+
+let el;
+describe('AdjustedGradeInput component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<AdjustedGradeInput />);
+  });
+  describe('behavior', () => {
+    it('initializes hook data', () => {
+      expect(useAdjustedGradeInputData).toHaveBeenCalled();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+      const control = el.find(Form.Control);
+      expect(control.props().value).toEqual(hookProps.value);
+      expect(control.props().onChange).toEqual(hookProps.onChange);
+      expect(el.contains(hookProps.hintText)).toEqual(true);
+    });
+  });
+});

src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Form } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-
-/**
- * <ReasonInput />
- * Input control for the "reason for change" field in the Edit modal.
- */
-export class ReasonInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.ref = React.createRef();
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    this.ref.current.focus();
-  }
-
-  onChange = (event) => {
-    this.props.setModalState({ reasonForChange: event.target.value });
-  };
-
-  render() {
-    return (
-      <Form.Control
-        type="text"
-        name="reasonForChange"
-        value={this.props.value}
-        onChange={this.onChange}
-        ref={this.ref}
-      />
-    );
-  }
-}
-ReasonInput.propTypes = {
-  // redux
-  setModalState: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  value: selectors.app.modalState.reasonForChange(state),
-});
-
-export const mapDispatchToProps = {
-  setModalState: actions.app.setModalState,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReasonInput);

src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import {
-  ReasonInput,
-  mapStateToProps,
-  mapDispatchToProps,
-} from './ReasonInput';
-
-jest.mock('@edx/paragon', () => ({
-  Form: { Control: () => 'Form.Control' },
-}));
-jest.mock('data/selectors', () => ({
-  __esModule: true,
-  default: {
-    app: {
-      modalState: { reasonForChange: jest.fn(state => ({ reasonForChange: state })) },
-    },
-  },
-}));
-jest.mock('data/actions', () => ({
-  __esModule: true,
-  default: {
-    app: { setModalState: jest.fn() },
-  },
-}));
-describe('ReasonInput', () => {
-  let el;
-  let props = {
-    value: 'did not answer the question',
-  };
-  beforeEach(() => {
-    props = {
-      ...props,
-      setModalState: jest.fn(),
-    };
-  });
-  describe('Component', () => {
-    beforeEach(() => {
-      el = shallow(<ReasonInput {...props} />, { disableLifecycleMethods: true });
-    });
-    describe('snapshots', () => {
-      test('displays reason for change input control', () => {
-        el.instance().onChange = jest.fn().mockName('this.onChange');
-        expect(el.instance().render()).toMatchSnapshot();
-      });
-    });
-    describe('behavior', () => {
-      describe('onChange', () => {
-        it('calls props.setModalState event target value', () => {
-          const value = 42;
-          el.instance().onChange({ target: { value } });
-          expect(props.setModalState).toHaveBeenCalledWith({
-            reasonForChange: value,
-          });
-        });
-      });
-      describe('componentDidMount', () => {
-        it('focuses the input ref', () => {
-          const focus = jest.fn();
-          expect(el.instance().ref).toEqual({ current: null });
-          el.instance().ref.current = { focus };
-          el.instance().componentDidMount();
-          expect(el.instance().ref.current.focus).toHaveBeenCalledWith();
-        });
-      });
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    const testState = { to: { catchThem: 'my real test', trainThem: 'my cause!' } };
-    let mapped;
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    describe('modalState', () => {
-      test('value from app.modalState.reasonForChange', () => {
-        expect(mapped.value).toEqual(selectors.app.modalState.reasonForChange(testState));
-      });
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('setModalState from actions.app.setModalState', () => {
-      expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
-    });
-  });
-});

src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReasonInput component render snapshot 1`] = `
+<Form.Control
+  data-testid="reason-input-control"
+  name="reasonForChange"
+  onChange={[MockFunction hook.onChange]}
+  type="text"
+  value="test-value"
+/>
+`;

src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { actions, selectors } from 'data/redux/hooks';
+
+const useReasonInputData = () => {
+  const ref = React.useRef();
+  const { reasonForChange } = selectors.app.useModalData();
+  const setModalState = actions.app.useSetModalState();
+
+  React.useEffect(() => {
+    ref.current.focus();
+  }, [ref]);
+
+  const onChange = (event) => {
+    setModalState({ reasonForChange: event.target.value });
+  };
+
+  return {
+    value: reasonForChange,
+    onChange,
+    ref,
+  };
+};
+
+export default useReasonInputData;

src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { actions, selectors } from 'data/redux/hooks';
+import useReasonInputData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+  selectors: {
+    app: {
+      useModalData: jest.fn(),
+    },
+  },
+  actions: {
+    app: {
+      useSetModalState: jest.fn(),
+    },
+  },
+}));
+
+const modalData = { reasonForChange: 'test-reason-for-change' };
+const setModalState = jest.fn();
+selectors.app.useModalData.mockReturnValue(modalData);
+actions.app.useSetModalState.mockReturnValue(setModalState);
+
+const ref = { current: { focus: jest.fn() }, useRef: true };
+React.useRef.mockReturnValue(ref);
+
+let out;
+describe('useReasonInputData hook', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    out = useReasonInputData();
+  });
+  describe('behavior', () => {
+    it('initializes ref', () => {
+      expect(React.useRef).toHaveBeenCalled();
+    });
+    it('initializes redux hooks', () => {
+      expect(selectors.app.useModalData).toHaveBeenCalled();
+      expect(actions.app.useSetModalState).toHaveBeenCalled();
+    });
+    it('focuses ref on load', () => {
+      const [[cb, prereqs]] = React.useEffect.mock.calls;
+      expect(prereqs).toEqual([ref]);
+      cb();
+      expect(ref.current.focus).toHaveBeenCalled();
+    });
+  });
+  describe('output', () => {
+    it('forwards reasonForChange as value from modal data', () => {
+      expect(out.value).toEqual(modalData.reasonForChange);
+    });
+    it('forwards ref', () => {
+      expect(out.ref).toEqual(ref);
+    });
+    describe('onChange', () => {
+      it('sets modal state with event target value', () => {
+        const testValue = 'test-value';
+        out.onChange({ target: { value: testValue } });
+        expect(setModalState).toHaveBeenCalledWith({ reasonForChange: testValue });
+      });
+    });
+  });
+});

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+
+import useReasonInputData from './hooks';
+
+export const controlTestId = 'reason-input-control';
+
+/**
+ * <ReasonInput />
+ * Input control for the "reason for change" field in the Edit modal.
+ */
+export const ReasonInput = () => {
+  const { ref, value, onChange } = useReasonInputData();
+  return (
+    <Form.Control
+      type="text"
+      name="reasonForChange"
+      data-testid={controlTestId}
+      {...{ value, onChange, ref }}
+    />
+  );
+};
+
+ReasonInput.propTypes = {};
+
+export default ReasonInput;

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Form } from '@edx/paragon';
+
+import useReasonInputData from './hooks';
+import ReasonInput from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+  ref: 'reason-input-ref',
+  onChange: jest.fn().mockName('hook.onChange'),
+  value: 'test-value',
+};
+useReasonInputData.mockReturnValue(hookProps);
+
+let el;
+describe('ReasonInput component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<ReasonInput />);
+  });
+  describe('behavior', () => {
+    it('initializes hook data', () => {
+      expect(useReasonInputData).toHaveBeenCalled();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+      const control = el.find(Form.Control);
+      expect(control.props().value).toEqual(hookProps.value);
+      expect(control.props().onChange).toEqual(hookProps.onChange);
+    });
+  });
+});

src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import useReasonInputData from './hooks';
+import ReasonInput, { controlTestId } from '.';
+
+jest.unmock('react');
+jest.unmock('@edx/paragon');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const focus = jest.fn();
+const props = {
+  value: 'test-value',
+  onChange: jest.fn(),
+  ref: { current: { focus }, useRef: jest.fn() },
+};
+useReasonInputData.mockReturnValue(props);
+
+let el;
+describe('ReasonInput ref', () => {
+  it('loads ref from hook', () => {
+    el = render(<ReasonInput />);
+    const control = el.getByTestId(controlTestId);
+    expect(control).toEqual(props.ref.current);
+  });
+});

src/components/GradesView/EditModal/OverrideTable/__snapshots__/AdjustedGradeInput.test.jsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AdjustedGradeInput Component snapshots displays input control and "out of possible grade" label 1`] = `
-<span>
-  <Control
-    name="adjustedGradeValue"
-    onChange={[MockFunction this.onChange]}
-    type="text"
-    value={1}
-  />
-   / 5
-</span>
-`;

src/components/GradesView/EditModal/OverrideTable/__snapshots__/ReasonInput.test.jsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReasonInput Component snapshots displays reason for change input control 1`] = `
-<Control
-  name="reasonForChange"
-  onChange={[MockFunction this.onChange]}
-  type="text"
-  value="did not answer the question"
-/>
-`;