Merge pull request #71 from edx/douglashall/frontend-component-footer

Move footer component to npm package
fix(footer): move footer component to npm package
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 · 2019-01-08 11:19:19 -05:00 · 2019-01-07 14:10:55 -05:00
20 changed files with 411 additions and 448 deletions
--- 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/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.

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

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

 ## Configuring for local use in edx-platform

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

 There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
--- 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
@@ -126,6 +126,21 @@ module.exports = Merge.smart(commonConfig, {
      CSRF_COOKIE_NAME: 'csrftoken',
      NEW_RELIC_APP_ID: null,
      NEW_RELIC_LICENSE_KEY: null,
+      SITE_NAME: null,
+      MARKETING_SITE_BASE_URL: null,
+      SUPPORT_URL: null,
+      CONTACT_URL: null,
+      OPEN_SOURCE_URL: null,
+      TERMS_OF_SERVICE_URL: null,
+      PRIVACY_POLICY_URL: null,
+      FACEBOOK_URL: null,
+      TWITTER_URL: null,
+      YOU_TUBE_URL: null,
+      LINKED_IN_URL: null,
+      GOOGLE_PLUS_URL: null,
+      REDDIT_URL: null,
+      APPLE_APP_STORE_URL: null,
+      GOOGLE_PLAY_URL: null,
    }),
  ],
 });
--- 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
@@ -3081,6 +3081,11 @@
        }
      }
    },
