chore: rebase with nutmeg master

* fix: fix loss of field focus after each character for search field

* fix: update package-lock file

.env

@@ -30,5 +30,3 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
-APP_ID=''
-MFE_CONFIG_API_URL=''

.env.development

@@ -37,5 +37,3 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-APP_ID=''
-MFE_CONFIG_API_URL=''

.github/workflows/ci.yml

@@ -3,18 +3,17 @@ name: node_js CI
 on:
   push:
     branches:
-    - master
+      - master
   pull_request:
     branches:
-    - '**'
+      - "**"
 
 jobs:
   test:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node: [16]
-        npm: [8.5.x]
+        node: [12, 14, 16]
 
     steps:
     - name: Checkout
@@ -25,9 +24,6 @@ jobs:
       with:
         node-version: ${{ matrix.node }}
 
-    - name: Install npm 8.5.x
-      run: npm install -g npm@${{ matrix.npm }}
-
     - name: Install dependencies
       run: npm ci
 
@@ -60,5 +56,4 @@ jobs:
         subject: CI workflow failed in ${{github.repository}}
         to: masters-grades@edx.org
         from: github-actions <github-actions@edx.org>
-        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{
-          github.repository }}/actions/runs/${{ github.run_id }}"
+        body: CI workflow in ${{github.repository}} failed! For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/lockfileversion-check.yml

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

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
+[![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)

jest.config.js

@@ -11,6 +11,5 @@ module.exports = createConfig('jest', {
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',
-    'testUtils', // don't unit test jest mocking tools
   ],
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.0",
+  "version": "1.5.0",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
@@ -31,9 +32,9 @@
   ],
   "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/frontend-component-footer": "10.2.1",
+    "@edx/frontend-component-header": "2.4.5",
+    "@edx/frontend-platform": "1.15.1",
     "@edx/paragon": "19.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
@@ -52,7 +53,6 @@
     "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",
@@ -72,6 +72,7 @@
     "@edx/frontend-build": "9.1.1",
     "axios": "0.21.1",
     "axios-mock-adapter": "^1.17.0",
+    "codecov": "^3.6.1",
     "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",

src/App.jsx

@@ -10,11 +10,9 @@ import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 import './App.scss';
-import Head from './head/Head';
 
 const App = () => (
   <AppProvider store={store}>
-    <Head />
     <Router>
       <div>
         <Header />

src/App.test.jsx

@@ -12,7 +12,6 @@ import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
 import App from './App';
-import Head from './head/Head';
 
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
@@ -42,7 +41,7 @@ describe('App router component', () => {
     beforeEach(() => {
       process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      router = el.childAt(1);
+      router = el.childAt(0);
     });
     describe('AppProvider', () => {
       test('AppProvider is the parent component, passed the redux store props', () => {
@@ -50,13 +49,8 @@ describe('App router component', () => {
         expect(el.props().store).toEqual(store);
       });
     });
-    describe('Head', () => {
-      test('first child of AppProvider', () => {
-        expect(el.childAt(0).type()).toBe(Head);
-      });
-    });
     describe('Router', () => {
-      test('second child of AppProvider', () => {
+      test('first child of AppProvider', () => {
         expect(router.type()).toBe(Router);
       });
       test('Header is above/outside-of the routing', () => {

src/__snapshots__/App.test.jsx.snap

@@ -4,7 +4,6 @@ exports[`App router component snapshot 1`] = `
 <AppProvider
   store="testStore"
 >
-  <injectIntl(ShimmedIntlComponent) />
   <BrowserRouter>
     <div>
       <Header />

src/components/BulkManagementHistoryView/HistoryTable.jsx

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

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { DataTable } from '@edx/paragon';
+import { Table } from '@edx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,12 +9,13 @@ import { bulkManagementColumns } from 'data/constants/app';
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';
 
-jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
-
 jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
   FormattedMessage: () => 'FormattedMessage',
 }));
+jest.mock('@edx/paragon', () => ({
+  Table: () => 'Table',
+}));
 jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
@@ -61,7 +62,7 @@ describe('HistoryTable', () => {
       describe('history table', () => {
         let table;
         beforeEach(() => {
-          table = el.find(DataTable);
+          table = el.find(Table);
         });
         describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
           const fieldAssertions = [

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

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

src/components/GradebookHeader/index.jsx

@@ -2,10 +2,10 @@ 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 { Button } from '@edx/paragon';
 
+import { configuration } from 'config';
 import { views } from 'data/constants/app';
 import actions from 'data/actions';
 import selectors from 'data/selectors';
@@ -25,7 +25,7 @@ export class GradebookHeader extends React.Component {
   }
 
   lmsInstructorDashboardUrl = courseId => (
-    `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor`
+    `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`
   );
 
   handleToggleViewClick() {

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

@@ -7,7 +7,6 @@ import { Form } from '@edx/paragon';
 
 import selectors from 'data/selectors';
 import actions from 'data/actions';
-import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 
 /**
  * <AdjustedGradeInput />
@@ -46,7 +45,7 @@ export class AdjustedGradeInput extends React.Component {
           value={this.props.value}
           onChange={this.onChange}
         />
-        {this.props.possibleGrade && ` ${isRtl(getLocale()) ? '\\' : '/'} ${this.props.possibleGrade}`}
+        {this.props.possibleGrade && ` / ${this.props.possibleGrade}`}
       </span>
     );
   }

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

@@ -1,40 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
-<DataTable
+<Table
   columns={
     Array [
       Object {
-        "Header": <FormattedMessage
+        "key": "date",
+        "label": <FormattedMessage
           defaultMessage="Date"
           description="Edit Modal Override Table Date column header"
           id="gradebook.GradesView.EditModal.Overrides.dateHeader"
         />,
-        "accessor": "date",
       },
       Object {
-        "Header": <FormattedMessage
+        "key": "grader",
+        "label": <FormattedMessage
           defaultMessage="Grader"
           description="Edit Modal Override Table Grader column header"
           id="gradebook.GradesView.EditModal.Overrides.graderHeader"
         />,
-        "accessor": "grader",
       },
       Object {
-        "Header": <FormattedMessage
+        "key": "reason",
+        "label": <FormattedMessage
           defaultMessage="Reason"
           description="Edit Modal Override Table Reason column header"
           id="gradebook.GradesView.EditModal.Overrides.reasonHeader"
         />,
-        "accessor": "reason",
       },
       Object {
-        "Header": <FormattedMessage
+        "key": "adjustedGrade",
+        "label": <FormattedMessage
           defaultMessage="Adjusted grade"
           description="Edit Modal Override Table Adjusted grade column header"
           id="gradebook.GradesView.EditModal.Overrides.adjustedGradeHeader"
         />,
-        "accessor": "adjustedGrade",
       },
     ]
   }
@@ -59,6 +59,5 @@ exports[`OverrideTable Component snapshots basic snapshot shows a row for each e
       },
     ]
   }
-  itemCount={3}
 />
 `;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { DataTable } from '@edx/paragon';
+import { Table } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
@@ -26,29 +26,25 @@ export const OverrideTable = ({
   if (hide) {
     return null;
   }
-
-  const tableData = [
-    ...gradeOverrides,
-    {
-      adjustedGrade: <AdjustedGradeInput />,
-      date: todaysDate,
-      reason: <ReasonInput />,
-    },
-  ];
-
   return (
-    <DataTable
+    <Table
       columns={[
-        { Header: <FormattedMessage {...messages.dateHeader} />, accessor: columns.date },
-        { Header: <FormattedMessage {...messages.graderHeader} />, accessor: columns.grader },
-        { Header: <FormattedMessage {...messages.reasonHeader} />, accessor: columns.reason },
+        { label: <FormattedMessage {...messages.dateHeader} />, key: columns.date },
+        { label: <FormattedMessage {...messages.graderHeader} />, key: columns.grader },
+        { label: <FormattedMessage {...messages.reasonHeader} />, key: columns.reason },
         {
-          Header: <FormattedMessage {...messages.adjustedGradeHeader} />,
-          accessor: columns.adjustedGrade,
+          label: <FormattedMessage {...messages.adjustedGradeHeader} />,
+          key: columns.adjustedGrade,
+        },
+      ]}
+      data={[
+        ...gradeOverrides,
+        {
+          adjustedGrade: <AdjustedGradeInput />,
+          date: todaysDate,
+          reason: <ReasonInput />,
         },
       ]}
-      data={tableData}
-      itemCount={tableData.length}
     />
   );
 };

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

@@ -8,7 +8,7 @@ import {
   mapStateToProps,
 } from '.';
 
-jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+jest.mock('@edx/paragon', () => ({ Table: () => 'Table' }));
 jest.mock('./ReasonInput', () => 'ReasonInput');
 jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');
 

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

@@ -5,13 +5,12 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
   body={
     <div>
       <ModalHeaders />
-      <Alert
+      <StatusAlert
+        alertType="danger"
+        dialog="Weve been trying to contact you regarding..."
         dismissible={false}
-        show={true}
-        variant="danger"
-      >
-        Weve been trying to contact you regarding...
-      </Alert>
+        open={true}
+      />
       <OverrideTable />
       <div>
         <FormattedMessage
@@ -67,13 +66,12 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
   body={
     <div>
       <ModalHeaders />
-      <Alert
+      <StatusAlert
+        alertType="danger"
+        dialog=""
         dismissible={false}
-        show={false}
-        variant="danger"
-      >
-        
-      </Alert>
+        open={false}
+      />
       <OverrideTable />
       <div>
         <FormattedMessage

src/components/GradesView/EditModal/index.jsx

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import {
   Button,
   Modal,
-  Alert,
+  StatusAlert,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -53,13 +53,12 @@ export class EditModal extends React.Component {
         body={(
           <div>
             <ModalHeaders />
-            <Alert
-              variant="danger"
-              show={!!this.props.gradeOverrideHistoryError}
+            <StatusAlert
+              alertType="danger"
+              dialog={this.props.gradeOverrideHistoryError}
+              open={!!this.props.gradeOverrideHistoryError}
               dismissible={false}
-            >
-              {this.props.gradeOverrideHistoryError}
-            </Alert>
+            />
             <OverrideTable />
             <div><FormattedMessage {...messages.visibility} /></div>
             <div><FormattedMessage {...messages.saveVisibility} /></div>

src/components/GradesView/EditModal/test.jsx

@@ -16,7 +16,7 @@ jest.mock('./ModalHeaders', () => 'ModalHeaders');
 jest.mock('@edx/paragon', () => ({
   Button: () => 'Button',
   Modal: () => 'Modal',
-  Alert: () => 'Alert',
+  StatusAlert: () => 'StatusAlert',
 }));
 jest.mock('data/actions', () => ({
   __esModule: true,

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

@@ -4,58 +4,48 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
 <div
   className="gradebook-container"
 >
-  <DataTable
-    RowStatusComponent={[MockFunction this.nullMethod]}
-    columns={
-      Array [
-        Object {
-          "Header": <UsernameLabelReplacement />,
-          "accessor": "Username",
-        },
-        Object {
-          "Header": <FormattedMessage
-            defaultMessage="Email"
-            description="Gradebook table email column header"
-            id="gradebook.GradesView.table.headings.email"
-          />,
-          "accessor": "Email",
-        },
-        Object {
-          "Header": "field1",
-          "accessor": "field1",
-        },
-        Object {
-          "Header": "field2",
-          "accessor": "field2",
-        },
-        Object {
-          "Header": <TotalGradeLabelReplacement />,
-          "accessor": "Total Grade (%)",
-        },
-      ]
-    }
-    data={
-      Array [
-        "mappedRow: 1",
-        "mappedRow: 2",
-        "mappedRow: 3",
-      ]
-    }
-    hasFixedColumnWidths={true}
-    itemCount={3}
-    rowHeaderColumnKey="username"
+  <div
+    className="gbook"
   >
-    <DataTable.TableControlBar />
-    <DataTable.Table />
-    <DataTable.EmptyTable
-      content={
-        <FormattedMessage
-          defaultMessage="No results found"
-          description="Gradebook table message when no learner results were found"
-          id="gradebook.GradesView.table.noResultsFound"
-        />
+    <Table
+      columns={
+        Array [
+          Object {
+            "key": "Username",
+            "label": <UsernameLabelReplacement />,
+          },
+          Object {
+            "key": "Email",
+            "label": <FormattedMessage
+              defaultMessage="Email*"
+              description="Gradebook table email column header"
+              id="gradebook.GradesView.table.headings.email"
+            />,
+          },
+          Object {
+            "key": "field1",
+            "label": "field1",
+          },
+          Object {
+            "key": "field2",
+            "label": "field2",
+          },
+          Object {
+            "key": "Total Grade (%)",
+            "label": <TotalGradeLabelReplacement />,
+          },
+        ]
       }
+      data={
+        Array [
+          "mappedRow: 1",
+          "mappedRow: 2",
+          "mappedRow: 3",
+        ]
+      }
+      hasFixedColumnWidths={true}
+      rowHeaderColumnKey="username"
     />
-  </DataTable>
+  </div>
 </div>
 `;

src/components/GradesView/GradebookTable/index.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { DataTable } from '@edx/paragon';
-import { FormattedMessage, getLocale, isRtl } from '@edx/frontend-platform/i18n';
+import { Table } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
@@ -27,7 +27,6 @@ export class GradebookTable extends React.Component {
     super(props);
     this.mapHeaders = this.mapHeaders.bind(this);
     this.mapRows = this.mapRows.bind(this);
-    this.nullMethod = this.nullMethod.bind(this);
   }
 
   mapHeaders(heading) {
@@ -41,7 +40,7 @@ export class GradebookTable extends React.Component {
     } else {
       label = heading;
     }
-    return { Header: label, accessor: heading };
+    return { label, key: heading };
   }
 
   mapRows(entry) {
@@ -50,7 +49,7 @@ export class GradebookTable extends React.Component {
         <Fields.Username username={entry.username} userKey={entry.external_user_key} />
       ),
       [Headings.email]: (<Fields.Email email={entry.email} />),
-      [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${isRtl(getLocale()) ? '\u200f' : ''}%`,
+      [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}%`,
     };
     entry.section_breakdown.forEach(subsection => {
       dataRow[subsection.label] = (
@@ -60,25 +59,17 @@ export class GradebookTable extends React.Component {
     return dataRow;
   }
 
-  nullMethod() {
-    return null;
-  }
-
   render() {
     return (
       <div className="gradebook-container">
-        <DataTable
-          columns={this.props.headings.map(this.mapHeaders)}
-          data={this.props.grades.map(this.mapRows)}
-          rowHeaderColumnKey="username"
-          hasFixedColumnWidths
-          itemCount={this.props.grades.length}
-          RowStatusComponent={this.nullMethod}
-        >
-          <DataTable.TableControlBar />
-          <DataTable.Table />
-          <DataTable.EmptyTable content={<FormattedMessage {...messages.noResultsFound} />} />
-        </DataTable>
+        <div className="gbook">
+          <Table
+            columns={this.props.headings.map(this.mapHeaders)}
+            data={this.props.grades.map(this.mapRows)}
+            rowHeaderColumnKey="username"
+            hasFixedColumnWidths
+          />
+        </div>
       </div>
     );
   }

src/components/GradesView/GradebookTable/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   emailHeading: {
     id: 'gradebook.GradesView.table.headings.email',
-    defaultMessage: 'Email',
+    defaultMessage: 'Email*',
     description: 'Gradebook table email column header',
   },
   totalGradeHeading: {
@@ -31,11 +31,6 @@ const messages = defineMessages({
     defaultMessage: 'Total Grade values are always displayed as a percentage',
     description: 'Gradebook table message that total grades are displayed in percent format',
   },
-  noResultsFound: {
-    id: 'gradebook.GradesView.table.noResultsFound',
-    defaultMessage: 'No results found',
-    description: 'Gradebook table message when no learner results were found',
-  },
 });
 
 export default messages;

src/components/GradesView/GradebookTable/test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { DataTable } from '@edx/paragon';
+import { Table } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -11,12 +11,8 @@ import Fields from './Fields';
 import messages from './messages';
 import { GradebookTable, mapStateToProps } from '.';
 
-jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
-  DataTable: {
-    Table: 'DataTable.Table',
-    TableControlBar: 'DataTable.TableControlBar',
-    EmptyTable: 'DataTable.EmptyTable',
-  },
+jest.mock('@edx/paragon', () => ({
+  Table: () => 'Table',
 }));
 jest.mock('./Fields', () => ({
   __esModule: true,
@@ -83,45 +79,40 @@ describe('GradebookTable', () => {
     };
     test('snapshot - fields1 and 2 between email and totalGrade, mocked rows', () => {
       el = shallow(<GradebookTable {...props} />);
-      el.instance().nullMethod = jest.fn().mockName('this.nullMethod');
       el.instance().mapRows = (entry) => `mappedRow: ${entry.percent}`;
       expect(el.instance().render()).toMatchSnapshot();
     });
-    test('null method returns null for stub component', () => {
-      el = shallow(<GradebookTable {...props} />);
-      expect(el.instance().nullMethod()).toEqual(null);
-    });
     describe('table columns (mapHeaders)', () => {
       let headings;
       beforeEach(() => {
         el = shallow(<GradebookTable {...props} />);
-        headings = el.find(DataTable).props().columns;
+        headings = el.find(Table).props().columns;
       });
-      test('username sets key and replaces Header with component', () => {
+      test('username sets key and replaces label with component', () => {
         const heading = headings[0];
-        expect(heading.accessor).toEqual(Headings.username);
-        expect(heading.Header.type).toEqual(LabelReplacements.UsernameLabelReplacement);
+        expect(heading.key).toEqual(Headings.username);
+        expect(heading.label.type).toEqual(LabelReplacements.UsernameLabelReplacement);
       });
-      test('email sets key and Header from header', () => {
+      test('email sets key and label from header', () => {
         const heading = headings[1];
-        expect(heading.accessor).toEqual(Headings.email);
-        expect(heading.Header).toEqual(<FormattedMessage {...messages.emailHeading} />);
+        expect(heading.key).toEqual(Headings.email);
+        expect(heading.label).toEqual(<FormattedMessage {...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 });
+      test('subsections set key and label from header', () => {
+        expect(headings[2]).toEqual({ key: fields.field1, label: fields.field1 });
+        expect(headings[3]).toEqual({ key: fields.field2, label: fields.field2 });
       });
-      test('totalGrade sets key and replaces Header with component', () => {
+      test('totalGrade sets key and replaces label with component', () => {
         const heading = headings[4];
-        expect(heading.accessor).toEqual(Headings.totalGrade);
-        expect(heading.Header.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
+        expect(heading.key).toEqual(Headings.totalGrade);
+        expect(heading.label.type).toEqual(LabelReplacements.TotalGradeLabelReplacement);
       });
     });
     describe('table data (mapRows)', () => {
       let rows;
       beforeEach(() => {
         el = shallow(<GradebookTable {...props} />);
-        rows = el.find(DataTable).props().data;
+        rows = el.find(Table).props().data;
       });
       describe.each([0, 1, 2])('gradeEntry($percent)', (gradeIndex) => {
         let row;

src/components/GradesView/GradesView.scss

@@ -31,7 +31,7 @@
     .import-grades-btn {
       margin-left: 20px;
     }
-    .intervention-report-description {
+    .intervention-report-description: {
       margin-right: 40px;
     }
     h4.step-message-1 {
@@ -67,9 +67,104 @@
     overflow-x: auto;
     height: 600px;
     overflow-y: auto;
+    word-break: break-word;
     position: relative;
 }
 
+.gbook { 
+    width: 100%;
+
+    .grade-button {
+        text-decoration: underline;
+    }
+
+    .student-key {
+        font-size: 14px;
+    }
+
+    #courseGradeTooltipIcon {
+      float: right;
+    }
+
+    .table thead tr {
+        min-height: 60px;
+        &:nth-child(1) {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: white;
+          th {
+            background-color: white;
+            border-bottom: 1px solid $gray_200;
+          }
+        }
+    }
+
+    thead, tbody, tr, td, th {
+      display: block;
+      word-break: break-word;
+    }
+
+    .table tr th:first-child {
+        border-bottom: none;
+    }
+    .table tr th:first-child,
+    .table tr td:first-child {
+        position: sticky;
+        left: 0;
+        z-index: 1; // to float over the following children in the side-scrolling case
+        background: white;
+    }
+
+    .table tr {
+      th:nth-child(1),
+      td:nth-child(1),
+      th:nth-child(2),
+      td:nth-child(2) {
+        width: 240px;
+      }
+      th:nth-last-of-type(1) {
+        width: 150px;
+      }
+      th, td {
+        width: 120px;
+      }
+    }
+    .table tbody th {
+        font-weight: normal;
+    }
+
+    .table {
+      overflow-x: hidden;
+
+      height: 100%;
+
+      tbody {
+        overflow-y: auto;
+        display: block;
+      }
+
+      thead, tbody tr {
+        display: table;
+        table-layout: fixed;
+      }
+
+      th {
+          vertical-align: top;
+          font-size: 14px;
+      }
+    }
+
+    .link-style {
+        color: #0075b4;
+        &:hover, &:focus {
+            color: #004368;
+            text-decoration: underline;
+        }
+    }
+
+}
+
 .form-group, .pgn__form-group {
   label {
     font-weight: bold;

src/components/GradesView/SearchControls.jsx

@@ -18,14 +18,17 @@ import messages from './SearchControls.messages';
 export class SearchControls extends React.Component {
   constructor(props) {
     super(props);
-
     this.onBlur = this.onBlur.bind(this);
     this.onClear = this.onClear.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
   }
 
+  /** Changing the search value stores the key in Gradebook. Currently unused */
   onBlur(e) {
-    this.props.setSearchValue(e.target.value);
+    const { value } = e.target;
+    if (this.props.searchValue !== value) {
+      this.props.setSearchValue(value);
+    }
   }
 
   onClear() {
@@ -33,8 +36,10 @@ export class SearchControls extends React.Component {
     this.props.fetchGrades();
   }
 
-  onSubmit(searchValue) {
-    this.props.setSearchValue(searchValue);
+  onSubmit(value) {
+    if (this.props.searchValue !== value) {
+      this.props.setSearchValue(value);
+    }
     this.props.fetchGrades();
   }
 

src/components/GradesView/SearchControls.test.jsx

@@ -4,11 +4,7 @@ import { shallow } from 'enzyme';
 import selectors from 'data/selectors';
 import actions from 'data/actions';
 import thunkActions from 'data/thunkActions';
-import {
-  mapDispatchToProps,
-  mapStateToProps,
-  SearchControls,
-} from './SearchControls';
+import { mapDispatchToProps, mapStateToProps, SearchControls } from './SearchControls';
 
 jest.mock('@edx/paragon', () => ({
   Icon: 'Icon',
@@ -19,7 +15,7 @@ jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
     app: {
-      searchValue: jest.fn((state) => ({ searchValue: state })),
+      searchValue: jest.fn(state => ({ searchValue: state })),
     },
   },
 }));
@@ -63,38 +59,42 @@ describe('SearchControls', () => {
       });
     });
 
-    describe('Behavior', () => {
-      describe('onBlur', () => {
-        it('saves the search value to Gradebook state but do not fetch grade', () => {
-          const wrapper = searchControls();
-          const event = {
-            target: {
-              value: 'bob',
-            },
-          };
-          wrapper.instance().onBlur(event);
-          expect(props.setSearchValue).toHaveBeenCalledWith('bob');
-          expect(props.fetchGrades).not.toHaveBeenCalled();
-        });
+    describe('onBlur', () => {
+      it('saves the changed search value to Gradebook state', () => {
+        const wrapper = searchControls();
+        wrapper.instance().onBlur({ target: { value: 'bob' } });
+        expect(props.setSearchValue).toHaveBeenCalledWith('bob');
       });
 
-      describe('onClear', () => {
-        it('sets search value to empty string and calls fetchGrades', () => {
-          const wrapper = searchControls();
-          wrapper.instance().onClear();
-          expect(props.setSearchValue).toHaveBeenCalledWith('');
-          expect(props.fetchGrades).toHaveBeenCalled();
-        });
+      it('doesnt save the same as previous value to Gradebook state', () => {
+        const wrapper = searchControls({ searchValue: 'bob' });
+        wrapper.instance().onBlur({ target: { value: 'bob' } });
+        expect(props.setSearchValue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('onChange', () => {
+      it('sets search value to empty string and calls fetchGrades', () => {
+        const wrapper = searchControls();
+        wrapper.instance().onClear();
+        expect(props.setSearchValue).toHaveBeenCalledWith('');
+        expect(props.fetchGrades).toHaveBeenCalled();
+      });
+    });
+
+    describe('onSubmit', () => {
+      it('saves the changed search value to Gradebook state and calls fetchGrades', () => {
+        const wrapper = searchControls();
+        wrapper.instance().onSubmit('bob');
+        expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+        expect(props.fetchGrades).toHaveBeenCalled();
       });
 
-      describe('onSubmit', () => {
-        it('sets search value to input and calls fetchGrades', () => {
-          const wrapper = searchControls();
-
-          wrapper.instance().onSubmit('John');
-          expect(props.setSearchValue).toHaveBeenCalledWith('John');
-          expect(props.fetchGrades).toHaveBeenCalled();
-        });
+      it('doesnt save the same as previous value to Gradebook state and calls fetchGrades', () => {
+        const wrapper = searchControls({ searchValue: 'bob' });
+        wrapper.instance().onSubmit('bob');
+        expect(props.setSearchValue).not.toHaveBeenCalled();
+        expect(props.fetchGrades).toHaveBeenCalled();
       });
     });
 

src/components/GradesView/StatusAlerts.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Alert } from '@edx/paragon';
+import { StatusAlert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -40,20 +40,18 @@ export class StatusAlerts extends React.Component {
   render() {
     return (
       <>
-        <Alert
-          variant="success"
+        <StatusAlert
+          alertType="success"
+          dialog={<FormattedMessage {...messages.editSuccessAlert} />}
           onClose={this.props.handleCloseSuccessBanner}
-          show={this.props.showSuccessBanner}
-        >
-          <FormattedMessage {...messages.editSuccessAlert} />
-        </Alert>
-        <Alert
-          variant="danger"
+          open={this.props.showSuccessBanner}
+        />
+        <StatusAlert
+          alertType="danger"
+          dialog={this.courseGradeFilterAlertDialogText}
           dismissible={false}
-          show={this.isCourseGradeFilterAlertOpen}
-        >
-          {this.courseGradeFilterAlertDialogText}
-        </Alert>
+          open={this.isCourseGradeFilterAlertOpen}
+        />
       </>
     );
   }

src/components/GradesView/StatusAlerts.test.jsx

@@ -13,7 +13,7 @@ import {
 } from './StatusAlerts';
 
 jest.mock('@edx/paragon', () => ({
-  Alert: 'Alert',
+  StatusAlert: 'StatusAlert',
 }));
 jest.mock('data/selectors', () => ({
   __esModule: true,

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

@@ -2,23 +2,23 @@
 
 exports[`StatusAlerts snapshots basic snapshot 1`] = `
 <React.Fragment>
-  <Alert
+  <StatusAlert
+    alertType="success"
+    dialog={
+      <FormattedMessage
+        defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
+        description="An alert text for successfully editing  a grade"
+        id="gradebook.GradesView.editSuccessAlert"
+      />
+    }
     onClose={[MockFunction handleCloseSuccessBanner]}
-    show={true}
-    variant="success"
-  >
-    <FormattedMessage
-      defaultMessage="The grade has been successfully edited.  You may see a slight delay before updates appear in the Gradebook."
-      description="An alert text for successfully editing  a grade"
-      id="gradebook.GradesView.editSuccessAlert"
-    />
-  </Alert>
-  <Alert
+    open={true}
+  />
+  <StatusAlert
+    alertType="danger"
+    dialog="the quiCk brown does somEthing or other"
     dismissible={false}
-    show={false}
-    variant="danger"
-  >
-    the quiCk brown does somEthing or other
-  </Alert>
+    open={false}
+  />
 </React.Fragment>
 `;

src/config/index.js

@@ -0,0 +1,16 @@
+const configuration = {
+  BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  LOGIN_URL: process.env.LOGIN_URL,
+  LOGOUT_URL: process.env.LOGOUT_URL,
+  CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+};
+
+const features = {};
+
+export { configuration, features };

src/data/constants/app.js

@@ -32,26 +32,26 @@ export const localFilterKeys = StrictDict({
  */
 export const bulkManagementColumns = [
   {
-    accessor: 'filename',
-    Header: 'Gradebook',
+    key: 'filename',
+    label: 'Gradebook',
     columnSortable: false,
     width: 'col-5',
   },
   {
-    accessor: 'resultsSummary',
-    Header: 'Download Summary',
+    key: 'resultsSummary',
+    label: 'Download Summary',
     columnSortable: false,
     width: 'col',
   },
   {
-    accessor: 'user',
-    Header: 'Who',
+    key: 'user',
+    label: 'Who',
     columnSortable: false,
     width: 'col-1',
   },
   {
-    accessor: 'timeUploaded',
-    Header: 'When',
+    key: 'timeUploaded',
+    label: 'When',
     columnSortable: false,
     width: 'col',
   },

src/data/reducers/app.test.js

@@ -131,7 +131,7 @@ describe('app reducer', () => {
       const mockDate = new Date(8675309);
       let dateSpy;
       beforeEach(() => {
-        dateSpy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+        dateSpy = jest.spyOn(global, 'Date').mockReturnValue(mockDate);
       });
       afterEach(() => {
         dateSpy.mockRestore();

src/data/selectors/grades.js

@@ -3,7 +3,6 @@ import { StrictDict } from 'utils';
 
 import { Headings, GradeFormats } from 'data/constants/grades';
 import { formatDateForDisplay } from 'data/actions/utils';
-import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 import simpleSelectorFactory from '../utils';
 import * as module from './grades';
 
@@ -157,7 +156,7 @@ export const subsectionGrade = StrictDict({
   [GradeFormats.absolute]: (subsection) => {
     const earned = module.roundGrade(subsection.score_earned);
     const possible = module.roundGrade(subsection.score_possible);
-    return subsection.attempted ? `${earned}${isRtl(getLocale()) ? '\\' : '/'}${possible}` : `${earned}`;
+    return subsection.attempted ? `${earned}/${possible}` : `${earned}`;
   },
   /**
    * subsectionGrade.percent(subsection)

src/data/selectors/index.js

@@ -91,10 +91,17 @@ export const formattedGradeLimits = (state) => {
   const { assignmentGradeMax, assignmentGradeMin } = app.assignmentGradeLimits(state);
   const { courseGradeMax, courseGradeMin } = app.courseGradeLimits(state);
   const hasAssignment = filters.selectedAssignmentId(state) !== undefined;
-
+  if (!hasAssignment) {
+    return {
+      assignmentGradeMax: null,
+      assignmentGradeMin: null,
+      courseGradeMax: null,
+      courseGradeMin: null,
+    };
+  }
   return {
-    assignmentGradeMax: (assignmentGradeMax === maxGrade || !hasAssignment) ? null : assignmentGradeMax,
-    assignmentGradeMin: (assignmentGradeMin === minGrade || !hasAssignment) ? null : assignmentGradeMin,
+    assignmentGradeMax: assignmentGradeMax === maxGrade ? null : assignmentGradeMax,
+    assignmentGradeMin: assignmentGradeMin === minGrade ? null : assignmentGradeMin,
     courseGradeMax: courseGradeMax === maxGrade ? null : courseGradeMax,
     courseGradeMin: courseGradeMin === minGrade ? null : courseGradeMin,
   };

src/data/selectors/index.test.js

@@ -260,15 +260,15 @@ describe('root selectors', () => {
     };
     const grade1 = '42';
     const grade2 = '3.14';
-    it('returns an object of nullable assignmentGrades if assignment is not set', () => {
+    it('returns an object of nulls if assignment is not set', () => {
       mockId(undefined);
       mockAssgn(grade1, grade2);
       mockCourse(grade1, grade2);
       expect(selector(testState)).toEqual({
         assignmentGradeMax: null,
         assignmentGradeMin: null,
-        courseGradeMax: '42',
-        courseGradeMin: '3.14',
+        courseGradeMax: null,
+        courseGradeMin: null,
       });
     });
     it('returns null for each extreme iff they are equal their default', () => {

src/data/services/lms/api.js

@@ -14,10 +14,10 @@ const { get, post, stringifyUrl } = utils;
 /*********************************************************************************
  * GET Actions
  *********************************************************************************/
-const assignmentTypes = () => get(urls.getAssignmentTypesUrl());
-const cohorts = () => get(urls.getCohortsUrl());
-const roles = () => get(urls.getRolesUrl());
-const tracks = () => get(urls.getTracksUrl());
+const assignmentTypes = () => get(urls.assignmentTypes);
+const cohorts = () => get(urls.cohorts);
+const roles = () => get(urls.roles);
+const tracks = () => get(urls.tracks);
 
 /**
  * fetch.gradebookData(searchText, cohort, track, options)
@@ -45,7 +45,7 @@ const gradebookData = (searchText, cohort, track, options = {}) => {
     [paramKeys.assignmentGradeMax]: options.assignmentGradeMax,
     [paramKeys.assignmentGradeMin]: options.assignmentGradeMin,
   };
-  return get(stringifyUrl(urls.getGradebookUrl(), queryParams));
+  return get(stringifyUrl(urls.gradebook, queryParams));
 };
 
 /**
@@ -53,7 +53,7 @@ const gradebookData = (searchText, cohort, track, options = {}) => {
  * fetches bulk operation history and raises an error if the operation fails
  * @return {Promise} - get response
  */
-const gradeBulkOperationHistory = () => get(urls.getBulkHistoryUrl())
+const gradeBulkOperationHistory = () => get(urls.bulkHistory)
   .then(response => response.data)
   .catch(() => Promise.reject(Error(messages.errors.unhandledResponse)));
 
@@ -87,7 +87,7 @@ const gradeOverrideHistory = (subsectionId, userId) => (
  *  }
  * @return {Promise} - post response
  */
-const updateGradebookData = (updateData) => post(urls.getBulkUpdateUrl(), updateData);
+const updateGradebookData = (updateData) => post(urls.bulkUpdate, updateData);
 
 /**
  * uploadGradeCsv(formData)

src/data/services/lms/api.test.js

@@ -35,28 +35,28 @@ describe('lms service api', () => {
     describe('fetch.assignmentTypes', () => {
       testSimpleFetch(
         api.fetch.assignmentTypes,
-        urls.getAssignmentTypesUrl(),
+        urls.assignmentTypes,
         'fetches from urls.assignmentTypes',
       );
     });
     describe('fetch.cohorts', () => {
       testSimpleFetch(
         api.fetch.cohorts,
-        urls.getCohortsUrl(),
+        urls.cohorts,
         'fetches from urls.cohorts',
       );
     });
     describe('fetch.roles', () => {
       testSimpleFetch(
         api.fetch.roles,
-        urls.getRolesUrl(),
+        urls.roles,
         'fetches from urls.roles',
       );
     });
     describe('fetch.tracks', () => {
       testSimpleFetch(
         api.fetch.tracks,
-        urls.getTracksUrl(),
+        urls.tracks,
         'fetches from urls.tracks',
       );
     });
@@ -98,7 +98,7 @@ describe('lms service api', () => {
         });
         test('loads only passed values if options is empty', () => (
           api.fetch.gradebookData(searchText, cohort, track).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
+            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
               [paramKeys.pageSize]: pageSize,
               [paramKeys.userContains]: searchText,
               [paramKeys.cohortId]: cohort,
@@ -114,7 +114,7 @@ describe('lms service api', () => {
         ));
         test('loads ["all"] for excludedCorseRoles if not includeCourseRoles', () => (
           api.fetch.gradebookData(searchText, cohort, track, options).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
+            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
               [paramKeys.pageSize]: pageSize,
               [paramKeys.userContains]: searchText,
               [paramKeys.cohortId]: cohort,
@@ -130,7 +130,7 @@ describe('lms service api', () => {
         ));
         test('loads null for excludedCorseRoles if includeCourseRoles', () => (
           api.fetch.gradebookData(searchText, cohort, track, options).then(({ data }) => {
-            expect(data).toEqual(utils.stringifyUrl(urls.getGradebookUrl(), {
+            expect(data).toEqual(utils.stringifyUrl(urls.gradebook, {
               [paramKeys.pageSize]: pageSize,
               [paramKeys.userContains]: searchText,
               [paramKeys.cohortId]: cohort,
@@ -153,7 +153,7 @@ describe('lms service api', () => {
         });
         it('fetches from urls.bulkHistory and returns the data', () => (
           api.fetch.gradeBulkOperationHistory().then(url => {
-            expect(url).toEqual(urls.getBulkHistoryUrl());
+            expect(url).toEqual(urls.bulkHistory);
           })
         ));
       });
@@ -195,7 +195,7 @@ describe('lms service api', () => {
       });
       test('posts to urls.bulkUpdate with passed data', () => (
         api.updateGradebookData(updateData).then(({ data }) => {
-          expect(data).toEqual({ url: urls.getBulkUpdateUrl(), data: updateData });
+          expect(data).toEqual({ url: urls.bulkUpdate, data: updateData });
         })
       ));
     });

src/data/services/lms/urls.js

@@ -1,54 +1,59 @@
-import { getConfig } from '@edx/frontend-platform';
 import { StrictDict } from 'utils';
+import { configuration } from 'config';
 import { historyRecordLimit } from './constants';
 import { filterQuery, stringifyUrl } from './utils';
 
+const baseUrl = `${configuration.LMS_BASE_URL}`;
+
 const courseId = window.location.pathname.split('/').filter(Boolean).pop() || '';
 
-export const getUrlPrefix = () => `${getConfig().LMS_BASE_URL}/api/`;
-export const getBulkGradesUrl = () => `${getUrlPrefix()}bulk_grades/course/${courseId}/`;
-export const getEnrollmentUrl = () => `${getUrlPrefix()}enrollment/v1/`;
-export const getGradesUrl = () => `${getUrlPrefix()}grades/v1/`;
-export const getGradebookUrl = () => `${getGradesUrl()}gradebook/${courseId}/`;
-export const getBulkUpdateUrl = () => `${getGradebookUrl()}bulk-update`;
-export const getInterventionUrl = () => `${getBulkGradesUrl()}intervention/`;
-export const getCohortsUrl = () => `${getUrlPrefix()}courses/${courseId}/cohorts/`;
-export const getTracksUrl = () => `${getEnrollmentUrl()}course/${courseId}?include_expired=1`;
-export const getBulkHistoryUrl = () => `${getBulkUpdateUrl()}history/`;
-export const getAssignmentTypesUrl = () => stringifyUrl(`${getGradebookUrl()}grading-info`, { graded_only: true });
-export const getRolesUrl = () => stringifyUrl(`${getEnrollmentUrl()}roles/`, { courseId });
+const api = `${baseUrl}/api/`;
+const bulkGrades = `${api}bulk_grades/course/${courseId}/`;
+const enrollment = `${api}enrollment/v1/`;
+const grades = `${api}grades/v1/`;
+const gradebook = `${grades}gradebook/${courseId}/`;
+const bulkUpdate = `${gradebook}bulk-update`;
+const intervention = `${bulkGrades}intervention/`;
+
+const cohorts = `${baseUrl}/courses/${courseId}/cohorts/`;
+const tracks = `${enrollment}course/${courseId}?include_expired=1`;
+const bulkHistory = `${bulkGrades}history/`;
+
+const assignmentTypes = stringifyUrl(`${gradebook}grading-info`, { graded_only: true });
+const roles = stringifyUrl(`${enrollment}roles/`, { courseId });
+
 /**
  * bulkGradesUrlByCourseAndRow(courseId, rowId)
  * returns the bulkGrades url with the given rowId.
  * @param {string} rowId - row/error identifier
  * @return {string} - bulk grades fetch url
  */
-export const bulkGradesUrlByRow = (rowId) => stringifyUrl(getBulkGradesUrl(), { error_id: rowId });
+export const bulkGradesUrlByRow = (rowId) => stringifyUrl(bulkGrades, { error_id: rowId });
 
-export const gradeCsvUrl = (options = {}) => stringifyUrl(getBulkGradesUrl(), filterQuery(options));
+export const gradeCsvUrl = (options = {}) => stringifyUrl(bulkGrades, filterQuery(options));
 
 export const interventionExportCsvUrl = (options = {}) => (
-  stringifyUrl(getInterventionUrl(), filterQuery(options))
+  stringifyUrl(intervention, filterQuery(options))
 );
 
 export const sectionOverrideHistoryUrl = (subsectionId, userId) => stringifyUrl(
-  `${getGradesUrl()}subsection/${subsectionId}/`,
+  `${grades}subsection/${subsectionId}/`,
   { user_id: userId, history_record_limit: historyRecordLimit },
 );
 
 export default StrictDict({
-  getUrlPrefix,
-  getBulkGradesUrl,
-  getEnrollmentUrl,
-  getGradesUrl,
-  getGradebookUrl,
-  getBulkUpdateUrl,
-  getInterventionUrl,
-  getCohortsUrl,
-  getTracksUrl,
-  getBulkHistoryUrl,
-  getAssignmentTypesUrl,
-  getRolesUrl,
+  assignmentTypes,
+  bulkGrades,
+  bulkHistory,
+  bulkUpdate,
+  cohorts,
+  enrollment,
+  grades,
+  gradebook,
+  intervention,
+  roles,
+  tracks,
+
   bulkGradesUrlByRow,
   gradeCsvUrl,
   interventionExportCsvUrl,

src/data/services/lms/urls.test.js

@@ -17,7 +17,7 @@ describe('lms api url methods', () => {
     it('returns bulkGrades url with error_id', () => {
       const id = 'heyo';
       expect(bulkGradesUrlByRow(id)).toEqual(
-        utils.stringifyUrl(urls.getBulkGradesUrl(), { error_id: id }),
+        utils.stringifyUrl(urls.bulkGrades, { error_id: id }),
       );
     });
   });
@@ -25,12 +25,12 @@ describe('lms api url methods', () => {
     it('returns bulkGrades with filterQuery-loaded options as query', () => {
       const options = { some: 'fun', query: 'options' };
       expect(gradeCsvUrl(options)).toEqual(
-        utils.stringifyUrl(urls.getBulkGradesUrl(), utils.filterQuery(options)),
+        utils.stringifyUrl(urls.bulkGrades, utils.filterQuery(options)),
       );
     });
     it('defaults options to empty object', () => {
       expect(gradeCsvUrl()).toEqual(
-        utils.stringifyUrl(urls.getBulkGradesUrl(), utils.filterQuery({})),
+        utils.stringifyUrl(urls.bulkGrades, utils.filterQuery({})),
       );
     });
   });
@@ -38,12 +38,12 @@ describe('lms api url methods', () => {
     it('returns intervention url with filterQuery-loaded options as query', () => {
       const options = { some: 'fun', query: 'options' };
       expect(interventionExportCsvUrl(options)).toEqual(
-        utils.stringifyUrl(urls.getInterventionUrl(), utils.filterQuery(options)),
+        utils.stringifyUrl(urls.intervention, utils.filterQuery(options)),
       );
     });
     it('defaults options to empty object', () => {
       expect(interventionExportCsvUrl()).toEqual(
-        utils.stringifyUrl(urls.getInterventionUrl(), utils.filterQuery({})),
+        utils.stringifyUrl(urls.intervention, utils.filterQuery({})),
       );
     });
   });
@@ -53,7 +53,7 @@ describe('lms api url methods', () => {
       const userId = 'Tom';
       expect(sectionOverrideHistoryUrl(subsectionId, userId)).toEqual(
         utils.stringifyUrl(
-          `${urls.getGradesUrl()}subsection/${subsectionId}/`,
+          `${urls.grades}subsection/${subsectionId}/`,
           { user_id: userId, history_record_limit: historyRecordLimit },
         ),
       );

src/data/store.js

@@ -4,19 +4,19 @@ import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProductio
 import { createLogger } from 'redux-logger';
 import { createMiddleware } from 'redux-beacon';
 import Segment from '@redux-beacon/segment';
-import { getConfig } from '@edx/frontend-platform';
 
 import actions from './actions';
 import selectors from './selectors';
 import reducers from './reducers';
 import eventsMap from './services/segment/mapping';
+import { configuration } from '../config';
 
 export const createStore = () => {
   const loggerMiddleware = createLogger();
 
   const middleware = [thunkMiddleware, loggerMiddleware];
   // Conditionally add the segmentMiddleware only if the SEGMENT_KEY environment variable exists.
-  if (getConfig().SEGMENT_KEY) {
+  if (configuration.SEGMENT_KEY) {
     middleware.push(createMiddleware(eventsMap, Segment()));
   }
   const store = redux.createStore(

src/data/store.test.js

@@ -4,12 +4,12 @@ import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProductio
 import { createLogger } from 'redux-logger';
 import { createMiddleware } from 'redux-beacon';
 import Segment from '@redux-beacon/segment';
-import { getConfig } from '@edx/frontend-platform';
 
 import actions from './actions';
 import selectors from './selectors';
 import reducers from './reducers';
 import eventsMap from './services/segment/mapping';
+import { configuration } from '../config';
 
 import exportedStore, { createStore } from './store';
 
@@ -22,10 +22,10 @@ jest.mock('redux-logger', () => ({
   createLogger: () => 'logger',
 }));
 jest.mock('redux-thunk', () => 'thunkMiddleware');
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(() => ({
+jest.mock('../config', () => ({
+  configuration: {
     SEGMENT_KEY: 'a-fake-segment-key',
-  })),
+  },
 }));
 jest.mock('redux-beacon', () => ({
   createMiddleware: jest.fn((map, model) => ({ map, model })),
@@ -60,9 +60,9 @@ describe('store aggregator module', () => {
         });
       });
       describe('if no SEGMENT_KEY', () => {
-        const key = getConfig().SEGMENT_KEY;
+        const key = configuration.SEGMENT_KEY;
         beforeEach(() => {
-          getConfig.mockImplementation(() => ({ SEGMENT_KEY: false }));
+          configuration.SEGMENT_KEY = false;
         });
         it('exports thunk and logger middleware, composed and applied with dev tools', () => {
           expect(createStore().middleware).toEqual(
@@ -70,7 +70,7 @@ describe('store aggregator module', () => {
           );
         });
         afterEach(() => {
-          getConfig.mockImplementation(() => ({ SEGMENT_KEY: key }));
+          configuration.SEGMENT_KEY = key;
         });
       });
     });

src/head/Head.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from './messages';
-
-const Head = ({ intl }) => (
-  <Helmet>
-    <title>
-      {intl.formatMessage(messages['gradebook.page.title'], { siteName: getConfig().SITE_NAME })}
-    </title>
-    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-  </Helmet>
-);
-
-Head.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(Head);

src/head/Head.test.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { Helmet } from 'react-helmet';
-import { mount } from 'enzyme';
-import { getConfig } from '@edx/frontend-platform';
-import Head from './Head';
-
-describe('Head', () => {
-  const props = {};
-  it('should match render title tag and favicon with the site configuration values', () => {
-    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
-    const helmet = Helmet.peek();
-    expect(helmet.title).toEqual(`Gradebook | ${getConfig().SITE_NAME}`);
-    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
-    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
-  });
-});

src/head/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'gradebook.page.title': {
-    id: 'gradebook.page.title',
-    defaultMessage: 'Gradebook | {siteName}',
-    description: 'Title tag',
-  },
-});
-
-export default messages;

src/i18n/messages/ar.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/es_419.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/fr.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Motif",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Editer les filtres",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Note totale (%)",
   "gradebook.GradesView.table.headings.username": "Nom d’utilisateur",
   "gradebook.GradesView.table.labels.studentKey": "Clé d'étudiant",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Note du cours",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/zh_CN.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/transifex_input.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/index.jsx

@@ -7,7 +7,6 @@ import ReactDOM from 'react-dom';
 import {
   APP_READY,
   initialize,
-  mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
 import { messages as headerMessages } from '@edx/frontend-component-header';
@@ -21,22 +20,6 @@ subscribe(APP_READY, () => {
 });
 
 initialize({
-  handlers: {
-    config: () => {
-      mergeConfig({
-        BASE_URL: process.env.BASE_URL,
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
-        REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
-        DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
-        SECURE_COOKIES: process.env.NODE_ENV !== 'development',
-        SEGMENT_KEY: process.env.SEGMENT_KEY,
-        ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
-      });
-    },
-  },
   messages: [
     appMessages,
     headerMessages,

src/index.test.jsx

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 import {
   APP_READY,
   initialize,
-  mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
 import { messages as headerMessages } from '@edx/frontend-component-header';
@@ -20,7 +19,6 @@ jest.mock('react-dom', () => ({
 jest.mock('@edx/frontend-platform', () => ({
   APP_READY: 'app-is-ready-key',
   initialize: jest.fn(),
-  mergeConfig: jest.fn(),
   subscribe: jest.fn(),
 }));
 jest.mock('@edx/frontend-component-header', () => ({
@@ -48,23 +46,10 @@ describe('app registry', () => {
       ReactDOM.render(<App />, document.getElementById('root')),
     );
   });
-  test('initialize is called with requireAuthenticatedUser, messages, and a config handler', () => {
+  test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledWith({
       messages: [appMessages, headerMessages, footerMessages],
       requireAuthenticatedUser: true,
-      handlers: {
-        config: expect.any(Function),
-      },
     });
   });
-  test('initialize config loads LMS_BASE_URL from env', () => {
-    const oldEnv = process.env;
-    const initializeArg = initialize.mock.calls[0][0];
-    process.env = { ...oldEnv, LMS_BASE_URL: 'http://example.com/fake' };
-    initializeArg.handlers.config();
-    expect(mergeConfig).toHaveBeenCalledWith(
-      expect.objectContaining({ LMS_BASE_URL: 'http://example.com/fake' }),
-    );
-    process.env = oldEnv;
-  });
 });

src/segment.js

@@ -1,6 +1,6 @@
 // The code in this file is from Segment's website:
 // https://segment.com/docs/sources/website/analytics.js/quickstart/
-import { getConfig } from '@edx/frontend-platform';
+import { configuration } from './config';
 
 (function () {
   // Create a queue, but don't obliterate an existing one!
@@ -81,5 +81,5 @@ import { getConfig } from '@edx/frontend-platform';
 
   // Load Analytics.js with your key, which will automatically
   // load the tools you've enabled for your account. Boosh!
-  analytics.load(getConfig().SEGMENT_KEY);
+  analytics.load(configuration.SEGMENT_KEY);
 }());

src/setupTest.js

@@ -8,8 +8,6 @@ Enzyme.configure({ adapter: new Adapter() });
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.LMS_BASE_URL = 'http://localhost:18000';
-process.env.SITE_NAME = 'localhost';
-process.env.FAVICON_URL = 'http://localhost:18000/favicon.ico';
 
 jest.mock('@edx/frontend-platform/i18n', () => {
   const i18n = jest.requireActual('@edx/frontend-platform/i18n');

src/testUtils.js

@@ -1,187 +0,0 @@
-import react from 'react';
-
-import { StrictDict } from 'utils';
-
-/**
- * Mocked formatMessage provided by react-intl
- */
-export const formatMessage = (msg, values) => {
-  let message = msg.defaultMessage;
-  if (values === undefined) {
-    return message;
-  }
-  Object.keys(values).forEach((key) => {
-    // eslint-disable-next-line
-    message = message.replace(`{${key}}`, values[key]);
-  });
-  return message;
-};
-
-/**
- * Mock a single component, or a nested component so that its children render nicely
- * in snapshots.
- * @param {string} name - parent component name
- * @param {obj} contents - object of child components with intended component
- *   render name.
- * @return {func} - mock component with nested children.
- *
- * usage:
- *   mockNestedComponent('Card', { Body: 'Card.Body', Form: { Control: { Feedback: 'Form.Control.Feedback' }}... });
- *   mockNestedComponent('IconButton', 'IconButton');
- */
-export const mockNestedComponent = (name, contents) => {
-  if (typeof contents !== 'object') {
-    return contents;
-  }
-  const fn = () => name;
-  Object.defineProperty(fn, 'name', { value: name });
-  Object.keys(contents).forEach((nestedName) => {
-    const value = contents[nestedName];
-    fn[nestedName] = typeof value !== 'object'
-      ? value
-      : mockNestedComponent(`${name}.${nestedName}`, value);
-  });
-  return fn;
-};
-
-/**
- * Mock a module of components.  nested components will be rendered nicely in snapshots.
- * @param {obj} mapping - component module mock config.
- * @return {obj} - module of flat and nested components that will render nicely in snapshots.
- * usage:
- *   mockNestedComponents({
- *     Card: { Body: 'Card.Body' },
- *     IconButton: 'IconButton',
- *   })
- */
-export const mockNestedComponents = (mapping) => Object.entries(mapping).reduce(
-  (obj, [name, value]) => ({
-    ...obj,
-    [name]: mockNestedComponent(name, value),
-  }),
-  {},
-);
-
-/**
- * Mock utility for working with useState in a hooks module.
- * Expects/requires an object containing the state object in order to ensure
- * the mock behavior works appropriately.
- *
- * Expected format:
- *   hooks = { state: { <key>: (val) => React.createRef(val), ... } }
- *
- * Returns a utility for mocking useState and providing access to specific state values
- * and setState methods, as well as allowing per-test configuration of useState value returns.
- *
- * Example usage:
- *   // hooks.js
- *   import * as module from './hooks';
- *   const state = {
- *     isOpen: (val) => React.useState(val),
- *     hasDoors: (val) => React.useState(val),
- *     selected: (val) => React.useState(val),
- *   };
- *   ...
- *   export const exampleHook = () => {
- *     const [isOpen, setIsOpen] = module.state.isOpen(false);
- *     if (!isOpen) { return null; }
- *     return { isOpen, setIsOpen };
- *   }
- *   ...
- *
- *   // hooks.test.js
- *   import * as hooks from './hooks';
- *   const state = new MockUseState(hooks)
- *   ...
- *   describe('state hooks', () => {
- *     state.testGetter(state.keys.isOpen);
- *     state.testGetter(state.keys.hasDoors);
- *     state.testGetter(state.keys.selected);
- *   });
- *   describe('exampleHook', () => {
- *     beforeEach(() => { state.mock(); });
- *     it('returns null if isOpen is default value', () => {
- *       expect(hooks.exampleHook()).toEqual(null);
- *     });
- *     it('returns isOpen and setIsOpen if isOpen is not null', () => {
- *       state.mockVal(state.keys.isOpen, true);
- *       expect(hooks.exampleHook()).toEqual({
- *         isOpen: true,
- *         setIsOpen: state.setState[state.keys.isOpen],
- *       });
- *     });
- *     afterEach(() => { state.restore(); });
- *   });
- *
- * @param {obj} hooks - hooks module containing a 'state' object
- */
-export class MockUseState {
-  constructor(hooks) {
-    this.hooks = hooks;
-    this.oldState = null;
-    this.setState = {};
-    this.stateVals = {};
-
-    this.mock = this.mock.bind(this);
-    this.restore = this.restore.bind(this);
-    this.mockVal = this.mockVal.bind(this);
-    this.testGetter = this.testGetter.bind(this);
-  }
-
-  /**
-   * @return {object} - StrictDict of state object keys
-   */
-  get keys() {
-    return StrictDict(Object.keys(this.hooks.state).reduce(
-      (obj, key) => ({ ...obj, [key]: key }),
-      {},
-    ));
-  }
-
-  /**
-   * Replace the hook module's state object with a mocked version, initialized to default values.
-   */
-  mock() {
-    this.oldState = this.hooks.state;
-    Object.keys(this.keys).forEach(key => {
-      this.hooks.state[key] = jest.fn(val => {
-        this.stateVals[key] = val;
-        return [val, this.setState[key]];
-      });
-    });
-    this.setState = Object.keys(this.keys).reduce(
-      (obj, key) => ({
-        ...obj,
-        [key]: jest.fn(val => {
-          this.hooks.state[key] = val;
-        }),
-      }),
-      {},
-    );
-  }
-
-  /**
-   * Restore the hook module's state object to the actual code.
-   */
-  restore() {
-    this.hooks.state = this.oldState;
-  }
-
-  /**
-   * Mock the state getter associated with a single key to return a specific value one time.
-   * @param {string} key - state key (from this.keys)
-   * @param {any} val - new value to be returned by the useState call.
-   */
-  mockVal(key, val) {
-    this.hooks.state[key].mockReturnValueOnce([val, this.setState[key]]);
-  }
-
-  testGetter(key) {
-    test(`${key} state getter should return useState passthrough`, () => {
-      const testValue = 'some value';
-      const useState = (val) => ({ useState: val });
-      jest.spyOn(react, 'useState').mockImplementationOnce(useState);
-      expect(this.hooks.state[key](testValue)).toEqual(useState(testValue));
-    });
-  }
-}

src/utils/StrictDict.js

@@ -4,10 +4,6 @@ const strictGet = (target, name) => {
     return target;
   }
 
-  if (name === '$$typeof') {
-    return typeof target;
-  }
-
   if (name in target || name === '_reactFragment') {
     return target[name];
   }

src/utils/StrictDict.test.js

@@ -45,9 +45,6 @@ describe('StrictDict', () => {
   it('allows entry listing', () => {
     expect(Object.entries(dict)).toEqual(Object.entries(rawDict));
   });
-  it('allows $$typeof access', () => {
-    expect(dict.$$typeof).toEqual(typeof rawDict);
-  });
   describe('missing key', () => {
     it('logs error with target, name, and error stack', () => {
       // eslint-ignore-next-line no-unused-vars