feat: i18n CriterionContainer

src/containers/CriterionContainer/CriterionFeedback.jsx

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Form } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { feedbackRequirement } from 'data/services/lms/constants';
 import actions from 'data/actions';
 import selectors from 'data/selectors';
+import messages from './messages';
 
 /**
  * <CriterionFeedback />
@@ -24,6 +26,8 @@ export class CriterionFeedback extends React.Component {
     });
   }
 
+  translate = (msg) => this.props.intl.formatMessage(msg);
+
   render() {
     const { config, isGrading, value } = this.props;
     if (config === feedbackRequirement.disabled) {
@@ -33,7 +37,7 @@ export class CriterionFeedback extends React.Component {
       <Form.Control
         as="input"
         className="criterion-feedback feedback-input"
-        floatingLabel={isGrading ? 'Add comments' : 'Comments'}
+        floatingLabel={this.translate(isGrading ? messages.addComments : messages.comments)}
         value={value}
         onChange={this.onChange}
         disabled={!isGrading}
@@ -49,6 +53,8 @@ CriterionFeedback.defaultProps = {
 CriterionFeedback.propTypes = {
   orderNum: PropTypes.number.isRequired,
   isGrading: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
   // redux
   config: PropTypes.string.isRequired,
   setValue: PropTypes.func.isRequired,
@@ -64,4 +70,4 @@ export const mapDispatchToProps = {
   setValue: actions.grading.setCriterionFeedback,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback));

src/containers/CriterionContainer/CriterionFeedback.test.jsx

@@ -7,6 +7,7 @@ import {
   feedbackRequirement,
   gradeStatuses,
 } from 'data/services/lms/constants';
+import { formatMessage } from 'testUtils';
 import {
   CriterionFeedback,
   mapStateToProps,
@@ -42,6 +43,7 @@ jest.mock('data/selectors', () => ({
 
 describe('Criterion Feedback', () => {
   const props = {
+    intl: { formatMessage },
     orderNum: 1,
     config: 'config string',
     isGrading: true,

src/containers/CriterionContainer/RadioCriterion.jsx

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Form } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import actions from 'data/actions';
 import selectors from 'data/selectors';
+import messages from './messages';
 
 /**
  * <RadioCriterion />
@@ -24,7 +26,12 @@ export class RadioCriterion extends React.Component {
   }
 
   render() {
-    const { config, data, isGrading } = this.props;
+    const {
+      config,
+      data,
+      intl,
+      isGrading,
+    } = this.props;
     return (
       <>
         <Form.RadioSet name={config.name} value={data.selectedOption || ''}>
@@ -33,7 +40,7 @@ export class RadioCriterion extends React.Component {
               className="criteria-option"
               key={option.name}
               value={option.name}
-              description={`${option.points} points`}
+              description={intl.formatMessage(messages.optionPoints, { points: option.points })}
               onChange={this.onChange}
               disabled={!isGrading}
             >
@@ -56,6 +63,8 @@ RadioCriterion.defaultProps = {
 RadioCriterion.propTypes = {
   orderNum: PropTypes.number.isRequired,
   isGrading: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
   // redux
   config: PropTypes.shape({
     prompt: PropTypes.string,
@@ -87,4 +96,4 @@ export const mapDispatchToProps = {
   setCriterionOption: actions.grading.setCriterionOption,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(RadioCriterion);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RadioCriterion));

src/containers/CriterionContainer/RadioCriterion.test.jsx

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import actions from 'data/actions';
 import selectors from 'data/selectors';
+import { formatMessage } from 'testUtils';
 import {
   RadioCriterion,
   mapDispatchToProps,
@@ -36,8 +37,9 @@ jest.mock('data/selectors', () => ({
   },
 }));
 
-describe('Radio Crition Container', () => {
+describe('Radio Criterion Container', () => {
   const props = {
+    intl: { formatMessage },
     orderNum: 1,
     isGrading: true,
     config: {

src/containers/CriterionContainer/ReviewCriterion.jsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Form, FormControlFeedback } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
+import messages from './messages';
 
 /**
  * <ReviewCriterion />
@@ -16,7 +18,7 @@ export const ReviewCriterion = ({ config }) => (
         <div>
           <Form.Label className="option-label">{option.label}</Form.Label>
           <FormControlFeedback className="option-points">
-            {`${option.points} points`}
+            <FormattedMessage {...messages.optionPoints} values={{ points: option.points }} />
           </FormControlFeedback>
         </div>
       </div>

src/containers/CriterionContainer/ReviewCriterion.test.jsx

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import selectors from 'data/selectors';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
+import messages from './messages';
 
 jest.mock('@edx/paragon', () => ({
   Form: {
@@ -80,9 +81,10 @@ describe('Review Crition Container', () => {
         expect(optionEl.find('.option-label').childAt(0).text()).toEqual(
           option.label,
         );
-        expect(optionEl.find('.option-points').childAt(0).text()).toContain(
-          String(option.points),
-        );
+        expect(optionEl.find('.option-points').childAt(0).props()).toEqual({
+          ...messages.optionPoints,
+          values: { points: option.points },
+        });
       });
     });
   });

src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio Crition Container snapshot is grading 1`] = `
+exports[`Radio Criterion Container snapshot is grading 1`] = `
 <React.Fragment>
   <RadioSet
     name="random name"
@@ -28,7 +28,7 @@ exports[`Radio Crition Container snapshot is grading 1`] = `
 </React.Fragment>
 `;
 
-exports[`Radio Crition Container snapshot is not grading 1`] = `
+exports[`Radio Criterion Container snapshot is not grading 1`] = `
 <React.Fragment>
   <RadioSet
     name="random name"

src/containers/CriterionContainer/__snapshots__/ReviewCriterion.test.jsx.snap

@@ -17,7 +17,16 @@ exports[`Review Crition Container snapshot 1`] = `
       <FormControlFeedback
         className="option-points"
       >
-        1 points
+        <FormattedMessage
+          defaultMessage="{points} points"
+          description="criterion option point value display"
+          id="ora-grading.RadioCriterion.optionPoints"
+          values={
+            Object {
+              "points": 1,
+            }
+          }
+        />
       </FormControlFeedback>
     </div>
   </div>
@@ -34,7 +43,16 @@ exports[`Review Crition Container snapshot 1`] = `
       <FormControlFeedback
         className="option-points"
       >
-        2 points
+        <FormattedMessage
+          defaultMessage="{points} points"
+          description="criterion option point value display"
+          id="ora-grading.RadioCriterion.optionPoints"
+          values={
+            Object {
+              "points": 2,
+            }
+          }
+        />
       </FormControlFeedback>
     </div>
   </div>

src/containers/CriterionContainer/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  addComments: {
+    id: 'ora-grading.CriterionFeedback.addCommentsLabel',
+    defaultMessage: 'Add comments',
+    description: 'label for editable feedback field',
+  },
+  comments: {
+    id: 'ora-grading.CriterionFeedback.commentsLabel',
+    defaultMessage: 'Comments',
+    description: 'label for read-only feedback field',
+  },
+  optionPoints: {
+    id: 'ora-grading.RadioCriterion.optionPoints',
+    defaultMessage: '{points} points',
+    description: 'criterion option point value display',
+  },
+});
+
+export default messages;