Merge pull request #91 from zowe/feature/substepperPRFix

Add SubStepper and Ability For Stages to Have SubStages
zowe · Dec 26, 2023 · 545d64e · 545d64e
2 parents c386f79 + 869034b
commit 545d64e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 16 deletions.
diff --git a/src/renderer/components/common/Stepper.tsx b/src/renderer/components/common/Stepper.tsx
@@ -28,21 +28,26 @@ export default function HorizontalLinearStepper(props: any) {
 
   const {stages} = props;
   const [activeStep, setActiveStep] = useState(0);
+  const [activeSubStep, setActiveSubStep] = useState(0);
   const [skipped, setSkipped] = useState(new Set());
 
   const handleNext = () => {
     alertEmitter.emit('hideAlert');
-    if(activeStep + 1 === stages.length) {
-      console.log('Start Zowe');
-      // window.electron.ipcRenderer.startZowe();
-      return;
+    if(stages[activeStep].subStages && activeSubStep + 1 < stages[activeStep].subStages.length){
+      setActiveSubStep((prevActiveSubStep) => prevActiveSubStep + 1)
+    } else {
+      if(activeStep + 1 === stages.length) {
+        console.log('Start Zowe');
+        // window.electron.ipcRenderer.startZowe();
+        return;
+      }
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
     }
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
   };
 
   const handleBack = () => {
     alertEmitter.emit('hideAlert');
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    stages[activeStep].subStages && activeSubStep > 0 ? setActiveSubStep((prevActiveSubStep) => prevActiveSubStep - 1) : setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 
   const handleReset = () => {
@@ -58,13 +63,28 @@ export default function HorizontalLinearStepper(props: any) {
           const labelProps = {};
           return (
             <Step key={stage.id} {...stepProps}>
+              <div style={activeStep === index && stages[activeStep].subStages ? {backgroundColor: '#E0E0E0', padding: '5px 5px 20px 5px', marginBottom: '-18px', borderTopRightRadius: '3px', borderTopLeftRadius: '3px'} : {}}>
                 <StepLabel {...labelProps}>
                     {stage.label}
                 </StepLabel>
+              </div>
             </Step>
           );
         })}
       </Stepper>
+      {stages[activeStep].subStages &&  <Stepper className="substepper" activeStep={activeSubStep}>
+        {stages[activeStep].subStages.map((stage: any, index: number) => {
+          const stepProps = {};
+          const labelProps = {};
+          return (
+            <Step key={stage.id} {...stepProps}>
+                <StepLabel {...labelProps}>
+                    {stage.label}
+                </StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>}
       {activeStep === stages.length ? (
         <React.Fragment>
           <Typography sx={{ mt: 2, mb: 1, color: 'black' }}>
@@ -77,8 +97,8 @@ export default function HorizontalLinearStepper(props: any) {
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <div style={{flexGrow: 1, display: 'flex', overflow: 'auto', height: 'calc(100vh - 200px)'}}>
-            {stages[activeStep].component}
+          <div style={{flexGrow: 1, display: 'flex', overflow: 'auto', height: stages[activeStep].subStages ? 'calc(100vh - 250px)' : 'calc(100vh - 200px)'}}>
+            {stages[activeStep].subStages ? stages[activeStep].subStages[activeSubStep].component : stages[activeStep].component}
           </div>
           <Box sx={{ display: 'flex', flexDirection: 'row', p: 2, borderTop: 'solid 1px lightgray' }}>
             <Button
@@ -109,7 +129,7 @@ export default function HorizontalLinearStepper(props: any) {
               variant="contained" 
               onClick={() => handleNext()}
             >
-              {stages[activeStep].nextButton}
+              {stages[activeStep].subStages ? stages[activeStep].subStages[activeSubStep].nextButton : stages[activeStep].nextButton}
             </Button>
           </Box>
         </React.Fragment>

diff --git a/src/renderer/components/configuration-wizard/Wizard.tsx b/src/renderer/components/configuration-wizard/Wizard.tsx
@@ -24,10 +24,14 @@ const stages = [
   {id: 0, label: 'Connection', component: <Connection/>, nextButton: 'Continue'},
   {id: 1, label: 'Planning', component: <Planning/>, nextButton: 'Continue to installation options'},
   {id: 2, label: 'Installation Type', component: <InstallationType/>, nextButton: 'Continue to components installation'},
-  {id: 3, label: 'Installation', component: <Installation/>, nextButton: 'Continue to zowe Security'},
-  {id: 4, label: 'Security', component: <Security/>, nextButton: 'Continue to certificates setup'},
-  {id: 5, label: 'Certificates', component: <Certificates/>, nextButton: 'Continue to instance setup'},
-  {id: 6, label: 'Initialization', component: <Initialization/>, nextButton: <div style={{display: 'flex', alignItems: 'center'}}><img style={{width: '18px', height: '18px', paddingRight: '12px'}} src={spock}/>Live long and prosper</div>},
+  // {id: 3, label: 'Installation', component: <Installation/>, nextButton: 'Continue to zowe Security'},
+  // {id: 4, label: 'Security', component: <Security/>, nextButton: 'Continue to certificates setup'},
+  // {id: 5, label: 'Certificates', component: <Certificates/>, nextButton: 'Continue to instance setup'},
+  {id: 6, label: 'Initialization', component: <Initialization/>, subStages: [
+    {id: 0, label: 'Installation', component: <Installation/>, nextButton: 'Continue to security setup'},
+    {id: 1, label: 'Security', component: <Security/>, nextButton: 'Continue to certificates setup'},
+    {id: 2, label: 'Certificates', component: <Certificates/>, nextButton: 'Continue to instance setup'},
+  ], nextButton: <div style={{display: 'flex', alignItems: 'center'}}><img style={{width: '18px', height: '18px', paddingRight: '12px'}} src={spock}/>Live long and prosper</div>},
 ]
 
 const Wizard = () => {

diff --git a/src/renderer/components/stages/Certificates.tsx b/src/renderer/components/stages/Certificates.tsx
@@ -106,7 +106,7 @@ const Certificates = () => {
 
   return (
     <div>
-      <div style={{ position: 'fixed', top: '140px', right: '30px'}}>
+      <div style={{ position: 'fixed', top: '190px', right: '30px'}}>
         <Button style={{ color: 'white', backgroundColor: '#1976d2', fontSize: 'x-small'}} onClick={toggleEditorVisibility}>Open Editor</Button>
       </div>
       <ContainerCard title="Certificates" description="Configure Zowe Certificates"> 

diff --git a/src/renderer/components/stages/Security.tsx b/src/renderer/components/stages/Security.tsx
@@ -130,7 +130,7 @@ const Security = () => {
 
   return (
     <div>
-      <div style={{ position: 'fixed', top: '140px', right: '30px'}}>
+      <div style={{ position: 'fixed', top: '190px', right: '30px'}}>
         {/* <Button style={{ color: 'white', backgroundColor: '#1976d2', fontSize: 'x-small'}} onClick={toggleEditorVisibility}>Open Editor</Button> */}
         <Button style={{ color: 'white', backgroundColor: '#1976d2', fontSize: 'x-small', marginRight: '3px'}} onClick={() => toggleEditorVisibility(TYPE_YAML)}>Open Editor</Button>
         <Button style={{ color: 'white', backgroundColor: '#1976d2', fontSize: 'x-small', marginRight: '3px'}} onClick={() => toggleEditorVisibility(TYPE_JCL)}>Open JCL</Button>

diff --git a/src/renderer/components/stages/installation/Installation.tsx b/src/renderer/components/stages/installation/Installation.tsx
@@ -160,7 +160,7 @@ const Installation = () => {
 
   return (
     <div>
-      <div style={{ position: 'fixed', top: '140px', right: '30px'}}>
+      <div style={{ position: 'fixed', top: '190px', right: '30px'}}>
         <Button style={{ color: 'white', backgroundColor: '#1976d2', fontSize: 'x-small'}} onClick={toggleEditorVisibility}>Open Editor</Button>
       </div>
       <ContainerCard title="Installation" description="Provide installation details"> 

diff --git a/src/renderer/global.css b/src/renderer/global.css
@@ -119,6 +119,12 @@ a:hover {
   border-bottom: 1px solid #E0E0E0;
 }
 
+.substepper {
+  padding: 6px 100px 18px;
+  /* border-bottom: 1px solid #E0E0E0; */
+  background-color: #E0E0E0;
+}
+
 .action-card {
   display: flex; 
   flex-direction: row;