chore: update package-lock to node 18

* Merge branch 'master' of github.com:edx/frontend-app-gradebook

* feat: upgraded to node v18, added .nvmrc and updated workflows

* build: updated frontend-build, frontend-platform, component-footer & component-header packages

* refactor: updated packages

* fix: resolved test case failure window redefine issue

* Merge branch 'master' of github.com:edx/frontend-app-gradebook into bilalqamar95/node-v18-upgrade

* refactor: pinned node to v18.15 in nvmrc

.env

@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+DISPLAY_FEEDBACK_WIDGET='true'

.env.development

@@ -39,3 +39,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

.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/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.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

.nvmrc

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

Makefile

@@ -4,6 +4,7 @@ npm-install-%: ## install specified % npm package
 export TRANSIFEX_RESOURCE = frontend-app-gradebook
 transifex_langs = "ar,de,es_419,fa_IR,fr,fr_CA,hi,it,pt,ru,uk,zh_CN"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -54,9 +55,23 @@ push_translations:
 	# Pushing comments to Transifex...
 	./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/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
+
+	$(intl_imports) frontend-component-header frontend-component-footer frontend-app-gradebook
+endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -28,10 +28,10 @@
     "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/brand": "npm:@edx/brand-openedx@^1.2.0",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-component-header": "^4.0.0",
+    "@edx/frontend-platform": "^4.2.0",
     "@edx/paragon": "^19.25.4",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
@@ -47,12 +47,11 @@
     "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-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",
@@ -68,7 +67,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "^12.4.15",
+    "@edx/frontend-build": "12.8.27",
     "@testing-library/react": "^12.1.0",
     "axios": "0.21.2",
     "axios-mock-adapter": "^1.17.0",
@@ -77,7 +76,7 @@
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "29.3.1",
+    "jest": "^26.6.3",
     "react-dev-utils": "^12.0.1",
     "react-test-renderer": "^16.10.1",
     "reactifex": "1.1.1",

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

@@ -16,7 +16,7 @@ exports[`GradebookFilters render snapshot 1`] = `
       className="p-1"
       iconAs="Icon"
       onClick={[MockFunction hook.closeMenu]}
-      src={[Function]}
+      src="Close"
     />
   </div>
   <Collapsible

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

@@ -7,7 +7,7 @@ import { Form } from '@edx/paragon';
 
 import selectors from 'data/selectors';
 import actions from 'data/actions';
-import { getLocalizedSlash } from 'i18n';
+import { getLocalizedSlash } from 'i18n/utils';
 
 /**
  * <AdjustedGradeInput />

src/components/GradesView/GradebookTable/Fields.jsx

@@ -29,16 +29,16 @@ Username.propTypes = {
 };
 
 /**
- * Fields.Email
- * Simple label field for email value.
- * @param {string} email - email for display
+ * Fields.Text
+ * Simple label field for text value.
+ * @param {string} value - value for display
  */
-const Email = ({ email }) => <span className="wrap-text-in-cell">{email}</span>;
-Email.propTypes = {
-  email: PropTypes.string.isRequired,
+const Text = ({ value }) => (<span className="wrap-text-in-cell">{value}</span>);
+Text.propTypes = {
+  value: PropTypes.string.isRequired,
 };
 
 export default StrictDict({
-  Email,
+  Text,
   Username,
 });

src/components/GradesView/GradebookTable/Fields.test.jsx

@@ -41,13 +41,13 @@ describe('Gradebook Table Fields', () => {
     });
   });
 
-  describe('Email', () => {
-    const email = 'myTag@place.com';
+  describe('Text', () => {
+    const value = 'myTag@place.com';
     test('snapshot', () => {
-      expect(shallow(<Fields.Email email={email} />)).toMatchSnapshot();
+      expect(shallow(<Fields.Text value={value} />)).toMatchSnapshot();
     });
-    test('wraps entry email', () => {
-      expect(shallow(<Fields.Email email={email} />).text()).toEqual(email);
+    test('wraps entry value', () => {
+      expect(shallow(<Fields.Text value={value} />).text()).toEqual(value);
     });
   });
 });

src/components/GradesView/GradebookTable/LabelReplacements.jsx

@@ -45,6 +45,13 @@ const TotalGradeLabelReplacement = () => (
   </div>
 );
 
+/**
+ * Asterisk to display next to heading labels that are only used for masters students
+ */
+const mastersOnlyFieldAsterisk = (
+  <span className="font-weight-normal">*</span>
+);
+
 /**
  * <UsernameLabelReplacement />
  * Username column header.  Lists that Student Key is possibly available
@@ -56,11 +63,24 @@ const UsernameLabelReplacement = () => (
     </div>
     <div className="font-weight-normal student-key">
       <FormattedMessage {...messages.studentKeyLabel} />
+      { mastersOnlyFieldAsterisk }
     </div>
   </div>
 );
 
+/**
+ * <MastersOnlyLabelReplacement {message}>
+ * Column header for fields that are only available for masters students
+ */
+const MastersOnlyLabelReplacement = (message) => (
+  <div>
+    <FormattedMessage {...message} />
+    { mastersOnlyFieldAsterisk }
+  </div>
+);
+
 export default StrictDict({
   TotalGradeLabelReplacement,
   UsernameLabelReplacement,
+  MastersOnlyLabelReplacement,
 });

src/components/GradesView/GradebookTable/LabelReplacements.test.jsx

@@ -9,6 +9,7 @@ import LabelReplacements from './LabelReplacements';
 const {
   TotalGradeLabelReplacement,
   UsernameLabelReplacement,
+  MastersOnlyLabelReplacement,
 } = LabelReplacements;
 
 jest.mock('@edx/paragon', () => ({
@@ -35,6 +36,16 @@ describe('LabelReplacements', () => {
       expect(shallow(<UsernameLabelReplacement />)).toMatchSnapshot();
     });
   });
+  describe('MastersOnlyLabelReplacement', () => {
+    test('snapshot', () => {
+      const message = {
+        id: 'id',
+        defaultMessage: 'defaultMessAge',
+        description: 'desCripTion',
+      };
+      expect(shallow(<MastersOnlyLabelReplacement {...message} />)).toMatchSnapshot();
+    });
+  });
 });
 
 describe('snapshot', () => {

src/components/GradesView/GradebookTable/__snapshots__/Fields.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Gradebook Table Fields Email snapshot 1`] = `
+exports[`Gradebook Table Fields Text snapshot 1`] = `
 <span
   className="wrap-text-in-cell"
 >

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`LabelReplacements MastersOnlyLabelReplacement snapshot 1`] = `
+<div>
+  <FormattedMessage
+    defaultMessage="defaultMessAge"
+    description="desCripTion"
+    id="id"
+  />
+  <span
+    className="font-weight-normal"
+  >
+    *
+  </span>
+</div>
+`;
+
 exports[`LabelReplacements TotalGradeLabelReplacement displays overlay tooltip 1`] = `
 <Tooltip
   id="course-grade-tooltip"
@@ -73,10 +88,15 @@ exports[`LabelReplacements UsernameLabelReplacement snapshot 1`] = `
     className="font-weight-normal student-key"
   >
     <FormattedMessage
