Merge pull request #46 from douglashall/douglashall/fix_logo

fix(header): fix edX logo in header

.gitignore

@@ -6,4 +6,8 @@ coverage
 
 dist/
 
-.python-version
+### pyenv ###
+.python-version
+
+### Emacs ###
+*~

Makefile

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

README.md

@@ -29,6 +29,26 @@ If you don't, you can see the log messages for the docker container by executing
 
 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.
 
+## 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
+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'
+```
+
+There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
+
+1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
+check the ``enabled`` and ``enabled for all courses`` boxes.
+
+2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
+
+3. Waffle_utils > Waffle flag course overrides.  You want to activate this flag for any course
+in which you'd like to enable the gradebook.  Add a course override flag using a course id and the flag name
+``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.
+
 ## Directory Structure
 
 * `config`
@@ -46,61 +66,6 @@ Note that `make up-detached` executes the `npm run start` script which will hot-
     * `constants`
     * `reducers`
       * Directory for `Redux` reducers
-* [`.babelrc`](#babelrc)
-* [`.dockerignore`](#dockerignore)
-* [`.eslintignore`](#eslintignore)
-* [`.eslintrc.js`](#eslintrcjs)
-* `.gitignore`
-* [`npmignore`](#npmignore)
-* [`.travis.yml`](#travisyml)
-* `docker-compose.yml`
-* `Dockerfile`
-* `LICENSE`
-* `Makefile`
-* `package-lock.json`
-* [`package.json`](#packagejson)
-
-### `.babelrc`
-
-We use [`Babel`](https://babeljs.io/) to transpile `ES2015+` JavaScript to `ES5` JavaScript. `ES5` JavaScript has [greater browser compatibility](http://kangax.github.io/compat-table/es5/) than [`ES2015+`](http://kangax.github.io/compat-table/es6/).
-
-The `.babelrc` file is used to specify a particular configuration - for example, we use the [`babel-preset-react`](https://babeljs.io/docs/plugins/preset-react/), which, among other things, allows `babel` to parse `JSX`.
-
-### `.dockerignore`
-
-The important thing to remember is to add the `node_modules` directory to `.dockerignore` - for more information [see the Docker documentation](https://docs.docker.com/engine/reference/builder/#dockerignore-file).
-
-### `.eslintignore`
-
-We use [`eslint`](https://eslint.org/) for our `JavaScript` linting needs. The `.eslintignore` file is used to [specify files or directories to, well, ignore](https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories).
-
-While `eslint` automatically ignores `node_modules`, we like to add it to the `.eslintignore` just for the added explicitness. In addition, you probably want to add the directory for your compiled files (in our case, `./dist`) and your coverage directory (in our case, `./coverage`).
-
-### `.eslintrc`
-
-This is where the actual `eslint` configuration is specified. All `edX` JavaScript projects should extend either the [`eslint-config-edx`](https://github.com/edx/eslint-config-edx/blob/master/packages/eslint-config-edx/README.md) or [`eslint-config-edx-es5`](https://github.com/edx/eslint-config-edx/blob/master/packages/eslint-config-edx-es5/README.md) configurations (for `ES2015+` and `ES5` JavaScript, respectively). Both configurations can be found in [the `eslint-config-edx` repository](https://github.com/edx/eslint-config-edx).
-
-### `.npmignore`
-
-We are not currently publishing this package to [`npm`](https://www.npmjs.com/). If we did, we would want to exclude certain files from getting uploaded to `npm` (like our coverage files, for example). For more information, see [the `npm` documentation](https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package).
-
-### `.travis.yml`
-
-We use [`Travis CI`](https://travis-ci.org/) to build (and deploy) our application. The `.travis.yml` file specifies the configuration for `Travis` builds. For more information, see [the `Travis` documentation](https://docs.travis-ci.com/user/customizing-the-build/).
-
-### `package.json`
-
-Arguably, one of the **most important files in an `npm`-based application**, the `package.json` file specifies everything from the `name` of the application, were it to be published to `npm`, to it's `dependencies`.
-
-For more information, see [the `npm` documentation](https://docs.npmjs.com/files/package.json).
-
-## Helpful Applications
-
-### [`Greenkeeper`](https://greenkeeper.io/)
-
-[`Greenkeeper`](https://greenkeeper.io/) is basically a `GitHub` application that handles `npm` dependencies. It will automatically open PRs with `package.json` updates when new versions of your `npm` dependencies get published. There are ways to also automatically keep the `package-lock.json` in-line, in the same PR, using [`greenkeeper-lockfile`].
-
-For more information, see [the `Greenkeeper` documentation](https://greenkeeper.io/docs.html#what-greenkeeper-does).
 
 ## Authentication with backend API services
 

config/webpack.dev.config.js

@@ -64,6 +64,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
@@ -73,6 +95,22 @@ module.exports = Merge.smart(commonConfig, {
       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

config/webpack.prod.config.js

@@ -3,6 +3,7 @@
 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');
 
@@ -69,6 +70,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // New in Webpack 4. Replaces CommonChunksPlugin. Extract common modules among all chunks to one
@@ -91,5 +114,21 @@ module.exports = Merge.smart(commonConfig, {
       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,
+    }),
   ],
 });

package-lock.json

@@ -2965,18 +2965,20 @@
       }
     },
     "@edx/frontend-auth": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-auth/-/frontend-auth-1.0.3.tgz",
-      "integrity": "sha512-uHrE9o3ft2CeOYU76RiWoWj/kZZSoD96CSjqVNjLZfcMyCp6jsZCtu6GW8cESSBM4wiy0Msmhwp5MUf38QQ/Xg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-auth/-/frontend-auth-1.2.1.tgz",
+      "integrity": "sha512-NEc+rAJq5HJ9UACPirezpwTp5yhX9G2AQDPfk1hW4ceEF7BFRMIfzb+nJqmTJkEX/37yRVYUfQFLW+z2j1ZRcw==",
       "requires": {
         "axios": "0.18.0",
         "jwt-decode": "2.2.0",
         "prop-types": "15.6.1",
-        "react": "16.5.2",
+        "pubsub-js": "1.7.0",
+        "react": "16.6.3",
         "react-redux": "5.0.7",
         "react-router-dom": "4.3.1",
-        "redux": "4.0.0",
-        "universal-cookie": "3.0.4"
+        "redux": "4.0.1",
+        "universal-cookie": "3.0.6",
+        "url-parse": "1.4.4"
       },
       "dependencies": {
         "invariant": {
@@ -2987,15 +2989,20 @@
             "loose-envify": "1.3.1"
           }
         },
+        "querystringify": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.0.tgz",
+          "integrity": "sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg=="
+        },
         "react": {
-          "version": "16.5.2",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
-          "integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
+          "version": "16.6.3",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
+          "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
           "requires": {
             "loose-envify": "1.3.1",
             "object-assign": "4.1.1",
             "prop-types": "15.6.2",
-            "schedule": "0.5.0"
+            "scheduler": "0.11.2"
           },
           "dependencies": {
             "prop-types": {
@@ -3037,12 +3044,31 @@
           }
         },
         "redux": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz",
-          "integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.1.tgz",
+          "integrity": "sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==",
           "requires": {
-            "loose-envify": "1.3.1",
+            "loose-envify": "1.4.0",
             "symbol-observable": "1.2.0"
+          },
+          "dependencies": {
+            "loose-envify": {
+              "version": "1.4.0",
+              "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+              "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+              "requires": {
+                "js-tokens": "3.0.2"
+              }
+            }
+          }
+        },
+        "url-parse": {
+          "version": "1.4.4",
+          "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",
+          "integrity": "sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==",
+          "requires": {
+            "querystringify": "2.1.0",
+            "requires-port": "1.0.0"
           }
         },
         "warning": {
@@ -3056,9 +3082,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.5.2.tgz",
-      "integrity": "sha512-ZBGG0Hja1RP06J8cZEWpTV9jfbZwlB1SBcvVBy4ZlcXvtXiIwQhlSnmMFX0lHw5sroz3vaE9tJHPnZBXlmfqwA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.7.2.tgz",
+      "integrity": "sha512-M1l/0yVc2291jqyVpOHZkaq3Hz3A2ua87P7WrxM4vk6I8HAqNJyWRasa8rPYEGJ6hz0wAhA2Eemuq7YlMHaBVA==",
       "requires": {
         "@edx/edx-bootstrap": "1.0.0",
         "@sambego/storybook-styles": "1.0.0",
@@ -3069,7 +3095,7 @@
         "font-awesome": "4.7.0",
         "mailto-link": "1.0.0",
         "prop-types": "15.6.1",
-        "react": "16.6.0",
+        "react": "16.6.3",
         "react-dom": "16.2.0",
         "react-element-proptypes": "1.0.0",
         "react-proptype-conditional-require": "1.0.4",
@@ -3093,14 +3119,14 @@
           "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
         },
         "react": {
-          "version": "16.6.0",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.6.0.tgz",
-          "integrity": "sha512-zJPnx/jKtuOEXCbQ9BKaxDMxR0001/hzxXwYxG8septeyYGfsgAei6NgfbVgOhbY1WOP2o3VPs/E9HaN+9hV3Q==",
+          "version": "16.6.3",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
+          "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
           "requires": {
             "loose-envify": "1.3.1",
             "object-assign": "4.1.1",
             "prop-types": "15.6.2",
-            "scheduler": "0.10.0"
+            "scheduler": "0.11.2"
           },
           "dependencies": {
             "prop-types": {
@@ -3514,9 +3540,9 @@
       }
     },
     "@types/cookie": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha512-64Uv+8bTRVZHlbB8eXQgMP9HguxPgnOOIYrQpwHWrtLDrtcG/lILKhUl7bV65NSOIJ9dXGYD7skQFXzhL8tk1A=="
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.2.tgz",
+      "integrity": "sha512-aHQA072E10/8iUQsPH7mQU/KUyQBZAGzTVRCUvnSz8mSvbrYsP4xEO2RSA0Pjltolzi0j8+8ixrm//Hr4umPzw=="
     },
     "@types/node": {
       "version": "9.4.7",
@@ -3828,6 +3854,21 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "arch": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz",
+      "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
+      "dev": true
+    },
+    "archive-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
+      "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
+      "dev": true,
+      "requires": {
+        "file-type": "4.4.0"
+      }
+    },
     "are-we-there-yet": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
@@ -4131,10 +4172,19 @@
       "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
-        "follow-redirects": "1.5.8",
+        "follow-redirects": "1.5.10",
         "is-buffer": "1.1.6"
       }
     },
+    "axios-mock-adapter": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.15.0.tgz",
+      "integrity": "sha1-+8BoJdgwLJXDM00hAju6mWJV1F0=",
+      "dev": true,
+      "requires": {
+        "deep-equal": "1.0.1"
+      }
+    },
     "axobject-query": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
@@ -5234,6 +5284,239 @@
       "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
       "dev": true
     },
+    "bin-build": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz",
+      "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==",
+      "dev": true,
+      "requires": {
+        "decompress": "4.2.0",
+        "download": "6.2.5",
+        "execa": "0.7.0",
+        "p-map-series": "1.0.0",
+        "tempfile": "2.0.0"
+      }
+    },
+    "bin-check": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
+      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
+      "dev": true,
+      "requires": {
+        "execa": "0.7.0",
+        "executable": "4.1.1"
+      }
+    },
+    "bin-version": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.0.0.tgz",
+      "integrity": "sha512-Ekhwm6AUiMbZ1LgVCNMkgjovpMR30FyQN74laAW9gs0NPjZR5gdY0ARNB0YsQG8GOme3CsHbxmeyq/7Ofq6QYQ==",
+      "dev": true,
+      "requires": {
+        "execa": "1.0.0",
+        "find-versions": "3.0.0"
+      },
+      "dependencies": {
+        "array-uniq": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-2.0.0.tgz",
+          "integrity": "sha512-O3QZEr+3wDj7otzF7PjNGs6CA3qmYMLvt5xGkjY/V0VxS+ovvqVo/5wKM/OVOAyuX4DTh9H31zE/yKtO66hTkg==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.4",
+            "path-key": "2.0.1",
+            "semver": "5.5.0",
+            "shebang-command": "1.2.0",
+            "which": "1.3.0"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "6.0.5",
+            "get-stream": "4.1.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        },
+        "find-versions": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.0.0.tgz",
+          "integrity": "sha512-IUvtItVFNmTtKoB0PRfbkR0zR9XMG5rWNO3qI1S8L0zdv+v2gqzM0pAunloxqbqAfT8w7bg8n/5gHzTXte8H5A==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "2.0.0",
+            "semver-regex": "2.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "3.0.0"
+          }
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "1.4.1",
+            "once": "1.4.0"
+          }
+        },
+        "semver-regex": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
+          "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
+          "dev": true
+        }
+      }
+    },
+    "bin-version-check": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
+      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
+      "dev": true,
+      "requires": {
+        "bin-version": "3.0.0",
+        "semver": "5.6.0",
+        "semver-truncate": "1.1.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "dev": true
+        }
+      }
+    },
+    "bin-wrapper": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz",
+      "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==",
+      "dev": true,
+      "requires": {
+        "bin-check": "4.1.0",
+        "bin-version-check": "4.0.0",
+        "download": "7.1.0",
+        "import-lazy": "3.1.0",
+        "os-filter-obj": "2.0.0",
+        "pify": "4.0.1"
+      },
+      "dependencies": {
+        "download": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
+          "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
+          "dev": true,
+          "requires": {
+            "archive-type": "4.0.0",
+            "caw": "2.0.1",
+            "content-disposition": "0.5.2",
+            "decompress": "4.2.0",
+            "ext-name": "5.0.0",
+            "file-type": "8.1.0",
+            "filenamify": "2.1.0",
+            "get-stream": "3.0.0",
+            "got": "8.3.2",
+            "make-dir": "1.2.0",
+            "p-event": "2.1.0",
+            "pify": "3.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+              "dev": true
+            }
+          }
+        },
+        "file-type": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
+          "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
+          "dev": true
+        },
+        "got": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
+          "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
+          "dev": true,
+          "requires": {
+            "@sindresorhus/is": "0.7.0",
+            "cacheable-request": "2.1.4",
+            "decompress-response": "3.3.0",
+            "duplexer3": "0.1.4",
+            "get-stream": "3.0.0",
+            "into-stream": "3.1.0",
+            "is-retry-allowed": "1.1.0",
+            "isurl": "1.0.0",
+            "lowercase-keys": "1.0.0",
+            "mimic-response": "1.0.0",
+            "p-cancelable": "0.4.1",
+            "p-timeout": "2.0.1",
+            "pify": "3.0.0",
+            "safe-buffer": "5.1.1",
+            "timed-out": "4.0.1",
+            "url-parse-lax": "3.0.0",
+            "url-to-options": "1.0.1"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+              "dev": true
+            }
+          }
+        },
+        "import-lazy": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
+          "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
+          "dev": true
+        },
+        "p-cancelable": {
+          "version": "0.4.1",
+          "resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+          "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
+          "dev": true
+        },
+        "p-event": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.1.0.tgz",
+          "integrity": "sha512-sDEpDVnzLGlJj3k590uUdpfEUySP5yAYlvfTCu5hTDvSTXQVecYWKcEwdO49PrZlnJ5wkfAvtawnno/jyXeqvA==",
+          "dev": true,
+          "requires": {
+            "p-timeout": "2.0.1"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        }
+      }
+    },
     "binary-extensions": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.11.0.tgz",
@@ -5246,6 +5529,16 @@
       "integrity": "sha512-XBaoWE9RW8pPdPQNibZsW2zh8TW6gcarXp1FZPwT8Uop8ScSNldJEWf2k9l3HeTqdrEwsOsFcq74RiJECW34yA==",
       "dev": true
     },
+    "bl": {
+      "version": "1.2.2",
+      "resolved": "http://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.5",
+        "safe-buffer": "5.1.1"
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -5549,6 +5842,34 @@
         }
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dev": true,
+      "requires": {
+        "buffer-alloc-unsafe": "1.1.0",
+        "buffer-fill": "1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
+      "dev": true
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -5833,6 +6154,18 @@
         "isarray": "0.0.1"
       }
     },
+    "caw": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz",
+      "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
+      "dev": true,
+      "requires": {
+        "get-proxy": "2.1.0",
+        "isurl": "1.0.0",
+        "tunnel-agent": "0.6.0",
+        "url-to-options": "1.0.1"
+      }
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -5886,6 +6219,7 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
+        "fsevents": "1.2.4",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -6422,6 +6756,16 @@
         "typedarray": "0.0.6"
       }
     },
+    "config-chain": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+      "dev": true,
+      "requires": {
+        "ini": "1.3.5",
+        "proto-list": "1.2.4"
+      }
+    },
     "configstore": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
@@ -6468,6 +6812,12 @@
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
+    "console-stream": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
+      "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
+      "dev": true
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -7046,6 +7396,12 @@
         "nth-check": "1.0.1"
       }
     },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
     "css-selector-tokenizer": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
@@ -7070,6 +7426,22 @@
         }
       }
     },
+    "css-tree": {
+      "version": "1.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
+      "integrity": "sha512-joNNW1gCp3qFFzj4St6zk+Wh/NBv0vM5YbEreZk0SD4S23S+1xBKb6cLDg2uj4P4k/GUMlIm6cKIDqIG+vdt0w==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "1.1.4",
+        "source-map": "0.5.7"
+      }
+    },
+    "css-url-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz",
+      "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
+      "dev": true
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -7156,6 +7528,17 @@
         "array-find-index": "1.0.2"
       }
     },
+    "cwebp-bin": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cwebp-bin/-/cwebp-bin-5.0.0.tgz",
+      "integrity": "sha512-7//DAQG0yFr+YGrQ0of50sPlPm+8mIRv1TGxXtlOeq1S0Y56iY2lHlX/aLz+AOTWH/2YVNthNtH97pxRl7q33A==",
+      "dev": true,
+      "requires": {
+        "bin-build": "3.0.0",
+        "bin-wrapper": "4.1.0",
+        "logalot": "2.1.0"
+      }
+    },
     "cycle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
@@ -7243,8 +7626,23 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "decompress": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.0.tgz",
+      "integrity": "sha1-eu3YVCflqS2s/lVnSnxQXpbQH50=",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "4.1.1",
+        "decompress-tarbz2": "4.1.1",
+        "decompress-targz": "4.1.1",
+        "decompress-unzip": "4.0.1",
+        "graceful-fs": "4.1.11",
+        "make-dir": "1.2.0",
+        "pify": "2.3.0",
+        "strip-dirs": "2.1.0"
+      }
     },
     "decompress-response": {
       "version": "3.3.0",
@@ -7255,6 +7653,95 @@
         "mimic-response": "1.0.0"
       }
     },
+    "decompress-tar": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
+      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
+      "dev": true,
+      "requires": {
+        "file-type": "5.2.0",
+        "is-stream": "1.1.0",
+        "tar-stream": "1.6.2"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+          "dev": true
+        }
+      }
+    },
+    "decompress-tarbz2": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
+      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "4.1.1",
+        "file-type": "6.2.0",
+        "is-stream": "1.1.0",
+        "seek-bzip": "1.0.5",
+        "unbzip2-stream": "1.3.1"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
+          "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
+          "dev": true
+        }
+      }
+    },
+    "decompress-targz": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
+      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "4.1.1",
+        "file-type": "5.2.0",
+        "is-stream": "1.1.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+          "dev": true
+        }
+      }
+    },
+    "decompress-unzip": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
+      "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
+      "dev": true,
+      "requires": {
+        "file-type": "3.9.0",
+        "get-stream": "2.3.1",
+        "pify": "2.3.0",
+        "yauzl": "2.10.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "3.9.0",
+          "resolved": "http://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
+          "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
+          "dev": true
+        },
+        "get-stream": {
+          "version": "2.3.1",
+          "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
+          "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
+          "dev": true,
+          "requires": {
+            "object-assign": "4.1.1",
+            "pinkie-promise": "2.0.1"
+          }
+        }
+      }
+    },
     "deep-diff": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
@@ -7581,6 +8068,79 @@
         "is-obj": "1.0.1"
       }
     },
+    "download": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
+      "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
+      "dev": true,
+      "requires": {
+        "caw": "2.0.1",
+        "content-disposition": "0.5.2",
+        "decompress": "4.2.0",
+        "ext-name": "5.0.0",
+        "file-type": "5.2.0",
+        "filenamify": "2.1.0",
+        "get-stream": "3.0.0",
+        "got": "7.1.0",
+        "make-dir": "1.2.0",
+        "p-event": "1.3.0",
+        "pify": "3.0.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+          "dev": true
+        },
+        "got": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
+          "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
+          "dev": true,
+          "requires": {
+            "decompress-response": "3.3.0",
+            "duplexer3": "0.1.4",
+            "get-stream": "3.0.0",
+            "is-plain-obj": "1.1.0",
+            "is-retry-allowed": "1.1.0",
+            "is-stream": "1.1.0",
+            "isurl": "1.0.0",
+            "lowercase-keys": "1.0.0",
+            "p-cancelable": "0.3.0",
+            "p-timeout": "1.2.1",
+            "safe-buffer": "5.1.1",
+            "timed-out": "4.0.1",
+            "url-parse-lax": "1.0.0",
+            "url-to-options": "1.0.1"
+          }
+        },
+        "p-timeout": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
+          "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
+          "dev": true,
+          "requires": {
+            "p-finally": "1.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        },
+        "url-parse-lax": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+          "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+          "dev": true,
+          "requires": {
+            "prepend-http": "1.0.4"
+          }
+        }
+      }
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -8395,6 +8955,27 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "exec-buffer": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/exec-buffer/-/exec-buffer-3.2.0.tgz",
+      "integrity": "sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==",
+      "dev": true,
+      "requires": {
+        "execa": "0.7.0",
+        "p-finally": "1.0.0",
+        "pify": "3.0.0",
+        "rimraf": "2.6.2",
+        "tempfile": "2.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "exec-sh": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.1.tgz",
@@ -8419,6 +9000,15 @@
         "strip-eof": "1.0.0"
       }
     },
+    "executable": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
+      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
+      "dev": true,
+      "requires": {
+        "pify": "2.3.0"
+      }
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -8541,6 +9131,25 @@
         }
       }
     },
+    "ext-list": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
+      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.33.0"
+      }
+    },
+    "ext-name": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
+      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
+      "dev": true,
+      "requires": {
+        "ext-list": "2.2.2",
+        "sort-keys-length": "1.0.1"
+      }
+    },
     "extend": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
@@ -8972,6 +9581,15 @@
         }
       }
     },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "1.2.0"
+      }
+    },
     "fetch-mock": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/fetch-mock/-/fetch-mock-6.3.0.tgz",
@@ -9019,12 +9637,35 @@
         "schema-utils": "0.4.5"
       }
     },
+    "file-type": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
+      "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
+      "dev": true
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
       "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
       "dev": true
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-2.1.0.tgz",
+      "integrity": "sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "2.0.0",
+        "strip-outer": "1.0.1",
+        "trim-repeated": "1.0.0"
+      }
+    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
@@ -9143,9 +9784,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.8.tgz",
-      "integrity": "sha512-sy1mXPmv7kLAMKW/8XofG7o9T+6gAjzdZK4AJF6ryqQYUa/hnzgiypoeUecZ53x7XiqKNEpNqLtS97MshW2nxg==",
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
       "requires": {
         "debug": "3.1.0"
       },
@@ -9233,6 +9874,12 @@
         "readable-stream": "2.3.5"
       }
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
     "fs-readdir-recursive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
@@ -9257,6 +9904,535 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
+    "fsevents": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
+      "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "nan": "2.9.2",
+        "node-pre-gyp": "0.10.0"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.3.6"
+          }
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "balanced-match": "1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "chownr": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "fs-minipass": {
+          "version": "1.2.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minipass": "2.2.4"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.2.0",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "iconv-lite": {
+          "version": "0.4.21",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": "2.1.2"
+          }
+        },
+        "ignore-walk": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimatch": "3.0.4"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true,
+          "dev": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.11"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true,
+          "dev": true
+        },
+        "minipass": {
+          "version": "2.2.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
+          }
+        },
+        "minizlib": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minipass": "2.2.4"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "needle": {
+          "version": "2.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.9",
+            "iconv-lite": "0.4.21",
+            "sax": "1.2.4"
+          }
+        },
+        "node-pre-gyp": {
+          "version": "0.10.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.3",
+            "mkdirp": "0.5.1",
+            "needle": "2.2.0",
+            "nopt": "4.0.1",
+            "npm-packlist": "1.1.10",
+            "npmlog": "4.1.2",
+            "rc": "1.2.7",
+            "rimraf": "2.6.2",
+            "semver": "5.5.0",
+            "tar": "4.4.1"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.1",
+            "osenv": "0.1.5"
+          }
+        },
+        "npm-bundled": {
+          "version": "1.0.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "npm-packlist": {
+          "version": "1.1.10",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ignore-walk": "3.0.1",
+            "npm-bundled": "1.0.3"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.7",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.5.1",
+            "ini": "1.3.5",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "safer-buffer": {
+          "version": "2.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "sax": {
+          "version": "1.2.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.5.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "4.4.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chownr": "1.0.1",
+            "fs-minipass": "1.2.5",
+            "minipass": "2.2.4",
+            "minizlib": "1.1.0",
+            "mkdirp": "0.5.1",
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
+          }
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "yallist": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -9358,6 +10534,15 @@
       "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=",
       "dev": true
     },
+    "get-proxy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz",
+      "integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
+      "dev": true,
+      "requires": {
+        "npm-conf": "1.1.3"
+      }
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -9445,6 +10630,67 @@
         }
       }
     },
+    "gifsicle": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/gifsicle/-/gifsicle-4.0.1.tgz",
+      "integrity": "sha512-A/kiCLfDdV+ERV/UB+2O41mifd+RxH8jlRG8DMxZO84Bma/Fw0htqZ+hY2iaalLRNyUu7tYZQslqUBJxBggxbg==",
+      "dev": true,
+      "requires": {
+        "bin-build": "3.0.0",
+        "bin-wrapper": "4.1.0",
+        "execa": "1.0.0",
+        "logalot": "2.1.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.4",
+            "path-key": "2.0.1",
+            "semver": "5.5.0",
+            "shebang-command": "1.2.0",
+            "which": "1.3.0"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "6.0.5",
+            "get-stream": "4.1.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "3.0.0"
+          }
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "1.4.1",
+            "once": "1.4.0"
+          }
+        }
+      }
+    },
     "git-log-parser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/git-log-parser/-/git-log-parser-1.2.0.tgz",
@@ -9666,6 +10912,12 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+      "dev": true
+    },
     "grouped-queue": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/grouped-queue/-/grouped-queue-0.3.3.tgz",
@@ -10365,6 +11617,319 @@
       "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA==",
       "dev": true
     },
+    "image-webpack-loader": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-4.6.0.tgz",
+      "integrity": "sha512-VXs3iNThLW8JzIytrCXI6DWATaGU2kj9G5Vzq5xnyyfhznG45DfIa33WnSjYC4epzjLAs/W5lA38Va8qn8Apdw==",
+      "dev": true,
+      "requires": {
+        "imagemin": "5.3.1",
+        "imagemin-gifsicle": "6.0.1",
+        "imagemin-mozjpeg": "8.0.0",
+        "imagemin-optipng": "6.0.0",
+        "imagemin-pngquant": "6.0.0",
+        "imagemin-svgo": "7.0.0",
+        "imagemin-webp": "5.0.0",
+        "loader-utils": "1.1.0",
+        "object-assign": "4.1.1"
+      }
+    },
+    "imagemin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/imagemin/-/imagemin-5.3.1.tgz",
+      "integrity": "sha1-8Zwu7h5xumxlWMUV+fyWaAGJptQ=",
+      "dev": true,
+      "requires": {
+        "file-type": "4.4.0",
+        "globby": "6.1.0",
+        "make-dir": "1.2.0",
+        "p-pipe": "1.2.0",
+        "pify": "2.3.0",
+        "replace-ext": "1.0.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "1.0.2",
+            "glob": "7.1.2",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "replace-ext": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+          "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
+          "dev": true
+        }
+      }
+    },
+    "imagemin-gifsicle": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/imagemin-gifsicle/-/imagemin-gifsicle-6.0.1.tgz",
+      "integrity": "sha512-kuu47c6iKDQ6R9J10xCwL0lgs0+sMz3LRHqRcJ2CRBWdcNmo3T5hUaM8hSZfksptZXJLGKk8heSAvwtSdB1Fng==",
+      "dev": true,
+      "requires": {
+        "exec-buffer": "3.2.0",
+        "gifsicle": "4.0.1",
+        "is-gif": "3.0.0"
+      }
+    },
+    "imagemin-mozjpeg": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-mozjpeg/-/imagemin-mozjpeg-8.0.0.tgz",
+      "integrity": "sha512-+EciPiIjCb8JWjQNr1q8sYWYf7GDCNDxPYnkD11TNIjjWNzaV+oTg4DpOPQjl5ZX/KRCPMEgS79zLYAQzLitIA==",
+      "dev": true,
+      "requires": {
+        "execa": "1.0.0",
+        "is-jpg": "2.0.0",
+        "mozjpeg": "6.0.1"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.4",
+            "path-key": "2.0.1",
+            "semver": "5.5.0",
+            "shebang-command": "1.2.0",
+            "which": "1.3.0"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "6.0.5",
+            "get-stream": "4.1.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "3.0.0"
+          }
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "1.4.1",
+            "once": "1.4.0"
+          }
+        }
+      }
+    },
+    "imagemin-optipng": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-optipng/-/imagemin-optipng-6.0.0.tgz",
+      "integrity": "sha512-FoD2sMXvmoNm/zKPOWdhKpWdFdF9qiJmKC17MxZJPH42VMAp17/QENI/lIuP7LCUnLVAloO3AUoTSNzfhpyd8A==",
+      "dev": true,
+      "requires": {
+        "exec-buffer": "3.2.0",
+        "is-png": "1.1.0",
+        "optipng-bin": "5.1.0"
+      }
+    },
+    "imagemin-pngquant": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-6.0.0.tgz",
+      "integrity": "sha512-lZ87Y7u0UaJuhtQZ2wkKyxsFeNTEv1C5xxoHN7jFD89rKpiC/Qu2cIYGAOypOsxqAxWlsHaoz0hJlFFdCnG6Zg==",
+      "dev": true,
+      "requires": {
+        "execa": "0.10.0",
+        "is-png": "1.1.0",
+        "is-stream": "1.1.0",
+        "pngquant-bin": "5.0.1"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.4",
+            "path-key": "2.0.1",
+            "semver": "5.5.0",
+            "shebang-command": "1.2.0",
+            "which": "1.3.0"
+          }
+        },
+        "execa": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
+          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "6.0.5",
+            "get-stream": "3.0.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        }
+      }
+    },
+    "imagemin-svgo": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-svgo/-/imagemin-svgo-7.0.0.tgz",
+      "integrity": "sha512-+iGJFaPIMx8TjFW6zN+EkOhlqcemdL7F3N3Y0wODvV2kCUBuUtZK7DRZc1+Zfu4U2W/lTMUyx2G8YMOrZntIWg==",
+      "dev": true,
+      "requires": {
+        "is-svg": "3.0.0",
+        "svgo": "1.1.1"
+      },
+      "dependencies": {
+        "coa": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.1.tgz",
+          "integrity": "sha512-5wfTTO8E2/ja4jFSxePXlG5nRu5bBtL/r1HCIpJW/lzT6yDtKl0u0Z4o/Vpz32IpKmBn7HerheEZQgA9N2DarQ==",
+          "dev": true,
+          "requires": {
+            "q": "1.5.1"
+          }
+        },
+        "css-select": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
+          "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==",
+          "dev": true,
+          "requires": {
+            "boolbase": "1.0.0",
+            "css-what": "2.1.2",
+            "domutils": "1.7.0",
+            "nth-check": "1.0.2"
+          }
+        },
+        "css-what": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
+          "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==",
+          "dev": true
+        },
+        "csso": {
+          "version": "3.5.1",
+          "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
+          "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
+          "dev": true,
+          "requires": {
+            "css-tree": "1.0.0-alpha.29"
+          },
+          "dependencies": {
+            "css-tree": {
+              "version": "1.0.0-alpha.29",
+              "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
+              "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
+              "dev": true,
+              "requires": {
+                "mdn-data": "1.1.4",
+                "source-map": "0.5.7"
+              }
+            }
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0.1.0",
+            "domelementtype": "1.3.0"
+          }
+        },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "is-svg": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
+          "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
+          "dev": true,
+          "requires": {
+            "html-comment-regex": "1.1.1"
+          }
+        },
+        "js-yaml": {
+          "version": "3.12.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
+          "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
+          "dev": true,
+          "requires": {
+            "argparse": "1.0.10",
+            "esprima": "4.0.1"
+          }
+        },
+        "nth-check": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+          "dev": true,
+          "requires": {
+            "boolbase": "1.0.0"
+          }
+        },
+        "svgo": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.1.1.tgz",
+          "integrity": "sha512-GBkJbnTuFpM4jFbiERHDWhZc/S/kpHToqmZag3aEBjPYK44JAN2QBjvrGIxLOoCyMZjuFQIfTO2eJd8uwLY/9g==",
+          "dev": true,
+          "requires": {
+            "coa": "2.0.1",
+            "colors": "1.1.2",
+            "css-select": "2.0.2",
+            "css-select-base-adapter": "0.1.1",
+            "css-tree": "1.0.0-alpha.28",
+            "css-url-regex": "1.1.0",
+            "csso": "3.5.1",
+            "js-yaml": "3.12.0",
+            "mkdirp": "0.5.1",
+            "object.values": "1.0.4",
+            "sax": "1.2.4",
+            "stable": "0.1.8",
+            "unquote": "1.1.1",
+            "util.promisify": "1.0.0"
+          }
+        }
+      }
+    },
+    "imagemin-webp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-webp/-/imagemin-webp-5.0.0.tgz",
+      "integrity": "sha512-e3LnIlitWfyGzYGPwaKdne7hIawgewHPKW+Sf2KgG96hzStqwDguOrzsi5srWZY0QrtxjfmJbw5UYES9N59Rtg==",
+      "dev": true,
+      "requires": {
+        "cwebp-bin": "5.0.0",
+        "exec-buffer": "3.2.0",
+        "is-cwebp-readable": "2.0.1"
+      }
+    },
     "import-from": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
@@ -10643,6 +12208,15 @@
         "ci-info": "1.1.2"
       }
     },
+    "is-cwebp-readable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-cwebp-readable/-/is-cwebp-readable-2.0.1.tgz",
+      "integrity": "sha1-r7k7DAq9CiUQEBauM66ort+SbSY=",
+      "dev": true,
+      "requires": {
+        "file-type": "4.4.0"
+      }
+    },
     "is-data-descriptor": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
@@ -10738,6 +12312,23 @@
       "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=",
       "dev": true
     },
+    "is-gif": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
+      "integrity": "sha512-IqJ/jlbw5WJSNfwQ/lHEDXF8rxhRgF6ythk2oiEvhpG29F704eX9NO6TvPfMiq9DrbwgcEDnETYNcZDPewQoVw==",
+      "dev": true,
+      "requires": {
+        "file-type": "10.6.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "10.6.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.6.0.tgz",
+          "integrity": "sha512-GNOg09GC+rZzxetGZFoL7QOnWXRqvWuEdKURIJlr0d6MW107Iwy6voG1PPOrm5meG6ls59WkBmBMAZdVSVajRQ==",
+          "dev": true
+        }
+      }
+    },
     "is-glob": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
@@ -10757,6 +12348,12 @@
         "is-path-inside": "1.0.1"
       }
     },
+    "is-jpg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
+      "integrity": "sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=",
+      "dev": true
+    },
     "is-my-ip-valid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
@@ -10776,6 +12373,12 @@
         "xtend": "4.0.1"
       }
     },
+    "is-natural-number": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
+      "integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=",
+      "dev": true
+    },
     "is-npm": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
@@ -10890,6 +12493,12 @@
         }
       }
     },
+    "is-png": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-png/-/is-png-1.1.0.tgz",
+      "integrity": "sha1-1XSxK/J1wDUEVVcLDltXqwYgd84=",
+      "dev": true
+    },
     "is-posix-bracket": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
@@ -12866,6 +14475,28 @@
         }
       }
     },
+    "logalot": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
+      "integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=",
+      "dev": true,
+      "requires": {
+        "figures": "1.7.0",
+        "squeak": "1.3.0"
+      },
+      "dependencies": {
+        "figures": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "1.0.5",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -12914,6 +14545,18 @@
       "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
       "dev": true
     },
+    "lpad-align": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
+      "integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=",
+      "dev": true,
+      "requires": {
+        "get-stdin": "4.0.1",
+        "indent-string": "2.1.0",
+        "longest": "1.0.1",
+        "meow": "3.7.0"
+      }
+    },
     "lru-cache": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@@ -12945,6 +14588,16 @@
         "cast-array": "1.0.1",
         "object-filter": "1.0.2",
         "query-string": "2.4.2"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "2.4.2",
+          "resolved": "http://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
+          "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
+          "requires": {
+            "strict-uri-encode": "1.1.0"
+          }
+        }
       }
     },
     "make-dir": {
@@ -13089,6 +14742,12 @@
         }
       }
     },
+    "mdn-data": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
+      "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -13454,6 +15113,17 @@
         "run-queue": "1.0.3"
       }
     },
+    "mozjpeg": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-6.0.1.tgz",
+      "integrity": "sha512-9Z59pJMi8ni+IUvSH5xQwK5tNLw7p3dwDNCZ3o1xE+of3G5Hc/yOz6Ue/YuLiBXU3ZB5oaHPURyPdqfBX/QYJA==",
+      "dev": true,
+      "requires": {
+        "bin-build": "3.0.0",
+        "bin-wrapper": "4.1.0",
+        "logalot": "2.1.0"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -16988,6 +18658,24 @@
         }
       }
     },
+    "npm-conf": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
+      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
+      "dev": true,
+      "requires": {
+        "config-chain": "1.1.12",
+        "pify": "3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -17294,6 +18982,17 @@
         "wordwrap": "1.0.0"
       }
     },
+    "optipng-bin": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/optipng-bin/-/optipng-bin-5.1.0.tgz",
+      "integrity": "sha512-9baoqZTNNmXQjq/PQTWEXbVV3AMO2sI/GaaqZJZ8SExfAzjijeAP7FEeT+TtyumSw7gr0PZtSUYB/Ke7iHQVKA==",
+      "dev": true,
+      "requires": {
+        "bin-build": "3.0.0",
+        "bin-wrapper": "4.1.0",
+        "logalot": "2.1.0"
+      }
+    },
     "ora": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/ora/-/ora-0.2.3.tgz",
@@ -17360,6 +19059,15 @@
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
       "dev": true
     },
+    "os-filter-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
+      "integrity": "sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==",
+      "dev": true,
+      "requires": {
+        "arch": "2.1.1"
+      }
+    },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -17441,6 +19149,26 @@
         "p-reduce": "1.0.0"
       }
     },
+    "p-event": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
+      "integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
+      "dev": true,
+      "requires": {
+        "p-timeout": "1.2.1"
+      },
+      "dependencies": {
+        "p-timeout": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
+          "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
+          "dev": true,
+          "requires": {
+            "p-finally": "1.0.0"
+          }
+        }
+      }
+    },
     "p-filter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-1.0.0.tgz",
@@ -17492,6 +19220,21 @@
       "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
       "dev": true
     },
+    "p-map-series": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-1.0.0.tgz",
+      "integrity": "sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=",
+      "dev": true,
+      "requires": {
+        "p-reduce": "1.0.0"
+      }
+    },
+    "p-pipe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-1.2.0.tgz",
+      "integrity": "sha1-SxoROZoRUgpneQ7loMHViB1r7+k=",
+      "dev": true
+    },
     "p-reduce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
@@ -17731,6 +19474,12 @@
         "sha.js": "2.4.10"
       }
     },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
     "performance-now": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -17834,6 +19583,48 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "pngquant-bin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pngquant-bin/-/pngquant-bin-5.0.1.tgz",
+      "integrity": "sha512-PJKdHpGuYl5WCzjOQ+YRBWsr1KQ2wAwez27am6rJOavLwc4aRvMuHDaKr288/FYS1eWUIXHFjCI0T2NAKt61Jw==",
+      "dev": true,
+      "requires": {
+        "bin-build": "3.0.0",
+        "bin-wrapper": "4.1.0",
+        "execa": "0.10.0",
+        "logalot": "2.1.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.4",
+            "path-key": "2.0.1",
+            "semver": "5.5.0",
+            "shebang-command": "1.2.0",
+            "which": "1.3.0"
+          }
+        },
+        "execa": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
+          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "6.0.5",
+            "get-stream": "3.0.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        }
+      }
+    },
     "popper.js": {
       "version": "1.12.9",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
@@ -18572,6 +20363,12 @@
         }
       }
     },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
@@ -18607,6 +20404,11 @@
         "randombytes": "2.0.6"
       }
     },
+    "pubsub-js": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.7.0.tgz",
+      "integrity": "sha512-Pb68P9qFZxnvDipHMuj9oT1FoIgBcXJ9C9eWdHCLZAnulaUoJ3+Y87RhGMYilWpun6DMWVmvK70T4RP4drZMSA=="
+    },
     "pump": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
@@ -18647,11 +20449,19 @@
       "dev": true
     },
     "query-string": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
-      "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz",
+      "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==",
       "requires": {
-        "strict-uri-encode": "1.1.0"
+        "decode-uri-component": "0.2.0",
+        "strict-uri-encode": "2.0.0"
+      },
+      "dependencies": {
+        "strict-uri-encode": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+          "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+        }
       }
     },
     "querystring": {
@@ -19536,8 +21346,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resolve": {
       "version": "1.5.0",
@@ -19741,6 +21550,7 @@
         "anymatch": "1.3.2",
         "exec-sh": "0.2.1",
         "fb-watchman": "2.0.0",
+        "fsevents": "1.2.4",
         "minimatch": "3.0.4",
         "minimist": "1.2.0",
         "walker": "1.0.7",
@@ -19938,18 +21748,10 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
-    "schedule": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
-      "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
-      "requires": {
-        "object-assign": "4.1.1"
-      }
-    },
     "scheduler": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.10.0.tgz",
-      "integrity": "sha512-+TSTVTCBAA3h8Anei3haDc1IRwMeDmtI/y/o3iBe3Mjl2vwYF9DtPDt929HyRmV/e7au7CLu8sc4C4W0VOs29w==",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.2.tgz",
+      "integrity": "sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==",
       "requires": {
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1"
@@ -20011,6 +21813,26 @@
         }
       }
     },
+    "seek-bzip": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.5.tgz",
+      "integrity": "sha1-z+kXyz0nS8/6x5J1ivUxc+sfq9w=",
+      "dev": true,
+      "requires": {
+        "commander": "2.8.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.8.1",
+          "resolved": "http://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+          "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+          "dev": true,
+          "requires": {
+            "graceful-readlink": "1.0.1"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -20394,6 +22216,15 @@
       "integrity": "sha1-kqSWkGX5xwxpR1PVUkj8aPj2Usk=",
       "dev": true
     },
+    "semver-truncate": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
+      "integrity": "sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=",
+      "dev": true,
+      "requires": {
+        "semver": "5.5.0"
+      }
+    },
     "send": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.1.tgz",
@@ -20828,6 +22659,15 @@
         "is-plain-obj": "1.1.0"
       }
     },
+    "sort-keys-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
+      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
+      "dev": true,
+      "requires": {
+        "sort-keys": "1.1.2"
+      }
+    },
     "source-list-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -20978,6 +22818,17 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "squeak": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
+      "integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3",
+        "console-stream": "0.1.1",
+        "lpad-align": "1.1.2"
+      }
+    },
     "srcset": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/srcset/-/srcset-1.0.0.tgz",
@@ -21020,6 +22871,12 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -21296,6 +23153,15 @@
         "strip-bom": "2.0.0"
       }
     },
+    "strip-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
+      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
+      "dev": true,
+      "requires": {
+        "is-natural-number": "4.0.1"
+      }
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -21314,6 +23180,15 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "1.0.5"
+      }
+    },
     "style-loader": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.20.2.tgz",
@@ -21587,6 +23462,21 @@
         "inherits": "2.0.3"
       }
     },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "dev": true,
+      "requires": {
+        "bl": "1.2.2",
+        "buffer-alloc": "1.2.0",
+        "end-of-stream": "1.4.1",
+        "fs-constants": "1.0.0",
+        "readable-stream": "2.3.5",
+        "to-buffer": "1.1.1",
+        "xtend": "4.0.1"
+      }
+    },
     "temp": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
@@ -21605,6 +23495,22 @@
         }
       }
     },
+    "temp-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
+      "dev": true
+    },
+    "tempfile": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-2.0.0.tgz",
+      "integrity": "sha1-awRGhWqbERTRhW/8vlCczLCXcmU=",
+      "dev": true,
+      "requires": {
+        "temp-dir": "1.0.0",
+        "uuid": "3.2.1"
+      }
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -21709,6 +23615,12 @@
       "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
       "dev": true
     },
+    "to-buffer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
+      "dev": true
+    },
     "to-fast-properties": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
@@ -22163,6 +24075,15 @@
       "integrity": "sha1-n5up2e+odkw4dpi8v+sshI8RrbM=",
       "dev": true
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "1.0.5"
+      }
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
@@ -22310,6 +24231,41 @@
         }
       }
     },
+    "unbzip2-stream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.1.tgz",
+      "integrity": "sha512-fIZnvdjblYs7Cru/xC6tCPVhz7JkYcVQQkePwMLyQELzYTds2Xn8QefPVnvdVhhZqubxNA1cASXEH5wcK0Bucw==",
+      "dev": true,
+      "requires": {
+        "buffer": "3.6.0",
+        "through": "2.3.8"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+          "integrity": "sha1-EQHpVE9KdrG8OybUUsqW16NeeXg=",
+          "dev": true
+        },
+        "buffer": {
+          "version": "3.6.0",
+          "resolved": "http://registry.npmjs.org/buffer/-/buffer-3.6.0.tgz",
+          "integrity": "sha1-pyyTb3e5a/UvX357RnGAYoVR3vs=",
+          "dev": true,
+          "requires": {
+            "base64-js": "0.0.8",
+            "ieee754": "1.1.8",
+            "isarray": "1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        }
+      }
+    },
     "underscore": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
@@ -22428,11 +24384,11 @@
       }
     },
     "universal-cookie": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-3.0.4.tgz",
-      "integrity": "sha512-3rhx6RAIuRmCWJttnbgzMrp2TbHhUmgQ2GrpY/US03Siv5T28iXr2qYw1m3YqmluBxEyrvZaloVemkLSId+Oyg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-3.0.6.tgz",
+      "integrity": "sha512-VxVnwj1bWVLuYKAbaeQ6PL4NlIEWB6r4PUjwKp76nFnrLyqQtnOKAHe9dOjESpcJ4gPoc/Zkxb/6ZK+FMuEioA==",
       "requires": {
-        "@types/cookie": "0.3.1",
+        "@types/cookie": "0.3.2",
         "@types/object-assign": "4.0.30",
         "cookie": "0.3.1",
         "object-assign": "4.1.1"
@@ -22459,6 +24415,12 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -23038,6 +25000,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.1",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -24001,6 +25964,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.1",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -24854,6 +26818,16 @@
         }
       }
     },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "0.2.13",
+        "fd-slicer": "1.1.0"
+      }
+    },
     "yeoman-environment": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.0.5.tgz",

package.json

@@ -25,14 +25,15 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.0.3",
-    "@edx/paragon": "^3.5.2",
+    "@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",
@@ -46,6 +47,7 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.15.0",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-jest": "^22.4.0",
@@ -67,6 +69,7 @@
     "html-webpack-plugin": "^3.0.3",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
+    "image-webpack-loader": "^4.2.0",
     "jest": "^22.4.0",
     "node-sass": "^4.7.2",
     "react-dev-utils": "^5.0.0",

public/index.html

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

src/components/Gradebook/gradebook.scss

@@ -1,3 +1,43 @@
+.spinner-overlay {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    background-color: #999;
+    opacity: 0.5;
+    z-index: 99999;
+    display:flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 200px;
+}
+
+.color-black {
+    color: black;
+}
+
+.gradebook-container{
+    width: 500px;
+    @media only screen and (min-width: 640px) {
+        width: 630px;
+    }
+    @media only screen and (min-width: 992px) {
+        width: 900px;
+    }
+    @media only screen and (min-width: 1200px) {
+        width: 1024px;
+    }
+}
+
+.student-filters{
+    display: flex;
+    .label{
+        padding-top: 30px;
+    }
+    .form-group{
+        margin-left: 10px;
+    }
+}
 .gbook { 
     overflow-x: scroll;
 
@@ -20,9 +60,6 @@
         display: block;
         background-color: #fff;
     }
-    .table tr td:not(:first-child) {
-        min-width: 250px;    
-    }
     .table tr td:nth-child(2) {
         box-sizing: content-box;
         padding-left: 170px;

src/components/Gradebook/index.jsx

@@ -1,322 +1,372 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import emailPropType from 'email-prop-type';
-import { SearchField, Table, Modal } from '@edx/paragon';
+import {
+  Button,
+  InputSelect,
+  Modal,
+  SearchField,
+  StatusAlert,
+  Table,
+  Icon,
+} from '@edx/paragon';
+import queryString from 'query-string';
+import { configuration } from '../../config';
 
+const DECIMAL_PRECISION = 2;
 
 export default class Gradebook extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      grades: this.mapUserEnteriesPercent(this.props.results).sort(this.sortAlphaDesc),
-      headings: this.mapHeadings(this.props.results[0]),
       filterValue: '',
-      modalContent: (<h1>Hello, World!</h1>),
       modalOpen: false,
       modalModel: [{}],
       updateVal: 0,
+      updateModuleId: null,
+      updateUserId: null,
     };
   }
 
-  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;
-  };
-
-  sortAlphaAsc = (gradeRowA, gradeRowB) => {
-    const a = gradeRowA.username.toUpperCase();
-    const b = gradeRowB.username.toUpperCase();
-    if (a < b) {
-      return 1;
-    }
-    if (a > b) {
-      return -1;
-    }
-    return 0;
-  };
-
-  sortNumerically = (colKey, direction) => {
-    function sortNumAsc(gradeRowA, gradeRowB) {
-      if (gradeRowA[colKey] < gradeRowB[colKey]) {
-        return -1;
-      }
-      if (gradeRowA[colKey] > gradeRowB[colKey]) {
-        return 1;
-      }
-      return 0;
-    }
-  
-    function sortNumDesc(gradeRowA, gradeRowB) {
-      if (gradeRowA[colKey] < gradeRowB[colKey]) {
-        return 1;
-      }
-      if (gradeRowA[colKey] > gradeRowB[colKey]) {
-        return -1;
-      }
-      return 0;
-    };
-
-    this.setState({grades: [...this.state.grades].sort(direction === 'desc' ? sortNumDesc : sortNumAsc)});
+  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);
   }
 
-  mapHeadings = entry => {
-    const results = [{
-      label: 'Username',
-      key: 'username',
-      columnSortable: true,
-      onSort: direction => {
-        this.setState({
-          grades: [...this.state.grades].sort(direction === 'desc' ? this.sortAlphaDesc : this.sortAlphaAsc)
-        })
-      },
-     }];
-    const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label)
-      .map(s => ({
-        label: s.label, 
-        key: s.label,
-        columnSortable: true,
-        onSort: direction => {this.sortNumerically(s.label, direction)},
-      }));
-    const totals = [{
-      label: 'Total', 
-      key: 'total',
-      columnSortable: true,
-      onSort: direction => {this.sortNumerically('total', direction)},
-    }];
+  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,
+    });
+  }
 
-    return results.concat(assignmentHeadings).concat(totals);
+  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,
+    });
+  }
+
+  updateQueryParams = (queryKey, queryValue) => {
+    const parsed = queryString.parse(this.props.location.search);
+    parsed[queryKey] = queryValue;
+    return `?${queryString.stringify(parsed)}`;
   };
 
-  mapHeadingsHw = entry => {
-    const results = [{
-      label: 'Username',
-      key: 'username',
-      columnSortable: true,
-      onSort: direction => {
-        this.setState({
-          grades: [...this.state.grades].sort(direction === 'desc' ? this.sortAlphaDesc : this.sortAlphaAsc)
-        })
-      },
-     }];
-    const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label && section.category == 'Homework' )
-      .map(s => ({
-        label: s.label, 
-        key: s.label,
-        columnSortable: true,
-        onSort: direction => {this.sortNumerically(s.label, direction)},
-      }));
-
-    return results.concat(assignmentHeadings);
+  mapAssignmentTypeEntries = (entries) => {
+    const mapped = entries.map(entry => ({
+      id: entry,
+      label: entry,
+    }));
+    mapped.unshift({ id: 0, label: 'All' });
+    return mapped;
   };
 
-  mapHeadingsExam = entry => {
-    const results = [{
-      label: 'Username',
-      key: 'username',
-      columnSortable: true,
-      onSort: direction => {
-        this.setState({
-          grades: [...this.state.grades].sort(direction === 'desc' ? this.sortAlphaDesc : this.sortAlphaAsc)
-        })
-      },
-     }];
-    const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label && section.category == 'Exam' )
-      .map(s => ({
-        label: s.label, 
-        key: s.label,
-        columnSortable: true,
-        onSort: direction => {this.sortNumerically(s.label, direction)},
-      }));
-
-    return results.concat(assignmentHeadings);
+  mapCohortsEntries = (entries) => {
+    const mapped = entries.map(entry => ({
+      id: entry.id,
+      label: entry.name,
+    }));
+    mapped.unshift({ id: 0, label: 'Cohort-All' });
+    return mapped;
   };
 
-  mapUserEnteriesPercent = (entries) => entries.map(entry => {
-    const results = {username: entry.username};
-    const assignments = entry.section_breakdown
-      .filter(section => section.is_graded)
-      .reduce((acc,s) => {
-        acc[s.label]= (
-          <button 
-            className="btn btn-header link-style"
-            onClick={()=> this.setState({
-              modalModel: [{
-                username: entry.username,
-                autoGrade: `${s.score_earned}/${s.score_possible}`,
-                adjustedGrade: (<span><input style={{width: '25px'}} type='text' value={this.updateVal}></input> / {s.score_possible}</span>),
-                assignmentName: `${s.subsection_name}`,
-              }],
-              modalOpen: true,
-            })}
-          >
-            {s.percent}
-          </button>);
-        return acc; 
-    }, {});
-    const totals = {total: entry.percent * 100}
-    return Object.assign(results, assignments, totals);
-  });
+  mapTracksEntries = (entries) => {
+    const mapped = entries.map(entry => ({
+      id: entry.slug,
+      label: entry.name,
+    }));
+    mapped.unshift({ label: 'Track-All' });
+    return mapped;
+  };
 
-  mapUserEnteriesAbsolute = (entries) => entries.map(entry => {
-    const results = {username: entry.username};
-    const assignments = entry.section_breakdown
-      .filter(section => section.is_graded)
-      .reduce((acc,s) => {
-        acc[s.label]= (
-          <button 
-            className="btn btn-header link-style"
-            onClick={()=> this.setState({
-              modalModel: [{
-                username: entry.username,
-                autoGrade: `${s.score_earned}/${s.score_possible}`,
-                adjustedGrade: (<span><input style={{width: '25px'}} type='text' value={this.updateVal}></input> / {s.score_possible}</span>),
-                assignmentName: `${s.subsection_name}`,
-              }],
-              modalOpen: true,
-            })}
-          >
-            {s.score_earned}/{s.score_possible}
-          </button>);
-          //TODO: This is a really hacky thing I'm doing just to get sorting to work. Should be able to clean this up drastically when I introduce the reducers
-          acc[`${s.label}Percent`] = s.percent
+  updateAssignmentTypes = (event) => {
+    this.props.filterColumns(event, this.props.grades[0]);
+  }
 
-        return acc; 
-    }, {});
-    const totals = {total: entry.percent * 100}
-    return Object.assign(results, assignments, totals);
-  });
+  updateTracks = (event) => {
+    const selectedTrackItem = this.props.tracks.find(x => x.name === event);
+    let selectedTrackSlug = null;
+    if (selectedTrackItem) {
+      selectedTrackSlug = selectedTrackItem.slug;
+    }
+    this.props.getUserGrades(
+      this.props.match.params.courseId,
+      this.props.selectedCohort,
+      selectedTrackSlug,
+    );
+    const updatedQueryStrings = this.updateQueryParams('track', selectedTrackSlug);
+    this.props.history.push(updatedQueryStrings);
+  };
+
+  updateCohorts = (event) => {
+    const selectedCohortItem = this.props.cohorts.find(x => x.name === event);
+    let selectedCohortId = null;
+    if (selectedCohortItem) {
+      selectedCohortId = selectedCohortItem.id;
+    }
+    this.props.getUserGrades(
+      this.props.match.params.courseId,
+      selectedCohortId,
+      this.props.selectedTrack,
+    );
+    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';
+  };
+
+  mapSelectedCohortEntry = (entry) => {
+    const selectedCohortEntry = this.props.cohorts.find(x => x.id === parseInt(entry, 10));
+    if (selectedCohortEntry) {
+      return selectedCohortEntry.name;
+    }
+    return 'Cohorts';
+  };
+
+  mapSelectedTrackEntry = (entry) => {
+    const selectedTrackEntry = this.props.tracks.find(x => x.slug === entry);
+    if (selectedTrackEntry) {
+      return selectedTrackEntry.name;
+    }
+    return 'Tracks';
+  };
+
+  roundPercentageGrade = percent => parseFloat(percent.toFixed(DECIMAL_PRECISION));
+
+  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);
+    }),
+
+    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;
+        }, {});
+
+      const totals = { total: `${entry.percent * 100}/100` };
+      return Object.assign(results, assignments, totals);
+    }),
+  };
+
+  lmsInstructorDashboardUrl = courseId => `${configuration.LMS_BASE_URL}/courses/${courseId}/instructor`;
 
   render() {
     return (
       <div className="d-flex justify-content-center">
-        <div className="card" style={{width: '50rem'}}>
-          <div className="card-body">
+        { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
+        <div className="gradebook-container">
+          <div>
+            <a
+              href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
+              className="mb-3"
+            >
+              {'<< Back to Dashboard'}
+            </a>
             <h1>Gradebook</h1>
-            <hr/>
+            <h3> {this.props.match.params.courseId}</h3>
+            <hr />
             <div className="d-flex justify-content-between" >
               <div>
                 <div>
-                  Score View: 
+                  Score View:
                   <span>
-                    <input 
-                      id='score-view-percent' 
-                      className='ml-2' 
-                      type='radio' 
-                      name='score-view'
-                      value='percent' 
-                      onClick={()=> {this.setState({
-                        grades: this.mapUserEnteriesPercent(this.props.results).sort(this.sortAlphaDesc),
-                      })}}
+                    <input
+                      id="score-view-percent"
+                      className="ml-2 mr-1"
+                      type="radio"
+                      name="score-view"
+                      value="percent"
+                      onClick={() => this.props.toggleFormat('percent')}
                     />
-                    <label className='ml-2 mr-2' htmlFor='score-view-percent'>Percent</label>
+                    <label className="mr-2" htmlFor="score-view-percent">Percent</label>
                   </span>
                   <span>
-                    <input 
-                      id='score-view-absolute'
-                      type='radio' 
-                      name='score-view' 
-                      value='absolute' 
-                      onClick={()=> {this.setState({
-                        grades: this.mapUserEnteriesAbsolute(this.props.results).sort(this.sortAlphaDesc),
-                      })}}
+                    <input
+                      id="score-view-absolute"
+                      type="radio"
+                      name="score-view"
+                      value="absolute"
+                      className="mr-1"
+                      onClick={() => this.props.toggleFormat('absolute')}
                     />
-                    <label className='ml-2 mr-2' htmlFor='score-view-absolute'>Absolute</label>
+                    <label htmlFor="score-view-absolute">Absolute</label>
                   </span>
                 </div>
-                <div>
-                  Category: 
-                  <span>
-                    <input 
-                      id='category-all' 
-                      className='ml-2' 
-                      type='radio' 
-                      name='category'
-                      value='all' 
-                      onClick={()=> {this.setState({
-                        headings: this.mapHeadings(this.props.results[0]),
-                      })}}
-                    />
-                    <label className='ml-2 mr-2' htmlFor='category-all'>All</label>
-                  </span>
-                  <span>
-                    <input 
-                      id='category-homework' 
-                      className='ml-2' 
-                      type='radio' 
-                      name='category'
-                      value='homework' 
-                      onClick={()=> {this.setState({
-                        headings: this.mapHeadingsHw(this.props.results[0]),
-                      })}}
-                    />
-                    <label className='ml-2 mr-2' htmlFor='category-homework'>Homework</label>
-                  </span>
-                  <span>
-                    <input 
-                      id='category-exam'
-                      type='radio' 
-                      name='category' 
-                      value='exam' 
-                      onClick={()=> {this.setState({
-                        headings: this.mapHeadingsExam(this.props.results[0]),
-                      })}}
-                    />
-                    <label className='ml-2 mr-2' htmlFor='Exam'>Exam</label>
-                  </span>
-                </div>
-              </div>
-              <div>
-                <div style={{marginLeft: "10px" ,marginBottom: "10px"}}>
-                  <a href="https://www.google./com">Download Grade Report</a>
-                </div>
-                <SearchField 
-                  onSubmit={() => {this.setState({
-                    grades: this.mapUserEnteriesPercent(this.props.results).filter(entry => entry.username == '' || entry.username.includes(this.state.filterValue))
-                  })}}
-                  onChange={filterValue => this.setState({filterValue})}
-                  onClear={() => {this.setState({grades: this.mapUserEnteriesPercent(this.props.results).sort(this.sortAlphaDesc)})}}
-                  value={this.state.filterValue}
-                />
-              </div>
-            </div>
-            <br/>
-            <div className="gbook">
-              <Table
-                columns={this.state.headings}
-                data={this.state.grades}
-                tableSortable={true}
-                defaultSortDirection='desc'
-                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: 'Auto grade',key: 'autoGrade',},{label: 'Adjusted grade',key: 'adjustedGrade',}]}
-                      data={this.state.modalModel}
-                      tableSortable={true}
-                      defaultSortDirection='desc'
-                      defaultSortedColumn='username'
+                { 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>
-                )}
-                onClose={()=> this.setState({modalOpen: false,})}
+                }
+                {(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>
+                }
+              </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,
+              })}
             />
           </div>
         </div>
@@ -325,1019 +375,3 @@ export default class Gradebook extends React.Component {
   }
 }
 
-Gradebook.defaultProps = {
-  "results": [
-    {
-      "course_id": "course-v1:edX+DemoX+Demo_Course",
-      "email": "honor@example.com",
-      "user_id": 6,
-      "username": "honor",
-      "full_name": "",
-      "passed": false,
-      "percent": 0,
-      "letter_grade": null,
-      "progress_page_url": "/courses/course-v1:edX+DemoX+Demo_Course/progress/6/",
-      "section_breakdown": [
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Introduction",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b",
-          "subsection_name": "Demo Course Overview"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/3.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 3,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Lesson 1 - Getting Started"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/11.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 01",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 11,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Homework - Question Styles"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Lesson 2 - Let's Get Interactive!"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/5.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 02",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 5,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Labs and Demos"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/19.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 19,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Essays"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Lesson 3 - Be Social"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Homework - Find Your Study Buddy"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "More Ways to Connect"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Exam",
-          "chapter_name": "About Exams and Certificates",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/6.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 6,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7",
-          "subsection_name": "edX Exams"
-        }
-      ],
-      "aggregates": {
-        "Exam": {
-          "score_possible": 6,
-          "score_earned": 0
-        },
-        "Homework": {
-          "score_possible": 16,
-          "score_earned": 0
-        }
-      }
-    },
-    {
-      "course_id": "course-v1:edX+DemoX+Demo_Course",
-      "email": "audit@example.com",
-      "user_id": 7,
-      "username": "audit",
-      "full_name": "",
-      "passed": false,
-      "percent": 0.17,
-      "letter_grade": null,
-      "progress_page_url": "/courses/course-v1:edX+DemoX+Demo_Course/progress/7/",
-      "section_breakdown": [
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Introduction",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b",
-          "subsection_name": "Demo Course Overview"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/3.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 3,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Lesson 1 - Getting Started"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.45",
-          "is_graded": true,
-          "grade_description": "(5.00/11.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 01",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions",
-          "percent": 0.45,
-          "score_earned": 5,
-          "score_possible": 11,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Homework - Question Styles"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Lesson 2 - Let's Get Interactive!"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/5.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 02",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 5,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Labs and Demos"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/19.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 19,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Essays"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Lesson 3 - Be Social"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Homework - Find Your Study Buddy"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "More Ways to Connect"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Exam",
-          "chapter_name": "About Exams and Certificates",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/6.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 6,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7",
-          "subsection_name": "edX Exams"
-        }
-      ],
-      "aggregates": {
-        "Exam": {
-          "score_possible": 6,
-          "score_earned": 0
-        },
-        "Homework": {
-          "score_possible": 16,
-          "score_earned": 5
-        }
-      }
-    },
-    {
-      "course_id": "course-v1:edX+DemoX+Demo_Course",
-      "email": "verified@example.com",
-      "user_id": 8,
-      "username": "verified",
-      "full_name": "",
-      "passed": false,
-      "percent": 0,
-      "letter_grade": null,
-      "progress_page_url": "/courses/course-v1:edX+DemoX+Demo_Course/progress/8/",
-      "section_breakdown": [
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Introduction",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b",
-          "subsection_name": "Demo Course Overview"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/3.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 3,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Lesson 1 - Getting Started"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/11.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 01",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 11,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Homework - Question Styles"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Lesson 2 - Let's Get Interactive!"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/5.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 02",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 5,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Labs and Demos"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/19.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 19,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Essays"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Lesson 3 - Be Social"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Homework - Find Your Study Buddy"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "More Ways to Connect"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Exam",
-          "chapter_name": "About Exams and Certificates",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/6.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 6,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7",
-          "subsection_name": "edX Exams"
-        }
-      ],
-      "aggregates": {
-        "Exam": {
-          "score_possible": 6,
-          "score_earned": 0
-        },
-        "Homework": {
-          "score_possible": 16,
-          "score_earned": 0
-        }
-      }
-    },
-    {
-      "course_id": "course-v1:edX+DemoX+Demo_Course",
-      "email": "staff@example.com",
-      "user_id": 9,
-      "username": "staff",
-      "full_name": "",
-      "passed": false,
-      "percent": 0,
-      "letter_grade": null,
-      "progress_page_url": "/courses/course-v1:edX+DemoX+Demo_Course/progress/9/",
-      "section_breakdown": [
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Introduction",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b",
-          "subsection_name": "Demo Course Overview"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/3.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 3,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Lesson 1 - Getting Started"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 1: Getting Started",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/11.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 01",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 11,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations",
-          "subsection_name": "Homework - Question Styles"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Lesson 2 - Let's Get Interactive!"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Homework",
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/5.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": "Ex 02",
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 5,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Labs and Demos"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 2: Get Interactive",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/19.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 19,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions",
-          "subsection_name": "Homework - Essays"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Lesson 3 - Be Social"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "Homework - Find Your Study Buddy"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "Example Week 3: Be Social",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration",
-          "subsection_name": "More Ways to Connect"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": "Exam",
-          "chapter_name": "About Exams and Certificates",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": true,
-          "grade_description": "(0.00/6.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 6,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7",
-          "subsection_name": "edX Exams"
-        },
-        {
-          "are_grades_published": true,
-          "auto_grade": false,
-          "category": null,
-          "chapter_name": "holding section",
-          "comment": "",
-          "detail": "",
-          "displayed_value": "0.00",
-          "is_graded": false,
-          "grade_description": "(0.00/0.00)",
-          "is_ag": false,
-          "is_average": false,
-          "is_manually_graded": false,
-          "label": null,
-          "letter_grade": null,
-          "module_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@07bc32474380492cb34f76e5f9d9a135",
-          "percent": 0,
-          "score_earned": 0,
-          "score_possible": 0,
-          "section_block_id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@9fca584977d04885bc911ea76a9ef29e",
-          "subsection_name": "New Subsection"
-        }
-      ],
-      "aggregates": {
-        "Exam": {
-          "score_possible": 6,
-          "score_earned": 0
-        },
-        "Homework": {
-          "score_possible": 16,
-          "score_earned": 0
-        }
-      }
-    }
-  ]
-};
-
-
-// CommentDetails.defaultProps = {
-//   id: null,
-//   postId: null,
-//   name: '',
-//   email: 'example@example.com',
-//   body: '',
-// };
-
-// CommentDetails.propTypes = {
-//   id: PropTypes.number,
-//   postId: PropTypes.number,
-//   name: PropTypes.string,
-//   email: emailPropType,
-//   body: PropTypes.string,
-// };
-

src/components/Header/index.jsx

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

src/config/index.js

@@ -0,0 +1,17 @@
+const configuration = {
+  BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  LOGIN_URL: process.env.LOGIN_URL,
+  LOGOUT_URL: process.env.LOGOUT_URL,
+  CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+  CSRF_COOKIE_NAME: process.env.CSRF_COOKIE_NAME,
+};
+
+const features = {};
+
+export { configuration, features };

src/containers/GradebookPage/index.jsx

@@ -1,15 +1,68 @@
 import { connect } from 'react-redux';
 
 import Gradebook from '../../components/Gradebook';
-import { fetchComment } from '../../data/actions/comment';
+import {
+  fetchGrades,
+  fetchMatchingUserGrades,
+  fetchPrevNextGrades,
+  updateGrades,
+  toggleGradeFormat,
+  filterColumns,
+  updateBanner,
+} from '../../data/actions/grades';
+import { fetchCohorts } from '../../data/actions/cohorts';
+import { fetchTracks } from '../../data/actions/tracks';
+import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
 
 const mapStateToProps = state => (
   {
+    grades: state.grades.results,
+    headings: state.grades.headings,
+    tracks: state.tracks.results,
+    cohorts: state.cohorts.results,
+    selectedTrack: state.grades.selectedTrack,
+    selectedCohort: state.grades.selectedCohort,
+    format: state.grades.gradeFormat,
+    showSuccess: state.grades.showSuccess,
+    prevPage: state.grades.prevPage,
+    nextPage: state.grades.nextPage,
+    assignmnetTypes: state.assignmentTypes.results,
+    showSpinner: state.grades.showSpinner,
   }
 );
 
 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));
+    },
   }
 );
 

src/data/actions/assignmentTypes.js

@@ -0,0 +1,32 @@
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+} from '../constants/actionTypes/assignmentTypes';
+import LmsApiService from '../services/LmsApiService';
+
+const startedFetchingAssignmentTypes = () => ({ type: STARTED_FETCHING_ASSIGNMENT_TYPES });
+const errorFetchingAssignmentTypes = () => ({ type: ERROR_FETCHING_ASSIGNMENT_TYPES });
+const gotAssignmentTypes = assignmentTypes => ({ type: GOT_ASSIGNMENT_TYPES, assignmentTypes });
+
+const fetchAssignmentTypes = courseId => (
+  (dispatch) => {
+    dispatch(startedFetchingAssignmentTypes());
+    return LmsApiService.fetchAssignmentTypes(courseId)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotAssignmentTypes(Object.keys(data.assignment_types)));
+      })
+      .catch(() => {
+        dispatch(errorFetchingAssignmentTypes());
+      });
+  }
+);
+
+export {
+  fetchAssignmentTypes,
+  startedFetchingAssignmentTypes,
+  gotAssignmentTypes,
+  errorFetchingAssignmentTypes,
+};
+

src/data/actions/assignmentTypes.test.js

@@ -0,0 +1,73 @@
+import configureMockStore from 'redux-mock-store';
+import MockAdapter from 'axios-mock-adapter';
+import thunk from 'redux-thunk';
+
+import apiClient from '../apiClient';
+import { configuration } from '../../config';
+import { fetchAssignmentTypes } from './assignmentTypes';
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+} from '../constants/actionTypes/assignmentTypes';
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('fetchAssignmentTypes', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+    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 expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: GOT_ASSIGNMENT_TYPES, assignmentTypes: Object.keys(responseData.assignment_types) },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches failure action after fetching cohorts', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: ERROR_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(500, JSON.stringify({}));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/data/actions/cohorts.js

@@ -0,0 +1,31 @@
+import {
+  STARTED_FETCHING_COHORTS,
+  GOT_COHORTS,
+  ERROR_FETCHING_COHORTS,
+} from '../constants/actionTypes/cohorts';
+import LmsApiService from '../services/LmsApiService';
+
+const startedFetchingCohorts = () => ({ type: STARTED_FETCHING_COHORTS });
+const errorFetchingCohorts = () => ({ type: ERROR_FETCHING_COHORTS });
+const gotCohorts = cohorts => ({ type: GOT_COHORTS, cohorts });
+
+const fetchCohorts = courseId => (
+  (dispatch) => {
+    dispatch(startedFetchingCohorts());
+    return LmsApiService.fetchCohorts(courseId)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotCohorts(data.cohorts));
+      })
+      .catch(() => {
+        dispatch(errorFetchingCohorts());
+      });
+  }
+);
+
+export {
+  fetchCohorts,
+  startedFetchingCohorts,
+  gotCohorts,
+  errorFetchingCohorts,
+};

src/data/actions/cohorts.test.js

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

src/data/actions/comment.js

@@ -1,38 +0,0 @@
-import 'whatwg-fetch';
-import {
-  STARTED_FETCHING_COMMENT,
-  FINISHED_FETCHING_COMMENT,
-  ERROR_FETCHING_COMMENT,
-  GET_COMMENT,
-} from '../constants/actionTypes/comment';
-
-const startedFetchingComment = () => ({ type: STARTED_FETCHING_COMMENT });
-const finishedFetchingComment = () => ({ type: FINISHED_FETCHING_COMMENT });
-const errorFetchingComment = () => ({ type: ERROR_FETCHING_COMMENT });
-const getComment = comment => ({ type: GET_COMMENT, comment });
-const fetchComment = commentId => (
-  (dispatch) => {
-    dispatch(startedFetchingComment());
-    return fetch(`https://jsonplaceholder.typicode.com/comments/${commentId}`)
-      .then((response) => {
-        if (response.ok) {
-          return response.json();
-        }
-
-        throw new Error();
-      })
-      .then((data) => {
-        dispatch(getComment(data));
-        dispatch(finishedFetchingComment());
-      })
-      .catch(() => dispatch(errorFetchingComment()));
-  }
-);
-
-export {
-  startedFetchingComment,
-  finishedFetchingComment,
-  errorFetchingComment,
-  getComment,
-  fetchComment,
-};

