Merge pull request #146 from muselesscreator/locked_headers_alone

lock header row and column
2020-10-22 09:29:48 -04:00 · 2020-10-21 17:19:26 -04:00 · 2020-09-08 17:14:21 -04:00 · 2020-09-02 09:57:26 -04:00 · 2020-08-28 10:57:32 -04:00 · 2020-08-26 14:11:37 -04:00
46 changed files with 14637 additions and 18453 deletions
--- a/.babelrc
+++ b/.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"
-  ]
-}
--- a/.env
+++ b/.env
@@ -0,0 +1,32 @@
+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,
+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,
--- a/.env.development
+++ b/.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'
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,27 +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" ]
-    }],
-    // https://github.com/yannickcr/eslint-plugin-react/issues/1754#issuecomment-378838053
-    // tl;dr: this rule is no longer going to cause any user-facing visual weirdness, its original motivation
-    "react/no-did-mount-set-state": "off"
-  },
-  "env": {
-    "jest": true
-  }
-}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');
--- a/.travis.yml
+++ b/.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
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel');
--- a/config/webpack.common.config.js
+++ b/config/webpack.common.config.js
@@ -1,16 +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: {
-    segment: path.resolve(__dirname, '../src/segment.js'),
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-};
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -1,147 +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/segment.js'),
-    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: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',
-      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',
-      SITE_NAME: 'edX',
-      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
-      SUPPORT_URL: 'http://localhost:18000/support',
-      CONTACT_URL: 'http://localhost:18000/contact',
-      OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
-      TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
-      PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
-      FACEBOOK_URL: 'https://www.facebook.com',
-      TWITTER_URL: 'https://twitter.com',
-      YOU_TUBE_URL: 'https://www.youtube.com',
-      LINKED_IN_URL: 'https://www.linkedin.com',
-      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',
-    }),
-    // 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: 1994,
-    historyApiFallback: true,
-    hot: true,
-    inline: true,
-  },
-});
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -1,149 +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 HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-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: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-              minimize: true,
-            },
-          },
-          'postcss-loader', // for autoprefixing, needs to be before the sass loader, not sure why
-          {
-            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 MiniCssExtractPlugin({
-      filename: '[name].[chunkhash].css',
-    }),
-    // 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,
-      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,
-    }),
-  ],
-});
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -2,8 +2,12 @@
 # http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification

 nick: grbk
-oeps: {}
-owner: schenedx
-supporting_teams:
-  - masters-devs
+tags:
+  - frontend-app
+  - masters
+oeps:
+  oep-2: true    # Repository metadata
 openedx-release: {ref: master}
+owner:
+  type: team
+  team: edx/masters-devs-gta
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,20 +1,21 @@
 {
  "name": "@edx/frontend-app-gradebook",
-  "version": "0.1.0",
+  "version": "1.4.14",
  "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
  "repository": {
    "type": "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"
  },
@@ -25,96 +26,52 @@
    "access": "public"
  },
  "dependencies": {
-    "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^4.0.0",
-    "@edx/frontend-component-footer": "^4.1.5",
-    "@edx/paragon": "^4.2.3",
+    "@edx/frontend-component-footer": "10.0.11",
+    "@edx/frontend-platform": "1.5.0",
+    "@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",
-    "babel-polyfill": "^6.26.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",
-    "prop-types": "^15.7.2",
-    "query-string": "^5.1.1",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
+    "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": "^4.3.1",
-    "react-router-dom": "^4.3.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": "4.0.5",
    "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "^2.13.8",
-    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.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": {
-    "autoprefixer": "^9.6.1",
+    "@edx/frontend-build": "5.2.0",
+    "axios": "0.19.2",
    "axios-mock-adapter": "^1.17.0",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.6",
-    "babel-jest": "^22.4.4",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
    "codecov": "^3.6.1",
-    "css-loader": "^0.28.11",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "es-check": "^2.3.0",
-    "eslint-config-edx": "^4.0.4",
    "fetch-mock": "^6.5.2",
-    "file-loader": "^1.1.9",
-    "html-webpack-harddisk-plugin": "^0.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^0.14.3",
+    "husky": "2.7.0",
    "identity-obj-proxy": "^3.0.0",
-    "image-webpack-loader": "^4.2.0",
-    "jest": "^22.4.4",
-    "mini-css-extract-plugin": "^0.4.0",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^3.0.0",
    "react-dev-utils": "^5.0.3",
    "react-test-renderer": "^16.10.1",
    "redux-mock-store": "^1.5.3",
-    "sass-loader": "^6.0.6",
    "semantic-release": "^15.13.24",
-    "style-loader": "^0.20.3",
-    "travis-deploy-once": "^5.0.11",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2",
-    "webpack-merge": "^4.2.2"
-  },
-  "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)/).*/"
-    ],
-    "testURL": "http://localhost"
+    "travis-deploy-once": "^5.0.11"
  }
 }
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,14 +1,12 @@
-@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";

 $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
-@import "~@edx/paragon/src/SearchField/SearchField";
-@import "~@edx/paragon/src/Collapsible/Collapsible";

