From e18ce2c9e39ceabdf91f4c916a2a890985367aa0 Mon Sep 17 00:00:00 2001
From: Nikhil Mohite <nikhil.mohite@enterprisedb.com>
Date: Fri, 31 Dec 2021 14:16:50 +0530
Subject: [PATCH] Updates CSS and structure in Wizard, also fixed css issues in
 GrantWizard.

---
 web/pgadmin/static/js/components/PgTable.jsx  |   2 +-
 .../static/js/helpers/wizard/Wizard.jsx       | 106 +++++++--------
 .../grant_wizard/static/js/GrantWizard.jsx    | 128 +++++++++---------
 3 files changed, 113 insertions(+), 123 deletions(-)

diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 43fc44ce6..b0a064b16 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     borderSpacing: 0,
     width: '100%',
     overflow: 'hidden',
-    height: '99.7%',
+    height: '100%',
     backgroundColor: theme.otherVars.tableBg,
     ...theme.mixins.panelBorder,
     //backgroundColor: theme.palette.background.default,
diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index fbb4b6ac8..91b75fbcd 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -12,64 +12,66 @@ import clsx from 'clsx';
 import FastForwardIcon from '@material-ui/icons/FastForward';
 import FastRewindIcon from '@material-ui/icons/FastRewind';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import DoneIcon from '@material-ui/icons/Done';
 import HelpIcon from '@material-ui/icons/HelpRounded';
 import CheckIcon from '@material-ui/icons/Check';
 import { DefaultButton, PrimaryButton, PgIconButton } from '../../../../static/js/components/Buttons';
 import PropTypes from 'prop-types';
 import { Box } from '@material-ui/core';
 import gettext from 'sources/gettext';
+import Loader from 'sources/components/Loader';
 
 
 const useStyles = makeStyles((theme) =>
   ({
     wizardBase: {
-      height: '100%'
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
     },
     root: {
       display: 'flex',
       flexDirection: 'column',
-      height: '100%',
-    },
-    wizardTitle: {
-      top: '0 !important',
-      opacity: '1 !important',
-      borderRadius: '6px 6px 0px 0px !important',
-      margin: '0 !important',
-      width: '100%',
-      height: '6%'
+      flexGrow: 1,
+      minHeight: 0
     },
     rightPanel: {
       position: 'relative',
-      minHeight: 100,
       display: 'flex',
-      paddingLeft: '1.5em',
-      paddingTop: '0em',
-      flex: 5,
+      flexBasis: '75%',
       overflow: 'auto',
       height: '100%',
+      minHeight: '100px'
     },
     leftPanel: {
       display: 'flex',
-      // padding: '2em',
+      flexBasis: '25%',
       flexDirection: 'column',
       alignItems: 'flex-start',
       borderRight: '1px solid',
       ...theme.mixins.panelBorder.right,
-      flex: 1.6
     },
     label: {
       display: 'inline-block',
       position: 'relative',
-      paddingLeft: '0.5em',
-      flex: 6
+      paddingLeft: '0.5rem',
+      flexBasis: '70%'
     },
     labelArrow: {
       display: 'inline-block',
       position: 'relative',
-      flex: 1
+      flexBasis: '30%'
+    },
+    labelDone: {
+      display: 'inline-block',
+      position: 'relative',
+      flexBasis: '30%',
+      color: theme.otherVars.activeStepBg + ' !important',
+      padding: '4px'
     },
     stepLabel: {
       padding: '1em',
+      paddingRight: 0
     },
     active: {
       fontWeight: 600
@@ -99,19 +101,9 @@ const useStyles = makeStyles((theme) =>
       borderTop: '1px solid #dde0e6 !important',
       padding: '0.5rem',
       display: 'flex',
-      flexDirection: 'row',
-      flex: 1,
-      position: 'absolute',
-      verticalAlign: 'bottom',
-      bottom: 0,
-      zIndex: 999,
       width: '100%',
-      background: theme.otherVars.headerBg
-    },
-    wizardPanelContent: {
-      paddingTop: '0.9em !important',
-      overflow: 'hidden',
-      paddingBottom: '6.3em'
+      background: theme.otherVars.headerBg,
+      zIndex: 999,
     },
     backButton: {
       marginRight: theme.spacing(1),
@@ -129,13 +121,10 @@ const useStyles = makeStyles((theme) =>
     stepDefaultStyle: {
       width: '100%',
       height: '100%',
-      paddingBottom: '1em',
-      paddingRight: '1em',
-      overflow: 'hidden',
-      minHeight: 0,
-      position: 'relative'
+      padding: '8px',
+      display: 'flex',
+      flexDirection: 'column',
     }
-
   }),
 );
 
@@ -183,7 +172,7 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
   return (
     <Box className={classes.wizardBase}>
-      <Box className={clsx('wizard-header', classes.wizardTitle)}>{props.title}</Box>
+      <Box className={clsx('wizard-header')}>{props.title}</Box>
       <div className={clsx(classes.root, props?.rootClass)}>
         <div className={clsx(classes.wizard, className)}>
           <Box className={classes.leftPanel}>
@@ -192,14 +181,16 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
                 <Box className={clsx(classes.stepIndex, index === activeStep ? classes.activeIndex : '')}>{index + 1}</Box>
                 <Box className={classes.label}>{label} </Box>
                 <Box className={classes.labelArrow}>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
+                <Box className={classes.labelDone}>{index < activeStep ? <DoneIcon />: null}</Box>
               </Box>
             ))}
           </Box>
-          <div className={clsx(classes.rightPanel, classes.wizardPanelContent, props.stepPanelCss)}>
+          <div className={clsx(classes.rightPanel, props.stepPanelCss)}>
+            <Loader message={props?.loaderText} />
             {
               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>
                 );
@@ -207,23 +198,23 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
             }
           </div>
         </div>