src/data/actions/grades.js

@@ -0,0 +1,167 @@
+import {
+  STARTED_FETCHING_GRADES,
+  FINISHED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  GRADE_UPDATE_REQUEST,
+  GRADE_UPDATE_SUCCESS,
+  GRADE_UPDATE_FAILURE,
+  TOGGLE_GRADE_FORMAT,
+  SORT_GRADES,
+  FILTER_COLUMNS,
+  UPDATE_BANNER,
+} from '../constants/actionTypes/grades';
+import LmsApiService from '../services/LmsApiService';
+import store from '../store';
+import { headingMapper, gradeSortMap, sortAlphaAsc } from './utils';
+import apiClient from '../apiClient';
+
+const defaultAssignmentFilter = 'All';
+
+const sortGrades = (columnName, direction) => {
+  const sortFn = gradeSortMap(columnName, direction);
+  const { results } = store.getState().grades;
+  results.sort(sortFn);
+
+  /* have to make a copy of results or React wont know there was
+   * a change and wont trigger a re-render
+   */
+  return ({ type: SORT_GRADES, results: [...results] });
+};
+
+const startedFetchingGrades = () => ({ type: STARTED_FETCHING_GRADES });
+const finishedFetchingGrades = () => ({ type: FINISHED_FETCHING_GRADES });
+const errorFetchingGrades = () => ({ type: ERROR_FETCHING_GRADES });
+const gotGrades = (grades, cohort, track, headings, prev, next) => ({
+  type: GOT_GRADES,
+  grades,
+  cohort,
+  track,
+  headings,
+  prev,
+  next,
+});
+
+const gradeUpdateRequest = () => ({ type: GRADE_UPDATE_REQUEST });
+const gradeUpdateSuccess = responseData => ({
+  type: GRADE_UPDATE_SUCCESS,
+  payload: { responseData },
+});
+const gradeUpdateFailure = error => ({
+  type: GRADE_UPDATE_FAILURE,
+  payload: { error },
+});
+
+
+const toggleGradeFormat = formatType => ({ type: TOGGLE_GRADE_FORMAT, formatType });
+
+const filterColumns = (filterType, exampleUser) => (
+  dispatch => dispatch({
+    type: FILTER_COLUMNS,
+    headings: headingMapper(filterType)(dispatch, exampleUser),
+  })
+);
+
+const updateBanner = showSuccess => ({ type: UPDATE_BANNER, showSuccess });
+
+const fetchGrades = (courseId, cohort, track, showSuccess) => (
+  (dispatch) => {
+    dispatch(startedFetchingGrades());
+    return LmsApiService.fetchGradebookData(courseId, null, 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 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 fetchPrevNextGrades = (endpoint, cohort, track) => (
+  (dispatch) => {
+    dispatch(startedFetchingGrades());
+    return apiClient.get(endpoint)
+      .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());
+      })
+      .catch(() => {
+        dispatch(errorFetchingGrades());
+      });
+  }
+);
+
+
+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));
+      })
+      .catch((error) => {
+        dispatch(gradeUpdateFailure(error));
+      });
+  }
+);
+
+export {
+  startedFetchingGrades,
+  finishedFetchingGrades,
+  errorFetchingGrades,
+  gotGrades,
+  fetchGrades,
+  fetchMatchingUserGrades,
+  fetchPrevNextGrades,
+  gradeUpdateRequest,
+  gradeUpdateSuccess,
+  gradeUpdateFailure,
+  updateGrades,
+  toggleGradeFormat,
+  sortGrades,
+  filterColumns,
+  updateBanner,
+};