-      defaultMessage="Student Key*"
+      defaultMessage="Student Key"
       description="Gradebook table Student Key label"
       id="gradebook.GradesView.table.labels.studentKey"
     />
+    <span
+      className="font-weight-normal"
+    >
+      *
+    </span>
   </div>
 </div>
 `;

src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap

@@ -13,8 +13,16 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
           "accessor": "Username",
         },
         Object {
-          "Header": <FormattedMessage
-            defaultMessage="Email*"
+          "Header": <MastersOnlyLabelReplacement
+            defaultMessage="Full Name"
+            description="Gradebook table full name column header"
+            id="gradebook.GradesView.table.headings.fullName"
+          />,
+          "accessor": "Full Name",
+        },
+        Object {
+          "Header": <MastersOnlyLabelReplacement
+            defaultMessage="Email"
             description="Gradebook table email column header"
             id="gradebook.GradesView.table.headings.email"
           />,

src/components/GradesView/GradebookTable/index.jsx

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { DataTable } from '@edx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
-import { getLocalizedPercentSign } from 'i18n';
+import { getLocalizedPercentSign } from 'i18n/utils';
 
 import messages from './messages';
 import Fields from './Fields';
@@ -38,7 +38,9 @@ export class GradebookTable extends React.Component {
     } else if (heading === Headings.username) {
       label = <LabelReplacements.UsernameLabelReplacement />;
     } else if (heading === Headings.email) {
-      label = <FormattedMessage {...messages.emailHeading} />;
+      label = <LabelReplacements.MastersOnlyLabelReplacement {...messages.emailHeading} />;
+    } else if (heading === Headings.fullName) {
+      label = <LabelReplacements.MastersOnlyLabelReplacement {...messages.fullNameHeading} />;
     } else {
       label = heading;
     }
@@ -49,7 +51,8 @@ export class GradebookTable extends React.Component {
     [Headings.username]: (
       <Fields.Username username={entry.username} userKey={entry.external_user_key} />
     ),
-    [Headings.email]: (<Fields.Email email={entry.email} />),
+    [Headings.fullName]: (<Fields.Text value={entry.full_name} />),
+    [Headings.email]: (<Fields.Text value={entry.email} />),
     [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${getLocalizedPercentSign()}`,
     ...entry.section_breakdown.reduce((acc, subsection) => ({
       ...acc,

src/components/GradesView/GradebookTable/messages.js

@@ -1,9 +1,14 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  fullNameHeading: {
+    id: 'gradebook.GradesView.table.headings.fullName',
+    defaultMessage: 'Full Name',
+    description: 'Gradebook table full name column header',
+  },
   emailHeading: {
     id: 'gradebook.GradesView.table.headings.email',
-    defaultMessage: 'Email*',
+    defaultMessage: 'Email',
     description: 'Gradebook table email column header',
   },
   totalGradeHeading: {
@@ -18,7 +23,7 @@ const messages = defineMessages({
   },
   studentKeyLabel: {
     id: 'gradebook.GradesView.table.labels.studentKey',
-    defaultMessage: 'Student Key*',
+    defaultMessage: 'Student Key',
     description: 'Gradebook table Student Key label',
   },
   usernameLabel: {

src/components/GradesView/GradebookTable/test.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { DataTable } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
@@ -22,7 +21,7 @@ jest.mock('./Fields', () => ({
   __esModule: true,
   default: {
     Username: () => 'Fields.Username',
-    Email: () => 'Fields.Email',
+    Text: () => 'Fields.Text',
   },
 }));
 jest.mock('./LabelReplacements', () => ({
@@ -30,6 +29,7 @@ jest.mock('./LabelReplacements', () => ({
   default: {
     TotalGradeLabelReplacement: () => 'TotalGradeLabelReplacement',
     UsernameLabelReplacement: () => 'UsernameLabelReplacement',
+    MastersOnlyLabelReplacement: () => 'MastersOnlyLabelReplacement',
   },
 }));
 jest.mock('./GradeButton', () => 'GradeButton');
@@ -75,6 +75,7 @@ describe('GradebookTable', () => {
       ],
       headings: [
         Headings.username,
+        Headings.fullName,
         Headings.email,
         fields.field1,
         fields.field2,
@@ -104,17 +105,22 @@ describe('GradebookTable', () => {
         expect(heading.accessor).toEqual(Headings.username);
         expect(heading.Header.type).toEqual(LabelReplacements.UsernameLabelReplacement);
       });
-      test('email sets key and Header from header', () => {
+      test('full name sets key and Header from header', () => {
         const heading = headings[1];
+        expect(heading.accessor).toEqual(Headings.fullName);
+        expect(heading.Header).toEqual(<LabelReplacements.MastersOnlyLabelReplacement {...messages.fullNameHeading} />);
+      });
+      test('email sets key and Header from header', () => {
+        const heading = headings[2];
         expect(heading.accessor).toEqual(Headings.email);
-        expect(heading.Header).toEqual(<FormattedMessage {...messages.emailHeading} />);
+        expect(heading.Header).toEqual(<LabelReplacements.MastersOnlyLabelReplacement {...messages.emailHeading} />);
       });
       test('subsections set key and Header from header', () => {
-        expect(headings[2]).toEqual({ accessor: fields.field1, Header: fields.field1 });
-        expect(headings[3]).toEqual({ accessor: fields.field2, Header: fields.field2 });
+        expect(headings[3]).toEqual({ accessor: fields.field1, Header: fields.field1 });
+        expect(headings[4]).toEqual({ accessor: fields.field2, Header: fields.field2 });
       });
       test('totalGrade sets key and replaces Header with component', () => {
-        const heading = headings[4];
+        const heading = headings[5];
         expect(heading.accessor).toEqual(Headings.totalGrade);
         expect(heading.Header.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
       });
@@ -139,10 +145,15 @@ describe('GradebookTable', () => {
             userKey: entry.external_user_key,
           });
         });
-        test('email set to Email Field', () => {
+        test('fullName set to Text Field', () => {
+          const field = row[Headings.fullName];
+          expect(field.type).toEqual(Fields.Text);
+          expect(field.props).toEqual({ value: entry.full_name });
+        });
+        test('email set to Text Field', () => {
           const field = row[Headings.email];
-          expect(field.type).toEqual(Fields.Email);
-          expect(field.props).toEqual({ email: entry.email });
+          expect(field.type).toEqual(Fields.Text);
+          expect(field.props).toEqual({ value: entry.email });
         });
         test('totalGrade set to rounded percent grade * 100', () => {
           expect(

src/components/GradesView/ImportGradesButton/hooks.js

@@ -6,11 +6,10 @@ export const useImportButtonData = () => {
   const submitImportGradesButtonData = thunkActions.grades.useSubmitImportGradesButtonData();
 
   const fileInputRef = useRef();
-  const hasFile = fileInputRef.current && fileInputRef.current.files[0];
 
-  const handleClickImportGrades = () => hasFile && fileInputRef.current.click();
+  const handleClickImportGrades = () => fileInputRef.current?.click();
   const handleFileInputChange = () => {
-    if (hasFile) {
+    if (fileInputRef.current?.files[0]) {
       const clearInput = () => {
         fileInputRef.current.value = null;
       };

src/data/constants/grades.js

@@ -3,6 +3,7 @@ import { StrictDict } from 'utils';
 const EMAIL_HEADING = 'Email';
 const TOTAL_COURSE_GRADE_HEADING = 'Total Grade (%)';
 const USERNAME_HEADING = 'Username';
+const FULL_NAME_HEADING = 'Full Name';
 
 const GradeFormats = StrictDict({
   absolute: 'absolute',
@@ -10,15 +11,17 @@ const GradeFormats = StrictDict({
 });
 
 const Headings = StrictDict({
-  email: 'Email',
-  totalGrade: 'Total Grade (%)',
-  username: 'Username',
+  email: EMAIL_HEADING,
+  totalGrade: TOTAL_COURSE_GRADE_HEADING,
+  username: USERNAME_HEADING,
+  fullName: FULL_NAME_HEADING,
 });
 
 export {
   EMAIL_HEADING,
   TOTAL_COURSE_GRADE_HEADING,
   USERNAME_HEADING,
+  FULL_NAME_HEADING,
   GradeFormats,
   Headings,
 };

src/data/redux/hooks/actions.js

@@ -4,6 +4,11 @@ import { actionHook } from './utils';
 
 const app = StrictDict({
   useSetLocalFilter: actionHook(actions.app.setLocalFilter),
+  useSetSearchValue: actionHook(actions.app.setSearchValue),
+  useSetShowImportSuccessToast: actionHook(actions.app.setShowImportSuccessToast),
+  useSetView: actionHook(actions.app.setView),
+  useCloseModal: actionHook(actions.app.closeModal),
+  useSetModalState: actionHook(actions.app.setModalState),
 });
 
 const filters = StrictDict({
@@ -14,9 +19,19 @@ const filters = StrictDict({
   useUpdateCourseGradeLimits: actionHook(actions.filters.update.courseGradeLimits),
   useUpdateIncludeCourseRoleMembers: actionHook(actions.filters.update.includeCourseRoleMembers),
   useUpdateTrack: actionHook(actions.filters.update.track),
+  useResetFilters: actionHook(actions.filters.reset),
+});
+
+const grades = StrictDict({
+  useDoneViewingAssignment: actionHook(actions.grades.doneViewingAssignment),
+  useDownloadBulkGradesReport: actionHook(actions.grades.downloadReport.bulkGrades),
+  useDownloadInterventionReport: actionHook(actions.grades.downloadReport.intervention),
+  useToggleGradeFormat: actionHook(actions.grades.toggleGradeFormat),
+  useCloseBanner: actionHook(actions.grades.banner.close),
 });
 
 export default StrictDict({
   app,
   filters,
+  grades,
 });

src/data/redux/hooks/actions.test.js

@@ -4,17 +4,6 @@ import actions from 'data/actions';
 import { actionHook } from './utils';
 import actionHooks from './actions';
 
-jest.mock('data/actions', () => ({
-  app: {
-    setLocalFilter: jest.fn(),
-  },
-  filters: {
-    update: {
-      assignment: jest.fn(),
-      assignmentLimits: jest.fn(),
-    },
-  },
-}));
 jest.mock('./utils', () => ({
   actionHook: (action) => ({ actionHook: action }),
 }));
@@ -24,6 +13,7 @@ let hooks;
 const testActionHook = (hookKey, action) => {
   test(hookKey, () => {
     expect(hooks[hookKey]).toEqual(actionHook(action));
+    expect(hooks[hookKey]).not.toEqual(undefined);
   });
 };
 
@@ -32,6 +22,11 @@ describe('action hooks', () => {
     const hookKeys = keyStore(actionHooks.app);
     beforeEach(() => { hooks = actionHooks.app; });
     testActionHook(hookKeys.useSetLocalFilter, actions.app.setLocalFilter);
+    testActionHook(hookKeys.useSetSearchValue, actions.app.setSearchValue);
+    testActionHook(hookKeys.useSetShowImportSuccessToast, actions.app.setShowImportSuccessToast);
+    testActionHook(hookKeys.useSetView, actions.app.setView);
+    testActionHook(hookKeys.useCloseModal, actions.app.closeModal);
+    testActionHook(hookKeys.useSetModalState, actions.app.setModalState);
   });
   describe('filters', () => {
     const hookKeys = keyStore(actionHooks.filters);
@@ -39,12 +34,23 @@ describe('action hooks', () => {
     beforeEach(() => { hooks = actionHooks.filters; });
     testActionHook(hookKeys.useUpdateAssignment, actionGroup.assignment);
     testActionHook(hookKeys.useUpdateAssignmentLimits, actionGroup.assignmentLimits);
-    testActionHook(hookKeys.useUpdateCohort, actionGroup.updateCohort);
+    testActionHook(hookKeys.useUpdateAssignmentType, actionGroup.assignmentType);
+    testActionHook(hookKeys.useUpdateCohort, actionGroup.cohort);
     testActionHook(hookKeys.useUpdateCourseGradeLimits, actionGroup.courseGradeLimits);
     testActionHook(
       hookKeys.useUpdateIncludeCourseRoleMembers,
-      actionGroup.updateIncludeCourseRoleMembers,
+      actionGroup.includeCourseRoleMembers,
     );
-    testActionHook(hookKeys.useUpdateTrack, actionGroup.updateTrack);
+    testActionHook(hookKeys.useResetFilters, actions.filters.reset);
+  });
+  describe('grades', () => {
+    const hookKeys = keyStore(actionHooks.grades);
+    const actionGroup = actions.grades;
+    beforeEach(() => { hooks = actionHooks.grades; });
+    testActionHook(hookKeys.useDoneViewingAssignment, actionGroup.doneViewingAssignment);
+    testActionHook(hookKeys.useDownloadBulkGradesReport, actionGroup.downloadReport.bulkGrades);
+    testActionHook(hookKeys.useDownloadInterventionReport, actionGroup.downloadReport.intervention);
+    testActionHook(hookKeys.useToggleGradeFormat, actionGroup.toggleGradeFormat);
+    testActionHook(hookKeys.useCloseBanner, actionGroup.banner.close);
   });
 });

src/data/redux/hooks/selectors.js

@@ -3,40 +3,75 @@ import { useSelector } from 'react-redux';
 import { StrictDict } from 'utils';
 import selectors from 'data/selectors';
 
+const selectorHook = (selector) => () => useSelector(selector);
+
 export const root = StrictDict({
-  useGradeExportUrl: () => useSelector(selectors.root.gradeExportUrl),
-  useSelectedCohortEntry: () => useSelector(selectors.root.selectedCohortEntry),
-  useSelectedTrackEntry: () => useSelector(selectors.root.selectedTrackEntry),
+  useEditModalPossibleGrade: selectorHook(selectors.root.editModalPossibleGrade),
+  useGetHeadings: selectorHook(selectors.root.getHeadings),
+  useGradeExportUrl: selectorHook(selectors.root.gradeExportUrl),
+  useInterventionExportUrl: selectorHook(selectors.root.interventionExportUrl),
+  useSelectedCohortEntry: selectorHook(selectors.root.selectedCohortEntry),
+  useSelectedTrackEntry: selectorHook(selectors.root.selectedTrackEntry),
+  useShouldShowSpinner: selectorHook(selectors.root.shouldShowSpinner),
+  useShowBulkManagement: selectorHook(selectors.root.showBulkManagement),
+  useFilterBadgeConfig: (filterName) => useSelector(
+    (state) => selectors.root.filterBadgeConfig(state, filterName),
+  ),
 });
 
 export const app = StrictDict({
-  useAssignmentGradeLimits: () => useSelector(selectors.app.assignmentGradeLimits),
-  useAreCourseGradeFiltersValid: () => useSelector(selectors.app.areCourseGradeFiltersValid),
-  useCourseGradeLimits: () => useSelector(selectors.app.courseGradeLimits),
+  useActiveView: selectorHook(selectors.app.activeView),
+  useAssignmentGradeLimits: selectorHook(selectors.app.assignmentGradeLimits),
+  useAreCourseGradeFiltersValid: selectorHook(selectors.app.areCourseGradeFiltersValid),
+  useCourseGradeLimits: selectorHook(selectors.app.courseGradeLimits),
+  useCourseGradeFilterValidity: selectorHook(selectors.app.courseGradeFilterValidity),
+  useCourseId: selectorHook(selectors.app.courseId),
+  useModalData: selectorHook(selectors.app.modalData),
+  useSearchValue: selectorHook(selectors.app.searchValue),
+  useShowImportSuccessToast: selectorHook(selectors.app.showImportSuccessToast),
 });
 
 export const assignmentTypes = StrictDict({
-  useAllAssignmentTypes: () => useSelector(selectors.assignmentTypes.allAssignmentTypes),
+  useAllAssignmentTypes: selectorHook(selectors.assignmentTypes.allAssignmentTypes),
+  useAreGradesFrozen: selectorHook(selectors.assignmentTypes.areGradesFrozen),
 });
 
 export const cohorts = StrictDict({
-  useAllCohorts: () => useSelector(selectors.cohorts.allCohorts),
+  useAllCohorts: selectorHook(selectors.cohorts.allCohorts),
   // maybe not needed?
-  useCohortsByName: () => useSelector(selectors.cohorts.cohortsByName),
+  useCohortsByName: selectorHook(selectors.cohorts.cohortsByName),
 });
 
 export const filters = StrictDict({
-  useData: () => useSelector(selectors.filters.allFilters),
-  useIncludeCourseRoleMembers: () => useSelector(selectors.filters.includeCourseRoleMembers),
-  useSelectableAssignmentLabels: () => useSelector(selectors.filters.selectableAssignmentLabels),
-  useSelectedAssignmentLabel: () => useSelector(selectors.filters.selectedAssignmentLabel),
-  useAssignmentType: () => useSelector(selectors.filters.assignmentType),
+  useData: selectorHook(selectors.filters.allFilters),
+  useIncludeCourseRoleMembers: selectorHook(selectors.filters.includeCourseRoleMembers),
+  useSelectableAssignmentLabels: selectorHook(selectors.filters.selectableAssignmentLabels),
+  useSelectedAssignmentLabel: selectorHook(selectors.filters.selectedAssignmentLabel),
+  useAssignmentType: selectorHook(selectors.filters.assignmentType),
+});
+
+export const grades = StrictDict({
+  useAllGrades: selectorHook(selectors.grades.allGrades),
+  useUserCounts: () => ({
+    filteredUsersCount: useSelector(selectors.grades.filteredUsersCount),
+    totalUsersCount: useSelector(selectors.grades.totalUsersCount),
+  }),
+  useGradeData: selectorHook(selectors.grades.gradeData),
+  useHasOverrideErrors: selectorHook(selectors.grades.hasOverrideErrors),
+  useShowSuccess: selectorHook(selectors.grades.showSuccess),
+  useSubsectionGrade: ({ gradeFormat, subsection }) => () => (
+    selectors.grades.subsectionGrade[gradeFormat](subsection)
+  ),
+});
+
+export const roles = StrictDict({
+  useCanUserViewGradebook: selectorHook(selectors.roles.canUserViewGradebook),
 });
 
 export const tracks = StrictDict({
-  useAllTracks: () => useSelector(selectors.tracks.allTracks),
+  useAllTracks: selectorHook(selectors.tracks.allTracks),
   // maybe not needed?
-  useTracksByName: () => useSelector(selectors.tracks.tracksByName),
+  useTracksByName: selectorHook(selectors.tracks.tracksByName),
 });
 
 export default StrictDict({
@@ -44,6 +79,8 @@ export default StrictDict({
   assignmentTypes,
   cohorts,
   filters,
+  grades,
+  roles,
   tracks,
   root,
 });

src/data/redux/hooks/selectors.test.js

@@ -7,85 +7,102 @@ jest.mock('react-redux', () => ({
   useSelector: (selector) => ({ useSelector: selector }),
 }));
 
-jest.mock('data/selectors', () => ({
-  app: {
-    assignmentGradeLimits: jest.fn(),
-    areCourseGradeFiltersValid: jest.fn(),
-    courseGradelimits: jest.fn(),
-  },
-  assignmentTypes: { allAssignmentTypes: jest.fn() },
-  cohorts: {
-    allCohorts: jest.fn(),
-    cohortsByName: jest.fn(),
-  },
-  filters: {
-    allFilters: jest.fn(),
-    includeCourseRoleMembers: jest.fn(),
-    selectableAssignmentLabels: jest.fn(),
-    selectedAssignmentLabel: jest.fn(),
-    assignmentType: jest.fn(),
-  },
-  tracks: {
-    allTracks: jest.fn(),
-    tracksByName: jest.fn(),
-  },
-  root: {
-    gradeExportUrl: jest.fn(),
-    selectedCohortEntry: jest.fn(),
-    selectedTrackEntry: jest.fn(),
-  },
-}));
+const testValue = 'test-value';
+const testState = { test: 'state value' };
 
+let hookKeys;
 let hooks;
-const testHook = (hookKey, selector) => {
-  test(hookKey, () => {
-    expect(hooks[hookKey]()).toEqual(useSelector(selector));
+let selKeys;
+let selectorGroup;
+
+const loadSelectorGroup = (hookGroup, selGroup) => {
+  hookKeys = keyStore(hookGroup);
+  selKeys = keyStore(selGroup);
+  beforeEach(() => {
+    hooks = hookGroup;
+    selectorGroup = selGroup;
   });
 };
+
+const testHook = (hookKey, selectorKey) => {
+  test(hookKey, () => {
+    expect(hooks[hookKey]()).toEqual(useSelector(selectorGroup[selectorKey]));
+  });
+};
+
 describe('selector hooks', () => {
   describe('root selectors', () => {
-    const hookKeys = keyStore(selectorHooks.root);
-    beforeEach(() => { hooks = selectorHooks.root; });
-    testHook(hookKeys.useGradeExportUrl, selectors.root.gradeExportUrl);
-    testHook(hookKeys.useSelectedCohortEntry, selectors.root.selectedCohortEntry);
-    testHook(hookKeys.useSelectedTrackEntry, selectors.root.selectedTrackEntry);
+    loadSelectorGroup(selectorHooks.root, selectors.root);
+    testHook(hookKeys.useEditModalPossibleGrade, selKeys.editModalPossibleGrade);
+    testHook(hookKeys.useGetHeadings, selKeys.getHeadings);
+    testHook(hookKeys.useGradeExportUrl, selKeys.gradeExportUrl);
+    testHook(hookKeys.useInterventionExportUrl, selKeys.interventionExportUrl);
+    testHook(hookKeys.useSelectedCohortEntry, selKeys.selectedCohortEntry);
+    testHook(hookKeys.useSelectedTrackEntry, selKeys.selectedTrackEntry);
+    testHook(hookKeys.useShouldShowSpinner, selKeys.shouldShowSpinner);
+    testHook(hookKeys.useShowBulkManagement, selKeys.showBulkManagement);
+    describe(hookKeys.useFilterBadgeConfig, () => {
+      test('calls filterBadgeConfig selector with passed filterName', () => {
+        const filterBadgeConfig = (state, filterName) => ({
+          filterBadgeConfig: { state, filterName },
+        });
+        const rootKeys = keyStore(selectors.root);
+        jest.spyOn(selectors.root, rootKeys.filterBadgeConfig)
+          .mockImplementation(filterBadgeConfig);
+        const out = hooks.useFilterBadgeConfig(testValue);
+        expect(out.useSelector(testState)).toEqual(filterBadgeConfig(testState, testValue));
+      });
+    });
   });
   describe('app', () => {
-    const hookKeys = keyStore(selectorHooks.app);
-    const selGroup = selectors.app;
-    beforeEach(() => { hooks = selectorHooks.app; });
-    testHook(hookKeys.useAssignmentGradeLimits, selGroup.assignmentGradeLimits);
-    testHook(hookKeys.useAreCourseGradeFiltersValid, selGroup.areCourseGradeFiltersValid);
-    testHook(hookKeys.useCourseGradeLimits, selGroup.courseGradeLimits);
+    loadSelectorGroup(selectorHooks.app, selectors.app);
+    testHook(hookKeys.useActiveView, selKeys.activeView);
+    testHook(hookKeys.useAssignmentGradeLimits, selKeys.assignmentGradeLimits);
+    testHook(hookKeys.useAreCourseGradeFiltersValid, selKeys.areCourseGradeFiltersValid);
+    testHook(hookKeys.useCourseGradeLimits, selKeys.courseGradeLimits);
+    testHook(hookKeys.useCourseId, selKeys.courseId);
+    testHook(hookKeys.useModalData, selKeys.modalData);
+    testHook(hookKeys.useSearchValue, selKeys.searchValue);
+    testHook(hookKeys.useShowImportSuccessToast, selKeys.showImportSuccessToast);
   });
   describe('assignmentTypes', () => {
-    const hookKeys = keyStore(selectorHooks.assignmentTypes);
-    const selGroup = selectors.assignmentTypes;
-    beforeEach(() => { hooks = selectorHooks.assignmentTypes; });
-    testHook(hookKeys.useAllAssignmentTypes, selGroup.allAssignmentTypes);
+    loadSelectorGroup(selectorHooks.assignmentTypes, selectors.assignmentTypes);
+    testHook(hookKeys.useAllAssignmentTypes, selKeys.allAssignmentTypes);
+    testHook(hookKeys.useAreGradesFrozen, selKeys.areGradesFrozen);
   });
   describe('cohorts', () => {
-    const hookKeys = keyStore(selectorHooks.cohorts);
-    const selGroup = selectors.cohorts;
-    beforeEach(() => { hooks = selectorHooks.cohorts; });
-    testHook(hookKeys.useAllCohorts, selGroup.allCohorts);
-    testHook(hookKeys.useCohortsByName, selGroup.cohortsByName);
+    loadSelectorGroup(selectorHooks.cohorts, selectors.cohorts);
+    testHook(hookKeys.useAllCohorts, selKeys.allCohorts);
+    testHook(hookKeys.useCohortsByName, selKeys.cohortsByName);
   });
   describe('filters', () => {
-    const hookKeys = keyStore(selectorHooks.filters);
-    const selGroup = selectors.filters;
-    beforeEach(() => { hooks = selectorHooks.filters; });
-    testHook(hookKeys.useData, selGroup.allFilters);
-    testHook(hookKeys.useIncludeCourseRoleMembers, selGroup.includeCourseRoleMembers);
-    testHook(hookKeys.useSelectableAssignmentLabels, selGroup.selectableAssignmentLabels);
-    testHook(hookKeys.useSelectedAssignmentLabel, selGroup.selectedAssignmentLabel);
-    testHook(hookKeys.useAssignmentType, selGroup.assignmentType);
+    loadSelectorGroup(selectorHooks.filters, selectors.filters);
+    testHook(hookKeys.useData, selKeys.allFilters);
+    testHook(hookKeys.useIncludeCourseRoleMembers, selKeys.includeCourseRoleMembers);
+    testHook(hookKeys.useSelectableAssignmentLabels, selKeys.selectableAssignmentLabels);
+    testHook(hookKeys.useSelectedAssignmentLabel, selKeys.selectedAssignmentLabel);
+    testHook(hookKeys.useAssignmentType, selKeys.assignmentType);
+  });
+  describe('grades', () => {
+    loadSelectorGroup(selectorHooks.grades, selectors.grades);
+    testHook(hookKeys.useAllGrades, selKeys.allGrades);
+    testHook(hookKeys.useGradeData, selKeys.gradeData);
+    testHook(hookKeys.useHasOverrideErrors, selKeys.hasOverrideErrors);
+    testHook(hookKeys.useShowSuccess, selKeys.showSuccess);
+    test(hookKeys.useUserCounts, () => {
+      expect(hooks.useUserCounts()).toEqual({
+        filteredUsersCount: useSelector(selectors.grades.filteredUsersCount),
+        totalUsersCount: useSelector(selectors.grades.totalUsersCount),
+      });
+    });
+  });
+  describe('roles', () => {
+    loadSelectorGroup(selectorHooks.roles, selectors.roles);
+    testHook(hookKeys.useCanUserViewGradebook, selKeys.canUserViewGradebook);
   });
   describe('tracks', () => {
-    const hookKeys = keyStore(selectorHooks.tracks);
-    const selGroup = selectors.tracks;
-    beforeEach(() => { hooks = selectorHooks.tracks; });
-    testHook(hookKeys.useAllTracks, selGroup.allTracks);
-    testHook(hookKeys.useTracksByName, selGroup.tracksByName);
+    loadSelectorGroup(selectorHooks.tracks, selectors.tracks);
+    testHook(hookKeys.useAllTracks, selKeys.allTracks);
+    testHook(hookKeys.useTracksByName, selKeys.tracksByName);
   });
 });

src/data/redux/hooks/thunkActions.js

@@ -3,15 +3,22 @@ import thunkActions from 'data/thunkActions';
 import { actionHook } from './utils';
 
 const app = StrictDict({
-  useCloseFilterMenu: actionHook(thunkActions.app.filterMenu.close),
+  filterMenu: {
+    useCloseMenu: actionHook(thunkActions.app.filterMenu.close),
+    useHandleTransitionEnd: actionHook(thunkActions.app.filterMenu.handleTransitionEnd),
+    useToggleMenu: actionHook(thunkActions.app.filterMenu.toggle),
+  },
+  useSetModalStateFromTable: actionHook(thunkActions.app.setModalStateFromTable),
 });
 
 const grades = StrictDict({
   useFetchGradesIfAssignmentGradeFiltersSet: actionHook(
     thunkActions.grades.fetchGradesIfAssignmentGradeFiltersSet,
   ),
+  useFetchPrevNextGrades: actionHook(thunkActions.grades.fetchPrevNextGrades),
   useFetchGrades: actionHook(thunkActions.grades.fetchGrades),
   useSubmitImportGradesButtonData: actionHook(thunkActions.grades.submitImportGradesButtonData),
+  useUpdateGrades: actionHook(thunkActions.grades.updateGrades),
 });
 
 export default StrictDict({

src/data/redux/hooks/thunkActions.test.js

@@ -5,7 +5,11 @@ import thunkActionHooks from './thunkActions';
 
 jest.mock('data/thunkActions', () => ({
   app: {
-    filterMenu: { close: jest.fn() },
+    filterMenu: {
+      close: jest.fn(),
+      handleTransitionEnd: jest.fn(),
+      toggle: jest.fn(),
+    },
   },
   grades: {
     fetchGrades: jest.fn(),
@@ -25,24 +29,38 @@ const testActionHook = (hookKey, action) => {
     expect(hooks[hookKey]).toEqual(actionHook(action));
   });
 };
+let hookKeys;
 describe('thunkAction hooks', () => {
   describe('app', () => {
-    const hookKeys = keyStore(thunkActionHooks.app);
+    hookKeys = keyStore(thunkActionHooks.app);
     beforeEach(() => { hooks = thunkActionHooks.app; });
-    testActionHook(hookKeys.useCloseFilterMenu, thunkActions.app.filterMenu.close);
+    testActionHook(hookKeys.useSetModalStateFromTable, thunkActions.app.setModalStateFromTable);
+
+    describe('filterMenu', () => {
+      hookKeys = keyStore(thunkActionHooks.app.filterMenu);
+      beforeEach(() => { hooks = thunkActionHooks.app.filterMenu; });
+      testActionHook(hookKeys.useCloseMenu, thunkActions.app.filterMenu.close);
+      testActionHook(
+        hookKeys.useHandleTransitionEnd,
+        thunkActions.app.filterMenu.handleTransitionEnd,
+      );
+      testActionHook(hookKeys.useToggleMenu, thunkActions.app.filterMenu.toggle);
+    });
   });
   describe('grades', () => {
-    const hookKeys = keyStore(thunkActionHooks.grades);
+    hookKeys = keyStore(thunkActionHooks.grades);
     const actionGroup = thunkActions.grades;
     beforeEach(() => { hooks = thunkActionHooks.grades; });
-    testActionHook(hookKeys.useFetchGrades, actionGroup.fetchGrades);
     testActionHook(
       hookKeys.useFetchGradesIfAssignmentGradeFiltersSet,
       actionGroup.fetchGradesIfAssignmentGradeFiltersSet,
     );
+    testActionHook(hookKeys.useFetchPrevNextGrades, actionGroup.fetchPrevNextGrades);
+    testActionHook(hookKeys.useFetchGrades, actionGroup.fetchGrades);
     testActionHook(
       hookKeys.useSubmitImportGradesButtonData,
       actionGroup.submitImportGradesButtonData,
     );
+    testActionHook(hookKeys.useUpdateGrades, actionGroup.updateGrades);
   });
 });

src/data/redux/transforms.js

@@ -0,0 +1,13 @@
+import { StrictDict } from 'utils';
+import selectors from 'data/selectors';
+
+export const grades = StrictDict({
+  subsectionGrade: ({ gradeFormat, subsection }) => () => (
+    selectors.grades.subsectionGrade[gradeFormat](subsection)
+  ),
+  roundGrade: selectors.grades.roundGrade,
+});
+
+export default StrictDict({
+  grades,
+});

src/data/redux/transforms.test.js

@@ -0,0 +1,38 @@
+import selectors from 'data/selectors';
+
+import { GradeFormats } from 'data/constants/grades';
+import transforms from './transforms';
+
+jest.mock('data/selectors', () => {
+  const {
+    GradeFormats: { absolute, percent },
+  } = jest.requireActual('data/constants/grades');
+  return {
+    grades: {
+      subsectionGrade: {
+        [absolute]: jest.fn(v => ({ absolute: v })),
+        [percent]: jest.fn(v => ({ percent: v })),
+      },
+      roundGrade: jest.fn(),
+    },
+  };
+});
+
+describe('redux transforms', () => {
+  describe('grades transforms', () => {
+    test('subsectionGrade', () => {
+      const subsection = 'test-subsection';
+      expect(transforms.grades.subsectionGrade({
+        gradeFormat: GradeFormats.absolute,
+        subsection,
+      })()).toEqual(selectors.grades.subsectionGrade.absolute(subsection));
+      expect(transforms.grades.subsectionGrade({
+        gradeFormat: GradeFormats.percent,
+        subsection,
+      })()).toEqual(selectors.grades.subsectionGrade.percent(subsection));
+    });
+    test('roundGrade', () => {
+      expect(transforms.grades.roundGrade).toEqual(selectors.grades.roundGrade);
+    });
+  });
+});

src/data/selectors/app.js

@@ -89,6 +89,16 @@ const modalSelectors = simpleSelectorFactory(
   ],
 );
 
+const modalData = ({ app: { modalState } }) => ({
+  assignmentName: modalState.assignmentName,
+  adjustedGradePossible: modalState.adjustedGradePossible,
+  adjustedGradeValue: modalState.adjustedGradeValue,
+  open: modalState.open,
+  reasonForChange: modalState.reasonForChange,
+  todaysDate: modalState.todaysDate,
+  updateUserName: modalState.updateUserName,
+});
+
 const filterMenuSelectors = simpleSelectorFactory(
   ({ app: { filterMenu } }) => filterMenu,
   ['open', 'transitioning'],
@@ -115,6 +125,7 @@ export default StrictDict({
   isFilterMenuOpening,
   ...simpleSelectors,
   modalState: StrictDict(modalSelectors),
+  modalData,
   filterMenu: StrictDict({
     ...filterMenuSelectors,
     isClosed: isFilterMenuClosed,

src/data/selectors/grades.js

@@ -3,7 +3,7 @@ import { StrictDict } from 'utils';
 
 import { Headings, GradeFormats } from 'data/constants/grades';
 import { formatDateForDisplay } from 'data/actions/utils';
-import { getLocalizedSlash } from 'i18n';
+import { getLocalizedSlash } from 'i18n/utils';
 import simpleSelectorFactory from '../utils';
 import * as module from './grades';
 
@@ -105,12 +105,17 @@ export const headingMapper = (category, label = 'All') => {
   } else {
     filter = filters.byLabel;
   }
-  const { username, email, totalGrade } = Headings;
+  const {
+    username,
+    fullName,
+    email,
+    totalGrade,
+  } = Headings;
   const filteredLabels = (entry) => entry.filter(filter).map(s => s.label);
 
   return (entry) => (
     entry
-      ? [username, email, ...filteredLabels(entry), totalGrade]
+      ? [username, fullName, email, ...filteredLabels(entry), totalGrade]
       : []
   );
 };
@@ -261,12 +266,26 @@ const simpleSelectors = simpleSelectorFactory(
     'gradeOverrideHistoryError',
     'gradeOriginalEarnedGraded',
     'gradeOriginalPossibleGraded',
-    'nextPage',
-    'prevPage',
     'showSuccess',
   ],
 );
 
+const gradeData = ({ grades }) => ({
+  courseId: grades.courseId,
+  filteredUsersCount: grades.filteredUsersCount,
+  totalUsersCount: grades.totalUsersCount,
+  gradeFormat: grades.gradeFormat,
+  showSpinner: grades.showSpinner,
+  gradeOverrideCurrentEarnedGradedOverride: grades.gradeOverrideCurrentEarnedGradedOverride,
+  gradeOverrideHistoryError: grades.gradeOverrideHistoryError,
+  gradeOverrideHistoryResults: grades.gradeOverrideHistoryResults,
+  gradeOriginalEarnedGraded: grades.gradeOriginalEarnedGraded,
+  gradeOriginalPossibleGraded: grades.gradeOriginalPossibleGraded,
+  nextPage: grades.nextPage,
+  prevPage: grades.prevPage,
+  showSuccess: grades.showSuccess,
+});
+
 export default StrictDict({
   bulkImportError,
   formatGradeOverrideForDisplay,
@@ -281,6 +300,7 @@ export default StrictDict({
   subsectionGrade,
 
   ...simpleSelectors,
+  gradeData,
   allGrades,
   bulkManagementHistoryEntries,
   getExampleSectionBreakdown,

src/data/selectors/grades.test.js

@@ -1,4 +1,9 @@
-import { EMAIL_HEADING, TOTAL_COURSE_GRADE_HEADING, USERNAME_HEADING } from '../constants/grades';
+import {
+  EMAIL_HEADING,
+  FULL_NAME_HEADING,
+  TOTAL_COURSE_GRADE_HEADING,
+  USERNAME_HEADING,
+} from '../constants/grades';
 import { formatDateForDisplay } from '../actions/utils';
 import * as selectors from './grades';
 import exportedSelectors from './grades';
@@ -179,6 +184,7 @@ describe('grades selectors', () => {
   describe('headingMapper', () => {
     const expectedHeaders = (subsectionLabels) => ([
       USERNAME_HEADING,
+      FULL_NAME_HEADING,
       EMAIL_HEADING,
       ...subsectionLabels,
       TOTAL_COURSE_GRADE_HEADING,

src/i18n/index.js

@@ -1,4 +1,6 @@
-import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+
 import arMessages from './messages/ar.json';
 import deMessages from './messages/de.json';
 import es419Messages from './messages/es_419.json';
@@ -13,7 +15,7 @@ import ukMessages from './messages/uk.json';
 import zhcnMessages from './messages/zh_CN.json';
 // no need to import en messages-- they are in the defaultMessage field
 
-const messages = {
+const appMessages = {
   ar: arMessages,
   'es-419': es419Messages,
   'fa-ir': faIRMessages,
@@ -28,25 +30,8 @@ const messages = {
   uk: ukMessages,
 };
 
-export const getLocalizedSlash = () => {
-  // For fractional grades
-  // if we are in a LTR language, we want to use a forward slash.
-  // If we are in a RTL language, we want to use a backslash instead
-  if (isRtl(getLocale())) {
-    return '\\';
-  }
-  return '/';
-};
-
-export const getLocalizedPercentSign = () => {
-  // LTR languages put the percent to the right of a number.
-  // RTL languages put the percent sign to the left of the number.
-  // We can place a non-printing unicode right-to-left marker next to the percent
-  // sign to make it print to the left of the number if we are currently in a LTR language
-  if (isRtl(getLocale())) {
-    return '\u200f%';
-  }
-  return '%';
-};
-
-export default messages;
+export default [
+  footerMessages,
+  headerMessages,
+  appMessages,
+];

src/i18n/utils.js

@@ -0,0 +1,22 @@
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
+
+export const getLocalizedSlash = () => {
+  // For fractional grades
+  // if we are in a LTR language, we want to use a forward slash.
+  // If we are in a RTL language, we want to use a backslash instead
+  if (isRtl(getLocale())) {
+    return '\\';
+  }
+  return '/';
+};
+
+export const getLocalizedPercentSign = () => {
+  // LTR languages put the percent to the right of a number.
+  // RTL languages put the percent sign to the left of the number.
+  // We can place a non-printing unicode right-to-left marker next to the percent
+  // sign to make it print to the left of the number if we are currently in a LTR language
+  if (isRtl(getLocale())) {
+    return '\u200f%';
+  }
+  return '%';
+};

src/i18n/utils.test.jsx

@@ -1,5 +1,5 @@
 import { isRtl } from '@edx/frontend-platform/i18n';
-import { getLocalizedSlash, getLocalizedPercentSign } from './index';
+import { getLocalizedSlash, getLocalizedPercentSign } from './utils';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   isRtl: jest.fn(),

src/index.jsx

@@ -10,13 +10,14 @@ import {
   mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import lightning from './lightning';
+
+import messages from './i18n';
 import App from './App';
 
 subscribe(APP_READY, () => {
+  lightning();
   ReactDOM.render(<App />, document.getElementById('root'));
 });
 
@@ -37,10 +38,6 @@ initialize({
       });
     },
   },
-  messages: [
-    appMessages,
-    headerMessages,
-    footerMessages,
-  ],
+  messages,
   requireAuthenticatedUser: true,
 });

src/index.test.jsx

@@ -7,10 +7,8 @@ import {
   mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import messages from './i18n';
 import App from './App';
 import '.';
 
@@ -23,12 +21,6 @@ jest.mock('@edx/frontend-platform', () => ({
   mergeConfig: jest.fn(),
   subscribe: jest.fn(),
 }));
-jest.mock('@edx/frontend-component-header', () => ({
-  messages: ['some', 'messages'],
-}));
-jest.mock('@edx/frontend-component-footer', () => ({
-  messages: ['some', 'messages'],
-}));
 jest.mock('./App', () => 'App');
 
 describe('app registry', () => {
@@ -50,7 +42,7 @@ describe('app registry', () => {
   });
   test('initialize is called with requireAuthenticatedUser, messages, and a config handler', () => {
     expect(initialize).toHaveBeenCalledWith({
-      messages: [appMessages, headerMessages, footerMessages],
+      messages,
       requireAuthenticatedUser: true,
       handlers: {
         config: expect.any(Function),

src/lightning.js

@@ -0,0 +1,131 @@
+module.exports = () => {
+  if (process.env.DISPLAY_FEEDBACK_WIDGET === "true") {
+    window.lightningjs ||
+      (function (n) {
+        var e = "lightningjs";
+        function t(e, t) {
+          var r, i, a, o, d, c;
+          return (
+            t && (t += (/\?/.test(t) ? "&" : "?") + "lv=1"),
+            n[e] ||
+              ((r = window),
+              (i = document),
+              (a = e),
+              (o = i.location.protocol),
+              (d = "load"),
+              (c = 0),
+              (function () {
+                n[a] = function () {
+                  var t = arguments,
+                    i = this,
+                    o = ++c,
+                    d = (i && i != r && i.id) || 0;
+                  function s() {
+                    return (s.id = o), n[a].apply(s, arguments);
+                  }
+                  return (
+                    (e.s = e.s || []).push([o, d, t]),
+                    (s.then = function (n, t, r) {
+                      var i = (e.fh[o] = e.fh[o] || []),
+                        a = (e.eh[o] = e.eh[o] || []),
+                        d = (e.ph[o] = e.ph[o] || []);
+                      return n && i.push(n), t && a.push(t), r && d.push(r), s;
+                    }),
+                    s
+                  );
+                };
+                var e = (n[a]._ = {});
+                function s() {
+                  e.P(d), (e.w = 1), n[a]("_load");
+                }
+                (e.fh = {}),
+                  (e.eh = {}),
+                  (e.ph = {}),
+                  (e.l = t
+                    ? t.replace(/^\/\//, ("https:" == o ? o : "http:") + "//")
+                    : t),
+                  (e.p = { 0: +new Date() }),
+                  (e.P = function (n) {
+                    e.p[n] = new Date() - e.p[0];
+                  }),
+                  e.w && s(),
+                  r.addEventListener
+                    ? r.addEventListener(d, s, !1)
+                    : r.attachEvent("onload", s);
+                var l = function () {
+                  function n() {
+                    return [
+                      "<!DOCTYPE ",
+                      o,
+                      "><",
+                      o,
+                      "><head></head><",
+                      t,
+                      "><",
+                      r,
+                      ' src="',
+                      e.l,
+                      '"></',
+                      r,
+                      "></",
+                      t,
+                      "></",
+                      o,
+                      ">",
+                    ].join("");
+                  }
+                  var t = "body",
+                    r = "script",
+                    o = "html",
+                    d = i[t];
+                  if (!d) return setTimeout(l, 100);
+                  e.P(1);
+                  var c,
+                    s = i.createElement("div"),
+                    h = s.appendChild(i.createElement("div")),
+                    u = i.createElement("iframe");
+                  (s.style.display = "none"),
+                    (d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
+                    (u.frameBorder = "0"),
+                    (u.id = "lightningjs-frame-" + a),
+                    /MSIE[ ]+6/.test(navigator.userAgent) &&
+                      (u.src = "javascript:false"),
+                    (u.allowTransparency = "true"),
+                    h.appendChild(u);
+                  try {
+                    u.contentWindow.document.open();
+                  } catch (n) {
+                    (e.domain = i.domain),
+                      (c =
+                        "javascript:var d=document.open();d.domain='" +
+                        i.domain +
+                        "';"),
+                      (u.src = c + "void(0);");
+                  }
+                  try {
+                    var p = u.contentWindow.document;
+                    p.write(n()), p.close();
+                  } catch (e) {
+                    u.src =
+                      c +
+                      'd.write("' +
+                      n().replace(/"/g, String.fromCharCode(92) + '"') +
+                      '");d.close();';
+                  }
+                  e.P(2);
+                };
+                e.l && l();
+              })()),
+            (n[e].lv = "1"),
+            n[e]
+          );
+        }
+        var r = (window.lightningjs = t(e));
+        (r.require = t), (r.modules = n);
+      })({});
+    window.usabilla_live = lightningjs.require(
+      "usabilla_live",
+      "//w.usabilla.com/a13a22d8ea20.js"
+    );
+  }
+};

src/setupTest.js

@@ -32,6 +32,18 @@ jest.mock('@edx/frontend-platform/i18n', () => {
   };
 });
 
+jest.mock('@edx/frontend-component-header', () => ({
+  messages: ['some', 'messages'],
+}));
+jest.mock('@edx/frontend-component-footer', () => ({
+  messages: ['some', 'messages'],
+}));
+
+jest.mock('@edx/paragon/icons', () => ({
+  FilterAlt: 'FilterAlt',
+  Close: 'Close',
+}));
+
 jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
   Alert: 'Alert',
   ActionRow: 'ActionRow',
@@ -68,6 +80,7 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
   Hyperlink: 'Hyperlink',
   Icon: 'Icon',
   IconButton: 'IconButton',
+  Input: 'Input',
   ModalDialog: {
     Body: 'ModalDialog.Body',
     CloseButton: 'ModalDialog.CloseButton',
@@ -77,8 +90,10 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
   },
   OverlayTrigger: 'OverlayTrigger',
   Row: 'Row',
-  StatefulButton: 'StatefulButton',
+  SearchField: 'SearchField',
   Spinner: 'Spinner',
+  StatefulButton: 'StatefulButton',
+  Toast: 'Toast',
 
   useCheckboxSetValues: () => jest.fn().mockImplementation((values) => ([values, {
     add: jest.fn().mockName('useCheckboxSetValues.add'),

src/utils/formatDate.js

@@ -0,0 +1,20 @@
+export const options = {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  timeZone: 'UTC',
+};
+export const timeOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  timeZone: 'UTC',
+  timeZoneName: 'short',
+};
+
+const formatDateForDisplay = (inputDate) => {
+  const date = inputDate.toLocaleDateString('en-US', options);
+  const time = inputDate.toLocaleTimeString('en-US', timeOptions);
+  return `${date} at ${time}`;
+};
+
+export default formatDateForDisplay;

src/utils/index.js

@@ -1,3 +1,4 @@
 /* eslint-disable import/prefer-default-export */
 export { default as StrictDict } from './StrictDict';
 export { default as keyStore } from './keyStore';
+export { default as formatDateForDisplay } from './formatDate';