feat: readonly rubric

Author: muselesscreator

src/components/Assessment/ReadonlyAssessment/index.jsx

@@ -5,7 +5,7 @@ import { Card } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import CriterionContainer from 'components/CriterionContainer';
-import ReviewCriterion from 'components/CriterionContainer/ReviewCriterion';
+import GradedCriterion from 'components/CriterionContainer/GradedCriterion';
 import { useReadonlyAssessmentData } from './hooks';
 import messages from '../messages';
 
@@ -30,7 +30,7 @@ const ReadonlyAssessment = ({ assessment }) => {
             isGrading={false}
             criterion={criterion}
             input={(
-              <ReviewCriterion
+              <GradedCriterion
                 selectedOption={criterion.options[assessment.optionsSelected[criterion.name]]}
                 feedbackValue={assessment.criterionFeedback[criterion.name]}
               />

src/components/CriterionContainer/GradedCriterion.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form, FormControlFeedback } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+/**
+ * <ReviewCriterion />
+ */
+const ReviewCriterion = ({ selectedOption, feedbackValue }) => (
+  <div className="review-criterion">
+    <Form.Label className="option-label">{selectedOption.name}</Form.Label>
+    <div key={selectedOption.name} className="criteria-option">
+      <div>
+        <FormControlFeedback className="option-points">
+          <FormattedMessage
+            {...messages.optionPoints}
+            values={{ points: selectedOption.points }}
+          />
+        </FormControlFeedback>
+        {feedbackValue && <div className="rubric-feedback">{feedbackValue}</div>}
+      </div>
+    </div>
+  </div>
+);
+
+ReviewCriterion.defaultProps = {
+  feedbackValue: null,
+};
+ReviewCriterion.propTypes = {
+  selectedOption: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    points: PropTypes.number.isRequired,
+  }).isRequired,
+  feedbackValue: PropTypes.string,
+};
+
+export default ReviewCriterion;

src/components/CriterionContainer/ReviewCriterion.jsx

@@ -9,32 +9,35 @@ import messages from './messages';
 /**
  * <ReviewCriterion />
  */
-const ReviewCriterion = ({ selectedOption, feedbackValue }) => (
-  <div className="review-criterion">
-    <Form.Label className="option-label">{selectedOption.name}</Form.Label>
-    <div key={selectedOption.name} className="criteria-option">
-      <div>
-        <FormControlFeedback className="option-points">
-          <FormattedMessage
-            {...messages.optionPoints}
-            values={{ points: selectedOption.points }}
-          />
-        </FormControlFeedback>
-        {feedbackValue && <div className="rubric-feedback">{feedbackValue}</div>}
-      </div>
+const ReviewCriterion = ({ criterion }) => (
+  <Form.Group>
+    <div className="review-criterion">
+      {criterion.options.map((option) => (
+        <>
+          <Form.Label className="option-label">{option.name}</Form.Label>
+          <div key={option.name} className="criteria-option">
+            <div>
+              <FormControlFeedback className="option-points">
+                <FormattedMessage
+                  {...messages.optionPoints}
+                  values={{ points: option.points }}
+                />
+              </FormControlFeedback>
+            </div>
+          </div>
+        </>
+      ))}
     </div>
-  </div>
+  </Form.Group>
 );
 
-ReviewCriterion.defaultProps = {
-  feedbackValue: null,
-};
 ReviewCriterion.propTypes = {
-  selectedOption: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    points: PropTypes.number.isRequired,
+  criterion: PropTypes.shape({
+    options: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      point: PropTypes.number,
+    })),
   }).isRequired,
-  feedbackValue: PropTypes.string,
 };
 
 export default ReviewCriterion;