src/data/actions/grades.test.js

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

src/data/actions/posts.js

@@ -1,46 +0,0 @@
-import 'whatwg-fetch';
-
-import {
-  STARTED_FETCHING_POSTS,
-  FINISHED_FETCHING_POSTS,
-  GET_POSTS,
-} from '../constants/actionTypes/posts';
-
-const startedFetchingPosts = () => (
-  {
-    type: STARTED_FETCHING_POSTS,
-  }
-);
-
-const finishedFetchingPosts = () => (
-  {
-    type: FINISHED_FETCHING_POSTS,
-  }
-);
-
-const getPosts = posts => (
-  {
-    type: GET_POSTS,
-    posts,
-  }
-);
-
-const fetchPosts = () => (
-  (dispatch) => {
-    dispatch(startedFetchingPosts());
-    return fetch('https://jsonplaceholder.typicode.com/posts')
-      // TODO: handle response error
-      .then(response => response.json())
-      .then((data) => {
-        dispatch(getPosts(data));
-        dispatch(finishedFetchingPosts());
-      });
-  }
-);
-
-export {
-  startedFetchingPosts,
-  finishedFetchingPosts,
-  getPosts,
-  fetchPosts,
-};

src/data/actions/posts.test.js

@@ -1,65 +0,0 @@
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import fetchMock from 'fetch-mock';
-
-import {
-  startedFetchingPosts,
-  finishedFetchingPosts,
-  getPosts,
-  fetchPosts,
-} from './posts';
-import {
-  STARTED_FETCHING_POSTS,
-  GET_POSTS,
-  FINISHED_FETCHING_POSTS,
-} from '../constants/actionTypes/posts';
-
-const mockStore = configureMockStore([thunk]);
-
-describe('actions', () => {
-  afterEach(() => {
-    fetchMock.reset();
-    fetchMock.restore();
-  });
-
-  it('sends started fetching post action', () => {
-    const expected = { type: STARTED_FETCHING_POSTS };
-    expect(startedFetchingPosts()).toEqual(expected);
-  });
-
-  it('sends finished fetching posts', () => {
-    const expected = { type: FINISHED_FETCHING_POSTS };
-    expect(finishedFetchingPosts()).toEqual(expected);
-  });
-
-  it('sends posts', () => {
-    const data = 'data';
-    const expected = { type: GET_POSTS, posts: data };
-    expect(getPosts(data)).toEqual(expected);
-  });
-
-  it('fetches posts', () => {
-    const posts = [
-      {
-        id: 1,
-        title: 'title',
-        body: 'body',
-      },
-    ];
-    fetchMock.getOnce('https://jsonplaceholder.typicode.com/posts', {
-      body: JSON.stringify({ posts }),
-      headers: { 'content-type': 'application/json' },
-    });
-    const store = mockStore({ posts: [] });
-
-    const expectedActions = [
-      { type: STARTED_FETCHING_POSTS },
-      { type: GET_POSTS, posts: { posts } },
-      { type: FINISHED_FETCHING_POSTS },
-    ];
-
-    return store.dispatch(fetchPosts()).then(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-});

src/data/actions/tracks.js

@@ -0,0 +1,31 @@
+import {
+  STARTED_FETCHING_TRACKS,
+  GOT_TRACKS,
+  ERROR_FETCHING_TRACKS,
+} from '../constants/actionTypes/tracks';
+import LmsApiService from '../services/LmsApiService';
+
+const startedFetchingTracks = () => ({ type: STARTED_FETCHING_TRACKS });
+const errorFetchingTracks = () => ({ type: ERROR_FETCHING_TRACKS });
+const gotTracks = tracks => ({ type: GOT_TRACKS, tracks });
+
+const fetchTracks = courseId => (
+  (dispatch) => {
+    dispatch(startedFetchingTracks());
+    return LmsApiService.fetchTracks(courseId)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotTracks(data.course_modes));
+      })
+      .catch(() => {
+        dispatch(errorFetchingTracks());
+      });
+  }
+);
+
+export {
+  fetchTracks,
+  startedFetchingTracks,
+  gotTracks,
+  errorFetchingTracks,
+};

