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
17 changed files with 360 additions and 39 deletions
--- a/assets/logo-footer.png
+++ b/assets/logo-footer.png
--- 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,6 +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
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Hyperlink, Icon } from '@edx/paragon';

-import EdXLogo from '../../../assets/edx-sm.png';
+import EdXFooterLogo from '../../../assets/edx-footer.png';

 export default function Footer() {
  function renderLogo() {
    return (
-      <img src={EdXLogo} alt="edX logo" height="30" width="60" />
+      <img src={EdXFooterLogo} alt="edX logo" />
    );
  }

@@ -18,10 +18,10 @@ export default function Footer() {
    >
      <div className="max-width-1180 d-grid">
        <div className="area-1">
-          <Hyperlink destination="https://www.edx.org/" content={renderLogo()} />
+          <Hyperlink destination="https://www.edx.org/" content={renderLogo()} aria-label="edX Home" />
        </div>
        <div className="area-2">
-          <h2>edx</h2>
+          <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>
--- a/src/components/Gradebook/index.jsx
+++ b/src/components/Gradebook/index.jsx
@@ -28,14 +28,7 @@ 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) => {
@@ -259,6 +252,11 @@ 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 &&
+              <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>
@@ -271,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>
@@ -300,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' }}>
@@ -370,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>
@@ -377,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
@@ -11,6 +11,8 @@ 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>
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