Merge branch 'master' into lk/latex-support

package.json

@@ -37,7 +37,7 @@
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.3",
-    "@edx/react-unit-test-utils": "1.7.1",
+    "@edx/react-unit-test-utils": "1.7.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",

src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.jsx

@@ -23,7 +23,7 @@ const AssessmentCriteria = ({ criteria, overallFeedback, stepLabel }) => {
             key={rubricCriterion.name}
             criterionName={rubricCriterion.name}
             criterionDescription={rubricCriterion.description}
-            selectedOption={option.name}
+            selectedOption={option.label}
             selectedPoints={option.points}
             commentHeader={commentHeader}
             commentBody={feedback}

src/components/CriterionContainer/GradedCriterion.jsx

@@ -11,7 +11,7 @@ import messages from './messages';
  */
 const GradedCriterion = ({ selectedOption, feedbackValue }) => (
   <div className="review-criterion">
-    <Form.Label className="option-label">{selectedOption.name}</Form.Label>
+    <Form.Label className="option-label">{selectedOption.label || selectedOption.name}</Form.Label>
     <div key={selectedOption.name} className="criteria-option">
       <div>
         <FormControlFeedback className="option-points">
@@ -32,6 +32,7 @@ GradedCriterion.defaultProps = {
 GradedCriterion.propTypes = {
   selectedOption: PropTypes.shape({
     name: PropTypes.string.isRequired,
+    label: PropTypes.string,
     points: PropTypes.number.isRequired,
   }).isRequired,
   feedbackValue: PropTypes.string,

src/components/CriterionContainer/RadioCriterion.jsx

@@ -38,7 +38,7 @@ const RadioCriterion = ({
           })}
           onChange={onChange}
         >
-          {option.name}
+          {option.label}
         </Form.Radio>
       ))}
 
@@ -60,6 +60,7 @@ const RadioCriterion = ({
 
 const optionPropType = PropTypes.shape({
   name: PropTypes.string.isRequired,
+  label: PropTypes.string,
   points: PropTypes.number.isRequired,
 });
 RadioCriterion.propTypes = {

src/components/CriterionContainer/ReviewCriterion.jsx

@@ -14,7 +14,7 @@ const ReviewCriterion = ({ criterion }) => (
     <div className="review-criterion">
       {criterion.options.map((option) => (
         <div className="d-flex text-nowrap" key={option.name}>
-          <Form.Label className="option-label">{option.name}</Form.Label>
+          <Form.Label className="option-label">{option.label}</Form.Label>
           <div key={option.name} className="criteria-option">
             <div>
               <FormControlFeedback className="option-points">
@@ -35,6 +35,7 @@ ReviewCriterion.propTypes = {
   criterion: PropTypes.shape({
     options: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
+      label: PropTypes.string,
       point: PropTypes.number,
     })),
   }).isRequired,

src/components/CriterionContainer/index.jsx

@@ -23,7 +23,7 @@ const CriterionContainer = ({
         <hr />
         {criterion.options.map((option) => (
           <div key={option.name} className="help-popover-option">
-            <strong>{option.name}</strong>
+            <strong>{option.label}</strong>
             <br />
             {option.description}
           </div>

src/data/services/lms/types/blockInfo.ts

@@ -6,6 +6,7 @@ export interface CriterionConfig {
   feedbackRequired: boolean,
   options: {
     name: string,
+    label: string,
     points: number,
     description: string,
   }[],