Merge pull request #161 from muselesscreator/update_axios

update axios and frontend-platform

.env

@@ -1,4 +1,5 @@
 NODE_ENV='production',
+NODE_PATH=./src
 BASE_URL=null,
 LMS_BASE_URL=null,
 LOGIN_URL=null,

.env.development

@@ -4,6 +4,11 @@ BASE_URL='localhost:1994'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/login'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'

.gitignore

@@ -12,3 +12,5 @@ dist/
 
 ### Emacs ###
 *~
+*.swo
+*.swp

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://api.travis-ci.org/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.org/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)
+[![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)
@@ -12,7 +12,39 @@ Please tag **@edx/educator-neem** on any PRs or issues.
 
 The front-end of our editable Gradebook feature.
 
-## Usage
+### What does this offer over the legacy gradebook?
+
+![A screenshot of the grade listings](documentation/screenshots/grade-listings.png)
+
+The micro-frontend offers a great deal more granularity when searching for problems, an easy interface for editing grades, an 
+audit trail for seeing who edited what grade and what reason they gave (if any) for doing so.
+
+![Screenshot of the grade editing interface](documentation/screenshots/grade-editing.png)
+
+UsageProblems can be filtered by student as in the traditional gradebook, but can also be filtered by scores to see who
+scored within a certain range, and by assignment types (note: Not problem types, but categories like ‘Exams’ or
+‘Homework’).
+
+![Screenshot of the filtering options](documentation/screenshots/grade-filtering.png)
+
+### What does the legacy gradebook offer that this project does not?
+
+This project does not (yet, at least) create any graphs, which the traditional gradebook does. It also does not give
+quick links to the problems for the instructor to visit. It expects the instructor to be familiar with the problems they
+are grading and which unit they refer to.
+
+The gradebook is expected to be much more performant for larger numbers of students as well. The Instructor Dashboard
+link for the legacy gradebook reports that "this feature is available only to courses with a small number of enrolled 
+learners." However, this project comes with no such warning.
+
+### Who should not change to this gradebook?
+
+Groups whose instructors need not ever manually override grades do not need this project, but may not be any worse off
+depending on their needs. Instructors that expect to review grades infrequently enough that not having a direct link
+to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
+generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
+
+## Installation
 
 To install gradebook into your project:
 ```
@@ -49,6 +81,10 @@ in which you'd like to enable the gradebook.  Add a course override flag using a
 ``grades.writable_gradebook``.  Make sure to check the ``enabled`` box.  Alternatively, you could add this as a
 regular waffle flag to enable the gradebook for all courses.
 
+**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
+numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
+recalculated grade values, verify you've set all flags correctly.
+
 ## Running tests
 
 1. Assuming that you're operating in the context of the edX devstack,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -26,9 +26,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.11",
-    "@edx/frontend-platform": "1.5.0",
-    "@edx/paragon": "10.0.1",
+    "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
+    "@edx/frontend-component-footer": "10.1.1",
+    "@edx/frontend-platform": "1.8.1",
+    "@edx/paragon": "12.4.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -58,8 +59,8 @@
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "5.2.0",
-    "axios": "0.19.2",
+    "@edx/frontend-build": "5.5.2",
+    "axios": "0.21.1",
     "axios-mock-adapter": "^1.17.0",
     "codecov": "^3.6.1",
     "enzyme": "^3.10.0",
@@ -71,7 +72,7 @@
     "react-dev-utils": "^5.0.3",
     "react-test-renderer": "^16.10.1",
     "redux-mock-store": "^1.5.3",
-    "semantic-release": "^15.13.24",
+    "semantic-release": "^17.2.3",
     "travis-deploy-once": "^5.0.11"
   }
 }

public/index.html

@@ -4,6 +4,7 @@
       <title>Gradebook | edX</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

src/App.scss

@@ -1,5 +1,8 @@
-
-@import "~@edx/paragon/scss/edx/theme.scss";
+// frontend-app-*/src/index.scss
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
@@ -10,4 +13,3 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
 
 @import "./components/Gradebook/gradebook";
 @import "./components/Drawer/Drawer";
-

src/components/Gradebook/Assignments.jsx

@@ -0,0 +1,206 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import {
+  Button,
+  Collapsible,
+  InputSelect,
+  InputText,
+} from '@edx/paragon';
+import { selectableAssignmentLabels } from '../../data/selectors/filters';
+import {
+  filterAssignmentType,
+  fetchGrades,
+  updateGradesIfAssignmentGradeFiltersSet,
+} from '../../data/actions/grades';
+import {
+  updateAssignmentFilter,
+  updateAssignmentLimits,
+} from '../../data/actions/filters';
+
+export class Assignments extends React.Component {
+  getAssignmentFilterOptions = () => [
+    { label: 'All', value: '' },
+    ...this.props.assignmentFilterOptions.map(({ label, subsectionLabel }) => ({
+      label: `${label}: ${subsectionLabel}`,
+      value: label,
+    })),
+  ];
+
+  handleAssignmentFilterChange = (assignment) => {
+    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig => assig.label === assignment);
+    const { type, id } = selectedFilterOption || {};
+    const typedValue = { label: assignment, type, id };
+    this.props.updateAssignmentFilter(typedValue);
+    this.updateQueryParams({ assignment: id });
+    this.props.updateGradesIfAssignmentGradeFiltersSet(
+      this.props.courseId,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+      this.props.selectedAssignmentType,
+    );
+  };
+
+  handleSubmitAssignmentGrade = (event) => {
+    event.preventDefault();
+    const {
+      assignmentGradeMin,
+      assignmentGradeMax,
+    } = this.props;
+
+    this.props.updateAssignmentLimits(assignmentGradeMin, assignmentGradeMax);
+    this.props.getUserGrades(
+      this.props.courseId,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+      this.props.selectedAssignmentType,
+    );
+    this.props.updateQueryParams({ assignmentGradeMin, assignmentGradeMax });
+  };
+
+  mapAssignmentTypeEntries = (entries) => {
+    const mapped = [
+      { id: 0, label: 'All', value: '' },
+      ...entries.map(entry => ({ id: entry, label: entry })),
+    ];
+    return mapped;
+  };
+
+  updateAssignmentTypes = (assignmentType) => {
+    this.props.filterAssignmentType(assignmentType);
+    this.updateQueryParams({ assignmentType });
+  }
+
+  render() {
+    return (
+      <Collapsible title="Assignments" defaultOpen className="filter-group mb-3">
+        <div>
+          <div className="student-filters">
+            <span className="label">
+              Assignment Types:
+            </span>
+            <InputSelect
+              label="Assignment Types"
+              name="assignment-types"
+              aria-label="Assignment Types"
+              value={this.props.selectedAssignmentType}
+              options={this.mapAssignmentTypeEntries(this.props.assignmentTypes)}
+              onChange={this.updateAssignmentTypes}
+              disabled={this.props.assignmentFilterOptions.length === 0}
+            />
+          </div>
+          <div className="student-filters">
+            <span className="label">
+              Assignment:
+            </span>
+            <InputSelect
+              label="Assignment"
+              name="assignment"
+              aria-label="Assignment"
+              value={this.props.selectedAssignment}
+              options={this.getAssignmentFilterOptions()}
+              onChange={this.handleAssignmentFilterChange}
+              disabled={this.props.assignmentFilterOptions.length === 0}
+            />
+          </div>
+          <p>Grade Range (0% - 100%)</p>
+          <form className="grade-filter-inputs" onSubmit={this.handleSubmitAssignmentGrade}>
+            <div className="percent-group">
+              <InputText
+                label="Min Grade"
+                name="assignmentGradeMin"
+                type="number"
+                min={0}
+                max={100}
+                step={1}
+                value={this.props.assignmentGradeMin}
+                disabled={!this.props.selectedAssignment}
+                onChange={this.props.setAssignmentGradeMin}
+              />
+              <span className="input-percent-label">%</span>
+            </div>
+            <div className="percent-group">
+              <InputText
+                label="Max Grade"
+                name="assignmentGradeMax"
+                type="number"
+                min={0}
+                max={100}
+                step={1}
+                value={this.props.assignmentGradeMax}
+                disabled={!this.props.selectedAssignment}
+                onChange={this.props.setAssignmentGradeMax}
+              />
+              <span className="input-percent-label">%</span>
+            </div>
+            <div className="grade-filter-action">
+              <Button
+                type="submit"
+                className="btn-outline-secondary"
+                name="assignmentGradeMinMax"
+                disabled={!this.props.selectedAssignment}
+              >
+                Apply
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Collapsible>
+    );
+  }
+}
+
+Assignments.defaultProps = {
+  assignmentTypes: [],
+  assignmentFilterOptions: [],
+  selectedAssignment: '',
+  selectedAssignmentType: '',
+  selectedCohort: null,
+  selectedTrack: null,
+};
+
+Assignments.propTypes = {
+  assignmentGradeMin: PropTypes.string.isRequired,
+  assignmentGradeMax: PropTypes.string.isRequired,
+  courseId: PropTypes.string.isRequired,
+  setAssignmentGradeMin: PropTypes.func.isRequired,
+  setAssignmentGradeMax: PropTypes.func.isRequired,
+  updateQueryParams: PropTypes.func.isRequired,
+
+  // redux
+  assignmentTypes: PropTypes.arrayOf(PropTypes.string),
+  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    subsectionLabel: PropTypes.string,
+  })),
+  filterAssignmentType: PropTypes.func.isRequired,
+  getUserGrades: PropTypes.func.isRequired,
+  selectedAssignmentType: PropTypes.string,
+  selectedAssignment: PropTypes.string,
+  selectedCohort: PropTypes.string,
+  selectedTrack: PropTypes.string,
+  updateGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
+  updateAssignmentFilter: PropTypes.func.isRequired,
+  updateAssignmentLimits: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  assignmentTypes: state.assignmentTypes.results,
+  assignmentFilterOptions: selectableAssignmentLabels(state),
+  selectedAssignment: (state.filters.assignment || {}).label,
+  selectedAssignmentTypes: state.filters.assignmentType,
+  selectedCohort: state.filters.cohort,
+  selectedTrack: state.filters.track,
+});
+
+export const mapDispatchToProps = {
+  getUserGrades: fetchGrades,
+  filterAssignmentType,
+  updateAssignmentFilter,
+  updateAssignmentLimits,
+  updateGradesIfAssignmentGradeFiltersSet,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Assignments);

src/components/Gradebook/BulkManagement.jsx

@@ -0,0 +1,199 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import {
+  Button,
+  StatusAlert,
+  Table,
+} from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { configuration } from '../../config';
+
+import { submitFileUploadFormData } from '../../data/actions/grades';
+import { getBulkManagementHistory } from '../../data/selectors/grades';
+
+export class BulkManagement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.fileFormRef = React.createRef();
+    this.fileInputRef = React.createRef();
+  }
+
+  formatHistoryRow = (row) => {
+    const {
+      summaryOfRowsProcessed: {
+        total,
+        successfullyProcessed,
+        failed,
+        skipped,
+      },
+      unique_id: courseId,
+      originalFilename,
+      id,
+      user: username,
+      ...rest
+    } = row;
+    const resultsText = [
+      `${total} Students: ${successfullyProcessed} processed`,
+      ...(skipped > 0 ? [`${skipped} skipped`] : []),
+      ...(failed > 0 ? [`${failed} failed`] : []),
+    ].join(', ');
+    const resultsSummary = (
+      <a
+        href={`${configuration.LMS_BASE_URL}/api/bulk_grades/course/${courseId}/?error_id=${id}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FontAwesomeIcon icon={faDownload} />
+        {resultsText}
+      </a>
+    );
+    const createWrappedCell = (text) => (<span className="wrap-text-in-cell">{text}</span>);
+    const filename = createWrappedCell(originalFilename);
+    const user = createWrappedCell(username);
+    return {
+      resultsSummary,
+      filename,
+      user,
+      ...rest,
+    };
+  };
+
+  handleClickImportGrades = () => {
+    const fileInput = this.fileInputRef.current;
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
+  handleFileInputChange = (event) => {
+    const fileInput = event.target;
+    const file = fileInput.files[0];
+    const form = this.fileFormRef.current;
+    if (file && form) {
+      const formData = new FormData(form);
+      this.props.submitFileUploadFormData(this.props.courseId, formData).then(() => {
+        fileInput.value = null;
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <h4>Use this feature by downloading a CSV for bulk management,
+          overriding grades locally, and coming back here to upload.
+        </h4>
+        <form ref={this.fileFormRef} action={this.props.gradeExportUrl} method="post">
+          <StatusAlert
+            alertType="danger"
+            dialog={this.props.bulkImportError}
+            isOpen={this.props.bulkImportError}
+            dismissible={false}
+          />
+          <StatusAlert
+            alertType="success"
+            dialog="CSV processing. File uploads may take several minutes to complete"
+            open={this.props.uploadSuccess}
+            dismissible={false}
+          />
+          <input
+            className="d-none"
+            type="file"
+            name="csv"
+            label="Upload Grade CSV"
+            onChange={this.handleFileInputChange}
+            ref={this.fileInputRef}
+          />
+        </form>
+        <Button
+          variant="primary"
+          onClick={this.handleClickImportGrades}
+        >
+          Import Grades
+        </Button>
+        <p>
+          Results appear in the table below.<br />
+          Grade processing may take a few seconds.
+        </p>
+        <Table
+          data={this.props.bulkManagementHistory.map(this.formatHistoryRow)}
+          hasFixedColumnWidths
+          columns={[
+            {
+              key: 'filename',
+              label: 'Gradebook',
+              columnSortable: false,
+              width: 'col-5',
+            },
+            {
+              key: 'resultsSummary',
+              label: 'Download Summary',
+              columnSortable: false,
+              width: 'col',
+            },
+            {
+              key: 'user',
+              label: 'Who',
+              columnSortable: false,
+              width: 'col-1',
+            },
+            {
+              key: 'timeUploaded',
+              label: 'When',
+              columnSortable: false,
+              width: 'col',
+            },
+          ]}
+          className="table-striped"
+        />
+      </div>
+    );
+  }
+}
+
+BulkManagement.defaultProps = {
+  bulkImportError: '',
+  bulkManagementHistory: [],
+  courseId: '',
+  uploadSuccess: false,
+};
+
+BulkManagement.propTypes = {
+  courseId: PropTypes.string,
+  gradeExportUrl: PropTypes.string.isRequired,
+
+  // redux
+  bulkImportError: PropTypes.string,
+  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
+    originalFilename: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+    timeUploaded: PropTypes.string.isRequired,
+    summaryOfRowsProcessed: PropTypes.shape({
+      total: PropTypes.number.isRequired,
+      successfullyProcessed: PropTypes.number.isRequired,
+      failed: PropTypes.number.isRequired,
+      skipped: PropTypes.number.isRequired,
+    }).isRequired,
+  })),
+  submitFileUploadFormData: PropTypes.func.isRequired,
+  uploadSuccess: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  bulkImportError: state.grades.bulkManagement
+    && state.grades.bulkManagement.errorMessages
+    ? `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}`
+    : '',
+  bulkManagementHistory: getBulkManagementHistory(state),
+  uploadSuccess: !!(state.grades.bulkManagement && state.grades.bulkManagement.uploadSuccess),
+});
+
+export const mapDispatchToProps = {
+  submitFileUploadFormData,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagement);