src/data/actions/tracks.test.js

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

src/data/actions/utils.js

@@ -0,0 +1,125 @@
+import { sortGrades } from './grades';
+
+const sortAlphaAsc = (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 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 };
+

src/data/apiClient.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,10 @@
+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';
+
+export {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+};
+

src/data/constants/actionTypes/cohorts.js

@@ -0,0 +1,9 @@
+const STARTED_FETCHING_COHORTS = 'STARTED_FETCHING_COHORTS';
+const GOT_COHORTS = 'GOT_COHORTS';
+const ERROR_FETCHING_COHORTS = 'ERROR_FETCHING_COHORTS';
+
+export {
+  STARTED_FETCHING_COHORTS,
+  GOT_COHORTS,
+  ERROR_FETCHING_COHORTS,
+};

src/data/constants/actionTypes/comment.js

@@ -1,11 +0,0 @@
-const STARTED_FETCHING_COMMENT = 'STARTED_FETCHING_COMMENT';
-const FINISHED_FETCHING_COMMENT = 'FINISHED_FETCHING_COMMENT';
-const ERROR_FETCHING_COMMENT = 'ERROR_FETCHING_COMMENT';
-const GET_COMMENT = 'GET_COMMENT';
-
-export {
-  STARTED_FETCHING_COMMENT,
-  FINISHED_FETCHING_COMMENT,
-  ERROR_FETCHING_COMMENT,
-  GET_COMMENT,
-};

