implement gradebook pagination button feedback

refactor buttons to a pure function component
change labels
disable rather than hide

EDUCATOR-3825

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;
 
@@ -329,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 />
@@ -353,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}
@@ -362,6 +349,7 @@ export default class Gradebook extends React.Component {
                 defaultSortedColumn="username"
               />
             </div>
+            {PageButtons(this.props)}
             <Modal
               open={this.state.modalOpen}
               title="Edit Grades"

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'));
+  });
+});

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>
+`;

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>
+  );
+}
+