src/components/Gradebook/BulkManagementControls.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { StatefulButton } from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
+
+import {
+  downloadBulkGradesReport,
+  downloadInterventionReport,
+} from '../../data/actions/grades';
+
+export class BulkManagementControls extends React.Component {
+  handleClickDownloadInterventions = () => {
+    this.props.downloadInterventionReport(this.props.courseId);
+    window.location = this.props.interventionExportUrl;
+  };
+
+  // At present, we don't store label and value in google analytics. By setting the label
+  // property of the below events, I want to verify that we can set the label of google anlatyics
+  // The following properties of a google analytics event are:
+  // category (used), name(used), lavel(not used), value(not used)
+  handleClickExportGrades = () => {
+    this.props.downloadBulkGradesReport(this.props.courseId);
+    window.location = this.props.gradeExportUrl;
+  };
+
+  render() {
+    return (
+      <div>
+        <StatefulButton
+          variant="outline-primary"
+          onClick={this.handleClickExportGrades}
+          state={this.props.showSpinner ? 'pending' : 'default'}
+          labels={{
+            default: 'Bulk Management',
+            pending: 'Bulk Management',
+          }}
+          icons={{
+            default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
+            pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
+          }}
+          disabledStates={['pending']}
+        />
+        <StatefulButton
+          variant="outline-primary"
+          onClick={this.handleClickDownloadInterventions}
+          state={this.props.showSpinner ? 'pending' : 'default'}
+          className="ml-2"
+          labels={{
+            default: 'Interventions*',
+            pending: 'Interventions*',
+          }}
+          icons={{
+            default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
+            pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
+          }}
+          disabledStates={['pending']}
+        />
+      </div>
+    );
+  }
+}
+
+BulkManagementControls.defaultProps = {
+  courseId: '',
+  showSpinner: false,
+};
+
+BulkManagementControls.propTypes = {
+  courseId: PropTypes.string,
+  gradeExportUrl: PropTypes.string.isRequired,
+  interventionExportUrl: PropTypes.string.isRequired,
+  showSpinner: PropTypes.bool,
+
+  // redux
+  downloadBulkGradesReport: PropTypes.func.isRequired,
+  downloadInterventionReport: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = () => ({ });
+
+export const mapDispatchToProps = {
+  downloadBulkGradesReport,
+  downloadInterventionReport,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);

src/components/Gradebook/EditModal.jsx

@@ -0,0 +1,203 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import {
+  Button,
+  Modal,
+  StatusAlert,
+  Table,
+} from '@edx/paragon';
+
+import {
+  doneViewingAssignment,
+  updateGrades,
+} from '../../data/actions/grades';
+
+const GRADE_OVERRIDE_HISTORY_COLUMNS = [{ label: 'Date', key: 'date' }, { label: 'Grader', key: 'grader' },
+  { label: 'Reason', key: 'reason' },
+  { label: 'Adjusted grade', key: 'adjustedGrade' }];
+
+export class EditModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.overrideReasonInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.overrideReasonInput.current.focus();
+  }
+
+  handleAdjustedGradeClick = () => {
+    this.props.updateGrades(
+      this.props.courseId, [
+        {
+          user_id: this.props.updateUserId,
+          usage_id: this.props.updateModuleId,
+          grade: {
+            earned_graded_override: this.props.adjustedGradeValue,
+            comment: this.props.reasonForChange,
+          },
+        },
+      ],
+      this.props.filterValue,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+    );
+
+    this.closeAssignmentModal();
+  }
+
+  closeAssignmentModal = () => {
+    this.props.doneViewingAssignment();
+    this.props.setGradebookState({
+      adjustedGradePossible: '',
+      adjustedGradeValue: '',
+      modalOpen: false,
+      reasonForChange: '',
+      updateModuleId: null,
+      updateUserId: null,
+    });
+  };
+
+  render() {
+    return (
+      <Modal
+        open={this.props.open}
+        title="Edit Grades"
+        closeText="Cancel"
+        body={(
+          <div>
+            <div>
+              <div className="grade-history-header grade-history-assignment">Assignment: </div>
+              <div>{this.props.assignmentName}</div>
+              <div className="grade-history-header grade-history-student">Student: </div>
+              <div>{this.props.updateUserName}</div>
+              <div className="grade-history-header grade-history-original-grade">Original Grade: </div>
+              <div>{this.props.gradeOriginalEarnedGraded}</div>
+              <div className="grade-history-header grade-history-current-grade">Current Grade: </div>
+              <div>{this.props.gradeOverrideCurrentEarnedGradedOverride}</div>
+            </div>
+            <StatusAlert
+              alertType="danger"
+              dialog={this.props.gradeOverrideHistoryError}
+              open={!!this.props.gradeOverrideHistoryError}
+              dismissible={false}
+            />
+            {!this.props.gradeOverrideHistoryError && (
+              <Table
+                columns={GRADE_OVERRIDE_HISTORY_COLUMNS}
+                data={[...this.props.gradeOverrides, {
+                  date: this.props.todaysDate,
+                  reason: (<input
+                    type="text"
+                    name="reasonForChange"
+                    value={this.props.reasonForChange}
+                    onChange={this.props.setReasonForChange}
+                    ref={this.overrideReasonInput}
+                  />),
+                  adjustedGrade: (
+                    <span>
+                      <input
+                        type="text"
+                        name="adjustedGradeValue"
+                        value={this.props.adjustedGradeValue}
+                        onChange={this.props.setAdjustedGradeValue}
+                      />
+                      {(this.props.adjustedGradePossible || this.props.gradeOriginalPossibleGraded) && ' / '}
+                      {this.props.adjustedGradePossible || this.props.gradeOriginalPossibleGraded}
+                    </span>),
+                }]}
+              />
+            )}
+
+            <div>Showing most recent actions (max 5). To see more, please contact
+              support.
+            </div>
+            <div>Note: Once you save, your changes will be visible to students.</div>
+          </div>
+        )}
+        buttons={[
+          <Button
+            variant="primary"
+            onClick={this.handleAdjustedGradeClick}
+          >
+            Save Grade
+          </Button>,
+        ]}
+        onClose={this.closeAssignmentModal}
+      />
+    );
+  }
+}
+
+EditModal.defaultProps = {
+  adjustedGradeValue: null,
+  courseId: '',
+  gradeOverrideCurrentEarnedGradedOverride: null,
+  gradeOverrideHistoryError: '',
+  gradeOverrides: [],
+  gradeOriginalEarnedGraded: null,
+  gradeOriginalPossibleGraded: null,
+  selectedCohort: null,
+  selectedTrack: null,
+  updateModuleId: '',
+  updateUserId: '',
+  updateUserName: '',
+};
+
+EditModal.propTypes = {
+  courseId: PropTypes.string,
+
+  // Gradebook State
+  adjustedGradePossible: PropTypes.string.isRequired,
+  // should pick one?
+  adjustedGradeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  assignmentName: PropTypes.string.isRequired,
+  filterValue: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  reasonForChange: PropTypes.string.isRequired,
+  todaysDate: PropTypes.string.isRequired,
+  updateModuleId: PropTypes.string,
+  updateUserId: PropTypes.number,
+  updateUserName: PropTypes.string,
+
+  // Gradebook State Setters
+  setAdjustedGradeValue: PropTypes.func.isRequired,
+  setGradebookState: PropTypes.func.isRequired,
+  setReasonForChange: PropTypes.func.isRequired,
+
+  // redux
+  doneViewingAssignment: PropTypes.func.isRequired,
+  gradeOverrideCurrentEarnedGradedOverride: PropTypes.number,
+  gradeOverrideHistoryError: PropTypes.string,
+  gradeOverrides: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.string,
+    grader: PropTypes.string,
+    reason: PropTypes.string,
+    adjustedGrade: PropTypes.number,
+  })),
+  gradeOriginalEarnedGraded: PropTypes.number,
+  gradeOriginalPossibleGraded: PropTypes.number,
+  selectedCohort: PropTypes.string,
+  selectedTrack: PropTypes.string,
+  updateGrades: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradeOverrides: state.grades.gradeOverrideHistoryResults,
+  gradeOverrideCurrentEarnedGradedOverride: state.grades.gradeOverrideCurrentEarnedGradedOverride,
+  gradeOverrideHistoryError: state.grades.gradeOverrideHistoryError,
+  gradeOriginalEarnedGraded: state.grades.gradeOriginalEarnedGraded,
+  grdaeOriginalPossibleGraded: state.grades.grdaeOriginalPossibleGraded,
+  selectedCohort: state.filters.cohort,
+  selectedTrack: state.filters.track,
+});
+
+export const mapDispatchToProps = {
+  doneViewingAssignment,
+  updateGrades,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditModal);

