From ae73f138127b3b1147cdbc129fe7432a294b0d3e Mon Sep 17 00:00:00 2001
From: Akshay Joshi <akshay.joshi@enterprisedb.com>
Date: Wed, 22 Dec 2021 14:25:08 +0530
Subject: [PATCH] Added beforeNext and beforeBack method in Wizard.

---
 .../static/js/helpers/wizard/Wizard.jsx       | 24 +++++++++++++---
 .../static/js/helpers/wizard/WizardStep.jsx   | 28 ++-----------------
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index 774c42304..dce2f71cf 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -107,7 +107,9 @@ const useStyles = makeStyles((theme) =>
     },
     stepDefaultStyle: {
       width: '100%',
-      height: '100%'
+      height: '100%',
+      paddingRight: '1em',
+      paddingBottom: '1em',
     }
 
   }),
@@ -121,11 +123,25 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
 
   const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    // beforeNext should always return a promise
+    if(props.beforeNext) {
+      props.beforeNext(activeStep).then(()=>{
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      }).catch(()=>{});
+    } else {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
   };
 
   const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
+    // beforeBack should always return a promise
+    if(props.beforeBack) {
+      props.beforeBack(activeStep).then(()=>{
+        setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
+      }).catch(()=>{});
+    } else {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
+    }
   };
 
   React.useEffect(() => {
@@ -158,7 +174,7 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
           {
             React.Children.map(props.children, (child) => {
               return (
-                <div hidden={child.props.stepId !== activeStep} className={clsx(child.props.className, classes.stepDefaultStyle)}>
+                <div hidden={child.props.stepId !== activeStep} className={clsx(classes.stepDefaultStyle, child.props.className)}>
                   {child}
                 </div>
               );
diff --git a/web/pgadmin/static/js/helpers/wizard/WizardStep.jsx b/web/pgadmin/static/js/helpers/wizard/WizardStep.jsx
index d98f2b247..bebd3715d 100644
--- a/web/pgadmin/static/js/helpers/wizard/WizardStep.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/WizardStep.jsx
@@ -8,29 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Box } from '@material-ui/core';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
-const useStyles = makeStyles(() =>
-  ({
-    stepPanel: {
-      height: '100%',
-      width: '100%',
-      minHeight: '100px',
-      paddingBottom: '1em',
-      paddingRight: '1em',
-      overflow: 'auto',
-    }
-  }));
-
-export default function WizardStep({stepId, className, ...props }) {
-  const classes = useStyles();
-
+export default function WizardStep({ ...props }) {
   return (
-
-    <Box id={stepId} className={clsx(classes.stepPanel, className)} style={props?.height ? {height: props.height} : null}>
-      {
+      <> {
         React.Children.map(props.children, (child) => {
           return (
             <>
@@ -39,13 +20,10 @@ export default function WizardStep({stepId, className, ...props }) {
           );
         })
       }
-    </Box>
+    </>
   );
 }
 
 WizardStep.propTypes = {
-  stepId: PropTypes.number,
-  height: PropTypes.number,
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 };