src/data/constants/actionTypes/grades.js

@@ -0,0 +1,27 @@
+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 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';
+
+export {
+  STARTED_FETCHING_GRADES,
+  FINISHED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  GRADE_UPDATE_REQUEST,
+  GRADE_UPDATE_SUCCESS,
+  GRADE_UPDATE_FAILURE,
+  TOGGLE_GRADE_FORMAT,
+  SORT_GRADES,
+  FILTER_COLUMNS,
+  UPDATE_BANNER,
+};

src/data/constants/actionTypes/posts.js

@@ -1,9 +0,0 @@
-const STARTED_FETCHING_POSTS = 'STARTED_FETCHING_POSTS';
-const GET_POSTS = 'GET_POSTS';
-const FINISHED_FETCHING_POSTS = 'FINISHED_FETCHING_POSTS';
-
-export {
-  STARTED_FETCHING_POSTS,
-  GET_POSTS,
-  FINISHED_FETCHING_POSTS,
-};

src/data/constants/actionTypes/tracks.js

@@ -0,0 +1,9 @@
+const STARTED_FETCHING_TRACKS = 'STARTED_FETCHING_TRACKS';
+const GOT_TRACKS = 'GOT_TRACKS';
+const ERROR_FETCHING_TRACKS = 'ERROR_FETCHING_TRACKS';
+
+export {
+  STARTED_FETCHING_TRACKS,
+  GOT_TRACKS,
+  ERROR_FETCHING_TRACKS,
+};