src/components/Gradebook/GradebookTable.jsx

@@ -0,0 +1,203 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Table } from '@edx/paragon';
+
+import { formatDateForDisplay } from '../../data/actions/utils';
+import { getHeadings } from '../../data/selectors/grades';
+import { fetchGradeOverrideHistory } from '../../data/actions/grades';
+
+const DECIMAL_PRECISION = 2;
+
+export class GradebookTable extends React.Component {
+  setNewModalState = (userEntry, subsection) => {
+    this.props.fetchGradeOverrideHistory(
+      subsection.module_id,
+      userEntry.user_id,
+    );
+
+    let adjustedGradePossible = '';
+    if (subsection.attempted) {
+      adjustedGradePossible = subsection.score_possible;
+    }
+
+    this.props.setGradebookState({
+      adjustedGradePossible,
+      adjustedGradeValue: '',
+      assignmentName: `${subsection.subsection_name}`,
+      modalOpen: true,
+      reasonForChange: '',
+      todaysDate: formatDateForDisplay(new Date()),
+      updateModuleId: subsection.module_id,
+      updateUserId: userEntry.user_id,
+      updateUserName: userEntry.username,
+    });
+  }
+
+  getLearnerInformation = entry => (
+    <div>
+      <div>{entry.username}</div>
+      {entry.external_user_key && <div className="student-key">{entry.external_user_key}</div>}
+    </div>
+  )
+
+  roundGrade = percent => parseFloat((percent || 0).toFixed(DECIMAL_PRECISION));
+
+  formatter = {
+    percent: (entries, areGradesFrozen) => entries.map((entry) => {
+      const learnerInformation = this.getLearnerInformation(entry);
+      const results = {
+        Username: (
+          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
+        ),
+        Email: (
+          <span className="wrap-text-in-cell">{entry.email}</span>
+        ),
+      };
+
+      const assignments = entry.section_breakdown
+        .reduce((acc, subsection) => {
+          if (areGradesFrozen) {
+            acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style grade-button"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {this.roundGrade(subsection.percent * 100)}%
+              </button>
+            );
+          }
+          return acc;
+        }, {});
+      const totals = { Total: `${this.roundGrade(entry.percent * 100)}%` };
+      return Object.assign(results, assignments, totals);
+    }),
+
+    absolute: (entries, areGradesFrozen) => entries.map((entry) => {
+      const learnerInformation = this.getLearnerInformation(entry);
+      const results = {
+        Username: (
+          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
+        ),
+        Email: (
+          <span className="wrap-text-in-cell">{entry.email}</span>
+        ),
+      };
+
+      const assignments = entry.section_breakdown
+        .reduce((acc, subsection) => {
+          const scoreEarned = this.roundGrade(subsection.score_earned);
+          const scorePossible = this.roundGrade(subsection.score_possible);
+          let label = `${scoreEarned}`;
+          if (subsection.attempted) {
+            label = `${scoreEarned}/${scorePossible}`;
+          }
+          if (areGradesFrozen) {
+            acc[subsection.label] = label;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {label}
+              </button>
+            );
+          }
+          return acc;
+        }, {});
+
+      const totals = { Total: `${this.roundGrade(entry.percent * 100)}/100` };
+      return Object.assign(results, assignments, totals);
+    }),
+  };
+
+  formatHeadings = () => {
+    let headings = [...this.props.headings];
+
+    if (headings.length > 0) {
+      const userInformationHeadingLabel = (
+        <div>
+          <div>Username</div>
+          <div className="font-weight-normal student-key">Student Key*</div>
+        </div>
+      );
+      const emailHeadingLabel = 'Email*';
+
+      headings = headings.map(heading => ({
+        label: heading,
+        key: heading,
+      }));
+
+      // replace username heading label to include additional user data
+      headings[0].label = userInformationHeadingLabel;
+      headings[1].label = emailHeadingLabel;
+    }
+
+    return headings;
+  }
+
+  render() {
+    return (
+      <div className="gradebook-container">
+        <div className="gbook">
+          <Table
+            columns={this.formatHeadings()}
+            data={this.formatter[this.props.format](
+              this.props.grades,
+              this.props.areGradesFrozen,
+            )}
+            rowHeaderColumnKey="username"
+            hasFixedColumnWidths
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+GradebookTable.defaultProps = {
+  areGradesFrozen: false,
+  grades: [],
+};
+
+GradebookTable.propTypes = {
+  setGradebookState: PropTypes.func.isRequired,
+  // redux
+  areGradesFrozen: PropTypes.bool,
+  format: PropTypes.string.isRequired,
+  grades: PropTypes.arrayOf(PropTypes.shape({
+    percent: PropTypes.number,
+    section_breakdown: PropTypes.arrayOf(PropTypes.shape({
+      attempted: PropTypes.bool,
+      category: PropTypes.string,
+      label: PropTypes.string,
+      module_id: PropTypes.string,
+      percent: PropTypes.number,
+      scoreEarned: PropTypes.number,
+      scorePossible: PropTypes.number,
+      subsection_name: PropTypes.string,
+    })),
+    user_id: PropTypes.number,
+    user_name: PropTypes.string,
+  })),
+  headings: PropTypes.arrayOf(PropTypes.string).isRequired,
+  fetchGradeOverrideHistory: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  areGradesFrozen: state.assignmentTypes.areGradesFrozen,
+  format: state.grades.gradeFormat,
+  grades: state.grades.results,
+  headings: getHeadings(state),
+});
+
+export const mapDispatchToProps = {
+  fetchGradeOverrideHistory,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookTable);

src/components/Gradebook/gradebook.scss

@@ -113,10 +113,10 @@
       td:nth-child(1),
       th:nth-child(2),
       td:nth-child(2) {
-        min-width: 240px;
+        width: 240px;
       }
       th, td {
-        min-width: 120px;
+        width: 120px;
       }
     }
     .table tbody th {
@@ -151,10 +151,33 @@
             text-decoration: underline;
         }
     }
