From bbe0fadbee7aa0306bcd39a104c0a64d29a0050a Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzesk@gmail.com>
Date: Mon, 6 Nov 2023 16:32:48 +0000
Subject: [PATCH] feat: step progress

---
 .../EditableAssessment/AssessmentActions.jsx  |  3 +-
 src/components/StepProgressIndicator.jsx      | 27 -------------
 .../StepProgressIndicator/index.jsx           | 39 +++++++++++++++++++
 .../StepProgressIndicator/messages.js         | 11 ++++++
 src/data/services/lms/fakeData/oraConfig.js   | 32 ++-------------
 .../lms/fakeData/pageData/progress.js         |  6 +--
 .../BaseAssessmentView/AssessmentContent.jsx  |  1 -
 7 files changed, 58 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/StepProgressIndicator.jsx
 create mode 100644 src/components/StepProgressIndicator/index.jsx
 create mode 100644 src/components/StepProgressIndicator/messages.js

diff --git a/src/components/Assessment/EditableAssessment/AssessmentActions.jsx b/src/components/Assessment/EditableAssessment/AssessmentActions.jsx
index 112b3cd9..6f52b460 100644
--- a/src/components/Assessment/EditableAssessment/AssessmentActions.jsx
+++ b/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),
diff --git a/src/components/StepProgressIndicator.jsx b/src/components/StepProgressIndicator.jsx
deleted file mode 100644
index eaf2cefe..00000000
--- a/src/components/StepProgressIndicator.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { stepNames } from 'data/services/lms/constants';
-import { useAssessmentStepConfig, useStepInfo } from 'data/services/lms/hooks/selectors';
-
-const StepProgressIndicator = ({ step }) => {
-  const configInfo = useAssessmentStepConfig();
-  const stepInfo = useStepInfo()[step];
-  console.log({ configInfo, stepInfo });
-  if (step === stepNames.peer) {
-    return (
-      <div className="step-progress-indicator">
-        Some peer info
-      </div>
-    );
-  }
-  if (step === stepNames.studentTraining) {
-    return (
-      <div className="step-progress-indicator">
-        some training info
-      </div>
-    );
-  }
-  return null;
-};
-
-export default StepProgressIndicator;
diff --git a/src/components/StepProgressIndicator/index.jsx b/src/components/StepProgressIndicator/index.jsx
new file mode 100644
index 00000000..ee03f0c0
--- /dev/null
+++ b/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;
diff --git a/src/components/StepProgressIndicator/messages.js b/src/components/StepProgressIndicator/messages.js
new file mode 100644
index 00000000..89265b94
--- /dev/null
+++ b/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;
diff --git a/src/data/services/lms/fakeData/oraConfig.js b/src/data/services/lms/fakeData/oraConfig.js
index 25c41bdb..7d504086 100644
--- a/src/data/services/lms/fakeData/oraConfig.js
+++ b/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,
     },
   },
 };
diff --git a/src/data/services/lms/fakeData/pageData/progress.js b/src/data/services/lms/fakeData/pageData/progress.js
index 6318ca24..ff94dcbc 100644
--- a/src/data/services/lms/fakeData/pageData/progress.js
+++ b/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,
   }),
 };
 
diff --git a/src/views/AssessmentView/BaseAssessmentView/AssessmentContent.jsx b/src/views/AssessmentView/BaseAssessmentView/AssessmentContent.jsx
index bac93538..1fb0a84b 100644
--- a/src/views/AssessmentView/BaseAssessmentView/AssessmentContent.jsx
+++ b/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">