chore: prioritize criterion option label over name for display (#170)

This resolves https://2u-internal.atlassian.net/browse/AU-1657

* chore: prioritize criterion option label over name for display

* chore: update package-lock

* chore: remove OR and use label to display only

Author: leangseu-edx

package-lock.json

@@ -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/Assessment/ReadonlyAssessment/AssessmentCriteria.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/GradedCriterion.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/RadioCriterion.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/ReviewCriterion.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/components/CriterionContainer/index.jsx

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