feat: step progress

feat: step progress

src/components/Assessment/EditableAssessment/AssessmentActions.jsx

@@ -27,8 +27,7 @@ const AssessmentActions = ({
         className="w-100"
         onClick={onSubmit}
         state={submitStatus}
-        _disabledStates={[MutationStatus.loading, MutationStatus.success]}
-        disabledStates={[MutationStatus.loading]}
+        disabledStates={[MutationStatus.loading, MutationStatus.success]}
         labels={{
           [MutationStatus.idle]: formatMessage(messages.submitGrade),
           [MutationStatus.loading]: formatMessage(messages.submittingGrade),

src/components/StepProgressIndicator/index.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { stepNames } from 'data/services/lms/constants';
+import { useAssessmentStepConfig, useStepInfo } from 'data/services/lms/hooks/selectors';
+import messages from './messages';
+
+const StepProgressIndicator = ({ step }) => {
+  const { formatMessage } = useIntl();
+  const configInfo = useAssessmentStepConfig().settings[step];
+  const stepInfo = useStepInfo()[step];
+  if (step === stepNames.peer) {
+    const needed = configInfo.minNumberToGrade;
+    const done = stepInfo.numberOfAssessmentsCompleted;
+    return (
+      <div className="step-progress-indicator">
+        {formatMessage(messages.progress, { needed, done })}
+      </div>
+    );
+  }
+  if (step === stepNames.studentTraining) {
+    const needed = configInfo.numberOfExamples;
+    const done = stepInfo.numberOfAssessmentsCompleted;
+    return (
+      <div className="step-progress-indicator">
+        {formatMessage(messages.progress, { needed, done })}
+      </div>
+    );
+  }
+  return null;
+};
+
+StepProgressIndicator.propTypes = {
+  step: PropTypes.string.isRequired,
+};
+
+export default StepProgressIndicator;

src/components/StepProgressIndicator/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  progress: {
+    defaultMessage: '{done} of {needed} completed',
+    description: 'Progress indicator for assessments steps with multiple assessments',
+    id: 'frontend-app-ora.StepProgressIndicator.progress',
+  },
+});
+
+export default messages;

src/data/services/lms/fakeData/oraConfig.js

@@ -80,12 +80,9 @@ export const assessmentSteps = {
       start_datetime: '2023-04-14T20:00:00Z',
       end_datetime: '2023-04-14T20:00:00Z',
       required: true,
-      // Additional fields per step
-      data: {
-        min_number_to_grade: 2,
-        min_number_to_be_graded_by: 3,
-        enable_flexible_grading: true,
-      },
+      min_number_to_grade: 2,
+      min_number_to_be_graded_by: 3,
+      enable_flexible_grading: true,
     },
     staff: {
       required: true,
@@ -97,28 +94,7 @@ export const assessmentSteps = {
     },
     student_training: {
       required: true,
-      data: {
-        examples: [
-          {
-            response: 'response 1',
-            criteria: [
-              {
-                name: 'criterion name',
-                feedback: 'feedback',
-              },
-            ],
-          },
-          {
-            response: 'response 2',
-            criteria: [
-              {
-                name: 'criterion name',
-                feedback: 'feedback',
-              },
-            ],
-          },
-        ],
-      },
+      number_of_examples: 2,
     },
   },
 };

src/data/services/lms/fakeData/pageData/progress.js

@@ -82,9 +82,9 @@ const peerStatuses = {
   partial: createPeerStepInfo({ number_of_assessments_completed: 1 }),
   finished: createPeerStepInfo({
     closedState: closedStates.open,
-    numCompleted: assessmentSteps.settings.peer.data.min_number_to_grade,
+    numCompleted: assessmentSteps.settings.peer.min_number_to_grade,
     isWaiting: false,
-    numReceived: assessmentSteps.settings.peer.data.min_number_to_be_graded_by,
+    numReceived: assessmentSteps.settings.peer.min_number_to_be_graded_by,
   }),
 };
 
@@ -109,7 +109,7 @@ const trainingStatuses = {
   partial: createTrainingStepInfo({ numCompleted: 1 }),
   finished: createTrainingStepInfo({
     closedState: closedStates.open,
-    numCompleted: assessmentSteps.settings.student_training.data.examples.length,
+    numCompleted: assessmentSteps.settings.student_training.numberOfExamples,
   }),
 };
 

src/views/AssessmentView/BaseAssessmentView/AssessmentContent.jsx

@@ -20,7 +20,6 @@ const AssessmentContent = ({
   const showTrainingError = useShowTrainingError();
   const { formatMessage } = useIntl();
   const step = useViewStep();
-  const heading = formatMessage(messages[step]);
   return (
     <div className="assessment-content-layout mr-auto ml-auto">
       <div className="content-wrapper">