feat: i18n Rubric

2021-10-29 10:25:20 -04:00
parent b31d554be9
commit e6247f458e
7 changed files with 108 additions and 36 deletions
--- a/src/containers/Rubric/Rubric.scss
+++ b/src/containers/Rubric/Rubric.scss
@@ -6,14 +6,16 @@
  width: 100%;
  .criteria-title {
    display: inline-block;
-    max-width: calc(100% - 36px);
+    max-width: calc(100% - 44px);
    color: $primary-500;
-    font-size: 1.5rem;
    font-weight: bold;
+    vertical-align: top;
  }
-  .criteria-help-icon {
+  .esg-help-icon {
    float: right;
-    margin-right: -12px;
+    margin-top: (map-get($spacers, 2) * -1);
+    margin-right: (map-get($spacers, 2\.5) * -1);
+    vertical-align: top;
  }
 }
 .criteria-option {
@@ -39,7 +41,7 @@
 .popover.overlay-help-popover {
  z-index: 4000;
  .help-popover-option {
-    margin-bottom: 1rem;
+    margin-bottom: map-get($spacers, 1);
  }
 }

--- a/src/containers/Rubric/RubricFeedback.jsx
+++ b/src/containers/Rubric/RubricFeedback.jsx
@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

 import { Form } from '@edx/paragon';
+import { FormattedMessage, 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 InfoPopover from 'components/InfoPopover';

+import messages from './messages';
+
 /**
 * <RubricFeedback />
 */
@@ -22,6 +25,12 @@ export class RubricFeedback extends React.Component {
    this.props.setValue(event.target.value);
  }

+  get inputLabel() {
+    return this.props.intl.formatMessage(
+      this.props.isGrading ? messages.addComments : messages.comments,
+    );
+  }
+
  render() {
    const {
      isGrading,
@@ -36,7 +45,9 @@ export class RubricFeedback extends React.Component {
    return (
      <Form.Group>
        <Form.Label className="criteria-label">
-          <span className="criteria-title">Overall comments</span>
+          <span className="criteria-title">
+            <FormattedMessage {...messages.overallComments} />
+          </span>
          <InfoPopover>
            <div>{feedbackPrompt}</div>
          </InfoPopover>
@@ -44,7 +55,7 @@ export class RubricFeedback extends React.Component {
        <Form.Control
          as="input"
          className="rubric-feedback feedback-input"
-          floatingLabel={isGrading ? 'Add comments' : 'Comments'}
+          floatingLabel={this.inputLabel}
          value={value}
          onChange={this.onChange}
          disabled={!isGrading}
@@ -59,6 +70,8 @@ RubricFeedback.defaultProps = {
 };

 RubricFeedback.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
  // redux
  config: PropTypes.string.isRequired,
  isGrading: PropTypes.bool.isRequired,
@@ -78,4 +91,4 @@ export const mapDispatchToProps = {
  setValue: actions.grading.setRubricFeedback,
 };

-export default connect(mapStateToProps, mapDispatchToProps)(RubricFeedback);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RubricFeedback));
--- a/src/containers/Rubric/RubricFeedback.test.jsx
+++ b/src/containers/Rubric/RubricFeedback.test.jsx
@@ -8,6 +8,8 @@ import {
  gradeStatuses,
 } from 'data/services/lms/constants';

+import { formatMessage } from 'testUtils';
+
 import {
  RubricFeedback,
  mapDispatchToProps,
@@ -16,13 +18,14 @@ import {

 jest.mock('components/InfoPopover', () => 'InfoPopover');

-jest.mock('@edx/paragon', () => ({
-  Form: {
-    Group: () => 'Form.Group',
-    Label: () => 'Form.Label',
-    Control: () => 'Form.Control',
-  },
-}));
+jest.mock('@edx/paragon', () => {
+  const Form = () => 'Form';
+  Object.defineProperty(Form, 'name', { value: 'Form' });
+  Form.Group = 'Form.Group';
+  Form.Label = 'Form.Label';
+  Form.Control = 'Form.Control';
+  return { Form };
+});

 jest.mock('data/selectors', () => ({
  __esModule: true,
@@ -48,8 +51,9 @@ jest.mock('data/selectors', () => ({
  },
 }));

-describe('Review Feedback component', () => {
+describe('Rubric Feedback component', () => {
  const props = {
+    intl: { formatMessage },
    config: 'config stirng',
    isGrading: true,
    value: 'some value',
--- a/src/containers/Rubric/snapshots/RubricFeedback.test.jsx.snap
+++ b/src/containers/Rubric/snapshots/RubricFeedback.test.jsx.snap
@@ -1,24 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Review Feedback component snapshot is configure to disabled 1`] = `null`;
+exports[`Rubric Feedback component snapshot is configure to disabled 1`] = `null`;

-exports[`Review Feedback component snapshot is graded 1`] = `
-<Group>
-  <Label
+exports[`Rubric Feedback component snapshot is graded 1`] = `
+<Form.Group>
+  <Form.Label
    className="criteria-label"
  >
    <span
      className="criteria-title"
    >
-      Overall comments
+      <FormattedMessage
+        defaultMessage="Overall comments"
+        description="Rubric overall commnents label"
+        id="ora-grading.Rubric.overallComments"
+      />
    </span>
    <InfoPopover>
      <div>
        feedback prompt
      </div>
    </InfoPopover>
-  </Label>
-  <Control
+  </Form.Label>
+  <Form.Control
    as="input"
    className="rubric-feedback feedback-input"
    disabled={true}
@@ -26,26 +30,30 @@ exports[`Review Feedback component snapshot is graded 1`] = `
    onChange={[MockFunction this.onChange]}
    value="some value"
  />
-</Group>
+</Form.Group>
 `;

-exports[`Review Feedback component snapshot is grading 1`] = `
-<Group>
-  <Label
+exports[`Rubric Feedback component snapshot is grading 1`] = `
+<Form.Group>
+  <Form.Label
    className="criteria-label"
  >
    <span
      className="criteria-title"
    >
-      Overall comments
+      <FormattedMessage
+        defaultMessage="Overall comments"
+        description="Rubric overall commnents label"
+        id="ora-grading.Rubric.overallComments"
+      />
    </span>
    <InfoPopover>
      <div>
        feedback prompt
      </div>
    </InfoPopover>
-  </Label>
-  <Control
+  </Form.Label>
+  <Form.Control
    as="input"
    className="rubric-feedback feedback-input"
    disabled={false}
@@ -53,5 +61,5 @@ exports[`Review Feedback component snapshot is grading 1`] = `
    onChange={[MockFunction this.onChange]}
    value="some value"
  />
-</Group>
+</Form.Group>
 `;
--- a/src/containers/Rubric/snapshots/index.test.jsx.snap
+++ b/src/containers/Rubric/snapshots/index.test.jsx.snap
@@ -8,7 +8,11 @@ exports[`Rubric Container snapshot is grading 1`] = `
    className="grading-rubric-body"
  >
    <h3>
-      Rubric
+      <FormattedMessage
+        defaultMessage="Rubric"
+        description="Rubric interface label"
+        id="ora-grading.Rubric.rubric"
+      />
    </h3>
    <hr />
    <CriterionContainer
@@ -43,7 +47,11 @@ exports[`Rubric Container snapshot is grading 1`] = `
    className="grading-rubric-footer"
  >
    <Button>
-      Submit Grade
+      <FormattedMessage
+        defaultMessage="Submit grade"
+        description="Submit Grade button text"
+        id="ora-grading.Rubric.submitGrade"
+      />
    </Button>
  </div>
 </Card>
@@ -57,7 +65,11 @@ exports[`Rubric Container snapshot is not grading 1`] = `
    className="grading-rubric-body"
  >
    <h3>
-      Rubric
+      <FormattedMessage
+        defaultMessage="Rubric"
+        description="Rubric interface label"
+        id="ora-grading.Rubric.rubric"
+      />
    </h3>
    <hr />
    <CriterionContainer
--- a/src/containers/Rubric/index.jsx
+++ b/src/containers/Rubric/index.jsx
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

 import { Card, Button } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import selectors from 'data/selectors';

 import CriterionContainer from 'containers/CriterionContainer';
 import RubricFeedback from './RubricFeedback';
+import messages from './messages';

 import './Rubric.scss';

@@ -17,7 +19,7 @@ import './Rubric.scss';
 export const Rubric = ({ isGrading, criteriaIndices }) => (
  <Card className="grading-rubric-card">
    <Card.Body className="grading-rubric-body">
-      <h3>Rubric</h3>
+      <h3><FormattedMessage {...messages.rubric} /></h3>
      <hr />
      {criteriaIndices.map((index) => (
        <CriterionContainer
@@ -31,7 +33,7 @@ export const Rubric = ({ isGrading, criteriaIndices }) => (
    </Card.Body>
    {isGrading && (
      <div className="grading-rubric-footer">
-        <Button>Submit Grade</Button>
+        <Button><FormattedMessage {...messages.submitGrade} /></Button>
      </div>
    )}
  </Card>
--- a/src/containers/Rubric/messages.js
+++ b/src/containers/Rubric/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  rubric: {
+    id: 'ora-grading.Rubric.rubric',
+    defaultMessage: 'Rubric',
+    description: 'Rubric interface label',
+  },
+  submitGrade: {
+    id: 'ora-grading.Rubric.submitGrade',
+    defaultMessage: 'Submit grade',
+    description: 'Submit Grade button text',
+  },
+  overallComments: {
+    id: 'ora-grading.Rubric.overallComments',
+    defaultMessage: 'Overall comments',
+    description: 'Rubric overall commnents label',
+  },
+  addComments: {
+    id: 'ora-grading.Rubric.addComments',
+    defaultMessage: 'Add comments',
+    description: 'Rubric comments input label',
+  },
+  comments: {
+    id: 'ora-grading.Rubric.comments',
+    defaultMessage: 'Comments',
+    description: 'Rubric comments display label',
+  },
+});
+
+export default messages;