+
 }
 
-.input-percent-label {
-    margin-top: 10px;
+.form-group {
+  label {
+    font-weight: bold;
+  }
+}
+
+.filter-group {
+  .grade-filter-inputs {
+    .percent-group {
+      display: inline-block;
+      .form-group {
+        width: 115px;
+        display: inline-block;
+      }
+      .input-percent-label {
+          margin-top: 22px;
+          margin-left: 5px;
+          margin-right: 5px;
+      }
+    }
+  }
+  .grade-filter-action {
+    text-align: right;
+  }
 }
 
 .mb-85 {

src/components/Gradebook/index.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -7,48 +7,46 @@ import {
   Icon,
   InputSelect,
   InputText,
-  Modal,
   SearchField,
-  StatefulButton,
   StatusAlert,
-  Table,
   Tab,
   Tabs,
 } from '@edx/paragon';
 import queryString from 'query-string';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload, faSpinner, faFilter } from '@fortawesome/free-solid-svg-icons';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { configuration } from '../../config';
 import PageButtons from '../PageButtons';
 import Drawer from '../Drawer';
-import { formatDateForDisplay } from '../../data/actions/utils';
 import initialFilters from '../../data/constants/filters';
 import ConnectedFilterBadges from '../FilterBadges';
 
-const DECIMAL_PRECISION = 2;
-const GRADE_OVERRIDE_HISTORY_COLUMNS = [{ label: 'Date', key: 'date' }, { label: 'Grader', key: 'grader' },
-  { label: 'Reason', key: 'reason' },
-  { label: 'Adjusted grade', key: 'adjustedGrade' }];
+import Assignments from './Assignments';
+import BulkManagement from './BulkManagement';
+import BulkManagementControls from './BulkManagementControls';
+import EditModal from './EditModal';
+import GradebookTable from './GradebookTable';
 
 export default class Gradebook extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      filterValue: '',
-      courseGradeMin: '0',
-      courseGradeMax: '100',
-      modalOpen: false,
+      adjustedGradePossible: '',
       adjustedGradeValue: 0,
-      updateModuleId: null,
-      updateUserId: null,
-      reasonForChange: '',
       assignmentGradeMin: '0',
       assignmentGradeMax: '100',
+      assignmentName: '',
+      courseGradeMin: '0',
+      courseGradeMax: '100',
+      filterValue: '',
       isMinCourseGradeFilterValid: true,
       isMaxCourseGradeFilterValid: true,
+      modalOpen: false,
+      reasonForChange: '',
+      todaysDate: '',
+      updateModuleId: null,
+      updateUserId: null,
     };
-    this.fileFormRef = React.createRef();
-    this.fileInputRef = React.createRef();
     this.myRef = React.createRef();
   }
 
