chore: update assessment view for multiple peers

src/components/CollapsibleFeedback/AssessmentCriterion.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import Feedback from './Feedback';
+import messages from './messages';
+
+const AssessmentCriterion = ({ assessmentCriterions, overallFeedback, stepName }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      {assessmentCriterions.map((criterion) => {
+        return (
+          <Feedback
+            key={criterion.name}
+            criterionName={criterion.name}
+            selectedOption={criterion.selectedOption}
+            selectedPoints={criterion.selectedPoints}
+            commentHeader={stepName}
+            commentBody={criterion.feedback}
+          />
+        );
+      })}
+      <Feedback
+        criterionName={formatMessage(messages.overallFeedback)}
+        commentHeader={stepName}
+        commentBody={overallFeedback}
+      />
+    </>
+  );
+};
+AssessmentCriterion.defaultProps = {};
+AssessmentCriterion.propTypes = {
+  assessmentCriterions: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    selectedOption: PropTypes.string,
+    selectedPoints: PropTypes.number,
+    feedback: PropTypes.string,
+  })),
+  overallFeedback: PropTypes.string,
+  stepName: PropTypes.string.isRequired,
+};
+
+export default AssessmentCriterion;

src/components/CollapsibleFeedback/Feedback.jsx

@@ -5,16 +5,38 @@ import { Collapsible, Icon } from '@edx/paragon';
 import { ExpandMore, ExpandLess } from '@edx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
+import InfoPopover from 'components/InfoPopover';
 
