Get ws communication working with lms

Remove remove all unneeded sorting

.eslintignore

@@ -1,3 +1,5 @@
 coverage/*
 dist/
 node_modules/
+src/postcss.config.js
+src/segment.js

.travis.yml

@@ -23,6 +23,7 @@ before_script: greenkeeper-lockfile-update
 after_script: greenkeeper-lockfile-upload
 script:
   - make validate-no-uncommitted-package-lock-changes
+  - npm run lint
   - npm run test
   - npm run build
 after_success:

Dockerfile

@@ -1,29 +0,0 @@
-# Copied from https://github.com/BretFisher/node-docker-good-defaults/blob/master/Dockerfile
-
-FROM node:8.9.3
-
-# Create app directory
-RUN mkdir -p /edx/app
-
-ARG NODE_ENV=production
-ENV NODE_ENV $NODE_ENV
-
-ARG PORT=80
-ENV PORT $PORT
-EXPOSE $PORT 1991
-
-WORKDIR /edx
-# Install app dependencies
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-# where available (npm@5+)
-COPY package*.json ./
-
-# If you are building your code for production
-# RUN npm install --only=production
-RUN npm install
-ENV PATH /edx/app/node_modules/.bin:$PATH
-
-WORKDIR /edx/app
-COPY . /edx/app
-
-ENTRYPOINT npm install && npm run start

Makefile

@@ -1,35 +1,9 @@
-shell: ## run a shell on the cookie-cutter container
+npm-install-%: ## install specified % npm package
-	docker exec -it edx.gradebook /bin/bash
+	npm install $* --save-dev
-
-build:
-	docker-compose build
-
-up: ## bring up cookie-cutter container
-	docker-compose up
-
-up-detached: ## bring up cookie-cutter container in detached mode
-	docker-compose up -d
-
-logs: ## show logs for cookie-cutter container
-	docker-compose logs -f
-
-down: ## stop and remove cookie-cutter container
-	docker-compose down
-
-npm-install-%: ## install specified % npm package on the cookie-cutter container
-	docker exec npm install $* --save-dev
 	git add package.json
 
-restart:
-	make down
-	make up
-
-restart-detached:
-	make down
-	make up-detached
-
 validate-no-uncommitted-package-lock-changes:
 	git diff --exit-code package-lock.json
 
 test:
-	docker exec -it edx.gradebook jest 
+	npm run test 

README.md

@@ -21,20 +21,20 @@ npm i --save @edx/gradebook
 
 ## Running the UI Standalone
 
-After cloning the repository, run `make up-detached` in the `gradebook` directory - this will build and start the `gradebook` web application in a docker container.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.
 
-The web application runs on port **1991**, so when you go to `http://localhost:1991/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
 
-If you don't, you can see the log messages for the docker container by executing `make logs` in the `gradebook` directory.
+If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
 
-Note that `make up-detached` executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
+Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
 
 ## Configuring for local use in edx-platform
 
-Assuming you've got the UI running at `http://localhost:1991`, you can configure the LMS in edx-platform
+Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
 to point to your local gradebook from the instructor dashboard by putting this settings in `lms/env/private.py`:
 ```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1991'
+WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
 ```
 
 There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
@@ -49,6 +49,13 @@ 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.
 
+## Running tests
+
+1. Assuming that you're operating in the context of the edX devstack,
+run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
+running gradebook container.
+2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
+
 ## Directory Structure
 
 * `config`

config/webpack.common.config.js

@@ -4,6 +4,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
+    segment: path.resolve(__dirname, '../src/segment.js'),
     app: path.resolve(__dirname, '../src/index.jsx'),
   },
   output: {

config/webpack.dev.config.js

@@ -12,6 +12,7 @@ module.exports = Merge.smart(commonConfig, {
   entry: [
     // enable react's custom hot dev client so we get errors reported in the browser
     require.resolve('react-dev-utils/webpackHotDevClient'),
+    path.resolve(__dirname, '../src/segment.js'),
     path.resolve(__dirname, '../src/index.jsx'),
   ],
   module: {
@@ -97,7 +98,7 @@ module.exports = Merge.smart(commonConfig, {
     }),
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
-      BASE_URL: 'localhost:1991',
+      BASE_URL: 'localhost:1994',
       LMS_BASE_URL: 'http://localhost:18000',
       LOGIN_URL: 'http://localhost:18000/login',
       LOGOUT_URL: 'http://localhost:18000/login',
@@ -110,6 +111,21 @@ module.exports = Merge.smart(commonConfig, {
       FEATURE_FLAGS: {},
       ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
       CSRF_COOKIE_NAME: 'csrftoken',
+      SITE_NAME: 'edX',
+      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+      SUPPORT_URL: 'http://localhost:18000/support',
+      CONTACT_URL: 'http://localhost:18000/contact',
+      OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
+      TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
+      PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
+      FACEBOOK_URL: 'https://www.facebook.com',
+      TWITTER_URL: 'https://twitter.com',
+      YOU_TUBE_URL: 'https://www.youtube.com',
+      LINKED_IN_URL: 'https://www.linkedin.com',
+      GOOGLE_PLUS_URL: 'https://plus.google.com',
+      REDDIT_URL: 'https://www.reddit.com',
+      APPLE_APP_STORE_URL: 'https://www.apple.com/ios/app-store/',
+      GOOGLE_PLAY_URL: 'https://play.google.com/store',
     }),
     // when the --hot option is not passed in as part of the command
     // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
@@ -120,7 +136,7 @@ module.exports = Merge.smart(commonConfig, {
   // reloading.
   devServer: {
     host: '0.0.0.0',
-    port: 1991,
+    port: 1994,
     historyApiFallback: true,
     hot: true,
     inline: true,

config/webpack.prod.config.js

@@ -47,7 +47,7 @@ module.exports = Merge.smart(commonConfig, {
               minimize: true,
             },
           },
-          'postcss-loader',
+          'postcss-loader', // for autoprefixing, needs to be before the sass loader, not sure why
           {
             loader: 'sass-loader', // compiles Sass to CSS
             options: {
@@ -126,6 +126,21 @@ module.exports = Merge.smart(commonConfig, {
       CSRF_COOKIE_NAME: 'csrftoken',
       NEW_RELIC_APP_ID: null,
       NEW_RELIC_LICENSE_KEY: null,
+      SITE_NAME: null,
+      MARKETING_SITE_BASE_URL: null,
+      SUPPORT_URL: null,
+      CONTACT_URL: null,
+      OPEN_SOURCE_URL: null,
+      TERMS_OF_SERVICE_URL: null,
+      PRIVACY_POLICY_URL: null,
+      FACEBOOK_URL: null,
+      TWITTER_URL: null,
+      YOU_TUBE_URL: null,
+      LINKED_IN_URL: null,
+      GOOGLE_PLUS_URL: null,
+      REDDIT_URL: null,
+      APPLE_APP_STORE_URL: null,
+      GOOGLE_PLAY_URL: null,
     }),
   ],
 });

docker-compose.yml

@@ -1,20 +0,0 @@
-version: "2"
-services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      args:
-        - NODE_ENV=development
-    container_name: edx.gradebook
-    image: edxops/front-end-cookie-cutter:latest
-    volumes:
-      - .:/edx/app:delegated
-      - notused:/edx/app/node_modules
-    ports:
-      - "1991:1991"
-    environment:
-      - NODE_ENV=development
-
-volumes:
-  notused:

documentation/decisions/0001-update-api-usage.rst

@@ -0,0 +1,46 @@
+Usage of the bulk-update API
+============================
+
+Context
+=======
+
+The LMS Grades API exposes a set of Gradebook-related endpoints:
+https://github.com/edx/edx-platform/blob/master/lms/djangoapps/grades/api/v1/gradebook_views.py
+The ``bulk-update`` endpoint defined therein allows for the creation/modification of subsection
+grades for multiple users and sections in a single request.  This allows clients of the API to limit
+the number of network requests made and to more easily manage client-side data.  Moreover,
+the course grade updates that occur during calls to this API are synchronous - the entire update operation
+is completed before a response is given to the client.
+
+For decisions made about the implementation of this API, see:
+https://github.com/edx/edx-platform/blob/master/lms/djangoapps/grades/docs/decisions/0001-gradebook-api.rst
+
+Decision
+========
+
+The Gradebook front-end will post data about a single subsection and user in a single request
+to the ``bulk-update`` API.  That is, we currently need only the "update" aspect of this
+endpoint, and not the "bulk" aspect, for satisfying the requirements of the current UX.
+
+Status
+======
+
+Accepted (circa December 2018)
+
+Consequences
+============
+
+This is a scenario in which the implementation of the API is coupled to the
+UX that depends on the API.  Because the course grade update is synchronous, it means
+the API response can contain the updated subsection and course grade data.  Because
+a response from the API contains this data, the UI can operate in a very familiar way:
+
+- A user clicks a button to submit a request with grade update data to the update endpoint.
+- On the server, the subsection and course grades are modified.
+- In the meantime, the client-side user looks at a spinner.
+- A response is returned with updated data and the spinner goes away.
+- Updated data is displayed to the user, along with a message indicative of the update.
+
+If the update becomes asynchronous, the user experience outlined above has to change.
+Because a single call to this endpoint updates grades data for only a single user,
+the endpoint does not necessarily have to utilize an asynchronous operation at this time.

openedx.yaml

@@ -0,0 +1,8 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+nick: grbk
+oeps: {}
+owner: edx/educator-neem
+openedx-release: {ref: master}
+track-pulls: true

package.json

@@ -25,66 +25,69 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.2.1",
+    "@edx/frontend-auth": "^1.3.0",
-    "@edx/paragon": "^3.7.2",
+    "@edx/frontend-component-footer": "^1.0.0",
+    "@edx/paragon": "^3.8.3",
+    "@redux-beacon/segment": "^1.0.0",
     "babel-polyfill": "^6.26.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
-    "email-prop-type": "^1.1.5",
+    "email-prop-type": "^1.1.7",
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.2",
     "query-string": "^5.1.1",
-    "react": "^16.2.0",
+    "react": "^16.7.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.7.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^5.1.1",
-    "react-router": "^4.2.0",
+    "react-router": "^4.3.1",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^3.7.2",
-    "redux-devtools-extension": "^2.13.2",
+    "redux-devtools-extension": "^2.13.7",
+    "redux-beacon": "^2.0.3",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "^2.3.0",
-    "whatwg-fetch": "^2.0.3"
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "^9.4.2",
+    "autoprefixer": "^9.4.5",
-    "axios-mock-adapter": "^1.15.0",
+    "axios-mock-adapter": "^1.16.0",
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.6",
-    "babel-jest": "^22.4.0",
+    "babel-jest": "^22.4.4",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "codecov": "^3.0.0",
+    "codecov": "^3.1.0",
-    "css-loader": "^0.28.9",
+    "css-loader": "^0.28.11",
-    "enzyme": "^3.3.0",
+    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-adapter-react-16": "^1.7.1",
-    "es-check": "^2.0.2",
+    "es-check": "^2.3.0",
-    "eslint-config-edx": "^4.0.3",
+    "eslint-config-edx": "^4.0.4",
-    "fetch-mock": "^6.3.0",
+    "fetch-mock": "^6.5.2",
     "file-loader": "^1.1.9",
     "html-webpack-harddisk-plugin": "^0.2.0",
-    "html-webpack-plugin": "^3.0.3",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^4.2.0",
-    "jest": "^22.4.0",
+    "jest": "^22.4.4",
     "mini-css-extract-plugin": "^0.4.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.11.0",
     "postcss-loader": "^3.0.0",
-    "react-dev-utils": "^5.0.0",
+    "react-dev-utils": "^5.0.3",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.7.0",
-    "redux-mock-store": "^1.5.1",
+    "redux-mock-store": "^1.5.3",
     "sass-loader": "^6.0.6",
-    "semantic-release": "^15.10.7",
+    "semantic-release": "^15.13.3",
-    "style-loader": "^0.20.2",
+    "style-loader": "^0.20.3",
-    "travis-deploy-once": "^5.0.9",
+    "travis-deploy-once": "^5.0.11",
-    "webpack": "^4.25.1",
+    "webpack": "^4.28.4",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.1.0",
+    "webpack-dev-server": "^3.1.14",
-    "webpack-merge": "^4.1.1"
+    "webpack-merge": "^4.2.1"
   },
   "jest": {
     "setupFiles": [
@@ -105,6 +108,7 @@
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!(@edx/paragon)/).*/"
-    ]
+    ],
+    "testURL": "http://localhost"
   }
 }

