Merge pull request #75 from edx/jkantor/a11y-2

fix(a11y): add select aria-labels, row headers
2019-01-16 10:16:14 -05:00 · 2019-01-15 16:40:38 -05:00 · 2019-01-10 14:32:19 -05:00 · 2019-01-09 16:38:01 -05:00 · 2019-01-08 16:39:25 -05:00 · 2019-01-08 15:28:30 -05:00
33 changed files with 12091 additions and 10615 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 .eslintcache
+.idea
 node_modules
 npm-debug.log
 coverage
--- a/29
+++ b/29
@@ -1,29 +0,0 @@
-# Copied from https://github.com/BretFisher/node-docker-good-defaults/blob/master/Dockerfile
-
-FROM node:8.9.3
-
-# Create app directory
-RUN mkdir -p /edx/app
-
-ARG NODE_ENV=production
-ENV NODE_ENV $NODE_ENV
-
-ARG PORT=80
-ENV PORT $PORT
-EXPOSE $PORT 1991
-
-WORKDIR /edx
-# Install app dependencies
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-# where available (npm@5+)
-COPY package*.json ./
-
-# If you are building your code for production
-# RUN npm install --only=production
-RUN npm install
-ENV PATH /edx/app/node_modules/.bin:$PATH
-
-WORKDIR /edx/app
-COPY . /edx/app
-
-ENTRYPOINT npm install && npm run start
--- a/32
+++ b/32
@@ -1,35 +1,9 @@
-shell: ## run a shell on the cookie-cutter container
-	docker exec -it edx.gradebook /bin/bash
-
-build:
-	docker-compose build
-
-up: ## bring up cookie-cutter container
-	docker-compose up
-
-up-detached: ## bring up cookie-cutter container in detached mode
-	docker-compose up -d
-
-logs: ## show logs for cookie-cutter container
-	docker-compose logs -f
-
-down: ## stop and remove cookie-cutter container
-	docker-compose down
-
-npm-install-%: ## install specified % npm package on the cookie-cutter container
-	docker exec npm install $* --save-dev
+npm-install-%: ## install specified % npm package
+	npm install $* --save-dev
 	git add package.json

-restart:
-	make down
-	make up
-
-restart-detached:
-	make down
-	make up-detached
-
 validate-no-uncommitted-package-lock-changes:
 	git diff --exit-code package-lock.json

 test:
-	docker exec -it edx.gradebook jest 
+	npm run test 
--- a/README.md
+++ b/README.md
@@ -21,20 +21,20 @@ npm i --save @edx/gradebook

 ## Running the UI Standalone

