Change logic for grant wizard, wizard component, and updated CSS.

2021-12-22 18:26:21 +05:30 · 2021-12-22 18:26:21 +05:30 · 45179ccb8c
parent ebee7a5b72
commit 45179ccb8c
3 changed files with 115 additions and 114 deletions
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@ -1,3 +1,11 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
 /* eslint-disable react/display-name */
 /* eslint-disable react/prop-types */

--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@ -22,11 +22,22 @@ import gettext from 'sources/gettext';

 const useStyles = makeStyles((theme) =>
  ({
+    wizardBase: {
+      height: '100%'
+    },
    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%'
+    },
    rightPanel: {
      position: 'relative',
      minHeight: 100,
@ -89,10 +100,20 @@ const useStyles = makeStyles((theme) =>
      padding: '0.5rem',
      display: 'flex',
      flexDirection: 'row',
-      flex: 1
+      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'
    },
    backButton: {
-
      marginRight: theme.spacing(1),
    },
    instructions: {
@ -108,8 +129,10 @@ const useStyles = makeStyles((theme) =>
    stepDefaultStyle: {
      width: '100%',
      height: '100%',
-      paddingRight: '1em',
      paddingBottom: '1em',
+      paddingRight: '1em',
+      overflow: 'hidden',
+      minHeight: 0
    }

  }),
@ -158,49 +181,50 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {


  return (
-    <div className={clsx(classes.root, props?.rootClass)}>
-      <div className={clsx(classes.wizard, className)}>
-        <Box className={classes.leftPanel}>
-          {steps.map((label, index) => (
-            <Box key={label} className={clsx(classes.stepLabel, index === activeStep ? classes.active : '')}>
-              <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>
-          ))}
-        </Box>
-
-        <div className={clsx(classes.rightPanel, props.stepPanelCss)}>
-          {
-            React.Children.map(props.children, (child) => {
-              return (
-                <div hidden={child.props.stepId !== activeStep} className={clsx(classes.stepDefaultStyle, child.props.className)}>
-                  {child}
-                </div>
-              );
-            })
-          }
-
+    <Box className={classes.wizardBase}>
+      <Box className={clsx('wizard-header', classes.wizardTitle)}>{props.title}</Box>
+      <div className={clsx(classes.root, props?.rootClass)}>
+        <div className={clsx(classes.wizard, className)}>
+          <Box className={classes.leftPanel}>
+            {steps.map((label, index) => (
+              <Box key={label} className={clsx(classes.stepLabel, index === activeStep ? classes.active : '')}>
+                <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>
+            ))}
+          </Box>
+          <div className={clsx(classes.rightPanel, classes.wizardPanelContent, props.stepPanelCss)}>
+            {
+              React.Children.map(props.children, (child) => {
+                return (
+                  <div hidden={child.props.stepId !== activeStep} className={clsx(child.props.className, classes.stepDefaultStyle)}>
+                    {child}
+                  </div>
+                );
+              })
+            }
+          </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>
-    </div>
+    </Box>
  );
 }

@ -208,6 +232,7 @@ export default Wizard;

 Wizard.propTypes = {
  props: PropTypes.object,
+  title: PropTypes.string,
  stepList: PropTypes.array,
  onSave: PropTypes.func,
  onHelp: PropTypes.func,
--- a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
+++ b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
@ -29,31 +29,9 @@ import Notify from '../../../../static/js/helpers/Notifier';

 const useStyles = makeStyles(() =>
  ({
-    grantWizardStep: {
+    root: {
      height: '100%'
    },
-    grantWizardTitle: {
-      top: '0 !important',
-      opacity: '1 !important',
-      borderRadius: '6px 6px 0px 0px !important',
-      margin: '0 !important',
-      width: '100%',
-      height: '6%'
-    },
-    grantWizardContent: {
-      height: '94% !important'
-    },
-    stepPanelCss: {
-      height: 500,
-      overflow: 'hidden'
-    },
-    objectSelection: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      overflow: 'hidden',
-      marginBottom: '1em'
-    },
    searchBox: {
      marginBottom: '1em',
      display: 'flex',
@ -67,16 +45,16 @@ const useStyles = makeStyles(() =>
      borderLeft: 'none',
      paddingLeft: 5
    },
-    grantWizardPanelContent: {
-      paddingTop: '0.9em !important',
-      overflow: 'hidden'
-    },
    grantWizardSql: {
      height: '90% !important',
      width: '100%'
    },
    privilegeStep: {
      height: '100%',
+      overflow: 'auto'
+    },
+    panelContent: {
+      height: '100%'
    }
  }),
 );
@ -139,7 +117,6 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
  const [selectedObject, setSelectedObject] = React.useState([]);
  const [selectedAcl, setSelectedAcl] = React.useState({});
  const [msqlData, setSQL] = React.useState('');
-  const [stepType, setStepType] = React.useState('');
  const [searchVal, setSearchVal] = React.useState('');
  const [loaderText, setLoaderText] = React.useState('');
  const [tablebData, setTableData] = React.useState([]);
@ -213,12 +190,6 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {

  const wizardStepChange = (data) => {
    switch (data.currentStep) {
-    case 0:
-      setStepType('object_type');
-      break;
-    case 1:
-      setStepType('privileges');
-      break;
    case 2:
      setLoaderText('Loading SQL ...');
      var msql_url = url_for(
@ -240,7 +211,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
        });
      break;
    default:
-      setStepType('');
+      break;
    }
  };

@ -258,7 +229,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
    api.post(_url, post_data)
      .then(() => {
        setLoaderText('');
-        Alertify.wizardDialog().close();
+        Alertify.grantWizardDialog().close();
      })
      .catch((error) => {
        setLoaderText('');
@ -266,9 +237,9 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
      });
  };

-  const disableNextCheck = () => {
-    return selectedObject.length > 0 && stepType === 'object_type' ?
-      false : selectedAcl?.privilege?.length > 0 && stepType === 'privileges' ? validatePrivilege() : true;
+  const disableNextCheck = (stepId) => {
+    return selectedObject.length > 0 && stepId === 0 ?
+      false : selectedAcl?.privilege?.length > 0 && stepId === 1 ? validatePrivilege() : true;
  };

  const onDialogHelp= () => {
@ -334,21 +305,17 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
  });

  return (
-    <>
-      <Box className={clsx('wizard-header', classes.grantWizardTitle)}>{gettext('Grant Wizard')}</Box>
+    <Box className={classes.root}>
      <Loader message={loaderText} />
      <Wizard
+        title={gettext('Grant Wizard')}
        stepList={steps}
-        rootClass={clsx(classes.grantWizardContent)}
-        stepPanelCss={classes.grantWizardPanelContent}
        disableNextStep={disableNextCheck}
        onStepChange={wizardStepChange}
        onSave={onSave}
        onHelp={onDialogHelp}
      >
-        <WizardStep
-          stepId={0}
-          className={clsx(classes.objectSelection, classes.grantWizardStep, classes.stepPanelCss)} >
+        <WizardStep stepId={0}>
          <Box className={classes.searchBox}>
            <Box className={classes.searchPadding}></Box>
            <InputText
@ -360,37 +327,38 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
              }>
            </InputText>
          </Box>
-          <PgTable
-            className={classes.table}
-            height={window.innerHeight - 450}
-            columns={columns}
-            data={tablebData}
-            isSelectRow={true}
-            searchText={searchVal}
-            getSelectedRows={getTableSelectedRows}>
-          </PgTable>
+          <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.grantWizardStep, classes.privilegeStep)}>
+          className={clsx(classes.privilegeStep)}>
          {privSchemaInstance &&
-                        <SchemaView
-                          formType={'dialog'}
-                          getInitData={() => { }}
-                          viewHelperProps={{ mode: 'create' }}
-                          schema={privSchemaInstance}
-                          showFooter={false}
-                          isTabView={false}
-                          onDataChange={(isChanged, changedData) => {
-                            setSelectedAcl(changedData);
-                          }}
-                        />
+                    <SchemaView
+                      formType={'dialog'}
+                      getInitData={() => { }}
+                      viewHelperProps={{ mode: 'create' }}
+                      schema={privSchemaInstance}
+                      showFooter={false}
+                      isTabView={false}
+                      onDataChange={(isChanged, changedData) => {
+                        setSelectedAcl(changedData);
+                      }}
+                    />
          }
        </WizardStep>
        <WizardStep
-          stepId={2}
-          className={classes.grantWizardStep}>
+          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}
@ -399,7 +367,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
            value={msqlData.toString()} />
        </WizardStep>
      </Wizard>
-    </>
+    </Box>
  );
 }