Bring change from main branch to koa release (#153)

* fix: Update frontend-build

* Upgrade frontend-platform

* Workaround for gradebook to use PUBLIC_PATH env in paths

.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "browsers": ["last 2 versions", "ie 11"]
-        }
-      }
-    ],
-    "babel-preset-react"
-  ],
-  "plugins": [
-    "transform-object-rest-spread",
-    "transform-class-properties"
-  ]
-}

.env

@@ -0,0 +1,33 @@
+NODE_ENV='production',
+NODE_PATH=./src
+BASE_URL=null,
+LMS_BASE_URL=null,
+LOGIN_URL=null,
+LOGOUT_URL=null,
+CSRF_TOKEN_API_PATH=null,
+REFRESH_ACCESS_TOKEN_ENDPOINT=null,
+DATA_API_BASE_URL=null,
+SEGMENT_KEY=null,
+FEATURE_FLAGS={},
+ACCESS_TOKEN_COOKIE_NAME=null,
+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,
+REDDIT_URL=null,
+APPLE_APP_STORE_URL=null,
+GOOGLE_PLAY_URL=null,
+ENTERPRISE_MARKETING_URL=null,
+ENTERPRISE_MARKETING_UTM_SOURCE=null,
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=null,
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null,

.env.development

@@ -0,0 +1,35 @@
+NODE_ENV='development'
+PORT=1994
+BASE_URL='localhost:1994'
+LMS_BASE_URL='http://localhost:18000'
+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_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME='edX'
+
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=null
+FEATURE_FLAGS={}
+CSRF_COOKIE_NAME='csrftoken'
+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'
+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'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'

.eslintignore

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

.eslintrc

@@ -1,24 +0,0 @@
-{
-  "extends": "eslint-config-edx",
-  "parser": "babel-eslint",
-  "rules": {
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          "config/*.js",
-          "**/*.test.jsx",
-          "**/*.test.js"
-        ]
-      }
-    ],
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340#issuecomment-338424908
-    "jsx-a11y/anchor-is-valid": [ "error", {
-      "components": [ "Link" ],
-      "specialLink": [ "to" ]
-    }]
-  },
-  "env": {
-    "jest": true
-  }
-}

.eslintrc.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .eslintcache
+.idea
 node_modules
 npm-debug.log
 coverage
@@ -11,3 +12,5 @@ dist/
 
 ### Emacs ###
 *~
+*.swo
+*.swp

.travis.yml

@@ -1,21 +1,14 @@
 language: node_js
-node_js:
-  - lts/*
-cache:
-  directories:
-    - "~/.npm"
+node_js: 12
 notifications:
   email:
     recipients:
-      - adusenbery@edx.org
-      - rreilly@edx.org
-      - schen@edx.org
+      - masters-grades@edx.org
     on_success: never
     on_failure: always
   webhooks: https://www.travisbuddy.com/
   on_success: never
 before_install:
-  - npm install -g npm@latest
   - npm install -g greenkeeper-lockfile@1.14.0
 install:
   - npm ci
@@ -23,6 +16,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

LICENSE

@@ -1,23 +1,21 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
- Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  Everyone is permitted to copy and distribute verbatim copies
  of this license document, but changing it is not allowed.
 
                             Preamble
 
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
   The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
+our General Public Licenses are intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
+software for all its users.
 
   When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
@@ -26,44 +24,34 @@ them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
 
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
 
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
 
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
 
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
 
   The precise terms and conditions for copying, distribution and
 modification follow.
@@ -72,7 +60,7 @@ modification follow.
 
   0. Definitions.
 
-  "This License" refers to version 3 of the GNU General Public License.
+  "This License" refers to version 3 of the GNU Affero General Public License.
 
   "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
@@ -549,35 +537,45 @@ to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
 
-  13. Use with the GNU Affero General Public License.
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
 
   Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
+under version 3 of the GNU General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
 
   14. Revised Versions of this License.
 
   The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
 
   Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
+Program specifies that a certain numbered version of the GNU Affero General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
+GNU Affero General Public License, you may choose any version ever published
 by the Free Software Foundation.
 
   If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
+versions of the GNU Affero General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
 
@@ -635,40 +633,29 @@ the "copyright" line and a pointer to where the full notice is found.
     Copyright (C) <year>  <name of author>
 
     This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+    GNU Affero General Public License for more details.
 
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 Also add information on how to contact you by electronic and paper mail.
 
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
 
   You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<http://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

Makefile

@@ -1,35 +1,9 @@
-shell: ## run a shell on the cookie-cutter container
-	docker exec -it edx.gradebook /bin/bash
-
-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
+npm-install-%: ## install specified % npm package
+	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

@@ -1,7 +1,7 @@
-[![Build Status](https://api.travis-ci.org/edx/gradebook.svg?branch=master)](https://travis-ci.org/edx/gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/gradebook.svg?branch=master)](https://coveralls.io/github/edx/gradebook)
-[![npm_version](https://img.shields.io/npm/v/@edx/gradebook.svg)](@edx/gradebook)
-[![npm_downloads](https://img.shields.io/npm/dt/@edx/gradebook.svg)](@edx/gradebook)
-[![license](https://img.shields.io/npm/l/@edx/gradebook.svg)](@edx/gradebook)
+[![Build Status](https://api.travis-ci.org/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.org/edx/frontend-app-gradebook) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-app-gradebook.svg?branch=master)](https://coveralls.io/github/edx/frontend-app-gradebook)
+[![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
+[![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
+[![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 # gradebook
@@ -16,25 +16,25 @@ The front-end of our editable Gradebook feature.
 
 To install gradebook into your project:
 ```
-npm i --save @edx/gradebook
+npm i --save @edx/frontend-app-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` you should see the UI.
+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`

babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel');

config/webpack.common.config.js

@@ -1,15 +0,0 @@
-// This is the common Webpack config. The dev and prod Webpack configs both
-// inherit config defined here.
-const path = require('path');
-
-module.exports = {
-  entry: {
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-};

config/webpack.dev.config.js

@@ -1,128 +0,0 @@
-// This is the dev Webpack config. All settings here should prefer a fast build
-// time at the expense of creating larger, unoptimized bundles.
-const Merge = require('webpack-merge');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-
-const commonConfig = require('./webpack.common.config.js');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'development',
-  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/index.jsx'),
-  ],
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        loader: 'babel-loader',
-        options: {
-          // Caches result of loader to the filesystem. Future builds will attempt to read from the
-          // cache to avoid needing to run the expensive recompilation process on each run.
-          cacheDirectory: true,
-        },
-      },
-      // We are not extracting CSS from the javascript bundles in development because extracting
-      // prevents hot-reloading from working, it increases build time, and we don't care about
-      // flash-of-unstyled-content issues in development.
-      {
-        test: /(.scss|.css)$/,
-        use: [
-          'style-loader', // creates style nodes from JS strings
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            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
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        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.
-  plugins: [
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-      BASE_URL: 'localhost:1991',
-      LMS_BASE_URL: 'http://localhost:18000',
-      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',
-      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',
-      SEGMENT_KEY: null,
-      FEATURE_FLAGS: {},
-      ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
-      CSRF_COOKIE_NAME: 'csrftoken',
-    }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  // This configures webpack-dev-server which serves bundles from memory and provides live
-  // reloading.
-  devServer: {
-    host: '0.0.0.0',
-    port: 1991,
-    historyApiFallback: true,
-    hot: true,
-    inline: true,
-  },
-});

config/webpack.prod.config.js

@@ -1,134 +0,0 @@
-// This is the prod Webpack config. All settings here should prefer smaller,
-// optimized bundles at the expense of a longer build time.
-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');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  output: {
-    filename: '[name].[chunkhash].js',
-    path: path.resolve(__dirname, '../dist'),
-  },
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        loader: 'babel-loader',
-      },
-      // Webpack, by default, includes all CSS in the javascript bundles. Unfortunately, that means:
-      // a) The CSS won't be cached by browsers separately (a javascript change will force CSS
-      // re-download).  b) Since CSS is applied asyncronously, it causes an ugly
-      // flash-of-unstyled-content.
-      //
-      // To avoid these problems, we extract the CSS from the bundles into separate CSS files that
-      // can be included as <link> tags in the HTML <head> manually.
-      //
-      // We will not do this in development because it prevents hot-reloading from working and it
-      // 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,
-              },
-            },
-            {
-              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
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        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
-  // common chunk and extract the Webpack runtime to a single runtime chunk.
-  optimization: {
-    runtimeChunk: 'single',
-    splitChunks: {
-      chunks: 'all',
-    },
-  },
-  // 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,
-    }),
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production',
-      BASE_URL: null,
-      LMS_BASE_URL: null,
-      LOGIN_URL: null,
-      LOGOUT_URL: null,
-      CSRF_TOKEN_API_PATH: null,
-      REFRESH_ACCESS_TOKEN_ENDPOINT: null,
-      DATA_API_BASE_URL: null,
-      SEGMENT_KEY: null,
-      FEATURE_FLAGS: {},
-      ACCESS_TOKEN_COOKIE_NAME: null,
-      CSRF_COOKIE_NAME: 'csrftoken',
-      NEW_RELIC_APP_ID: null,
-      NEW_RELIC_LICENSE_KEY: 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,13 @@
+# 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
+tags:
+  - frontend-app
+  - masters
+oeps:
+  oep-2: true    # Repository metadata
+openedx-release: {ref: master}
+owner:
+  type: team
+  team: edx/masters-devs-gta

package.json

@@ -1,108 +1,77 @@
 {
-  "name": "@edx/gradebook",
-  "version": "0.1.0",
+  "name": "@edx/frontend-app-gradebook",
+  "version": "1.4.14",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/gradebook.git"
+    "url": "git+https://github.com/edx/frontend-app-gradebook.git"
   },
   "scripts": {
-    "build": "NODE_ENV=production BABEL_ENV=production webpack --config=config/webpack.prod.config.js",
+    "build": "fedx-scripts webpack",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
-    "lint": "eslint --ext .js --ext .jsx .",
-    "precommit": "npm run lint",
+    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
+    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
+    "prepush": "npm run lint",
     "semantic-release": "semantic-release",
-    "start": "NODE_ENV=development BABEL_ENV=development node_modules/.bin/webpack-dev-server --config=config/webpack.dev.config.js --progress",
-    "test": "jest --coverage --passWithNoTests",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
+    "watch-tests": "jest --watch",
     "travis-deploy-once": "travis-deploy-once"
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/gradebook#readme",
+  "homepage": "https://github.com/edx/frontend-app-gradebook#readme",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.2.1",
-    "@edx/paragon": "^3.7.2",
-    "babel-polyfill": "^6.26.0",
-    "classnames": "^2.2.5",
-    "email-prop-type": "^1.1.5",
-    "font-awesome": "^4.7.0",
-    "history": "^4.7.2",
-    "prop-types": "^15.5.10",
-    "query-string": "^6.2.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "@edx/frontend-component-footer": "10.0.11",
+    "@edx/frontend-platform": "1.6.1",
+    "@edx/paragon": "10.0.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-brands-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.5",
+    "@redux-beacon/segment": "^1.0.0",
+    "classnames": "^2.2.6",
+    "core-js": "3.6.5",
+    "email-prop-type": "^1.1.7",
+    "font-awesome": "4.7.0",
+    "history": "4.10.1",
+    "node-sass": "^4.14.1",
+    "prop-types": "15.7.2",
+    "query-string": "6.13.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-intl": "^2.9.0",
+    "react-redux": "^5.1.1",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
-    "redux": "^3.7.2",
-    "redux-devtools-extension": "^2.13.2",
-    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "^2.0.3"
+    "redux": "4.0.5",
+    "redux-beacon": "^2.1.0",
+    "redux-devtools-extension": "2.13.8",
+    "redux-logger": "3.0.6",
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "^0.13.7",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "axios-mock-adapter": "^1.15.0",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.0",
-    "babel-loader": "^7.1.2",
-    "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-react": "^6.24.1",
-    "codecov": "^3.0.0",
-    "css-loader": "^0.28.9",
-    "enzyme": "^3.3.0",
-    "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",
+    "@edx/frontend-build": "5.3.2",
+    "axios": "0.19.2",
+    "axios-mock-adapter": "^1.17.0",
+    "codecov": "^3.6.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "es-check": "^2.3.0",
+    "fetch-mock": "^6.5.2",
+    "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "image-webpack-loader": "^4.2.0",
-    "jest": "^22.4.0",
-    "node-sass": "^4.7.2",
-    "react-dev-utils": "^5.0.0",
-    "react-test-renderer": "^16.2.0",
-    "redux-mock-store": "^1.5.1",
-    "sass-loader": "^6.0.6",
-    "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-dev-server": "^3.1.0",
-    "webpack-merge": "^4.1.1"
-  },
-  "jest": {
-    "setupFiles": [
-      "./src/setupTest.js"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|scss)$": "identity-obj-proxy"
-    },
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "src/setupTest.js",
-      "src/index.js",
-      "/tests/"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(@edx/paragon)/).*/"
-    ]
+    "react-dev-utils": "^5.0.3",
+    "react-test-renderer": "^16.10.1",
+    "redux-mock-store": "^1.5.3",
+    "semantic-release": "^15.13.24",
+    "travis-deploy-once": "^5.0.11"
   }
 }

public/index.html

@@ -1,7 +1,9 @@
 <!doctype html>
-<html>
+<html lang="en-us">
   <head>
+      <title>Gradebook | edX</title>
       <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   </head>
   <body>
     <div id="root"></div>

src/App.scss

@@ -1,9 +1,13 @@
-@import "~@edx/edx-bootstrap/sass/edx/theme";
-@import "~bootstrap/scss/bootstrap";
+
+@import "~@edx/paragon/scss/edx/theme.scss";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-@import "~@edx/paragon/src/SearchField/SearchField";
+$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+
+@import "~@edx/frontend-component-footer/dist/_footer";
 
 @import "./components/Gradebook/gradebook";
+@import "./components/Drawer/Drawer";
+

src/components/Drawer/Drawer.scss

@@ -0,0 +1,48 @@
+$drawer-width: 350px;
+
+.drawer-contents {
+    overflow-x: auto;
+    transition: margin 300ms cubic-bezier(0.4,0,0.2,1);
+    margin-left: 0;
+    .drawer.open + & {
+        margin-left: $drawer-width;
+    }
+    &.opened {
+        width: calc(100vw - #{$drawer-width});
+    }
+}
+
+.drawer-contents {
+    overflow-x: auto;
+    transition: margin 300ms cubic-bezier(0.4,0,0.2,1);
+    margin-left: 0;
+    .drawer.open + & {
+        margin-left: $drawer-width;
+    }
+    &.opened {
+        width: calc(100vw - #{$drawer-width});
+    }
+}
+
+.drawer-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px;
+}
+
+.drawer-container .collapsible {
+    margin-bottom: 1em;
+}
+
+.drawer {
+    height: 100%;
+    width: $drawer-width;
+    position: absolute;
+    transform: translateX(-$drawer-width);
+    flex-direction: column;
+    transition: transform 300ms cubic-bezier(0.4,0,0.2,1);
+    &.open {
+        transform: translateX(0%);
+    }
+}

src/components/Drawer/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Button } from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+export default class Drawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: props.initiallyOpen,
+      transitioning: false,
+    };
+  }
+
+  close = () => {
+    if (this.state.open) {
+      this.toggleOpen();
+    }
+  };
+
+  toggleOpen = () => {
+    this.setState({ transitioning: true });
+    // defer the transition to the next repaint so we can be sure that
+    // opening drawer is visible before it transitions
+    // (the start state of the opening animation doesn't work if the element starts hidden)
+    this.deferToNextRepaint(() => this.setState(prevState => ({ open: !prevState.open })));
+  };
+
+  handleSlideDone = (e) => {
+    if (e.currentTarget === e.target) {
+      this.setState({ transitioning: false });
+    }
+  };
+
+  deferToNextRepaint(callback) {
+    window.requestAnimationFrame(() => window.setTimeout(callback, 0));
+  }
+
+  render() {
+    return (
+      <div className="d-flex drawer-container">
+        <aside
+          className={classNames(
+            'drawer',
+            {
+              open: this.state.open,
+              'd-none': !this.state.transitioning && !this.state.open,
+            },
+          )}
+          onTransitionEnd={this.handleSlideDone}
+        >
+          <div className="drawer-header">
+            <h2>{this.props.title}</h2>
+            <Button
+              className="p-1"
+              onClick={this.close}
+              aria-label="Close Filters"
+            >
+              <FontAwesomeIcon icon={faTimes} />
+            </Button>
+          </div>
+          {this.props.children}
+        </aside>
+        <div
+          className={classNames(
+            'drawer-contents',
+            'position-relative',
+            !this.state.drawerTransitioning && this.state.drawerOpen && 'opened',
+          )}
+        >
+          {this.props.mainContent(this.toggleOpen)}
+        </div>
+      </div>
+    );
+  }
+}
+
+Drawer.propTypes = {
+  initiallyOpen: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  mainContent: PropTypes.func.isRequired,
+  title: PropTypes.node.isRequired,
+};

