chore: add optional to peer (#139)

* chore: add optional to peer

* chore: fix progress bar styling issue

* chore: fix test

Author: leangseu-edx

src/components/ModalActions/messages.js

@@ -59,7 +59,7 @@ const messages = defineMessages({
   },
   peerResponse: {
     id: 'ora-mfe.ModalActions.peerResponse',
-    defaultMessage: 'peer response',
+    defaultMessage: 'peer',
     description: 'Peer type of response for "Load(ing/ed) next <type>" action',
   },
   practiceResponse: {

src/components/ProgressBar/index.scss

@@ -54,14 +54,14 @@
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-down(md) {
   .navbar-expand-lg .ora-progress-nav-group {
-    @extend navbar-collapse-definition !optional;
+    @include navbar-collapse-definition;
   }
 }
 
 @include media-breakpoint-down(sm) {
   .navbar-expand-md .ora-progress-nav-group {
-    @extend navbar-collapse-definition !optional;
+    @include navbar-collapse-definition;
   }
 }

src/components/StepProgressIndicator/index.jsx

@@ -55,6 +55,9 @@ const StepProgressIndicator = ({ step }) => {
     && !(step === stepNames.peer && stepInfo[step].isWaitingForSubmissions)
     && !(step === stepNames.studentTraining && needed === done);
 
+  if (stepNames.peer === step && done >= needed) {
+    loadNextAction.action.labels.default = formatMessage(messages.gradeNextPeerOptional);
+  }
   return (
     <div className={className}>
       {formatMessage(messages.progress, { needed, done })}

src/components/StepProgressIndicator/messages.js

@@ -6,15 +6,10 @@ const messages = defineMessages({
     description: 'Progress indicator for assessments steps with multiple assessments',
     id: 'frontend-app-ora.StepProgressIndicator.progress',
   },
-  gradeNextPeer: {
-    defaultMessage: 'Grade next peer',
-    description: 'Progress indicator action button text to load next peer assessment',
-    id: 'frontend-app-ora.StepProgressIndicator.gradeNextPeer',
-  },
-  loadNextPractice: {
-    defaultMessage: 'Load next practice response',
-    description: 'Progress indicator action button text to load next practice assessment',
-    id: 'frontend-app-ora.StepProgressIndicator.loadNextPractice',
+  gradeNextPeerOptional: {
+    defaultMessage: 'Grade next peer(optional)',
+    description: 'When peer response is optional',
+    id: 'frontend-app-ora.StepProgressIndicator.optional',
   },
 });
 

src/hooks/actions/messages.js

@@ -74,7 +74,7 @@ const messages = defineMessages({
   },
   peerResponse: {
     id: 'frontend-app-ora.Actions.peerResponse',
-    defaultMessage: 'peer response',
+    defaultMessage: 'peer',
     description: 'Peer type of response for "Load(ing/ed) next <type>" action',
   },
   practiceResponse: {

src/test/smoke.test.jsx

@@ -42,6 +42,7 @@ jest.mock('axios', () => ({
   ...jest.requireActual('axios'),
   get: jest.fn().mockResolvedValue({ data: 'fake file data' }),
 }));
+jest.mock('components/HotjarSurvey', () => 'HotjarSurvey');
 
 jest.unmock('react');
 jest.unmock('@edx/paragon');

src/views/XBlockView/Actions/index.jsx

@@ -7,6 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useLoadNextAction } from 'hooks/actions';
 import { stepNames, stepStates } from 'constants/index';
 import {
+  useAssessmentStepConfig,
   useGlobalState,
   useStepInfo,
 } from 'hooks/app';
@@ -27,6 +28,8 @@ const SubmissionActions = () => {
   const { formatMessage } = useIntl();
   const stepInfo = useStepInfo()[activeStepName];
   const loadNextAction = useLoadNextAction();
+  const stepConfigInfo = useAssessmentStepConfig().settings[activeStepName];
+
   const action = (() => {
     if (
       [stepNames.studentTraining, stepNames.peer].includes(activeStepName)
@@ -35,9 +38,11 @@ const SubmissionActions = () => {
       && !stepInfo.isWaitingForSubmissions
     ) {
       const onClick = () => openModal({ view: activeStepName, title: activeStepName });
+      const isOptional = activeStepName === stepNames.peer
+                        && stepInfo.numberOfAssessmentsCompleted >= stepConfigInfo.minNumberToGrade;
       return (
         <Button className="mb-3" onClick={onClick} iconBefore={stepIcons[activeStepName]}>
-          {loadNextAction.action.labels.default}
+          {loadNextAction.action.labels.default}{isOptional && formatMessage(messages.optional)}
         </Button>
       );
     }

src/views/XBlockView/Actions/messages.js

@@ -28,6 +28,11 @@ const messages = defineMessages({
     description: 'Xblock view action button for done step to view grades',
     id: 'frontend-app-ora.XBlockView.Actions.done',
   },
+  optional: {
+    id: 'ora-mfe.ModalActions.optionalPeerResponse',
+    defaultMessage: '(optional)',
+    description: 'When peer response is optional',
+  },
 });
 
 export default messages;