feat: i18n ReviewActions

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

@@ -20,7 +20,17 @@ exports[`ReviewActions component component snapshot: do not show rubric 1`] = `
       <span
         className="small"
       >
-        Score: 3/10
+        <FormattedMessage
+          defaultMessage="Score: {pointsEarned}/{pointsPossible}"
+          description="Review pane action bar score display"
+          id="ora-grading.ReviewActions.scoreDisplay"
+          values={
+            Object {
+              "pointsEarned": 3,
+              "pointsPossible": 10,
+            }
+          }
+        />
       </span>
     </span>
     <div
@@ -30,8 +40,11 @@ exports[`ReviewActions component component snapshot: do not show rubric 1`] = `
         onClick={[MockFunction this.props.toggleShowRubric]}
         variant="outline-primary"
       >
-        Show
-         Rubric
+        <FormattedMessage
+          defaultMessage="Show Rubric"
+          description="Review pane action bar Show Rubric button text"
+          id="ora-grading.ReviewActions.showRubric"
+        />
       </Button>
       <StartGradingButton />
       <SubmissionNavigation />
@@ -68,8 +81,11 @@ exports[`ReviewActions component component snapshot: show rubric, no score 1`] =
         onClick={[MockFunction this.props.toggleShowRubric]}
         variant="outline-primary"
       >
-        Hide
-         Rubric
+        <FormattedMessage
+          defaultMessage="Hide Rubric"
+          description="Review pane action bar Hide Rubric button text"
+          id="ora-grading.ReviewActions.hideRubric"
+        />
       </Button>
       <StartGradingButton />
       <SubmissionNavigation />

src/containers/ReviewActions/components/OverrideGradeConfirmModal.jsx

@@ -1,18 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
 import ConfirmModal from 'components/ConfirmModal';