@@ -56,7 +54,6 @@ export default class Gradebook extends React.Component {
     const urlQuery = queryString.parse(this.props.location.search);
     this.props.initializeFilters(urlQuery);
     this.props.getRoles(this.props.courseId);
-    this.overrideReasonInput.focus();
 
     const newStateFields = {};
     ['assignmentGradeMin', 'assignmentGradeMax', 'courseGradeMin', 'courseGradeMax'].forEach((attr) => {
@@ -72,37 +69,6 @@ export default class Gradebook extends React.Component {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  setNewModalState = (userEntry, subsection) => {
-    this.props.fetchGradeOverrideHistory(
-      subsection.module_id,
-      userEntry.user_id,
-    );
-
-    let adjustedGradePossible = '';
-    if (subsection.attempted) {
-      adjustedGradePossible = subsection.score_possible;
-    }
-
-    this.setState({
-      modalAssignmentName: `${subsection.subsection_name}`,
-      modalOpen: true,
-      updateModuleId: subsection.module_id,
-      updateUserId: userEntry.user_id,
-      updateUserName: userEntry.username,
-      todaysDate: formatDateForDisplay(new Date()),
-      adjustedGradePossible,
-      reasonForChange: '',
-      adjustedGradeValue: '',
-    });
-  }
-
-  getLearnerInformation = entry => (
-    <div>
-      <div>{entry.username}</div>
-      {entry.external_user_key && <div className="student-key">{entry.external_user_key}</div>}
-    </div>
-  )
-
   getActiveTabs = () => {
     if (this.props.showBulkManagement) {
       return ['Grades', 'Bulk Management'];
@@ -110,17 +76,6 @@ export default class Gradebook extends React.Component {
     return ['Grades'];
   };
 
-  getAssignmentFilterOptions = () => [
-    { label: 'All', value: '' },
-    ...this.props.assignmentFilterOptions.map((assignment) => {
-      const { label, subsectionLabel } = assignment;
-      return {
-        label: `${label}: ${subsectionLabel}`,
-        value: label,
-      };
-    }),
-  ];
-
   getCourseGradeFilterAlertDialog = () => {
     let dialog = '';
 
@@ -133,52 +88,6 @@ export default class Gradebook extends React.Component {
     return dialog;
   };
 
-  handleAdjustedGradeClick = () => {
-    this.props.updateGrades(
-      this.props.courseId, [
-        {
-          user_id: this.state.updateUserId,
-          usage_id: this.state.updateModuleId,
-          grade: {
-            earned_graded_override: this.state.adjustedGradeValue,
-            comment: this.state.reasonForChange,
-          },
-        },
-      ],
-      this.state.filterValue,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-    );
-
-    this.closeAssignmentModal();
-  }
-
-  closeAssignmentModal = () => {
-    this.props.doneViewingAssignment();
-    this.setState({
-      adjustedGradePossible: '',
-      adjustedGradeValue: '',
-      modalOpen: false,
-      reasonForChange: '',
-      updateModuleId: null,
-      updateUserId: null,
-    });
-  };
-
-  handleAssignmentFilterChange = (assignment) => {
-    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig => assig.label === assignment);
-    const { type, id } = selectedFilterOption || {};
-    const typedValue = { label: assignment, type, id };
-    this.props.updateAssignmentFilter(typedValue);
-    this.updateQueryParams({ assignment: id });
-    this.props.updateGradesIfAssignmentGradeFiltersSet(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-  };
-
   updateQueryParams = (queryParams) => {
     const parsed = queryString.parse(this.props.location.search);
     Object.keys(queryParams).forEach((key) => {
@@ -191,15 +100,6 @@ export default class Gradebook extends React.Component {
     this.props.history.push(`?${queryString.stringify(parsed)}`);
   };
 
-  mapAssignmentTypeEntries = (entries) => {
-    const mapped = entries.map(entry => ({
-      id: entry,
-      label: entry,
-    }));
-    mapped.unshift({ id: 0, label: 'All', value: '' });
-    return mapped;
-  };
-
   mapCohortsEntries = (entries) => {
     const mapped = entries.map(entry => ({
       id: entry.id,
@@ -218,58 +118,6 @@ export default class Gradebook extends React.Component {
     return mapped;
   };
 
-  formatHistoryRow = (row) => {
-    const {
-      summaryOfRowsProcessed: {
-        total,
-        successfullyProcessed,
-        failed,
-        skipped,
-      },
-      unique_id: courseId,
-      originalFilename,
-      id,
-      user: username,
-      ...rest
-    } = row;
-    const resultsText = [
-      `${total} Students: ${successfullyProcessed} processed`,
-      ...(skipped > 0 ? [`${skipped} skipped`] : []),
-      ...(failed > 0 ? [`${failed} failed`] : []),
-    ].join(', ');
-    const resultsSummary = (
-      <a
-        href={`${configuration.LMS_BASE_URL}/api/bulk_grades/course/${courseId}/?error_id=${id}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FontAwesomeIcon icon={faDownload} />
-        {resultsText}
-      </a>
-    );
-    const filename = (
-      <span className="wrap-text-in-cell">
-        {originalFilename}
-      </span>
-    );
-    const user = (
-      <span className="wrap-text-in-cell">
-        {username}
-      </span>
-    );
-    return {
-      resultsSummary,
-      filename,
-      user,
-      ...rest,
-    };
-  };
-
-  updateAssignmentTypes = (assignmentType) => {
-    this.props.filterAssignmentType(assignmentType);
-    this.updateQueryParams({ assignmentType });
-  }
-
   updateTracks = (event) => {
     const selectedTrackItem = this.props.tracks.find(x => x.name === event);
     let selectedTrackSlug = null;
@@ -300,60 +148,6 @@ export default class Gradebook extends React.Component {
     this.updateQueryParams({ cohort: selectedCohortId });
   };
 
-  // At present, we don't store label and value in google analytics. By setting the label
-  // property of the below events, I want to verify that we can set the label of google anlatyics
-  // The following properties of a google analytics event are:
-  // category (used), name(used), lavel(not used), value(not used)
-  handleClickExportGrades = () => {
-    this.props.downloadBulkGradesReport(this.props.courseId);
-    window.location = this.props.gradeExportUrl;
-  };
-
-  handleClickDownloadInterventions = () => {
-    this.props.downloadInterventionReport(this.props.courseId);
-    window.location = this.props.interventionExportUrl;
-  };
-
-  handleClickImportGrades = () => {
-    const fileInput = this.fileInputRef.current;
-    if (fileInput) {
-      fileInput.click();
-    }
-  };
-
-  handleFileInputChange = (event) => {
-    const fileInput = event.target;
-    const file = fileInput.files[0];
-    const form = this.fileFormRef.current;
-    if (file && form) {
-      const formData = new FormData(form);
-      this.props.submitFileUploadFormData(this.props.courseId, formData).then(() => {
-        fileInput.value = null;
-      });
-    }
-  };
-
-  handleSubmitAssignmentGrade = (event) => {
-    event.preventDefault();
-    const {
-      assignmentGradeMin,
-      assignmentGradeMax,
-    } = this.state;
-
-    this.props.updateAssignmentLimits(assignmentGradeMin, assignmentGradeMax);
-    this.props.getUserGrades(
-      this.props.courseId,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-      this.props.selectedAssignmentType,
-    );
-    this.updateQueryParams({ assignmentGradeMin, assignmentGradeMax });
-  };
-
-  handleMinAssigGradeChange = assignmentGradeMin => this.setState({ assignmentGradeMin });
-
-  handleMaxAssigGradeChange = assignmentGradeMax => this.setState({ assignmentGradeMax });
-
   mapSelectedCohortEntry = (entry) => {
     const selectedCohortEntry = this.props.cohorts.find(x => x.id === parseInt(entry, 10));
     if (selectedCohortEntry) {
@@ -370,103 +164,8 @@ export default class Gradebook extends React.Component {
     return 'Tracks';
   };
 
-  roundGrade = percent => parseFloat((percent || 0).toFixed(DECIMAL_PRECISION));
-
-  formatter = {
-    percent: (entries, areGradesFrozen) => entries.map((entry) => {
-      const learnerInformation = this.getLearnerInformation(entry);
-      const results = {
-        Username: (
-          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
-        ),
-        Email: (
-          <span className="wrap-text-in-cell">{entry.email}</span>
-        ),
-      };
-
-      const assignments = entry.section_breakdown
-        .reduce((acc, subsection) => {
-          if (areGradesFrozen) {
-            acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
-          } else {
-            acc[subsection.label] = (
-              <button
-                className="btn btn-header link-style grade-button"
-                onClick={() => this.setNewModalState(entry, subsection)}
-              >
-                {this.roundGrade(subsection.percent * 100)}%
-              </button>
-            );
-          }
-          return acc;
-        }, {});
-      const totals = { Total: `${this.roundGrade(entry.percent * 100)}%` };
-      return Object.assign(results, assignments, totals);
-    }),
-
-    absolute: (entries, areGradesFrozen) => entries.map((entry) => {
-      const learnerInformation = this.getLearnerInformation(entry);
-      const results = {
-        Username: (
-          <div><span className="wrap-text-in-cell">{learnerInformation}</span></div>
-        ),
-        Email: (
-          <span className="wrap-text-in-cell">{entry.email}</span>
-        ),
-      };
-
-      const assignments = entry.section_breakdown
-        .reduce((acc, subsection) => {
-          const scoreEarned = this.roundGrade(subsection.score_earned);
-          const scorePossible = this.roundGrade(subsection.score_possible);
-          let label = `${scoreEarned}`;
-          if (subsection.attempted) {
-            label = `${scoreEarned}/${scorePossible}`;
-          }
-          if (areGradesFrozen) {
-            acc[subsection.label] = label;
-          } else {
-            acc[subsection.label] = (
-              <button
-                className="btn btn-header link-style"
-                onClick={() => this.setNewModalState(entry, subsection)}
-              >
-                {label}
-              </button>
-            );
-          }
-          return acc;
-        }, {});
-
-      const totals = { Total: `${this.roundGrade(entry.percent * 100)}/100` };
-      return Object.assign(results, assignments, totals);
-    }),
-  };
-
   lmsInstructorDashboardUrl = courseId => `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`;
 
-  formatHeadings = () => {
-    let headings = [...this.props.headings];
-
-    if (headings.length > 0) {
-      const userInformationHeadingLabel = (
-        <div>
-          <div>Username</div>
-          <div className="font-weight-normal student-key">Student Key*</div>
-        </div>
-      );
-      const emailHeadingLabel = 'Email*';
-
-      headings = headings.map(heading => ({ label: heading, key: heading }));
-
-      // replace username heading label to include additional user data
-      headings[0].label = userInformationHeadingLabel;
-      headings[1].label = emailHeadingLabel;
-    }
-
-    return headings;
-  }
-
   handleCourseGradeFilterChange = (type, value) => {
     const filterValue = value;
 
@@ -539,6 +238,29 @@ export default class Gradebook extends React.Component {
     );
   }
 
+  createStateFieldSetter = (key) => (value) => this.setState({ [key]: value });
+
+  createStateFieldOnChange = (key) => ({ target }) => this.setState({ [key]: target.value });
+
+  createLimitedSetter = (...keys) => (values) => this.setState(
+    keys.reduce(
+      (obj, key) => (values[key] === undefined ? obj : { ...obj, [key]: values[key] }),
+      {},
+    ),
+  )
+
+  safeSetState = this.createLimitedSetter(
+    'adjustedGradePossible',
+    'adjustedGradeValue',
+    'assignmnentName',
+    'modalOpen',
+    'reasonForChange',
+    'todaysDate',
+    'updateModuleId',
+    'updateUserId',
+    'updateUserName',
+  );
+
   render() {
     return (
       <Drawer
@@ -631,189 +353,45 @@ export default class Gradebook extends React.Component {
                     onChange={this.props.toggleFormat}
                   />
                   {this.props.showBulkManagement && (
-                    <div>
-                      <StatefulButton
-                        variant="outline-primary"
-                        onClick={this.handleClickExportGrades}
-                        state={this.props.showSpinner ? 'pending' : 'default'}
-                        labels={{
-                          default: 'Bulk Management',
-                          pending: 'Bulk Management',
-                        }}
-                        icons={{
-                          default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
-                          pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
-                        }}
-                        disabledStates={['pending']}
-                      />
-                      <StatefulButton
-                        variant="outline-primary"
-                        onClick={this.handleClickDownloadInterventions}
-                        state={this.props.showSpinner ? 'pending' : 'default'}
-                        className="ml-2"
-                        labels={{
-                          default: 'Interventions*',
-                          pending: 'Interventions*',
-                        }}
-                        icons={{
-                          default: <FontAwesomeIcon className="mr-2" icon={faDownload} />,
-                          pending: <FontAwesomeIcon className="fa-spin mr-2" icon={faSpinner} />,
-                        }}
-                        disabledStates={['pending']}
-                      />
-                    </div>
+                    <BulkManagementControls
+                      courseId={this.props.courseId}
+                      gradeExportUrl={this.props.gradeExportUrl}
+                      interventionExportUrl={this.props.interventionExportUrl}
+                      showSpinner={this.props.showSpinner}
+                    />
                   )}
                 </div>
-                <div className="gradebook-container">
-                  <div className="gbook">
-                    <Table
-                      columns={this.formatHeadings()}
-                      data={this.formatter[this.props.format](
-                        this.props.grades,
-                        this.props.areGradesFrozen,
-                      )}
-                      rowHeaderColumnKey="username"
-                      hasFixedColumnWidths
-                    />
-                  </div>
-                </div>
+                <GradebookTable setGradebookState={this.safeSetState} />
                 {PageButtons(this.props)}
                 <p>* available for learners in the Master&apos;s track only</p>
-                <Modal
+                <EditModal
+                  assignmentName={this.state.assignmentName}
+                  adjustedGradeValue={this.state.adjustedGradeValue}
+                  adjustedGradePossible={this.state.adjustedGradePossible}
+                  courseId={this.props.courseId}
+                  filterValue={this.state.filterValue}
+                  onChange={this.onChange}
                   open={this.state.modalOpen}
-                  title="Edit Grades"
-                  closeText="Cancel"
-                  body={(
-                    <div>
-                      <div>
-                        <div className="grade-history-header grade-history-assignment">Assignment: </div> <div>{this.state.modalAssignmentName}</div>
-                        <div className="grade-history-header grade-history-student">Student: </div> <div>{this.state.updateUserName}</div>
-                        <div className="grade-history-header grade-history-original-grade">Original Grade: </div> <div>{this.props.gradeOriginalEarnedGraded}</div>
-                        <div className="grade-history-header grade-history-current-grade">Current Grade: </div> <div>{this.props.gradeOverrideCurrentEarnedGradedOverride}</div>
-                      </div>
-                      <StatusAlert
-                        alertType="danger"
-                        dialog={this.props.gradeOverrideHistoryError}
-                        open={this.props.gradeOverrideHistoryError}
-                        dismissible={false}
-                      />
-                      {!this.props.gradeOverrideHistoryError && (
-                        <Table
-                          columns={GRADE_OVERRIDE_HISTORY_COLUMNS}
-                          data={[...this.props.gradeOverrides, {
-                            date: this.state.todaysDate,
-                            reason: (<input
-                              type="text"
-                              name="reasonForChange"
-                              value={this.state.reasonForChange}
-                              onChange={value => this.onChange(value)}
-                              ref={(input) => { this.overrideReasonInput = input; }}
-                            />),
-                            adjustedGrade: (
-                              <span>
-                                <input
-                                  type="text"
-                                  name="adjustedGradeValue"
-                                  value={this.state.adjustedGradeValue}
-                                  onChange={value => this.onChange(value)}
-                                />
-                                {(this.state.adjustedGradePossible
-                                  || this.props.gradeOriginalPossibleGraded)
-                                 && ' / '}
-                                {this.state.adjustedGradePossible
-                                 || this.props.gradeOriginalPossibleGraded}
-                              </span>),
-                          }]}
-                        />
-                      )}
-
-                      <div>Showing most recent actions (max 5). To see more, please contact
-                        support.
-                      </div>
-                      <div>Note: Once you save, your changes will be visible to students.</div>
-                    </div>
-                  )}
-                  buttons={[
-                    <Button
-                      variant="primary"
-                      onClick={this.handleAdjustedGradeClick}
-                    >
-                      Save Grade
-                    </Button>,
-                  ]}
-                  onClose={this.closeAssignmentModal}
+                  reasonForChange={this.state.reasonForChange}
+                  setAdjustedGradeValue={this.createStateFieldOnChange('adjustedGradeValue')}
+                  setGradebookState={this.safeSetState}
+                  setReasonForChange={this.createStateFieldOnChange('reasonForChange')}
+                  todaysDate={this.state.todaysDate}
+                  updateModuleId={this.state.updateModuleId}
+                  updateUserId={this.state.updateUserId}
+                  updateUserName={this.state.updateUserName}
                 />
+
               </Tab>
-              {this.props.showBulkManagement && (
+              {this.props.showBulkManagement
+                && (
                 <Tab eventKey="bulk_management" title="Bulk Management">
-                  <h4>Use this feature by downloading a CSV for bulk management,
-                    overriding grades locally, and coming back here to upload.
-                  </h4>
-                  <form ref={this.fileFormRef} action={this.props.gradeExportUrl} method="post">
-                    <StatusAlert
-                      alertType="danger"
-                      dialog={this.props.bulkImportError}
-                      open={this.props.bulkImportError}
-                      dismissible={false}
-                    />
-                    <StatusAlert
-                      alertType="success"
-                      dialog="CSV processing. File uploads may take several minutes to complete"
-                      open={this.props.uploadSuccess}
-                      dismissible={false}
-                    />
-                    <input
-                      className="d-none"
-                      type="file"
-                      name="csv"
-                      label="Upload Grade CSV"
-                      onChange={this.handleFileInputChange}
-                      ref={this.fileInputRef}
-                    />
-                  </form>
-                  <Button
-                    variant="primary"
-                    onClick={this.handleClickImportGrades}
-                  >
-                    Import Grades
-                  </Button>
-                  <p>
-                    Results appear in the table below.<br />
-                    Grade processing may take a few seconds.
-                  </p>
-                  <Table
-                    data={this.props.bulkManagementHistory.map(this.formatHistoryRow)}
-                    hasFixedColumnWidths
-                    columns={[
-                      {
-                        key: 'filename',
-                        label: 'Gradebook',
-                        columnSortable: false,
-                        width: 'col-5',
-                      },
-                      {
-                        key: 'resultsSummary',
-                        label: 'Download Summary',
-                        columnSortable: false,
-                        width: 'col',
-                      },
-                      {
-                        key: 'user',
-                        label: 'Who',
-                        columnSortable: false,
-                        width: 'col-1',
-                      },
-                      {
-                        key: 'timeUploaded',
-                        label: 'When',
-                        columnSortable: false,
-                        width: 'col',
-                      },
-                    ]}
-                    className="table-striped"
+                  <BulkManagement
+                    courseId={this.props.courseId}
+                    gradeExportUrl={this.props.gradeExportUrl}
                   />
                 </Tab>
-              )}
+                )}
             </Tabs>
           </div>
         )}
@@ -824,95 +402,42 @@ export default class Gradebook extends React.Component {
           </>
         )}
       >
-        <Collapsible title="Assignments" open className="filter-group mb-3">
-          <div>
-            <div className="student-filters">
-              <span className="label">
-                Assignment Types:
-              </span>
-              <InputSelect
-                label="Assignment Types"
-                name="assignment-types"
-                aria-label="Assignment Types"
-                value={this.props.selectedAssignmentType}
-                options={this.mapAssignmentTypeEntries(this.props.assignmentTypes)}
-                onChange={this.updateAssignmentTypes}
-                disabled={this.props.assignmentFilterOptions.length === 0}
-              />
-            </div>
-            <div className="student-filters">
-              <span className="label">
-                Assignment:
-              </span>
-              <InputSelect
-                label="Assignment"
-                name="assignment"
-                aria-label="Assignment"
-                value={this.props.selectedAssignment}
-                options={this.getAssignmentFilterOptions()}
-                onChange={this.handleAssignmentFilterChange}
-                disabled={this.props.assignmentFilterOptions.length === 0}
-              />
-            </div>
-            <p>Grade Range (0% - 100%)</p>
-            <form className="d-flex justify-content-between align-items-center" onSubmit={this.handleSubmitAssignmentGrade}>
+        <Assignments
+          assignmentGradeMin={this.state.assignmentGradeMin}
+          assignmentGradeMax={this.state.assignmentGradeMax}
+          courseId={this.props.courseId}
+          setAssignmentGradeMin={this.createStateFieldSetter('assignmentGradeMin')}
+          setAssignmentGradeMax={this.createStateFieldSetter('assignmentGradeMax')}
+          updateQueryParams={this.updateQueryParams}
+        />
+        <Collapsible title="Overall Grade" defaultOpen className="filter-group mb-3">
+          <div className="grade-filter-inputs">
+            <div className="percent-group">
               <InputText
+                value={this.state.courseGradeMin}
+                name="minimum-grade"
                 label="Min Grade"
-                name="assignmentGradeMin"
+                onChange={value => this.handleCourseGradeFilterChange('min', value)}
                 type="number"
                 min={0}
                 max={100}
-                step={1}
-                value={this.state.assignmentGradeMin}
-                disabled={!this.props.selectedAssignment}
-                onChange={this.handleMinAssigGradeChange}
               />
               <span className="input-percent-label">%</span>
+            </div>
+            <div className="percent-group">
               <InputText
+                value={this.state.courseGradeMax}
+                name="max-grade"
                 label="Max Grade"
-                name="assignmentGradeMax"
+                onChange={value => this.handleCourseGradeFilterChange('max', value)}
                 type="number"
                 min={0}
                 max={100}
-                step={1}
-                value={this.state.assignmentGradeMax}
-                disabled={!this.props.selectedAssignment}
-                onChange={this.handleMaxAssigGradeChange}
               />
               <span className="input-percent-label">%</span>
-              <Button
-                type="submit"
-                className="btn-outline-secondary"
-                name="assignmentGradeMinMax"
-                disabled={!this.props.selectedAssignment}
-              >
-                Apply
-              </Button>
-            </form>
+            </div>
           </div>
-        </Collapsible>
-        <Collapsible title="Overall Grade" open className="filter-group mb-3">
-          <div className="d-flex justify-content-between align-items-center">
-            <InputText
-              value={this.state.courseGradeMin}
-              name="minimum-grade"
-              label="Min Grade"
-              onChange={value => this.handleCourseGradeFilterChange('min', value)}
-              type="number"
-              min={0}
-              max={100}
-            />
-            <span className="input-percent-label">%</span>
-            <InputText
-              value={this.state.courseGradeMax}
-              name="max-grade"
-              label="Max Grade"
-              onChange={value => this.handleCourseGradeFilterChange('max', value)}
-              type="number"
-              min={0}
-              max={100}
-            />
-            <span className="input-percent-label">%</span>
+          <div className="grade-filter-action">
             <Button
               variant="outline-secondary"
               onClick={this.handleCourseGradeFilterApplyButtonClick}
@@ -921,7 +446,7 @@ export default class Gradebook extends React.Component {
             </Button>
           </div>
         </Collapsible>
-        <Collapsible title="Student Groups" open className="filter-group mb-3">
+        <Collapsible title="Student Groups" defaultOpen className="filter-group mb-3">
           <InputSelect
             label="Tracks"
             name="Tracks"
@@ -948,123 +473,55 @@ export default class Gradebook extends React.Component {
 
 Gradebook.defaultProps = {
   areGradesFrozen: false,
-  assignmentTypes: [],
-  assignmentFilterOptions: [],
   canUserViewGradebook: false,
   cohorts: [],
-  grades: [],
-  gradeOverrides: [],
-  gradeOverrideCurrentEarnedGradedOverride: null,
-  gradeOriginalEarnedGraded: null,
-  gradeOriginalPossibleGraded: null,
+  courseId: '',
+  filteredUsersCount: null,
   location: {
     search: '',
   },
-  courseId: '',
+  selectedAssignmentType: '',
   selectedCohort: null,
   selectedTrack: null,
-  selectedAssignmentType: '',
-  selectedAssignment: '',
-  showSpinner: false,
-  tracks: [],
-  bulkImportError: '',
-  uploadSuccess: false,
   showBulkManagement: false,
-  bulkManagementHistory: [],
-  gradeOverrideHistoryError: '',
+  showSpinner: false,
   totalUsersCount: null,
-  filteredUsersCount: null,
+  tracks: [],
 };
 
 Gradebook.propTypes = {
   areGradesFrozen: PropTypes.bool,
-  assignmentTypes: PropTypes.arrayOf(PropTypes.string),
-  assignmentFilterOptions: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    subsectionLabel: PropTypes.string,
-  })),
   canUserViewGradebook: PropTypes.bool,
+  closeBanner: PropTypes.func.isRequired,
   cohorts: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     id: PropTypes.number,
   })),
-  filterAssignmentType: PropTypes.func.isRequired,
-  updateAssignmentFilter: PropTypes.func.isRequired,
-  updateAssignmentLimits: PropTypes.func.isRequired,
-  format: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  filteredUsersCount: PropTypes.number,
   getRoles: PropTypes.func.isRequired,
   getUserGrades: PropTypes.func.isRequired,
-  fetchGradeOverrideHistory: PropTypes.func.isRequired,
-  grades: PropTypes.arrayOf(PropTypes.shape({
-    percent: PropTypes.number,
-    section_breakdown: PropTypes.arrayOf(PropTypes.shape({
-      attempted: PropTypes.bool,
-      category: PropTypes.string,
-      label: PropTypes.string,
-      module_id: PropTypes.string,
-      percent: PropTypes.number,
-      scoreEarned: PropTypes.number,
-      scorePossible: PropTypes.number,
-      subsection_name: PropTypes.string,
-    })),
-    user_id: PropTypes.number,
-    user_name: PropTypes.string,
-  })),
-  gradeOverrides: PropTypes.arrayOf(PropTypes.shape({
-    date: PropTypes.string,
-    grader: PropTypes.string,
-    reason: PropTypes.string,
-    adjustedGrade: PropTypes.number,
-  })),
-  gradeOverrideCurrentEarnedGradedOverride: PropTypes.number,
-  gradeOriginalEarnedGraded: PropTypes.number,
-  gradeOriginalPossibleGraded: PropTypes.number,
-  doneViewingAssignment: PropTypes.func.isRequired,
-  headings: PropTypes.arrayOf(PropTypes.string).isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
   history: PropTypes.shape({
     push: PropTypes.func,
   }).isRequired,
+  initializeFilters: PropTypes.func.isRequired,
+  interventionExportUrl: PropTypes.string.isRequired,
   location: PropTypes.shape({
     search: PropTypes.string,
   }),
-  courseId: PropTypes.string,
+  resetFilters: PropTypes.func.isRequired,
   searchForUser: PropTypes.func.isRequired,
   selectedAssignmentType: PropTypes.string,
-  selectedAssignment: PropTypes.string,
   selectedCohort: PropTypes.string,
   selectedTrack: PropTypes.string,
-  resetFilters: PropTypes.func.isRequired,
+  showBulkManagement: PropTypes.bool,
   showSpinner: PropTypes.bool,
   showSuccess: PropTypes.bool.isRequired,
   toggleFormat: PropTypes.func.isRequired,
+  totalUsersCount: PropTypes.number,
   tracks: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
   })),
-  closeBanner: PropTypes.func.isRequired,
-  updateGrades: PropTypes.func.isRequired,
-  gradeExportUrl: PropTypes.string.isRequired,
-  interventionExportUrl: PropTypes.string.isRequired,
-  submitFileUploadFormData: PropTypes.func.isRequired,
-  bulkImportError: PropTypes.string,
-  uploadSuccess: PropTypes.bool,
-  gradeOverrideHistoryError: PropTypes.string,
-  showBulkManagement: PropTypes.bool,
-  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
-    originalFilename: PropTypes.string.isRequired,
-    user: PropTypes.string.isRequired,
-    timeUploaded: PropTypes.string.isRequired,
-    summaryOfRowsProcessed: PropTypes.shape({
-      total: PropTypes.number.isRequired,
-      successfullyProcessed: PropTypes.number.isRequired,
-      failed: PropTypes.number.isRequired,
-      skipped: PropTypes.number.isRequired,
-    }).isRequired,
-  })),
-  totalUsersCount: PropTypes.number,
-  filteredUsersCount: PropTypes.number,
-  initializeFilters: PropTypes.func.isRequired,
-  updateGradesIfAssignmentGradeFiltersSet: PropTypes.func.isRequired,
   updateCourseGradeFilter: PropTypes.func.isRequired,
-  downloadBulkGradesReport: PropTypes.func.isRequired,
-  downloadInterventionReport: PropTypes.func.isRequired,
 };

src/components/Header/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Hyperlink } from '@edx/paragon';
-
-import EdxLogo from '../../../assets/edx-sm.png';
+import { getConfig } from '@edx/frontend-platform';
 
 export default class Header extends React.Component {
   renderLogo() {
     return (
-      <img src={EdxLogo} alt="edX logo" height="30" width="60" />
+      <img src={getConfig().LOGO_URL} alt="edX logo" height="30" width="60" />
     );
   }
 

src/containers/GradebookPage/index.jsx

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import Gradebook from '../../components/Gradebook';
 import {
   closeBanner,
-  doneViewingAssignment,
   fetchGradeOverrideHistory,
   fetchGrades,
   fetchMatchingUserGrades,
@@ -11,8 +10,6 @@ import {
   filterAssignmentType,
   submitFileUploadFormData,
   toggleGradeFormat,
-  updateGrades,
-  updateGradesIfAssignmentGradeFiltersSet,
   downloadBulkGradesReport,
   downloadInterventionReport,
 } from '../../data/actions/grades';
@@ -47,33 +44,19 @@ function shouldShowSpinner(state) {
 
 const mapStateToProps = (state, ownProps) => (
   {
-    courseId: ownProps.match.params.courseId,
-    grades: state.grades.results,
-    gradeOverrides: state.grades.gradeOverrideHistoryResults,
-    gradeOverrideCurrentEarnedAllOverride: state.grades.gradeOverrideCurrentEarnedAllOverride,
-    gradeOverrideCurrentPossibleAllOverride: state.grades.gradeOverrideCurrentPossibleAllOverride,
-    gradeOverrideCurrentEarnedGradedOverride: state.grades.gradeOverrideCurrentEarnedGradedOverride,
-    gradeOverrideCurrentPossibleGradedOverride:
-      state.grades.gradeOverrideCurrentPossibleGradedOverride,
-    gradeOriginalEarnedGraded: state.grades.gradeOriginalEarnedGraded,
-    gradeOriginalPossibleGraded: state.grades.gradeOriginalPossibleGraded,
-    headings: getHeadings(state),
-    tracks: state.tracks.results,
-    cohorts: state.cohorts.results,
-    selectedTrack: state.filters.track,
-    selectedCohort: state.filters.cohort,
-    selectedAssignmentType: state.filters.assignmentType,
-    selectedAssignment: (state.filters.assignment || {}).label,
-    format: state.grades.gradeFormat,
-    showSuccess: state.grades.showSuccess,
-    gradeOverrideHistoryError: state.grades.overrideHistoryError,
-    prevPage: state.grades.prevPage,
-    nextPage: state.grades.nextPage,
+    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
     assignmentTypes: state.assignmentTypes.results,
     assignmentFilterOptions: selectableAssignmentLabels(state),
-    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
-    showSpinner: shouldShowSpinner(state),
+    bulkImportError: state.grades.bulkManagement
+      && state.grades.bulkManagement.errorMessages
+      ? `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}`
+      : '',
+    bulkManagementHistory: getBulkManagementHistory(state),
+    cohorts: state.cohorts.results,
+    courseId: ownProps.match.params.courseId,
     canUserViewGradebook: state.roles.canUserViewGradebook,
+    filteredUsersCount: state.grades.filteredUsersCount,
+    format: state.grades.gradeFormat,
     gradeExportUrl: LmsApiService.getGradeExportCsvUrl(ownProps.match.params.courseId, {
       cohort: getCohortNameById(state, state.filters.cohort),
       track: state.filters.track,
@@ -90,6 +73,8 @@ const mapStateToProps = (state, ownProps) => (
       courseGradeMin: formatMinCourseGrade(state.filters.courseGradeMin),
       courseGradeMax: formatMaxCourseGrade(state.filters.courseGradeMax),
     }),
+    grades: state.grades.results,
+    headings: getHeadings(state),
     interventionExportUrl:
       LmsApiService.getInterventionExportCsvUrl(ownProps.match.params.courseId, {
         cohort: getCohortNameById(state, state.filters.cohort),
@@ -106,42 +91,42 @@ const mapStateToProps = (state, ownProps) => (
         courseGradeMin: formatMinCourseGrade(state.filters.courseGradeMin),
         courseGradeMax: formatMaxCourseGrade(state.filters.courseGradeMax),
       }),
-    bulkImportError: state.grades.bulkManagement
-      && state.grades.bulkManagement.errorMessages
-      ? `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}`
-      : '',
+    nextPage: state.grades.nextPage,
+    prevPage: state.grades.prevPage,
+    selectedTrack: state.filters.track,
+    selectedCohort: state.filters.cohort,
+    selectedAssignmentType: state.filters.assignmentType,
+    selectedAssignment: (state.filters.assignment || {}).label,
+    showBulkManagement: stateHasMastersTrack(state) && state.config.bulkManagementAvailable,
+    showSpinner: shouldShowSpinner(state),
+    showSuccess: state.grades.showSuccess,
+    totalUsersCount: state.grades.totalUsersCount,
+    tracks: state.tracks.results,
     uploadSuccess: !!(state.grades.bulkManagement
                       && state.grades.bulkManagement.uploadSuccess),
-    showBulkManagement: stateHasMastersTrack(state) && state.config.bulkManagementAvailable,
-    bulkManagementHistory: getBulkManagementHistory(state),
-    totalUsersCount: state.grades.totalUsersCount,
-    filteredUsersCount: state.grades.filteredUsersCount,
   }
 );
 
 const mapDispatchToProps = {
-  doneViewingAssignment,
-  getUserGrades: fetchGrades,
-  fetchGradeOverrideHistory,
-  searchForUser: fetchMatchingUserGrades,
-  getPrevNextGrades: fetchPrevNextGrades,
-  getCohorts: fetchCohorts,
-  getTracks: fetchTracks,
-  getAssignmentTypes: fetchAssignmentTypes,
-  updateGrades,
-  toggleFormat: toggleGradeFormat,
-  filterAssignmentType,
   closeBanner,
-  getRoles,
-  submitFileUploadFormData,
-  initializeFilters,
-  resetFilters,
-  updateAssignmentFilter,
-  updateAssignmentLimits,
-  updateGradesIfAssignmentGradeFiltersSet,
-  updateCourseGradeFilter,
   downloadBulkGradesReport,
   downloadInterventionReport,
+  fetchGradeOverrideHistory,
+  filterAssignmentType,
+  getAssignmentTypes: fetchAssignmentTypes,
+  getCohorts: fetchCohorts,
+  getPrevNextGrades: fetchPrevNextGrades,
+  getRoles,
+  getTracks: fetchTracks,
+  getUserGrades: fetchGrades,
+  initializeFilters,
+  resetFilters,
+  searchForUser: fetchMatchingUserGrades,
+  submitFileUploadFormData,
+  toggleFormat: toggleGradeFormat,
+  updateAssignmentFilter,
+  updateAssignmentLimits,
+  updateCourseGradeFilter,
 };
 
 const GradebookPage = connect(

src/index.jsx

@@ -5,8 +5,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import SiteFooter, { messages as footerMessages } from '@edx/frontend-component-footer';
-import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
+import {
+  APP_READY,
+  getConfig,
+  initialize,
+  subscribe,
+} from '@edx/frontend-platform';
 import { IntlProvider } from 'react-intl';
 
 import {
@@ -17,10 +21,11 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import SiteFooter, { messages as footerMessages } from '@edx/frontend-component-footer';
+
 import GradebookPage from './containers/GradebookPage';
 import Header from './components/Header';
 import store from './data/store';
-import FooterLogo from '../assets/edx-footer.png';
 import './App.scss';
 
 const socialLinks = [
@@ -58,12 +63,12 @@ const App = () => (
           <Header />
           <main>
             <Switch>
-              <Route exact path="/:courseId" component={GradebookPage} />
+              <Route exact path={getConfig().PUBLIC_PATH.concat(':courseId')} component={GradebookPage} />
             </Switch>
           </main>
           <SiteFooter
             siteName={process.env.SITE_NAME}
-            siteLogo={FooterLogo}
+            logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG}
             marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
             supportUrl={process.env.SUPPORT_URL}
             contactUrl={process.env.CONTACT_URL}