src/App.scss

@@ -5,8 +5,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
 @import "~@edx/paragon/src/SearchField/SearchField";
-@import "./components/Gradebook/gradebook";             
+
+@import "~@edx/frontend-component-footer/src/lib/scss/site-footer";
 
 @import "./components/Gradebook/gradebook";
-@import "./components/Gradebook/footer";
-@import "./components/Header/header";

src/components/Gradebook/footer.jsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { Hyperlink, Icon } from '@edx/paragon';
-
-import EdXFooterLogo from '../../../assets/edx-footer.png';
-
-export default function Footer() {
-  function renderLogo() {
-    return (
-      <img src={EdXFooterLogo} alt="edX logo" />
-    );
-  }
-
-  return (
-    <footer
-      role="contentinfo"
-      aria-label="Page Footer"
-      className="footer d-flex justify-content-center border-top py-3 px-4"
-    >
-      <div className="max-width-1180 d-grid">
-        <div className="area-1">
-          <Hyperlink destination="https://www.edx.org/" content={renderLogo()} aria-label="edX Home" />
-        </div>
-        <div className="area-2">
-          <h2>edX</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/about-us">About</a></li>
-            <li><a href="https://www.edx.org/enterprise">edX for Business</a></li>
-            <li><a href="https://www.edx.org/affiliate-program">Affiliates</a></li>
-            <li><a href="http://open.edx.org">Open edX</a></li>
-            <li><a href="https://www.edx.org/careers">Careers</a></li>
-            <li><a href="https://www.edx.org/news-announcements">News</a></li>
-          </ul>
-        </div>
-        <div className="area-3">
-          <h2>Legal</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/edx-terms-service">Terms of Service &amp; Honor Code</a></li>
-            <li><a href="https://www.edx.org/edx-privacy-policy">Privacy Policy</a></li>
-            <li><a href="https://www.edx.org/accessibility">Accessibility Policy</a></li>
-            <li><a href="https://www.edx.org/trademarks">Trademark Policy</a></li>
-            <li><a href="https://www.edx.org/sitemap">Sitemap</a></li>
-          </ul>
-        </div>
-        <div className="area-4">
-          <h2>Connect</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/blog">Blog</a></li>
-            <li><a href="https://courses.edx.org/support/contact_us">Contact Us</a></li>
-            <li><a href="https://support.edx.org">Help Center</a></li>
-            <li><a href="https://www.edx.org/media-kit">Media Kit</a></li>
-            <li><a href="https://www.edx.org/donate">Donate</a></li>
-          </ul>
-        </div>
-        <div className="area-5">
-          <ul
-            className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
-          >
-            {/* TODO: Use Paragon HyperLink with Icon. */}
-            {/*  Would need to add rel to paragon if we still need it. */}
-            <li>
-              <a href="http://www.facebook.com/EdxOnline" title="Facebook" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText="Like edX on Facebook" />
-              </a>
-            </li>
-            <li>
-              <a href="https://twitter.com/edXOnline" title="Twitter" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText="Follow edX on Twitter" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.youtube.com/user/edxonline" title="Youtube" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText="Subscribe to the edX YouTube channel" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.linkedin.com/company/edx" title="LinkedIn" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText="Follow edX on LinkedIn" />
-              </a>
-            </li>
-            <li>
-              <a href="https://plus.google.com/+edXOnline" title="Google+" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText="Follow edX on Google+" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.reddit.com/r/edx" title="Reddit" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-reddit-square', 'fa-2x']} screenReaderText="Subscribe to the edX subreddit" />
-              </a>
-            </li>
-          </ul>
-          <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
-            <li>
-              <a href="https://itunes.apple.com/us/app/edx/id945480667?mt=8" rel="noopener noreferrer" target="_blank">
-                <img
-                  className="max-height-39"
-                  alt="Download the edX mobile app from the Apple App Store"
-                  src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
-                />
-              </a>
-            </li>
-            <li>
-              <a href="https://play.google.com/store/apps/details?id=org.edx.mobile" rel="noopener noreferrer" target="_blank">
-                <img
-                  className="max-height-39"
-                  alt="Download the edX mobile app from Google Play"
-                  src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
-                />
-              </a>
-            </li>
-          </ul>
-          <p>
-            © 2012–{(new Date().getFullYear())} edX Inc.
-            <br />
-            EdX, Open edX, and MicroMasters are registered trademarks of edX Inc.
-            | 粤ICP备17044299号-2
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
-

src/components/Gradebook/footer.scss

@@ -1,165 +0,0 @@
-.max-width-222 {
-  max-width: 222px;
-}
-
-.max-width-264 {
-  max-width: 264px;
-}
-
-.max-width-1180 {
-  max-width: 1180px;
-}
-
-.max-height-39 {
-  max-height: 39px;
-}
-
-.d-grid {
-  display: grid;
-}
-
-$gray-footer: #fcfcfc;
-$border-1: 1px solid $gray-200;
-
-.footer {
-  background-color: $gray-footer;
-
-  .area-1 {
-    grid-column: 1;
-    grid-row: 1;
-    border-bottom: $border-1;
-    padding-bottom: 1rem;
-  }
-
-  .area-2 {
-    grid-column: 1;
-    grid-row: 2;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-3 {
-    grid-column: 1;
-    grid-row: 3;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-4 {
-    grid-column: 1;
-    grid-row: 4;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-5 {
-    grid-column: 1;
-    grid-row: 5;
-    padding: 1rem 0;
-  }
-
-  @media only screen and (min-width: 717px) {
-    .area-1 {
-      grid-column: 1 / span 2;
-      grid-row: 1;
-      border-bottom: none;
-      padding: 1rem 0;
-    }
-
-    .area-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .area-3 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .area-4 {
-      grid-column: 1;
-      grid-row: 4;
-      border-bottom: none;
-    }
-
-    .area-5 {
-      grid-column: 2;
-      grid-row: 2 / span 3;
-      border-left: $border-1;
-      padding-left: 1rem;
-      margin-left: 1rem;
-    }
-  }
-
-  @media only screen and (min-width: 870px) {
-    .area-1 {
-      grid-column: 1;
-      grid-row: 1 / span 3;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-    }
-
-    .area-5 {
-      grid-column: 2 / span 3;
-      grid-row: 2;
-      border: none;
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  @media only screen and (min-width: 1188px) {
-    .area-1 {
-      grid-column: 1 / span 1;
-      grid-row: 1;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-5 {
-      grid-column: 5 / span 1;
-      grid-row: 1;
-      max-width: 372px;
-    }
-  }
-}

src/components/Gradebook/gradebook.scss

@@ -68,6 +68,10 @@
         padding-left: 170px;
     }
 
+    .table tbody th {
+        font-weight: normal;
+    }
+
     .link-style {
         color: #0075b4;
         &:hover, &:focus {
@@ -77,3 +81,6 @@
     }
 }
 
+.mb-85 {
+    margin-bottom: 85px;
+}

src/components/Gradebook/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   InputSelect,
@@ -10,6 +11,7 @@ import {
 } from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
+import PageButtons from '../PageButtons';
 
 const DECIMAL_PRECISION = 2;
 
@@ -23,12 +25,41 @@ export default class Gradebook extends React.Component {
       updateVal: 0,
       updateModuleId: null,
       updateUserId: null,
+      socket: null,
+      websocketMsg: {
+        visible: false,
+      },
     };
   }
 
   componentDidMount() {
     const urlQuery = queryString.parse(this.props.location.search);
     this.props.getRoles(this.props.match.params.courseId, urlQuery);
+    const socket = new WebSocket('ws://localhost:8765/ws/gradebook/course-v1:edX+DemoX+Demo_Course/');
+    socket.onmessage = this.socketMessageFunction;
+  }
+
+  socketMessageFunction = (event) => {
+      var data = JSON.parse(event.data);
+      console.log(data);
+
+      const userIndex = this.props.grades.findIndex((entry) => entry.user_id == data.user_id);
+      const username = this.props.grades[userIndex].username;
+      const subsectionIndex = this.props.grades[userIndex].section_breakdown.findIndex((entry) => entry.module_id = data.subsection_id);
+      const subsectionName = this.props.grades[userIndex].section_breakdown[subsectionIndex].label;
+
+      let subsectionGrade = this.props.grades[userIndex].section_breakdown[subsectionIndex];
+      subsectionGrade.score_earned = data.override.earned_graded_override;
+      subsectionGrade.score_possible = data.override.possible_graded_override;
+
+      const updatedMsg = {
+        visible: true,
+        username: username,
+        subsectionName: subsectionName,
+      };
+
+      this.setState({ websocketMsg: updatedMsg });
+      this.props.gradeUpdateSuccess(this.props.match.params.courseId, this.props.grades);
   }
 
   setNewModalState = (userEntry, subsection) => {
@@ -118,6 +149,8 @@ export default class Gradebook extends React.Component {
 
   updateAssignmentTypes = (event) => {
     this.props.filterColumns(event, this.props.grades[0]);
+    const updatedQueryStrings = this.updateQueryParams('assignmentType', event);
+    this.props.history.push(updatedQueryStrings);
   }
 
   updateTracks = (event) => {
@@ -130,6 +163,7 @@ export default class Gradebook extends React.Component {
       this.props.match.params.courseId,
       this.props.selectedCohort,
       selectedTrackSlug,
+      this.props.selectedAssignmentType,
     );
     const updatedQueryStrings = this.updateQueryParams('track', selectedTrackSlug);
     this.props.history.push(updatedQueryStrings);
@@ -145,18 +179,9 @@ export default class Gradebook extends React.Component {
       this.props.match.params.courseId,
       selectedCohortId,
       this.props.selectedTrack,
+      this.props.selectedAssignmentType,
     );
-    const updatedQueryStrings = this.updateQueryParams('cohort', selectedCohortId);
+    this.updateQueryParams('cohort', selectedCohortId);
-    this.props.history.push(updatedQueryStrings);
-  };
-
-  mapSelectedAssignmentTypeEntry = (entry) => {
-    const selectedAssignmentTypeEntry = this.props.assignmentTypes
-      .find(x => x.id === parseInt(entry, 10));
-    if (selectedAssignmentTypeEntry) {
-      return selectedAssignmentTypeEntry.name;
-    }
-    return 'All';
   };
 
   mapSelectedCohortEntry = (entry) => {
@@ -175,13 +200,12 @@ export default class Gradebook extends React.Component {
     return 'Tracks';
   };
 
-  roundGrade = percent => parseFloat(percent.toFixed(DECIMAL_PRECISION));
+  roundGrade = percent => parseFloat((percent || 0).toFixed(DECIMAL_PRECISION));
 
   formatter = {
     percent: (entries, areGradesFrozen) => entries.map((entry) => {
       const results = { username: entry.username };
       const assignments = entry.section_breakdown
-        .filter(section => section.is_graded)
         .reduce((acc, subsection) => {
           if (areGradesFrozen) {
             acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
@@ -203,7 +227,6 @@ export default class Gradebook extends React.Component {
     absolute: (entries, areGradesFrozen) => entries.map((entry) => {
       const results = { username: entry.username };
       const assignments = entry.section_breakdown
-        .filter(section => section.is_graded)
         .reduce((acc, subsection) => {
           const scoreEarned = this.roundGrade(subsection.score_earned);
           const scorePossible = this.roundGrade(subsection.score_possible);
@@ -243,7 +266,7 @@ export default class Gradebook extends React.Component {
               href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
               className="mb-3"
             >
-              {'<< Back to Dashboard'}
+              <span aria-hidden="true">{'<< '}</span> {'Back to Dashboard'}
             </a>
             <h1>Gradebook</h1>
             <h3> {this.props.match.params.courseId}</h3>
@@ -252,49 +275,54 @@ export default class Gradebook extends React.Component {
                 The grades for this course are now frozen. Editing of grades is no longer allowed.
               </div>
             }
-            { !this.props.canUserViewGradebook &&
+            { (this.props.canUserViewGradebook === false) &&
               <div className="alert alert-warning" role="alert" >
-                You are not authorized to view the gradebook for this course. If you have a global role, please enroll in this course and try again.
+                You are not authorized to view the gradebook for this course.
               </div>
             }
             <hr />
             <div className="d-flex justify-content-between" >
               <div>
-                <div>
+                <div role="radiogroup" aria-labelledby="score-view-group-label">
-                  Score View:
+                  <span id="score-view-group-label">Score View:</span>
                   <span>
-                    <input
+                    <label className="mr-2" htmlFor="score-view-percent">
-                      id="score-view-percent"
+                      <input
-                      className="ml-2 mr-1"
+                        id="score-view-percent"
-                      type="radio"
+                        className="ml-2 mr-1"
-                      name="score-view"
+                        type="radio"
-                      value="percent"
+                        name="score-view"
-                      defaultChecked
+                        value="percent"
-                      onClick={() => this.props.toggleFormat('percent')}
+                        defaultChecked
-                    />
+                        onClick={() => this.props.toggleFormat('percent')}
-                    <label className="mr-2" htmlFor="score-view-percent">Percent</label>
+                      />
+                      Percent
+                    </label>
                   </span>
                   <span>
-                    <input
+                    <label htmlFor="score-view-absolute">
-                      id="score-view-absolute"
+                      <input
-                      type="radio"
+                        id="score-view-absolute"
-                      name="score-view"
+                        type="radio"
-                      value="absolute"
+                        name="score-view"
-                      className="mr-1"
+                        value="absolute"
-                      onClick={() => this.props.toggleFormat('absolute')}
+                        className="mr-1"
-                    />
+                        onClick={() => this.props.toggleFormat('absolute')}
-                    <label htmlFor="score-view-absolute">Absolute</label>
+                      />
+                    Absolute
+                    </label>
                   </span>
                 </div>
-                { this.props.assignmnetTypes.length > 0 &&
+                { this.props.assignmentTypes.length > 0 &&
                   <div className="student-filters">
                     <span className="label">
                       Assignment Types:
                     </span>
                     <InputSelect
                       name="assignment-types"
-                      value={this.mapSelectedTrackEntry(this.props.selectedAssignmentType)}
+                      ariaLabel="Assignment Types"
-                      options={this.mapAssignmentTypeEntries(this.props.assignmnetTypes)}
+                      value={this.props.selectedAssignmentType}
+                      options={this.mapAssignmentTypeEntries(this.props.assignmentTypes)}
                       onChange={this.updateAssignmentTypes}
                     />
                   </div>
@@ -305,6 +333,7 @@ export default class Gradebook extends React.Component {
                   </span>
                   <InputSelect
                     name="Tracks"
+                    ariaLabel="Tracks"
                     disabled={this.props.tracks.length === 0}
                     value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
                     options={this.mapTracksEntries(this.props.tracks)}
@@ -312,6 +341,7 @@ export default class Gradebook extends React.Component {
                   />
                   <InputSelect
                     name="Cohorts"
+                    ariaLabel="Cohorts"
                     disabled={this.props.cohorts.length === 0}
                     value={this.mapSelectedCohortEntry(this.props.selectedCohort)}
                     options={this.mapCohortsEntries(this.props.cohorts)}
@@ -321,29 +351,30 @@ 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`}>Generate Grade Report</a>
+                  <a className="btn btn-outline-primary mb-85" 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)}
+                  onSubmit={value =>
+                    this.props.searchForUser(
+                      this.props.match.params.courseId,
+                      value,
+                      this.props.selectedCohort,
+                      this.props.selectedTrack,
+                      this.props.selectedAssignmentType,
+                    )
+                  }
+                  inputLabel="Search Username:"
                   onChange={filterValue => this.setState({ filterValue })}
-                  onClear={() => this.props.getUserGrades(this.props.match.params.courseId, this.props.selectedCohort, this.props.selectedTrack)}
+                  onClear={() =>
+                      this.props.getUserGrades(
+                      this.props.match.params.courseId,
+                      this.props.selectedCohort,
+                      this.props.selectedTrack,
+                      this.props.selectedAssignmentType,
+                    )
+                  }
                   value={this.state.filterValue}
                 />
-                <div className="d-flex justify-content-end" style={{ marginTop: '20px' }}>
-                  <Button
-                    label="Previous"
-                    buttonType="primary"
-                    style={{ visibility: (!this.props.prevPage ? 'hidden' : 'visible') }}
-                    onClick={() => this.props.getPrevNextGrades(this.props.prevPage, this.props.selectedCohort, this.props.selectedTrack)}
-                  />
-                  <div style={{ width: '10px' }} />
-                  <Button
-                    label="Next"
-                    buttonType="primary"
-                    style={{ visibility: (!this.props.nextPage ? 'hidden' : 'visible') }}
-                    onClick={() => this.props.getPrevNextGrades(this.props.nextPage, this.props.selectedCohort, this.props.selectedTrack)}
-                  />
-                </div>
               </div>
             </div>
             <br />
@@ -353,15 +384,24 @@ export default class Gradebook extends React.Component {
               onClose={() => this.props.updateBanner(false)}
               open={this.props.showSuccess}
             />
+            <StatusAlert
+              alertType="success"
+              dialog={`Grade for user ${this.state.websocketMsg.username} in ${this.state.websocketMsg.subsectionName} was updated.`}
+              onClose={() => this.setState({ websocketMsg : false })}
+              open={this.state.websocketMsg.visible}
+            />
+            {PageButtons(this.props)}
             <div className="gbook">
               <Table
                 columns={this.props.headings}
-                data={this.formatter[this.props.format](this.props.grades, this.props.areGradesFrozen)}
+                data={this.formatter[this.props.format](
-                tableSortable
+                  this.props.grades,
-                defaultSortDirection="asc"
+                  this.props.areGradesFrozen,
-                defaultSortedColumn="username"
+                )}
+                rowHeaderColumnKey="username"
               />
             </div>
+            {PageButtons(this.props)}
             <Modal
               open={this.state.modalOpen}
               title="Edit Grades"
@@ -398,3 +438,78 @@ export default class Gradebook extends React.Component {
   }
 }
 
+Gradebook.defaultProps = {
+  areGradesFrozen: false,
+  assignmentTypes: [],
+  canUserViewGradebook: false,
+  cohorts: [],
+  grades: [],
+  location: {
+    search: '',
+  },
+  match: {
+    params: {
+      courseId: '',
+    },
+  },
+  selectedCohort: null,
+  selectedTrack: null,
+  selectedAssignmentType: 'All',
+  showSpinner: false,
+  tracks: [],
+};
+
+Gradebook.propTypes = {
+  areGradesFrozen: PropTypes.bool,
+  assignmentTypes: PropTypes.arrayOf(PropTypes.string),
+  canUserViewGradebook: PropTypes.bool,
+  cohorts: PropTypes.arrayOf(PropTypes.string),
+  filterColumns: PropTypes.func.isRequired,
+  format: PropTypes.string.isRequired,
+  getRoles: PropTypes.func.isRequired,
+  getUserGrades: 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,
+  })),
+  headings: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    key: PropTypes.string,
+  })).isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  location: PropTypes.shape({
+    search: PropTypes.string,
+  }),
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+  }),
+  searchForUser: PropTypes.func.isRequired,
+  selectedAssignmentType: PropTypes.string,
+  selectedCohort: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  selectedTrack: PropTypes.string,
+  showSpinner: PropTypes.bool,
+  showSuccess: PropTypes.bool.isRequired,
+  toggleFormat: PropTypes.func.isRequired,
+  tracks: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+  })),
+  updateBanner: PropTypes.func.isRequired,
+  updateGrades: PropTypes.func.isRequired,
+};

src/components/Header/_header.scss

@@ -1,24 +0,0 @@
-.color-gray-dark {
-    color: #767676;
-}
-
-.weight-bold {
-    font-weight: 600;
-}
-
-.size-16 {
-    font-size: 16px;
-}
-
-.border-bottom-blue {
-    border-bottom: 1px solid #0075b4;
-}
-
-.border-bottom-gray {
-    border-bottom: 1px solid #e7e7e7;
-}
-
-.nav-link::after {
-    content: '\00BB';
-    padding-left: 4px;
-}

src/components/Header/index.jsx

@@ -1,17 +1,9 @@
 import React from 'react';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { Hyperlink } from '@edx/paragon';
-import { configuration } from '../../config';
 
 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" />
@@ -25,15 +17,6 @@ export default class Header extends React.Component {
           <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
           <div />
         </header>
-        {this.state.mobileNavOpen &&
-        <nav className="d-flex flex-column weight-bold size-16">
-          <a href="https://www.google.com" className="nav-link border-bottom-gray">Rick</a>
-          <a href="https://www.google.com" className="nav-link border-bottom-gray">Alex</a>
-          <a href="https://www.google.com" className="nav-link border-bottom-gray">Jasen</a>
-          <a href="https://www.google.com" className="nav-link border-bottom-gray">Doug</a>
-          <a href="https://www.google.com" className="nav-link border-bottom-gray">Simon</a>
-        </nav>
-        }
       </div>
     );
   }

src/components/PageButtons/PageButtons.test.jsx

@@ -0,0 +1,36 @@
+import renderer from 'react-test-renderer';
+import PageButtons from '.';
+
+const createInput = function createInput(prevPage, nextPage) {
+  return {
+    prevPage,
+    nextPage,
+    selectedTrack: 't',
+    selectedCohort: 'c',
+    getPrevNextGrades() {},
+  };
+};
+
+describe('PageButtons', () => {
+  const assertPageButtonsSnapshot = function assertPageButtonsSnapshot(input) {
+    const pb = renderer.create(PageButtons(input));
+    const tree = pb.toJSON();
+    expect(tree).toMatchSnapshot();
+  };
+
+  it('prev null, next null', () => {
+    assertPageButtonsSnapshot(createInput(null, null));
+  });
+
+  it('prev null, next not null', () => {
+    assertPageButtonsSnapshot(createInput(null, 'np'));
+  });
+
+  it('prev not null, next null', () => {
+    assertPageButtonsSnapshot(createInput('pp', null));
+  });
+
+  it('prev not null, next not null', () => {
+    assertPageButtonsSnapshot(createInput('pp', 'np'));
+  });
+});

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageButtons prev not null, next not null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev not null, next null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev null, next not null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev null, next null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;

src/components/PageButtons/index.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+
+
+export default function PageButtons({
+  prevPage, nextPage, selectedTrack, selectedCohort, selectedAssignmentType,
+  getPrevNextGrades, match,
+}) {
+  return (
+    <div
+      className="d-flex justify-content-center"
+      style={{ paddingBottom: '20px' }}
+    >
+      <Button
+        label="Previous Page"
+        style={{ margin: '20px' }}
+        buttonType="outline-primary"
+        disabled={!prevPage}
+        onClick={() =>
+          getPrevNextGrades(
+            prevPage,
+            match.params.courseId,
+            selectedCohort,
+            selectedTrack,
+            selectedAssignmentType,
+          )}
+      />
+      <Button
+        label="Next Page"
+        style={{ margin: '20px' }}
+        buttonType="outline-primary"
+        disabled={!nextPage}
+        onClick={() =>
+          getPrevNextGrades(
+            nextPage,
+            match.params.courseId,
+            selectedCohort,
+            selectedTrack,
+            selectedAssignmentType,
+          )}
+      />
+    </div>
+  );
+}
+
+PageButtons.defaultProps = {
+  match: {
+    params: {
+      courseId: '',
+    },
+  },
+  nextPage: '',
+  prevPage: '',
+  selectedCohort: null,
+  selectedTrack: null,
+  selectedAssignmentType: null,
+};
+
+PageButtons.propTypes = {
+  getPrevNextGrades: PropTypes.func.isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+  }),
+  nextPage: PropTypes.string,
+  prevPage: PropTypes.string,
+  selectedAssignmentType: PropTypes.string,
+  selectedCohort: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  selectedTrack: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+};
+

src/containers/GradebookPage/index.jsx

@@ -5,6 +5,7 @@ import {
   fetchGrades,
   fetchMatchingUserGrades,
   fetchPrevNextGrades,
+  gradeUpdateSuccess,
   updateGrades,
   toggleGradeFormat,
   filterColumns,
@@ -15,6 +16,15 @@ import { fetchTracks } from '../../data/actions/tracks';
 import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
 import { getRoles } from '../../data/actions/roles';
 
+function shouldShowSpinner(state) {
+  if (state.roles.canUserViewGradebook === true) {
+    return state.grades.showSpinner;
+  } else if (state.roles.canUserViewGradebook === false) {
+    return false;
+  } // canUserViewGradebook === null
+  return true;
+}
+
 const mapStateToProps = state => (
   {
     grades: state.grades.results,
@@ -23,37 +33,28 @@ const mapStateToProps = state => (
     cohorts: state.cohorts.results,
     selectedTrack: state.grades.selectedTrack,
     selectedCohort: state.grades.selectedCohort,
+    selectedAssignmentType: state.grades.selectedAssignmentType,
     format: state.grades.gradeFormat,
     showSuccess: state.grades.showSuccess,
     prevPage: state.grades.prevPage,
     nextPage: state.grades.nextPage,
-    assignmnetTypes: state.assignmentTypes.results,
+    assignmentTypes: state.assignmentTypes.results,
     areGradesFrozen: state.assignmentTypes.areGradesFrozen,
     showSpinner: shouldShowSpinner(state),
-    canUserViewGradebook: state.roles.canUserViewGradebook
+    canUserViewGradebook: state.roles.canUserViewGradebook,
   }
 );
 
-function shouldShowSpinner (state) {
-  if (state.roles.canUserViewGradebook === true){
-    return state.grades.showSpinner;
-  } else if (state.roles.canUserViewGradebook === false){
-    return false;
-  } else { // canUserViewGradebook === null
-    return true;
-  }
-}
-
 const mapDispatchToProps = dispatch => (
   {
-    getUserGrades: (courseId, cohort, track) => {
+    getUserGrades: (courseId, cohort, track, assignmentType) => {
-      dispatch(fetchGrades(courseId, cohort, track));
+      dispatch(fetchGrades(courseId, cohort, track, assignmentType));
     },
-    searchForUser: (courseId, searchText, cohort, track) => {
+    searchForUser: (courseId, searchText, cohort, track, assignmentType) => {
-      dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, false));
+      dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, assignmentType, false));
     },
-    getPrevNextGrades: (endpoint, cohort, track) => {
+    getPrevNextGrades: (endpoint, courseId, cohort, track, assignmentType) => {
-      dispatch(fetchPrevNextGrades(endpoint, cohort, track));
+      dispatch(fetchPrevNextGrades(endpoint, courseId, cohort, track, assignmentType));
     },
     getCohorts: (courseId) => {
       dispatch(fetchCohorts(courseId));
@@ -79,6 +80,9 @@ const mapDispatchToProps = dispatch => (
     getRoles: (matchParams, urlQuery) => {
       dispatch(getRoles(matchParams, urlQuery));
     },
+    gradeUpdateSuccess: (courseId, data) => {
+      dispatch(gradeUpdateSuccess(courseId, data));
+    },
   }
 );
 

src/data/actions/grades.js

@@ -7,48 +7,39 @@ import {
   GRADE_UPDATE_SUCCESS,
   GRADE_UPDATE_FAILURE,
   TOGGLE_GRADE_FORMAT,
-  SORT_GRADES,
   FILTER_COLUMNS,
   UPDATE_BANNER,
 } from '../constants/actionTypes/grades';
 import LmsApiService from '../services/LmsApiService';
-import store from '../store';
+import { headingMapper, sortAlphaAsc } from './utils';
-import { headingMapper, gradeSortMap, sortAlphaAsc } from './utils';
 import apiClient from '../apiClient';
 
 const defaultAssignmentFilter = 'All';
 
-const sortGrades = (columnName, direction) => {
-  const sortFn = gradeSortMap(columnName, direction);
-  const { results } = store.getState().grades;
-  results.sort(sortFn);
-
-  /* have to make a copy of results or React wont know there was
-   * a change and wont trigger a re-render
-   */
-  return ({ type: SORT_GRADES, results: [...results] });
-};
-
 const startedFetchingGrades = () => ({ type: STARTED_FETCHING_GRADES });
 const finishedFetchingGrades = () => ({ type: FINISHED_FETCHING_GRADES });
 const errorFetchingGrades = () => ({ type: ERROR_FETCHING_GRADES });
-const gotGrades = (grades, cohort, track, headings, prev, next) => ({
+const gotGrades = (grades, cohort, track, assignmentType, headings, prev, next, courseId) => ({
   type: GOT_GRADES,
   grades,
   cohort,
   track,
+  assignmentType,
   headings,
   prev,
   next,
+  courseId,
 });
 
 const gradeUpdateRequest = () => ({ type: GRADE_UPDATE_REQUEST });
-const gradeUpdateSuccess = responseData => ({
+const gradeUpdateSuccess = (courseId, responseData) => ({
   type: GRADE_UPDATE_SUCCESS,
+  courseId,
   payload: { responseData },
 });
-const gradeUpdateFailure = error => ({
+const gradeUpdateFailure = (courseId, error) => ({
   type: GRADE_UPDATE_FAILURE,
+  courseId,
   payload: { error },
 });
 
@@ -58,13 +49,13 @@ const toggleGradeFormat = formatType => ({ type: TOGGLE_GRADE_FORMAT, formatType
 const filterColumns = (filterType, exampleUser) => (
   dispatch => dispatch({
     type: FILTER_COLUMNS,
-    headings: headingMapper(filterType)(dispatch, exampleUser),
+    headings: headingMapper(filterType)(exampleUser),
   })
 );
 
 const updateBanner = showSuccess => ({ type: UPDATE_BANNER, showSuccess });
 
-const fetchGrades = (courseId, cohort, track, showSuccess) => (
+const fetchGrades = (courseId, cohort, track, assignmentType, showSuccess) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
     return LmsApiService.fetchGradebookData(courseId, null, cohort, track)
@@ -74,9 +65,11 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
+          assignmentType,
+          headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
           data.previous,
           data.next,
+          courseId,
         ));
         dispatch(finishedFetchingGrades());
         dispatch(updateBanner(!!showSuccess));
@@ -87,7 +80,14 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
   }
 );
 
-const fetchMatchingUserGrades = (courseId, searchText, cohort, track, showSuccess) => (
+const fetchMatchingUserGrades = (
+  courseId,
+  searchText,
+  cohort,
+  track,
+  assignmentType,
+  showSuccess,
+) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
     return LmsApiService.fetchGradebookData(courseId, searchText, cohort, track)
@@ -97,9 +97,11 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track, showSucces
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
+          assignmentType,
+          headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
           data.previous,
           data.next,
+          courseId,
         ));
         dispatch(finishedFetchingGrades());
         dispatch(updateBanner(showSuccess));
@@ -110,7 +112,7 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track, showSucces
   }
 );
 
-const fetchPrevNextGrades = (endpoint, cohort, track) => (
+const fetchPrevNextGrades = (endpoint, courseId, cohort, track, assignmentType) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
     return apiClient.get(endpoint)
@@ -120,9 +122,11 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
+          assignmentType,
+          headingMapper(assignmentType || defaultAssignmentFilter)(data.results[0]),
           data.previous,
           data.next,
+          courseId,
         ));
         dispatch(finishedFetchingGrades());
       })
@@ -132,18 +136,24 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
   }
 );
 
-
 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(gradeUpdateSuccess(courseId, data));
-        dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, true));
+        // dispatch(fetchMatchingUserGrades(
+        //   courseId,
+        //   searchText,
+        //   cohort,
+        //   track,
+        //   defaultAssignmentFilter,
+        //   true,
+        // ));
       })
       .catch((error) => {
-        dispatch(gradeUpdateFailure(error));
+        dispatch(gradeUpdateFailure(courseId, error));
       });
   }
 );
@@ -161,7 +171,6 @@ export {
   gradeUpdateFailure,
   updateGrades,
   toggleGradeFormat,
-  sortGrades,
   filterColumns,
   updateBanner,
 };

src/data/actions/grades.test.js

@@ -27,7 +27,8 @@ describe('actions', () => {
     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 expectedAssignmentType = 'Exam';
+    const fetchGradesURL = `${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/?page_size=25&cohort_id=${expectedCohort}&enrollment_mode=${expectedTrack}`;
     const responseData = {
       next: `${fetchGradesURL}&cursor=2344fda`,
       previous: null,
@@ -94,22 +95,20 @@ describe('actions', () => {
           grades: responseData.results.sort(sortAlphaAsc),
           cohort: expectedCohort,
           track: expectedTrack,
+          assignmentType: expectedAssignmentType,
           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,
+          courseId,
         },
         { type: FINISHED_FETCHING_GRADES },
         { type: UPDATE_BANNER, showSuccess: false },
@@ -119,7 +118,13 @@ describe('actions', () => {
       axiosMock.onGet(fetchGradesURL)
         .replyOnce(200, JSON.stringify(responseData));
 
-      return store.dispatch(fetchGrades(courseId, expectedCohort, expectedTrack, false)).then(() => {
+      return store.dispatch(fetchGrades(
+        courseId,
+        expectedCohort,
+        expectedTrack,
+        expectedAssignmentType,
+        false,
+      )).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       });
     });
@@ -134,7 +139,51 @@ describe('actions', () => {
       axiosMock.onGet(fetchGradesURL)
         .replyOnce(500, JSON.stringify({}));
 
-      return store.dispatch(fetchGrades(courseId, expectedCohort, expectedTrack, false)).then(() => {
+      return store.dispatch(fetchGrades(
+        courseId,
+        expectedCohort,
+        expectedTrack,
+        expectedAssignmentType,
+        false,
+      )).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches success action on empty response after fetching grades', () => {
+      const emptyResponseData = {
+        next: responseData.next,
+        previous: responseData.previous,
+        results: [],
+      };
+      const expectedActions = [
+        { type: STARTED_FETCHING_GRADES },
+        {
+          type: GOT_GRADES,
+          grades: [],
+          cohort: expectedCohort,
+          track: expectedTrack,
+          assignmentType: expectedAssignmentType,
+          headings: [],
+          prev: responseData.previous,
+          next: responseData.next,
+          courseId,
+        },
+        { type: FINISHED_FETCHING_GRADES },
+        { type: UPDATE_BANNER, showSuccess: false },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(fetchGradesURL)
+        .replyOnce(200, JSON.stringify(emptyResponseData));
+
+      return store.dispatch(fetchGrades(
+        courseId,
+        expectedCohort,
+        expectedTrack,
+        expectedAssignmentType,
+        false,
+      )).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       });
     });

src/data/actions/roles.js

@@ -10,7 +10,11 @@ import LmsApiService from '../services/LmsApiService';
 
 const allowedRoles = ['staff', 'instructor', 'support'];
 
-const gotRoles = canUserViewGradebook => ({ type: GOT_ROLES, canUserViewGradebook });
+const gotRoles = (canUserViewGradebook, courseId) => ({
+  type: GOT_ROLES,
+  canUserViewGradebook,
+  courseId,
+});
 const errorFetchingRoles = () => ({ type: ERROR_FETCHING_ROLES });
 
 const getRoles = (courseId, urlQuery) => (
@@ -20,9 +24,9 @@ const getRoles = (courseId, urlQuery) => (
       const canUserViewGradebook = response.is_staff
                                   || (response.roles.some(role => (role.course_id === courseId)
                                       && allowedRoles.includes(role.role)));
-      dispatch(gotRoles(canUserViewGradebook));
+      dispatch(gotRoles(canUserViewGradebook, courseId));
       if (canUserViewGradebook) {
-        dispatch(fetchGrades(courseId, urlQuery.cohort, urlQuery.track));
+        dispatch(fetchGrades(courseId, urlQuery.cohort, urlQuery.track, urlQuery.assignmentType));
         dispatch(fetchTracks(courseId));
         dispatch(fetchCohorts(courseId));
         dispatch(fetchAssignmentTypes(courseId));

src/data/actions/roles.test.js

@@ -22,23 +22,23 @@ const course1Id = 'course-v1:edX+DemoX+Demo_Course';
 const course2Id = 'course-v1:edX+DemoX+Demo_Course_2';
 const rolesUrl = `${configuration.LMS_BASE_URL}/api/enrollment/v1/roles/?course_id=${encodeURIComponent(course1Id)}`;
 
-function makeRoleListObj(roles, isGlobalStaff){
+function makeRoleListObj(roles, isGlobalStaff) {
   return {
-    roles: roles,
+    roles,
     is_staff: isGlobalStaff,
-  }
+  };
 }
 function makeRoleObj(courseId, role) {
   return {
     course_id: courseId,
-    role: role,
+    role,
-  }
+  };
-};
+}
 
-const course1StaffRole = makeRoleObj(course1Id, "staff");
+const course1StaffRole = makeRoleObj(course1Id, 'staff');
-const course1DummyRole = makeRoleObj(course1Id, "dummy");
+const course1DummyRole = makeRoleObj(course1Id, 'dummy');
-const course2StaffRole = makeRoleObj(course2Id, "staff");
+const course2StaffRole = makeRoleObj(course2Id, 'staff');
-const course2DummyRole = makeRoleObj(course2Id, "dummy");
+const course2DummyRole = makeRoleObj(course2Id, 'dummy');
 const urlParams = { cohort: null, track: null };
 
 describe('actions', () => {
@@ -49,7 +49,7 @@ describe('actions', () => {
   describe('getRoles', () => {
     it('dispatches got_roles action and subsequent actions after fetching role that allows gradebook', () => {
       const expectedActions = [
-        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
         { type: STARTED_FETCHING_GRADES },
         { type: STARTED_FETCHING_TRACKS },
         { type: STARTED_FETCHING_COHORTS },
@@ -57,7 +57,10 @@ describe('actions', () => {
       ];
       const store = mockStore();
       axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify(makeRoleListObj([course1StaffRole, course2DummyRole], false)));
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1StaffRole, course2DummyRole], false)),
+        );
 
       return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
@@ -66,7 +69,7 @@ describe('actions', () => {
 
     it('dispatches got_roles action and other actions after fetching irrelevent roles but user is global staff', () => {
       const expectedActions = [
-        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
         { type: STARTED_FETCHING_GRADES },
         { type: STARTED_FETCHING_TRACKS },
         { type: STARTED_FETCHING_COHORTS },
@@ -75,7 +78,10 @@ describe('actions', () => {
       const store = mockStore();
 
       axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify(makeRoleListObj([course1DummyRole, course2DummyRole], true)));
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1DummyRole, course2DummyRole], true)),
+        );
 
       return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
@@ -84,12 +90,17 @@ describe('actions', () => {
 
     it('dispatches got_roles action and no other actions after fetching role that disallows gradebook', () => {
       const expectedActions = [
-        { type: GOT_ROLES, canUserViewGradebook: false },
+        {
+          type: GOT_ROLES, canUserViewGradebook: false, courseId: course1Id,
+        },
       ];
       const store = mockStore();
 
       axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify(makeRoleListObj([course1DummyRole, course2StaffRole], false)));
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1DummyRole, course2StaffRole], false)),
+        );
 
       return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
@@ -98,12 +109,15 @@ describe('actions', () => {
 
     it('dispatches got_roles action and no other actions after fetching empty roles', () => {
       const expectedActions = [
-        { type: GOT_ROLES, canUserViewGradebook: false },
+        { type: GOT_ROLES, canUserViewGradebook: false, courseId: course1Id },
       ];
       const store = mockStore();
 
       axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify(makeRoleListObj([], false)));
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([], false)),
+        );
 
       return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
@@ -112,7 +126,7 @@ describe('actions', () => {
 
     it('dispatches got_roles action and other actions after fetching empty roles but user is global staff', () => {
       const expectedActions = [
-        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
         { type: STARTED_FETCHING_GRADES },
         { type: STARTED_FETCHING_TRACKS },
         { type: STARTED_FETCHING_COHORTS },
@@ -121,7 +135,10 @@ describe('actions', () => {
       const store = mockStore();
 
       axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify(makeRoleListObj([], true)));
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([], true)),
+        );
 
       return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
         expect(store.getActions()).toEqual(expectedActions);

src/data/actions/tracks.test.js

@@ -21,6 +21,7 @@ describe('actions', () => {
 
   describe('fetchTracks', () => {
     const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const trackUrl = `${configuration.LMS_BASE_URL}/api/enrollment/v1/course/${courseId}?include_expired=1`;
 
     it('dispatches success action after fetching tracks', () => {
       const responseData = {
@@ -54,7 +55,7 @@ describe('actions', () => {
       ];
       const store = mockStore();
 
-      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/enrollment/v1/course/${courseId}`)
+      axiosMock.onGet(trackUrl)
         .replyOnce(200, JSON.stringify(responseData));
 
       return store.dispatch(fetchTracks(courseId)).then(() => {
@@ -69,7 +70,7 @@ describe('actions', () => {
       ];
       const store = mockStore();
 
-      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/enrollment/v1/course/${courseId}`)
+      axiosMock.onGet(trackUrl)
         .replyOnce(500, JSON.stringify({}));
 
       return store.dispatch(fetchTracks(courseId)).then(() => {

src/data/actions/utils.js

@@ -1,5 +1,3 @@
-import { sortGrades } from './grades';
-
 const sortAlphaAsc = (gradeRowA, gradeRowB) => {
   const a = gradeRowA.username.toUpperCase();
   const b = gradeRowB.username.toUpperCase();
@@ -12,78 +10,24 @@ const sortAlphaAsc = (gradeRowA, gradeRowB) => {
   return 0;
 };
 
-const sortAlphaDesc = (gradeRowA, gradeRowB) => {
-  const a = gradeRowA.username.toUpperCase();
-  const b = gradeRowB.username.toUpperCase();
-  if (a < b) {
-    return 1;
-  }
-  if (a > b) {
-    return -1;
-  }
-  return 0;
-};
-
-const sortNumerically = (colKey, direction) => {
-  function getPercents(gradeRowA, gradeRowB) {
-    if (colKey !== 'total') {
-      return {
-        a: gradeRowA.section_breakdown.find(x => x.label === colKey).percent,
-        b: gradeRowB.section_breakdown.find(x => x.label === colKey).percent,
-      };
-    }
-    return {
-      a: gradeRowA.percent,
-      b: gradeRowB.percent,
-    };
-  }
-
-  function sortNumAsc(gradeRowA, gradeRowB) {
-    const { a, b } = getPercents(gradeRowA, gradeRowB);
-    return a - b;
-  }
-
-  function sortNumDesc(gradeRowA, gradeRowB) {
-    const { a, b } = getPercents(gradeRowA, gradeRowB);
-    return b - a;
-  }
-
-  return direction === 'desc' ? sortNumDesc : sortNumAsc;
-};
-
-function gradeSortMap(columnName, direction) {
-  if (columnName === 'username' && direction === 'desc') {
-    return sortAlphaDesc;
-  } else if (columnName === 'username') {
-    return sortAlphaAsc;
-  }
-  return sortNumerically(columnName, direction);
-}
-
 const headingMapper = (filterKey) => {
-  function all(dispatch, entry) {
+  function all(entry) {
     if (entry) {
       const results = [{
         label: 'Username',
         key: 'username',
-        columnSortable: true,
-        onSort: (direction) => { dispatch(sortGrades('username', direction)); },
       }];
 
       const assignmentHeadings = entry.section_breakdown
-        .filter(section => section.is_graded && section.label)
+        .filter(section => section.label)
         .map(s => ({
           label: s.label,
           key: s.label,
-          columnSortable: true,
-          onSort: direction => dispatch(sortGrades(s.label, direction)),
         }));
 
       const totals = [{
         label: 'Total',
         key: 'total',
-        columnSortable: true,
-        onSort: direction => dispatch(sortGrades('total', direction)),
       }];
 
       return results.concat(assignmentHeadings).concat(totals);
@@ -91,28 +35,24 @@ const headingMapper = (filterKey) => {
     return [];
   }
 
-  function some(dispatch, entry) {
+  function some(entry) {
+    if (!entry) return [];
+
     const results = [{
       label: 'Username',
       key: 'username',
-      columnSortable: true,
-      onSort: (direction) => { dispatch(sortGrades('username', direction)); },
     }];
 
     const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label && section.category === filterKey)
+      .filter(section => section.label && section.category === filterKey)
       .map(s => ({
         label: s.label,
         key: s.label,
-        columnSortable: false,
-        onSort: (direction) => { this.sortNumerically(s.label, direction); },
       }));
 
     const totals = [{
       label: 'Total',
       key: 'total',
-      columnSortable: true,
-      onSort: direction => dispatch(sortGrades('total', direction)),
     }];
 
     return results.concat(assignmentHeadings).concat(totals);
@@ -121,5 +61,5 @@ const headingMapper = (filterKey) => {
   return filterKey === 'All' ? all : some;
 };
 
-export { headingMapper, gradeSortMap, sortAlphaAsc };
+export { headingMapper, sortAlphaAsc };
 

src/data/constants/actionTypes/grades.js

@@ -8,7 +8,6 @@ const GRADE_UPDATE_SUCCESS = 'GRADE_UPDATE_SUCCESS';
 const GRADE_UPDATE_FAILURE = 'GRADE_UPDATE_FAILURE';
 
 const TOGGLE_GRADE_FORMAT = 'TOGGLE_GRADE_FORMAT';
-const SORT_GRADES = 'SORT_GRADES';
 const FILTER_COLUMNS = 'FILTER_COLUMNS';
 const UPDATE_BANNER = 'UPDATE_BANNER';
 
@@ -21,7 +20,6 @@ export {
   GRADE_UPDATE_SUCCESS,
   GRADE_UPDATE_FAILURE,
   TOGGLE_GRADE_FORMAT,
-  SORT_GRADES,
   FILTER_COLUMNS,
   UPDATE_BANNER,
 };

src/data/constants/actionTypes/roles.js

@@ -1,5 +1,5 @@
 const GOT_ROLES = 'GOT_ROLES';
-const ERROR_FETCHING_ROLES = 'ERROR_FETCHING_ROLES'
+const ERROR_FETCHING_ROLES = 'ERROR_FETCHING_ROLES';
 
 export {
   GOT_ROLES,

src/data/reducers/grades.js

@@ -5,7 +5,6 @@ import {
   TOGGLE_GRADE_FORMAT,
   FILTER_COLUMNS,
   UPDATE_BANNER,
-  SORT_GRADES,
 } from '../constants/actionTypes/grades';
 
 const initialState = {
@@ -32,9 +31,11 @@ const grades = (state = initialState, action) => {
         errorFetching: false,
         selectedTrack: action.track,
         selectedCohort: action.cohort,
+        selectedAssignmentType: action.assignmentType,
         prevPage: action.prev,
         nextPage: action.next,
         showSpinner: false,
+        courseId: action.courseId,
       };
     case STARTED_FETCHING_GRADES:
       return {
@@ -64,11 +65,6 @@ const grades = (state = initialState, action) => {
         ...state,
         showSuccess: action.showSuccess,
       };
-    case SORT_GRADES:
-      return {
-        ...state,
-        results: action.results,
-      };
     default:
       return state;
   }

src/data/reducers/grades.test.js

@@ -6,7 +6,6 @@ import {
   TOGGLE_GRADE_FORMAT,
   FILTER_COLUMNS,
   UPDATE_BANNER,
-  SORT_GRADES,
 } from '../constants/actionTypes/grades';
 
 const initialState = {
@@ -113,6 +112,7 @@ describe('grades reducer', () => {
       prevPage: expectedPrev,
       nextPage: expectedNext,
       showSpinner: false,
+      courseId,
     };
     expect(grades(undefined, {
       type: GOT_GRADES,
@@ -123,6 +123,7 @@ describe('grades reducer', () => {
       track: expectedTrack,
       cohort: expectedCohortId,
       showSpinner: true,
+      courseId,
     })).toEqual(expected);
   });
 
@@ -162,17 +163,6 @@ describe('grades reducer', () => {
     })).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,

src/data/reducers/roles.js

@@ -1,26 +1,27 @@
 import {
-    GOT_ROLES,
+  GOT_ROLES,
-    ERROR_FETCHING_ROLES,
+  ERROR_FETCHING_ROLES,
-  } from '../constants/actionTypes/roles';
+} from '../constants/actionTypes/roles';
 
-  const initialState = {
+const initialState = {
-    canUserViewGradebook: null,
+  canUserViewGradebook: null,
-  };
+};
 
-  const roles = (state = initialState, action) => {
+const roles = (state = initialState, action) => {
-    switch (action.type) {
+  switch (action.type) {
-      case GOT_ROLES:
+    case GOT_ROLES:
-        return {
+      return {
-          ...state,
+        ...state,
-          canUserViewGradebook: action.canUserViewGradebook,
+        canUserViewGradebook: action.canUserViewGradebook,
-        };
+      };
-      case ERROR_FETCHING_ROLES:
+    case ERROR_FETCHING_ROLES:
-        return {
+      return {
-          ...state,
+        ...state,
-          canUserViewGradebook: false,
+        canUserViewGradebook: false,
-        };
+      };
-      default:
+    default:
-        return state;
+      return state;
-  }};
+  }
+};
 
-  export default roles;
+export default roles;

src/data/reducers/roles.test.js

@@ -16,7 +16,7 @@ describe('tracks reducer', () => {
   it('updates canUserViewGradebook to true', () => {
     const expected = {
       ...initialState,
-      canUserViewGradebook: true
+      canUserViewGradebook: true,
     };
     expect(roles(undefined, {
       type: GOT_ROLES,
@@ -27,7 +27,7 @@ describe('tracks reducer', () => {
   it('updates canUserViewGradebook to false', () => {
     const expected = {
       ...initialState,
-      canUserViewGradebook: false
+      canUserViewGradebook: false,
     };
     expect(roles(undefined, {
       type: GOT_ROLES,

src/data/services/LmsApiService.js

@@ -3,7 +3,7 @@ import { configuration } from '../../config';
 
 class LmsApiService {
   static baseUrl = configuration.LMS_BASE_URL;
-  static pageSize = 10
+  static pageSize = 25
 
   static fetchGradebookData(courseId, searchText, cohort, track) {
     let gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/`;
@@ -25,7 +25,10 @@ class LmsApiService {
     /*
        updateData is expected to be a list of objects with the keys 'user_id' (an integer),
        'usage_id' (a string) and 'grade', which is an object with the keys:
-       'earned_all_override', 'possible_all_override', 'earned_graded_override', and 'possible_graded_override',
+       'earned_all_override',
+       'possible_all_override',
+       'earned_graded_override',
+       and 'possible_graded_override',
        each of which should be an integer.
        Example:
        [
@@ -46,7 +49,7 @@ class LmsApiService {
   }
 
   static fetchTracks(courseId) {
-    const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}`;
+    const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}?include_expired=1`;
     return apiClient.get(trackUrl);
   }
 

src/data/store.js

@@ -2,14 +2,57 @@ import { applyMiddleware, createStore } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
 import { createLogger } from 'redux-logger';
+import { createMiddleware } from 'redux-beacon';
+import Segment, { trackEvent, trackPageView } from '@redux-beacon/segment';
+import { GOT_ROLES } from './constants/actionTypes/roles';
+import { GOT_GRADES, GRADE_UPDATE_SUCCESS, GRADE_UPDATE_FAILURE } from './constants/actionTypes/grades';
 
 import reducers from './reducers';
 
 const loggerMiddleware = createLogger();
+const trackingCategory = 'gradebook';
+
+const eventsMap = {
+  [GOT_ROLES]: trackPageView(action => ({
+    category: trackingCategory,
+    page: action.courseId,
+  })),
+  [GOT_GRADES]: trackEvent(action => ({
+    name: 'Grades displayed or paginated',
+    properties: {
+      category: trackingCategory,
+      courseId: action.courseId,
+      track: action.track,
+      cohort: action.cohort,
+      assignmentType: action.assignmentType,
+      prev: action.prev,
+      next: action.next,
+    },
+  })),
+  [GRADE_UPDATE_SUCCESS]: trackEvent(action => ({
+    name: 'Grades Updated',
+    properties: {
+      category: trackingCategory,
+      courseId: action.courseId,
+      updatedGrades: action.payload.responseData,
+    },
+  })),
+  [GRADE_UPDATE_FAILURE]: trackEvent(action => ({
+    name: 'Grades Fail to Update',
+    properties: {
+      category: trackingCategory,
+      courseId: action.courseId,
+      error: action.payload.error,
+    },
+  })),
+};
+
+const segmentMiddleware = createMiddleware(eventsMap, Segment());
+
 
 const store = createStore(
   reducers,
-  composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware)),
+  composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware, segmentMiddleware)),
 );
 
 export default store;

src/index.jsx

@@ -3,16 +3,15 @@ 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 from '@edx/frontend-component-footer';
 
 import apiClient from './data/apiClient';
-import Footer from './components/Gradebook/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';
 
-var courseId = window.location.pathname.substring(1);
-
 const App = () => (
   <Provider store={store}>
     <Router>
@@ -23,7 +22,24 @@ const App = () => (
             <Route exact path="/:courseId" component={GradebookPage} />
           </Switch>
         </main>
-        <Footer />
+        <SiteFooter
+          siteName={process.env.SITE_NAME}
+          siteLogo={FooterLogo}
+          marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
+          supportUrl={process.env.SUPPORT_URL}
+          contactUrl={process.env.CONTACT_URL}
+          openSourceUrl={process.env.OPEN_SOURCE_URL}
+          termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
+          privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
+          facebookUrl={process.env.FACEBOOK_URL}
+          twitterUrl={process.env.TWITTER_URL}
+          youTubeUrl={process.env.YOU_TUBE_URL}
+          linkedInUrl={process.env.LINKED_IN_URL}
+          googlePlusUrl={process.env.GOOGLE_PLUS_URL}
+          redditUrl={process.env.REDDIT_URL}
+          appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
+          googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+        />
       </div>
     </Router>
   </Provider>

src/segment.js

@@ -0,0 +1,85 @@
+// The code in this file is from Segment's website:
+// https://segment.com/docs/sources/website/analytics.js/quickstart/
+import { configuration } from './config';
+
+(function () {
+  // Create a queue, but don't obliterate an existing one!
+  const analytics = window.analytics = window.analytics || [];
+
+  // If the real analytics.js is already on the page return.
+  if (analytics.initialize) return;
+
+  // If the snippet was invoked already show an error.
+  if (analytics.invoked) {
+    if (window.console && console.error) {
+      console.error('Segment snippet included twice.');
+    }
+    return;
+  }
+
+  // Invoked flag, to make sure the snippet
+  // is never invoked twice.
+  analytics.invoked = true;
+
+  // A list of the methods in Analytics.js to stub.
+  analytics.methods = [
+    'trackSubmit',
+    'trackClick',
+    'trackLink',
+    'trackForm',
+    'pageview',
+    'identify',
+    'reset',
+    'group',
+    'track',
+    'ready',
+    'alias',
+    'debug',
+    'page',
+    'once',
+    'off',
+    'on',
+  ];
+
+  // Define a factory to create stubs. These are placeholders
+  // for methods in Analytics.js so that you never have to wait
+  // for it to load to actually record data. The `method` is
+  // stored as the first argument, so we can replay the data.
+  analytics.factory = function (method) {
+    return function () {
+      const args = Array.prototype.slice.call(arguments);
+      args.unshift(method);
+      analytics.push(args);
+      return analytics;
+    };
+  };
+
+  // For each of our methods, generate a queueing stub.
+  for (let i = 0; i < analytics.methods.length; i++) {
+    const key = analytics.methods[i];
+    analytics[key] = analytics.factory(key);
+  }
+
+  // Define a method to load Analytics.js from our CDN,
+  // and that will be sure to only ever load it once.
+  analytics.load = function (key, options) {
+    // Create an async script element based on your key.
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = `https://cdn.segment.com/analytics.js/v1/${
+      key}/analytics.min.js`;
+
+    // Insert our script next to the first script element.
+    const first = document.getElementsByTagName('script')[0];
+    first.parentNode.insertBefore(script, first);
+    analytics._loadOptions = options;
+  };
+
+  // Add a version to keep track of what's in the wild.
+  analytics.SNIPPET_VERSION = '4.1.0';
+
+  // Load Analytics.js with your key, which will automatically
+  // load the tools you've enabled for your account. Boosh!
+  analytics.load(configuration.SEGMENT_KEY);
+}());