feat: generic criterion feedback component

Author: muselesscreator

src/components/Assessment/components/OverallFeedback/__snapshots__/index.test.jsx.snap renamed to src/components/Assessment/EditableAssessment/OverallFeedback/__snapshots__/index.test.jsx.snap

@@ -4,8 +4,10 @@ import { Card, StatefulButton } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { MutationStatus } from 'data/services/lms/constants';
-import CriterionContainer from '../components/CriterionContainer';
-import OverallFeedback from '../components/OverallFeedback';
+import CriterionContainer from 'components/CriterionContainer';
+import RadioCriterion from 'components/CriterionContainer/RadioCriterion';
+import CriterionFeedback from 'components/CriterionContainer/CriterionFeedback';
+import OverallFeedback from './OverallFeedback';
 
 import useEditableAssessmentData from './hooks';
 import messages from '../messages';
@@ -30,11 +32,20 @@ const EditableAssessment = () => {
         <hr className="m-2.5" />
         {criteria.map((criterion) => (
           <CriterionContainer
-            isGrading
-            {...{
-              key: criterion.name,
-              criterion: { ...criterion, ...formFields.criteria[criterion.name] },
-            }}
+            key={criterion.name}
+            criterion={{ ...criterion }}
+            input={(
+              <RadioCriterion
+                criterion={criterion}
+                formFields={formFields.criteria[criterion.name].options}
+              />
+            )}
+            feedback={(
+              <CriterionFeedback
+                criterion={criterion}
+                formFields={formFields.criteria[criterion.name].feedback}
+              />
+            )}
           />
         ))}
         <hr />

src/components/Assessment/components/OverallFeedback/index.jsx renamed to src/components/Assessment/EditableAssessment/OverallFeedback/index.jsx

@@ -1,6 +1,6 @@
 import { useRubricConfig } from 'data/services/lms/hooks/selectors';
 
-export const useReadonlyRubricData = ({ assessment }) => {
+export const useReadonlyAssessmentData = ({ assessment }) => {
   const { criteria, feedbackConfig } = useRubricConfig();
 
   const criterionData = (criterion) => ({
@@ -19,4 +19,4 @@ export const useReadonlyRubricData = ({ assessment }) => {
   };
 };
 
-export default useReadonlyRubricData;
+export default useReadonlyAssessmentData;

src/components/Assessment/components/OverallFeedback/index.test.jsx renamed to src/components/Assessment/EditableAssessment/OverallFeedback/index.test.jsx

@@ -4,18 +4,19 @@ import PropTypes from 'prop-types';
 import { Card } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import CriterionContainer from '../components/CriterionContainer';
-import { useReadonlyRubricData } from './hooks';
+import CriterionContainer from 'components/CriterionContainer';
+import ReviewCriterion from 'components/CriterionContainer/ReviewCriterion';
+import { useReadonlyAssessmentData } from './hooks';
 import messages from '../messages';
 
 /**
- * <ReadonlyRubric />
+ * <ReadonlyAssessment />
  */
-const ReadonlyRubric = ({ assessment }) => {
+const ReadonlyAssessment = ({ assessment }) => {
   const {
     criteria,
     overallFeedbackDisabled,
-  } = useReadonlyRubricData({ assessment });
+  } = useReadonlyAssessmentData({ assessment });
 
   const { formatMessage } = useIntl();
   return (
@@ -27,11 +28,13 @@ const ReadonlyRubric = ({ assessment }) => {
           <CriterionContainer
             key={criterion.name}
             isGrading={false}
-            criterion={{
-              ...criterion,
-              optionsValue: assessment.optionsSelected[criterion.name],
-              feedbackValue: assessment.criterionFeedback[criterion.name],
-            }}
+            criterion={criterion}
+            input={(
+              <ReviewCriterion
+                selectedOption={criterion.options[assessment.optionsSelected[criterion.name]]}
+                feedbackValue={assessment.criterionFeedback[criterion.name]}
+              />
+            )}
           />
         ))}
         {!overallFeedbackDisabled && (
@@ -43,12 +46,12 @@ const ReadonlyRubric = ({ assessment }) => {
   );
 };
 
-ReadonlyRubric.propTypes = {
+ReadonlyAssessment.propTypes = {
   assessment: PropTypes.shape({
     optionsSelected: PropTypes.objectOf(PropTypes.string).isRequired,
     criterionFeedback: PropTypes.objectOf(PropTypes.string).isRequired,
     overallFeedback: PropTypes.string,
   }).isRequired,
 };
 
-export default ReadonlyRubric;
+export default ReadonlyAssessment;