src/components/FilterBadges/index.jsx

@@ -0,0 +1,167 @@
+import { connect } from 'react-redux';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import initialFilters from '../../data/constants/filters';
+
+function FilterBadge({ name, value, onClick }) {
+  return (
+    <div>
+      <span className="badge badge-info">
+        <span>{`${name}: ${value}`}</span>
+        <button type="button" className="btn-info" aria-label="Close" onClick={onClick}>
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </span>
+      <br />
+    </div>
+  );
+}
+
+function RangeFilterBadge({
+  displayName,
+  filterName1,
+  filterValue1,
+  filterName2,
+  filterValue2,
+  handleBadgeClose,
+}) {
+  return ((filterValue1 !== initialFilters[filterName1])
+  || (filterValue2 !== initialFilters[filterName2]))
+   && (
+   <FilterBadge
+     name={displayName}
+     value={`${filterValue1} - ${filterValue2}`}
+     onClick={handleBadgeClose}
+   />
+   );
+}
+RangeFilterBadge.propTypes = {
+  displayName: PropTypes.string.isRequired,
+  filterName1: PropTypes.string.isRequired,
+  filterValue1: PropTypes.string.isRequired,
+  filterName2: PropTypes.string.isRequired,
+  filterValue2: PropTypes.string.isRequired,
+  handleBadgeClose: PropTypes.func.isRequired,
+};
+
+function SingleValueFilterBadge({
+  displayName, filterName, filterValue, handleBadgeClose,
+}) {
+  return (filterValue !== initialFilters[filterName])
+  && (
+  <FilterBadge
+    name={displayName}
+    value={filterValue}
+    onClick={handleBadgeClose}
+  />
+  );
+}
+SingleValueFilterBadge.propTypes = {
+  displayName: PropTypes.string.isRequired,
+  filterName: PropTypes.string.isRequired,
+  filterValue: PropTypes.string.isRequired,
+  handleBadgeClose: PropTypes.func.isRequired,
+};
+
+function FilterBadges({
+  assignment,
+  assignmentType,
+  track,
+  cohort,
+  assignmentGradeMin,
+  assignmentGradeMax,
+  courseGradeMin,
+  courseGradeMax,
+  handleFilterBadgeClose,
+}) {
+  return (
+    <div>
+      <SingleValueFilterBadge
+        displayName="Assignment Type"
+        filterName="assignmentType"
+        filterValue={assignmentType}
+        handleBadgeClose={handleFilterBadgeClose(['assignmentType'])}
+      />
+      <SingleValueFilterBadge
+        displayName="Assignment"
+        filterName="assignment"
+        filterValue={assignment}
+        handleBadgeClose={handleFilterBadgeClose(['assignment', 'assignmentGradeMax', 'assignmentGradeMin'])}
+      />
+      <RangeFilterBadge
+        displayName="Assignment Grade"
+        filterName1="assignmentGradeMin"
+        filterValue1={assignmentGradeMin}
+        filterName2="assignmentGradeMax"
+        filterValue2={assignmentGradeMax}
+        handleBadgeClose={handleFilterBadgeClose(['assignmentGradeMin', 'assignmentGradeMax'])}
+      />
+      <RangeFilterBadge
+        displayName="Course Grade"
+        filterName1="courseGradeMin"
+        filterValue1={courseGradeMin}
+        filterName2="courseGradeMax"
+        filterValue2={courseGradeMax}
+        handleBadgeClose={handleFilterBadgeClose(['courseGradeMin', 'courseGradeMax'])}
+      />
+      <SingleValueFilterBadge
+        displayName="Track"
+        filterName="track"
+        filterValue={track}
+        handleBadgeClose={handleFilterBadgeClose(['track'])}
+      />
+      <SingleValueFilterBadge
+        displayName="Cohort"
+        filterName="track"
+        filterValue={cohort}
+        handleBadgeClose={handleFilterBadgeClose(['cohort'])}
+      />
+    </div>
+  );
+}
+
+const mapStateToProps = state => (
+  {
+    assignment: (state.filters.assignment || {}).label,
+    assignmentType: state.filters.assignmentType,
+    track: state.filters.track,
+    cohort: state.filters.cohort,
+    assignmentGradeMin: state.filters.assignmentGradeMin,
+    assignmentGradeMax: state.filters.assignmentGradeMax,
+    courseGradeMin: state.filters.courseGradeMin,
+    courseGradeMax: state.filters.courseGradeMax,
+  }
+);
+
+const ConnectedFilterBadges = connect(mapStateToProps)(FilterBadges);
+export default ConnectedFilterBadges;
+
+FilterBadge.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+FilterBadges.defaultProps = {
+  assignment: initialFilters.assignmentType,
+  assignmentType: initialFilters.assignmentType,
+  track: initialFilters.track,
+  cohort: initialFilters.cohort,
+  assignmentGradeMin: initialFilters.assignmentGradeMin,
+  assignmentGradeMax: initialFilters.assignmentGradeMax,
+  courseGradeMin: initialFilters.courseGradeMin,
+  courseGradeMax: initialFilters.courseGradeMax,
+};
+
+FilterBadges.propTypes = {
+  assignment: PropTypes.string,
+  assignmentType: PropTypes.string,
+  track: PropTypes.string,
+  cohort: PropTypes.string,
+  assignmentGradeMin: PropTypes.string,
+  assignmentGradeMax: PropTypes.string,
+  courseGradeMin: PropTypes.string,
+  courseGradeMax: PropTypes.string,
+  handleFilterBadgeClose: PropTypes.func.isRequired,
+};

src/components/Gradebook/Assignments.jsx

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

src/components/Gradebook/BulkManagement.jsx

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

src/components/Gradebook/BulkManagementControls.jsx

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

src/components/Gradebook/EditModal.jsx

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

src/components/Gradebook/GradebookTable.jsx

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

src/components/Gradebook/gradebook.scss

@@ -3,6 +3,7 @@
     height: 100%;
     width: 100%;
     top: 0;
+    left: 0;
     background-color: #999;
     opacity: 0.5;
     z-index: 99999;
@@ -16,16 +17,16 @@
     color: black;
 }
 
-.gradebook-container{
-    width: 500px;
-    @media only screen and (min-width: 640px) {
-        width: 630px;
+.gradebook-content {
+    // note that this width isn't well-abstracted from Drawer code.
+    // if we need to change it we may need to dig into those styles as well
+    width: 100vw;
+    .search-help-text {
+        margin-left: 20px;
     }
-    @media only screen and (min-width: 992px) {
-        width: 900px;
-    }
-    @media only screen and (min-width: 1200px) {
-        width: 1024px;
+    h4 {
+        font-weight: bold;
+        margin-top: 2rem;
     }
 }
 
@@ -38,34 +39,109 @@
         margin-left: 10px;
     }
 }
-.gbook { 
-    overflow-x: scroll;
+.grade-history-header{
+    float: left;
+}
 
-    .table {
-        padding-left: 244px;
+.grade-history-assignment{
+    padding-right: 49px;
+}
+.grade-history-student{
+    padding-right: 75px;
+}
+
+.grade-history-original-grade{
+    padding-right: 25px;
+}
+
+.grade-history-current-grade{
+    padding-right: 25px;
+}
+.gradebook-container {
+    width: 100%;
+    overflow-x: auto;
+    height: 600px;
+    overflow-y: auto;
+    word-break: break-word;
+    position: relative;
+}
+
+.gbook { 
+    width: 100%;
+
+    .grade-button {
+        text-decoration: underline;
+    }
+
+    .student-key {
+        font-size: 14px;
+    }
+    
+
+    .table thead tr {
+        min-height: 60px;
+        &:nth-child(1) {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: white;
+          th {
+            background-color: white;
+            border-bottom: 1px solid $gray_200;
+          }
+        }
+    }
+
+    thead, tbody, tr, td, th {
+      display: block;
+      word-break: break-word;
     }
 
     .table tr th:first-child {
-        position: absolute;
-        width: 160px;
-        height:50px;
-        display: block;
-        background-color: #fff;
-        border-bottom: none;        
+        border-bottom: none;
     }
+    .table tr th:first-child,
     .table tr td:first-child {
-        position: absolute;
-        width: 160px;
-        height:50px; 
+        position: sticky;
+        left: 0;
+        z-index: 1; // to float over the following children in the side-scrolling case
+        background: white;
+    }
+
+    .table tr {
+      th:nth-child(1),
+      td:nth-child(1),
+      th:nth-child(2),
+      td:nth-child(2) {
+        min-width: 240px;
+      }
+      th, td {
+        min-width: 120px;
+      }
+    }
+    .table tbody th {
+        font-weight: normal;
+    }
+
+    .table {
+      overflow-x: hidden;
+
+      height: 100%;
+
+      tbody {
+        overflow-y: auto;
         display: block;
-        background-color: #fff;
-    }
-    .table tr td:nth-child(2) {
-        box-sizing: content-box;
-        padding-left: 170px;
-    }
-    .table tr th:nth-child(2) {
-        padding-left: 170px;
+      }
+
+      thead, tbody tr {
+        display: table;
+        table-layout: fixed;
+      }
+
+      th {
+          vertical-align: top;
+          font-size: 14px;
+      }
     }
 
     .link-style {
@@ -77,3 +153,19 @@
     }
 }
 
+.input-percent-label {
+    margin-top: 10px;
+}
+
+.mb-85 {
+    margin-bottom: 85px;
+}
+
+.modal-dialog {
+    max-width: 1000px;
+}
+
+.wrap-text-in-cell {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}

src/components/Gradebook/index.jsx

@@ -1,102 +1,103 @@
+/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
+  Collapsible,
+  Icon,
   InputSelect,
-  Modal,
+  InputText,
   SearchField,
   StatusAlert,
-  Table,
-  Icon,
+  Tab,
+  Tabs,
 } from '@edx/paragon';
 import queryString from 'query-string';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { configuration } from '../../config';
+import PageButtons from '../PageButtons';
+import Drawer from '../Drawer';
+import initialFilters from '../../data/constants/filters';
+import ConnectedFilterBadges from '../FilterBadges';
 
-const DECIMAL_PRECISION = 2;
+import Assignments from './Assignments';
+import BulkManagement from './BulkManagement';
+import BulkManagementControls from './BulkManagementControls';
+import EditModal from './EditModal';
+import GradebookTable from './GradebookTable';
 
 export default class Gradebook extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      adjustedGradePossible: '',
+      adjustedGradeValue: 0,
+      assignmentGradeMin: '0',
+      assignmentGradeMax: '100',
+      assignmentName: '',
+      courseGradeMin: '0',
+      courseGradeMax: '100',
       filterValue: '',
+      isMinCourseGradeFilterValid: true,
+      isMaxCourseGradeFilterValid: true,
       modalOpen: false,
-      modalModel: [{}],
-      updateVal: 0,
+      reasonForChange: '',
+      todaysDate: '',
       updateModuleId: null,
       updateUserId: null,
     };
+    this.myRef = React.createRef();
   }
 
   componentDidMount() {
     const urlQuery = queryString.parse(this.props.location.search);
-    this.props.getUserGrades(
-      this.props.match.params.courseId,
-      urlQuery.cohort,
-      urlQuery.track,
-    );
-    this.props.getTracks(this.props.match.params.courseId);
-    this.props.getCohorts(this.props.match.params.courseId);
-    this.props.getAssignmentTypes(this.props.match.params.courseId);
-  }
+    this.props.initializeFilters(urlQuery);
+    this.props.getRoles(this.props.courseId);
 
-  setNewModalState = (userEntry, subsection) => {
-    this.setState({
-      modalModel: [{
-        username: userEntry.username,
-        currentGrade: `${subsection.score_earned}/${subsection.score_possible}`,
-        adjustedGrade: (
-          <span>
-            <input
-              style={{ width: '25px' }}
-              type="text"
-              onChange={event => this.setState({ updateVal: event.target.value })}
-            /> / {subsection.score_possible}
-          </span>
-        ),
-        assignmentName: `${subsection.subsection_name}`,
-      }],
-      modalOpen: true,
-      updateModuleId: subsection.module_id,
-      updateUserId: userEntry.user_id,
+    const newStateFields = {};
+    ['assignmentGradeMin', 'assignmentGradeMax', 'courseGradeMin', 'courseGradeMax'].forEach((attr) => {
+      if (urlQuery[attr]) {
+        newStateFields[attr] = urlQuery[attr];
+      }
     });
+
+    this.setState(newStateFields);
   }
 
-  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.state.filterValue,
-      this.props.selectedCohort,
-      this.props.selectedTrack,
-    );
-
-    this.setState({
-      modalModel: [{}],
-      modalOpen: false,
-      updateModuleId: null,
-      updateUserId: null,
-    });
+  onChange(e) {
+    this.setState({ [e.target.name]: e.target.value });
   }
 
-  updateQueryParams = (queryKey, queryValue) => {
-    const parsed = queryString.parse(this.props.location.search);
-    parsed[queryKey] = queryValue;
-    return `?${queryString.stringify(parsed)}`;
+  getActiveTabs = () => {
+    if (this.props.showBulkManagement) {
+      return ['Grades', 'Bulk Management'];
+    }
+    return ['Grades'];
   };
 
-  mapAssignmentTypeEntries = (entries) => {
-    const mapped = entries.map(entry => ({
-      id: entry,
-      label: entry,
-    }));
-    mapped.unshift({ id: 0, label: 'All' });
-    return mapped;
+  getCourseGradeFilterAlertDialog = () => {
+    let dialog = '';
+
+    if (!this.state.isMinCourseGradeFilterValid) {
+      dialog += 'Minimum course grade value must be between 0 and 100. ';
+    }
+    if (!this.state.isMaxCourseGradeFilterValid) {
+      dialog += 'Maximum course grade value must be between 0 and 100. ';
+    }
+    return dialog;
+  };
+
+  updateQueryParams = (queryParams) => {
+    const parsed = queryString.parse(this.props.location.search);
+    Object.keys(queryParams).forEach((key) => {
+      if (queryParams[key]) {
+        parsed[key] = queryParams[key];
+      } else {
+        delete parsed[key];
+      }
+    });
+    this.props.history.push(`?${queryString.stringify(parsed)}`);
   };
 
   mapCohortsEntries = (entries) => {
@@ -117,10 +118,6 @@ export default class Gradebook extends React.Component {
     return mapped;
   };
 
-  updateAssignmentTypes = (event) => {
-    this.props.filterColumns(event, this.props.grades[0]);
-  }
-
   updateTracks = (event) => {
     const selectedTrackItem = this.props.tracks.find(x => x.name === event);
     let selectedTrackSlug = null;
@@ -128,12 +125,12 @@ export default class Gradebook extends React.Component {
       selectedTrackSlug = selectedTrackItem.slug;
     }
     this.props.getUserGrades(
-      this.props.match.params.courseId,
+      this.props.courseId,
       this.props.selectedCohort,
       selectedTrackSlug,
+      this.props.selectedAssignmentType,
     );
-    const updatedQueryStrings = this.updateQueryParams('track', selectedTrackSlug);
-    this.props.history.push(updatedQueryStrings);
+    this.updateQueryParams({ track: selectedTrackSlug });
   };
 
   updateCohorts = (event) => {
@@ -143,21 +140,12 @@ export default class Gradebook extends React.Component {
       selectedCohortId = selectedCohortItem.id;
     }
     this.props.getUserGrades(
-      this.props.match.params.courseId,
+      this.props.courseId,
       selectedCohortId,
       this.props.selectedTrack,
+      this.props.selectedAssignmentType,
     );
-    const updatedQueryStrings = 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';
+    this.updateQueryParams({ cohort: selectedCohortId });
   };
 
   mapSelectedCohortEntry = (entry) => {
@@ -176,202 +164,356 @@ export default class Gradebook extends React.Component {
     return 'Tracks';
   };
 
-  roundPercentageGrade = percent => parseFloat(percent.toFixed(DECIMAL_PRECISION));
+  lmsInstructorDashboardUrl = courseId => `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`;
 
-  formatter = {
-    percent: entries => 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)}
-            >
-              {this.roundPercentageGrade(subsection.percent * 100)}%
-            </button>);
-          return acc;
-        }, {});
-      const totals = { total: `${this.roundPercentageGrade(entry.percent * 100)}%` };
-      return Object.assign(results, assignments, totals);
-    }),
+  handleCourseGradeFilterChange = (type, value) => {
+    const filterValue = value;
 
-    absolute: entries => 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>);
-          return acc;
-        }, {});
+    if (type === 'min') {
+      this.setState({
+        courseGradeMin: filterValue,
+      });
+    } else {
+      this.setState({
+        courseGradeMax: filterValue,
+      });
+    }
+  }
 
