Regression Fix + Refine Status Updates + Resolve Edge Cases + Code Cleanup

src/renderer/components/common/Stepper.tsx

@@ -28,8 +28,7 @@ import eventDispatcher from '../../../services/eventDispatcher';
 import Warning from '@mui/icons-material/Warning';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import { TYPE_YAML, TYPE_OUTPUT, TYPE_JCL, INIT_STAGE_LABEL, REVIEW_INSTALL_STAGE_LABEL, UNPAX_STAGE_LABEL } from '../common/Utils';
-import { getProgress, getCompleteProgress, mapAndSetSkipStatus, mapAndGetSkipStatus } from '../stages/progress/StageProgressStatus';
-
+import { getProgress, getCompleteProgress, updateSubStepSkipStatus, updateStepSkipStatus } from '../stages/progress/StageProgressStatus';
 import '../../styles/Stepper.css';
 import { StepIcon } from '@mui/material';
 import { getStageDetails } from '../../../services/StageDetails';
@@ -57,7 +56,7 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
     completeProgress.reviewStatus
   ];
 
-  const [subStageProgressStatus, setProgressStatus] = useState([
+  const [subStageProgressStatus, setSubStageProgressStatus] = useState([
     completeProgress.datasetInstallationStatus,
     completeProgress.networkingStatus,
     completeProgress.apfAuthStatus,
@@ -67,8 +66,6 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
     completeProgress.launchConfigStatus
   ])
 
-
-
   const [activeStep, setActiveStep] =  initialization ? useState(0) : useState(useAppSelector(selectActiveStepIndex));
   const [activeSubStep, setActiveSubStep] = initialization ? useState(0) : useState(useAppSelector(selectActiveSubStepIndex));
   const [nextText, setNextText] = useState("Continue");
@@ -80,18 +77,9 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    const mvsCompleteListener = (completed: boolean) => {
-      setProgressStatus([true, completeProgress.networkingStatus,
-        completeProgress.apfAuthStatus,
-        completeProgress.securityStatus,
-        completeProgress.certificateStatus,
-        completeProgress.launchConfigStatus])
-    };
     eventDispatcher.on('updateActiveStep', updateActiveStepListener);
-    eventDispatcher.on('initMvsComplete', mvsCompleteListener);
     return () => {
       eventDispatcher.off('updateActiveStep', updateActiveStepListener);
-      eventDispatcher.off('initMvsComplete', mvsCompleteListener);
     };
   }, []); 
 
@@ -129,9 +117,10 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
 
   const handleSkip = async () => {
     stages[activeStep].isSkipped = true;
+    updateStepSkipStatus(activeStep, true);
     if(stages[activeStep].subStages){
       stages[activeStep].subStages[activeSubStep].isSkipped = true;
-      mapAndSetSkipStatus(activeSubStep, true);
+      updateSubStepSkipStatus(activeSubStep, true);
     }
     if(stages[activeStep].label === UNPAX_STAGE_LABEL && installationArgs.installationType != "smpe"){
       alertEmitter.emit('showAlert', 'Retrieving example-zowe.yaml and latest schemas from Zowe runtime files...', 'info');
@@ -200,13 +189,13 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
     }
   }
 
