wip

package-lock.json

@@ -2875,6 +2875,21 @@
         }
       }
     },
+    "@babel/runtime": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+      "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.40.tgz",
@@ -3295,7 +3310,7 @@
         },
         "globby": {
           "version": "8.0.1",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
           "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
           "dev": true,
           "requires": {
@@ -13559,6 +13574,14 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -20129,6 +20152,17 @@
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==",
       "dev": true
     },
+    "react-media": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/react-media/-/react-media-1.9.2.tgz",
+      "integrity": "sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.2",
+        "json2mq": "^0.2.0",
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-proptype-conditional-require": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
@@ -22379,6 +22413,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "query-string": "^5.1.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-media": "^1.9.2",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

src/App.scss

@@ -8,3 +8,5 @@ $fa-font-path: "~font-awesome/fonts";
 
 @import "./components/Gradebook/gradebook";
 @import "./components/Gradebook/footer";
+
+@import "./components/Header/header";

src/components/Gradebook/index.jsx

@@ -10,7 +10,6 @@ import {
 } from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
-import PageButtons from '../PageButtons';
 
 const DECIMAL_PRECISION = 2;
 
@@ -253,9 +252,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 === false) &&
+            { !this.props.canUserViewGradebook &&
               <div className="alert alert-warning" role="alert" >
-                You are not authorized to view the gradebook for this course.
+                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 />
@@ -330,6 +329,21 @@ 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 />
@@ -339,14 +353,15 @@ export default class Gradebook extends React.Component {
               onClose={() => this.props.updateBanner(false)}
               open={this.props.showSuccess}
             />
-            {PageButtons(this.props)}
             <div className="gbook">
               <Table
                 columns={this.props.headings}
                 data={this.formatter[this.props.format](this.props.grades, this.props.areGradesFrozen)}
+                tableSortable
+                defaultSortDirection="asc"
+                defaultSortedColumn="username"
               />
             </div>
-            {PageButtons(this.props)}
             <Modal
               open={this.state.modalOpen}
               title="Edit Grades"

src/components/Header/header.scss

@@ -0,0 +1,25 @@
+.border-bottom-blue {
+    border-bottom: 1px solid #0075b4; 
+}
+
+.border-bottom-gray {
+    border-bottom: 1px solid #e7e7e7; 
+}
+
+.nav-link {
+    font-weight: 600;
+    
+    &:after {
+        content: "\00BB";
+        margin-left: 4px;
+    }
+}
+
+.color-gray {
+    color: #767676;
+}
+
+.header-logo {
+    position: absolute;
+    left: calc(50% - 30px);
+}

src/components/Header/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink, Icon } from '@edx/paragon';
+import classNames from 'classnames';
+import Media from 'react-media';
 
 import EdxLogo from '../../../assets/edx-sm.png';
 
@@ -20,10 +22,31 @@ export default class Header extends React.Component {
   render() {
     return (
       <div className="mb-3">
-        <header className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
-          <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
-          <div />
-        </header>
+        <Media query="(max-width: 901px)">
+          {matches =>
+            (matches ? (
+              <header className="border-bottom-blue">
+                <div className="p-3 border-bottom-blue">
+                  <button className="border-0" onClick={() => this.setState({ mobileNavOpen: !this.state.mobileNavOpen })}>
+                    <Icon className={classNames('fa', 'fa-2x', 'color-gray', { 'fa-bars': !this.state.mobileNavOpen }, { 'fa-times': this.state.mobileNavOpen })} />
+                  </button>
+                  <Hyperlink className="header-logo" content={this.renderLogo()} destination="https://www.edx.org" />
+                </div>
+                {this.state.mobileNavOpen &&
+                  <div>
+                    <a className="nav-link border-bottom-gray" href="https://support.edx.org">Help</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Dashboard</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Profile</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Account</a>
+                    <a className="nav-link border-bottom-gray" href="https://www.google.com">Sign Out</a>
+                  </div>}
+              </header>
+          ) : (
+            <header>
+              <h1>hello world</h1>
+            </header>))
+        }
+        </Media>
       </div>
     );
   }

src/components/PageButtons/PageButtons.test.jsx

@@ -1,36 +0,0 @@
-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'));
-  });
-});

src/components/PageButtons/__snapshots__/PageButtons.test.jsx.snap

@@ -1,169 +0,0 @@
-// 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>
-`;

src/components/PageButtons/index.jsx

@@ -1,30 +0,0 @@
-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>
-  );
-}
-

src/data/actions/grades.test.js

@@ -96,12 +96,16 @@ describe('actions', () => {
           track: expectedTrack,
           headings: [
             {
+              columnSortable: true,
               key: 'username',
               label: 'Username',
+              onSort: expect.anything(),
             },
             {
+              columnSortable: true,
               key: 'total',
               label: 'Total',
+              onSort: expect.anything(),
             },
           ],
           prev: responseData.previous,

src/data/actions/utils.js

@@ -66,6 +66,8 @@ const headingMapper = (filterKey) => {
       const results = [{
         label: 'Username',
         key: 'username',
+        columnSortable: true,
+        onSort: (direction) => { dispatch(sortGrades('username', direction)); },
       }];
 
       const assignmentHeadings = entry.section_breakdown
@@ -73,11 +75,15 @@ const headingMapper = (filterKey) => {
         .map(s => ({
           label: s.label,
           key: s.label,
+          columnSortable: true,
+          onSort: direction => dispatch(sortGrades(s.label, direction)),
         }));
 
       const totals = [{
         label: 'Total',
         key: 'total',
+        columnSortable: true,
+        onSort: direction => dispatch(sortGrades('total', direction)),
       }];
 
       return results.concat(assignmentHeadings).concat(totals);
@@ -89,6 +95,8 @@ const headingMapper = (filterKey) => {
     const results = [{
       label: 'Username',
       key: 'username',
+      columnSortable: true,
+      onSort: (direction) => { dispatch(sortGrades('username', direction)); },
     }];
 
     const assignmentHeadings = entry.section_breakdown
@@ -96,11 +104,15 @@ const headingMapper = (filterKey) => {
       .map(s => ({
         label: s.label,
         key: s.label,
+        columnSortable: false,
+        onSort: (direction) => { this.sortNumerically(s.label, direction); },
       }));
 
     const totals = [{
       label: 'Total',
       key: 'total',
+      columnSortable: true,
+      onSort: direction => dispatch(sortGrades('total', direction)),
     }];
 
     return results.concat(assignmentHeadings).concat(totals);