CARDS-2785: Form pagination should hide non-satisfied conditional sections

modules/data-entry/src/main/frontend/src/questionnaire/FormPagination.jsx

@@ -77,13 +77,25 @@ function FormPagination (props) {
   let [ activePage, setActivePage ] = useState(0);
   let [ direction, setDirection ] = useState(1);
   let [ nextActivePage, setNextActivePage ] = useState();
+  let [ numberOfSteps, setNumberOfSteps ] = useState();
+  let [ activeStep, setActiveStep ] = useState();
+  let [ progress, setProgress ] = useState(0);
   const DIRECTION_NEXT = 1, DIRECTION_PREV = -1;
+  // The amount of the progress bar that should be complete on page 1
+  // Expressed as a multiple of a normal page size.
+  // The remainder (1 - stub size) will be used as a completion buffer on the last page
+  const INITIAL_PROGRESS_STUB = 0.7;
 
   let previousEntryType;
   let questionIndex = 0;
   let pagesResults = {};
   let pagesArray = [];
 
+  useEffect(() => {
+    setNumberOfSteps(pages.filter(page => page.canBeVisible).length);
+    setActiveStep(pages.slice(0, activePage).filter(page => page.canBeVisible).length);
+  }, [activePage, pages])
+
   useEffect(() => {
     setPagesCallback(null);
     Object.entries(questionnaireData)
@@ -207,6 +219,17 @@ function FormPagination (props) {
     }
   }, [saveInProgress, pendingSubmission, disableProgress, nextActivePage, direction, activePage]);
 
+  useEffect(() => {
+    if (activeStep != null && numberOfSteps != null) {
+      // The MaterialUI progress bar expects progress to be out of 100
+      const pageSize = 100 / (numberOfSteps);
+      // Use some of 1 "page" worth of progression for the initial stub on the first page
+      // The rest will be used for the completion buffer on the last page
+      const stubSize = pageSize * INITIAL_PROGRESS_STUB;
+      setProgress(stubSize + (pageSize * activeStep) + (savedLastPage ? pageSize - stubSize : 0))
+    }
+  }, [activeStep, numberOfSteps, savedLastPage])
+
   let saveButton =
     <Button
       startIcon={activePage === lastValidPage() ? doneIcon : undefined}
@@ -246,8 +269,6 @@ function FormPagination (props) {
   }
   stepperClasses = stepperClasses.join(' ');
 
-  let progressAdjustment = (condition) => (condition && variant == "progress" ? 1 : 0);
-
   return (
     enabled
     ?
@@ -265,23 +286,15 @@ function FormPagination (props) {
       ?
         <MobileStepper
           variant={variant}
-          // Offset back bar 1 to create a "current page" region.
-          // If the final page has been saved, progress the front bar to complete
-          activeStep={activePage + progressAdjustment(lastSaveStatus && savedLastPage)}
-          // Change the color of the back bar
+          activeStep={activeStep}
           slotProps={{
             progress: {
-              classes: {
-                bar2Buffer: classes.formStepperBufferBar,
-                dashed: classes.formStepperBackgroundBar,
-              },
-              variant: "buffer",
-              valueBuffer: (activePage + 1) / (lastValidPage() + 1) * 100,
+              // Manually control the progress bar value
+              value: progress
             }
           }}
           className={stepperClasses}
-          // base 0 to base 1, plus 1 for the "current page" region when variant is "progress"
-          steps={lastValidPage() + 1 + progressAdjustment(true)}
+          steps={numberOfSteps}
           nextButton={saveButton}
           backButton={backButton}
         />

modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx

@@ -496,16 +496,6 @@ const questionnaireStyle = theme => ({
         margin: theme.spacing(1),
         minWidth: "fit-content",
     },
-    formStepperBufferBar: {
-        backgroundColor: theme.palette.primary.main,
-        opacity: "0.3",
-    },
-    formStepperBackgroundBar: {
-        backgroundColor: theme.palette.primary.light,
-        opacity: "0.2",
-        animation: "none",
-        backgroundImage: "none",
-    },
     actionsMenu: {
         border: "1px solid " + theme.palette.divider,
         borderRadius: theme.spacing(3),