-  const getStepIcon = (error: any, stageId: number, isSubStep?: boolean, subStepId?: number) => {
+  const getStepIcon = (stageId: number, isSubStep?: boolean, subStepId?: number) => {
 
-    if (!error || (isSubStep && getProgress(stages[stageId].subStages[subStepId].statusKey)) || (!isSubStep && getProgress(stages[stageId].statusKey))) {
+    if ((isSubStep && getProgress(stages[stageId].subStages[subStepId].statusKey)) || (!isSubStep && ((stageId == 0 && connectionStatus) || (getProgress(stages[stageId].statusKey))))) {
       return <StepIcon icon={<CheckCircle sx={{ color: 'green', fontSize: '1.2rem' }} />} />;
     }
 
-    if ((isSubStep && mapAndGetSkipStatus(subStepId)) || (error && activeStep>stageId && !isSubStep) || (error && isSubStep && stages[stageId].subStages[subStepId].isSkipped)) {
+    if ((isSubStep && stages[stageId].subStages[subStepId].isSkipped) || (!isSubStep && stages[stageId].isSkipped)) {
       return <StepIcon icon={<Warning sx={{ color: 'orange', fontSize: '1.2rem' }} />} />;
     }
 
@@ -295,9 +284,7 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
                 borderTopLeftRadius: '7px',
                 boxShadow: 'rgb(0 0 0 / 15%) 0px 6px 4px -1px inset'} : {}}>
                 <StepLabel {...labelProps} 
-                  error={labelProps.error} 
-                  // icon={labelProps.error ? <Warning sx={{ color: 'orange', fontSize: '1.2rem' }} /> : <CheckCircle sx={{ color: 'green', fontSize: '1.2rem' }} />}>
-                  icon={getStepIcon(labelProps.error, stage.id)}>
+                  icon={getStepIcon(stage.id)}>
                   <span className="navigator" onClick={() => handleStepperClick(stage.id, !!stage.subStage)}>{stage.label}</span>
                 </StepLabel>
               </div>
@@ -314,9 +301,7 @@ export default function HorizontalLinearStepper({stages, initialization}:{stages
           return (
             <Step key={stage.id} {...stepProps}>
                 <StepLabel {...labelProps}
-                  error={labelProps.error} 
-                  // icon={labelProps.error ? <Warning sx={{ color: 'orange', fontSize: '1.2rem' }} /> : <CheckCircle sx={{ color: 'green', fontSize: '1.2rem' }} />}>
-                  icon={getStepIcon(labelProps.error, activeStep, true, index)}>
+                  icon={getStepIcon(activeStep, true, index)}>
                 <span className="navigator" onClick={() => handleStepperClick(activeStep, true, stage.id )}>{stage.label}</span>
                 </StepLabel>
             </Step>

src/renderer/components/stages/Certificates.tsx

@@ -8,7 +8,7 @@
  * Copyright Contributors to the Zowe Project.
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Box, Button, FormControl, FormHelperText, MenuItem, Select } from '@mui/material';
 import { useAppSelector, useAppDispatch } from '../../hooks';
 import { setInitializationStatus, setCertificateStatus } from './progress/progressSlice';
@@ -24,7 +24,7 @@ import { createTheme } from '@mui/material/styles';
 import { stages } from "../configuration-wizard/Wizard";
 import { setActiveStep } from "./progress/activeStepSlice";
 import { getStageDetails, getSubStageDetails } from "../../../services/StageDetails";
-import { getProgress, setCertificateInitState, getCertificateInitState, mapAndSetSkipStatus, getInstallationArguments, isInitComplete } from "./progress/StageProgressStatus";
+import { getProgress, setCertificateInitState, getCertificateInitState, updateSubStepSkipStatus, getInstallationArguments, isInitializationStageComplete } from "./progress/StageProgressStatus";
 import { CertInitSubStepsState } from "../../../types/stateInterfaces";
 import { TYPE_YAML, TYPE_OUTPUT, INIT_STAGE_LABEL, CERTIFICATES_STAGE_LABEL, ajv, deepMerge } from "../common/Utils";
 
@@ -54,26 +54,37 @@ const Certificates = () => {
   const [stateUpdated, setStateUpdated] = useState(false);
   const [initClicked, setInitClicked] = useState(false);
   const [reinit, setReinit] = useState(false);
+  const [stageStatus, setStageStatus] = useState(stages[STAGE_ID].subStages[SUB_STAGE_ID].isSkipped);
+  const stageStatusRef = useRef(stageStatus);
 
   let timer: any;
 
   const [validate] = useState(() => ajv.getSchema("https://zowe.org/schemas/v2/server-base") || ajv.compile(setupSchema))
 
   useEffect(() => {
-    dispatch(setInitializationStatus(isInitComplete()));
-    if(getProgress('certificateStatus')) {
+    stageStatusRef.current = stageStatus;
+  }, [stageStatus]);
+
+  useEffect(() => {
+    const stepProgress = getProgress('certificateStatus');
+
+    dispatch(setInitializationStatus(isInitializationStageComplete()));
+    setShowProgress(initClicked || stepProgress);
+
+    if(stepProgress) {
       const nextPosition = document.getElementById('start-certificate-progress');
       nextPosition.scrollIntoView({ behavior: 'smooth', block: 'start' });
     } else {
       const nextPosition = document.getElementById('container-box-id');
       nextPosition.scrollIntoView({behavior: 'smooth'});
     }
 
-    setShowProgress(initClicked || getProgress('certificateStatus'));
-    updateProgress(getProgress('certificateStatus'));
+    dispatch(setNextStepEnabled(stepProgress));
+
     setIsFormInit(true);
 
     return () => {
+      updateSubStepSkipStatus(SUB_STAGE_ID, stageStatusRef.current);
       dispatch(setActiveStep({ activeStepIndex: STAGE_ID, isSubStep: SUB_STAGES, activeSubStepIndex: SUB_STAGE_ID }));
     }
   }, []);
@@ -84,6 +95,8 @@ const Certificates = () => {
     if(initClicked) {
       let nextPosition = document.getElementById('start-certificate-progress');
       nextPosition?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      dispatchActions(false);
+      setStateUpdated(!stateUpdated);
     }
 
   }, [initClicked]);
@@ -92,7 +105,10 @@ const Certificates = () => {
     if(!getProgress('certificateStatus') && initClicked) {
       timer = setInterval(() => {
         window.electron.ipcRenderer.getCertificateProgress().then((res: any) => {
-          setCertificateInitializationProgress(res)
+          setCertificateInitializationProgress(res);
+          if(res.success){
+            clearInterval(timer);
+          }
         })
       }, 3000);
     }
@@ -110,8 +126,7 @@ const Certificates = () => {
   useEffect(() => {
     const allAttributesTrue = Object.values(certificateInitProgress).every(value => value === true);
     if(allAttributesTrue) {
-      dispatch(setNextStepEnabled(true));
-      dispatch(setCertificateStatus(true));
+      dispatchActions(true);
       setShowProgress(initClicked || getProgress('certificateStatus'));
     }
   }, [certificateInitProgress]);
@@ -121,21 +136,18 @@ const Certificates = () => {
     setCertificateInitState(certificateInitState);
     const allAttributesTrue = Object.values(certificateInitState).every(value => value === true);
     if(allAttributesTrue) {
-      dispatch(setNextStepEnabled(true));
-      dispatch(setCertificateStatus(true));
+      dispatchActions(true);
     }
   }
 
   const setStageSkipStatus = (status: boolean) => {
     stages[STAGE_ID].subStages[SUB_STAGE_ID].isSkipped = status;
-    stages[STAGE_ID].isSkipped = status;
-    mapAndSetSkipStatus(SUB_STAGE_ID, status);
+    stages[STAGE_ID].isSkipped = !isInitializationStageComplete();
+    setStageStatus(status);
   }
 
   const updateProgress = (status: boolean) => {
     setStateUpdated(!stateUpdated);
-    setStageSkipStatus(!status);
-
     if(!status) {
       for (let key in certificateInitProgress) {
         certificateInitProgress[key as keyof(CertInitSubStepsState)] = false;
@@ -144,10 +156,15 @@ const Certificates = () => {
     }
     const allAttributesTrue = Object.values(certificateInitProgress).every(value => value === true);
     status = allAttributesTrue ? true : false;
-    dispatch(setNextStepEnabled(status));
-    dispatch(setInitializationStatus(isInitComplete()));
-    dispatch(setCertificateStatus(status));
     setCertificateInitializationProgress(getCertificateInitState());
+    dispatchActions(status);
+  }
+
+  const dispatchActions = (status: boolean) => {
+    dispatch(setCertificateStatus(status));
+    dispatch(setInitializationStatus(isInitializationStageComplete()));
+    dispatch(setNextStepEnabled(status));
+    setStageSkipStatus(!status);
   }
 
   const reinitialize = (event: any) => {
@@ -209,8 +226,6 @@ const Certificates = () => {
     setIsFormInit(false);
 
     if (newData) {
-      dispatch(setCertificateStatus(false));
-
       if(validate) {
         validate(newData);
         if(validate.errors) {
@@ -260,7 +275,7 @@ const Certificates = () => {
               id="demo-simple-select"
               value={verifyCerts}
               onChange={(e) => {
-                dispatch(setCertificateStatus(false));
+                dispatchActions(false);
                 const newConfig = {...yaml, zowe: {...yaml?.zowe, verifyCertificates: e.target.value, setup: {...yaml.zowe.setup}}};
                 window.electron.ipcRenderer.setConfig(newConfig);
                 setLocalYaml(newConfig)