-        <div className={classes.wizardFooter}>
-          <Box >
-            <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
-              disabled={props.disableDialogHelp} />
-          </Box>
-          <Box className={classes.actionBtn} marginLeft="auto">
-            <DefaultButton onClick={handleBack} disabled={activeStep === 0} className={classes.buttonMargin} startIcon={<FastRewindIcon />}>
-              {gettext('Back')}
-            </DefaultButton>
-            <DefaultButton onClick={() => handleNext()} className={classes.buttonMargin} startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
-              {gettext('Next')}
-            </DefaultButton>
-            <PrimaryButton className={classes.buttonMargin} startIcon={<CheckIcon />} disabled={activeStep == steps.length - 1 ? false : true} onClick={onSave}>
-              {gettext('Finish')}
-            </PrimaryButton>
-          </Box>
-        </div>
+      </div>
+      <div className={classes.wizardFooter}>
+        <Box>
+          <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
+            disabled={props.disableDialogHelp} />
+        </Box>
+        <Box className={classes.actionBtn} marginLeft="auto">
+          <DefaultButton onClick={handleBack} disabled={activeStep === 0} className={classes.buttonMargin} startIcon={<FastRewindIcon />}>
+            {gettext('Back')}
+          </DefaultButton>
+          <DefaultButton onClick={() => handleNext()} className={classes.buttonMargin} startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
+            {gettext('Next')}
+          </DefaultButton>
+          <PrimaryButton className={classes.buttonMargin} startIcon={<CheckIcon />} disabled={activeStep == steps.length - 1 ? false : true} onClick={onSave}>
+            {gettext('Finish')}
+          </PrimaryButton>
+        </Box>
       </div>
     </Box>
   );
@@ -246,4 +237,5 @@ Wizard.propTypes = {
   disableDialogHelp: PropTypes.bool,
   beforeNext: PropTypes.func,
   beforeBack: PropTypes.func,
+  loaderText: PropTypes.string
 };
diff --git a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
index e961b8ac0..34879f5c3 100644
--- a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
+++ b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
@@ -21,7 +21,6 @@ import { InputSQL, InputText, FormFooterMessage, MESSAGE_TYPE } from '../../../.
 import getApiInstance from '../../../../static/js/api_instance';
 import SchemaView from '../../../../static/js/SchemaView';
 import clsx from 'clsx';
-import Loader from 'sources/components/Loader';
 import Alertify from 'pgadmin.alertifyjs';
 import PropTypes from 'prop-types';
 import PrivilegeSchema from './privilege_schema.ui';