src/data/reducers/assignmentTypes.js

@@ -0,0 +1,39 @@
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+} from '../constants/actionTypes/assignmentTypes';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+
+const assignmentTypes = (state = initialState, action) => {
+  switch (action.type) {
+    case GOT_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        results: action.assignmentTypes,
+        errorFetching: false,
+      };
+    case STARTED_FETCHING_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        startedFetching: true,
+      };
+    case ERROR_FETCHING_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        finishedFetching: true,
+        errorFetching: true,
+      };
+    default:
+      return state;
+  }
+};
+
+export default assignmentTypes;
+

src/data/reducers/cohorts.js

@@ -0,0 +1,40 @@
+import {
+  STARTED_FETCHING_COHORTS,
+  ERROR_FETCHING_COHORTS,
+  GOT_COHORTS,
+} from '../constants/actionTypes/cohorts';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+
+const cohorts = (state = initialState, action) => {
+  switch (action.type) {
+    case GOT_COHORTS:
+      return {
+        ...state,
+        results: action.cohorts,
+        finishedFetching: true,
+        errorFetching: false,
+      };
+    case STARTED_FETCHING_COHORTS:
+      return {
+        ...state,
+        startedFetching: true,
+      };
+    case ERROR_FETCHING_COHORTS:
+      return {
+        ...state,
+        finishedFetching: true,
+        errorFetching: true,
+      };
+    default:
+      return state;
+  }
+};
+
+export default cohorts;
+