-const Feedback = ({ criterion, selectedOption, selectedPoints, commentHeader, commentBody, defaultOpen }) => {
+const Feedback = ({
+  criterionName,
+  selectedOption,
+  selectedPoints,
+  commentHeader,
+  commentBody,
+  defaultOpen,
+}) => {
   const [isExpanded, setIsExpanded] = React.useState(defaultOpen);
   const { formatMessage } = useIntl();
 
   return (
     <>
       <div className='mt-2'>
-        <h5>{criterion.name}</h5>
-        {selectedOption && <p>{selectedOption} -- {selectedPoints} points</p>}
+        <div className='d-flex justify-content-between align-items-center'>
+          <h5 className='mb-0'>{criterionName}</h5>
+          <InfoPopover onClick={() => {}}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+          </InfoPopover>
+        </div>
+        {selectedOption && (
+          <p>
+            {selectedOption} -- {selectedPoints} points
+          </p>
+        )}
       </div>
       <div className='bg-gray-100 p-3'>
         <Collapsible.Advanced
@@ -48,6 +70,11 @@ Feedback.defaultProps = {
 };
 Feedback.propTypes = {
   defaultOpen: PropTypes.bool,
+  criterionName: PropTypes.string.isRequired,
+  selectedOption: PropTypes.string,
+  selectedPoints: PropTypes.number,
+  commentHeader: PropTypes.string.isRequired,
+  commentBody: PropTypes.string.isRequired,
 };
 
 export default Feedback;

src/components/CollapsibleFeedback/index.jsx

@@ -3,50 +3,32 @@ import PropTypes from 'prop-types';
 
 import { Collapsible } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import Feedback from './Feedback';
 import messages from './messages';
 
-const CollapsibleFeedback = ({ assessment, stepScore, stepName }) => {
-  const assessmentCriterions = assessment.assessmentCriterions;
+const CollapsibleFeedback = ({ children, stepScore, stepName }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Collapsible
       title={
         <h3>
-          {formatMessage(messages.grade, {
-            stepName,
-          })}
+          {formatMessage(messages.grade, { stepName })}
           {stepScore && formatMessage(messages.gradePoints, stepScore)}
         </h3>
       }
     >
-      {assessmentCriterions.map((criterion) => {
-        return (
-          <Feedback
-            key={criterion.name}
-            criterion={criterion.name}
-            selectedOption={criterion.selectedOption}
-            selectedPoints={criterion.selectedPoints}
-            commentHeader={stepName}
-            commentBody={criterion.feedback}
-          />
-        );
-      })}
-      <Feedback
-        criterion={{ name: 'Overall Feedback' }}
-        commentHeader={stepName}
-        commentBody={assessment.overallFeedback}
-      />
+      {children}
     </Collapsible>
   );
 };
 CollapsibleFeedback.defaultProps = {};
 CollapsibleFeedback.propTypes = {
-  // assessment: PropTypes.shape({
-  //   overallFeedback: PropTypes.string,
-  // }),
   stepName: PropTypes.string.isRequired,
+  stepScore: PropTypes.shape({
+    earned: PropTypes.number,
+    possible: PropTypes.number,
+  }),
+  children: PropTypes.node.isRequired,
 };
 
 export default CollapsibleFeedback;

src/components/CollapsibleFeedback/messages.js

@@ -26,6 +26,11 @@ const messages = defineMessages({
     defaultMessage: '(Not weighted toward final grade))',
     description: 'Not weighted grade label',
   },
+  overallFeedback: {
+    id: 'ora-collapsible-comment.overallFeedback',
+    defaultMessage: 'Overall Feedback',
+    description: 'Overall feedback label',
+  },
 });
 
 export default messages;

src/views/GradeView/FinalGrade.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import CollapsibleFeedback from 'components/CollapsibleFeedback';
 import { useAssessmentsData } from 'data/services/lms/hooks/selectors';
 import messages from './messages';
+import AssessmentCriterion from 'components/CollapsibleFeedback/AssessmentCriterion';
 
 const FinalGrade = () => {
   const { formatMessage } = useIntl();
@@ -14,47 +15,69 @@ const FinalGrade = () => {
   let finalStepScore = null;
   if (assessments.staff) {
     finalStepScore = assessments.staff.stepScore;
+    const stepName = formatMessage(messages.staffStep);
     result.push(
       <CollapsibleFeedback
-        {...assessments.staff}
-        stepName={formatMessage(messages.staffStep)}
-      />
+        stepName={stepName}
+        stepScore={assessments.staff.stepScore}
+      >
+        <AssessmentCriterion {...assessments.staff} stepName={stepName} />
+      </CollapsibleFeedback>
     );
   }
   if (assessments.peer) {
     finalStepScore = finalStepScore || assessments.peer.stepScore;
+    const stepName = formatMessage(messages.peerStep);
     result.push(
       <div className='my-2'>
-        {assessments.peer.assessment?.map((peer, index) => (
-          <CollapsibleFeedback
-            assessment={peer}
-            stepName={formatMessage(messages.peerStep)}
-            key={index}
-          />
-        ))}
+        <CollapsibleFeedback
+          stepName={stepName}
+          stepScore={assessments.peer.stepScore}
+        >
+          {assessments.peer.assessment?.map((peer, index) => (
+            <Fragment key={index}>
+              <p className='mb-0'>
+                {stepName} {index}:
+              </p>
+              <AssessmentCriterion {...peer} stepName={stepName} />
+              <hr className='my-4' />
+            </Fragment>
+          ))}
+        </CollapsibleFeedback>
       </div>
     );
   }
   if (assessments.peerUnweighted) {
+    const stepName = formatMessage(messages.unweightedPeerStep);
     result.push(
       <div className='my-2'>
-        {assessments.peerUnweighted.assessment?.map((peer, index) => (
-          <CollapsibleFeedback
-            assessment={peer}
-            stepName={formatMessage(messages.unweightedPeerStep)}
-            key={index}
-          />
-        ))}
+        <CollapsibleFeedback
+          stepName={stepName}
+          stepScore={assessments.peerUnweighted.stepScore}
+        >
+          {assessments.peerUnweighted.assessment?.map((peer, index) => (
+            <Fragment key={index}>
+              <p className='mb-0'>
+                {stepName} {index}:
+              </p>
+              <AssessmentCriterion {...peer} stepName={stepName} />
+              <hr className='my-4' />
+            </Fragment>
+          ))}
+        </CollapsibleFeedback>
       </div>
     );
   }
   if (assessments.self) {
     finalStepScore = finalStepScore || assessments.self.stepScore;
+    const stepName = formatMessage(messages.selfStep);
     result.push(
       <CollapsibleFeedback
-        {...assessments.self}
-        stepName={formatMessage(messages.selfStep)}
-      />
+        stepName={stepName}
+        stepScore={assessments.self.stepScore}
+      >
+        <AssessmentCriterion {...assessments.self} stepName={stepName} />
+      </CollapsibleFeedback>
     );
   }