@@ -54,7 +53,8 @@ const useStyles = makeStyles(() =>
       overflow: 'auto'
     },
     panelContent: {
-      height: '100%'
+      flexGrow: 1,
+      minHeight: 0
     }
   }),
 );
@@ -305,69 +305,67 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
   });
 
   return (
-    <Box className={classes.root}>
-      <Loader message={loaderText} />
-      <Wizard
-        title={gettext('Grant Wizard')}
-        stepList={steps}
-        disableNextStep={disableNextCheck}
-        onStepChange={wizardStepChange}
-        onSave={onSave}
-        onHelp={onDialogHelp}
-      >
-        <WizardStep stepId={0}>
-          <Box className={classes.searchBox}>
-            <Box className={classes.searchPadding}></Box>
-            <InputText
-              placeholder={'Search'}
-              className={classes.searchInput}
-              value={searchVal}
-              onChange={(val) => {
-                setSearchVal(val);}
-              }>
-            </InputText>
-          </Box>
-          <Box className={classes.panelContent}>
-            <PgTable
-              className={classes.table}
-              height={window.innerHeight - 450}
-              columns={columns}
-              data={tablebData}
-              isSelectRow={true}
-              searchText={searchVal}
-              getSelectedRows={getTableSelectedRows}>
-            </PgTable>
-          </Box>
-          <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errMsg} onClose={onErrClose} />
-        </WizardStep>
-        <WizardStep
-          stepId={1}
-          className={clsx(classes.privilegeStep)}>
-          {privSchemaInstance &&
-                    <SchemaView
-                      formType={'dialog'}
-                      getInitData={() => { }}
-                      viewHelperProps={{ mode: 'create' }}
-                      schema={privSchemaInstance}
-                      showFooter={false}
-                      isTabView={false}
-                      onDataChange={(isChanged, changedData) => {
-                        setSelectedAcl(changedData);
-                      }}
-                    />
-          }
-        </WizardStep>
-        <WizardStep
-          stepId={2}>
-          <Box>{gettext('The SQL below will be executed on the database server to grant the selected privileges. Please click on Finish to complete the process.')}</Box>
-          <InputSQL
-            onLable={true}
-            className={classes.grantWizardSql}
-            readonly={true}
-            value={msqlData.toString()} />
-        </WizardStep>
-      </Wizard>
-    </Box>
+    <Wizard
+      title={gettext('Grant Wizard')}
+      stepList={steps}
+      disableNextStep={disableNextCheck}
+      onStepChange={wizardStepChange}
+      onSave={onSave}
+      onHelp={onDialogHelp}
+      loaderText={loaderText}
+    >
+      <WizardStep stepId={0}>
+        <Box className={classes.searchBox}>
+          <Box className={classes.searchPadding}></Box>
+          <InputText
+            placeholder={'Search'}
+            className={classes.searchInput}
+            value={searchVal}
+            onChange={(val) => {
+              setSearchVal(val);}
+            }>
+          </InputText>
+        </Box>
+        <Box className={classes.panelContent}>
+          <PgTable
+            className={classes.table}
+            height={window.innerHeight - 450}
+            columns={columns}
+            data={tablebData}
+            isSelectRow={true}
+            searchText={searchVal}
+            getSelectedRows={getTableSelectedRows}>
+          </PgTable>
+        </Box>
+        <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errMsg} onClose={onErrClose} />
+      </WizardStep>
+      <WizardStep
+        stepId={1}
+        className={clsx(classes.privilegeStep)}>
+        {privSchemaInstance &&
+                  <SchemaView
+                    formType={'dialog'}
+                    getInitData={() => { }}
+                    viewHelperProps={{ mode: 'create' }}
+                    schema={privSchemaInstance}
+                    showFooter={false}
+                    isTabView={false}
+                    onDataChange={(isChanged, changedData) => {
+                      setSelectedAcl(changedData);
+                    }}
+                  />
+        }
+      </WizardStep>
+      <WizardStep
+        stepId={2}>
+        <Box>{gettext('The SQL below will be executed on the database server to grant the selected privileges. Please click on Finish to complete the process.')}</Box>
+        <InputSQL
+          onLable={true}
+          className={classes.grantWizardSql}
+          readonly={true}
+          value={msqlData.toString()} />
+      </WizardStep>
+    </Wizard>
   );
 }