src/data/reducers/cohorts.test.js

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

src/data/reducers/comment.js

@@ -1,46 +0,0 @@
-import {
-  STARTED_FETCHING_COMMENT,
-  ERROR_FETCHING_COMMENT,
-  GET_COMMENT,
-} from '../constants/actionTypes/comment';
-
-const initialState = {
-  details: {
-    id: null,
-    postId: null,
-    name: '',
-    email: 'example@example.com',
-    body: '',
-  },
-  startedFetching: false,
-  finishedFetching: false,
-  errorFetching: false,
-};
-
-const comment = (state = initialState, action) => {
-  switch (action.type) {
-    case GET_COMMENT:
-      return {
-        ...state,
-        details: { ...action.comment },
-        finishedFetching: true,
-        errorFetching: false,
-      };
-    case STARTED_FETCHING_COMMENT:
-      return {
-        ...state,
-        startedFetching: true,
-        finishedFetching: false,
-      };
-    case ERROR_FETCHING_COMMENT:
-      return {
-        ...state,
-        finishedFetching: true,
-        errorFetching: true,
-      };
-    default:
-      return state;
-  }
-};
-
-export default comment;

src/data/reducers/grades.js

@@ -0,0 +1,78 @@
+import {
+  STARTED_FETCHING_GRADES,
+  ERROR_FETCHING_GRADES,
+  GOT_GRADES,
+  TOGGLE_GRADE_FORMAT,
+  FILTER_COLUMNS,
+  GRADE_UPDATE_SUCCESS,
+  UPDATE_BANNER,
+  SORT_GRADES,
+} from '../constants/actionTypes/grades';
+
+const initialState = {
+  results: [],
+  headings: [],
+  startedFetching: false,
+  finishedFetching: false,
+  errorFetching: false,
+  gradeFormat: 'percent',
+  showSuccess: false,
+  prevPage: null,
+  nextPage: null,
+  showSpinner: true,
+};
+
+const grades = (state = initialState, action) => {
+  switch (action.type) {
+    case GOT_GRADES:
+      return {
+        ...state,
+        results: action.grades,
+        headings: action.headings,
+        finishedFetching: true,
+        errorFetching: false,
+        selectedTrack: action.track,
+        selectedCohort: action.cohort,
+        prevPage: action.prev,
+        nextPage: action.next,
+        showSpinner: false,
+      };
+    case STARTED_FETCHING_GRADES:
+      return {
+        ...state,
+        startedFetching: true,
+        finishedFetching: false,
+        showSpinner: true,
+      };
+    case ERROR_FETCHING_GRADES:
+      return {
+        ...state,
+        finishedFetching: true,
+        errorFetching: true,
+      };
+    case TOGGLE_GRADE_FORMAT:
+      return {
+        ...state,
+        gradeFormat: action.formatType,
+      };
+    case FILTER_COLUMNS:
+      return {
+        ...state,
+        headings: action.headings,
+      };
+    case UPDATE_BANNER:
+      return {
+        ...state,
+        showSuccess: action.showSuccess,
+      };
+    case SORT_GRADES:
+      return {
+        ...state,
+        results: action.results,
+      };
+    default:
+      return state;
+  }
+};
+
+export default grades;

