diff --git a/src/App.scss b/src/App.scss
index 7dfe894..33c8e59 100755
--- a/src/App.scss
+++ b/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;
+ }
}
diff --git a/src/components/ConfirmModal.jsx b/src/components/ConfirmModal.jsx
new file mode 100644
index 0000000..b60b214
--- /dev/null
+++ b/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,
+}) => (
+
+
+
+
+ )}
+ >
+ {content}
+
+);
+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;
diff --git a/src/components/ConfirmModal.test.jsx b/src/components/ConfirmModal.test.jsx
new file mode 100644
index 0000000..bc5fb05
--- /dev/null
+++ b/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()).toMatchSnapshot();
+ });
+ test('snapshot: open', () => {
+ expect(shallow()).toMatchSnapshot();
+ });
+});
diff --git a/src/components/__snapshots__/ConfirmModal.test.jsx.snap b/src/components/__snapshots__/ConfirmModal.test.jsx.snap
new file mode 100644
index 0000000..dad16c1
--- /dev/null
+++ b/src/components/__snapshots__/ConfirmModal.test.jsx.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmModal snapshot: closed 1`] = `
+
+
+
+
+ }
+ isOpen={false}
+ title="test-title"
+>
+
+ test-content
+
+
+`;
+
+exports[`ConfirmModal snapshot: open 1`] = `
+
+
+
+
+ }
+ isOpen={true}
+ title="test-title"
+>
+
+ test-content
+
+
+`;
diff --git a/src/containers/ReviewActions/__snapshots__/StartGradingButton.test.jsx.snap b/src/containers/ReviewActions/__snapshots__/StartGradingButton.test.jsx.snap
deleted file mode 100644
index 800c162..0000000
--- a/src/containers/ReviewActions/__snapshots__/StartGradingButton.test.jsx.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StartGradingButton component component snapshot: graded (startGrading callback 1`] = `
-
-`;
-
-exports[`StartGradingButton component component snapshot: inProgress (stopGrading callback 1`] = `
-
-`;
-
-exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
-
-exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
-
-`;
diff --git a/src/containers/ReviewActions/__snapshots__/ReviewActions.test.jsx.snap b/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap
similarity index 100%
rename from src/containers/ReviewActions/__snapshots__/ReviewActions.test.jsx.snap
rename to src/containers/ReviewActions/__snapshots__/index.test.jsx.snap
diff --git a/src/containers/ReviewActions/components/OverrideGradeConfirmModal.jsx b/src/containers/ReviewActions/components/OverrideGradeConfirmModal.jsx
new file mode 100644
index 0000000..43a7a2f
--- /dev/null
+++ b/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,
+}) => (
+
+);
+OverrideGradeConfirmModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func.isRequired,
+};
+
+export default OverrideGradeConfirmModal;
diff --git a/src/containers/ReviewActions/components/OverrideGradeConfirmModal.test.jsx b/src/containers/ReviewActions/components/OverrideGradeConfirmModal.test.jsx
new file mode 100644
index 0000000..dfe80f3
--- /dev/null
+++ b/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()).toMatchSnapshot();
+ });
+ test('snapshot: open', () => {
+ expect(shallow()).toMatchSnapshot();
+ });
+});
diff --git a/src/containers/ReviewActions/components/StartGradingButton.jsx b/src/containers/ReviewActions/components/StartGradingButton.jsx
index 64337e7..22eea53 100644
--- a/src/containers/ReviewActions/components/StartGradingButton.jsx
+++ b/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 (
-
- );
-};
+
+ 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 (
+ <>
+
+
+
+ >
+ );
+ }
+}
+
StartGradingButton.propTypes = {
gradingStatus: PropTypes.string.isRequired,
startGrading: PropTypes.func.isRequired,
diff --git a/src/containers/ReviewActions/components/StartGradingButton.test.jsx b/src/containers/ReviewActions/components/StartGradingButton.test.jsx
index 625aa00..1161914 100644
--- a/src/containers/ReviewActions/components/StartGradingButton.test.jsx
+++ b/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', () => {
,
);
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', () => {
diff --git a/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx b/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx
new file mode 100644
index 0000000..3598b92
--- /dev/null
+++ b/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,
+}) => (
+
+);
+StopGradingConfirmModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func.isRequired,
+};
+
+export default StopGradingConfirmModal;
diff --git a/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx b/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx
new file mode 100644
index 0000000..83b7ba7
--- /dev/null
+++ b/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()).toMatchSnapshot();
+ });
+ test('snapshot: open', () => {
+ expect(shallow()).toMatchSnapshot();
+ });
+});
diff --git a/src/containers/ReviewActions/components/__snapshots__/OverrideGradeConfirmModal.test.jsx.snap b/src/containers/ReviewActions/components/__snapshots__/OverrideGradeConfirmModal.test.jsx.snap
new file mode 100644
index 0000000..a62f2f9
--- /dev/null
+++ b/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`] = `
+
+`;
+
+exports[`OverrideGradeConfirmModal snapshot: open 1`] = `
+
+`;
diff --git a/src/containers/ReviewActions/components/__snapshots__/StartGradingButton.test.jsx.snap b/src/containers/ReviewActions/components/__snapshots__/StartGradingButton.test.jsx.snap
new file mode 100644
index 0000000..28c3315
--- /dev/null
+++ b/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`] = `
+
+
+
+
+
+`;
+
+exports[`StartGradingButton component component snapshot: inProgress, confirmStop (stopGrading callback) 1`] = `
+
+
+
+
+
+`;
+
+exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
+
+exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
+
+
+
+
+
+`;
diff --git a/src/containers/ReviewActions/components/__snapshots__/StopGradingConfirmModal.test.jsx.snap b/src/containers/ReviewActions/components/__snapshots__/StopGradingConfirmModal.test.jsx.snap
new file mode 100644
index 0000000..4cd3a8a
--- /dev/null
+++ b/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`] = `
+
+`;
+
+exports[`StopGradingConfirmModal snapshot: open 1`] = `
+
+`;
diff --git a/src/containers/ReviewActions/__snapshots__/SubmissionNavigation.test.jsx.snap b/src/containers/ReviewActions/components/__snapshots__/SubmissionNavigation.test.jsx.snap
similarity index 100%
rename from src/containers/ReviewActions/__snapshots__/SubmissionNavigation.test.jsx.snap
rename to src/containers/ReviewActions/components/__snapshots__/SubmissionNavigation.test.jsx.snap