ReviewActions re-org and adding ConfirmModals

src/App.scss

@@ -74,4 +74,7 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
       right: 1rem !important;
     }
   }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
 }

src/components/ConfirmModal.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AlertModal, ActionRow, Button } from '@edx/paragon';
+
+export const ConfirmModal = ({
+  title,
+  isOpen,
+  onCancel,
+  cancelText,
+  onConfirm,
+  confirmText,
+  content,
+}) => (
+  <AlertModal
+    className="confirm-modal"
+    title={title}
+    isOpen={isOpen}
+    footerNode={(
+      <ActionRow>
+        <Button
+          variant="tertiary"
+          onClick={onCancel}
+        >
+          {cancelText}
+        </Button>
+        <Button variant="primary" onClick={onConfirm}>{confirmText}</Button>
+      </ActionRow>
+    )}
+  >
+    <p>{content}</p>
+  </AlertModal>
+);
+ConfirmModal.defaultProps = {
+  isOpen: false,
+};
+ConfirmModal.propTypes = {
+  isOpen: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  cancelText: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  confirmText: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
+export default ConfirmModal;

src/components/ConfirmModal.test.jsx

@@ -0,0 +1,27 @@
+import { shallow } from 'enzyme';
+
+import { ConfirmModal } from './ConfirmModal';
+
+jest.mock('@edx/paragon', () => ({
+  ActionRow: () => 'ActionRow',
+  AlertModal: () => 'AlertModal',
+  Button: () => 'Button',
+}));
+
+describe('ConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    title: 'test-title',
+    cancelText: 'test-cancel-text',
+    confirmText: 'test-confirm-text',
+    content: 'test-content',
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<ConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<ConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmModal snapshot: closed 1`] = `
+<AlertModal
+  className="confirm-modal"
+  footerNode={
+    <ActionRow>
+      <Button
+        onClick={[MockFunction this.props.onCancel]}
+        variant="tertiary"
+      >
+        test-cancel-text
+      </Button>
+      <Button
+        onClick={[MockFunction this.props.onConfirm]}
+        variant="primary"
+      >
+        test-confirm-text
+      </Button>
+    </ActionRow>
+  }
+  isOpen={false}
+  title="test-title"
+>
+  <p>
+    test-content
+  </p>
+</AlertModal>
+`;
+
+exports[`ConfirmModal snapshot: open 1`] = `
+<AlertModal
+  className="confirm-modal"
+  footerNode={
+    <ActionRow>
+      <Button
+        onClick={[MockFunction this.props.onCancel]}
+        variant="tertiary"
+      >
+        test-cancel-text
+      </Button>
+      <Button
+        onClick={[MockFunction this.props.onConfirm]}
+        variant="primary"
+      >
+        test-confirm-text
+      </Button>
+    </ActionRow>
+  }
+  isOpen={true}
+  title="test-title"
+>
+  <p>
+    test-content
+  </p>
+</AlertModal>
+`;

src/containers/ReviewActions/__snapshots__/StartGradingButton.test.jsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StartGradingButton component component snapshot: graded (startGrading callback 1`] = `
-<Button
-  iconAfter="Highlight"
-  onClick={[MockFunction this.props.startGrading]}
-  variant="primary"
->
-  Override grade
-</Button>
-`;
-
-exports[`StartGradingButton component component snapshot: inProgress (stopGrading callback 1`] = `
-<Button
-  iconAfter="Cancel"
-  onClick={[MockFunction this.props.stopGrading]}
-  variant="primary"
->
-  Stop grading this response
-</Button>
-`;
-
-exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
-
-exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
-<Button
-  iconAfter="Highlight"
-  onClick={[MockFunction this.props.startGrading]}
-  variant="primary"
->
-  Start Grading
-</Button>
-`;

src/containers/ReviewActions/components/OverrideGradeConfirmModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ConfirmModal from 'components/ConfirmModal';
+
+export const OverrideGradeConfirmModal = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+}) => (
+  <ConfirmModal
+    title="Are you sure you want to override this grade?"
+    content="This cannot be undone.  The learner may have already received their grade"
+    cancelText="Go back"
+    confirmText="Continue grade override"
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    isOpen={isOpen}
+  />
+);
+OverrideGradeConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default OverrideGradeConfirmModal;

src/containers/ReviewActions/components/OverrideGradeConfirmModal.test.jsx

@@ -0,0 +1,19 @@
+import { shallow } from 'enzyme';
+
+import { OverrideGradeConfirmModal } from './OverrideGradeConfirmModal';
+
+jest.mock('components/ConfirmModal', () => 'ConfirmModal');
+
+describe('OverrideGradeConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<OverrideGradeConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<OverrideGradeConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

src/containers/ReviewActions/components/StartGradingButton.jsx

@@ -11,6 +11,9 @@ import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
 import { gradingStatuses as statuses } from 'data/services/lms/constants';
 
+import StopGradingConfirmModal from './StopGradingConfirmModal';
+import OverrideGradeConfirmModal from './OverrideGradeConfirmModal';
+
 export const buttonArgs = {
   [statuses.ungraded]: {
     label: 'Start Grading',
@@ -26,26 +29,89 @@ export const buttonArgs = {
   },
 };
 
-export const StartGradingButton = ({
-  gradingStatus,
-  startGrading,
-  stopGrading,
-}) => {
-  if (gradingStatus === statuses.locked) {
-    return null;
+export class StartGradingButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showConfirmStopGrading: false,
+      showConfirmOverrideGrade: false,
+    };
+
+    this.showConfirmStopGrading = this.showConfirmStopGrading.bind(this);
+    this.hideConfirmStopGrading = this.hideConfirmStopGrading.bind(this);
+    this.showConfirmOverrideGrade = this.showConfirmOverrideGrade.bind(this);
+    this.hideConfirmOverrideGrade = this.hideConfirmOverrideGrade.bind(this);
+    this.confirmStopGrading = this.confirmStopGrading.bind(this);
+    this.confirmOverrideGrade = this.confirmOverrideGrade.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
-  const args = buttonArgs[gradingStatus];
-  const onClick = ((gradingStatus === statuses.inProgress) ? stopGrading : startGrading);
-  return (
-    <Button
-      variant="primary"
-      iconAfter={args.iconAfter}
-      onClick={onClick}
-    >
-      {args.label}
-    </Button>
-  );
-};
+
+  showConfirmStopGrading() {
+    this.setState({ showConfirmStopGrading: true });
+  }
+
+  hideConfirmStopGrading() {
+    this.setState({ showConfirmStopGrading: false });
+  }
+
+  showConfirmOverrideGrade() {
+    this.setState({ showConfirmOverrideGrade: true });
+  }
+
+  hideConfirmOverrideGrade() {
+    this.setState({ showConfirmOverrideGrade: false });
+  }
+
+  confirmStopGrading() {
+    this.hideConfirmStopGrading();
+    this.props.stopGrading();
+  }
+
+  confirmOverrideGrade() {
+    this.hideConfirmOverrideGrade();
+    this.props.startGrading();
+  }
+
+  handleClick() {
+    if (this.props.gradingStatus === statuses.inProgress) {
+      this.showConfirmStopGrading();
+    } else if (this.props.gradingStatus === statuses.graded) {
+      this.showConfirmOverrideGrade();
+    } else {
+      this.props.startGrading();
+    }
+  }
+
+  render() {
+    const { gradingStatus } = this.props;
+    if (gradingStatus === statuses.locked) {
+      return null;
+    }
+    const args = buttonArgs[gradingStatus];
+    return (
+      <>
+        <Button
+          variant="primary"
+          iconAfter={args.iconAfter}
+          onClick={this.handleClick}
+        >
+          {args.label}
+        </Button>
+        <OverrideGradeConfirmModal
+          isOpen={this.state.showConfirmOverrideGrade}
+          onCancel={this.hideConfirmOverrideGrade}
+          onConfirm={this.confirmOverrideGrade}
+        />
+        <StopGradingConfirmModal
+          isOpen={this.state.showConfirmStopGrading}
+          onCancel={this.hideConfirmStopGrading}
+          onConfirm={this.confirmStopGrading}
+        />
+      </>
+    );
+  }
+}
+
 StartGradingButton.propTypes = {
   gradingStatus: PropTypes.string.isRequired,
   startGrading: PropTypes.func.isRequired,

src/containers/ReviewActions/components/StartGradingButton.test.jsx

@@ -29,6 +29,8 @@ jest.mock('data/selectors', () => ({
   },
 }));
 
+let el;
+
 describe('StartGradingButton component', () => {
   describe('component', () => {
     const props = {};
@@ -40,18 +42,22 @@ describe('StartGradingButton component', () => {
       <StartGradingButton {...props} gradingStatus={gradingStatus} />,
     );
     test('snapshot: locked (null)', () => {
-      const el = render(statuses.locked);
+      el = render(statuses.locked);
       expect(el).toMatchSnapshot();
       expect(el).toEqual({});
     });
     test('snapshot: ungraded (startGrading callback)', () => {
       expect(render(statuses.ungraded)).toMatchSnapshot();
     });
-    test('snapshot: graded (startGrading callback', () => {
-      expect(render(statuses.graded)).toMatchSnapshot();
+    test('snapshot: graded, confirmOverride (startGrading callback)', () => {
+      el = render(statuses.graded);
+      el.setState({ showConfirmOverrideGrade: true });
+      expect(el.instance().render()).toMatchSnapshot();
     });
-    test('snapshot: inProgress (stopGrading callback', () => {
-      expect(render(statuses.inProgress)).toMatchSnapshot();
+    test('snapshot: inProgress, confirmStop (stopGrading callback)', () => {
+      el = render(statuses.inProgress);
+      el.setState({ showConfirmStopGrading: true });
+      expect(el.instance().render()).toMatchSnapshot();
     });
   });
   describe('mapStateToProps', () => {

src/containers/ReviewActions/components/StopGradingConfirmModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ConfirmModal from 'components/ConfirmModal';
+
+export const StopGradingConfirmModal = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+}) => (
+  <ConfirmModal
+    title="Are you sure you want to stop grading this response?"
+    content="Your progress will be lost."
+    cancelText="Go back"
+    confirmText="Cancel Grading"
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    isOpen={isOpen}
+  />
+);
+StopGradingConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default StopGradingConfirmModal;

src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx

@@ -0,0 +1,19 @@
+import { shallow } from 'enzyme';
+
+import { StopGradingConfirmModal } from './StopGradingConfirmModal';
+
+jest.mock('components/ConfirmModal', () => 'ConfirmModal');
+
+describe('StopGradingConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<StopGradingConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<StopGradingConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

src/containers/ReviewActions/components/__snapshots__/OverrideGradeConfirmModal.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverrideGradeConfirmModal snapshot: closed 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Continue grade override"
+  content="This cannot be undone.  The learner may have already received their grade"
+  isOpen={false}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to override this grade?"
+/>
+`;
+
+exports[`OverrideGradeConfirmModal snapshot: open 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Continue grade override"
+  content="This cannot be undone.  The learner may have already received their grade"
+  isOpen={true}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to override this grade?"
+/>
+`;

src/containers/ReviewActions/components/__snapshots__/StartGradingButton.test.jsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StartGradingButton component component snapshot: graded, confirmOverride (startGrading callback) 1`] = `
+<React.Fragment>
+  <Button
+    iconAfter="Highlight"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Override grade
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={true}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</React.Fragment>
+`;
+
+exports[`StartGradingButton component component snapshot: inProgress, confirmStop (stopGrading callback) 1`] = `
+<React.Fragment>
+  <Button
+    iconAfter="Cancel"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Stop grading this response
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={true}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</React.Fragment>
+`;
+
+exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
+
+exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
+<Fragment>
+  <Button
+    iconAfter="Highlight"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Start Grading
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</Fragment>
+`;

src/containers/ReviewActions/components/__snapshots__/StopGradingConfirmModal.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StopGradingConfirmModal snapshot: closed 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Cancel Grading"
+  content="Your progress will be lost."
+  isOpen={false}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to stop grading this response?"
+/>
+`;
+
+exports[`StopGradingConfirmModal snapshot: open 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Cancel Grading"
+  content="Your progress will be lost."
+  isOpen={true}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to stop grading this response?"
+/>
+`;