mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update AddUserScreen layout to fix padding (#2121)

Browse Source 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2022-06-13 11:29:21 -07:00
committed by GitHub
parent 1dd9f7f363
commit 1d17f11d2f
5 changed files with 147 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
portal-ui/src/screens/Console/Common/FormLayout.tsx
View File

@@ -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>

2
portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
View File

@@ -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"

2
portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
View File

@@ -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"

12
portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
View File

@@ -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>
);
};

271
portal-ui/src/screens/Console/Users/AddUserScreen.tsx
View File

@@ -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);
export default withStyles(styles)(AddUser);