+    "@edx/frontend-component-footer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-1.0.0.tgz",
+      "integrity": "sha512-dxIjS2CF02upmvCH6iBekVcy4eFfs6seDR4sYsGlUQSvOGykc7zEiFH/RniPrzyl9VCrP7mkG7LPulDsgxy4Mg=="
+    },
    "@edx/paragon": {
      "version": "3.7.2",
      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.7.2.tgz",
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
  "dependencies": {
    "@edx/edx-bootstrap": "^0.4.3",
    "@edx/frontend-auth": "^1.2.1",
+    "@edx/frontend-component-footer": "^1.0.0",
    "@edx/paragon": "^3.7.2",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,5 +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";
-@import "./components/Gradebook/footer";
--- a/src/components/Gradebook/footer.jsx
+++ b/src/components/Gradebook/footer.jsx
@@ -1,122 +0,0 @@
-import React from 'react';
-import { Hyperlink, Icon } from '@edx/paragon';
-
-import EdXFooterLogo from '../../../assets/edx-footer.png';
-
-export default function Footer() {
-  function renderLogo() {
-    return (
-      <img src={EdXFooterLogo} alt="edX logo" />
-    );
-  }
-
-  return (
-    <footer
-      role="contentinfo"
-      aria-label="Page Footer"
-      className="footer d-flex justify-content-center border-top py-3 px-4"
-    >
-      <div className="max-width-1180 d-grid">
-        <div className="area-1">
-          <Hyperlink destination="https://www.edx.org/" content={renderLogo()} aria-label="edX Home" />
-        </div>
-        <div className="area-2">
-          <h2>edX</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/about-us">About</a></li>
-            <li><a href="https://www.edx.org/enterprise">edX for Business</a></li>
-            <li><a href="https://www.edx.org/affiliate-program">Affiliates</a></li>
-            <li><a href="http://open.edx.org">Open edX</a></li>
-            <li><a href="https://www.edx.org/careers">Careers</a></li>
-            <li><a href="https://www.edx.org/news-announcements">News</a></li>
-          </ul>
-        </div>
-        <div className="area-3">
-          <h2>Legal</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/edx-terms-service">Terms of Service &amp; Honor Code</a></li>
-            <li><a href="https://www.edx.org/edx-privacy-policy">Privacy Policy</a></li>
-            <li><a href="https://www.edx.org/accessibility">Accessibility Policy</a></li>
-            <li><a href="https://www.edx.org/trademarks">Trademark Policy</a></li>
-            <li><a href="https://www.edx.org/sitemap">Sitemap</a></li>
-          </ul>
-        </div>
-        <div className="area-4">
-          <h2>Connect</h2>
-          <ul className="list-unstyled p-0 m-0">
-            <li><a href="https://www.edx.org/blog">Blog</a></li>
-            <li><a href="https://courses.edx.org/support/contact_us">Contact Us</a></li>
-            <li><a href="https://support.edx.org">Help Center</a></li>
-            <li><a href="https://www.edx.org/media-kit">Media Kit</a></li>
-            <li><a href="https://www.edx.org/donate">Donate</a></li>
-          </ul>
-        </div>
-        <div className="area-5">
-          <ul
-            className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
-          >
-            {/* TODO: Use Paragon HyperLink with Icon. */}
-            {/*  Would need to add rel to paragon if we still need it. */}
-            <li>
-              <a href="http://www.facebook.com/EdxOnline" title="Facebook" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText="Like edX on Facebook" />
-              </a>
-            </li>
-            <li>
-              <a href="https://twitter.com/edXOnline" title="Twitter" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText="Follow edX on Twitter" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.youtube.com/user/edxonline" title="Youtube" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText="Subscribe to the edX YouTube channel" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.linkedin.com/company/edx" title="LinkedIn" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText="Follow edX on LinkedIn" />
-              </a>
-            </li>
-            <li>
-              <a href="https://plus.google.com/+edXOnline" title="Google+" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText="Follow edX on Google+" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.reddit.com/r/edx" title="Reddit" rel="noopener noreferrer" target="_blank">
-                <Icon className={['fa', 'fa-reddit-square', 'fa-2x']} screenReaderText="Subscribe to the edX subreddit" />
-              </a>
-            </li>
-          </ul>
-          <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
-            <li>
-              <a href="https://itunes.apple.com/us/app/edx/id945480667?mt=8" rel="noopener noreferrer" target="_blank">
-                <img
-                  className="max-height-39"
-                  alt="Download the edX mobile app from the Apple App Store"
-                  src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
-                />
-              </a>
-            </li>
-            <li>
-              <a href="https://play.google.com/store/apps/details?id=org.edx.mobile" rel="noopener noreferrer" target="_blank">
-                <img
-                  className="max-height-39"
-                  alt="Download the edX mobile app from Google Play"
-                  src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
-                />
-              </a>
-            </li>
-          </ul>
-          <p>
-            © 2012–{(new Date().getFullYear())} edX Inc.
-            <br />
-            EdX, Open edX, and MicroMasters are registered trademarks of edX Inc.
-            | 粤ICP备17044299号-2
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
--- a/src/components/Gradebook/footer.scss
+++ b/src/components/Gradebook/footer.scss
@@ -1,165 +0,0 @@
-.max-width-222 {
-  max-width: 222px;
-}
-
-.max-width-264 {
-  max-width: 264px;
-}
-
-.max-width-1180 {
-  max-width: 1180px;
-}
-
-.max-height-39 {
-  max-height: 39px;
-}
-
-.d-grid {
-  display: grid;
-}
-
-$gray-footer: #fcfcfc;
-$border-1: 1px solid $gray-200;
-
-.footer {
-  background-color: $gray-footer;
-
-  .area-1 {
-    grid-column: 1;
-    grid-row: 1;
-    border-bottom: $border-1;
-    padding-bottom: 1rem;
-  }
-
-  .area-2 {
-    grid-column: 1;
-    grid-row: 2;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-3 {
-    grid-column: 1;
-    grid-row: 3;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-4 {
-    grid-column: 1;
-    grid-row: 4;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-5 {
-    grid-column: 1;
-    grid-row: 5;
-    padding: 1rem 0;
-  }
-
-  @media only screen and (min-width: 717px) {
-    .area-1 {
-      grid-column: 1 / span 2;
-      grid-row: 1;
-      border-bottom: none;
-      padding: 1rem 0;
-    }
-
-    .area-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .area-3 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .area-4 {
-      grid-column: 1;
-      grid-row: 4;
-      border-bottom: none;
-    }
-
-    .area-5 {
-      grid-column: 2;
-      grid-row: 2 / span 3;
-      border-left: $border-1;
-      padding-left: 1rem;
-      margin-left: 1rem;
-    }
-  }
-
-  @media only screen and (min-width: 870px) {
-    .area-1 {
-      grid-column: 1;
-      grid-row: 1 / span 3;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-    }
-
-    .area-5 {
-      grid-column: 2 / span 3;
-      grid-row: 2;
-      border: none;
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  @media only screen and (min-width: 1188px) {
-    .area-1 {
-      grid-column: 1 / span 1;
-      grid-row: 1;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-5 {
-      grid-column: 5 / span 1;
-      grid-row: 1;
-      max-width: 372px;
-    }
-  }
-}
--- 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;

@@ -252,9 +253,9 @@ export default class Gradebook extends React.Component {
                The grades for this course are now frozen. Editing of grades is no longer allowed.
              </div>
            }
-            { !this.props.canUserViewGradebook &&
+            { (this.props.canUserViewGradebook === false) &&
              <div className="alert alert-warning" role="alert" >
-                You are not authorized to view the gradebook for this course. If you have a global role, please enroll in this course and try again.
+                You are not authorized to view the gradebook for this course.
              </div>
            }
            <hr />
@@ -299,29 +300,25 @@ export default class Gradebook extends React.Component {
                    />
                  </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"
+                    disabled={this.props.tracks.length === 0}
+                    value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
+                    options={this.mapTracksEntries(this.props.tracks)}
+                    onChange={this.updateTracks}
+                  />
+                  <InputSelect
+                    name="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' }}>
@@ -333,21 +330,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 />
@@ -357,6 +339,7 @@ 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}
@@ -366,9 +349,11 @@ export default class Gradebook extends React.Component {
                defaultSortedColumn="username"
              />
            </div>
+            {PageButtons(this.props)}
            <Modal
              open={this.state.modalOpen}
              title="Edit Grades"
+              closeText="Cancel"
              body={(
                <div>
                  <h3>{this.state.modalModel[0].assignmentName}</h3>
@@ -376,11 +361,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/data/actions/roles.js
+++ b/src/data/actions/roles.js
@@ -1,38 +1,38 @@
 import {
-    GOT_ROLES,
-    ERROR_FETCHING_ROLES
-  } from '../constants/actionTypes/roles';
+  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 allowed_roles = ['staff', 'instructor', 'support'];
+const allowedRoles = ['staff', 'instructor', 'support'];

 const gotRoles = canUserViewGradebook => ({ type: GOT_ROLES, canUserViewGradebook });
-const errorFetchingRoles = () => ({type: ERROR_FETCHING_ROLES });
+const errorFetchingRoles = () => ({ type: ERROR_FETCHING_ROLES });

 const getRoles = (courseId, urlQuery) => (
-  (dispatch) => {
-    return LmsApiService.fetchUserRoles(courseId)
-      .then(response => response.data)
-      .then(roles => {
-        var canUserViewGradebook = roles.some(role => (role.course_id === courseId) && allowed_roles.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())
-      });
-  });
+  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
@@ -18,11 +18,16 @@ import { STARTED_FETCHING_ASSIGNMENT_TYPES } from '../constants/actionTypes/assi
 const mockStore = configureMockStore([thunk]);
 const axiosMock = new MockAdapter(apiClient);

-const rolesUrl = `${configuration.LMS_BASE_URL}/api/enrollment/v1/roles/`;
-
 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,
@@ -52,7 +57,25 @@ describe('actions', () => {
      ];
      const store = mockStore();
      axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify([course1StaffRole, course2DummyRole]));
+      .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);
@@ -66,7 +89,7 @@ describe('actions', () => {
      const store = mockStore();

      axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify([course1DummyRole, course2StaffRole]));
+      .replyOnce(200, JSON.stringify(makeRoleListObj([course1DummyRole, course2StaffRole], false)));

      return store.dispatch(getRoles(course1Id, urlParams)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
@@ -80,7 +103,25 @@ describe('actions', () => {
      const store = mockStore();

      axiosMock.onGet(rolesUrl)
-      .replyOnce(200, JSON.stringify([]));
+      .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);
--- a/src/data/services/LmsApiService.js
+++ b/src/data/services/LmsApiService.js
@@ -60,9 +60,9 @@ class LmsApiService {
    return apiClient.get(assignmentTypesUrl);
  }

-  static fetchUserRoles(){
-    var rolesUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/roles/`;
-    return apiClient.get(rolesUrl)
+  static fetchUserRoles(courseId) {
+    const rolesUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/roles/?course_id=${encodeURIComponent(courseId)}`;
+    return apiClient.get(rolesUrl);
  }
 }

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

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

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