wip

Merge pull request #65 from edx/jkantor/disable-student-groups
2019-01-02 14:20:39 -05:00 · 2019-01-02 14:20:21 -05:00 · 2019-01-02 09:22:19 -05:00 · 2018-12-27 10:04:57 -05:00 · 2018-12-21 15:08:09 -05:00 · 2018-12-21 14:23:19 -05:00
24 changed files with 6064 additions and 5169 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 .eslintcache
+.idea
 node_modules
 npm-debug.log
 coverage
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ npm i --save @edx/gradebook

 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.

-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 **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.

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

--- a/assets/edx-footer.png
+++ b/assets/edx-footer.png
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -47,6 +47,7 @@ module.exports = Merge.smart(commonConfig, {
              minimize: true,
            },
          },
+          'postcss-loader',
          {
            loader: 'sass-loader', // compiles Sass to CSS
            options: {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
    "font-awesome": "^4.7.0",
    "history": "^4.7.2",
    "prop-types": "^15.5.10",
-    "query-string": "^6.2.0",
+    "query-string": "^5.1.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
@@ -47,6 +47,7 @@
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
+    "autoprefixer": "^9.4.2",
    "axios-mock-adapter": "^1.15.0",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^8.2.2",
@@ -72,6 +73,7 @@
    "jest": "^22.4.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.7.2",
+    "postcss-loader": "^3.0.0",
    "react-dev-utils": "^5.0.0",
    "react-test-renderer": "^16.2.0",
    "redux-mock-store": "^1.5.1",
--- 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
@@ -5,5 +5,8 @@ $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

@import "~@edx/paragon/src/SearchField/SearchField";
+@import "./components/Gradebook/gradebook";             

@import "./components/Gradebook/gradebook";
+@import "./components/Gradebook/footer";
+@import "./components/Header/header";
--- a/src/components/Gradebook/footer.jsx
+++ b/src/components/Gradebook/footer.jsx
@@ -0,0 +1,122 @@
+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
@@ -0,0 +1,165 @@
+.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
@@ -28,28 +28,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}`,
@@ -206,16 +205,23 @@ export default class Gradebook extends React.Component {
      const assignments = entry.section_breakdown
        .filter(section => section.is_graded)
        .reduce((acc, subsection) => {
+          const scoreEarned = this.roundGrade(subsection.score_earned);
+          const scorePossible = this.roundGrade(subsection.score_possible);
+          let label = `${scoreEarned}`;
+          if (subsection.attempted) {
+            label = `${scoreEarned}/${scorePossible}`;
+          }
          if (areGradesFrozen) {
-            acc[subsection.label] = `${this.roundGrade(subsection.score_earned)}/${this.roundGrade(subsection.score_possible)}`;
+            acc[subsection.label] = label;
          } else {
            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>);
+                {label}
+              </button>
+            );
          }
          return acc;
        }, {});
@@ -242,10 +248,15 @@ export default class Gradebook extends React.Component {
            <h1>Gradebook</h1>
            <h3> {this.props.match.params.courseId}</h3>
            { this.props.areGradesFrozen &&
-              <div className="alert alert-danger" role="alert" >
+              <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 &&
+              <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.
+              </div>
+            }
            <hr />
            <div className="d-flex justify-content-between" >
              <div>
@@ -258,6 +269,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>
@@ -287,29 +299,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' }}>
@@ -357,6 +365,7 @@ export default class Gradebook extends React.Component {
            <Modal
              open={this.state.modalOpen}
              title="Edit Grades"
+              closeText="Cancel"
              body={(
                <div>
                  <h3>{this.state.modalModel[0].assignmentName}</h3>
@@ -364,11 +373,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/Header/_header.scss
+++ b/src/components/Header/_header.scss
@@ -0,0 +1,24 @@
+.color-gray-dark {
+    color: #767676;
+}
+
+.weight-bold {
+    font-weight: 600;
+}
+
+.size-16 {
+    font-size: 16px;
+}
+
+.border-bottom-blue {
+    border-bottom: 1px solid #0075b4;
+}
+
+.border-bottom-gray {
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.nav-link::after {
+    content: '\00BB';
+    padding-left: 4px;
+}
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink, Icon } from '@edx/paragon';
+import { configuration } from '../../config';

 import EdxLogo from '../../../assets/edx-sm.png';

@@ -24,6 +25,15 @@ export default class Header extends React.Component {
          <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
          <div />
        </header>
+        {this.state.mobileNavOpen &&
+        <nav className="d-flex flex-column weight-bold size-16">
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Rick</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Alex</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Jasen</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Doug</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Simon</a>
+        </nav>
+        }
      </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 => (
  {
@@ -28,10 +29,21 @@ const mapStateToProps = state => (
    nextPage: state.grades.nextPage,
    assignmnetTypes: state.assignmentTypes.results,
    areGradesFrozen: state.assignmentTypes.areGradesFrozen,
-    showSpinner: state.grades.showSpinner,
+    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) => {
@@ -64,6 +76,9 @@ const mapDispatchToProps = dispatch => (
    updateBanner: (showSuccess) => {
      dispatch(updateBanner(showSuccess));
    },
+    getRoles: (matchParams, urlQuery) => {
+      dispatch(getRoles(matchParams, urlQuery));
+    },
  }
 );

--- 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/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/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
@@ -5,11 +5,14 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';

 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 './App.scss';

+var courseId = window.location.pathname.substring(1);
+
 const App = () => (
  <Provider store={store}>
    <Router>
@@ -20,6 +23,7 @@ const App = () => (
            <Route exact path="/:courseId" component={GradebookPage} />
          </Switch>
        </main>
+        <Footer />
      </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
Rick Reilly	c5b025aef5	wip	2019-01-02 14:20:39 -05:00
Rick Reilly	0b507c558a	wip	2019-01-02 14:20:21 -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