-After cloning the repository, run `make up-detached` in the `gradebook` directory - this will build and start the `gradebook` web application in a docker container.
+To install the project please refer to the [`edX Developer Stack`](https://github.com/edx/devstack) instructions.

-The web application runs on port **1991**, so when you go to `http://localhost:1991` you should see the UI.
+The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.

-If you don't, you can see the log messages for the docker container by executing `make logs` in the `gradebook` directory.
+If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.

-Note that `make up-detached` executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
+Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.

 ## Configuring for local use in edx-platform

-Assuming you've got the UI running at `http://localhost:1991`, you can configure the LMS in edx-platform
+Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
 to point to your local gradebook from the instructor dashboard by putting this settings in `lms/env/private.py`:
 ```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1991'
+WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
 ```

 There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
--- a/assets/edx-footer.png
+++ b/assets/edx-footer.png
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -97,7 +97,7 @@ module.exports = Merge.smart(commonConfig, {
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
-      BASE_URL: 'localhost:1991',
+      BASE_URL: 'localhost:1994',
      LMS_BASE_URL: 'http://localhost:18000',
      LOGIN_URL: 'http://localhost:18000/login',
      LOGOUT_URL: 'http://localhost:18000/login',
@@ -110,6 +110,21 @@ module.exports = Merge.smart(commonConfig, {
      FEATURE_FLAGS: {},
      ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
      CSRF_COOKIE_NAME: 'csrftoken',
+      SITE_NAME: 'edX',
+      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+      SUPPORT_URL: 'http://localhost:18000/support',
+      CONTACT_URL: 'http://localhost:18000/contact',
+      OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
+      TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
+      PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
+      FACEBOOK_URL: 'https://www.facebook.com',
+      TWITTER_URL: 'https://twitter.com',
+      YOU_TUBE_URL: 'https://www.youtube.com',
+      LINKED_IN_URL: 'https://www.linkedin.com',
+      GOOGLE_PLUS_URL: 'https://plus.google.com',
+      REDDIT_URL: 'https://www.reddit.com',
+      APPLE_APP_STORE_URL: 'https://www.apple.com/ios/app-store/',
+      GOOGLE_PLAY_URL: 'https://play.google.com/store',
    }),
    // when the --hot option is not passed in as part of the command
    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
@@ -120,7 +135,7 @@ module.exports = Merge.smart(commonConfig, {
  // reloading.
  devServer: {
    host: '0.0.0.0',
-    port: 1991,
+    port: 1994,
    historyApiFallback: true,
    hot: true,
    inline: true,
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -4,8 +4,8 @@ const Merge = require('webpack-merge');
 const commonConfig = require('./webpack.common.config.js');
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 module.exports = Merge.smart(commonConfig, {
  mode: 'production',
@@ -38,29 +38,27 @@ module.exports = Merge.smart(commonConfig, {
      // increases build time.
      {
        test: /(.scss|.css)$/,
-        use: ExtractTextPlugin.extract({
-          // creates style nodes from JS strings, only used if extracting fails
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader', // translates CSS into CommonJS
-              options: {
-                sourceMap: true,
-                minimize: true,
-              },
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+            options: {
+              sourceMap: true,
+              minimize: true,
            },
-            {
-              loader: 'sass-loader', // compiles Sass to CSS
-              options: {
-                sourceMap: true,
-                includePaths: [
-                  path.join(__dirname, '../node_modules'),
-                  path.join(__dirname, '../src'),
-                ],
-              },
+          },
+          'postcss-loader',
+          {
+            loader: 'sass-loader', // compiles Sass to CSS
+            options: {
+              sourceMap: true,
+              includePaths: [
+                path.join(__dirname, '../node_modules'),
+                path.join(__dirname, '../src'),
+              ],
            },
-          ],
-        }),
+          },
+        ],
      },
      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
      // files it processes, which just base64 encodes them and inlines them in the javascript
@@ -105,9 +103,8 @@ module.exports = Merge.smart(commonConfig, {
  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
  plugins: [
    // Writes the extracted CSS from each entry to a file in the output directory.
-    new ExtractTextPlugin({
-      filename: '[name].min.css',
-      allChunks: true,
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css',
    }),
    // Generates an HTML file in the output directory.
    new HtmlWebpackPlugin({
@@ -129,6 +126,21 @@ module.exports = Merge.smart(commonConfig, {
      CSRF_COOKIE_NAME: 'csrftoken',
      NEW_RELIC_APP_ID: null,
      NEW_RELIC_LICENSE_KEY: null,
+      SITE_NAME: null,
+      MARKETING_SITE_BASE_URL: null,
+      SUPPORT_URL: null,
+      CONTACT_URL: null,
+      OPEN_SOURCE_URL: null,
+      TERMS_OF_SERVICE_URL: null,
+      PRIVACY_POLICY_URL: null,
+      FACEBOOK_URL: null,
+      TWITTER_URL: null,
+      YOU_TUBE_URL: null,
+      LINKED_IN_URL: null,
+      GOOGLE_PLUS_URL: null,
+      REDDIT_URL: null,
+      APPLE_APP_STORE_URL: null,
+      GOOGLE_PLAY_URL: null,
    }),
  ],
 });
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,20 +0,0 @@
-version: "2"
-services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      args:
-        - NODE_ENV=development
-    container_name: edx.gradebook
-    image: edxops/front-end-cookie-cutter:latest
-    volumes:
-      - .:/edx/app:delegated
-      - notused:/edx/app/node_modules
-    ports:
-      - "1991:1991"
-    environment:
-      - NODE_ENV=development
-
-volumes:
-  notused:
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,8 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+nick: grbk
+oeps: {}
+owner: edx/educator-neem
+openedx-release: {ref: master}
+track-pulls: true
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -25,64 +25,67 @@
  },
  "dependencies": {
    "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.2.1",
-    "@edx/paragon": "^3.7.2",
+    "@edx/frontend-auth": "^1.3.0",
+    "@edx/frontend-component-footer": "^1.0.0",
+    "@edx/paragon": "^3.8.3",
    "babel-polyfill": "^6.26.0",
-    "classnames": "^2.2.5",
-    "email-prop-type": "^1.1.5",
+    "classnames": "^2.2.6",
+    "email-prop-type": "^1.1.7",
    "font-awesome": "^4.7.0",
    "history": "^4.7.2",
-    "prop-types": "^15.5.10",
-    "query-string": "^6.2.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "prop-types": "^15.6.2",
+    "query-string": "^5.1.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-redux": "^5.1.1",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "^3.7.2",
-    "redux-devtools-extension": "^2.13.2",
+    "redux-devtools-extension": "^2.13.7",
    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "^2.0.3"
+    "redux-thunk": "^2.3.0",
+    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
-    "axios-mock-adapter": "^1.15.0",
+    "autoprefixer": "^9.4.5",
+    "axios-mock-adapter": "^1.16.0",
    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.0",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^22.4.4",
+    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
-    "codecov": "^3.0.0",
-    "css-loader": "^0.28.9",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "es-check": "^2.0.2",
-    "eslint-config-edx": "^4.0.3",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fetch-mock": "^6.3.0",
+    "codecov": "^3.1.0",
+    "css-loader": "^0.28.11",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "es-check": "^2.3.0",
+    "eslint-config-edx": "^4.0.4",
+    "fetch-mock": "^6.5.2",
    "file-loader": "^1.1.9",
    "html-webpack-harddisk-plugin": "^0.2.0",
-    "html-webpack-plugin": "^3.0.3",
+    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.14.3",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^4.2.0",
-    "jest": "^22.4.0",
-    "node-sass": "^4.7.2",
-    "react-dev-utils": "^5.0.0",
-    "react-test-renderer": "^16.2.0",
-    "redux-mock-store": "^1.5.1",
+    "jest": "^22.4.4",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.11.0",
+    "postcss-loader": "^3.0.0",
+    "react-dev-utils": "^5.0.3",
+    "react-test-renderer": "^16.7.0",
+    "redux-mock-store": "^1.5.3",
    "sass-loader": "^6.0.6",
-    "semantic-release": "^15.10.7",
-    "style-loader": "^0.20.2",
-    "travis-deploy-once": "^5.0.9",
-    "webpack": "^4.1.0",
-    "webpack-cli": "^2.0.10",
-    "webpack-dev-server": "^3.1.0",
-    "webpack-merge": "^4.1.1"
+    "semantic-release": "^15.13.3",
+    "style-loader": "^0.20.3",
+    "travis-deploy-once": "^5.0.11",
+    "webpack": "^4.28.4",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
  },
  "jest": {
    "setupFiles": [
@@ -103,6 +106,7 @@
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!(@edx/paragon)/).*/"
-    ]
+    ],
+    "testURL": "http://localhost"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,9 @@
 <!doctype html>
-<html>
+<html lang="en-us">
  <head>
+      <title>Gradebook | edX</title>
      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  </head>
  <body>
    <div id="root"></div>
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,4 +6,6 @@ $fa-font-path: "~font-awesome/fonts";

@import "~@edx/paragon/src/SearchField/SearchField";

+@import "~@edx/frontend-component-footer/src/lib/scss/site-footer";
+
@import "./components/Gradebook/gradebook";
--- a/src/components/Gradebook/gradebook.scss
+++ b/src/components/Gradebook/gradebook.scss
@@ -68,6 +68,10 @@
        padding-left: 170px;
    }

+    .table tbody th {
+        font-weight: normal;
+    }
+
    .link-style {
        color: #0075b4;
        &:hover, &:focus {
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -10,6 +10,7 @@ import {
 } from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
+import PageButtons from '../PageButtons';

 const DECIMAL_PRECISION = 2;

@@ -28,28 +29,27 @@ export default class Gradebook extends React.Component {

  componentDidMount() {
    const urlQuery = queryString.parse(this.props.location.search);
-    this.props.getUserGrades(
-      this.props.match.params.courseId,
-      urlQuery.cohort,
-      urlQuery.track,
-    );
-    this.props.getTracks(this.props.match.params.courseId);
-    this.props.getCohorts(this.props.match.params.courseId);
-    this.props.getAssignmentTypes(this.props.match.params.courseId);
+    this.props.getRoles(this.props.match.params.courseId, urlQuery);
  }

  setNewModalState = (userEntry, subsection) => {
+    let adjustedGradePossible = '';
+    let currentGradePossible = '';
+    if (subsection.attempted) {
+      adjustedGradePossible = ` / ${subsection.score_possible}`;
+      currentGradePossible = `/${subsection.score_possible}`;
+    }
    this.setState({
      modalModel: [{
        username: userEntry.username,
-        currentGrade: `${subsection.score_earned}/${subsection.score_possible}`,
+        currentGrade: `${subsection.score_earned}${currentGradePossible}`,
        adjustedGrade: (
          <span>
            <input
              style={{ width: '25px' }}
              type="text"
              onChange={event => this.setState({ updateVal: event.target.value })}
-            /> / {subsection.score_possible}
+            />{adjustedGradePossible}
          </span>
        ),
        assignmentName: `${subsection.subsection_name}`,
@@ -179,36 +179,51 @@ export default class Gradebook extends React.Component {
  roundGrade = percent => parseFloat(percent.toFixed(DECIMAL_PRECISION));

  formatter = {
-    percent: entries => entries.map((entry) => {
+    percent: (entries, areGradesFrozen) => entries.map((entry) => {
      const results = { username: entry.username };
      const assignments = entry.section_breakdown
        .filter(section => section.is_graded)
        .reduce((acc, subsection) => {
-          acc[subsection.label] = (
-            <button
-              className="btn btn-header link-style"
-              onClick={() => this.setNewModalState(entry, subsection)}
-            >
-              {this.roundGrade(subsection.percent * 100)}%
-            </button>);
+          if (areGradesFrozen) {
+            acc[subsection.label] = `${this.roundGrade(subsection.percent * 100)} %`;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {this.roundGrade(subsection.percent * 100)}%
+              </button>);
+          }
          return acc;
        }, {});
      const totals = { total: `${this.roundGrade(entry.percent * 100)}%` };
      return Object.assign(results, assignments, totals);
    }),

-    absolute: entries => entries.map((entry) => {
+    absolute: (entries, areGradesFrozen) => entries.map((entry) => {
      const results = { username: entry.username };
      const assignments = entry.section_breakdown
        .filter(section => section.is_graded)
        .reduce((acc, subsection) => {
-          acc[subsection.label] = (
-            <button
-              className="btn btn-header link-style"
-              onClick={() => this.setNewModalState(entry, subsection)}
-            >
-              {this.roundGrade(subsection.score_earned)}/{this.roundGrade(subsection.score_possible)}
-            </button>);
+          const scoreEarned = this.roundGrade(subsection.score_earned);
+          const scorePossible = this.roundGrade(subsection.score_possible);
+          let label = `${scoreEarned}`;
+          if (subsection.attempted) {
+            label = `${scoreEarned}/${scorePossible}`;
+          }
+          if (areGradesFrozen) {
+            acc[subsection.label] = label;
+          } else {
+            acc[subsection.label] = (
+              <button
+                className="btn btn-header link-style"
+                onClick={() => this.setNewModalState(entry, subsection)}
+              >
+                {label}
+              </button>
+            );
+          }
          return acc;
        }, {});

@@ -229,15 +244,25 @@ export default class Gradebook extends React.Component {
              href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
              className="mb-3"
            >
-              {'<< Back to Dashboard'}
+              <span aria-hidden="true">{'<< '}</span> {'Back to Dashboard'}
            </a>
            <h1>Gradebook</h1>
            <h3> {this.props.match.params.courseId}</h3>
+            { this.props.areGradesFrozen &&
+              <div className="alert alert-warning" role="alert" >
+                The grades for this course are now frozen. Editing of grades is no longer allowed.
+              </div>
+            }
+            { (this.props.canUserViewGradebook === false) &&
+              <div className="alert alert-warning" role="alert" >
+                You are not authorized to view the gradebook for this course.
+              </div>
+            }
            <hr />
            <div className="d-flex justify-content-between" >
              <div>
-                <div>
-                  Score View:
+                <div role="radiogroup" aria-labelledby="score-view-group-label">
+                  <span id="score-view-group-label">Score View:</span>
                  <span>
                    <input
                      id="score-view-percent"
@@ -245,6 +270,7 @@ export default class Gradebook extends React.Component {
                      type="radio"
                      name="score-view"
                      value="percent"
+                      defaultChecked
                      onClick={() => this.props.toggleFormat('percent')}
                    />
                    <label className="mr-2" htmlFor="score-view-percent">Percent</label>
@@ -268,39 +294,38 @@ export default class Gradebook extends React.Component {
                    </span>
                    <InputSelect
                      name="assignment-types"
+                      ariaLabel="Assignment Types"
                      value={this.mapSelectedTrackEntry(this.props.selectedAssignmentType)}
                      options={this.mapAssignmentTypeEntries(this.props.assignmnetTypes)}
                      onChange={this.updateAssignmentTypes}
                    />
                  </div>
                }
-                {(this.props.tracks.length > 0 || this.props.cohorts.length > 0) &&
-                  <div className="student-filters">
-                    <span className="label">
-                      Student Groups:
-                    </span>
-                    {this.props.tracks.length > 0 &&
-                      <InputSelect
-                        name="Tracks"
-                        value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
-                        options={this.mapTracksEntries(this.props.tracks)}
-                        onChange={this.updateTracks}
-                      />
-                    }
-                    {this.props.cohorts.length > 0 &&
-                      <InputSelect
-                        name="Cohorts"
-                        value={this.mapSelectedCohortEntry(this.props.selectedCohort)}
-                        options={this.mapCohortsEntries(this.props.cohorts)}
-                        onChange={this.updateCohorts}
-                      />
-                    }
-                  </div>
-                }
+                <div className="student-filters">
+                  <span className="label">
+                    Student Groups:
+                  </span>
+                  <InputSelect
+                    name="Tracks"
+                    ariaLabel="Tracks"
+                    disabled={this.props.tracks.length === 0}
+                    value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
+                    options={this.mapTracksEntries(this.props.tracks)}
+                    onChange={this.updateTracks}
+                  />
+                  <InputSelect
+                    name="Cohorts"
+                    ariaLabel="Cohorts"
+                    disabled={this.props.cohorts.length === 0}
+                    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>
+                  <a href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Generate Grade Report</a>
                </div>
                <SearchField
                  onSubmit={value => this.props.searchForUser(this.props.match.params.courseId, value, this.props.selectedCohort, this.props.selectedTrack)}
@@ -308,21 +333,6 @@ export default class Gradebook extends React.Component {
                  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 />
@@ -332,18 +342,22 @@ export default class Gradebook extends React.Component {
              onClose={() => this.props.updateBanner(false)}
              open={this.props.showSuccess}
            />
+            {PageButtons(this.props)}
            <div className="gbook">
              <Table
                columns={this.props.headings}
-                data={this.formatter[this.props.format](this.props.grades)}
+                data={this.formatter[this.props.format](this.props.grades, this.props.areGradesFrozen)}
                tableSortable
                defaultSortDirection="asc"
                defaultSortedColumn="username"
+                rowHeaderColumnKey="username"
              />
            </div>
+            {PageButtons(this.props)}
            <Modal
              open={this.state.modalOpen}
              title="Edit Grades"
+              closeText="Cancel"
              body={(
                <div>
                  <h3>{this.state.modalModel[0].assignmentName}</h3>
@@ -351,11 +365,12 @@ export default class Gradebook extends React.Component {
                    columns={[{ label: 'Username', key: 'username' }, { label: 'Current grade', key: 'currentGrade' }, { label: 'Adjusted grade', key: 'adjustedGrade' }]}
                    data={this.state.modalModel}
                  />
+                  <div>Note: Once you save, your changes will be visible to students.</div>
                </div>
              )}
              buttons={[
                <Button
-                  label="Edit Grade"
+                  label="Save Grade"
                  buttonType="primary"
                  onClick={this.handleAdjustedGradeClick}
                />,
--- a/src/components/PageButtons/PageButtons.test.jsx
+++ b/src/components/PageButtons/PageButtons.test.jsx
@@ -0,0 +1,36 @@
+import renderer from 'react-test-renderer';
+import PageButtons from '.';
+
+const createInput = function createInput(prevPage, nextPage) {
+  return {
+    prevPage,
+    nextPage,
+    selectedTrack: 't',
+    selectedCohort: 'c',
+    getPrevNextGrades() {},
+  };
+};
+
+describe('PageButtons', () => {
+  const assertPageButtonsSnapshot = function assertPageButtonsSnapshot(input) {
+    const pb = renderer.create(PageButtons(input));
+    const tree = pb.toJSON();
+    expect(tree).toMatchSnapshot();
+  };
+
+  it('prev null, next null', () => {
+    assertPageButtonsSnapshot(createInput(null, null));
+  });
+
+  it('prev null, next not null', () => {
+    assertPageButtonsSnapshot(createInput(null, 'np'));
+  });
+
+  it('prev not null, next null', () => {
+    assertPageButtonsSnapshot(createInput('pp', null));
+  });
+
+  it('prev not null, next not null', () => {
+    assertPageButtonsSnapshot(createInput('pp', 'np'));
+  });
+});
--- a/src/components/PageButtons/snapshots/PageButtons.test.jsx.snap
+++ b/src/components/PageButtons/snapshots/PageButtons.test.jsx.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageButtons prev not null, next not null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev not null, next null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev null, next not null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
+
+exports[`PageButtons prev null, next null 1`] = `
+<div
+  className="d-flex justify-content-center"
+  style={
+    Object {
+      "paddingBottom": "20px",
+    }
+  }
+>
+  <button
+    className="btn btn-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Previous Page
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    style={
+      Object {
+        "margin": "20px",
+      }
+    }
+    type="button"
+  >
+    Next Page
+  </button>
+</div>
+`;
--- a/src/components/PageButtons/index.jsx
+++ b/src/components/PageButtons/index.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Button,
+} from '@edx/paragon';
+
+
+export default function PageButtons({prevPage, nextPage, selectedTrack, selectedCohort, getPrevNextGrades}) {
+  return (
+    <div
+      className="d-flex justify-content-center"
+      style={{ paddingBottom: '20px' }}
+    >
+      <Button
+        label="Previous Page"
+        style={{ margin: '20px' }}
+        buttonType="primary"
+        disabled={!prevPage}
+        onClick={() => getPrevNextGrades(prevPage, selectedCohort, selectedTrack)}
+      />
+      <Button
+        label="Next Page"
+        style={{ margin: '20px' }}
+        buttonType="primary"
+        disabled={!nextPage}
+        onClick={() => getPrevNextGrades(nextPage, selectedCohort, selectedTrack)}
+      />
+    </div>
+  );
+}
+
--- a/src/containers/GradebookPage/index.jsx
+++ b/src/containers/GradebookPage/index.jsx
@@ -13,6 +13,7 @@ import {
 import { fetchCohorts } from '../../data/actions/cohorts';
 import { fetchTracks } from '../../data/actions/tracks';
 import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
+import { getRoles } from '../../data/actions/roles';

 const mapStateToProps = state => (
  {
@@ -27,10 +28,22 @@ const mapStateToProps = state => (
    prevPage: state.grades.prevPage,
    nextPage: state.grades.nextPage,
    assignmnetTypes: state.assignmentTypes.results,
-    showSpinner: state.grades.showSpinner,
+    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
+    showSpinner: shouldShowSpinner(state),
+    canUserViewGradebook: state.roles.canUserViewGradebook
  }
 );

+function shouldShowSpinner (state) {
+  if (state.roles.canUserViewGradebook === true){
+    return state.grades.showSpinner;
+  } else if (state.roles.canUserViewGradebook === false){
+    return false;
+  } else { // canUserViewGradebook === null
+    return true;
+  }
+}
+
 const mapDispatchToProps = dispatch => (
  {
    getUserGrades: (courseId, cohort, track) => {
@@ -63,6 +76,9 @@ const mapDispatchToProps = dispatch => (
    updateBanner: (showSuccess) => {
      dispatch(updateBanner(showSuccess));
    },
+    getRoles: (matchParams, urlQuery) => {
+      dispatch(getRoles(matchParams, urlQuery));
+    },
  }
 );

--- a/src/data/actions/assignmentTypes.js
+++ b/src/data/actions/assignmentTypes.js
@@ -2,12 +2,14 @@ import {
  STARTED_FETCHING_ASSIGNMENT_TYPES,
  GOT_ASSIGNMENT_TYPES,
  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';
 import LmsApiService from '../services/LmsApiService';

 const startedFetchingAssignmentTypes = () => ({ type: STARTED_FETCHING_ASSIGNMENT_TYPES });
 const errorFetchingAssignmentTypes = () => ({ type: ERROR_FETCHING_ASSIGNMENT_TYPES });
 const gotAssignmentTypes = assignmentTypes => ({ type: GOT_ASSIGNMENT_TYPES, assignmentTypes });
+const gotGradesFrozen = areGradesFrozen => ({ type: GOT_ARE_GRADES_FROZEN, areGradesFrozen });

 const fetchAssignmentTypes = courseId => (
  (dispatch) => {
@@ -16,6 +18,7 @@ const fetchAssignmentTypes = courseId => (
      .then(response => response.data)
      .then((data) => {
        dispatch(gotAssignmentTypes(Object.keys(data.assignment_types)));
+        dispatch(gotGradesFrozen(data.grades_frozen));
      })
      .catch(() => {
        dispatch(errorFetchingAssignmentTypes());
--- a/src/data/actions/assignmentTypes.test.js
+++ b/src/data/actions/assignmentTypes.test.js
@@ -9,6 +9,7 @@ import {
  STARTED_FETCHING_ASSIGNMENT_TYPES,
  GOT_ASSIGNMENT_TYPES,
  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';

 const mockStore = configureMockStore([thunk]);
@@ -21,29 +22,30 @@ describe('actions', () => {

  describe('fetchAssignmentTypes', () => {
    const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-    it('dispatches success action after fetching fetchAssignmentTypes', () => {
-      const responseData = {
-        assignment_types: {
-          Exam: {
-            drop_count: 0,
-            min_count: 1,
-            short_label: 'Exam',
-            type: 'Exam',
-            weight: 0.25,
-          },
-          Homework: {
-            drop_count: 1,
-            min_count: 3,
-            short_label: 'Ex',
-            type: 'Homework',
-            weight: 0.75,
-          },
+    const responseData = {
+      assignment_types: {
+        Exam: {
+          drop_count: 0,
+          min_count: 1,
+          short_label: 'Exam',
+          type: 'Exam',
+          weight: 0.25,
        },
-      };
+        Homework: {
+          drop_count: 1,
+          min_count: 3,
+          short_label: 'Ex',
+          type: 'Homework',
+          weight: 0.75,
+        },
+      },
+      grades_frozen: false,
+    };
+    it('dispatches success action after fetching fetchAssignmentTypes', () => {
      const expectedActions = [
        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
        { type: GOT_ASSIGNMENT_TYPES, assignmentTypes: Object.keys(responseData.assignment_types) },
+        { type: GOT_ARE_GRADES_FROZEN, areGradesFrozen: responseData.grades_frozen },
      ];
      const store = mockStore();

@@ -69,5 +71,21 @@ describe('actions', () => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    });
+
+    it('dispatches frozen grade action with True value after fetching', () => {
+      const expectedActions = [
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+        { type: GOT_ASSIGNMENT_TYPES, assignmentTypes: Object.keys(responseData.assignment_types) },
+        { type: GOT_ARE_GRADES_FROZEN, areGradesFrozen: true },
+      ];
+      const store = mockStore();
+      responseData.grades_frozen = true;
+      axiosMock.onGet(`${configuration.LMS_BASE_URL}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`)
+        .replyOnce(200, JSON.stringify(responseData));
+
+      return store.dispatch(fetchAssignmentTypes(courseId)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
  });
 });
--- a/src/data/actions/roles.js
+++ b/src/data/actions/roles.js
@@ -0,0 +1,38 @@
+import {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+} from '../constants/actionTypes/roles';
+import { fetchGrades } from './grades';
+import { fetchTracks } from './tracks';
+import { fetchCohorts } from './cohorts';
+import { fetchAssignmentTypes } from './assignmentTypes';
+import LmsApiService from '../services/LmsApiService';
+
+const allowedRoles = ['staff', 'instructor', 'support'];
+
+const gotRoles = canUserViewGradebook => ({ type: GOT_ROLES, canUserViewGradebook });
+const errorFetchingRoles = () => ({ type: ERROR_FETCHING_ROLES });
+
+const getRoles = (courseId, urlQuery) => (
+  dispatch => LmsApiService.fetchUserRoles(courseId)
+    .then(response => response.data)
+    .then((response) => {
+      const canUserViewGradebook = response.is_staff
+                                  || (response.roles.some(role => (role.course_id === courseId)
+                                      && allowedRoles.includes(role.role)));
+      dispatch(gotRoles(canUserViewGradebook));
+      if (canUserViewGradebook) {
+        dispatch(fetchGrades(courseId, urlQuery.cohort, urlQuery.track));
+        dispatch(fetchTracks(courseId));
+        dispatch(fetchCohorts(courseId));
+        dispatch(fetchAssignmentTypes(courseId));
+      }
+    })
+    .catch(() => {
+      dispatch(errorFetchingRoles());
+    }));
+
+export {
+  getRoles,
+  errorFetchingRoles,
+};
--- a/src/data/actions/roles.test.js
+++ b/src/data/actions/roles.test.js
@@ -0,0 +1,144 @@
+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 { getRoles } from './roles';
+import {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+} from '../constants/actionTypes/roles';
+import { STARTED_FETCHING_GRADES } from '../constants/actionTypes/grades';
+import { STARTED_FETCHING_TRACKS } from '../constants/actionTypes/tracks';
+import { STARTED_FETCHING_COHORTS } from '../constants/actionTypes/cohorts';
+import { STARTED_FETCHING_ASSIGNMENT_TYPES } from '../constants/actionTypes/assignmentTypes';
+
+
+const mockStore = configureMockStore([thunk]);
+const axiosMock = new MockAdapter(apiClient);
+
+const course1Id = 'course-v1:edX+DemoX+Demo_Course';
+const course2Id = 'course-v1:edX+DemoX+Demo_Course_2';
+const rolesUrl = `${configuration.LMS_BASE_URL}/api/enrollment/v1/roles/?course_id=${encodeURIComponent(course1Id)}`;
+
+function makeRoleListObj(roles, isGlobalStaff){
+  return {
+    roles: roles,
+    is_staff: isGlobalStaff,
+  }
+}
+function makeRoleObj(courseId, role) {
+  return {
+    course_id: courseId,
+    role: role,
+  }
+};
+
+const course1StaffRole = makeRoleObj(course1Id, "staff");
+const course1DummyRole = makeRoleObj(course1Id, "dummy");
+const course2StaffRole = makeRoleObj(course2Id, "staff");
+const course2DummyRole = makeRoleObj(course2Id, "dummy");
+const urlParams = { cohort: null, track: null };
+
+describe('actions', () => {
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  describe('getRoles', () => {
+    it('dispatches got_roles action and subsequent actions after fetching role that allows gradebook', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+      axiosMock.onGet(rolesUrl)
+      .replyOnce(200, JSON.stringify(makeRoleListObj([course1StaffRole, course2DummyRole], false)));
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and other actions after fetching irrelevent roles but user is global staff', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+      .replyOnce(200, JSON.stringify(makeRoleListObj([course1DummyRole, course2DummyRole], true)));
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and no other actions after fetching role that disallows gradebook', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: false },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+      .replyOnce(200, JSON.stringify(makeRoleListObj([course1DummyRole, course2StaffRole], false)));
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and no other actions after fetching empty roles', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: false },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+      .replyOnce(200, JSON.stringify(makeRoleListObj([], false)));
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches got_roles action and other actions after fetching empty roles but user is global staff', () => {
+      const expectedActions = [
+        { type: GOT_ROLES, canUserViewGradebook: true },
+        { type: STARTED_FETCHING_GRADES },
+        { type: STARTED_FETCHING_TRACKS },
+        { type: STARTED_FETCHING_COHORTS },
+        { type: STARTED_FETCHING_ASSIGNMENT_TYPES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl)
+      .replyOnce(200, JSON.stringify(makeRoleListObj([], true)));
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    it('dispatches error action after getting an error when trying to get roles', () => {
+      const expectedActions = [
+        { type: ERROR_FETCHING_ROLES },
+      ];
+      const store = mockStore();
+
+      axiosMock.onGet(rolesUrl).replyOnce(400);
+
+      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});
--- a/src/data/constants/actionTypes/assignmentTypes.js
+++ b/src/data/constants/actionTypes/assignmentTypes.js
@@ -1,10 +1,12 @@
 const STARTED_FETCHING_ASSIGNMENT_TYPES = 'STARTED_FETCHING_ASSIGNMENT_TYPES';
 const GOT_ASSIGNMENT_TYPES = 'GOT_ASSIGNMENT_TYPES';
 const ERROR_FETCHING_ASSIGNMENT_TYPES = 'ERROR_FETCHING_ASSIGNMENT_TYPES';
+const GOT_ARE_GRADES_FROZEN = 'GOT_ARE_GRADES_FROZEN';

 export {
  STARTED_FETCHING_ASSIGNMENT_TYPES,
  GOT_ASSIGNMENT_TYPES,
  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 };

--- a/src/data/constants/actionTypes/roles.js
+++ b/src/data/constants/actionTypes/roles.js
@@ -0,0 +1,7 @@
+const GOT_ROLES = 'GOT_ROLES';
+const ERROR_FETCHING_ROLES = 'ERROR_FETCHING_ROLES'
+
+export {
+  GOT_ROLES,
+  ERROR_FETCHING_ROLES,
+};
--- a/src/data/reducers/assignmentTypes.js
+++ b/src/data/reducers/assignmentTypes.js
@@ -2,6 +2,7 @@ import {
  STARTED_FETCHING_ASSIGNMENT_TYPES,
  ERROR_FETCHING_ASSIGNMENT_TYPES,
  GOT_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';

 const initialState = {
@@ -31,6 +32,13 @@ const assignmentTypes = (state = initialState, action) => {
        finishedFetching: true,
        errorFetching: true,
      };
+    case GOT_ARE_GRADES_FROZEN:
+      return {
+        ...state,
+        areGradesFrozen: action.areGradesFrozen,
+        errorFetching: false,
+        finishedFetching: true,
+      };
    default:
      return state;
  }
--- a/src/data/reducers/assignmentTypes.test.js
+++ b/src/data/reducers/assignmentTypes.test.js
@@ -3,6 +3,7 @@ import {
  STARTED_FETCHING_ASSIGNMENT_TYPES,
  ERROR_FETCHING_ASSIGNMENT_TYPES,
  GOT_ASSIGNMENT_TYPES,
+  GOT_ARE_GRADES_FROZEN,
 } from '../constants/actionTypes/assignmentTypes';

 const initialState = {
@@ -51,4 +52,17 @@ describe('assignmentTypes reducer', () => {
      type: ERROR_FETCHING_ASSIGNMENT_TYPES,
    })).toEqual(expected);
  });
+
+  it('updates areGradesFrozen success state', () => {
+    const expected = {
+      ...initialState,
+      errorFetching: false,
+      finishedFetching: true,
+      areGradesFrozen: true,
+    };
+    expect(assignmentTypes(undefined, {
+      type: GOT_ARE_GRADES_FROZEN,
+      areGradesFrozen: true,
+    })).toEqual(expected);
+  });
 });
--- a/src/data/reducers/index.js
+++ b/src/data/reducers/index.js
@@ -4,12 +4,14 @@ import cohorts from './cohorts';
 import grades from './grades';
 import tracks from './tracks';
 import assignmentTypes from './assignmentTypes';
+import roles from './roles';

 const rootReducer = combineReducers({
  grades,
  cohorts,
  tracks,
  assignmentTypes,
+  roles,
 });

 export default rootReducer;
--- a/src/data/reducers/roles.js
+++ b/src/data/reducers/roles.js
@@ -0,0 +1,26 @@
+import {
+    GOT_ROLES,
+    ERROR_FETCHING_ROLES,
+  } from '../constants/actionTypes/roles';
+
+  const initialState = {
+    canUserViewGradebook: null,
+  };
+
+  const roles = (state = initialState, action) => {
+    switch (action.type) {
+      case GOT_ROLES:
+        return {
+          ...state,
+          canUserViewGradebook: action.canUserViewGradebook,
+        };
+      case ERROR_FETCHING_ROLES:
+        return {
+          ...state,
+          canUserViewGradebook: false,
+        };
+      default:
+        return state;
+  }};
+
+  export default roles;
--- a/src/data/reducers/roles.test.js
+++ b/src/data/reducers/roles.test.js
@@ -0,0 +1,47 @@
+import roles from './roles';
+import {
+  ERROR_FETCHING_ROLES,
+  GOT_ROLES,
+} from '../constants/actionTypes/roles';
+
+const initialState = {
+  canUserViewGradebook: null,
+};
+
+describe('tracks reducer', () => {
+  it('has initial state', () => {
+    expect(roles(undefined, {})).toEqual(initialState);
+  });
+
+  it('updates canUserViewGradebook to true', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: true
+    };
+    expect(roles(undefined, {
+      type: GOT_ROLES,
+      canUserViewGradebook: true,
+    })).toEqual(expected);
+  });
+
+  it('updates canUserViewGradebook to false', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: false
+    };
+    expect(roles(undefined, {
+      type: GOT_ROLES,
+      canUserViewGradebook: false,
+    })).toEqual(expected);
+  });
+
+  it('updates fetch roles failure state', () => {
+    const expected = {
+      ...initialState,
+      canUserViewGradebook: false,
+    };
+    expect(roles(undefined, {
+      type: ERROR_FETCHING_ROLES,
+    })).toEqual(expected);
+  });
+});
--- a/src/data/services/LmsApiService.js
+++ b/src/data/services/LmsApiService.js
@@ -59,6 +59,11 @@ class LmsApiService {
    const assignmentTypesUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`;
    return apiClient.get(assignmentTypesUrl);
  }
+
+  static fetchUserRoles(courseId) {
+    const rolesUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/roles/?course_id=${encodeURIComponent(courseId)}`;
+    return apiClient.get(rolesUrl);
+  }
 }

 export default LmsApiService;
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,13 +3,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import SiteFooter from '@edx/frontend-component-footer';

 import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
 import Header from './components/Header';
 import store from './data/store';
+import FooterLogo from '../assets/edx-footer.png';
 import './App.scss';

+var courseId = window.location.pathname.substring(1);
+
 const App = () => (
  <Provider store={store}>
    <Router>
@@ -20,6 +24,24 @@ const App = () => (
            <Route exact path="/:courseId" component={GradebookPage} />
          </Switch>
        </main>
+        <SiteFooter
+          siteName={process.env.SITE_NAME}
+          siteLogo={FooterLogo}
+          marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
+          supportUrl={process.env.SUPPORT_URL}
+          contactUrl={process.env.CONTACT_URL}
+          openSourceUrl={process.env.OPEN_SOURCE_URL}
+          termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
+          privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
+          facebookUrl={process.env.FACEBOOK_URL}
+          twitterUrl={process.env.TWITTER_URL}
+          youTubeUrl={process.env.YOU_TUBE_URL}
+          linkedInUrl={process.env.LINKED_IN_URL}
+          googlePlusUrl={process.env.GOOGLE_PLUS_URL}
+          redditUrl={process.env.REDDIT_URL}
+          appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
+          googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+        />
      </div>
    </Router>
  </Provider>
--- a/src/postcss.config.js
+++ b/src/postcss.config.js
@@ -0,0 +1,7 @@
+/* I'm here to allow autoprefixing in webpack.prod.config.js */
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ grid: true, browsers: ['>1%'] }),
+  ],
+};
+
Author	SHA1	Message	Date
Jansen Kantor	9e1268e388	Merge pull request #75 from edx/jkantor/a11y-2 fix(a11y): add select aria-labels, row headers	2019-01-16 10:16:14 -05:00
jansenk	57e0f2254a	fix(a11y): add select aria-labels, row headers EDUCATOR-3858	2019-01-15 16:40:38 -05:00
Douglas Hall	2cc14191b4	Merge pull request #71 from edx/douglashall/frontend-component-footer Move footer component to npm package	2019-01-10 14:32:19 -05:00
Douglas Hall	603dbeb823	fix(footer): move footer component to npm package	2019-01-09 16:38:01 -05:00
Zachary Hancock	55cb1f4140	Merge pull request #74 from edx/zhancock/openedx-meta add metadata for openedx releases	2019-01-08 16:39:25 -05:00
Zach Hancock	55648a62ff	add metadata for openedx releases	2019-01-08 15:28:30 -05:00
Zachary Hancock	62f9d24704	Merge pull request #73 from edx/zhancock/devstack-integration move project run/setup to devstack	2019-01-08 11:19:19 -05:00
Zach Hancock	f036b0cf34	move project run/setup to devstack	2019-01-07 14:10:55 -05:00
Jansen Kantor	67493d1e9e	Merge pull request #69 from edx/jkantor/change-message changed role error message and don't show during loading	2019-01-03 10:59:37 -05:00
jansenk	e5bca7e526	changed role error message and don't show during loading	2019-01-02 16:35:06 -05:00
Jansen Kantor	52c5357ce7	Merge pull request #66 from edx/jkantor/change-pagination-buttons implement gradebook pagination button feedback	2019-01-02 16:19:43 -05:00
jansenk	d469cc2de7	implement gradebook pagination button feedback refactor buttons to a pure function component change labels disable rather than hide EDUCATOR-3825	2019-01-02 16:11:01 -05:00
Jansen Kantor	86092f22b3	Merge pull request #65 from edx/jkantor/disable-student-groups disable rather than hide empty groups and cohorts	2019-01-02 09:22:19 -05:00
Zachary Hancock	c8cb07228f	Merge pull request #63 from edx/zhancock/edit-modal Gradebook edit modal updates	2018-12-27 10:04:57 -05:00
Jansen Kantor	a1946e7bc4	Merge pull request #64 from edx/jkantor/roles-filter request filtered roles	2018-12-21 15:08:09 -05:00
jansenk	01d80e0fff	disable rather than hide empty groups and cohorts EDUCATOR-3824	2018-12-21 14:23:19 -05:00
jansenk	e6da087e83	request filtered roles	2018-12-21 12:53:07 -05:00
Jansen Kantor	ac5eaed5cb	Merge pull request #62 from edx/jkantor/staff fix(auth) allow global staff to view gradebook	2018-12-21 11:46:02 -05:00
jansenk	88997ca242	fix(auth) allow global staff to view gradebook	2018-12-21 11:34:28 -05:00
Zach Hancock	d5daf9086f	gradebook edit modal message	2018-12-21 10:09:35 -05:00
Simon Chen	8a01a60d63	Merge pull request #61 from edx/schen/default_select fix(functionality): Make sure we default select radio button	2018-12-20 10:06:27 -05:00
Simon Chen	66cdcc7f2a	fix(functionality): Make sure we default select radio button	2018-12-20 09:57:14 -05:00
Robert Raposa	0c73d66666	Merge pull request #59 from edx/robrap/footer-logo Update footer logo.	2018-12-19 16:13:55 -05:00
albemarle	28e3e6d0e6	Merge pull request #60 from edx/home-link add aria-label for edX Home	2018-12-19 15:29:57 -05:00
albemarle	6473bafa3d	edx -> edX	2018-12-19 15:16:37 -05:00
Jansen Kantor	167901e665	Merge pull request #55 from edx/jkantor/role-error render error message if user is not allowed to view gradebook	2018-12-19 15:15:34 -05:00
albemarle	50a0d6e579	add aria-label for edX Home	2018-12-19 15:09:58 -05:00
Robert Raposa	a284c286f5	Update footer logo. ARCH-322	2018-12-19 14:04:31 -05:00
jansenk	dd967e703c	render error message if user is not allowed to view gradebook	2018-12-19 14:00:27 -05:00
Richard I Reilly	725dc071e3	Merge pull request #58 from edx/rir/base-html-fixes Add necessary meta tag to the base html file, language attribute for …	2018-12-19 13:37:45 -05:00
Rick Reilly	3da7730f23	Add necessary meta tag to the base html file, language attribute for a11y, and title	2018-12-19 11:20:33 -05:00
Richard I Reilly	bea36fb387	Merge pull request #57 from edx/kill-the-cats Minor clean-up.	2018-12-18 18:29:09 -05:00
Robert Raposa	1408b0ae7e	Minor clean-up.	2018-12-18 17:35:37 -05:00
Robert Raposa	7b817a4234	Merge pull request #56 from edx/dynamic-copyright ARCH-321: Dynamic copyright in footer.	2018-12-18 17:13:42 -05:00
Richard I Reilly	a762c47d77	Merge pull request #37 from edx/add-footer ARCH-308: Reimplement LMS footer in React in Gradebook.	2018-12-18 16:55:08 -05:00
Robert Raposa	aecb93c252	Dynamic copyright in footer. ARCH-321	2018-12-18 16:51:27 -05:00
Robert Raposa	5a489b1bd5	Add footer matching LMS courses footer. Note: There are still some follow-up tasks in ARCH-308 for analytics, i18n, etc. This gets the base functionality in place. ARCH-308	2018-12-18 14:19:01 -05:00
Simon Chen	5c642a1be5	Merge pull request #54 from edx/schen/alert Update the color of the alert from red to yellow	2018-12-13 15:30:20 -05:00
Simon Chen	9a0e0e0ece	Update the color of the alert from red to yellow	2018-12-13 14:50:38 -05:00
Alex Dusenbery	7486a342e2	Merge pull request #53 from edx/aed/show-attempted Distinguish unattempted subsections.	2018-12-13 14:20:18 -05:00
Alex Dusenbery	fd807c54f8	Update README.md	2018-12-12 16:12:15 -05:00
Alex Dusenbery	9b894b502f	Distinguish unattempted subsections.	2018-12-12 15:03:42 -05:00
Douglas Hall	afd9692f6b	Merge pull request #51 from edx/douglashall/fix_prod_webpack_config fix(webpack): use the appropriate css loader in prod webpack config	2018-12-12 10:56:04 -05:00
Douglas Hall	8f77dea222	fix(webpack): use the appropriate css loader in prod webpack config	2018-12-12 09:48:15 -05:00
Simon Chen	3bf3acaaec	Merge pull request #50 from edx/schen/frozen_grades fix(feat): Prevent editing if course grades are frozen	2018-12-11 13:45:23 -05:00
Simon Chen	f1ab3d0330	fix(feat): Prevent editing if course grades are frozen	2018-12-11 13:29:00 -05:00
Simon Chen	8d89bc16b1	Merge pull request #48 from edx/schen/update_wording Update link wording	2018-12-10 15:29:01 -05:00
Simon Chen	b46d47286b	Update link wording	2018-12-10 14:22:49 -05:00