From 1d17f11d2fb6f15ce51995c2e153fa83eb4a7a6b Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Mon, 13 Jun 2022 11:29:21 -0700
Subject: [PATCH] Update AddUserScreen layout to fix padding (#2121)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../src/screens/Console/Common/FormLayout.tsx |   1 +
 .../screens/Console/Groups/AddGroupScreen.tsx |   2 +-
 .../Console/Policies/AddPolicyScreen.tsx      |   2 +-
 .../Console/Policies/PolicySelectors.tsx      |  12 +-
 .../screens/Console/Users/AddUserScreen.tsx   | 271 +++++++++---------
 5 files changed, 147 insertions(+), 141 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormLayout.tsx b/portal-ui/src/screens/Console/Common/FormLayout.tsx
index 4f84d7cef..54d0334ab 100644
--- a/portal-ui/src/screens/Console/Common/FormLayout.tsx
+++ b/portal-ui/src/screens/Console/Common/FormLayout.tsx
@@ -41,6 +41,7 @@ const FormLayout: React.FC<Props> = ({ children, title, helpbox, icon }) => {
     >
       <Box>
         <SectionTitle icon={icon}>{title}</SectionTitle>
+        <Box sx={{ height: 16 }} />
         {children}
       </Box>
 
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
index 8bb29747a..1a68284f8 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
@@ -123,7 +123,7 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
             helpbox={<AddGroupHelpBox />}
           >
             <form noValidate autoComplete="off" onSubmit={setSaving}>
-              <Grid container marginTop={"16px"}>
+              <Grid container>
                 <Grid item xs={12} className={classes.formFieldRow}>
                   <InputBoxWrapper
                     id="group-name"
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
index 861caaf35..c7a5fc816 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
@@ -93,7 +93,7 @@ const AddPolicyScreen = () => {
                 addRecord(e);
               }}
             >
-              <Grid container item spacing={1} marginTop={"8px"}>
+              <Grid container item spacing={1}>
                 <Grid item xs={12}>
                   <InputBoxWrapper
                     id="policy-name"
diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
index d8ee0ac79..3abf0e33a 100644
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -38,7 +38,6 @@ import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { setSelectedPolicies } from "../Users/AddUsersSlice";
 
-
 interface ISelectPolicyProps {
   classes: any;
   selectedPolicy?: string[];
@@ -137,7 +136,7 @@ const PolicySelectors = ({
   );
 
   return (
-    <React.Fragment>
+    <Grid container>
       <Grid item xs={12}>
         {loading && <LinearProgress />}
         {records.length > 0 ? (
@@ -154,7 +153,12 @@ const PolicySelectors = ({
                 />
               </div>
             </Grid>
-            <Grid item xs={12} className={classes.tableBlock}>
+            <Grid
+              item
+              xs={12}
+              className={classes.tableBlock}
+              style={{ paddingBottom: 16 }}
+            >
               <TableWrapper
                 columns={[{ label: "Policy", elementKey: "name" }]}
                 onSelect={selectionChanged}
@@ -171,7 +175,7 @@ const PolicySelectors = ({
           <div className={classes.noFound}>No Policies Available</div>
         )}
       </Grid>
-    </React.Fragment>
+    </Grid>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Users/AddUserScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
index 25a6e405b..26a411849 100644
--- a/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
@@ -20,10 +20,10 @@ import React, { Fragment } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import {createUserAsync, resetFormAsync} from "./thunk/AddUsersThunk";
+import { createUserAsync, resetFormAsync } from "./thunk/AddUsersThunk";
 import {
-    formFieldStyles,
-    modalStyleUtils,
+  formFieldStyles,
+  modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
 import { Button, LinearProgress } from "@mui/material";
@@ -42,150 +42,151 @@ import FormLayout from "../Common/FormLayout";
 import AddUserHelpBox from "./AddUserHelpBox";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
-import { useSelector} from "react-redux";
-import {AppState} from "../../../store";
+import { useSelector } from "react-redux";
+import { AppState } from "../../../store";
 import {
-    setSelectedGroups,
-    setAddLoading,
-    setSendEnabled,
+  setSelectedGroups,
+  setAddLoading,
+  setSendEnabled,
 } from "./AddUsersSlice";
 interface IAddUserProps {
-    classes: any;
+  classes: any;
 }
 
 const styles = (theme: Theme) =>
-    createStyles({
-        bottomContainer: {
-            display: "flex",
-            flexGrow: 1,
-            alignItems: "center",
-            margin: "auto",
-            justifyContent: "center",
-            "& div": {
-                width: 150,
-                "@media (max-width: 900px)": {
-                    flexFlow: "column",
-                },
-            },
+  createStyles({
+    bottomContainer: {
+      display: "flex",
+      flexGrow: 1,
+      alignItems: "center",
+      margin: "auto",
+      justifyContent: "center",
+      "& div": {
+        width: 150,
+        "@media (max-width: 900px)": {
+          flexFlow: "column",
         },
-        ...formFieldStyles,
-        ...modalStyleUtils,
-    });
+      },
+    },
+    ...formFieldStyles,
+    ...modalStyleUtils,
+  });
 
 const AddUser = ({ classes }: IAddUserProps) => {
-    const dispatch = useAppDispatch();
-    const selectedPolicies = useSelector(
-        (state: AppState) => state.createUser.selectedPolicies
-    )
-    const selectedGroups = useSelector(
-        (state: AppState) => state.createUser.selectedGroups
-    )
-    const addLoading = useSelector(
-        (state: AppState) => state.createUser.addLoading
-    )
-    const sendEnabled = useSelector(
-        (state: AppState) => state.createUser.sendEnabled
-    )
-    const secretKeylength = useSelector(
-        (state: AppState) => state.createUser.secretKeylength
-    )
-    const navigate = useNavigate();
-    dispatch(setSendEnabled());
+  const dispatch = useAppDispatch();
+  const selectedPolicies = useSelector(
+    (state: AppState) => state.createUser.selectedPolicies
+  );
+  const selectedGroups = useSelector(
+    (state: AppState) => state.createUser.selectedGroups
+  );
+  const addLoading = useSelector(
+    (state: AppState) => state.createUser.addLoading
+  );
+  const sendEnabled = useSelector(
+    (state: AppState) => state.createUser.sendEnabled
+  );
+  const secretKeylength = useSelector(
+    (state: AppState) => state.createUser.secretKeylength
+  );
+  const navigate = useNavigate();
+  dispatch(setSendEnabled());
 
+  const saveRecord = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (secretKeylength < 8) {
+      dispatch(
+        setErrorSnackMessage({
+          errorMessage: "Passwords must be at least 8 characters long",
+          detailedError: "",
+        })
+      );
+      dispatch(setAddLoading(false));
+      return;
+    }
+    if (addLoading) {
+      return;
+    }
+    dispatch(setAddLoading(true));
+    dispatch(createUserAsync())
+      .unwrap() // <-- async Thunk returns a promise, that can be 'unwrapped')
+      .then(() => navigate(`${IAM_PAGES.USERS}`));
+  };
 
-    const saveRecord = (event: React.FormEvent) => {
-        event.preventDefault();
-        if (secretKeylength < 8) {
-            dispatch(
-                setErrorSnackMessage({
-                    errorMessage: "Passwords must be at least 8 characters long",
-                    detailedError: "",
-                })
-            );
-            dispatch(setAddLoading(false));
-            return;
-        }
-        if (addLoading) {
-            return;
-        }
-        dispatch(setAddLoading(true));
-        dispatch(createUserAsync())
-            .unwrap() // <-- async Thunk returns a promise, that can be 'unwrapped')
-            .then(() => navigate(`${IAM_PAGES.USERS}`))
-    };
+  return (
+    <Fragment>
+      <Grid item xs={12}>
+        <PageHeader label={<BackLink to={IAM_PAGES.USERS} label={"Users"} />} />
+        <PageLayout>
+          <FormLayout
+            title={"Create User"}
+            icon={<CreateUserIcon />}
+            helpbox={<AddUserHelpBox />}
+          >
+            <form
+              noValidate
+              autoComplete="off"
+              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                saveRecord(e);
+              }}
+            >
+              <Grid container>
+                <Grid item xs={12}>
+                  <div className={classes.formFieldRow}>
+                    <UserSelector classes={classes} />
+                  </div>
+                </Grid>
+                <Grid item xs={12}>
+                  <div className={classes.formFieldRow}>
+                    <PasswordSelector classes={classes} />
+                  </div>
+                </Grid>
 
-    return (
-        <Fragment>
-            <Grid item xs={12}>
-                <PageHeader label={<BackLink to={IAM_PAGES.USERS} label={"Users"} />} />
-                <PageLayout>
-                    <FormLayout
-                        title={"Create User"}
-                        icon={<CreateUserIcon />}
-                        helpbox={<AddUserHelpBox />}
-                    >
-                        <form
-                            noValidate
-                            autoComplete="off"
-                            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                                saveRecord(e);
-                            }}
-                        >
-                            <Grid item xs={12}>
-                                <div className={classes.formFieldRow}>
-                                    <UserSelector classes={classes} />
-                                </div>
-                                <div className={classes.formFieldRow}>
-                                    <PasswordSelector classes={classes} />
-                                </div>
-                                <Grid container item spacing="20">
-                                    <Grid item xs={12}>
-                                        <PolicySelectors
-                                            selectedPolicy={selectedPolicies}
-                                        />
-                                    </Grid>
-                                    <Grid item xs={12}>
-                                        <GroupsSelectors
-                                            selectedGroups={selectedGroups}
-                                            setSelectedGroups={(elements: string[]) => {
-                                                dispatch(setSelectedGroups(elements));
-                                            }}
-                                        />
-                                    </Grid>
-                                </Grid>
-                                {addLoading && (
-                                    <Grid item xs={12}>
-                                        <LinearProgress />
-                                    </Grid>
-                                )}
-                            </Grid>
-                            <Grid item xs={12} className={classes.modalButtonBar}>
-                                <Button
-                                    type="button"
-                                    variant="outlined"
-                                    color="primary"
-                                    onClick={(e) => {
-                                        dispatch(resetFormAsync());
-                                    }}
-                                >
-                                    Clear
-                                </Button>
+                <Grid item xs={12}>
+                  <PolicySelectors selectedPolicy={selectedPolicies} />
+                </Grid>
+                <Grid item xs={12}>
+                  <GroupsSelectors
+                    selectedGroups={selectedGroups}
+                    setSelectedGroups={(elements: string[]) => {
+                      dispatch(setSelectedGroups(elements));
+                    }}
+                  />
+                </Grid>
+                {addLoading && (
+                  <Grid item xs={12}>
+                    <LinearProgress />
+                  </Grid>
+                )}
 
-                                <Button
-                                    type="submit"
-                                    variant="contained"
-                                    color="primary"
-                                    disabled={addLoading || !sendEnabled}
-                                >
-                                    Save
-                                </Button>
-                            </Grid>
-                        </form>
-                    </FormLayout>
-                </PageLayout>
-            </Grid>
-        </Fragment>
-    );
+                <Grid item xs={12} className={classes.modalButtonBar}>
+                  <Button
+                    type="button"
+                    variant="outlined"
+                    color="primary"
+                    onClick={(e) => {
+                      dispatch(resetFormAsync());
+                    }}
+                  >
+                    Clear
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                    disabled={addLoading || !sendEnabled}
+                  >
+                    Save
+                  </Button>
+                </Grid>
+              </Grid>
+            </form>
+          </FormLayout>
+        </PageLayout>
+      </Grid>
+    </Fragment>
+  );
 };
 
-export default withStyles(styles)(AddUser);
\ No newline at end of file
+export default withStyles(styles)(AddUser);