Format Add Users/Groups, Fix bug on Add Service Account (#1898)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Console.tsx

@@ -108,7 +108,9 @@ const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
 
 const Account = React.lazy(() => import("./Account/Account"));
 
-const AccountCreate = React.lazy(() => import("./Account/AddServiceAccountScreen"));
+const AccountCreate = React.lazy(
+  () => import("./Account/AddServiceAccountScreen")
+);
 const Users = React.lazy(() => import("./Users/Users"));
 const Groups = React.lazy(() => import("./Groups/Groups"));
 
@@ -122,9 +124,7 @@ const ConfigurationOptions = React.lazy(
 const AddPool = React.lazy(
   () => import("./Tenants/TenantDetails/Pools/AddPool/AddPool")
 );
-const AddGroupScreen = React.lazy(
-  () => import("./Groups/AddGroupScreen")
-);
+const AddGroupScreen = React.lazy(() => import("./Groups/AddGroupScreen"));
 const SiteReplication = React.lazy(
   () => import("./Configurations/SiteReplication/SiteReplication")
 );
@@ -411,7 +411,8 @@ const Console = ({
     {
       component: Account,
       path: IAM_PAGES.ACCOUNT,
-       // user has implicit access to service-accounts
+      forceDisplay: true,
+      // user has implicit access to service-accounts
     },
     {
       component: AccountCreate,

portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useState, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -23,7 +23,7 @@ import {
   modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Button, Box, LinearProgress } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import history from "../../../../src/history";
@@ -37,6 +37,7 @@ import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { ErrorResponseHandler } from "../../../../src/common/types";
 import api from "../../../../src/common/api";
 import { setErrorSnackMessage } from "../../../../src/actions";
+import SectionTitle from "../Common/SectionTitle";
 
 interface IAddGroupProps {
   classes: any;
@@ -100,16 +101,12 @@ const styles = (theme: Theme) =>
     ...modalStyleUtils,
   });
 
-const AddGroupScreen = ({
-  classes,
-  setErrorSnackMessage,
-}: IAddGroupProps) => {
+const AddGroupScreen = ({ classes, setErrorSnackMessage }: IAddGroupProps) => {
   const [groupName, setGroupName] = useState<string>("");
   const [saving, isSaving] = useState<boolean>(false);
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [validGroup, setValidGroup] = useState<boolean>(false);
 
-
   useEffect(() => {
     setValidGroup(groupName.trim() !== "");
   }, [groupName, selectedUsers]);
@@ -117,31 +114,24 @@ const AddGroupScreen = ({
   useEffect(() => {
     if (saving) {
       const saveRecord = () => {
-      
-          api
-            .invoke("POST", "/api/v1/groups", {
-              group: groupName,
-              members: selectedUsers,
-            })
-            .then((res) => {
-              isSaving(false);
-               history.push(`${IAM_PAGES.GROUPS}`);
-            })
-            .catch((err: ErrorResponseHandler) => {
-              isSaving(false);
-              setErrorSnackMessage(err);
-            });
-        }
-     
+        api
+          .invoke("POST", "/api/v1/groups", {
+            group: groupName,
+            members: selectedUsers,
+          })
+          .then((res) => {
+            isSaving(false);
+            history.push(`${IAM_PAGES.GROUPS}`);
+          })
+          .catch((err: ErrorResponseHandler) => {
+            isSaving(false);
+            setErrorSnackMessage(err);
+          });
+      };
+
       saveRecord();
     }
-
-  }, [
-    saving,
-    groupName,
-    selectedUsers,
-    setErrorSnackMessage,
-  ]);
+  }, [saving, groupName, selectedUsers, setErrorSnackMessage]);
 
   //Fetch Actions
   const setSaving = (event: React.FormEvent) => {
@@ -150,13 +140,11 @@ const AddGroupScreen = ({
     isSaving(true);
   };
 
-  const resetForm = () => {    
-      setGroupName("");
-      setSelectedUsers([]);
+  const resetForm = () => {
+    setGroupName("");
+    setSelectedUsers([]);
   };
 
-
-
   return (
     <Fragment>
       <Grid item xs={12}>
@@ -164,85 +152,81 @@ const AddGroupScreen = ({
           label={<BackLink to={IAM_PAGES.GROUPS} label={"Groups"} />}
         />
         <PageLayout>
-          <Grid
-            item
-            xs={12}
-            container
-            className={classes.title}
-            align-items="stretch"
+          <Box
+            sx={{
+              display: "grid",
+              padding: "25px",
+              gap: "25px",
+              gridTemplateColumns: {
+                md: "2fr 1.2fr",
+                xs: "1fr",
+              },
+              border: "1px solid #eaeaea",
+            }}
           >
-            <Grid item className={classes.headIcon}>
-              <CreateGroupIcon />              
-            </Grid>
-            <Grid item className={classes.headTitle}>
-              Create Group
-            </Grid>
-          </Grid>
+            <Box>
+              <form noValidate autoComplete="off" onSubmit={setSaving}>
+                <Grid container item spacing="20">
+                  <Grid item xs={12}>
+                    <SectionTitle icon={<CreateGroupIcon />}>
+                      Create Group
+                    </SectionTitle>
+                  </Grid>
+                  <Grid item xs={12}>
+                    <Grid container>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <InputBoxWrapper
+                          id="group-name"
+                          name="group-name"
+                          label="Group Name"
+                          autoFocus={true}
+                          value={groupName}
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            setGroupName(e.target.value);
+                          }}
+                        />
+                      </Grid>
+                      <Grid item xs={12} className={classes.userSelector}>
+                        <UsersSelectors
+                          selectedUsers={selectedUsers}
+                          setSelectedUsers={setSelectedUsers}
+                          editMode={true}
+                        />
+                      </Grid>
+                    </Grid>
+                    <Grid item xs={12} className={classes.modalButtonBar}>
+                      <Button
+                        type="button"
+                        variant="outlined"
+                        color="primary"
+                        className={classes.spacerRight}
+                        onClick={resetForm}
+                      >
+                        Clear
+                      </Button>
 
-          <Grid container align-items="center">
-            <Grid item xs={8}>
-              <Box>
-                 <form noValidate autoComplete="off" onSubmit={setSaving}>
-        <Grid container item spacing = "20">
-
-          <Grid item xs={12} >
-           <Grid container>
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <InputBoxWrapper
-                  id="group-name"
-                  name="group-name"
-                  label="Group Name"
-                  autoFocus={true}
-                  value={groupName}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setGroupName(e.target.value);
-                  }}
-                />
-              </Grid>
-            <Grid item xs={12} className={classes.userSelector}>
-              <UsersSelectors
-                selectedUsers={selectedUsers}
-                setSelectedUsers={setSelectedUsers}
-                editMode={true}
-              />
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
-            <Button
-              type="button"
-              variant="outlined"
-              color="primary"
-              className={classes.spacerRight}
-              onClick={resetForm}
-            >
-              Clear
-            </Button>
-
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              disabled={saving || !validGroup}
-            >
-              Save
-            </Button>
-          </Grid>
-          </Grid>
-          {saving && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
-        </Grid>
-      </form>
-              </Box>
-            </Grid>
-            <Grid item xs={4}>
-              <Box>
-                <AddGroupHelpBox />
-              </Box>
-            </Grid>
-          </Grid>
+                      <Button
+                        type="submit"
+                        variant="contained"
+                        color="primary"
+                        disabled={saving || !validGroup}
+                      >
+                        Save
+                      </Button>
+                    </Grid>
+                  </Grid>
+                  {saving && (
+                    <Grid item xs={12}>
+                      <LinearProgress />
+                    </Grid>
+                  )}
+                </Grid>
+              </form>
+            </Box>
+            <AddGroupHelpBox />
+          </Box>
         </PageLayout>
       </Grid>
     </Fragment>

portal-ui/src/screens/Console/Users/AddUserScreen.tsx

@@ -23,7 +23,7 @@ import {
   modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress, Box } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import { CreateUserIcon } from "../../../icons";
 
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -31,7 +31,6 @@ import PageLayout from "../Common/Layout/PageLayout";
 import history from "../../../../src/history";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 
-import AddUserHelpBox from "./AddUserHelpBox";
 import PolicySelectors from "../Policies/PolicySelectors";
 import BackLink from "../../../common/BackLink";
 import GroupsSelectors from "./GroupsSelectors";
@@ -45,6 +44,8 @@ import { ErrorResponseHandler } from "../../../../src/common/types";
 import api from "../../../../src/common/api";
 
 import { setErrorSnackMessage } from "../../../../src/actions";
+import SectionTitle from "../Common/SectionTitle";
+import AddUserHelpBox from "../Account/AddServiceAccountHelpBox";
 
 interface IAddUserProps {
   classes: any;
@@ -102,10 +103,7 @@ const styles = (theme: Theme) =>
     ...modalStyleUtils,
   });
 
-const AddUser = ({
-  classes,
-  setErrorSnackMessage,
-}: IAddUserProps) => {
+const AddUser = ({ classes, setErrorSnackMessage }: IAddUserProps) => {
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [accessKey, setAccessKey] = useState<string>("");
   const [secretKey, setSecretKey] = useState<string>("");
@@ -161,134 +159,120 @@ const AddUser = ({
       <Grid item xs={12}>
         <PageHeader label={<BackLink to={IAM_PAGES.USERS} label={"Users"} />} />
         <PageLayout>
-          <Grid
-            item
-            xs={12}
-            container
-            className={classes.title}
-            align-items="baseline"
+          <Box
+            sx={{
+              display: "grid",
+              padding: "25px",
+              gap: "25px",
+              gridTemplateColumns: {
+                md: "2fr 1.2fr",
+                xs: "1fr",
+              },
+              border: "1px solid #eaeaea",
+            }}
           >
-            <Grid item xs={"auto"}>
-              <CreateUserIcon />
-            </Grid>
-            <Grid
-              item
-              xs={"auto"}
-              align-self="end"
-              className={classes.headTitle}
-            >
-              Create User
-            </Grid>
-          </Grid>
-
-          <Grid container align-items="center">
-            <Grid item xs={8}>
-              <Box>
-                <form
-                  noValidate
-                  autoComplete="off"
-                  onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                    saveRecord(e);
-                  }}
-                >
-                  <Grid container>
-                    <Grid item xs={12}>
-                      <div className={classes.formFieldRow}>
-                        <InputBoxWrapper
-                          className={classes.spacerBottom}
-                          classes={{
-                            inputLabel: classes.sizedLabel,
-                          }}
-                          id="accesskey-input"
-                          name="accesskey-input"
-                          label="User Name"
-                          value={accessKey}
-                          autoFocus={true}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setAccessKey(e.target.value);
-                          }}
-                        />
-                      </div>
-                      <div className={classes.formFieldRow}>
-                        <InputBoxWrapper
-                          className={classes.spacerBottom}
-                          classes={{
-                            inputLabel: classes.sizedLabel,
-                          }}
-                          id="standard-multiline-static"
-                          name="standard-multiline-static"
-                          label="Password"
-                          type={showPassword ? "text" : "password"}
-                          value={secretKey}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setSecretKey(e.target.value);
-                          }}
-                          autoComplete="current-password"
-                          overlayIcon={
-                            showPassword ? (
-                              <VisibilityOffIcon />
-                            ) : (
-                              <RemoveRedEyeIcon />
-                            )
-                          }
-                          overlayAction={() => setShowPassword(!showPassword)}
-                        />
-                      </div>
-                      <Grid container item spacing="20">
-                        <Grid item xs={12}>
-                          <PolicySelectors
-                            selectedPolicy={selectedPolicies}
-                            setSelectedPolicy={setSelectedPolicies}
-                          />
-                        </Grid>
-                        <Grid item xs={12}>
-                          <GroupsSelectors
-                            selectedGroups={selectedGroups}
-                            setSelectedGroups={(elements: string[]) => {
-                              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={resetForm}
-                      >
-                        Clear
-                      </Button>
-
-                      <Button
-                        type="submit"
-                        variant="contained"
-                        color="primary"
-                        disabled={addLoading || !sendEnabled}
-                      >
-                        Save
-                      </Button>
-                    </Grid>
+            <Box>
+              <form
+                noValidate
+                autoComplete="off"
+                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                  saveRecord(e);
+                }}
+              >
+                <Grid container spacing={1}>
+                  <Grid item xs={12}>
+                    <SectionTitle icon={<CreateUserIcon />}>
+                      Create User
+                    </SectionTitle>
                   </Grid>
-                </form>
-              </Box>
-            </Grid>
-            <Grid item xs={4}>
-              <Box>
-                <AddUserHelpBox />
-              </Box>
-            </Grid>
-          </Grid>
+                  <Grid item xs={12}>
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        className={classes.spacerBottom}
+                        classes={{
+                          inputLabel: classes.sizedLabel,
+                        }}
+                        id="accesskey-input"
+                        name="accesskey-input"
+                        label="User Name"
+                        value={accessKey}
+                        autoFocus={true}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setAccessKey(e.target.value);
+                        }}
+                      />
+                    </div>
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        className={classes.spacerBottom}
+                        classes={{
+                          inputLabel: classes.sizedLabel,
+                        }}
+                        id="standard-multiline-static"
+                        name="standard-multiline-static"
+                        label="Password"
+                        type={showPassword ? "text" : "password"}
+                        value={secretKey}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setSecretKey(e.target.value);
+                        }}
+                        autoComplete="current-password"
+                        overlayIcon={
+                          showPassword ? (
+                            <VisibilityOffIcon />
+                          ) : (
+                            <RemoveRedEyeIcon />
+                          )
+                        }
+                        overlayAction={() => setShowPassword(!showPassword)}
+                      />
+                    </div>
+                    <Grid container item spacing="20">
+                      <Grid item xs={12}>
+                        <PolicySelectors
+                          selectedPolicy={selectedPolicies}
+                          setSelectedPolicy={setSelectedPolicies}
+                        />
+                      </Grid>
+                      <Grid item xs={12}>
+                        <GroupsSelectors
+                          selectedGroups={selectedGroups}
+                          setSelectedGroups={(elements: string[]) => {
+                            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={resetForm}
+                    >
+                      Clear
+                    </Button>
+
+                    <Button
+                      type="submit"
+                      variant="contained"
+                      color="primary"
+                      disabled={addLoading || !sendEnabled}
+                    >
+                      Save
+                    </Button>
+                  </Grid>
+                </Grid>
+              </form>
+            </Box>
+            <AddUserHelpBox />
+          </Box>
         </PageLayout>
       </Grid>
     </Fragment>