-@import "~@edx/frontend-component-footer/src/lib/scss/site-footer";
+@import "~@edx/frontend-component-footer/dist/_footer";

@import "./components/Gradebook/gradebook";
@import "./components/Drawer/Drawer";
--- a/src/components/Drawer/index.jsx
+++ b/src/components/Drawer/index.jsx
@@ -14,11 +14,6 @@ export default class Drawer extends React.Component {
    };
  }

-  deferToNextRepaint(callback) {
-    window.requestAnimationFrame(() =>
-      window.setTimeout(callback, 0));
-  }
-
  close = () => {
    if (this.state.open) {
      this.toggleOpen();
@@ -39,6 +34,10 @@ export default class Drawer extends React.Component {
    }
  };

+  deferToNextRepaint(callback) {
+    window.requestAnimationFrame(() => window.setTimeout(callback, 0));
+  }
+
  render() {
    return (
      <div className="d-flex drawer-container">
--- a/src/components/FilterBadges/index.jsx
+++ b/src/components/FilterBadges/index.jsx
@@ -1,4 +1,3 @@
-
 import { connect } from 'react-redux';

 import React from 'react';
@@ -27,27 +26,43 @@ function RangeFilterBadge({
  filterValue2,
  handleBadgeClose,
 }) {
-  return ((filterValue1 !== initialFilters[filterName1]) ||
-  (filterValue2 !== initialFilters[filterName2]))
-   &&
+  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]) &&
+  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,
@@ -150,4 +165,3 @@ FilterBadges.propTypes = {
  courseGradeMax: PropTypes.string,
  handleFilterBadgeClose: PropTypes.func.isRequired,
 };
-
--- a/src/components/Gradebook/gradebook.scss
+++ b/src/components/Gradebook/gradebook.scss
@@ -57,9 +57,17 @@
 .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 { 
-    overflow-x: scroll;
+    width: 100%;

    .grade-button {
        text-decoration: underline;
@@ -68,19 +76,25 @@
    .student-key {
        font-size: 14px;
    }
+    

-    .table {
-        padding-left: 244px;
-        // prevents the table from shrinking to a width where "Final 01" breaks to two lines
-        min-width: 731px;
-        th {
-            vertical-align: top;
-            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;
+          }
        }
    }

-    .table thead tr {
-        height: 60px;
+    thead, tbody, tr, td, th {
+      display: block;
+      word-break: break-word;
    }

    .table tr th:first-child {
@@ -89,16 +103,47 @@
    .table tr th:first-child,
    .table tr td:first-child {
        position: sticky;
-        width: 160px;
        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;
+      }
+
+      thead, tbody tr {
+        display: table;
+        table-layout: fixed;
+      }
+
+      th {
+          vertical-align: top;
+          font-size: 14px;
+      }
+    }
+
    .link-style {
        color: #0075b4;
        &:hover, &:focus {
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -11,6 +12,7 @@ import {
  StatefulButton,
  StatusAlert,
  Table,
+  Tab,
  Tabs,
 } from '@edx/paragon';
 import queryString from 'query-string';
@@ -23,7 +25,6 @@ import { formatDateForDisplay } from '../../data/actions/utils';
 import initialFilters from '../../data/constants/filters';
 import ConnectedFilterBadges from '../FilterBadges';

-
 const DECIMAL_PRECISION = 2;
 const GRADE_OVERRIDE_HISTORY_COLUMNS = [{ label: 'Date', key: 'date' }, { label: 'Grader', key: 'grader' },
  { label: 'Reason', key: 'reason' },
@@ -165,8 +166,7 @@ export default class Gradebook extends React.Component {
  };

  handleAssignmentFilterChange = (assignment) => {
-    const selectedFilterOption = this.props.assignmentFilterOptions.find(assig =>
-      assig.label === 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);
@@ -395,7 +395,8 @@ export default class Gradebook extends React.Component {
                onClick={() => this.setNewModalState(entry, subsection)}
              >
                {this.roundGrade(subsection.percent * 100)}%
-              </button>);
+              </button>
+            );
          }
          return acc;
        }, {});
@@ -456,13 +457,11 @@ export default class Gradebook extends React.Component {
      );
      const emailHeadingLabel = 'Email*';

-      headings = headings.map(heading => ({ label: heading, key: heading, width: 'col' }));
+      headings = headings.map(heading => ({ label: heading, key: heading }));

      // replace username heading label to include additional user data
      headings[0].label = userInformationHeadingLabel;
-      headings[0].width = 'col-2';
      headings[1].label = emailHeadingLabel;
-      headings[1].width = 'col-2';
    }

    return headings;
@@ -549,47 +548,45 @@ export default class Gradebook extends React.Component {
              href={this.lmsInstructorDashboardUrl(this.props.courseId)}
              className="mb-3"
            >
-              <span aria-hidden="true">{'<< '}</span> {'Back to Dashboard'}
+              <span aria-hidden="true">{'<< '}</span> Back to Dashboard
            </a>
            <h1>Gradebook</h1>
            <h3> {this.props.courseId}</h3>
-            {this.props.areGradesFrozen &&
-              <div className="alert alert-warning" role="alert" >
+            {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>
-            }
-            {(this.props.canUserViewGradebook === false) &&
-              <div className="alert alert-warning" role="alert" >
+              )}
+            {(this.props.canUserViewGradebook === false)
+              && (
+              <div className="alert alert-warning" role="alert">
                You are not authorized to view the gradebook for this course.
              </div>
-            }
-            <Tabs labels={this.getActiveTabs()}>
-              <div>
+              )}
+            <Tabs defaultActiveKey="grades">
+              <Tab eventKey="grades" title="Grades">
                <h4>Step 1: Filter the Grade Report</h4>
-                <div className="d-flex justify-content-between" >
+                <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,
-                        )
-                      }
+                      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,
-                        )
-                      }
+                      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>
@@ -609,21 +606,22 @@ export default class Gradebook extends React.Component {
                  dialog={this.getCourseGradeFilterAlertDialog()}
                  dismissible={false}
                  open={
-                    !this.state.isMinCourseGradeFilterValid ||
-                    !this.state.isMaxCourseGradeFilterValid
+                    !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
-                }
+                {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:"
@@ -635,7 +633,7 @@ export default class Gradebook extends React.Component {
                  {this.props.showBulkManagement && (
                    <div>
                      <StatefulButton
-                        buttonType="outline-primary"
+                        variant="outline-primary"
                        onClick={this.handleClickExportGrades}
                        state={this.props.showSpinner ? 'pending' : 'default'}
                        labels={{
@@ -649,7 +647,7 @@ export default class Gradebook extends React.Component {
                        disabledStates={['pending']}
                      />
                      <StatefulButton
-                        buttonType="outline-primary"
+                        variant="outline-primary"
                        onClick={this.handleClickDownloadInterventions}
                        state={this.props.showSpinner ? 'pending' : 'default'}
                        className="ml-2"
@@ -695,11 +693,11 @@ export default class Gradebook extends React.Component {
                      </div>
                      <StatusAlert
                        alertType="danger"
-                        dialog="Error retrieving grade override history."
-                        open={this.props.errorFetchingGradeOverrideHistory}
+                        dialog={this.props.gradeOverrideHistoryError}
+                        open={this.props.gradeOverrideHistoryError}
                        dismissible={false}
                      />
-                      {!this.props.errorFetchingGradeOverrideHistory && (
+                      {!this.props.gradeOverrideHistoryError && (
                        <Table
                          columns={GRADE_OVERRIDE_HISTORY_COLUMNS}
                          data={[...this.props.gradeOverrides, {
@@ -726,17 +724,18 @@ export default class Gradebook extends React.Component {
                                 || this.props.gradeOriginalPossibleGraded}
                              </span>),
                          }]}
-                        />)}
+                        />
+                      )}

                      <div>Showing most recent actions (max 5). To see more, please contact
-                      support.
+                        support.
                      </div>
                      <div>Note: Once you save, your changes will be visible to students.</div>
                    </div>
                  )}
                  buttons={[
                    <Button
-                      buttonType="primary"
+                      variant="primary"
                      onClick={this.handleAdjustedGradeClick}
                    >
                      Save Grade
@@ -744,9 +743,9 @@ export default class Gradebook extends React.Component {
                  ]}
                  onClose={this.closeAssignmentModal}
                />
-              </div>
+              </Tab>
              {this.props.showBulkManagement && (
-                <div>
+                <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>
@@ -773,7 +772,7 @@ export default class Gradebook extends React.Component {
                    />
                  </form>
                  <Button
-                    buttonType="primary"
+                    variant="primary"
                    onClick={this.handleClickImportGrades}
                  >
                    Import Grades
@@ -813,24 +812,26 @@ export default class Gradebook extends React.Component {
                    ]}
                    className="table-striped"
                  />
-                </div>)}
+                </Tab>
+              )}
            </Tabs>
          </div>
        )}
        initiallyOpen={false}
-        title={
-          <React.Fragment>
+        title={(
+          <>
            <FontAwesomeIcon icon={faFilter} /> Filter By...
-          </React.Fragment>
-        }
+          </>
+        )}
      >
-        <Collapsible title="Assignments" isOpen className="filter-group">
+        <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}
@@ -844,6 +845,7 @@ export default class Gradebook extends React.Component {
                Assignment:
              </span>
              <InputSelect
+                label="Assignment"
                name="assignment"
                aria-label="Assignment"
                value={this.props.selectedAssignment}
@@ -889,7 +891,7 @@ export default class Gradebook extends React.Component {
            </form>
          </div>
        </Collapsible>
-        <Collapsible title="Overall Grade" isOpen className="filter-group">
+        <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}
@@ -912,15 +914,16 @@ export default class Gradebook extends React.Component {
            />
            <span className="input-percent-label">%</span>
            <Button
-              buttonType="outline-secondary"
+              variant="outline-secondary"
              onClick={this.handleCourseGradeFilterApplyButtonClick}
            >
              Apply
            </Button>
          </div>
        </Collapsible>
-        <Collapsible title="Student Groups" isOpen className="filter-group">
+        <Collapsible title="Student Groups" open className="filter-group mb-3">
          <InputSelect
+            label="Tracks"
            name="Tracks"
            aria-label="Tracks"
            disabled={this.props.tracks.length === 0}
@@ -931,6 +934,7 @@ export default class Gradebook extends React.Component {
          <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)}
@@ -967,7 +971,7 @@ Gradebook.defaultProps = {
  uploadSuccess: false,
  showBulkManagement: false,
  bulkManagementHistory: [],
-  errorFetchingGradeOverrideHistory: false,
+  gradeOverrideHistoryError: '',
  totalUsersCount: null,
  filteredUsersCount: null,
 };
@@ -1043,7 +1047,7 @@ Gradebook.propTypes = {
  submitFileUploadFormData: PropTypes.func.isRequired,
  bulkImportError: PropTypes.string,
  uploadSuccess: PropTypes.bool,
-  errorFetchingGradeOverrideHistory: PropTypes.bool,
+  gradeOverrideHistoryError: PropTypes.string,
  showBulkManagement: PropTypes.bool,
  bulkManagementHistory: PropTypes.arrayOf(PropTypes.shape({
    originalFilename: PropTypes.string.isRequired,
--- a/src/components/PageButtons/snapshots/PageButtons.test.jsx.snap
+++ b/src/components/PageButtons/snapshots/PageButtons.test.jsx.snap
@@ -12,9 +12,7 @@ exports[`PageButtons prev not null, next not null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={false}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -27,9 +25,7 @@ exports[`PageButtons prev not null, next not null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={false}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -54,9 +50,7 @@ exports[`PageButtons prev not null, next null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={false}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -69,9 +63,7 @@ exports[`PageButtons prev not null, next null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={true}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -96,9 +88,7 @@ exports[`PageButtons prev null, next not null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={true}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -111,9 +101,7 @@ exports[`PageButtons prev null, next not null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={false}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -138,9 +126,7 @@ exports[`PageButtons prev null, next null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={true}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
@@ -153,9 +139,7 @@ exports[`PageButtons prev null, next null 1`] = `
  <button
    className="btn btn-outline-primary"
    disabled={true}
-    onBlur={[Function]}
    onClick={[Function]}
-    onKeyDown={[Function]}
    style={
      Object {
        "margin": "20px",
--- a/src/components/PageButtons/index.jsx
+++ b/src/components/PageButtons/index.jsx
@@ -2,7 +2,6 @@ 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,
@@ -14,31 +13,29 @@ export default function PageButtons({
    >
      <Button
        style={{ margin: '20px' }}
-        buttonType="outline-primary"
+        variant="outline-primary"
        disabled={!prevPage}
-        onClick={() =>
-          getPrevNextGrades(
-            prevPage,
-            match.params.courseId,
-            selectedCohort,
-            selectedTrack,
-            selectedAssignmentType,
-          )}
+        onClick={() => getPrevNextGrades(
+          prevPage,
+          match.params.courseId,
+          selectedCohort,
+          selectedTrack,
+          selectedAssignmentType,
+        )}
      >
        Previous Page
      </Button>
      <Button
        style={{ margin: '20px' }}
-        buttonType="outline-primary"
+        variant="outline-primary"
        disabled={!nextPage}
-        onClick={() =>
-          getPrevNextGrades(
-            nextPage,
-            match.params.courseId,
-            selectedCohort,
-            selectedTrack,
-            selectedAssignmentType,
-          )}
+        onClick={() => getPrevNextGrades(
+          nextPage,
+          match.params.courseId,
+          selectedCohort,
+          selectedTrack,
+          selectedAssignmentType,
+        )}
      >
        Next Page
      </Button>
@@ -76,4 +73,3 @@ PageButtons.propTypes = {
    name: PropTypes.string,
  }),
 };
-
--- a/src/containers/GradebookPage/index.jsx
+++ b/src/containers/GradebookPage/index.jsx
@@ -18,7 +18,9 @@ import {
 } 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 {
+  initializeFilters, resetFilters, updateAssignmentFilter, updateAssignmentLimits, updateCourseGradeFilter,
+} from '../../data/actions/filters';
 import stateHasMastersTrack from '../../data/selectors/tracks';
 import {
  getBulkManagementHistory,
@@ -37,7 +39,7 @@ import LmsApiService from '../../data/services/LmsApiService';
 function shouldShowSpinner(state) {
  if (state.roles.canUserViewGradebook === true) {
    return state.grades.showSpinner;
-  } else if (state.roles.canUserViewGradebook === false) {
+  } if (state.roles.canUserViewGradebook === false) {
    return false;
  } // canUserViewGradebook === null
  return true;
@@ -64,7 +66,7 @@ const mapStateToProps = (state, ownProps) => (
    selectedAssignment: (state.filters.assignment || {}).label,
    format: state.grades.gradeFormat,
    showSuccess: state.grades.showSuccess,
-    errorFetchingGradeOverrideHistory: state.grades.errorFetchingOverrideHistory,
+    gradeOverrideHistoryError: state.grades.overrideHistoryError,
    prevPage: state.grades.prevPage,
    nextPage: state.grades.nextPage,
    assignmentTypes: state.assignmentTypes.results,
@@ -104,12 +106,12 @@ const mapStateToProps = (state, ownProps) => (
        courseGradeMin: formatMinCourseGrade(state.filters.courseGradeMin),
        courseGradeMax: formatMaxCourseGrade(state.filters.courseGradeMax),
      }),
-    bulkImportError: state.grades.bulkManagement &&
-      state.grades.bulkManagement.errorMessages ?
-      `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}` :
-      '',
-    uploadSuccess: !!(state.grades.bulkManagement &&
-                      state.grades.bulkManagement.uploadSuccess),
+    bulkImportError: state.grades.bulkManagement
+      && state.grades.bulkManagement.errorMessages
+      ? `Errors while processing: ${state.grades.bulkManagement.errorMessages.join(', ')}`
+      : '',
+    uploadSuccess: !!(state.grades.bulkManagement
+                      && state.grades.bulkManagement.uploadSuccess),
    showBulkManagement: stateHasMastersTrack(state) && state.config.bulkManagementAvailable,
    bulkManagementHistory: getBulkManagementHistory(state),
    totalUsersCount: state.grades.totalUsersCount,
--- a/src/data/actions/assignmentTypes.js
+++ b/src/data/actions/assignmentTypes.js
@@ -38,4 +38,3 @@ export {
  gotAssignmentTypes,
  errorFetchingAssignmentTypes,
 };
-
--- a/src/data/actions/assignmentTypes.test.js
+++ b/src/data/actions/assignmentTypes.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 { fetchAssignmentTypes } from './assignmentTypes';
 import {
@@ -14,9 +15,12 @@ import {
 import GOT_BULK_MANAGEMENT_CONFIG from '../constants/actionTypes/config';

 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
-apiClient.isAccessTokenExpired = jest.fn();
-apiClient.isAccessTokenExpired.mockReturnValue(false);
+
+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(() => {
--- a/src/data/actions/cohorts.test.js
+++ b/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,9 +13,12 @@ import {
 } from '../constants/actionTypes/cohorts';

 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
-apiClient.isAccessTokenExpired = jest.fn();
-apiClient.isAccessTokenExpired.mockReturnValue(false);
+
+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(() => {
--- a/src/data/actions/filters.js
+++ b/src/data/actions/filters.js
@@ -1,5 +1,7 @@
 import initialFilters from '../constants/filters';
-import { INITIALIZE_FILTERS, RESET_FILTERS, UPDATE_ASSIGNMENT_FILTER, UPDATE_ASSIGNMENT_LIMITS, UPDATE_COURSE_GRADE_LIMITS } from '../constants/actionTypes/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,
--- a/src/data/actions/grades.js
+++ b/src/data/actions/grades.js
@@ -1,3 +1,4 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
  STARTED_FETCHING_GRADES,
  FINISHED_FETCHING_GRADES,
@@ -23,11 +24,13 @@ import {
  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 { sortAlphaAsc, formatDateForDisplay } from './utils';
-import { formatMaxAssignmentGrade, formatMinAssignmentGrade, formatMaxCourseGrade, formatMinCourseGrade } from '../selectors/grades';
+import {
+  formatMaxAssignmentGrade, formatMinAssignmentGrade, formatMaxCourseGrade, formatMinCourseGrade,
+} from '../selectors/grades';
 import { getFilters } from '../selectors/filters';
-import apiClient from '../apiClient';

 const defaultAssignmentFilter = 'All';

@@ -40,7 +43,10 @@ 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 errorFetchingGradeOverrideHistory = () => ({ type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY });
+const errorFetchingGradeOverrideHistory = errorMessage => ({
+  type: ERROR_FETCHING_GRADE_OVERRIDE_HISTORY,
+  errorMessage,
+});

 const gotGrades = ({
  grades, cohort, track, assignmentType, headings, prev,
@@ -108,7 +114,6 @@ const uploadOverrideFailure = (courseId, error) => ({
  payload: { error },
 });

-
 const toggleGradeFormat = formatType => ({ type: TOGGLE_GRADE_FORMAT, formatType });

 const filterAssignmentType = filterType => (
@@ -191,27 +196,31 @@ const doneViewingAssignment = () => dispatch => dispatch({
  type: DONE_VIEWING_ASSIGNMENT,
 });
 const fetchGradeOverrideHistory = (subsectionId, userId) => (
-  dispatch =>
-    LmsApiService.fetchGradeOverrideHistory(subsectionId, userId)
-      .then(response => response.data)
-      .then((data) => {
+  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,
+          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,
+          originalGradeEarnedGraded: data.original_grade
+            ? data.original_grade.earned_graded : null,
+          originalGradePossibleGraded: data.original_grade
+            ? data.original_grade.possible_graded : null,
        }));
-      })
-      .catch(() => {
-        dispatch(errorFetchingGradeOverrideHistory());
-      })
+      } else {
+        dispatch(errorFetchingGradeOverrideHistory(data.error_message));
+      }
+    })
+    .catch(() => {
+      dispatch(errorFetchingGradeOverrideHistory(GRADE_OVERRIDE_HISTORY_ERROR_DEFAULT_MSG));
+    })
 );

 const fetchMatchingUserGrades = (
@@ -230,7 +239,7 @@ const fetchMatchingUserGrades = (
 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({
@@ -293,11 +302,10 @@ const submitFileUploadFormData = (courseId, formData) => (
 );

 const fetchBulkUpgradeHistory = courseId => (
-  dispatch =>
-    // todo add loading effect
-    LmsApiService.fetchGradeBulkOperationHistory(courseId).then((response) => {
-      dispatch(gotBulkHistory(response));
-    }).catch(() => dispatch(bulkHistoryError()))
+  // todo add loading effect
+  dispatch => LmsApiService.fetchGradeBulkOperationHistory(courseId).then(
+    (response) => { dispatch(gotBulkHistory(response)); },
+  ).catch(() => dispatch(bulkHistoryError()))
 );

 const updateGradesIfAssignmentGradeFiltersSet = (
--- a/src/data/actions/grades.test.js
+++ b/src/data/actions/grades.test.js
@@ -1,23 +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,
+  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);
-apiClient.isAccessTokenExpired = jest.fn();
-apiClient.isAccessTokenExpired.mockReturnValue(false);
+
+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(() => {
@@ -176,4 +183,92 @@ describe('actions', () => {
      });
    });
  });
+
+  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);
+        });
+      });
+    });
+  });
 });
--- a/src/data/actions/roles.test.js
+++ b/src/data/actions/roles.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 { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import apiClient from '../apiClient';
 import { configuration } from '../../config';
 import { getRoles } from './roles';
 import {
@@ -14,11 +15,13 @@ 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]);
-const axiosMock = new MockAdapter(apiClient);
-apiClient.isAccessTokenExpired = jest.fn();
-apiClient.isAccessTokenExpired.mockReturnValue(false);
+
+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';
--- a/src/data/actions/tracks.test.js
+++ b/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,9 +13,12 @@ import {
 } from '../constants/actionTypes/tracks';

 const mockStore = configureMockStore([thunk]);
-const axiosMock = new MockAdapter(apiClient);
-apiClient.isAccessTokenExpired = jest.fn();
-apiClient.isAccessTokenExpired.mockReturnValue(false);
+
+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(() => {
--- a/src/data/actions/utils.js
+++ b/src/data/actions/utils.js
@@ -27,4 +27,3 @@ const sortAlphaAsc = (gradeRowA, gradeRowB) => {
 };

 export { sortAlphaAsc, formatDateForDisplay };
-
--- a/src/data/apiClient.js
+++ b/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;
--- a/src/data/constants/actionTypes/assignmentTypes.js
+++ b/src/data/constants/actionTypes/assignmentTypes.js
@@ -9,4 +9,3 @@ export {
  ERROR_FETCHING_ASSIGNMENT_TYPES,
  GOT_ARE_GRADES_FROZEN,
 };
-
--- a/src/data/constants/errors.js
+++ b/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;
--- a/src/data/reducers/assignmentTypes.js
+++ b/src/data/reducers/assignmentTypes.js
@@ -11,7 +11,6 @@ const initialState = {
  errorFetching: false,
 };

-
 const assignmentTypes = (state = initialState, action) => {
  switch (action.type) {
    case GOT_ASSIGNMENT_TYPES:
@@ -45,4 +44,3 @@ const assignmentTypes = (state = initialState, action) => {
 };

 export default assignmentTypes;
-
--- a/src/data/reducers/cohorts.js
+++ b/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;
-
--- a/src/data/reducers/filters.js
+++ b/src/data/reducers/filters.js
@@ -1,6 +1,8 @@
 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 {
+  INITIALIZE_FILTERS, UPDATE_ASSIGNMENT_FILTER, UPDATE_ASSIGNMENT_LIMITS, UPDATE_COURSE_GRADE_LIMITS, RESET_FILTERS,
+} from '../constants/actionTypes/filters';

 import initialFilters from '../constants/filters';

@@ -15,8 +17,8 @@ const reducer = (state = initialState, action) => {
        ...state,
        assignmentType: action.filterType,
        assignment: (
-          action.filterType !== '' &&
-          (state.assignment || {}).type !== action.filterType)
+          action.filterType !== ''
+          && (state.assignment || {}).type !== action.filterType)
          ? '' : state.assignment,
      };
    case INITIALIZE_FILTERS:
--- a/src/data/reducers/grades.js
+++ b/src/data/reducers/grades.js
@@ -30,6 +30,7 @@ const initialState = {
  startedFetching: false,
  finishedFetching: false,
  errorFetching: false,
+  overrideHistoryError: '',
  gradeFormat: 'percent',
  showSuccess: false,
  prevPage: null,
@@ -83,14 +84,14 @@ const grades = (state = initialState, action) => {
        gradeOriginalPossibleAll: action.originalGradePossibleAll,
        gradeOriginalEarnedGraded: action.originalGradeEarnedGraded,
        gradeOriginalPossibleGraded: action.originalGradePossibleGraded,
-        errorFetchingOverrideHistory: false,
+        overrideHistoryError: '',
      };

    case ERROR_FETCHING_GRADE_OVERRIDE_HISTORY:
      return {
        ...state,
        finishedFetchingOverrideHistory: true,
-        errorFetchingOverrideHistory: true,
+        overrideHistoryError: action.errorMessage,
      };

    case STARTED_FETCHING_GRADES:
--- a/src/data/reducers/grades.test.js
+++ b/src/data/reducers/grades.test.js
@@ -6,6 +6,7 @@ import {
  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';
@@ -161,4 +162,17 @@ describe('grades reducer', () => {
      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);
+  });
 });
--- a/src/data/reducers/tracks.js
+++ b/src/data/reducers/tracks.js
@@ -10,7 +10,6 @@ const initialState = {
  errorFetching: false,
 };

-
 const tracks = (state = initialState, action) => {
  switch (action.type) {
    case GOT_TRACKS:
@@ -37,4 +36,3 @@ const tracks = (state = initialState, action) => {
 };

 export default tracks;
-
--- a/src/data/selectors/cohorts.js
+++ b/src/data/selectors/cohorts.js
@@ -1,4 +1,3 @@
-
 const getCohorts = state => state.cohorts.results || [];

 const getCohortById = (state, selectedCohortId) => {
@@ -6,7 +5,6 @@ const getCohortById = (state, selectedCohortId) => {
  return cohort;
 };

-const getCohortNameById = (state, selectedCohortId) =>
-  (getCohortById(state, selectedCohortId) || {}).name;
+const getCohortNameById = (state, selectedCohortId) => (getCohortById(state, selectedCohortId) || {}).name;

 export { getCohortById, getCohortNameById, getCohorts };
--- a/src/data/selectors/filters.js
+++ b/src/data/selectors/filters.js
@@ -1,7 +1,6 @@
 const getFilters = state => state.filters || {};

-const getAssignmentsFromResultsSubstate = results =>
-  (results[0] || {}).section_breakdown || [];
+const getAssignmentsFromResultsSubstate = results => (results[0] || {}).section_breakdown || [];

 const selectableAssignments = (state) => {
  const selectedAssignmentType = getFilters(state).assignmentType;
@@ -20,14 +19,12 @@ const chooseRelevantAssignmentData = assignment => ({
  id: assignment.module_id,
 });

-const selectableAssignmentLabels = state =>
-  selectableAssignments(state).map(chooseRelevantAssignmentData);
+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);
+  const selectedAssignment = sectionBreakdown.find(section => section.label === selectedAssignmentLabel);
  return selectedAssignment && selectedAssignment.category;
 };

--- a/src/data/selectors/grades.js
+++ b/src/data/selectors/grades.js
@@ -33,10 +33,8 @@ const transformHistoryEntry = (historyRow) => {
    ...rest,
  };
 };
-const getBulkManagementHistoryFromState = state =>
-  state.grades.bulkManagement.history || [];
-const getBulkManagementHistory = state =>
-  getBulkManagementHistoryFromState(state).map(transformHistoryEntry);
+const getBulkManagementHistoryFromState = state => state.grades.bulkManagement.history || [];
+const getBulkManagementHistory = state => getBulkManagementHistoryFromState(state).map(transformHistoryEntry);

 const headingMapper = (category, label = 'All') => {
  const filters = {
@@ -82,13 +80,12 @@ const getHeadings = (state) => {
  return headingMapper(type, assignment)(assignments);
 };

-const composeFilters = (...predicates) => (percentGrade, options = {}) =>
-  predicates.reduce((accum, predicate) => {
-    if (predicate(percentGrade, options)) {
-      return null;
-    }
-    return accum;
-  }, percentGrade);
+const composeFilters = (...predicates) => (percentGrade, options = {}) => predicates.reduce((accum, predicate) => {
+  if (predicate(percentGrade, options)) {
+    return null;
+  }
+  return accum;
+}, percentGrade);

 const percentGradeIsMax = percentGrade => (
  percentGrade === '100'
--- a/src/data/selectors/tracks.js
+++ b/src/data/selectors/tracks.js
@@ -1,7 +1,6 @@
 const compose = (...fns) => {
  const [firstFunc, ...rest] = fns.reverse();
-  return (...args) =>
-    rest.reduce((accum, fn) => fn(accum), firstFunc(...args));
+  return (...args) => rest.reduce((accum, fn) => fn(accum), firstFunc(...args));
 };

 const getTracks = state => state.tracks.results || [];
--- a/src/data/services/LmsApiService.js
+++ b/src/data/services/LmsApiService.js
@@ -1,8 +1,9 @@
-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 = 25

  static fetchGradebookData(courseId, searchText, cohort, track, options = {}) {
@@ -42,7 +43,7 @@ class LmsApiService {

    const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/?${queryParamString}`;

-    return apiClient.get(gradebookUrl);
+    return getAuthenticatedHttpClient().get(gradebookUrl);
  }

  static updateGradebookData(courseId, updateData) {
@@ -70,34 +71,34 @@ class LmsApiService {
        ]
    */
    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}?include_expired=1`;
-    return apiClient.get(trackUrl);
+    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 apiClient.get(rolesUrl);
+    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')
+      .filter(opt => options[opt]
+                   && options[opt] !== 'All')
      .map(opt => `${opt}=${encodeURIComponent(options[opt])}`)
      .join('&');
    return `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/?${queryParams}`;
@@ -106,8 +107,8 @@ class LmsApiService {
  static getInterventionExportCsvUrl(courseId, options = {}) {
    const queryParams = ['track', 'cohort', 'assignment', 'assignmentType', 'assignmentGradeMax',
      'assignmentGradeMin', 'courseGradeMin', 'courseGradeMax']
-      .filter(opt => options[opt] &&
-                   options[opt] !== 'All')
+      .filter(opt => options[opt]
+                   && options[opt] !== 'All')
      .map(opt => `${opt}=${encodeURIComponent(options[opt])}`)
      .join('&');
    return `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/intervention?${queryParams}`;
@@ -117,7 +118,7 @@ class LmsApiService {

  static uploadGradeCsv(courseId, formData) {
    const fileUploadUrl = LmsApiService.getGradeImportCsvUrl(courseId);
-    return apiClient.post(fileUploadUrl, formData).then((result) => {
+    return getAuthenticatedHttpClient().post(fileUploadUrl, formData).then((result) => {
      if (result.status === 200 && !result.data.error_messages.length) {
        return result.data;
      }
@@ -127,12 +128,12 @@ class LmsApiService {

  static fetchGradeBulkOperationHistory(courseId) {
    const url = `${LmsApiService.baseUrl}/api/bulk_grades/course/${courseId}/history/`;
-    return apiClient.get(url).then(response => response.data).catch(() => Promise.reject(Error('unhandled response error')));
+    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 apiClient.get(historyUrl);
+    return getAuthenticatedHttpClient().get(historyUrl);
  }
 }

--- a/src/data/store.js
+++ b/src/data/store.js
@@ -90,7 +90,6 @@ const eventsMap = {

 const segmentMiddleware = createMiddleware(eventsMap, Segment());

-
 const store = createStore(
  reducers,
  composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware, segmentMiddleware)),
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,9 +1,12 @@
-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 from '@edx/frontend-component-footer';
+import SiteFooter, { messages as footerMessages } from '@edx/frontend-component-footer';
+import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
 import { IntlProvider } from 'react-intl';

 import {
@@ -14,7 +17,6 @@ import {
 } 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';
@@ -49,7 +51,7 @@ const socialLinks = [
 ];

 const App = () => (
-  <IntlProvider>
+  <IntlProvider locale="en">
    <Provider store={store}>
      <Router>
        <div>
@@ -86,9 +88,13 @@ const App = () => (
  </IntlProvider>
 );

-apiClient.ensurePublicOrAuthenticationAndCookies(
-  window.location.pathname,
-  () => {
-    ReactDOM.render(<App />, document.getElementById('root'));
-  },
-);
+subscribe(APP_READY, () => {
+  ReactDOM.render(<App />, document.getElementById('root'));
+});
+
+initialize({
+  messages: [
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
+});
Author	SHA1	Message	Date
Ben Warzeski	dbe3dfa323	Merge pull request #146 from muselesscreator/locked_headers_alone lock header row and column	2020-10-22 09:29:48 -04:00
Ben Warzeski	9e0c326dfc	lock header row and column	2020-10-21 17:19:26 -04:00
Jansen Kantor	9bc86fc4f6	display grade override history error from lms (#142 ) * display grade override history error from lms * add error constants file * quality * code review * fix stuff * npm i -S regenerator-runtime	2020-09-08 17:14:21 -04:00
Ben Warzeski	aa39fcc7e0	Merge pull request #141 from muselesscreator/req_update_v2 Requirements Update	2020-09-02 09:57:26 -04:00
Ben Warzeski	f7fcaef03a	remove old webpack config	2020-08-28 10:57:32 -04:00
Ben Warzeski	6f9c051ded	bump version in package.json	2020-08-26 14:11:37 -04:00
Ben Warzeski	dabd923b10	linting	2020-08-26 14:11:02 -04:00
Ben Warzeski	da60ff9f1d	p1	2020-08-26 14:11:02 -04:00
Ben Warzeski	f9d5987488	Merge pull request #140 from muselesscreator/table_cell_spacing fix gradebook table cell spacing	2020-08-12 10:17:13 -04:00
Ben Warzeski	493d5df8fa	fix gradebook table cell spacing	2020-08-11 15:07:58 -04:00
Kyle McCormick	cf4f806d76	Update openedx.yaml (#137 ) * Reflects new sub-team-based ownership model. * Puts `owner` value in line with updated OEP-2. * Also updates values of `tags` and `oeps`.	2020-04-08 18:33:05 -04:00
Simon Chen	ee274a2fb0	Merge pull request #136 from edx/schen/gradebook_node12 Upgrade node build version from 8 to 12	2019-12-06 11:39:06 -05:00
Alex Dusenbery	baa26f3b20	Update travis email recipients.	2019-12-06 11:03:01 -05:00
Simon Chen	0f7ffcbec1	Upgrade node build version from 8 to 12	2019-12-06 10:55:01 -05:00
Thomas Tracy	f5616f77fd	Remove commented scss imports	2019-10-21 14:55:57 -04:00
Thomas Tracy	ecf5ef4664	Upgrade gradebook from paragon 4 to 7	2019-10-21 14:55:57 -04:00