fix: progress bar behavior

Author: muselesscreator

src/components/ProgressBar/ProgressStep.jsx

@@ -16,7 +16,7 @@ import { stepNames } from 'data/services/lms/constants';
 import { useProgressStepData } from './hooks';
 
 export const stepIcons = StrictDict({
-  [stepNames.submisson]: Edit,
+  [stepNames.submission]: Edit,
   [stepNames.studentTraining]: Highlight,
   [stepNames.self]: Highlight,
   [stepNames.peer]: Highlight,
@@ -45,13 +45,13 @@ const ProgressStep = ({
     subLabel = 'Past due!';
   } else if (isComplete) {
     iconSrc = CheckCircle;
-    if (step === stepNames.myGrades) {
+    if (step === stepNames.myGrades && myGrade) {
       subLabel = `${myGrade.earned} / ${myGrade.possible}`;
     }
   }
   return (
     <Nav.Link
-      href={href}
+      {...(!isActive && { href })}
       disabled={!isEnabled}
       className={classNames(
         'ora-progress-nav',

src/components/ProgressBar/hooks.js

@@ -15,16 +15,18 @@ export const useProgressStepData = ({ step, canRevisit = false }) => {
   const stepState = useStepState({ step });
 
   const href = `/${stepRoutes[step]}${isEmbedded ? '/embedded' : ''}/${xblockId}`;
+  const isActive = viewStep === step;
   const isEnabled = (
-    (stepState === stepStates.inProgress)
+    isActive
+    || (stepState === stepStates.inProgress)
     || (canRevisit && stepState === stepStates.completed)
   );
-  const myGrade = useEffectiveGrade();
+  const myGrade = useEffectiveGrade()?.stepScore;
 
   return {
     href,
     isEnabled,
-    isActive: viewStep === step,
+    isActive,
     isComplete: stepState === stepStates.completed,
     inProgress: stepState === stepStates.inProgress,
     isPastDue: stepState === stepStates.closed,