src/data/reducers/index.js

@@ -1,11 +1,15 @@
 import { combineReducers } from 'redux';
 
-import posts from './posts';
-import comment from './comment';
+import cohorts from './cohorts';
+import grades from './grades';
+import tracks from './tracks';
+import assignmentTypes from './assignmentTypes';
 
 const rootReducer = combineReducers({
-  posts,
-  comment,
+  grades,
+  cohorts,
+  tracks,
+  assignmentTypes,
 });
 
 export default rootReducer;

src/data/reducers/posts.js

@@ -1,31 +0,0 @@
-import {
-  GET_POSTS,
-  STARTED_FETCHING_POSTS,
-  FINISHED_FETCHING_POSTS,
-} from '../constants/actionTypes/posts';
-
-const posts = (state = { posts: [], startedFetching: false, finishedFetching: false }, action) => {
-  switch (action.type) {
-    case GET_POSTS:
-      return {
-        ...state,
-        posts: action.posts,
-      };
-    case STARTED_FETCHING_POSTS:
-      return {
-        ...state,
-        startedFetching: true,
-        finishedFetching: false,
-      };
-    case FINISHED_FETCHING_POSTS:
-      return {
-        ...state,
-        startedFetching: false,
-        finishedFetching: true,
-      };
-    default:
-      return state;
-  }
-};
-
-export default posts;

src/data/reducers/posts.test.js

@@ -1,45 +0,0 @@
-import posts from './posts';
-import {
-  GET_POSTS,
-  STARTED_FETCHING_POSTS,
-  FINISHED_FETCHING_POSTS,
-} from '../constants/actionTypes/posts';
-
-const initialState = {
-  posts: [],
-  startedFetching: false,
-  finishedFetching: false,
-};
-
-describe('posts reducer', () => {
-  it('has initial state', () => {
-    expect(posts(undefined, {})).toEqual(initialState);
-  });
-
-  it('adds posts', () => {
-    const fetchedPosts = [1, 2, 3];
-    const expected = {
-      ...initialState,
-      posts: fetchedPosts,
-    };
-    expect(posts(undefined, { type: GET_POSTS, posts: fetchedPosts })).toEqual(expected);
-  });
-
-  it('updates started fetching posts state', () => {
-    const expected = {
-      ...initialState,
-      startedFetching: true,
-      finishedFetching: false,
-    };
-    expect(posts(undefined, { type: STARTED_FETCHING_POSTS })).toEqual(expected);
-  });
-
-  it('updates finished fetching posts state', () => {
-    const expected = {
-      ...initialState,
-      startedFetching: false,
-      finishedFetching: true,
-    };
-    expect(posts(undefined, { type: FINISHED_FETCHING_POSTS })).toEqual(expected);
-  });
-});

src/data/reducers/tracks.js

@@ -0,0 +1,39 @@
+import {
+  STARTED_FETCHING_TRACKS,
+  ERROR_FETCHING_TRACKS,
+  GOT_TRACKS,
+} from '../constants/actionTypes/tracks';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+
+const tracks = (state = initialState, action) => {
+  switch (action.type) {
+    case GOT_TRACKS:
+      return {
+        ...state,
+        results: action.tracks,
+        errorFetching: false,
+      };
+    case STARTED_FETCHING_TRACKS:
+      return {
+        ...state,
+        startedFetching: true,
+      };
+    case ERROR_FETCHING_TRACKS:
+      return {
+        ...state,
+        finishedFetching: true,
+        errorFetching: true,
+      };
+    default:
+      return state;
+  }
+};
+
+export default tracks;
+

src/data/services/LmsApiService.js

@@ -0,0 +1,64 @@
+import apiClient from '../apiClient';
+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}/`;
+
+    gradebookUrl += `?page_size=${LmsApiService.pageSize}&`;
+    if (searchText) {
+      gradebookUrl += `username_contains=${searchText}&`;
+    }
+    if (cohort) {
+      gradebookUrl += `cohort_id=${cohort}&`;
+    }
+    if (track) {
+      gradebookUrl += `enrollment_mode=${track}`;
+    }
+    return apiClient.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',
+       each of which should be an integer.
+       Example:
+       [
+         {
+            "user_id": 9,
+            "usage_id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions",
+            "grade": {
+              "earned_all_override": 11,
+              "possible_all_override": 11,
+              "earned_graded_override": 11,
+              "possible_graded_override": 11
+            }
+          }
+        ]
+    */
+    const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/bulk-update`;
+    return apiClient.post(gradebookUrl, updateData);
+  }
+
+  static fetchTracks(courseId) {
+    const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}`;
+    return apiClient.get(trackUrl);
+  }
+
+  static fetchCohorts(courseId) {
+    const cohortsUrl = `${LmsApiService.baseUrl}/courses/${courseId}/cohorts/`;
+    return apiClient.get(cohortsUrl);
+  }
+
+  static fetchAssignmentTypes(courseId) {
+    const assignmentTypesUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`;
+    return apiClient.get(assignmentTypesUrl);
+  }
+}
+
+export default LmsApiService;

src/index.jsx

@@ -1,10 +1,12 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
+import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
+import Header from './components/Header';
 import store from './data/store';
 import './App.scss';
 
@@ -12,16 +14,10 @@ const App = () => (
   <Provider store={store}>
     <Router>
       <div>
-        <header>
-          <nav>
-            <ul className="nav">
-              <li className="nav-item"><Link className="nav-link" to="/">Home</Link></li>
-            </ul>
-          </nav>
-        </header>
+        <Header />
         <main>
           <Switch>
-            <Route exact path="/" component={GradebookPage} />
+            <Route exact path="/:courseId" component={GradebookPage} />
           </Switch>
         </main>
       </div>
@@ -29,4 +25,6 @@ const App = () => (
   </Provider>
 );
 
-ReactDOM.render(<App />, document.getElementById('root'));
+if (apiClient.ensurePublicOrAuthencationAndCookies(window.location.pathname)) {
+  ReactDOM.render(<App />, document.getElementById('root'));
+}

src/setupTest.js

@@ -4,3 +4,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.LMS_BASE_URL = 'http://localhost:18000';