Merge pull request #51 from edx/douglashall/fix_prod_webpack_config

fix(webpack): use the appropriate css loader in prod webpack config

Makefile

@@ -30,3 +30,6 @@ restart-detached:
 
 validate-no-uncommitted-package-lock-changes:
 	git diff --exit-code package-lock.json
+
+test:
+	docker exec -it edx.gradebook jest 

config/webpack.dev.config.js

@@ -64,6 +64,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
@@ -80,7 +102,7 @@ module.exports = Merge.smart(commonConfig, {
       LOGIN_URL: 'http://localhost:18000/login',
       LOGOUT_URL: 'http://localhost:18000/login',
       CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
-      REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login',
+      REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
       DATA_API_BASE_URL: 'http://localhost:8000',
       // LMS_CLIENT_ID should match the lms DOT client application id your LMS container
       LMS_CLIENT_ID: 'login-service-client-id',

config/webpack.prod.config.js

@@ -4,8 +4,8 @@ const Merge = require('webpack-merge');
 const commonConfig = require('./webpack.common.config.js');
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = Merge.smart(commonConfig, {
   mode: 'production',
@@ -38,29 +38,26 @@ module.exports = Merge.smart(commonConfig, {
       // increases build time.
       {
         test: /(.scss|.css)$/,
-        use: ExtractTextPlugin.extract({
-          // creates style nodes from JS strings, only used if extracting fails
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader', // translates CSS into CommonJS
-              options: {
-                sourceMap: true,
-                minimize: true,
-              },
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+            options: {
+              sourceMap: true,
+              minimize: true,
             },
-            {
-              loader: 'sass-loader', // compiles Sass to CSS
-              options: {
-                sourceMap: true,
-                includePaths: [
-                  path.join(__dirname, '../node_modules'),
-                  path.join(__dirname, '../src'),
-                ],
-              },
+          },
+          {
+            loader: 'sass-loader', // compiles Sass to CSS
+            options: {
+              sourceMap: true,
+              includePaths: [
+                path.join(__dirname, '../node_modules'),
+                path.join(__dirname, '../src'),
+              ],
             },
-          ],
-        }),
+          },
+        ],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by
       // files it processes, which just base64 encodes them and inlines them in the javascript
@@ -70,6 +67,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // New in Webpack 4. Replaces CommonChunksPlugin. Extract common modules among all chunks to one
@@ -83,9 +102,8 @@ module.exports = Merge.smart(commonConfig, {
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
   plugins: [
     // Writes the extracted CSS from each entry to a file in the output directory.
-    new ExtractTextPlugin({
-      filename: '[name].min.css',
-      allChunks: true,
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css',
     }),
     // Generates an HTML file in the output directory.
     new HtmlWebpackPlugin({

package.json

@@ -47,6 +47,7 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.15.0",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-jest": "^22.4.0",
@@ -61,14 +62,15 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "es-check": "^2.0.2",
     "eslint-config-edx": "^4.0.3",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fetch-mock": "^6.3.0",
     "file-loader": "^1.1.9",
     "html-webpack-harddisk-plugin": "^0.2.0",
     "html-webpack-plugin": "^3.0.3",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
+    "image-webpack-loader": "^4.2.0",
     "jest": "^22.4.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.7.2",
     "react-dev-utils": "^5.0.0",
     "react-test-renderer": "^16.2.0",
@@ -77,8 +79,8 @@
     "semantic-release": "^15.10.7",
     "style-loader": "^0.20.2",
     "travis-deploy-once": "^5.0.9",
-    "webpack": "^4.1.0",
-    "webpack-cli": "^2.0.10",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.0",
     "webpack-merge": "^4.1.1"
   },

public/index.html

@@ -1,6 +1,8 @@
 <!doctype html>
 <html>
-  <head></head>
+  <head>
+      <meta charset="utf-8">
+  </head>
   <body>
     <div id="root"></div>
   </body>

src/components/Gradebook/gradebook.scss

@@ -1,3 +1,21 @@
+.spinner-overlay {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    background-color: #999;
+    opacity: 0.5;
+    z-index: 99999;
+    display:flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 200px;
+}
+
+.color-black {
+    color: black;
+}
+
 .gradebook-container{
     width: 500px;
     @media only screen and (min-width: 640px) {
@@ -10,9 +28,7 @@
         width: 1024px;
     }
 }
-.back-link{
-    float:right;
-}
+
 .student-filters{
     display: flex;
     .label{

src/components/Gradebook/index.jsx

@@ -1,8 +1,18 @@
 import React from 'react';
-import { Button, InputSelect, Modal, SearchField, StatusAlert, Table } from '@edx/paragon';
+import {
+  Button,
+  InputSelect,
+  Modal,
+  SearchField,
+  StatusAlert,
+  Table,
+  Icon,
+} from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
 
+const DECIMAL_PRECISION = 2;
+
 export default class Gradebook extends React.Component {
   constructor(props) {
     super(props);
@@ -51,15 +61,20 @@ export default class Gradebook extends React.Component {
   }
 
   handleAdjustedGradeClick = () => {
-    this.props.updateGrades(this.props.match.params.courseId, [
-      {
-        user_id: this.state.updateUserId,
-        usage_id: this.state.updateModuleId,
-        grade: {
-          earned_graded_override: this.state.updateVal,
+    this.props.updateGrades(
+      this.props.match.params.courseId, [
+        {
+          user_id: this.state.updateUserId,
+          usage_id: this.state.updateModuleId,
+          grade: {
+            earned_graded_override: this.state.updateVal,
+          },
         },
-      },
-    ]);
+      ],
+      this.state.filterValue,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+    );
 
     this.setState({
       modalModel: [{}],
@@ -161,41 +176,51 @@ export default class Gradebook extends React.Component {
     return 'Tracks';
   };
 
+  roundGrade = percent => parseFloat(percent.toFixed(DECIMAL_PRECISION));
+
   formatter = {
-    percent: entries => entries.map((entry) => {
+    percent: (entries, areGradesFrozen) => entries.map((entry) => {
       const results = { username: entry.username };
       const assignments = entry.section_breakdown
         .filter(section => section.is_graded)
         .reduce((acc, subsection) => {
-          acc[subsection.label] = (
-            <button
-              className="btn btn-header link-style"
-              onClick={() => this.setNewModalState(entry, subsection)}
-            >
-              {subsection.percent * 100}%
-            </button>);
+          if (areGradesFrozen) {
+            acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {this.roundGrade(subsection.percent * 100)}%
+              </button>);
+          }
           return acc;
         }, {});
-      const totals = { total: `${entry.percent * 100}%` };
+      const totals = { total: `${this.roundGrade(entry.percent * 100)}%` };
       return Object.assign(results, assignments, totals);
     }),
 
-    absolute: entries => entries.map((entry) => {
+    absolute: (entries, areGradesFrozen) => entries.map((entry) => {
       const results = { username: entry.username };
       const assignments = entry.section_breakdown
         .filter(section => section.is_graded)
         .reduce((acc, subsection) => {
-          acc[subsection.label] = (
-            <button
-              className="btn btn-header link-style"
-              onClick={() => this.setNewModalState(entry, subsection)}
-            >
-              {subsection.score_earned}/{subsection.score_possible}
-            </button>);
+          if (areGradesFrozen) {
+            acc[subsection.label] = `${this.roundGrade(subsection.score_earned)}/${this.roundGrade(subsection.score_possible)}`;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {this.roundGrade(subsection.score_earned)}/{this.roundGrade(subsection.score_possible)}
+              </button>);
+          }
           return acc;
         }, {});
 
-      const totals = { total: `${entry.percent * 100}/100` };
+      const totals = { total: `${this.roundGrade(entry.percent * 100)}/100` };
       return Object.assign(results, assignments, totals);
     }),
   };
@@ -205,16 +230,22 @@ export default class Gradebook extends React.Component {
   render() {
     return (
       <div className="d-flex justify-content-center">
-        <div className="card gradebook-container">
-          <div className="card-body">
+        { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
+        <div className="gradebook-container">
+          <div>
             <a
               href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
-              className="back-link"
+              className="mb-3"
             >
-              Back to Dashboard
+              {'<< Back to Dashboard'}
             </a>
             <h1>Gradebook</h1>
             <h3> {this.props.match.params.courseId}</h3>
+            { this.props.areGradesFrozen &&
+              <div className="alert alert-danger" role="alert" >
+                The grades for this course are now frozen. Editing of grades is no longer allowed.
+              </div>
+            }
             <hr />
             <div className="d-flex justify-content-between" >
               <div>
@@ -282,7 +313,7 @@ export default class Gradebook extends React.Component {
               </div>
               <div>
                 <div style={{ marginLeft: '10px', marginBottom: '10px' }}>
-                  <a href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Download Grade Report</a>
+                  <a href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Generate Grade Report</a>
                 </div>
                 <SearchField
                   onSubmit={value => this.props.searchForUser(this.props.match.params.courseId, value, this.props.selectedCohort, this.props.selectedTrack)}
@@ -317,7 +348,7 @@ export default class Gradebook extends React.Component {
             <div className="gbook">
               <Table
                 columns={this.props.headings}
-                data={this.formatter[this.props.format](this.props.grades)}
+                data={this.formatter[this.props.format](this.props.grades, this.props.areGradesFrozen)}
                 tableSortable
                 defaultSortDirection="asc"
                 defaultSortedColumn="username"

src/components/Header/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Hyperlink } from '@edx/paragon';
+
+import EdxLogo from '../../../assets/edx-sm.png';
+
+export default class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mobileNavOpen: false,
+    };
+  }
+
+  renderLogo() {
+    return (
+      <img src={EdxLogo} alt="edX logo" height="30" width="60" />
+    );
+  }
+
+  render() {
+    return (
+      <div className="mb-3">
+        <header className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
+          <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
+          <div />
+        </header>
+      </div>
+    );
+  }
+}

src/containers/GradebookPage/index.jsx

@@ -26,7 +26,9 @@ const mapStateToProps = state => (
     showSuccess: state.grades.showSuccess,
     prevPage: state.grades.prevPage,
     nextPage: state.grades.nextPage,
-    assignmnetTypes: state.assignmentTypes.results || [],
+    assignmnetTypes: state.assignmentTypes.results,
+    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
+    showSpinner: state.grades.showSpinner,
   }
 );
 
@@ -36,7 +38,7 @@ const mapDispatchToProps = dispatch => (
       dispatch(fetchGrades(courseId, cohort, track));
     },
     searchForUser: (courseId, searchText, cohort, track) => {
-      dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track));
+      dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, false));
     },
     getPrevNextGrades: (endpoint, cohort, track) => {
       dispatch(fetchPrevNextGrades(endpoint, cohort, track));
@@ -50,8 +52,8 @@ const mapDispatchToProps = dispatch => (
     getAssignmentTypes: (courseId) => {
       dispatch(fetchAssignmentTypes(courseId));
     },
-    updateGrades: (courseId, updateData) => {
-      dispatch(updateGrades(courseId, updateData));
+    updateGrades: (courseId, updateData, searchText, cohort, track) => {
+      dispatch(updateGrades(courseId, updateData, searchText, cohort, track));
     },
     toggleFormat: (formatType) => {
       dispatch(toggleGradeFormat(formatType));

src/data/actions/assignmentTypes.js

@@ -2,12 +2,14 @@ import {
   STARTED_FETCHING_ASSIGNMENT_TYPES,
   GOT_ASSIGNMENT_TYPES,
   ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';
 import LmsApiService from '../services/LmsApiService';
 
 const startedFetchingAssignmentTypes = () => ({ type: STARTED_FETCHING_ASSIGNMENT_TYPES });
 const errorFetchingAssignmentTypes = () => ({ type: ERROR_FETCHING_ASSIGNMENT_TYPES });
 const gotAssignmentTypes = assignmentTypes => ({ type: GOT_ASSIGNMENT_TYPES, assignmentTypes });
+const gotGradesFrozen = areGradesFrozen => ({ type: GOT_ARE_GRADES_FROZEN, areGradesFrozen });
 
 const fetchAssignmentTypes = courseId => (
   (dispatch) => {
@@ -16,8 +18,9 @@ const fetchAssignmentTypes = courseId => (
       .then(response => response.data)
       .then((data) => {
         dispatch(gotAssignmentTypes(Object.keys(data.assignment_types)));
+        dispatch(gotGradesFrozen(data.grades_frozen));
       })
-      .catch((error) => {
+      .catch(() => {
         dispatch(errorFetchingAssignmentTypes());
       });
   }

src/data/actions/assignmentTypes.test.js

@@ -0,0 +1,91 @@
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+
+import apiClient from '../apiClient';
+import { configuration } from '../../config';
+import { fetchAssignmentTypes } from './assignmentTypes';
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
+} from '../constants/actionTypes/assignmentTypes';
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('fetchAssignmentTypes', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const responseData = {
+      assignment_types: {
+        Exam: {
+          drop_count: 0,
+          min_count: 1,
+          short_label: 'Exam',
+          type: 'Exam',
+          weight: 0.25,
+        },
+        Homework: {
+          drop_count: 1,
+          min_count: 3,
+          short_label: 'Ex',
+          type: 'Homework',
+          weight: 0.75,
+        },
+      },
+      grades_frozen: false,
+    };
+    it('dispatches success action after fetching fetchAssignmentTypes', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: GOT_ASSIGNMENT_TYPES, assignmentTypes: Object.keys(responseData.assignment_types) },
+        { type: GOT_ARE_GRADES_FROZEN, areGradesFrozen: responseData.grades_frozen },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches failure action after fetching cohorts', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: ERROR_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(500, JSON.stringify({}));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches frozen grade action with True value after fetching', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: GOT_ASSIGNMENT_TYPES, assignmentTypes: Object.keys(responseData.assignment_types) },
+        { type: GOT_ARE_GRADES_FROZEN, areGradesFrozen: true },
+      ];
+      const store = mockStore();
+      responseData.grades_frozen = true;
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/actions/cohorts.js

@@ -17,7 +17,7 @@ const fetchCohorts = courseId => (
       .then((data) => {
         dispatch(gotCohorts(data.cohorts));
       })
-      .catch((error) => {
+      .catch(() => {
         dispatch(errorFetchingCohorts());
       });
   }

src/data/actions/cohorts.test.js

@@ -0,0 +1,74 @@
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+
+import apiClient from '../apiClient';
+import { configuration } from '../../config';
+import { fetchCohorts } from './cohorts';
+import {
+  STARTED_FETCHING_COHORTS,
+  GOT_COHORTS,
+  ERROR_FETCHING_COHORTS,
+} from '../constants/actionTypes/cohorts';
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('fetchCohorts', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+    it('dispatches success action after fetching cohorts', () => {
+      const responseData = {
+        cohorts: [
+          {
+            assignment_type: 'manual',
+            group_id: null,
+            id: 1,
+            name: 'default_group',
+            user_count: 2,
+            user_partition_id: null,
+          },
+          {
+            assignment_type: 'auto',
+            group_id: null,
+            id: 2,
+            name: 'auto_group',
+            user_count: 5,
+            user_partition_id: null,
+          }],
+      };
+      const expectedActions = [
+        { type: STARTED_FETCHING_COHORTS },
+        { type: GOT_COHORTS, cohorts: responseData.cohorts },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/courses/${courseId}/cohorts/`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchCohorts(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches failure action after fetching cohorts', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_COHORTS },
+        { type: ERROR_FETCHING_COHORTS },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/courses/${courseId}/cohorts/`)
+        .replyOnce(500, JSON.stringify({}));
+
+      return store.dispatch(fetchCohorts(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/actions/grades.js

@@ -87,7 +87,7 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
   }
 );
 
-const fetchMatchingUserGrades = (courseId, searchText, cohort, track) => (
+const fetchMatchingUserGrades = (courseId, searchText, cohort, track, showSuccess) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
     return LmsApiService.fetchGradebookData(courseId, searchText, cohort, track)
@@ -102,6 +102,7 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track) => (
           data.next,
         ));
         dispatch(finishedFetchingGrades());
+        dispatch(updateBanner(showSuccess));
       })
       .catch(() => {
         dispatch(errorFetchingGrades());
@@ -132,14 +133,14 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
 );
 
 
-const updateGrades = (courseId, updateData) => (
+const updateGrades = (courseId, updateData, searchText, cohort, track) => (
   (dispatch) => {
     dispatch(gradeUpdateRequest());
     return LmsApiService.updateGradebookData(courseId, updateData)
       .then(response => response.data)
       .then((data) => {
         dispatch(gradeUpdateSuccess(data));
-        dispatch(fetchGrades(courseId, null, null, true));
+        dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, true));
       })
       .catch((error) => {
         dispatch(gradeUpdateFailure(error));

src/data/actions/grades.test.js

@@ -0,0 +1,142 @@
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+
+import apiClient from '../apiClient';
+import { configuration } from '../../config';
+import { fetchGrades } from './grades';
+import {
+  STARTED_FETCHING_GRADES,
+  FINISHED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  UPDATE_BANNER,
+} from '../constants/actionTypes/grades';
+import { sortAlphaAsc } from './utils';
+
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('fetchGrades', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const expectedCohort = 1;
+    const expectedTrack = 'verified';
+    const fetchGradesURL = `${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/?page_size=10&cohort_id=${expectedCohort}&enrollment_mode=${expectedTrack}`;
+    const responseData = {
+      next: `${fetchGradesURL}&cursor=2344fda`,
+      previous: null,
+      results: [
+        {
+          course_id: courseId,
+          email: 'user1@example.com',
+          username: 'user1',
+          user_id: 1,
+          percent: 0.5,
+          letter_grade: null,
+          section_breakdown: [
+            {
+              subsection_name: 'Demo Course Overview',
+              score_earned: 0,
+              score_possible: 0,
+              percent: 0,
+              displayed_value: '0.00',
+              grade_description: '(0.00/0.00)',
+            },
+            {
+              subsection_name: 'Example Week 1: Getting Started',
+              score_earned: 1,
+              score_possible: 1,
+              percent: 1,
+              displayed_value: '1.00',
+              grade_description: '(0.00/0.00)',
+            },
+          ],
+        },
+        {
+          course_id: courseId,
+          email: 'user22@example.com',
+          username: 'user22',
+          user_id: 22,
+          percent: 0,
+          letter_grade: null,
+          section_breakdown: [
+            {
+              subsection_name: 'Demo Course Overview',
+              score_earned: 0,
+              score_possible: 0,
+              percent: 0,
+              displayed_value: '0.00',
+              grade_description: '(0.00/0.00)',
+            },
+            {
+              subsection_name: 'Example Week 1: Getting Started',
+              score_earned: 1,
+              score_possible: 1,
+              percent: 0,
+              displayed_value: '0.00',
+              grade_description: '(0.00/0.00)',
+            },
+          ],
+        }],
+    };
+
+    it('dispatches success action after fetching grades', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_GRADES },
+        {
+          type: GOT_GRADES,
+          grades: responseData.results.sort(sortAlphaAsc),
+          cohort: expectedCohort,
+          track: expectedTrack,
+          headings: [
+            {
+              columnSortable: true,
+              key: 'username',
+              label: 'Username',
+              onSort: expect.anything(),
+            },
+            {
+              columnSortable: true,
+              key: 'total',
+              label: 'Total',
+              onSort: expect.anything(),
+            },
+          ],
+          prev: responseData.previous,
+          next: responseData.next,
+        },
+        { type: FINISHED_FETCHING_GRADES },
+        { type: UPDATE_BANNER, showSuccess: false },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(fetchGradesURL)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchGrades(courseId, expectedCohort, expectedTrack, false)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches failure action after fetching grades', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_GRADES },
+        { type: ERROR_FETCHING_GRADES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(fetchGradesURL)
+        .replyOnce(500, JSON.stringify({}));
+
+      return store.dispatch(fetchGrades(courseId, expectedCohort, expectedTrack, false)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/actions/tracks.js

@@ -17,7 +17,7 @@ const fetchTracks = courseId => (
       .then((data) => {
         dispatch(gotTracks(data.course_modes));
       })
-      .catch((error) => {
+      .catch(() => {
         dispatch(errorFetchingTracks());
       });
   }

src/data/actions/tracks.test.js

@@ -0,0 +1,80 @@
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+
+import apiClient from '../apiClient';
+import { configuration } from '../../config';
+import { fetchTracks } from './tracks';
+import {
+  STARTED_FETCHING_TRACKS,
+  GOT_TRACKS,
+  ERROR_FETCHING_TRACKS,
+} from '../constants/actionTypes/tracks';
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('fetchTracks', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+    it('dispatches success action after fetching tracks', () => {
+      const responseData = {
+        course_modes: [
+          {
+            slug: 'audit',
+            name: 'Audit',
+            min_price: 0,
+            suggested_prices: '',
+            currency: 'usd',
+            expiration_datetime: null,
+            description: null,
+            sku: '68EFFFF',
+            bulk_sku: null,
+          },
+          {
+            slug: 'verified',
+            name: 'Verified Certificate',
+            min_price: 100,
+            suggested_prices: '',
+            currency: 'usd',
+            expiration_datetime: '2021-05-04T18:08:12.644361Z',
+            description: null,
+            sku: '8CF08E5',
+            bulk_sku: 'A5B6DBE',
+          }],
+      };
+      const expectedActions = [
+        { type: STARTED_FETCHING_TRACKS },
+        { type: GOT_TRACKS, tracks: responseData.course_modes },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/enrollment/v1/course/${courseId}`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchTracks(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches failure action after fetching tracks', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_TRACKS },
+        { type: ERROR_FETCHING_TRACKS },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/enrollment/v1/course/${courseId}`)
+        .replyOnce(500, JSON.stringify({}));
+
+      return store.dispatch(fetchTracks(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/constants/actionTypes/assignmentTypes.js

@@ -1,10 +1,12 @@
 const STARTED_FETCHING_ASSIGNMENT_TYPES = 'STARTED_FETCHING_ASSIGNMENT_TYPES';
 const GOT_ASSIGNMENT_TYPES = 'GOT_ASSIGNMENT_TYPES';
 const ERROR_FETCHING_ASSIGNMENT_TYPES = 'ERROR_FETCHING_ASSIGNMENT_TYPES';
+const GOT_ARE_GRADES_FROZEN = 'GOT_ARE_GRADES_FROZEN';
 
 export {
   STARTED_FETCHING_ASSIGNMENT_TYPES,
   GOT_ASSIGNMENT_TYPES,
   ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 };
 

src/data/reducers/assignmentTypes.js

@@ -2,6 +2,7 @@ import {
   STARTED_FETCHING_ASSIGNMENT_TYPES,
   ERROR_FETCHING_ASSIGNMENT_TYPES,
   GOT_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';
 
 const initialState = {
@@ -18,6 +19,7 @@ const assignmentTypes = (state = initialState, action) => {
         ...state,
         results: action.assignmentTypes,
         errorFetching: false,
+        finishedFetching: true,
       };
     case STARTED_FETCHING_ASSIGNMENT_TYPES:
       return {
@@ -30,6 +32,13 @@ const assignmentTypes = (state = initialState, action) => {
         finishedFetching: true,
         errorFetching: true,
       };
+    case GOT_ARE_GRADES_FROZEN:
+      return {
+        ...state,
+        areGradesFrozen: action.areGradesFrozen,
+        errorFetching: false,
+        finishedFetching: true,
+      };
     default:
       return state;
   }

src/data/reducers/assignmentTypes.test.js

@@ -0,0 +1,68 @@
+import assignmentTypes from './assignmentTypes';
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
+} from '../constants/actionTypes/assignmentTypes';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+const assignmentTypesData = ['Exam', 'Homework'];
+
+describe('assignmentTypes reducer', () => {
+  it('has initial state', () => {
+    expect(assignmentTypes(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates fetch assignmentTypes request state', () => {
+    const expected = {
+      ...initialState,
+      startedFetching: true,
+    };
+    expect(assignmentTypes(undefined, {
+      type: STARTED_FETCHING_ASSIGNMENT_TYPES,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch assignmentTypes success state', () => {
+    const expected = {
+      ...initialState,
+      results: assignmentTypesData,
+      errorFetching: false,
+      finishedFetching: true,
+    };
+    expect(assignmentTypes(undefined, {
+      type: GOT_ASSIGNMENT_TYPES,
+      assignmentTypes: assignmentTypesData,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch assignmentTypes failure state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: true,
+      finishedFetching: true,
+    };
+    expect(assignmentTypes(undefined, {
+      type: ERROR_FETCHING_ASSIGNMENT_TYPES,
+    })).toEqual(expected);
+  });
+
+  it('updates areGradesFrozen success state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: false,
+      finishedFetching: true,
+      areGradesFrozen: true,
+    };
+    expect(assignmentTypes(undefined, {
+      type: GOT_ARE_GRADES_FROZEN,
+      areGradesFrozen: true,
+    })).toEqual(expected);
+  });
+});

src/data/reducers/cohorts.js

@@ -17,6 +17,7 @@ const cohorts = (state = initialState, action) => {
       return {
         ...state,
         results: action.cohorts,
+        finishedFetching: true,
         errorFetching: false,
       };
     case STARTED_FETCHING_COHORTS:

src/data/reducers/cohorts.test.js

@@ -0,0 +1,70 @@
+import cohorts from './cohorts';
+import {
+  STARTED_FETCHING_COHORTS,
+  ERROR_FETCHING_COHORTS,
+  GOT_COHORTS,
+} from '../constants/actionTypes/cohorts';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+const cohortsData = [
+  {
+    assignment_type: 'manual',
+    group_id: null,
+    id: 1,
+    name: 'default_group',
+    user_count: 2,
+    user_partition_id: null,
+  },
+  {
+    assignment_type: 'auto',
+    group_id: null,
+    id: 2,
+    name: 'auto_group',
+    user_count: 5,
+    user_partition_id: null,
+  }];
+
+describe('cohorts reducer', () => {
+  it('has initial state', () => {
+    expect(cohorts(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates fetch cohorts request state', () => {
+    const expected = {
+      ...initialState,
+      startedFetching: true,
+    };
+    expect(cohorts(undefined, {
+      type: STARTED_FETCHING_COHORTS,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch cohorts success state', () => {
+    const expected = {
+      ...initialState,
+      results: cohortsData,
+      errorFetching: false,
+      finishedFetching: true,
+    };
+    expect(cohorts(undefined, {
+      type: GOT_COHORTS,
+      cohorts: cohortsData,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch cohorts failure state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: true,
+      finishedFetching: true,
+    };
+    expect(cohorts(undefined, {
+      type: ERROR_FETCHING_COHORTS,
+    })).toEqual(expected);
+  });
+});

src/data/reducers/grades.js

@@ -4,7 +4,6 @@ import {
   GOT_GRADES,
   TOGGLE_GRADE_FORMAT,
   FILTER_COLUMNS,
-  GRADE_UPDATE_SUCCESS,
   UPDATE_BANNER,
   SORT_GRADES,
 } from '../constants/actionTypes/grades';
@@ -19,6 +18,7 @@ const initialState = {
   showSuccess: false,
   prevPage: null,
   nextPage: null,
+  showSpinner: true,
 };
 
 const grades = (state = initialState, action) => {
@@ -34,12 +34,14 @@ const grades = (state = initialState, action) => {
         selectedCohort: action.cohort,
         prevPage: action.prev,
         nextPage: action.next,
+        showSpinner: false,
       };
     case STARTED_FETCHING_GRADES:
       return {
         ...state,
         startedFetching: true,
         finishedFetching: false,
+        showSpinner: true,
       };
     case ERROR_FETCHING_GRADES:
       return {

src/data/reducers/grades.test.js

@@ -0,0 +1,186 @@
+import grades from './grades';
+import {
+  STARTED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  TOGGLE_GRADE_FORMAT,
+  FILTER_COLUMNS,
+  UPDATE_BANNER,
+  SORT_GRADES,
+} from '../constants/actionTypes/grades';
+
+const initialState = {
+  results: [],
+  headings: [],
+  startedFetching: false,
+  finishedFetching: false,
+  errorFetching: false,
+  gradeFormat: 'percent',
+  showSuccess: false,
+  prevPage: null,
+  nextPage: null,
+  showSpinner: true,
+};
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const headingsData = [
+  { name: 'exam' },
+  { name: 'homework2' },
+];
+const gradesData = [
+  {
+    course_id: courseId,
+    email: 'user1@example.com',
+    username: 'user1',
+    user_id: 1,
+    percent: 0.5,
+    letter_grade: null,
+    section_breakdown: [
+      {
+        subsection_name: 'Demo Course Overview',
+        score_earned: 0,
+        score_possible: 0,
+        percent: 0,
+        displayed_value: '0.00',
+        grade_description: '(0.00/0.00)',
+      },
+      {
+        subsection_name: 'Example Week 1: Getting Started',
+        score_earned: 1,
+        score_possible: 1,
+        percent: 1,
+        displayed_value: '1.00',
+        grade_description: '(0.00/0.00)',
+      },
+    ],
+  },
+  {
+    course_id: courseId,
+    email: 'user22@example.com',
+    username: 'user22',
+    user_id: 22,
+    percent: 0,
+    letter_grade: null,
+    section_breakdown: [
+      {
+        subsection_name: 'Demo Course Overview',
+        score_earned: 0,
+        score_possible: 0,
+        percent: 0,
+        displayed_value: '0.00',
+        grade_description: '(0.00/0.00)',
+      },
+      {
+        subsection_name: 'Example Week 1: Getting Started',
+        score_earned: 1,
+        score_possible: 1,
+        percent: 0,
+        displayed_value: '0.00',
+        grade_description: '(0.00/0.00)',
+      },
+    ],
+  }];
+
+describe('grades reducer', () => {
+  it('has initial state', () => {
+    expect(grades(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates fetch grades request state', () => {
+    const expected = {
+      ...initialState,
+      startedFetching: true,
+      showSpinner: true,
+    };
+    expect(grades(undefined, {
+      type: STARTED_FETCHING_GRADES,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch grades success state', () => {
+    const expectedPrev = 'testPrevUrl';
+    const expectedNext = 'testNextUrl';
+    const expectedTrack = 'verified';
+    const expectedCohortId = 2;
+    const expected = {
+      ...initialState,
+      results: gradesData,
+      headings: headingsData,
+      errorFetching: false,
+      finishedFetching: true,
+      selectedTrack: expectedTrack,
+      selectedCohort: expectedCohortId,
+      prevPage: expectedPrev,
+      nextPage: expectedNext,
+      showSpinner: false,
+    };
+    expect(grades(undefined, {
+      type: GOT_GRADES,
+      grades: gradesData,
+      headings: headingsData,
+      prev: expectedPrev,
+      next: expectedNext,
+      track: expectedTrack,
+      cohort: expectedCohortId,
+      showSpinner: true,
+    })).toEqual(expected);
+  });
+
+  it('updates toggle grade format state success', () => {
+    const formatTypeData = 'percent';
+    const expected = {
+      ...initialState,
+      gradeFormat: formatTypeData,
+    };
+    expect(grades(undefined, {
+      type: TOGGLE_GRADE_FORMAT,
+      formatType: formatTypeData,
+    })).toEqual(expected);
+  });
+
+  it('updates filter columns state success', () => {
+    const expectedHeadings = headingsData;
+    const expected = {
+      ...initialState,
+      headings: expectedHeadings,
+    };
+    expect(grades(undefined, {
+      type: FILTER_COLUMNS,
+      headings: expectedHeadings,
+    })).toEqual(expected);
+  });
+
+  it('updates update_banner state success', () => {
+    const expectedShowSuccess = true;
+    const expected = {
+      ...initialState,
+      showSuccess: expectedShowSuccess,
+    };
+    expect(grades(undefined, {
+      type: UPDATE_BANNER,
+      showSuccess: expectedShowSuccess,
+    })).toEqual(expected);
+  });
+
+  it('updates sort grades state success', () => {
+    const expected = {
+      ...initialState,
+      results: gradesData,
+    };
+    expect(grades(undefined, {
+      type: SORT_GRADES,
+      results: gradesData,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch grades failure state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: true,
+      finishedFetching: true,
+    };
+    expect(grades(undefined, {
+      type: ERROR_FETCHING_GRADES,
+    })).toEqual(expected);
+  });
+});

src/data/reducers/tracks.js

@@ -18,6 +18,7 @@ const tracks = (state = initialState, action) => {
         ...state,
         results: action.tracks,
         errorFetching: false,
+        finishedFetching: true,
       };
     case STARTED_FETCHING_TRACKS:
       return {

src/data/reducers/tracks.test.js

@@ -0,0 +1,76 @@
+import tracks from './tracks';
+import {
+  STARTED_FETCHING_TRACKS,
+  ERROR_FETCHING_TRACKS,
+  GOT_TRACKS,
+} from '../constants/actionTypes/tracks';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+const tracksData = [
+  {
+    slug: 'audit',
+    name: 'Audit',
+    min_price: 0,
+    suggested_prices: '',
+    currency: 'usd',
+    expiration_datetime: null,
+    description: null,
+    sku: '68EFFFF',
+    bulk_sku: null,
+  },
+  {
+    slug: 'verified',
+    name: 'Verified Certificate',
+    min_price: 100,
+    suggested_prices: '',
+    currency: 'usd',
+    expiration_datetime: '2021-05-04T18:08:12.644361Z',
+    description: null,
+    sku: '8CF08E5',
+    bulk_sku: 'A5B6DBE',
+  }];
+
+describe('tracks reducer', () => {
+  it('has initial state', () => {
+    expect(tracks(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates fetch tracks request state', () => {
+    const expected = {
+      ...initialState,
+      startedFetching: true,
+    };
+    expect(tracks(undefined, {
+      type: STARTED_FETCHING_TRACKS,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch tracks success state', () => {
+    const expected = {
+      ...initialState,
+      results: tracksData,
+      errorFetching: false,
+      finishedFetching: true,
+    };
+    expect(tracks(undefined, {
+      type: GOT_TRACKS,
+      tracks: tracksData,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch tracks failure state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: true,
+      finishedFetching: true,
+    };
+    expect(tracks(undefined, {
+      type: ERROR_FETCHING_TRACKS,
+    })).toEqual(expected);
+  });
+});

src/data/services/LmsApiService.js

@@ -3,12 +3,12 @@ import { configuration } from '../../config';
 
 class LmsApiService {
   static baseUrl = configuration.LMS_BASE_URL;
+  static pageSize = 10
 
   static fetchGradebookData(courseId, searchText, cohort, track) {
     let gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/`;
-    if (searchText || track || cohort) {
-      gradebookUrl += '?';
-    }
+
+    gradebookUrl += `?page_size=${LmsApiService.pageSize}&`;
     if (searchText) {
       gradebookUrl += `username_contains=${searchText}&`;
     }

src/index.jsx

@@ -6,17 +6,21 @@ import { Provider } from 'react-redux';
 
 import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
+import Header from './components/Header';
 import store from './data/store';
 import './App.scss';
 
 const App = () => (
   <Provider store={store}>
     <Router>
-      <main>
-        <Switch>
-          <Route exact path="/:courseId" component={GradebookPage} />
-        </Switch>
-      </main>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route exact path="/:courseId" component={GradebookPage} />
+          </Switch>
+        </main>
+      </div>
     </Router>
   </Provider>
 );

src/setupTest.js

@@ -4,3 +4,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 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';