fix(TabbedViewQuestions): fix stepper spacing for student view with non-skippable questions

Author: ncduy0303

client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/components/TabbedViewQuestions.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, FC, SetStateAction } from 'react';
-import { Paper, Step, StepButton, StepLabel, Stepper } from '@mui/material';
+import { Paper, Step, StepButton, Stepper } from '@mui/material';
 
 import { workflowStates } from 'course/assessment/submission/constants';
 import { getAssessment } from 'course/assessment/submission/selectors/assessments';
@@ -30,8 +30,6 @@ const TabbedViewQuestions: FC<Props> = (props) => {
 
   const published = workflowState === workflowStates.Published;
 
-  const currentQuestionId = questionIds[stepIndex];
-
   const shouldRenderActiveStepper = (index: number): boolean => {
     return (
       !autograded || published || skippable || graderView || index <= maxStep
@@ -49,29 +47,22 @@ const TabbedViewQuestions: FC<Props> = (props) => {
           nonLinear
         >
           {questionIds.map((id, index) => {
-            if (shouldRenderActiveStepper(index)) {
-              return (
-                <Step
-                  key={currentQuestionId}
-                  active={!autograded || index <= maxStep}
-                >
-                  <StepButton
-                    className="p-4"
-                    icon={
-                      <StepperButton
-                        questionId={id}
-                        questionIndex={index}
-                        stepIndex={stepIndex}
-                      />
-                    }
-                    onClick={() => setStepIndex(index)}
-                  />
-                </Step>
-              );
-            }
+            const isDisabled = !shouldRenderActiveStepper(index);
             return (
-              <Step key={id}>
-                <StepLabel />
+              <Step key={id} active={!autograded || index <= maxStep}>
+                <StepButton
+                  className="p-4"
+                  disabled={isDisabled}
+                  icon={
+                    <StepperButton
+                      disabled={isDisabled}
+                      questionId={id}
+                      questionIndex={index}
+                      stepIndex={stepIndex}
+                    />
+                  }
+                  onClick={() => setStepIndex(index)}
+                />
               </Step>
             );
           })}

client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/components/button/StepperButton.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { SvgIcon } from '@mui/material';
 import { blue, green, lightBlue, red } from '@mui/material/colors';
+import { grey } from 'theme/colors';
 
 import { getExplanations } from 'course/assessment/submission/selectors/explanations';
 import { useAppSelector } from 'lib/hooks/store';
@@ -9,16 +10,19 @@ interface Props {
   questionId: number;
   questionIndex: number;
   stepIndex: number;
+  disabled?: boolean;
 }
 
 const StepperButton: FC<Props> = (props) => {
-  const { questionId, questionIndex, stepIndex } = props;
+  const { questionId, questionIndex, stepIndex, disabled = false } = props;
 
   const explanations = useAppSelector(getExplanations);
 
   let stepButtonColor = '';
   const isCurrentQuestion = questionIndex === stepIndex;
-  if (explanations[questionId]?.correct) {
+  if (disabled) {
+    stepButtonColor = grey[400];
+  } else if (explanations[questionId]?.correct) {
     stepButtonColor = isCurrentQuestion ? green[700] : green[300];
   } else if (explanations[questionId]?.correct === false) {
     stepButtonColor = isCurrentQuestion ? red[700] : red[300];