+import messages from './messages';
 
 export const OverrideGradeConfirmModal = ({
+  intl,
   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"
+    title={intl.formatMessage(messages.overrideConfirmTitle)}
+    content={intl.formatMessage(messages.overrideConfirmWarning)}
+    cancelText={intl.formatMessage(messages.goBack)}
+    confirmText={intl.formatMessage(messages.overrideConfirmContinue)}
     onCancel={onCancel}
     onConfirm={onConfirm}
     isOpen={isOpen}
@@ -22,6 +26,8 @@ OverrideGradeConfirmModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
-export default OverrideGradeConfirmModal;
+export default injectIntl(OverrideGradeConfirmModal);

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

@@ -1,11 +1,13 @@
 import { shallow } from 'enzyme';
 
+import { formatMessage } from 'testUtils';
 import { OverrideGradeConfirmModal } from './OverrideGradeConfirmModal';
 
 jest.mock('components/ConfirmModal', () => 'ConfirmModal');
 
 describe('OverrideGradeConfirmModal', () => {
   const props = {
+    intl: { formatMessage },
     isOpen: false,
     onCancel: jest.fn().mockName('this.props.onCancel'),
     onConfirm: jest.fn().mockName('this.props.onConfirm'),

src/containers/ReviewActions/components/StartGradingButton.jsx

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import {
-  Button,
-} from '@edx/paragon';
+import { Button } from '@edx/paragon';
 import { Cancel, Highlight } from '@edx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
@@ -13,18 +12,19 @@ import { gradingStatuses as statuses } from 'data/services/lms/constants';
 
 import StopGradingConfirmModal from './StopGradingConfirmModal';
 import OverrideGradeConfirmModal from './OverrideGradeConfirmModal';
+import messages from './messages';
 
 export const buttonArgs = {
   [statuses.ungraded]: {
-    label: 'Start Grading',
+    label: messages.startGrading,
     iconAfter: Highlight,
   },
   [statuses.graded]: {
-    label: 'Override grade',
+    label: messages.overrideGrade,
     iconAfter: Highlight,
   },
   [statuses.inProgress]: {
-    label: 'Stop grading this response',
+    label: messages.stopGrading,
     iconAfter: Cancel,
   },
 };
@@ -95,7 +95,7 @@ export class StartGradingButton extends React.Component {
           iconAfter={args.iconAfter}
           onClick={this.handleClick}
         >
-          {args.label}
+          <FormattedMessage {...args.label} />
         </Button>
         <OverrideGradeConfirmModal
           isOpen={this.state.showConfirmOverrideGrade}

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

@@ -29,6 +29,8 @@ jest.mock('data/selectors', () => ({
     },
   },
 }));
+jest.mock('./OverrideGradeConfirmModal', () => 'OverrideGradeConfirmModal');
+jest.mock('./StopGradingConfirmModal', () => 'StopGradingConfirmModal');
 
 let el;
 

src/containers/ReviewActions/components/StopGradingConfirmModal.jsx

@@ -1,25 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
 import ConfirmModal from 'components/ConfirmModal';
+import messages from './messages';
 
 export const StopGradingConfirmModal = ({
+  intl,
   isOpen,
   isOverride,
   onCancel,
   onConfirm,
 }) => (
   <ConfirmModal
-    title={(isOverride
-      ? 'Are you sure you want to stop grade override?'
-      : 'Are you sure you want to stop grading this response?'
-    )}
-    content="Your progress will be lost."
-    cancelText="Go back"
-    confirmText={(isOverride
-      ? 'Stop grade override'
-      : 'Cancel grading'
-    )}
+    title={intl.formatMessage(isOverride
+      ? messages.confirmStopOverrideTitle
+      : messages.confirmStopGradingTitle)}
+    content={intl.formatMessage(messages.confirmStopWarning)}
+    cancelText={intl.formatMessage(messages.goBack)}
+    confirmText={intl.formatMessage(isOverride
+      ? messages.confirmStopOverrideAction
+      : messages.confirmStopGradingAction)}
     onCancel={onCancel}
     onConfirm={onConfirm}
     isOpen={isOpen}
@@ -30,6 +32,8 @@ StopGradingConfirmModal.propTypes = {
   isOverride: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
-export default StopGradingConfirmModal;
+export default injectIntl(StopGradingConfirmModal);

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

@@ -1,11 +1,13 @@
 import { shallow } from 'enzyme';
 
+import { formatMessage } from 'testUtils';
 import { StopGradingConfirmModal } from './StopGradingConfirmModal';
 
 jest.mock('components/ConfirmModal', () => 'ConfirmModal');
 
 describe('StopGradingConfirmModal', () => {
   const props = {
+    intl: { formatMessage },
     isOpen: false,
     isOverride: false,
     onCancel: jest.fn().mockName('this.props.onCancel'),

src/containers/ReviewActions/components/SubmissionNavigation.jsx

@@ -4,14 +4,17 @@ import { connect } from 'react-redux';
 
 import { Icon, IconButton } from '@edx/paragon';
 import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
+import messages from './messages';
 
 /**
  * <SubmissionNavigation />
  */
 export const SubmissionNavigation = ({
+  intl,
   hasPrevSubmission,
   hasNextSubmission,
   loadPrev,
@@ -21,18 +24,25 @@ export const SubmissionNavigation = ({
 }) => (
   <span className="submission-navigation">
     <IconButton
+      className="ml-1"
       size="inline"
       disabled={!hasPrevSubmission}
-      alt="Load previous submission"
+      alt={intl.formatMessage(messages.loadPrevious)}
       src={ChevronLeft}
       iconAs={Icon}
       onClick={loadPrev}
     />
-    <span>{activeIndex + 1} of {selectionLength}</span>
+    <span className="ml-1">
+      <FormattedMessage
+        {...messages.navigationLabel}
+        values={{ current: activeIndex + 1, total: selectionLength }}
+      />
+    </span>
     <IconButton
+      className="ml-1"
       size="inline"
       disabled={!hasNextSubmission}
-      alt="Load next submission"
+      alt={intl.formatMessage(messages.loadNext)}
       src={ChevronRight}
       iconAs={Icon}
       onClick={loadNext}
@@ -44,6 +54,9 @@ SubmissionNavigation.defaultProps = {
   hasNextSubmission: false,
 };
 SubmissionNavigation.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
   activeIndex: PropTypes.number.isRequired,
   hasNextSubmission: PropTypes.bool,
   hasPrevSubmission: PropTypes.bool,
@@ -64,4 +77,4 @@ export const mapDispatchToProps = {
   loadPrev: thunkActions.grading.loadPrev,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SubmissionNavigation);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SubmissionNavigation));

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

@@ -4,6 +4,8 @@ import { shallow } from 'enzyme';
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
 
+import { formatMessage } from 'testUtils';
+
 import {
   SubmissionNavigation,
   mapStateToProps,
@@ -37,6 +39,7 @@ jest.mock('data/selectors', () => ({
 describe('SubmissionNavigation component', () => {
   describe('component', () => {
     const props = {
+      intl: { formatMessage },
       activeIndex: 4,
       selectionLength: 5,
     };

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

@@ -4,7 +4,7 @@ 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"
+  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]}
@@ -16,7 +16,7 @@ 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"
+  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]}

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

@@ -7,7 +7,11 @@ exports[`StartGradingButton component component snapshotes snapshot: graded, con
     onClick={[MockFunction this.handleClick]}
     variant="primary"
   >
-    Override grade
+    <FormattedMessage
+      defaultMessage="Override grade"
+      description="Review pane button text to start grading an already graded submission"
+      id="ora-grading.ReviewActions.StartGradingButton.overrideGrade"
+    />
   </Button>
   <OverrideGradeConfirmModal
     isOpen={true}
@@ -30,7 +34,11 @@ exports[`StartGradingButton component component snapshotes snapshot: inProgress,
     onClick={[MockFunction this.handleClick]}
     variant="primary"
   >
-    Stop grading this response
+    <FormattedMessage
+      defaultMessage="Stop grading"
+      description="Review pane button text to stop grading"
+      id="ora-grading.ReviewActions.StartGradingButton.stopGrading"
+    />
   </Button>
   <OverrideGradeConfirmModal
     isOpen={false}
@@ -55,7 +63,11 @@ exports[`StartGradingButton component component snapshotes snapshot: ungraded (s
     onClick={[MockFunction this.handleClick]}
     variant="primary"
   >
-    Start Grading
+    <FormattedMessage
+      defaultMessage="Start grading"
+      description="Review pane button text to start grading"
+      id="ora-grading.ReviewActions.StartGradingButton.startGrading"
+    />
   </Button>
   <OverrideGradeConfirmModal
     isOpen={false}

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

@@ -6,19 +6,31 @@ exports[`SubmissionNavigation component component snapshot: no next submission (
 >
   <IconButton
     alt="Load previous submission"
+    className="ml-1"
     disabled={false}
     iconAs={[Function]}
     onClick={[MockFunction this.props.loadPrev]}
     size="inline"
     src="ChevronLeft"
   />
-  <span>
-    5
-     of 
-    5
+  <span
+    className="ml-1"
+  >
+    <FormattedMessage
+      defaultMessage="{current} of {total}"
+      description="Submission navigation location label"
+      id="ora-grading.ReviewActions.navigationLabel"
+      values={
+        Object {
+          "current": 5,
+          "total": 5,
+        }
+      }
+    />
   </span>
   <IconButton
     alt="Load next submission"
+    className="ml-1"
     disabled={true}
     iconAs={[Function]}
     onClick={[MockFunction this.props.loadNext]}
@@ -34,19 +46,31 @@ exports[`SubmissionNavigation component component snapshot: no prev submission (
 >
   <IconButton
     alt="Load previous submission"
+    className="ml-1"
     disabled={true}
     iconAs={[Function]}
     onClick={[MockFunction this.props.loadPrev]}
     size="inline"
     src="ChevronLeft"
   />
-  <span>
-    1
-     of 
-    5
+  <span
+    className="ml-1"
+  >
+    <FormattedMessage
+      defaultMessage="{current} of {total}"
+      description="Submission navigation location label"
+      id="ora-grading.ReviewActions.navigationLabel"
+      values={
+        Object {
+          "current": 1,
+          "total": 5,
+        }
+      }
+    />
   </span>
   <IconButton
     alt="Load next submission"
+    className="ml-1"
     disabled={false}
     iconAs={[Function]}
     onClick={[MockFunction this.props.loadNext]}

src/containers/ReviewActions/components/messages.js

@@ -0,0 +1,81 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  overrideConfirmTitle: {
+    id: 'ora-grading.ReviewActions.overrideConfirmTitle',
+    defaultMessage: 'Are you sure you want to override this grade?',
+    description: 'ORA Grading override confirm modal title',
+  },
+  overrideConfirmWarning: {
+    id: 'ora-grading.ReviewActions.overrideConfirmWarning',
+    defaultMessage: 'This cannot be undone.  The learner may have already received their grade.',
+    description: 'ORA Grading override confirm modal warning/content text',
+  },
+  overrideConfirmContinue: {
+    id: 'ora-grading.ReviewActions.overrideConfirmContinue',
+    defaultMessage: 'Continue grade override',
+    description: 'ORA Grading override confirm modal confirm button',
+  },
+  startGrading: {
+    id: 'ora-grading.ReviewActions.StartGradingButton.startGrading',
+    defaultMessage: 'Start grading',
+    description: 'Review pane button text to start grading',
+  },
+  overrideGrade: {
+    id: 'ora-grading.ReviewActions.StartGradingButton.overrideGrade',
+    defaultMessage: 'Override grade',
+    description: 'Review pane button text to start grading an already graded submission',
+  },
+  stopGrading: {
+    id: 'ora-grading.ReviewActions.StartGradingButton.stopGrading',
+    defaultMessage: 'Stop grading',
+    description: 'Review pane button text to stop grading',
+  },
+  confirmStopOverrideTitle: {
+    id: 'ora-grading.ReviewActions.StopGradingConfirmModal.override.title',
+    defaultMessage: 'Are you sure you want to stop grade override?',
+    description: 'ORA stop overriding grade confirm modal title',
+  },
+  confirmStopGradingTitle: {
+    id: 'ora-grading.ReviewActions.StopGradingConfirmModal.title',
+    defaultMessage: 'Are you sure you want to stop grading this response?',
+    description: 'ORA stop grading confirm modal title',
+  },
+  confirmStopWarning: {
+    id: 'ora-grading.ReviewActions.StopGradingConfirmModal.warning',
+    defaultMessage: 'Your progress will be lost.',
+    description: 'ORA stop grading confirm modal warning/content text',
+  },
+  confirmStopOverrideAction: {
+    id: 'ora-grading.ReviewActions.StopGradingConfirmModal.override.confirmText',
+    defaultMessage: 'Stop grade override',
+    description: 'ORA stop overriding grade confirm modal confirm text',
+  },
+  confirmStopGradingAction: {
+    id: 'ora-grading.ReviewActions.StopGradingConfirmModal.confirmText',
+    defaultMessage: 'Cancel grading',
+    description: 'ORA stop grading confirm modal confirm text',
+  },
+  goBack: {
+    id: 'ora-grading.ReviewActions.goBack',
+    defaultMessage: 'Go back',
+    description: 'Confirm modal cancel button text',
+  },
+  loadPrevious: {
+    id: 'ora-grading.ReviewActions.loadPrevious',
+    defaultMessage: 'Load previous submission',
+    description: 'Alt text for submission navigation (to previous submission) button',
+  },
+  loadNext: {
+    id: 'ora-grading.ReviewActions.loadNext',
+    defaultMessage: 'Load next submission',
+    description: 'Alt text for submission navigation (to next submission) button',
+  },
+  navigationLabel: {
+    id: 'ora-grading.ReviewActions.navigationLabel',
+    defaultMessage: '{current} of {total}',
+    description: 'Submission navigation location label',
+  },
+});
+
+export default messages;

src/containers/ReviewActions/index.jsx

@@ -2,10 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import {
-  ActionRow,
-  Button,
-} from '@edx/paragon';
+import { ActionRow, Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import actions from 'data/actions';
 import selectors from 'data/selectors';
@@ -13,6 +11,7 @@ import selectors from 'data/selectors';
 import StatusBadge from 'components/StatusBadge';
 import StartGradingButton from './components/StartGradingButton';
 import SubmissionNavigation from './components/SubmissionNavigation';
+import messages from './messages';
 
 export const ReviewActions = ({
   gradingStatus,
@@ -27,12 +26,17 @@ export const ReviewActions = ({
         <span className="lead">{username}</span>
         <StatusBadge className="review-actions-status mr-3" status={gradingStatus} />
         <span className="small">
-          {pointsPossible && `Score: ${pointsEarned}/${pointsPossible}`}
+          {pointsEarned && (
+            <FormattedMessage
+              {...messages.scoreDisplay}
+              values={{ pointsEarned, pointsPossible }}
+            />
+          )}
         </span>
       </span>
       <div className="review-actions-group">
         <Button variant="outline-primary" onClick={toggleShowRubric}>
-          {showRubric ? 'Hide' : 'Show'} Rubric
+          <FormattedMessage {...(showRubric ? messages.hideRubric : messages.showRubric)} />
         </Button>
         <StartGradingButton />
         <SubmissionNavigation />

src/containers/ReviewActions/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  scoreDisplay: {
+    id: 'ora-grading.ReviewActions.scoreDisplay',
+    defaultMessage: 'Score: {pointsEarned}/{pointsPossible}',
+    description: 'Review pane action bar score display',
+  },
+  hideRubric: {
+    id: 'ora-grading.ReviewActions.hideRubric',
+    defaultMessage: 'Hide Rubric',
+    description: 'Review pane action bar Hide Rubric button text',
+  },
+  showRubric: {
+    id: 'ora-grading.ReviewActions.showRubric',
+    defaultMessage: 'Show Rubric',
+    description: 'Review pane action bar Show Rubric button text',
+  },
+});
+
+export default messages;