-      const totals = { total: `${entry.percent * 100}/100` };
-      return Object.assign(results, assignments, totals);
-    }),
+  handleCourseGradeFilterApplyButtonClick = () => {
+    const { courseGradeMin, courseGradeMax } = this.state;
+    const isMinValid = this.isGradeFilterValueInRange(courseGradeMin);
+    const isMaxValid = this.isGradeFilterValueInRange(courseGradeMax);
+
+    this.setState({
+      isMinCourseGradeFilterValid: isMinValid,
+      isMaxCourseGradeFilterValid: isMaxValid,
+    });
+
+    if (isMinValid && isMaxValid) {
+      this.props.updateCourseGradeFilter(
+        courseGradeMin,
+        courseGradeMax,
+        this.props.courseId,
+      );
+      this.props.getUserGrades(
+        this.props.courseId,
+        this.props.selectedCohort,
+        this.props.selectedTrack,
+        this.props.selectedAssignmentType,
+        {
+          courseGradeMin,
+          courseGradeMax,
+        },
+      );
+      this.updateQueryParams({ courseGradeMin, courseGradeMax });
+    }
+  }
+
+  isGradeFilterValueInRange = (value) => {
+    const valueAsInt = parseInt(value, 10);
+    return valueAsInt >= 0 && valueAsInt <= 100;
   };
 
-  lmsInstructorDashboardUrl = courseId => `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`;
+  handleFilterBadgeClose = filterNames => () => {
+    this.props.resetFilters(filterNames);
+    const queryParams = {};
+    filterNames.forEach((filterName) => {
+      queryParams[filterName] = false;
+    });
+    this.updateQueryParams(queryParams);
+    const stateUpdate = {};
+    const rangeStateFilters = ['assignmentGradeMin', 'assignmentGradeMax', 'courseGradeMin', 'courseGradeMax'];
+    rangeStateFilters.forEach((filterName) => {
+      if (filterNames.includes(filterName)) {
+        stateUpdate[filterName] = initialFilters[filterName];
+      }
+    });
+    this.setState(stateUpdate);
+    this.props.getUserGrades(
+      this.props.courseId,
+      filterNames.includes('cohort') ? initialFilters.cohort : this.props.selectedCohort,
+      filterNames.includes('track') ? initialFilters.track : this.props.selectedTrack,
+      filterNames.includes('assignmentType') ? initialFilters.assignmentType : this.props.selectedAssignmentType,
+    );
+  }
+
+  createStateFieldSetter = (key) => (value) => this.setState({ [key]: value });
+
+  createStateFieldOnChange = (key) => ({ target }) => this.setState({ [key]: target.value });
+
+  createLimitedSetter = (...keys) => (values) => this.setState(
+    keys.reduce(
+      (obj, key) => (values[key] === undefined ? obj : { ...obj, [key]: values[key] }),
+      {},
+    ),
+  )
+
+  safeSetState = this.createLimitedSetter(
+    'adjustedGradePossible',
+    'adjustedGradeValue',
+    'assignmnentName',
+    'modalOpen',
+    'reasonForChange',
+    'todaysDate',
+    'updateModuleId',
+    'updateUserId',
+    'updateUserName',
+  );
 
   render() {
     return (
-      <div className="d-flex justify-content-center">
-        { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
-        <div className="gradebook-container">
-          <div>
+      <Drawer
+        mainContent={toggleFilterDrawer => (
+          <div className="px-3 gradebook-content">
             <a
-              href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
+              href={this.lmsInstructorDashboardUrl(this.props.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>
-            <hr />
-            <div className="d-flex justify-content-between" >
-              <div>
-                <div>
-                  Score View:
-                  <span>
-                    <input
-                      id="score-view-percent"
-                      className="ml-2 mr-1"
-                      type="radio"
-                      name="score-view"
-                      value="percent"
-                      onClick={() => this.props.toggleFormat('percent')}
-                    />
-                    <label className="mr-2" htmlFor="score-view-percent">Percent</label>
-                  </span>
-                  <span>
-                    <input
-                      id="score-view-absolute"
-                      type="radio"
-                      name="score-view"
-                      value="absolute"
-                      className="mr-1"
-                      onClick={() => this.props.toggleFormat('absolute')}
-                    />
-                    <label htmlFor="score-view-absolute">Absolute</label>
-                  </span>
-                </div>
-                { this.props.assignmnetTypes.length > 0 &&
-                  <div className="student-filters">
-                    <span className="label">
-                      Assignment Types:
-                    </span>
-                    <InputSelect
-                      name="assignment-types"
-                      value={this.mapSelectedTrackEntry(this.props.selectedAssignmentType)}
-                      options={this.mapAssignmentTypeEntries(this.props.assignmnetTypes)}
-                      onChange={this.updateAssignmentTypes}
-                    />
-                  </div>
-                }
-                {(this.props.tracks.length > 0 || this.props.cohorts.length > 0) &&
-                  <div className="student-filters">
-                    <span className="label">
-                      Student Groups:
-                    </span>
-                    {this.props.tracks.length > 0 &&
-                      <InputSelect
-                        name="Tracks"
-                        value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
-                        options={this.mapTracksEntries(this.props.tracks)}
-                        onChange={this.updateTracks}
-                      />
-                    }
-                    {this.props.cohorts.length > 0 &&
-                      <InputSelect
-                        name="Cohorts"
-                        value={this.mapSelectedCohortEntry(this.props.selectedCohort)}
-                        options={this.mapCohortsEntries(this.props.cohorts)}
-                        onChange={this.updateCohorts}
-                      />
-                    }
-                  </div>
-                }
+            <h3> {this.props.courseId}</h3>
+            {this.props.areGradesFrozen
+              && (
+              <div className="alert alert-warning" role="alert">
+                The grades for this course are now frozen. Editing of grades is no longer allowed.
               </div>
-              <div>
-                <div style={{ marginLeft: '10px', marginBottom: '10px' }}>
-                  <a href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Download Grade Report</a>
-                </div>
-                <SearchField
-                  onSubmit={value => this.props.searchForUser(this.props.match.params.courseId, value, this.props.selectedCohort, this.props.selectedTrack)}
-                  onChange={filterValue => this.setState({ filterValue })}
-                  onClear={() => this.props.getUserGrades(this.props.match.params.courseId, this.props.selectedCohort, this.props.selectedTrack)}
-                  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 />
-            <StatusAlert
-              alertType="success"
-              dialog="The grade has been successfully edited."
-              onClose={() => this.props.updateBanner(false)}
-              open={this.props.showSuccess}
-            />
-            <div className="gbook">
-              <Table
-                columns={this.props.headings}
-                data={this.formatter[this.props.format](this.props.grades)}
-                tableSortable
-                defaultSortDirection="asc"
-                defaultSortedColumn="username"
-              />
-            </div>
-            <Modal
-              open={this.state.modalOpen}
-              title="Edit Grades"
-              body={(
-                <div>
-                  <h3>{this.state.modalModel[0].assignmentName}</h3>
-                  <Table
-                    columns={[{ label: 'Username', key: 'username' }, { label: 'Current grade', key: 'currentGrade' }, { label: 'Adjusted grade', key: 'adjustedGrade' }]}
-                    data={this.state.modalModel}
-                  />
-                </div>
               )}
-              buttons={[
-                <Button
-                  label="Edit Grade"
-                  buttonType="primary"
-                  onClick={this.handleAdjustedGradeClick}
-                />,
-              ]}
-              onClose={() => this.setState({
-                modalOpen: false,
-                modalModel: [{}],
-                updateVal: 0,
-                updateModuleId: null,
-                updateUserId: null,
-              })}
-            />
+            {(this.props.canUserViewGradebook === false)
+              && (
+              <div className="alert alert-warning" role="alert">
+                You are not authorized to view the gradebook for this course.
+              </div>
+              )}
+            <Tabs defaultActiveKey="grades">
+              <Tab eventKey="grades" title="Grades">
+                <h4>Step 1: Filter the Grade Report</h4>
+                <div className="d-flex justify-content-between">
+                  {this.props.showSpinner && <div className="spinner-overlay"><Icon className="fa fa-spinner fa-spin fa-5x color-black" /></div>}
+                  <Button className="btn-primary align-self-start" onClick={toggleFilterDrawer}><FontAwesomeIcon icon={faFilter} /> Edit Filters</Button>
+                  <div>
+                    <SearchField
+                      onSubmit={value => this.props.searchForUser(
+                        this.props.courseId,
+                        value,
+                        this.props.selectedCohort,
+                        this.props.selectedTrack,
+                        this.props.selectedAssignmentType,
+                      )}
+                      inputLabel="Search for a learner"
+                      onChange={filterValue => this.setState({ filterValue })}
+                      onClear={() => this.props.getUserGrades(
+                        this.props.courseId,
+                        this.props.selectedCohort,
+                        this.props.selectedTrack,
+                        this.props.selectedAssignmentType,
+                      )}
+                      value={this.state.filterValue}
+                    />
+                    <small className="form-text text-muted search-help-text">Search by username, email, or student key</small>
+                  </div>
+                </div>
+                <ConnectedFilterBadges
+                  handleFilterBadgeClose={this.handleFilterBadgeClose}
+                />
+                <StatusAlert
+                  alertType="success"
+                  dialog="The grade has been successfully edited. You may see a slight delay before updates appear in the Gradebook."
+                  onClose={() => this.props.closeBanner()}
+                  open={this.props.showSuccess}
+                />
+                <StatusAlert
+                  alertType="danger"
+                  dialog={this.getCourseGradeFilterAlertDialog()}
+                  dismissible={false}
+                  open={
+                    !this.state.isMinCourseGradeFilterValid
+                    || !this.state.isMaxCourseGradeFilterValid
+                  }
+                />
+                <h4>Step 2: View or Modify Individual Grades</h4>
+                {this.props.totalUsersCount
+                  ? (
+                    <div>
+                      Showing
+                      <span className="font-weight-bold"> {this.props.filteredUsersCount} </span>
+                      of
+                      <span className="font-weight-bold"> {this.props.totalUsersCount} </span>
+                      total learners
+                    </div>
+                  )
+                  : null}
+                <div className="d-flex justify-content-between align-items-center mb-2">
+                  <InputSelect
+                    label="Score View:"
+                    name="ScoreView"
+                    value="percent"
+                    options={[{ label: 'Percent', value: 'percent' }, { label: 'Absolute', value: 'absolute' }]}
+                    onChange={this.props.toggleFormat}
+                  />
+                  {this.props.showBulkManagement && (
+                    <BulkManagementControls
+                      courseId={this.props.courseId}
+                      gradeExportUrl={this.props.gradeExportUrl}
+                      interventionExportUrl={this.props.interventionExportUrl}
+                      showSpinner={this.props.showSpinner}
+                    />
+                  )}
+                </div>
+                <GradebookTable setGradebookState={this.safeSetState} />
+                {PageButtons(this.props)}
+                <p>* available for learners in the Master&apos;s track only</p>
+                <EditModal
+                  assignmentName={this.state.assignmentName}
+                  adjustedGradeValue={this.state.adjustedGradeValue}
+                  adjustedGradePossible={this.state.adjustedGradePossible}
+                  courseId={this.props.courseId}
+                  filterValue={this.state.filterValue}
+                  onChange={this.onChange}
+                  open={this.state.modalOpen}
+                  reasonForChange={this.state.reasonForChange}
+                  setAdjustedGradeValue={this.createStateFieldOnChange('adjustedGradeValue')}
+                  setGradebookState={this.safeSetState}
+                  setReasonForChange={this.createStateFieldOnChange('reasonForChange')}
+                  todaysDate={this.state.todaysDate}
+                  updateModuleId={this.state.updateModuleId}
+                  updateUserId={this.state.updateUserId}
+                  updateUserName={this.state.updateUserName}
+                />
+
+              </Tab>
+              {this.props.showBulkManagement
+                && (
+                <BulkManagement
+                  courseId={this.props.courseId}
+                  gradeExportUrl={this.props.gradeExportUrl}
+                />
+                )}
+            </Tabs>
           </div>
-        </div>
-      </div>
+        )}
+        initiallyOpen={false}
+        title={(
+          <>
+            <FontAwesomeIcon icon={faFilter} /> Filter By...
+          </>
+        )}
+      >
+        <Assignments
+          assignmentGradeMin={this.state.assignmentGradeMin}
+          assignmentGradeMax={this.state.assignmentGradeMax}
+          courseId={this.props.courseId}
+          setAssignmentGradeMin={this.createStateFieldSetter('assignmentGradeMin')}
+          setAssignmentGradeMax={this.createStateFieldSetter('assignmentGradeMax')}
+          updateQueryParams={this.updateQueryParams}
+        />
+        <Collapsible title="Overall Grade" open className="filter-group mb-3">
+          <div className="d-flex justify-content-between align-items-center">
+            <InputText
+              value={this.state.courseGradeMin}
+              name="minimum-grade"
+              label="Min Grade"
+              onChange={value => this.handleCourseGradeFilterChange('min', value)}
+              type="number"
+              min={0}
+              max={100}
+            />
+            <span className="input-percent-label">%</span>
+            <InputText
+              value={this.state.courseGradeMax}
+              name="max-grade"
+              label="Max Grade"
+              onChange={value => this.handleCourseGradeFilterChange('max', value)}
+              type="number"
+              min={0}
+              max={100}
+            />
+            <span className="input-percent-label">%</span>
+            <Button
+              variant="outline-secondary"
+              onClick={this.handleCourseGradeFilterApplyButtonClick}
+            >
+              Apply
+            </Button>
+          </div>
+        </Collapsible>
+        <Collapsible title="Student Groups" open className="filter-group mb-3">
+          <InputSelect
+            label="Tracks"
+            name="Tracks"
+            aria-label="Tracks"
+            disabled={this.props.tracks.length === 0}
+            value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
+            options={this.mapTracksEntries(this.props.tracks)}
+            onChange={this.updateTracks}
+          />
+          <InputSelect
+            name="Cohorts"
+            aria-label="Cohorts"
+            label="Cohorts"
+            disabled={this.props.cohorts.length === 0}
+            value={this.mapSelectedCohortEntry(this.props.selectedCohort)}
+            options={this.mapCohortsEntries(this.props.cohorts)}
+            onChange={this.updateCohorts}
+          />
+        </Collapsible>
+      </Drawer>
     );
   }
 }
 
+Gradebook.defaultProps = {
+  areGradesFrozen: false,
+  canUserViewGradebook: false,
+  cohorts: [],
+  courseId: '',
+  filteredUsersCount: null,
+  location: {
+    search: '',
+  },
+  selectedAssignmentType: '',
+  selectedCohort: null,
+  selectedTrack: null,
+  showBulkManagement: false,
+  showSpinner: false,
+  totalUsersCount: null,
+  tracks: [],
+};
+
+Gradebook.propTypes = {
+  areGradesFrozen: PropTypes.bool,
+  canUserViewGradebook: PropTypes.bool,
+  closeBanner: PropTypes.func.isRequired,
+  cohorts: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  })),
+  courseId: PropTypes.string,
+  filteredUsersCount: PropTypes.number,
+  getRoles: PropTypes.func.isRequired,
+  getUserGrades: PropTypes.func.isRequired,
+  gradeExportUrl: PropTypes.string.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  initializeFilters: PropTypes.func.isRequired,
+  interventionExportUrl: PropTypes.string.isRequired,
+  location: PropTypes.shape({
+    search: PropTypes.string,
+  }),
+  resetFilters: PropTypes.func.isRequired,
+  searchForUser: PropTypes.func.isRequired,
+  selectedAssignmentType: PropTypes.string,
+  selectedCohort: PropTypes.string,
+  selectedTrack: PropTypes.string,
+  showBulkManagement: PropTypes.bool,
+  showSpinner: PropTypes.bool,
+  showSuccess: PropTypes.bool.isRequired,
+  toggleFormat: PropTypes.func.isRequired,
+  totalUsersCount: PropTypes.number,
+  tracks: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+  })),
+  updateCourseGradeFilter: PropTypes.func.isRequired,
+};

src/components/Header/index.jsx

@@ -4,13 +4,6 @@ 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" />
@@ -21,7 +14,9 @@ export default class Header extends React.Component {
     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" />
+          <Hyperlink destination="https://www.edx.org">
+            {this.renderLogo()}
+          </Hyperlink>
           <div />
         </header>
       </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,153 @@
+// 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}
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onClick={[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}
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onClick={[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}
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={false}
+    onClick={[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}
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-outline-primary"
+    disabled={true}
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;

src/components/PageButtons/index.jsx

@@ -0,0 +1,75 @@
+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
+        style={{ margin: '20px' }}
+        variant="outline-primary"
+        disabled={!prevPage}
+        onClick={() => getPrevNextGrades(
+          prevPage,
+          match.params.courseId,
+          selectedCohort,
+          selectedTrack,
+          selectedAssignmentType,
+        )}
+      >
+        Previous Page
+      </Button>
+      <Button
+        style={{ margin: '20px' }}
+        variant="outline-primary"
+        disabled={!nextPage}
+        onClick={() => getPrevNextGrades(
+          nextPage,
+          match.params.courseId,
+          selectedCohort,
+          selectedTrack,
+          selectedAssignmentType,
+        )}
+      >
+        Next Page
+      </Button>
+    </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

@@ -2,69 +2,132 @@ import { connect } from 'react-redux';
 
 import Gradebook from '../../components/Gradebook';
 import {
+  closeBanner,
+  fetchGradeOverrideHistory,
   fetchGrades,
   fetchMatchingUserGrades,
   fetchPrevNextGrades,
-  updateGrades,
+  filterAssignmentType,
+  submitFileUploadFormData,
   toggleGradeFormat,
-  filterColumns,
-  updateBanner,
+  downloadBulkGradesReport,
+  downloadInterventionReport,
 } from '../../data/actions/grades';
 import { fetchCohorts } from '../../data/actions/cohorts';
 import { fetchTracks } from '../../data/actions/tracks';
+import {
+  initializeFilters, resetFilters, updateAssignmentFilter, updateAssignmentLimits, updateCourseGradeFilter,
+} from '../../data/actions/filters';
+import stateHasMastersTrack from '../../data/selectors/tracks';
+import {
+  getBulkManagementHistory,
+  getHeadings,
+  formatMinAssignmentGrade,
+  formatMaxAssignmentGrade,
+  formatMinCourseGrade,
+  formatMaxCourseGrade,
+} from '../../data/selectors/grades';
+import { selectableAssignmentLabels } from '../../data/selectors/filters';
+import { getCohortNameById } from '../../data/selectors/cohorts';
 import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
+import { getRoles } from '../../data/actions/roles';
+import LmsApiService from '../../data/services/LmsApiService';
 
-const mapStateToProps = state => (
+function shouldShowSpinner(state) {
+  if (state.roles.canUserViewGradebook === true) {
+    return state.grades.showSpinner;
+  } if (state.roles.canUserViewGradebook === false) {
+    return false;
+  } // canUserViewGradebook === null
+  return true;
+}
+
+const mapStateToProps = (state, ownProps) => (
   {
-    grades: state.grades.results,
-    headings: state.grades.headings,
-    tracks: state.tracks.results,
+    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
+    assignmentTypes: state.assignmentTypes.results,
+    assignmentFilterOptions: selectableAssignmentLabels(state),
+    bulkImportError: state.grades.bulkManagement
+      && state.grades.bulkManagement.errorMessages
+      ? `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}`
+      : '',
+    bulkManagementHistory: getBulkManagementHistory(state),
     cohorts: state.cohorts.results,
-    selectedTrack: state.grades.selectedTrack,
-    selectedCohort: state.grades.selectedCohort,
+    courseId: ownProps.match.params.courseId,
+    canUserViewGradebook: state.roles.canUserViewGradebook,
+    filteredUsersCount: state.grades.filteredUsersCount,
     format: state.grades.gradeFormat,
-    showSuccess: state.grades.showSuccess,
-    prevPage: state.grades.prevPage,
+    gradeExportUrl: LmsApiService.getGradeExportCsvUrl(ownProps.match.params.courseId, {
+      cohort: getCohortNameById(state, state.filters.cohort),
+      track: state.filters.track,
+      assignment: (state.filters.assignment || {}).id,
+      assignmentType: state.filters.assignmentType,
+      assignmentGradeMin: formatMinAssignmentGrade(
+        state.filters.assignmentGradeMin,
+        { assignmentId: (state.filters.assignment || {}).id },
+      ),
+      assignmentGradeMax: formatMaxAssignmentGrade(
+        state.filters.assignmentGradeMax,
+        { assignmentId: (state.filters.assignment || {}).id },
+      ),
+      courseGradeMin: formatMinCourseGrade(state.filters.courseGradeMin),
+      courseGradeMax: formatMaxCourseGrade(state.filters.courseGradeMax),
+    }),
+    grades: state.grades.results,
+    headings: getHeadings(state),
+    interventionExportUrl:
+      LmsApiService.getInterventionExportCsvUrl(ownProps.match.params.courseId, {
+        cohort: getCohortNameById(state, state.filters.cohort),
+        assignment: (state.filters.assignment || {}).id,
+        assignmentType: state.filters.assignmentType,
+        assignmentGradeMin: formatMinAssignmentGrade(
+          state.filters.assignmentGradeMin,
+          { assignmentId: (state.filters.assignment || {}).id },
+        ),
+        assignmentGradeMax: formatMaxAssignmentGrade(
+          state.filters.assignmentGradeMax,
+          { assignmentId: (state.filters.assignment || {}).id },
+        ),
+        courseGradeMin: formatMinCourseGrade(state.filters.courseGradeMin),
+        courseGradeMax: formatMaxCourseGrade(state.filters.courseGradeMax),
+      }),
     nextPage: state.grades.nextPage,
-    assignmnetTypes: state.assignmentTypes.results,
-    showSpinner: state.grades.showSpinner,
+    prevPage: state.grades.prevPage,
+    selectedTrack: state.filters.track,
+    selectedCohort: state.filters.cohort,
+    selectedAssignmentType: state.filters.assignmentType,
+    selectedAssignment: (state.filters.assignment || {}).label,
+    showBulkManagement: stateHasMastersTrack(state) && state.config.bulkManagementAvailable,
+    showSpinner: shouldShowSpinner(state),
+    showSuccess: state.grades.showSuccess,
+    totalUsersCount: state.grades.totalUsersCount,
+    tracks: state.tracks.results,
+    uploadSuccess: !!(state.grades.bulkManagement
+                      && state.grades.bulkManagement.uploadSuccess),
   }
 );
 
-const mapDispatchToProps = dispatch => (
-  {
-    getUserGrades: (courseId, cohort, track) => {
-      dispatch(fetchGrades(courseId, cohort, track));
-    },
-    searchForUser: (courseId, searchText, cohort, track) => {
-      dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track, false));
-    },
-    getPrevNextGrades: (endpoint, cohort, track) => {
-      dispatch(fetchPrevNextGrades(endpoint, cohort, track));
-    },
-    getCohorts: (courseId) => {
-      dispatch(fetchCohorts(courseId));
-    },
-    getTracks: (courseId) => {
-      dispatch(fetchTracks(courseId));
-    },
-    getAssignmentTypes: (courseId) => {
-      dispatch(fetchAssignmentTypes(courseId));
-    },
-    updateGrades: (courseId, updateData, searchText, cohort, track) => {
-      dispatch(updateGrades(courseId, updateData, searchText, cohort, track));
-    },
-    toggleFormat: (formatType) => {
-      dispatch(toggleGradeFormat(formatType));
-    },
-    filterColumns: (filterType, exampleUser) => {
-      dispatch(filterColumns(filterType, exampleUser));
-    },
-    updateBanner: (showSuccess) => {
-      dispatch(updateBanner(showSuccess));
-    },
-  }
-);
+const mapDispatchToProps = {
+  closeBanner,
+  downloadBulkGradesReport,
+  downloadInterventionReport,
+  fetchGradeOverrideHistory,
+  filterAssignmentType,
+  getAssignmentTypes: fetchAssignmentTypes,
+  getCohorts: fetchCohorts,
+  getPrevNextGrades: fetchPrevNextGrades,
+  getRoles,
+  getTracks: fetchTracks,
+  getUserGrades: fetchGrades,
+  initializeFilters,
+  resetFilters,
+  searchForUser: fetchMatchingUserGrades,
+  submitFileUploadFormData,
+  toggleFormat: toggleGradeFormat,
+  updateAssignmentFilter,
+  updateAssignmentLimits,
+  updateCourseGradeFilter,
+};
 
 const GradebookPage = connect(
   mapStateToProps,

src/data/actions/assignmentTypes.js

@@ -2,12 +2,19 @@ import {
   STARTED_FETCHING_ASSIGNMENT_TYPES,
   GOT_ASSIGNMENT_TYPES,
   ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';
+import GOT_BULK_MANAGEMENT_CONFIG from '../constants/actionTypes/config';
 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 gotBulkManagementConfig = bulkManagementEnabled => ({
+  type: GOT_BULK_MANAGEMENT_CONFIG,
+  data: bulkManagementEnabled,
+});
 
 const fetchAssignmentTypes = courseId => (
   (dispatch) => {
@@ -16,6 +23,8 @@ const fetchAssignmentTypes = courseId => (
       .then(response => response.data)
       .then((data) => {
         dispatch(gotAssignmentTypes(Object.keys(data.assignment_types)));
+        dispatch(gotGradesFrozen(data.grades_frozen));
+        dispatch(gotBulkManagementConfig(data.can_see_bulk_management));
       })
       .catch(() => {
         dispatch(errorFetchingAssignmentTypes());
@@ -29,4 +38,3 @@ export {
   gotAssignmentTypes,
   errorFetchingAssignmentTypes,
 };
-

src/data/actions/assignmentTypes.test.js

@@ -1,18 +1,26 @@
+import axios from 'axios';
 import configureMockStore from 'redux-mock-store';
 import MockAdapter from 'axios-mock-adapter';
 import thunk from 'redux-thunk';
 
-import apiClient from '../apiClient';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 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';
+import GOT_BULK_MANAGEMENT_CONFIG from '../constants/actionTypes/config';
 
 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
+
+jest.mock('@edx/frontend-platform/auth');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axios.isAccessTokenExpired = jest.fn();
+axios.isAccessTokenExpired.mockReturnValue(false);
 
 describe('actions', () => {
   afterEach(() => {
@@ -21,29 +29,32 @@ describe('actions', () => {
 
   describe('fetchAssignmentTypes', () => {
     const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-    it('dispatches success action after fetching fetchAssignmentTypes', () => {
-      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,
-          },
+    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,
+      can_see_bulk_management: true,
+    };
+    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 },
+        { type: GOT_BULK_MANAGEMENT_CONFIG, data: true },
       ];
       const store = mockStore();
 
@@ -69,5 +80,22 @@ describe('actions', () => {
         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 },
+        { type: GOT_BULK_MANAGEMENT_CONFIG, data: 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.test.js

@@ -1,8 +1,9 @@
+import axios from 'axios';
 import configureMockStore from 'redux-mock-store';
 import MockAdapter from 'axios-mock-adapter';
 import thunk from 'redux-thunk';
 
-import apiClient from '../apiClient';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { configuration } from '../../config';
 import { fetchCohorts } from './cohorts';
 import {
@@ -12,7 +13,12 @@ import {
 } from '../constants/actionTypes/cohorts';
 
 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
+
+jest.mock('@edx/frontend-platform/auth');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axios.isAccessTokenExpired = jest.fn();
+axios.isAccessTokenExpired.mockReturnValue(false);
 
 describe('actions', () => {
   afterEach(() => {

src/data/actions/filters.js

@@ -0,0 +1,56 @@
+import initialFilters from '../constants/filters';
+import {
+  INITIALIZE_FILTERS, RESET_FILTERS, UPDATE_ASSIGNMENT_FILTER, UPDATE_ASSIGNMENT_LIMITS, UPDATE_COURSE_GRADE_LIMITS,
+} from '../constants/actionTypes/filters';
+
+const initializeFilters = ({
+  assignment = initialFilters.assignment,
+  assignmentType = initialFilters.assignmentType,
+  track = initialFilters.track,
+  cohort = initialFilters.cohort,
+  assignmentGradeMin = initialFilters.assignmentGradeMin,
+  assignmentGradeMax = initialFilters.assignmentGradeMax,
+  courseGradeMin = initialFilters.courseGradeMin,
+  courseGradeMax = initialFilters.assignmentGradeMax,
+}) => ({
+  type: INITIALIZE_FILTERS,
+  data: {
+    assignment: { id: assignment },
+    assignmentType,
+    track,
+    cohort,
+    assignmentGradeMin,
+    assignmentGradeMax,
+    courseGradeMin,
+    courseGradeMax,
+  },
+});
+
+const resetFilters = filterNames => ({
+  type: RESET_FILTERS,
+  filterNames,
+});
+
+const updateAssignmentFilter = assignment => ({
+  type: UPDATE_ASSIGNMENT_FILTER,
+  data: assignment,
+});
+
+const updateAssignmentLimits = (minGrade, maxGrade) => ({
+  type: UPDATE_ASSIGNMENT_LIMITS,
+  data: { minGrade, maxGrade },
+});
+
+const updateCourseGradeFilter = (courseGradeMin, courseGradeMax, courseId) => ({
+  type: UPDATE_COURSE_GRADE_LIMITS,
+  data: {
+    courseGradeMin,
+    courseGradeMax,
+    courseId,
+  },
+});
+
+export {
+  initializeFilters, resetFilters, updateAssignmentFilter,
+  updateAssignmentLimits, updateCourseGradeFilter,
+};

src/data/actions/grades.js

@@ -1,3 +1,4 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   STARTED_FETCHING_GRADES,
   FINISHED_FETCHING_GRADES,
@@ -7,79 +8,176 @@ import {
   GRADE_UPDATE_SUCCESS,
   GRADE_UPDATE_FAILURE,
   TOGGLE_GRADE_FORMAT,
-  SORT_GRADES,
-  FILTER_COLUMNS,
-  UPDATE_BANNER,
+  FILTER_BY_ASSIGNMENT_TYPE,
+  OPEN_BANNER,
+  CLOSE_BANNER,
+  START_UPLOAD,
+  UPLOAD_COMPLETE,
+  UPLOAD_ERR,
+  GOT_BULK_HISTORY,
+  BULK_HISTORY_ERR,
+  GOT_GRADE_OVERRIDE_HISTORY,
+  DONE_VIEWING_ASSIGNMENT,
+  ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+  UPLOAD_OVERRIDE,
+  UPLOAD_OVERRIDE_ERROR,
+  BULK_GRADE_REPORT_DOWNLOADED,
+  INTERVENTION_REPORT_DOWNLOADED,
 } from '../constants/actionTypes/grades';
+import GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG from '../constants/errors';
 import LmsApiService from '../services/LmsApiService';
-import store from '../store';
-import { headingMapper, gradeSortMap, sortAlphaAsc } from './utils';
-import apiClient from '../apiClient';
+import { sortAlphaAsc, formatDateForDisplay } from './utils';
+import {
+  formatMaxAssignmentGrade, formatMinAssignmentGrade, formatMaxCourseGrade, formatMinCourseGrade,
+} from '../selectors/grades';
+import { getFilters } from '../selectors/filters';
 
 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 startedCsvUpload = () => ({ type: START_UPLOAD });
+const finishedCsvUpload = () => ({ type: UPLOAD_COMPLETE });
+const csvUploadError = data => ({ type: UPLOAD_ERR, data });
+const gotBulkHistory = data => ({ type: GOT_BULK_HISTORY, data });
+const bulkHistoryError = () => ({ type: BULK_HISTORY_ERR });
 
 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 errorFetchingGradeOverrideHistory = errorMessage => ({
+  type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+  errorMessage,
+});
+
+const gotGrades = ({
+  grades, cohort, track, assignmentType, headings, prev,
+  next, courseId, totalUsersCount, filteredUsersCount,
+}) => ({
   type: GOT_GRADES,
   grades,
   cohort,
   track,
+  assignmentType,
   headings,
   prev,
   next,
+  courseId,
+  totalUsersCount,
+  filteredUsersCount,
+});
+
+const gotGradeOverrideHistory = ({
+  overrideHistory, currentEarnedAllOverride, currentPossibleAllOverride,
+  currentEarnedGradedOverride, currentPossibleGradedOverride,
+  originalGradeEarnedAll, originalGradePossibleAll, originalGradeEarnedGraded,
+  originalGradePossibleGraded,
+}) => ({
+  type: GOT_GRADE_OVERRIDE_HISTORY,
+  overrideHistory,
+  currentEarnedAllOverride,
+  currentPossibleAllOverride,
+  currentEarnedGradedOverride,
+  currentPossibleGradedOverride,
+  originalGradeEarnedAll,
+  originalGradePossibleAll,
+  originalGradeEarnedGraded,
+  originalGradePossibleGraded,
 });
 
 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 },
+});
+const uploadOverrideSuccess = courseId => ({
+  type: UPLOAD_OVERRIDE,
+  courseId,
+});
+// This action for google analytics only. Doesn't change redux state.
+const downloadBulkGradesReport = courseId => ({
+  type: BULK_GRADE_REPORT_DOWNLOADED,
+  courseId,
+});
+// This action for google analytics only. Doesn't change redux state.
+const downloadInterventionReport = courseId => ({
+  type: INTERVENTION_REPORT_DOWNLOADED,
+  courseId,
+});
+const uploadOverrideFailure = (courseId, error) => ({
+  type: UPLOAD_OVERRIDE_ERROR,
+  courseId,
   payload: { error },
 });
 
-
 const toggleGradeFormat = formatType => ({ type: TOGGLE_GRADE_FORMAT, formatType });
 
-const filterColumns = (filterType, exampleUser) => (
+const filterAssignmentType = filterType => (
   dispatch => dispatch({
-    type: FILTER_COLUMNS,
-    headings: headingMapper(filterType)(dispatch, exampleUser),
+    type: FILTER_BY_ASSIGNMENT_TYPE,
+    filterType,
   })
 );
 
-const updateBanner = showSuccess => ({ type: UPDATE_BANNER, showSuccess });
+const openBanner = () => ({ type: OPEN_BANNER });
+const closeBanner = () => ({ type: CLOSE_BANNER });
 
-const fetchGrades = (courseId, cohort, track, showSuccess) => (
-  (dispatch) => {
+const fetchGrades = (
+  courseId,
+  cohort,
+  track,
+  assignmentType,
+  options = {},
+) => (
+  (dispatch, getState) => {
     dispatch(startedFetchingGrades());
-    return LmsApiService.fetchGradebookData(courseId, null, cohort, track)
+    const {
+      assignment,
+      assignmentGradeMax: assignmentMax,
+      assignmentGradeMin: assignmentMin,
+      courseGradeMin,
+      courseGradeMax,
+    } = getFilters(getState());
+    const { id: assignmentId } = assignment || {};
+    const assignmentGradeMax = formatMaxAssignmentGrade(assignmentMax, { assignmentId });
+    const assignmentGradeMin = formatMinAssignmentGrade(assignmentMin, { assignmentId });
+    const courseGradeMinFormatted = formatMinCourseGrade(courseGradeMin);
+    const courseGradeMaxFormatted = formatMaxCourseGrade(courseGradeMax);
+    return LmsApiService.fetchGradebookData(
+      courseId,
+      options.searchText || null,
+      cohort,
+      track,
+      {
+        assignment: assignmentId,
+        assignmentGradeMax,
+        assignmentGradeMin,
+        courseGradeMin: courseGradeMinFormatted,
+        courseGradeMax: courseGradeMaxFormatted,
+      },
+
+    )
       .then(response => response.data)
       .then((data) => {
-        dispatch(gotGrades(
-          data.results.sort(sortAlphaAsc),
+        dispatch(gotGrades({
+          grades: data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
-          data.previous,
-          data.next,
-        ));
+          assignmentType,
+          prev: data.previous,
+          next: data.next,
+          courseId,
+          totalUsersCount: data.total_users_count,
+          filteredUsersCount: data.filtered_users_count,
+        }));
         dispatch(finishedFetchingGrades());
-        dispatch(updateBanner(!!showSuccess));
+        if (options.showSuccess) {
+          dispatch(openBanner());
+        }
       })
       .catch(() => {
         dispatch(errorFetchingGrades());
@@ -87,43 +185,74 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
   }
 );
 
-const fetchMatchingUserGrades = (courseId, searchText, cohort, track, showSuccess) => (
-  (dispatch) => {
-    dispatch(startedFetchingGrades());
-    return LmsApiService.fetchGradebookData(courseId, searchText, cohort, track)
-      .then(response => response.data)
-      .then((data) => {
-        dispatch(gotGrades(
-          data.results.sort(sortAlphaAsc),
-          cohort,
-          track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
-          data.previous,
-          data.next,
-        ));
-        dispatch(finishedFetchingGrades());
-        dispatch(updateBanner(showSuccess));
-      })
-      .catch(() => {
-        dispatch(errorFetchingGrades());
-      });
-  }
+const formatGradeOverrideForDisplay = historyArray => historyArray.map(item => ({
+  date: formatDateForDisplay(new Date(item.history_date)),
+  grader: item.history_user,
+  reason: item.override_reason,
+  adjustedGrade: item.earned_graded_override,
+}));
+
+const doneViewingAssignment = () => dispatch => dispatch({
+  type: DONE_VIEWING_ASSIGNMENT,
+});
+const fetchGradeOverrideHistory = (subsectionId, userId) => (
+  dispatch => LmsApiService.fetchGradeOverrideHistory(subsectionId, userId)
+    .then(response => response.data)
+    .then((data) => {
+      if (data.success) {
+        dispatch(gotGradeOverrideHistory({
+          overrideHistory: formatGradeOverrideForDisplay(data.history),
+          currentEarnedAllOverride: data.override ? data.override.earned_all_override : null,
+          currentPossibleAllOverride: data.override ? data.override.possible_all_override : null,
+          currentEarnedGradedOverride: data.override ? data.override.earned_graded_override : null,
+          currentPossibleGradedOverride: data.override
+            ? data.override.possible_graded_override : null,
+          originalGradeEarnedAll: data.original_grade ? data.original_grade.earned_all : null,
+          originalGradePossibleAll: data.original_grade ? data.original_grade.possible_all : null,
+          originalGradeEarnedGraded: data.original_grade
+            ? data.original_grade.earned_graded : null,
+          originalGradePossibleGraded: data.original_grade
+            ? data.original_grade.possible_graded : null,
+        }));
+      } else {
+        dispatch(errorFetchingGradeOverrideHistory(data.error_message));
+      }
+    })
+    .catch(() => {
+      dispatch(errorFetchingGradeOverrideHistory(GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG));
+    })
 );
 
-const fetchPrevNextGrades = (endpoint, cohort, track) => (
+const fetchMatchingUserGrades = (
+  courseId,
+  searchText,
+  cohort,
+  track,
+  assignmentType,
+  showSuccess,
+  options = {},
+) => {
+  const newOptions = { ...options, searchText, showSuccess };
+  return fetchGrades(courseId, cohort, track, assignmentType, newOptions);
+};
+
+const fetchPrevNextGrades = (endpoint, courseId, cohort, track, assignmentType) => (
   (dispatch) => {
     dispatch(startedFetchingGrades());
-    return apiClient.get(endpoint)
+    return getAuthenticatedHttpClient().get(endpoint)
       .then(response => response.data)
       .then((data) => {
-        dispatch(gotGrades(
-          data.results.sort(sortAlphaAsc),
+        dispatch(gotGrades({
+          grades: data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
-          data.previous,
-          data.next,
-        ));
+          assignmentType,
+          prev: data.previous,
+          next: data.next,
+          courseId,
+          totalUsersCount: data.total_users_count,
+          filteredUsersCount: data.filtered_users_count,
+        }));
         dispatch(finishedFetchingGrades());
       })
       .catch(() => {
@@ -132,22 +261,71 @@ 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(fetchMatchingUserGrades(courseId, searchText, cohort, track, true));
+        dispatch(gradeUpdateSuccess(courseId, data));
+        dispatch(fetchMatchingUserGrades(
+          courseId,
+          searchText,
+          cohort,
+          track,
+          defaultAssignmentFilter,
+          true,
+          { searchText },
+        ));
       })
       .catch((error) => {
-        dispatch(gradeUpdateFailure(error));
+        dispatch(gradeUpdateFailure(courseId, error));
       });
   }
 );
 
+const submitFileUploadFormData = (courseId, formData) => (
+  (dispatch) => {
+    dispatch(startedCsvUpload());
+    return LmsApiService.uploadGradeCsv(courseId, formData).then(() => {
+      dispatch(finishedCsvUpload());
+      dispatch(uploadOverrideSuccess(courseId));
+    }).catch((err) => {
+      dispatch(uploadOverrideFailure(courseId, err));
+      if (err.status === 200 && err.data.error_messages.length) {
+        const { error_messages: errorMessages, saved, total } = err.data;
+        return dispatch(csvUploadError({ errorMessages, saved, total }));
+      }
+      return dispatch(csvUploadError({ errorMessages: ['Unknown error.'] }));
+    });
+  }
+);
+
+const fetchBulkUpgradeHistory = courseId => (
+  // todo add loading effect
+  dispatch => LmsApiService.fetchGradeBulkOperationHistory(courseId).then(
+    (response) => { dispatch(gotBulkHistory(response)); },
+  ).catch(() => dispatch(bulkHistoryError()))
+);
+
+const updateGradesIfAssignmentGradeFiltersSet = (
+  courseId,
+  cohort,
+  track,
+  assignmentType,
+) => (dispatch, getState) => {
+  const { filters } = getState();
+  const hasAssignmentGradeFiltersSet = filters.assignmentGradeMax || filters.assignmentGradeMin;
+  if (hasAssignmentGradeFiltersSet) {
+    dispatch(fetchGrades(
+      courseId,
+      cohort,
+      track,
+      assignmentType,
+    ));
+  }
+};
+
 export {
   startedFetchingGrades,
   finishedFetchingGrades,
@@ -161,7 +339,13 @@ export {
   gradeUpdateFailure,
   updateGrades,
   toggleGradeFormat,
-  sortGrades,
-  filterColumns,
-  updateBanner,
+  filterAssignmentType,
+  closeBanner,
+  submitFileUploadFormData,
+  fetchBulkUpgradeHistory,
+  doneViewingAssignment,
+  fetchGradeOverrideHistory,
+  updateGradesIfAssignmentGradeFiltersSet,
+  downloadBulkGradesReport,
+  downloadInterventionReport,
 };

src/data/actions/grades.test.js

@@ -1,22 +1,30 @@
+import axios from 'axios';
 import configureMockStore from 'redux-mock-store';
 import MockAdapter from 'axios-mock-adapter';
 import thunk from 'redux-thunk';
 
-import apiClient from '../apiClient';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { configuration } from '../../config';
-import { fetchGrades } from './grades';
+import { fetchGrades, fetchGradeOverrideHistory } from './grades';
 import {
   STARTED_FETCHING_GRADES,
   FINISHED_FETCHING_GRADES,
   ERROR_FETCHING_GRADES,
   GOT_GRADES,
-  UPDATE_BANNER,
+  GOT_GRADE_OVERRIDE_HISTORY,
+  ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
 } from '../constants/actionTypes/grades';
+import GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG from '../constants/errors';
 import { sortAlphaAsc } from './utils';
-
+import LmsApiService from '../services/LmsApiService';
 
 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
+
+jest.mock('@edx/frontend-platform/auth');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axios.isAccessTokenExpired = jest.fn();
+axios.isAccessTokenExpired.mockReturnValue(false);
 
 describe('actions', () => {
   afterEach(() => {
@@ -27,7 +35,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,32 +103,25 @@ describe('actions', () => {
           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(),
-            },
-          ],
+          assignmentType: expectedAssignmentType,
           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(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,9 +136,139 @@ 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,
+          prev: responseData.previous,
+          next: responseData.next,
+          courseId,
+        },
+        { type: FINISHED_FETCHING_GRADES },
+      ];
+      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);
       });
     });
   });
+
+  describe('fetchGradeOverridHistory', () => {
+    const subsectionId = 'subsectionId-11111';
+    const userId = 'user-id-11111';
+
+    const fetchOverridesURL = `${LmsApiService.baseUrl}/api/grades/v1/subsection/${subsectionId}/?user_id=${userId}&history_record_limit=5`;
+
+    const originalGrade = {
+      earned_all: 1.0,
+      possible_all: 12.0,
+      earned_graded: 3.0,
+      possible_graded: 8.0,
+    };
+
+    const override = {
+      earned_all_override: 13.0,
+      possible_all_override: 13.0,
+      earned_graded_override: 10.0,
+      possible_graded_override: 10.0,
+    };
+
+    it('dispatches success action after successfully getting override info', () => {
+      const responseData = {
+        success: true,
+        original_grade: originalGrade,
+        history: [],
+        override,
+      };
+
+      axiosMock.onGet(fetchOverridesURL)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      const expectedActions = [
+        {
+          type: GOT_GRADE_OVERRIDE_HISTORY,
+          overrideHistory: [],
+          currentEarnedAllOverride: override.earned_all_override,
+          currentPossibleAllOverride: override.possible_all_override,
+          currentEarnedGradedOverride: override.earned_graded_override,
+          currentPossibleGradedOverride: override.possible_graded_override,
+          originalGradeEarnedAll: originalGrade.earned_all,
+          originalGradePossibleAll: originalGrade.possible_all,
+          originalGradeEarnedGraded: originalGrade.earned_graded,
+          originalGradePossibleGraded: originalGrade.possible_graded,
+        },
+      ];
+      const store = mockStore();
+
+      return store.dispatch(fetchGradeOverrideHistory(subsectionId, userId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    describe('dispatches failure action with expected message', () => {
+      test('on failure response', () => {
+        const responseData = {
+          success: false,
+          error_message: 'There was an error!!!!!!!!!',
+        };
+
+        axiosMock.onGet(fetchOverridesURL).replyOnce(200, JSON.stringify(responseData));
+
+        const expectedActions = [{
+          type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+          errorMessage: responseData.error_message,
+        }];
+        const store = mockStore();
+
+        return store.dispatch(fetchGradeOverrideHistory(subsectionId, userId)).then(() => {
+          expect(store.getActions()).toEqual(expectedActions);
+        });
+      });
+
+      test('on 500 error', () => {
+        axiosMock.onGet(fetchOverridesURL).replyOnce(500);
+
+        const expectedActions = [{
+          type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+          errorMessage: GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG,
+        }];
+        const store = mockStore();
+
+        return store.dispatch(fetchGradeOverrideHistory(subsectionId, userId)).then(() => {
+          expect(store.getActions()).toEqual(expectedActions);
+        });
+      });
+    });
+  });
 });

src/data/actions/roles.js

@@ -0,0 +1,44 @@
+import {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+} from '../constants/actionTypes/roles';
+import { fetchGrades } from './grades';
+import { fetchTracks } from './tracks';
+import { fetchCohorts } from './cohorts';
+import { fetchAssignmentTypes } from './assignmentTypes';
+import { getFilters } from '../selectors/filters';
+import LmsApiService from '../services/LmsApiService';
+
+const allowedRoles = ['staff', 'instructor', 'support'];
+
+const gotRoles = (canUserViewGradebook, courseId) => ({
+  type: GOT_ROLES,
+  canUserViewGradebook,
+  courseId,
+});
+const errorFetchingRoles = () => ({ type: ERROR_FETCHING_ROLES });
+
+const getRoles = courseId => (
+  (dispatch, getState) => LmsApiService.fetchUserRoles(courseId)
+    .then(response => response.data)
+    .then((response) => {
+      const canUserViewGradebook = response.is_staff
+                                  || (response.roles.some(role => (role.course_id === courseId)
+                                      && allowedRoles.includes(role.role)));
+      dispatch(gotRoles(canUserViewGradebook, courseId));
+      const { cohort, track, assignmentType } = getFilters(getState());
+      if (canUserViewGradebook) {
+        dispatch(fetchGrades(courseId, cohort, track, assignmentType));
+        dispatch(fetchTracks(courseId));
+        dispatch(fetchCohorts(courseId));
+        dispatch(fetchAssignmentTypes(courseId));
+      }
+    })
+    .catch(() => {
+      dispatch(errorFetchingRoles());
+    }));
+
+export {
+  getRoles,
+  errorFetchingRoles,
+};

src/data/actions/roles.test.js

@@ -0,0 +1,166 @@
+import axios from 'axios';
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { configuration } from '../../config';
+import { getRoles } from './roles';
+import {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+} from '../constants/actionTypes/roles';
+import { STARTED_FETCHING_GRADES } from '../constants/actionTypes/grades';
+import { STARTED_FETCHING_TRACKS } from '../constants/actionTypes/tracks';
+import { STARTED_FETCHING_COHORTS } from '../constants/actionTypes/cohorts';
+import { STARTED_FETCHING_ASSIGNMENT_TYPES } from '../constants/actionTypes/assignmentTypes';
+
+const mockStore = configureMockStore([thunk]);
+
+jest.mock('@edx/frontend-platform/auth');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axios.isAccessTokenExpired = jest.fn();
+axios.isAccessTokenExpired.mockReturnValue(false);
+
+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) {
+  return {
+    roles,
+    is_staff: isGlobalStaff,
+  };
+}
+function makeRoleObj(courseId, role) {
+  return {
+    course_id: courseId,
+    role,
+  };
+}
+
+const course1StaffRole = makeRoleObj(course1Id, 'staff');
+const course1DummyRole = makeRoleObj(course1Id, 'dummy');
+const course2StaffRole = makeRoleObj(course2Id, 'staff');
+const course2DummyRole = makeRoleObj(course2Id, 'dummy');
+const urlParams = { cohort: null, track: null };
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('getRoles', () => {
+    it('dispatches got_roles action and subsequent actions after fetching role that allows gradebook', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+      axiosMock.onGet(rolesUrl)
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1StaffRole, course2DummyRole], false)),
+        );
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and other actions after fetching irrelevent roles but user is global staff', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1DummyRole, course2DummyRole], true)),
+        );
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and no other actions after fetching role that disallows gradebook', () => {
+      const expectedActions = [
+        {
+          type: GOT_ROLES, canUserViewGradebook: false, courseId: course1Id,
+        },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([course1DummyRole, course2StaffRole], false)),
+        );
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and no other actions after fetching empty roles', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: false, courseId: course1Id },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([], false)),
+        );
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and other actions after fetching empty roles but user is global staff', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true, courseId: course1Id },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+        .replyOnce(
+          200,
+          JSON.stringify(makeRoleListObj([], true)),
+        );
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches error action after getting an error when trying to get roles', () => {
+      const expectedActions = [
+        { type: ERROR_FETCHING_ROLES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl).replyOnce(400);
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/actions/tracks.js

@@ -3,6 +3,8 @@ import {
   GOT_TRACKS,
   ERROR_FETCHING_TRACKS,
 } from '../constants/actionTypes/tracks';
+import { hasMastersTrack } from '../selectors/tracks';
+import { fetchBulkUpgradeHistory } from './grades';
 import LmsApiService from '../services/LmsApiService';
 
 const startedFetchingTracks = () => ({ type: STARTED_FETCHING_TRACKS });
@@ -16,6 +18,9 @@ const fetchTracks = courseId => (
       .then(response => response.data)
       .then((data) => {
         dispatch(gotTracks(data.course_modes));
+        if (hasMastersTrack(data.course_modes)) {
+          dispatch(fetchBulkUpgradeHistory(courseId));
+        }
       })
       .catch(() => {
         dispatch(errorFetchingTracks());

src/data/actions/tracks.test.js

@@ -1,8 +1,9 @@
+import axios from 'axios';
 import configureMockStore from 'redux-mock-store';
 import MockAdapter from 'axios-mock-adapter';
 import thunk from 'redux-thunk';
 
-import apiClient from '../apiClient';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { configuration } from '../../config';
 import { fetchTracks } from './tracks';
 import {
@@ -12,7 +13,12 @@ import {
 } from '../constants/actionTypes/tracks';
 
 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
+
+jest.mock('@edx/frontend-platform/auth');
+const axiosMock = new MockAdapter(axios);
+getAuthenticatedHttpClient.mockReturnValue(axios);
+axios.isAccessTokenExpired = jest.fn();
+axios.isAccessTokenExpired.mockReturnValue(false);
 
 describe('actions', () => {
   afterEach(() => {
@@ -21,6 +27,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 +61,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 +76,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,4 +1,18 @@
-import { sortGrades } from './grades';
+const formatDateForDisplay = (inputDate) => {
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC',
+  };
+  const timeOptions = {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: 'UTC',
+    timeZoneName: 'short',
+  };
+  return `${inputDate.toLocaleDateString('en-US', options)} at ${inputDate.toLocaleTimeString('en-US', timeOptions)}`;
+};
 
 const sortAlphaAsc = (gradeRowA, gradeRowB) => {
   const a = gradeRowA.username.toUpperCase();
@@ -12,114 +26,4 @@ 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) {
-    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)
-        .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);
-    }
-    return [];
-  }
-
-  function some(dispatch, 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 && 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);
-  }
-
-  return filterKey === 'All' ? all : some;
-};
-
-export { headingMapper, gradeSortMap, sortAlphaAsc };
-
+export { sortAlphaAsc, formatDateForDisplay };

src/data/apiClient.js

@@ -1,15 +0,0 @@
-import { getAuthenticatedAPIClient } from '@edx/frontend-auth';
-
-import { configuration } from '../config';
-
-const apiClient = getAuthenticatedAPIClient({
-  appBaseUrl: configuration.BASE_URL,
-  loginUrl: configuration.LOGIN_URL,
-  logoutUrl: configuration.LOGOUT_URL,
-  csrfTokenApiPath: process.env.CSRF_TOKEN_API_PATH,
-  refreshAccessTokenEndpoint: configuration.REFRESH_ACCESS_TOKEN_ENDPOINT,
-  accessTokenCookieName: configuration.ACCESS_TOKEN_COOKIE_NAME,
-  csrfCookieName: configuration.CSRF_COOKIE_NAME,
-});
-
-export default apiClient;

src/data/constants/actionTypes/assignmentTypes.js

@@ -1,10 +1,11 @@
 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/constants/actionTypes/config.js

@@ -0,0 +1,3 @@
+const GOT_BULK_MANAGEMENT_CONFIG = 'GOT_BULK_MANAGEMENT_CONFIG';
+
+export default GOT_BULK_MANAGEMENT_CONFIG;

src/data/constants/actionTypes/filters.js

@@ -0,0 +1,9 @@
+const INITIALIZE_FILTERS = 'INITIALIZE_FILTERS';
+const RESET_FILTERS = 'RESET_FILTERS';
+const UPDATE_ASSIGNMENT_FILTER = 'UPDATE_ASSIGNMENT_FILTER';
+const UPDATE_ASSIGNMENT_LIMITS = 'UPDATE_ASSIGNMENT_LIMITS';
+const UPDATE_COURSE_GRADE_LIMITS = 'UPDATE_COURSE_GRADE_LIMITS';
+export {
+  INITIALIZE_FILTERS, RESET_FILTERS, UPDATE_ASSIGNMENT_FILTER,
+  UPDATE_ASSIGNMENT_LIMITS, UPDATE_COURSE_GRADE_LIMITS,
+};

src/data/constants/actionTypes/grades.js

@@ -2,15 +2,32 @@ const STARTED_FETCHING_GRADES = 'STARTED_FETCHING_GRADES';
 const FINISHED_FETCHING_GRADES = 'FINISHED_FETCHING_GRADES';
 const ERROR_FETCHING_GRADES = 'ERROR_FETCHING_GRADES';
 const GOT_GRADES = 'GOT_GRADES';
+const DONE_VIEWING_ASSIGNMENT = 'DONE_VIEWING_ASSIGNMENT';
+const GOT_GRADE_OVERRIDE_HISTORY = 'GOT_GRADE_OVERRIDE_HISTORY';
+const ERROR_FETCHING_GRADE_OVERRIDE_HISTORY = 'ERROR_FETCHING_GRADE_OVERRIDE_HISTORY';
+
+const FILTER_SELECTED = 'FILTER_SELECTED';
+const GRADE_OVERRIDE = 'GRADE_OVERRIDE';
+const REPORT_DOWNLOADED = 'REPORT_DOWNLOADED';
+const UPLOAD_OVERRIDE = 'UPLOAD_OVERRIDE';
+const UPLOAD_OVERRIDE_ERROR = 'UPLOAD_OVERRIDE_ERROR';
 
 const GRADE_UPDATE_REQUEST = 'GRADE_UPDATE_REQUEST';
 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';
+const FILTER_BY_ASSIGNMENT_TYPE = 'FILTER_BY_ASSIGNMENT_TYPE';
+const CLOSE_BANNER = 'CLOSE_BANNER';
+const OPEN_BANNER = 'OPEN_BANNER';
+
+const START_UPLOAD = 'START_UPLOAD';
+const UPLOAD_COMPLETE = 'UPLOAD_COMPLETE';
+const UPLOAD_ERR = 'UPLOAD_ERR';
+const GOT_BULK_HISTORY = 'GOT_BULK_HISTORY';
+const BULK_HISTORY_ERR = 'BULK_HISTORY_ERR';
+const BULK_GRADE_REPORT_DOWNLOADED = 'BULK_GRADE_REPORT_DOWNLOADED';
+const INTERVENTION_REPORT_DOWNLOADED = 'INTERVENTION_REPORT_DOWNLOADED';
 
 export {
   STARTED_FETCHING_GRADES,
@@ -21,7 +38,22 @@ export {
   GRADE_UPDATE_SUCCESS,
   GRADE_UPDATE_FAILURE,
   TOGGLE_GRADE_FORMAT,
-  SORT_GRADES,
-  FILTER_COLUMNS,
-  UPDATE_BANNER,
+  FILTER_BY_ASSIGNMENT_TYPE,
+  OPEN_BANNER,
+  CLOSE_BANNER,
+  START_UPLOAD,
+  UPLOAD_COMPLETE,
+  UPLOAD_ERR,
+  GOT_BULK_HISTORY,
+  BULK_HISTORY_ERR,
+  DONE_VIEWING_ASSIGNMENT,
+  GOT_GRADE_OVERRIDE_HISTORY,
+  ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+  FILTER_SELECTED,
+  GRADE_OVERRIDE,
+  REPORT_DOWNLOADED,
+  UPLOAD_OVERRIDE,
+  UPLOAD_OVERRIDE_ERROR,
+  BULK_GRADE_REPORT_DOWNLOADED,
+  INTERVENTION_REPORT_DOWNLOADED,
 };

src/data/constants/actionTypes/roles.js

@@ -0,0 +1,7 @@
+const GOT_ROLES = 'GOT_ROLES';
+const ERROR_FETCHING_ROLES = 'ERROR_FETCHING_ROLES';
+
+export {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+};

src/data/constants/errors.js

@@ -0,0 +1,3 @@
+const GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG = 'Error retrieving grade override history.';
+
+export default GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG;

src/data/constants/filters.js

@@ -0,0 +1,12 @@
+const initialFilters = {
+  assignment: '',
+  assignmentType: '',
+  track: '',
+  cohort: '',
+  assignmentGradeMin: '0',
+  assignmentGradeMax: '100',
+  courseGradeMin: '0',
+  courseGradeMax: '100',
+};
+
+export default initialFilters;

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 = {
@@ -10,7 +11,6 @@ const initialState = {
   errorFetching: false,
 };
 
-
 const assignmentTypes = (state = initialState, action) => {
   switch (action.type) {
     case GOT_ASSIGNMENT_TYPES:
@@ -18,6 +18,7 @@ const assignmentTypes = (state = initialState, action) => {
         ...state,
         results: action.assignmentTypes,
         errorFetching: false,
+        finishedFetching: true,
       };
     case STARTED_FETCHING_ASSIGNMENT_TYPES:
       return {
@@ -30,10 +31,16 @@ 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;
   }
 };
 
 export default assignmentTypes;
-

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

@@ -10,7 +10,6 @@ const initialState = {
   errorFetching: false,
 };
 
-
 const cohorts = (state = initialState, action) => {
   switch (action.type) {
     case GOT_COHORTS:
@@ -37,4 +36,3 @@ const cohorts = (state = initialState, action) => {
 };
 
 export default cohorts;
-

src/data/reducers/cohorts.test.js

@@ -29,7 +29,7 @@ const cohortsData = [
     user_partition_id: null,
   }];
 
-describe('dashboardAnalytics reducer', () => {
+describe('cohorts reducer', () => {
   it('has initial state', () => {
     expect(cohorts(undefined, {})).toEqual(initialState);
   });

src/data/reducers/config.js

@@ -0,0 +1,15 @@
+import GOT_BULK_MANAGEMENT_CONFIG from '../constants/actionTypes/config';
+
+const reducer = (state = {}, action) => {
+  switch (action.type) {
+    case GOT_BULK_MANAGEMENT_CONFIG:
+      return {
+        ...state,
+        bulkManagementAvailable: action.data,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

src/data/reducers/filters.js

@@ -0,0 +1,78 @@
+import { GOT_GRADES, FILTER_BY_ASSIGNMENT_TYPE } from '../constants/actionTypes/grades';
+
+import {
+  INITIALIZE_FILTERS, UPDATE_ASSIGNMENT_FILTER, UPDATE_ASSIGNMENT_LIMITS, UPDATE_COURSE_GRADE_LIMITS, RESET_FILTERS,
+} from '../constants/actionTypes/filters';
+
+import initialFilters from '../constants/filters';
+
+import { getAssignmentsFromResultsSubstate, chooseRelevantAssignmentData } from '../selectors/filters';
+
+const initialState = {};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FILTER_BY_ASSIGNMENT_TYPE:
+      return {
+        ...state,
+        assignmentType: action.filterType,
+        assignment: (
+          action.filterType !== ''
+          && (state.assignment || {}).type !== action.filterType)
+          ? '' : state.assignment,
+      };
+    case INITIALIZE_FILTERS:
+      return {
+        ...state,
+        ...action.data,
+      };
+    case GOT_GRADES: {
+      const { assignment } = state;
+      const { id, type } = assignment || {};
+      if (!type) {
+        const relevantAssignment = getAssignmentsFromResultsSubstate(action.grades)
+          .map(chooseRelevantAssignmentData)
+          .find(assig => assig.id === id);
+        return {
+          ...state,
+          track: action.track,
+          cohort: action.cohort,
+          assignment: relevantAssignment,
+        };
+      }
+      return {
+        ...state,
+        track: action.track,
+        cohort: action.cohort,
+      };
+    }
+    case RESET_FILTERS: {
+      const result = { ...state };
+      action.filterNames.forEach((filterName) => {
+        result[filterName] = initialFilters[filterName];
+      });
+      return result;
+    }
+    case UPDATE_ASSIGNMENT_FILTER:
+      return {
+        ...state,
+        assignment: action.data,
+      };
+    case UPDATE_ASSIGNMENT_LIMITS:
+      return {
+        ...state,
+        assignmentGradeMin: action.data.minGrade,
+        assignmentGradeMax: action.data.maxGrade,
+      };
+    case UPDATE_COURSE_GRADE_LIMITS:
+      return {
+        ...state,
+        courseGradeMin: action.data.courseGradeMin,
+        courseGradeMax: action.data.courseGradeMax,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

src/data/reducers/grades.js

@@ -3,23 +3,42 @@ import {
   ERROR_FETCHING_GRADES,
   GOT_GRADES,
   TOGGLE_GRADE_FORMAT,
-  FILTER_COLUMNS,
-  GRADE_UPDATE_SUCCESS,
-  UPDATE_BANNER,
-  SORT_GRADES,
+  FILTER_BY_ASSIGNMENT_TYPE,
+  OPEN_BANNER,
+  CLOSE_BANNER,
+  START_UPLOAD,
+  UPLOAD_COMPLETE,
+  UPLOAD_ERR,
+  GOT_BULK_HISTORY,
+  DONE_VIEWING_ASSIGNMENT,
+  GOT_GRADE_OVERRIDE_HISTORY,
+  ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
 } from '../constants/actionTypes/grades';
 
 const initialState = {
   results: [],
+  gradeOverrideHistoryResults: [],
+  gradeOverrideCurrentEarnedAllOverride: null,
+  gradeOverrideCurrentPossibleAllOverride: null,
+  gradeOverrideCurrentEarnedGradedOverride: null,
+  gradeOverrideCurrentPossibleGradedOverride: null,
+  gradeOriginalEarnedAll: null,
+  gradeOriginalPossibleAll: null,
+  gradeOriginalEarnedGraded: null,
+  gradeOriginalPossibleGraded: null,
   headings: [],
   startedFetching: false,
   finishedFetching: false,
   errorFetching: false,
+  overrideHistoryError: '',
   gradeFormat: 'percent',
   showSuccess: false,
   prevPage: null,
   nextPage: null,
   showSpinner: true,
+  bulkManagement: {},
+  totalUsersCount: 0,
+  filteredUsersCount: 0,
 };
 
 const grades = (state = initialState, action) => {
@@ -31,12 +50,50 @@ const grades = (state = initialState, action) => {
         headings: action.headings,
         finishedFetching: true,
         errorFetching: false,
-        selectedTrack: action.track,
-        selectedCohort: action.cohort,
         prevPage: action.prev,
         nextPage: action.next,
         showSpinner: false,
+        courseId: action.courseId,
+        totalUsersCount: action.totalUsersCount,
+        filteredUsersCount: action.filteredUsersCount,
       };
+    case DONE_VIEWING_ASSIGNMENT: {
+      const {
+        gradeOverrideHistoryResults,
+        gradeOverrideCurrentEarnedAllOverride,
+        gradeOverrideCurrentPossibleAllOverride,
+        gradeOverrideCurrentEarnedGradedOverride,
+        gradeOverrideCurrentPossibleGradedOverride,
+        gradeOriginalEarnedAll,
+        gradeOriginalPossibleAll,
+        gradeOriginalEarnedGraded,
+        gradeOriginalPossibleGraded,
+        ...rest
+      } = state;
+      return rest;
+    }
+    case GOT_GRADE_OVERRIDE_HISTORY:
+      return {
+        ...state,
+        gradeOverrideHistoryResults: action.overrideHistory,
+        gradeOverrideCurrentEarnedAllOverride: action.currentEarnedAllOverride,
+        gradeOverrideCurrentPossibleAllOverride: action.currentPossibleAllOverride,
+        gradeOverrideCurrentEarnedGradedOverride: action.currentEarnedGradedOverride,
+        gradeOverrideCurrentPossibleGradedOverride: action.currentPossibleGradedOverride,
+        gradeOriginalEarnedAll: action.originalGradeEarnedAll,
+        gradeOriginalPossibleAll: action.originalGradePossibleAll,
+        gradeOriginalEarnedGraded: action.originalGradeEarnedGraded,
+        gradeOriginalPossibleGraded: action.originalGradePossibleGraded,
+        overrideHistoryError: '',
+      };
+
+    case ERROR_FETCHING_GRADE_OVERRIDE_HISTORY:
+      return {
+        ...state,
+        finishedFetchingOverrideHistory: true,
+        overrideHistoryError: action.errorMessage,
+      };
+
     case STARTED_FETCHING_GRADES:
       return {
         ...state,
@@ -55,24 +112,57 @@ const grades = (state = initialState, action) => {
         ...state,
         gradeFormat: action.formatType,
       };
-    case FILTER_COLUMNS:
+    case FILTER_BY_ASSIGNMENT_TYPE:
       return {
         ...state,
+        selectedAssignmentType: action.filterType,
         headings: action.headings,
       };
-    case UPDATE_BANNER:
+    case OPEN_BANNER:
       return {
         ...state,
-        showSuccess: action.showSuccess,
+        showSuccess: true,
       };
-    case SORT_GRADES:
+    case CLOSE_BANNER:
       return {
         ...state,
-        results: action.results,
+        showSuccess: false,
+      };
+    case START_UPLOAD: {
+      const { errorMessages, uploadSuccess, ...rest } = state.bulkManagement;
+      return {
+        ...state,
+        showSpinner: true,
+        bulkManagement: rest,
+      };
+    }
+    case UPLOAD_COMPLETE:
+      return {
+        ...state,
+        showSpinner: false,
+        bulkManagement: { uploadSuccess: true, ...state.bulkManagement },
+      };
+    case UPLOAD_ERR:
+      return {
+        ...state,
+        showSpinner: false,
+        bulkManagement: {
+          ...state.bulkManagement,
+          ...action.data,
+        },
+      };
+    case GOT_BULK_HISTORY:
+      return {
+        ...state,
+        bulkManagement: {
+          ...state.bulkManagement,
+          history: action.data,
+        },
       };
     default:
       return state;
   }
 };
 
+export { initialState as initialGradesState };
 export default grades;

src/data/reducers/grades.test.js

@@ -0,0 +1,178 @@
+import grades, { initialGradesState as initialState } from './grades';
+import {
+  STARTED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  TOGGLE_GRADE_FORMAT,
+  FILTER_BY_ASSIGNMENT_TYPE,
+  OPEN_BANNER,
+  ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+} from '../constants/actionTypes/grades';
+
+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,
+      prevPage: expectedPrev,
+      nextPage: expectedNext,
+      showSpinner: false,
+      courseId,
+      totalUsersCount: 4,
+      filteredUsersCount: 2,
+    };
+    expect(grades(undefined, {
+      type: GOT_GRADES,
+      grades: gradesData,
+      headings: headingsData,
+      prev: expectedPrev,
+      next: expectedNext,
+      track: expectedTrack,
+      cohort: expectedCohortId,
+      showSpinner: true,
+      courseId,
+      totalUsersCount: 4,
+      filteredUsersCount: 2,
+    })).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_BY_ASSIGNMENT_TYPE,
+      headings: expectedHeadings,
+    })).toEqual(expected);
+  });
+
+  it('updates update_banner state success', () => {
+    const expectedShowSuccess = true;
+    const expected = {
+      ...initialState,
+      showSuccess: expectedShowSuccess,
+    };
+    expect(grades(undefined, {
+      type: OPEN_BANNER,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch grades failure state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: true,
+      finishedFetching: true,
+    };
+    expect(grades(undefined, {
+      type: ERROR_FETCHING_GRADES,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch grade override history failure state', () => {
+    const errorMessage = 'This is the error message';
+    const expected = {
+      ...initialState,
+      finishedFetchingOverrideHistory: true,
+      overrideHistoryError: errorMessage,
+    };
+    expect(grades(undefined, {
+      type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+      errorMessage,
+    })).toEqual(expected);
+  });
+});

src/data/reducers/index.js

@@ -4,12 +4,18 @@ import cohorts from './cohorts';
 import grades from './grades';
 import tracks from './tracks';
 import assignmentTypes from './assignmentTypes';
+import roles from './roles';
+import filters from './filters';
+import config from './config';
 
 const rootReducer = combineReducers({
   grades,
   cohorts,
   tracks,
   assignmentTypes,
+  roles,
+  filters,
+  config,
 });
 
 export default rootReducer;

src/data/reducers/roles.js

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

src/data/reducers/roles.test.js

@@ -0,0 +1,47 @@
+import roles from './roles';
+import {
+  ERROR_FETCHING_ROLES,
+  GOT_ROLES,
+} from '../constants/actionTypes/roles';
+
+const initialState = {
+  canUserViewGradebook: null,
+};
+
+describe('tracks reducer', () => {
+  it('has initial state', () => {
+    expect(roles(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates canUserViewGradebook to true', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: true,
+    };
+    expect(roles(undefined, {
+      type: GOT_ROLES,
+      canUserViewGradebook: true,
+    })).toEqual(expected);
+  });
+
+  it('updates canUserViewGradebook to false', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: false,
+    };
+    expect(roles(undefined, {
+      type: GOT_ROLES,
+      canUserViewGradebook: false,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch roles failure state', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: false,
+    };
+    expect(roles(undefined, {
+      type: ERROR_FETCHING_ROLES,
+    })).toEqual(expected);
+  });
+});

src/data/reducers/tracks.js

@@ -10,7 +10,6 @@ const initialState = {
   errorFetching: false,
 };
 
-
 const tracks = (state = initialState, action) => {
   switch (action.type) {
     case GOT_TRACKS:
@@ -18,6 +17,7 @@ const tracks = (state = initialState, action) => {
         ...state,
         results: action.tracks,
         errorFetching: false,
+        finishedFetching: true,
       };
     case STARTED_FETCHING_TRACKS:
       return {
@@ -36,4 +36,3 @@ const tracks = (state = initialState, action) => {
 };
 
 export default tracks;
-

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/selectors/cohorts.js

@@ -0,0 +1,10 @@
+const getCohorts = state => state.cohorts.results || [];
+
+const getCohortById = (state, selectedCohortId) => {
+  const cohort = getCohorts(state).find(coh => coh.id === selectedCohortId);
+  return cohort;
+};
+
+const getCohortNameById = (state, selectedCohortId) => (getCohortById(state, selectedCohortId) || {}).name;
+
+export { getCohortById, getCohortNameById, getCohorts };

src/data/selectors/filters.js

@@ -0,0 +1,38 @@
+const getFilters = state => state.filters || {};
+
+const getAssignmentsFromResultsSubstate = results => (results[0] || {}).section_breakdown || [];
+
+const selectableAssignments = (state) => {
+  const selectedAssignmentType = getFilters(state).assignmentType;
+  const needToFilter = selectedAssignmentType && selectedAssignmentType !== 'All';
+  const allAssignments = getAssignmentsFromResultsSubstate(state.grades.results);
+  if (needToFilter) {
+    return allAssignments.filter(assignment => assignment.category === selectedAssignmentType);
+  }
+  return allAssignments;
+};
+
+const chooseRelevantAssignmentData = assignment => ({
+  label: assignment.label,
+  subsectionLabel: assignment.subsection_name,
+  type: assignment.category,
+  id: assignment.module_id,
+});
+
+const selectableAssignmentLabels = state => selectableAssignments(state).map(chooseRelevantAssignmentData);
+
+const typeOfSelectedAssignment = (state) => {
+  const selectedAssignmentLabel = getFilters(state).assignment;
+  const sectionBreakdown = (state.grades.results[0] || {}).section_breakdown || [];
+  const selectedAssignment = sectionBreakdown.find(section => section.label === selectedAssignmentLabel);
+  return selectedAssignment && selectedAssignment.category;
+};
+
+export {
+  selectableAssignmentLabels,
+  selectableAssignments,
+  getFilters,
+  typeOfSelectedAssignment,
+  chooseRelevantAssignmentData,
+  getAssignmentsFromResultsSubstate,
+};

src/data/selectors/grades.js

@@ -0,0 +1,120 @@
+import { formatDateForDisplay } from '../actions/utils';
+import { getFilters } from './filters';
+
+const getRowsProcessed = (data) => {
+  const {
+    processed_rows: processed,
+    saved_rows: saved,
+    total_rows: total,
+  } = data;
+  return {
+    total,
+    successfullyProcessed: saved,
+    failed: processed - saved,
+    skipped: total - processed,
+  };
+};
+
+const transformHistoryEntry = (historyRow) => {
+  const {
+    modified,
+    original_filename: originalFilename,
+    data,
+    ...rest
+  } = historyRow;
+
+  const timeUploaded = formatDateForDisplay(new Date(modified));
+  const summaryOfRowsProcessed = getRowsProcessed(data);
+
+  return {
+    timeUploaded,
+    originalFilename,
+    summaryOfRowsProcessed,
+    ...rest,
+  };
+};
+const getBulkManagementHistoryFromState = state => state.grades.bulkManagement.history || [];
+const getBulkManagementHistory = state => getBulkManagementHistoryFromState(state).map(transformHistoryEntry);
+
+const headingMapper = (category, label = 'All') => {
+  const filters = {
+    all: section => section.label,
+    byCategory: section => section.label && section.category === category,
+    byLabel: section => section.label && section.label === label,
+  };
+
+  let filter;
+  if (label === 'All') {
+    filter = category === 'All' ? 'all' : 'byCategory';
+  } else {
+    filter = 'byLabel';
+  }
+
+  return (entry) => {
+    if (entry) {
+      const results = ['Username', 'Email'];
+
+      const assignmentHeadings = entry
+        .filter(filters[filter])
+        .map(s => s.label);
+
+      const totals = ['Total'];
+
+      return results.concat(assignmentHeadings).concat(totals);
+    }
+    return [];
+  };
+};
+
+const getExampleSectionBreakdown = state => (state.grades.results[0] || {}).section_breakdown || [];
+
+const getHeadings = (state) => {
+  const filters = getFilters(state) || {};
+  const {
+    assignmentType: selectedAssignmentType,
+    assignment: selectedAssignment,
+  } = filters;
+  const assignments = getExampleSectionBreakdown(state);
+  const type = selectedAssignmentType || 'All';
+  const assignment = (selectedAssignment || {}).label || 'All';
+  return headingMapper(type, assignment)(assignments);
+};
+
+const composeFilters = (...predicates) => (percentGrade, options = {}) => predicates.reduce((accum, predicate) => {
+  if (predicate(percentGrade, options)) {
+    return null;
+  }
+  return accum;
+}, percentGrade);
+
+const percentGradeIsMax = percentGrade => (
+  percentGrade === '100'
+);
+
+const percentGradeIsMin = percentGrade => (
+  percentGrade === '0'
+);
+
+const assignmentIdIsDefined = (percentGrade, { assignmentId }) => (
+  !assignmentId
+);
+
+const formatMaxCourseGrade = composeFilters(percentGradeIsMax);
+const formatMinCourseGrade = composeFilters(percentGradeIsMin);
+const formatMaxAssignmentGrade = composeFilters(
+  percentGradeIsMax,
+  assignmentIdIsDefined,
+);
+const formatMinAssignmentGrade = composeFilters(
+  percentGradeIsMin,
+  assignmentIdIsDefined,
+);
+
+export {
+  getBulkManagementHistory,
+  getHeadings,
+  formatMinAssignmentGrade,
+  formatMaxAssignmentGrade,
+  formatMaxCourseGrade,
+  formatMinCourseGrade,
+};

src/data/selectors/grades.test.js

@@ -0,0 +1,72 @@
+import { getBulkManagementHistory } from './grades';
+
+const genericHistoryRow = {
+  id: 5,
+  class_name: 'bulk_grades.api.GradeCSVProcessor',
+  unique_id: 'course-v1:google+goog101+2018_spring',
+  operation: 'commit',
+  user: 'edx',
+  modified: '2019-07-16T20:25:46.700802Z',
+  original_filename: '',
+  data: {
+    total_rows: 5,
+    processed_rows: 3,
+    saved_rows: 3,
+  },
+};
+
+describe('getBulkManagementHistory', () => {
+  it('handles history being as-yet unloaded', () => {
+    const result = getBulkManagementHistory({ grades: { bulkManagement: {} } });
+    expect(result).toEqual([]);
+  });
+
+  it('formats dates for us', () => {
+    const result = getBulkManagementHistory({
+      grades: {
+        bulkManagement: {
+          history: [
+            genericHistoryRow,
+          ],
+        },
+      },
+    });
+    const [{ timeUploaded }] = result;
+    expect(timeUploaded).not.toMatch(/Z$/);
+    expect(timeUploaded).toContain(' at ');
+  });
+
+  const exerciseGetRowsProcessed = (input, expectation) => {
+    const result = getBulkManagementHistory({
+      grades: {
+        bulkManagement: {
+          history: [
+            { ...genericHistoryRow, data: input },
+          ],
+        },
+      },
+    });
+    const [{ summaryOfRowsProcessed }] = result;
+    expect(summaryOfRowsProcessed).toEqual(expect.objectContaining(expectation));
+  };
+
+  it('calculates skippage', () => {
+    exerciseGetRowsProcessed({
+      total_rows: 100,
+      processed_rows: 10,
+      saved_rows: 10,
+    }, {
+      skipped: 90,
+    });
+  });
+
+  it('calculates failures', () => {
+    exerciseGetRowsProcessed({
+      total_rows: 10,
+      processed_rows: 100,
+      saved_rows: 10,
+    }, {
+      failed: 90,
+    });
+  });
+});

src/data/selectors/tracks.js

@@ -0,0 +1,12 @@
+const compose = (...fns) => {
+  const [firstFunc, ...rest] = fns.reverse();
+  return (...args) => rest.reduce((accum, fn) => fn(accum), firstFunc(...args));
+};
+
+const getTracks = state => state.tracks.results || [];
+const trackIsMasters = track => track.slug === 'masters';
+const hasMastersTrack = tracks => tracks.some(trackIsMasters);
+const stateHasMastersTrack = compose(hasMastersTrack, getTracks);
+
+export { hasMastersTrack, trackIsMasters };
+export default stateHasMastersTrack;

src/data/services/LmsApiService.js

@@ -1,31 +1,59 @@
-import apiClient from '../apiClient';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 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}/`;
+  static pageSize = 25
 
-    gradebookUrl += `?page_size=${LmsApiService.pageSize}&`;
+  static fetchGradebookData(courseId, searchText, cohort, track, options = {}) {
+    const queryParams = {};
+    queryParams.page_size = LmsApiService.pageSize;
     if (searchText) {
-      gradebookUrl += `username_contains=${searchText}&`;
+      queryParams.user_contains = searchText;
     }
     if (cohort) {
-      gradebookUrl += `cohort_id=${cohort}&`;
+      queryParams.cohort_id = cohort;
     }
     if (track) {
-      gradebookUrl += `enrollment_mode=${track}`;
+      queryParams.enrollment_mode = track;
     }
-    return apiClient.get(gradebookUrl);
+    if (options.assignmentGradeMax || options.assignmentGradeMin) {
+      if (!options.assignment) {
+        throw new Error('Gradebook LMS API requires assignment to be set to filter by min/max assig. grade');
+      }
+      queryParams.assignment = options.assignment;
+      if (options.assignmentGradeMin) {
+        queryParams.assignment_grade_min = options.assignmentGradeMin;
+      }
+      if (options.assignmentGradeMax) {
+        queryParams.assignment_grade_max = options.assignmentGradeMax;
+      }
+    }
+    if (options.courseGradeMin) {
+      queryParams.course_grade_min = options.courseGradeMin;
+    }
+    if (options.courseGradeMax) {
+      queryParams.course_grade_max = options.courseGradeMax;
+    }
+
+    const queryParamString = Object.keys(queryParams)
+      .map(attr => `${attr}=${encodeURIComponent(queryParams[attr])}`)
+      .join('&');
+
+    const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/?${queryParamString}`;
+
+    return getAuthenticatedHttpClient().get(gradebookUrl);
   }
 
   static updateGradebookData(courseId, updateData) {
     /*
        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:
        [
@@ -36,28 +64,76 @@ class LmsApiService {
               "earned_all_override": 11,
               "possible_all_override": 11,
               "earned_graded_override": 11,
-              "possible_graded_override": 11
+              "possible_graded_override": 11,
+              "comment": "reason for override"
             }
           }
         ]
     */
     const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/bulk-update`;
-    return apiClient.post(gradebookUrl, updateData);
+    return getAuthenticatedHttpClient().post(gradebookUrl, updateData);
   }
 
   static fetchTracks(courseId) {
-    const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}`;
-    return apiClient.get(trackUrl);
+    const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}?include_expired=1`;
+    return getAuthenticatedHttpClient().get(trackUrl);
   }
 
   static fetchCohorts(courseId) {
     const cohortsUrl = `${LmsApiService.baseUrl}/courses/${courseId}/cohorts/`;
-    return apiClient.get(cohortsUrl);
+    return getAuthenticatedHttpClient().get(cohortsUrl);
   }
 
   static fetchAssignmentTypes(courseId) {
     const assignmentTypesUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`;
-    return apiClient.get(assignmentTypesUrl);
+    return getAuthenticatedHttpClient().get(assignmentTypesUrl);
+  }
+
+  static fetchUserRoles(courseId) {
+    const rolesUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/roles/?course_id=${encodeURIComponent(courseId)}`;
+    return getAuthenticatedHttpClient().get(rolesUrl);
+  }
+
+  static getGradeExportCsvUrl(courseId, options = {}) {
+    const queryParams = ['track', 'cohort', 'assignment', 'assignmentType', 'assignmentGradeMax',
+      'assignmentGradeMin', 'courseGradeMin', 'courseGradeMax']
+      .filter(opt => options[opt]
+                   && options[opt] !== 'All')
+      .map(opt => `${opt}=${encodeURIComponent(options[opt])}`)
+      .join('&');
+    return `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/?${queryParams}`;
+  }
+
+  static getInterventionExportCsvUrl(courseId, options = {}) {
+    const queryParams = ['track', 'cohort', 'assignment', 'assignmentType', 'assignmentGradeMax',
+      'assignmentGradeMin', 'courseGradeMin', 'courseGradeMax']
+      .filter(opt => options[opt]
+                   && options[opt] !== 'All')
+      .map(opt => `${opt}=${encodeURIComponent(options[opt])}`)
+      .join('&');
+    return `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/intervention?${queryParams}`;
+  }
+
+  static getGradeImportCsvUrl = LmsApiService.getGradeExportCsvUrl;
+
+  static uploadGradeCsv(courseId, formData) {
+    const fileUploadUrl = LmsApiService.getGradeImportCsvUrl(courseId);
+    return getAuthenticatedHttpClient().post(fileUploadUrl, formData).then((result) => {
+      if (result.status === 200 && !result.data.error_messages.length) {
+        return result.data;
+      }
+      return Promise.reject(result);
+    });
+  }
+
+  static fetchGradeBulkOperationHistory(courseId) {
+    const url = `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/history/`;
+    return getAuthenticatedHttpClient().get(url).then(response => response.data).catch(() => Promise.reject(Error('unhandled response error')));
+  }
+
+  static fetchGradeOverrideHistory(subsectionId, userId) {
+    const historyUrl = `${LmsApiService.baseUrl}/api/grades/v1/subsection/${subsectionId}/?user_id=${userId}&history_record_limit=5`;
+    return getAuthenticatedHttpClient().get(historyUrl);
   }
 }
 

src/data/store.js

@@ -2,14 +2,98 @@ 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, UPLOAD_OVERRIDE,
+  UPLOAD_OVERRIDE_ERROR, BULK_GRADE_REPORT_DOWNLOADED, INTERVENTION_REPORT_DOWNLOADED,
+} from './constants/actionTypes/grades';
+import { UPDATE_COURSE_GRADE_LIMITS } from './constants/actionTypes/filters';
 
 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: 'edx.gradebook.grades.displayed',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+      track: action.track,
+      cohort: action.cohort,
+      assignmentType: action.assignmentType,
+      prev: action.prev,
+      next: action.next,
+    },
+  })),
+  [GRADE_UPDATE_SUCCESS]: trackEvent(action => ({
+    name: 'edx.gradebook.grades.grade_override.succeeded',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+      updatedGrades: action.payload.responseData,
+    },
+  })),
+  [GRADE_UPDATE_FAILURE]: trackEvent(action => ({
+    name: 'edx.gradebook.grades.grade_override.failed',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+      error: action.payload.error,
+    },
+  })),
+  [UPLOAD_OVERRIDE]: trackEvent(action => ({
+    name: 'edx.gradebook.grades.upload.grades_overrides.succeeded',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+    },
+  })),
+  [UPLOAD_OVERRIDE_ERROR]: trackEvent(action => ({
+    name: 'edx.gradebook.grades.upload.grades_overrides.failed',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+      error: action.payload.error,
+    },
+  })),
+  [UPDATE_COURSE_GRADE_LIMITS]: trackEvent(action => ({
+    name: 'edx.gradebook.grades.filter_applied',
+    label: action.courseId,
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+    },
+  })),
+  [BULK_GRADE_REPORT_DOWNLOADED]: trackEvent(action => ({
+    name: 'edx.gradebook.reports.grade_export.downloaded',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+    },
+  })),
+  [INTERVENTION_REPORT_DOWNLOADED]: trackEvent(action => ({
+    name: 'edx.gradebook.reports.intervention.downloaded',
+    properties: {
+      category: trackingCategory,
+      label: action.courseId,
+    },
+  })),
+};
+
+const segmentMiddleware = createMiddleware(eventsMap, Segment());
 
 const store = createStore(
   reducers,
-  composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware)),
+  composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware, segmentMiddleware)),
 );
 
+export { trackingCategory };
 export default store;

src/index.jsx

@@ -1,30 +1,105 @@
-import 'babel-polyfill';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import SiteFooter, { messages as footerMessages } from '@edx/frontend-component-footer';
+import {
+  APP_READY,
+  getConfig,
+  initialize,
+  subscribe,
+} from '@edx/frontend-platform';
+import { IntlProvider } from 'react-intl';
+
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
 import Header from './components/Header';
 import store from './data/store';
+import FooterLogo from '../assets/edx-footer.png';
 import './App.scss';
 
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: process.env.FACEBOOK_URL,
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: process.env.TWITTER_URL,
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'LinkedIn',
+    url: process.env.LINKED_IN_URL,
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: process.env.REDDIT_URL,
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
 const App = () => (
-  <Provider store={store}>
-    <Router>
-      <div>
-        <Header />
-        <main>
-          <Switch>
-            <Route exact path="/:courseId" component={GradebookPage} />
-          </Switch>
-        </main>
-      </div>
-    </Router>
-  </Provider>
+  <IntlProvider locale="en">
+    <Provider store={store}>
+      <Router>
+        <div>
+          <Header />
+          <main>
+            <Switch>
+              <Route exact path={getConfig().PUBLIC_PATH.concat(':courseId')} component={GradebookPage} />
+            </Switch>
+          </main>
+          <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}
+            appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
+            googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+            socialLinks={socialLinks}
+            enterpriseMarketingLink={{
+              url: process.env.ENTERPRISE_MARKETING_URL,
+              queryParams: {
+                utm_source: process.env.ENTERPRISE_MARKETING_UTM_SOURCE,
+                utm_campaign: process.env.ENTERPRISE_MARKETING_UTM_CAMPAIGN,
+                utm_medium: process.env.ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM,
+              },
+            }}
+          />
+        </div>
+      </Router>
+    </Provider>
+  </IntlProvider>
 );
 
-if (apiClient.ensurePublicOrAuthencationAndCookies(window.location.pathname)) {
+subscribe(APP_READY, () => {
   ReactDOM.render(<App />, document.getElementById('root'));
-}
+});
+
+initialize({
+  messages: [
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
+});

src/postcss.config.js

@@ -0,0 +1,7 @@
+/* I'm here to allow autoprefixing in webpack.prod.config.js */
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ grid: true, browsers: ['>1%'] }),
+  ],
+};
+

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);
+}());