Skip to content

Commit 8a79409

Browse files
prakashsvmxprakashsvmx
authored
UX bucket and object modals and all other modals (#1307)
1 parent 9444dad commit 8a79409

40 files changed

+1400
-1208
lines changed

‎portal-ui/src/screens/Console/Account/AddServiceAccount.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { Theme } from "@mui/material/styles";
2222
import createStyles from "@mui/styles/createStyles";
2323
import withStyles from "@mui/styles/withStyles";
2424
import {
25-
modalBasic,
25+
modalStyleUtils,
2626
serviceAccountStyles,
2727
} from "../Common/FormComponents/common/styleLibrary";
2828
import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -37,7 +37,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
3737
const styles = (theme: Theme) =>
3838
createStyles({
3939
...serviceAccountStyles,
40-
...modalBasic,
40+
...modalStyleUtils,
4141
});
4242

4343
interface IAddServiceAccountProps {
@@ -128,7 +128,7 @@ const AddServiceAccount = ({
128128
addServiceAccount(e);
129129
}}
130130
>
131-
<Grid container className={classes.containerScrollable}>
131+
<Grid container className={classes.modalFormScrollable}>
132132
<Grid item xs={12}>
133133
<div className={classes.infoDetails}>
134134
Service Accounts inherit the policy explicitly attached to the
@@ -205,12 +205,11 @@ const AddServiceAccount = ({
205205
</Grid>
206206
</Grid>
207207
<Grid container>
208-
<Grid item xs={12} className={classes.buttonContainer}>
208+
<Grid item xs={12} className={classes.modalButtonBar}>
209209
<Button
210210
type="button"
211211
color="primary"
212212
variant="outlined"
213-
className={classes.buttonSpacer}
214213
onClick={resetForm}
215214
>
216215
Clear

‎portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
2424
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
2525
import { Button, LinearProgress } from "@mui/material";
2626
import {
27-
actionsTray,
2827
containerForHeader,
29-
modalBasic,
28+
formFieldStyles,
29+
modalStyleUtils,
30+
spacingUtils,
3031
} from "../Common/FormComponents/common/styleLibrary";
3132
import { ChangePasswordRequest } from "../Buckets/types";
3233
import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
3839
buttonContainer: {
3940
textAlign: "right",
4041
},
41-
...actionsTray,
42-
...modalBasic,
42+
...modalStyleUtils,
43+
...formFieldStyles,
44+
...spacingUtils,
4345
...containerForHeader(theme.spacing(4)),
4446
});
4547

@@ -118,8 +120,6 @@ const ChangePassword = ({
118120
setCurrentPassword("");
119121
closeModal();
120122
}}
121-
aria-labelledby="alert-dialog-title"
122-
aria-describedby="alert-dialog-description"
123123
>
124124
<form
125125
noValidate
@@ -129,8 +129,8 @@ const ChangePassword = ({
129129
}}
130130
>
131131
<Grid container>
132-
<Grid item xs={12} className={classes.formScrollable}>
133-
<Grid item xs={12}>
132+
<Grid item xs={12} className={classes.modalFormScrollable}>
133+
<Grid item xs={12} className={classes.formFieldRow}>
134134
<InputBoxWrapper
135135
id="current-password"
136136
name="current-password"
@@ -142,7 +142,7 @@ const ChangePassword = ({
142142
value={currentPassword}
143143
/>
144144
</Grid>
145-
<Grid item xs={12}>
145+
<Grid item xs={12} className={classes.formFieldRow}>
146146
<InputBoxWrapper
147147
id="new-password"
148148
name="new-password"
@@ -154,7 +154,7 @@ const ChangePassword = ({
154154
value={newPassword}
155155
/>
156156
</Grid>
157-
<Grid item xs={12}>
157+
<Grid item xs={12} className={classes.formFieldRow}>
158158
<InputBoxWrapper
159159
id="re-new-password"
160160
name="re-new-password"
@@ -167,7 +167,7 @@ const ChangePassword = ({
167167
/>
168168
</Grid>
169169
</Grid>
170-
<Grid item xs={12} className={classes.buttonContainer}>
170+
<Grid item xs={12} className={classes.modalButtonBar}>
171171
<Button
172172
type="submit"
173173
variant="contained"

‎portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
2424
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
2525
import { Button, LinearProgress } from "@mui/material";
2626
import {
27-
actionsTray,
2827
containerForHeader,
29-
modalBasic,
28+
formFieldStyles,
29+
modalStyleUtils,
30+
spacingUtils,
3031
} from "../Common/FormComponents/common/styleLibrary";
3132
import { ChangeUserPasswordRequest } from "../Buckets/types";
3233
import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
3839
buttonContainer: {
3940
textAlign: "right",
4041
},
41-
...actionsTray,
42-
...modalBasic,
42+
...modalStyleUtils,
43+
...formFieldStyles,
44+
...spacingUtils,
4345
...containerForHeader(theme.spacing(4)),
4446
});
4547

@@ -109,8 +111,6 @@ const ChangeUserPassword = ({
109111
setReNewPassword("");
110112
closeModal();
111113
}}
112-
aria-labelledby="alert-dialog-title"
113-
aria-describedby="alert-dialog-description"
114114
>
115115
<form
116116
noValidate
@@ -120,9 +120,11 @@ const ChangeUserPassword = ({
120120
}}
121121
>
122122
<Grid container>
123-
<Grid item xs={12} className={classes.formScrollable}>
124-
<h3>Change password for {userName}</h3>
125-
<Grid item xs={12}>
123+
<Grid item xs={12} className={classes.modalFormScrollable}>
124+
<div className={classes.spacerBottom}>
125+
Change password for: {userName}
126+
</div>
127+
<Grid item xs={12} className={classes.formFieldRow}>
126128
<InputBoxWrapper
127129
id="new-password"
128130
name="new-password"
@@ -134,7 +136,7 @@ const ChangeUserPassword = ({
134136
value={newPassword}
135137
/>
136138
</Grid>
137-
<Grid item xs={12}>
139+
<Grid item xs={12} className={classes.formFieldRow}>
138140
<InputBoxWrapper
139141
id="re-new-password"
140142
name="re-new-password"

‎portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
2121
import { Theme } from "@mui/material/styles";
2222
import createStyles from "@mui/styles/createStyles";
2323
import withStyles from "@mui/styles/withStyles";
24-
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
24+
import {
25+
formFieldStyles,
26+
modalStyleUtils,
27+
} from "../../Common/FormComponents/common/styleLibrary";
2528
import { connect } from "react-redux";
2629
import api from "../../../../common/api";
2730
import { ErrorResponseHandler } from "../../../../common/types";
@@ -44,10 +47,8 @@ interface IAddAccessRule {
4447

4548
const styles = (theme: Theme) =>
4649
createStyles({
47-
buttonContainer: {
48-
textAlign: "right",
49-
},
50-
...modalBasic,
50+
...formFieldStyles,
51+
...modalStyleUtils,
5152
});
5253

5354
const AddAccessRule = ({
@@ -86,53 +87,58 @@ const AddAccessRule = ({
8687
};
8788

8889
return (
89-
<React.Fragment>
90-
<ModalWrapper
91-
modalOpen={modalOpen}
92-
title="Add Access Rule"
93-
onClose={onClose}
94-
>
95-
<Grid container>
96-
<Grid item xs={12}>
97-
<InputBoxWrapper
98-
value={prefix}
99-
label={"Prefix"}
100-
id={"prefix"}
101-
name={"prefix"}
102-
placeholder={"Enter Prefix"}
103-
onChange={(e) => {
104-
setPrefix(e.target.value);
105-
}}
106-
/>
107-
<SelectWrapper
108-
id="access"
109-
name="Access"
110-
onChange={(e) => {
111-
setSelectedAccess(e.target.value);
112-
}}
113-
label="Access"
114-
value={selectedAccess}
115-
options={accessOptions}
116-
disabled={false}
117-
/>
118-
</Grid>
119-
<Grid item xs={12} className={classes.buttonContainer}>
120-
<button type="button" color="primary" onClick={resetForm}>
121-
Clear
122-
</button>
123-
<Button
124-
type="submit"
125-
variant="contained"
126-
color="primary"
127-
disabled={prefix.trim() === ""}
128-
onClick={createProcess}
129-
>
130-
Save
131-
</Button>
132-
</Grid>
90+
<ModalWrapper
91+
modalOpen={modalOpen}
92+
title="Add Access Rule"
93+
onClose={onClose}
94+
>
95+
<Grid container>
96+
<Grid item xs={12} className={classes.formFieldRow}>
97+
<InputBoxWrapper
98+
value={prefix}
99+
label={"Prefix"}
100+
id={"prefix"}
101+
name={"prefix"}
102+
placeholder={"Enter Prefix"}
103+
onChange={(e) => {
104+
setPrefix(e.target.value);
105+
}}
106+
/>
133107
</Grid>
134-
</ModalWrapper>
135-
</React.Fragment>
108+
<Grid item xs={12}>
109+
<SelectWrapper
110+
id="access"
111+
name="Access"
112+
onChange={(e) => {
113+
setSelectedAccess(e.target.value);
114+
}}
115+
label="Access"
116+
value={selectedAccess}
117+
options={accessOptions}
118+
disabled={false}
119+
/>
120+
</Grid>
121+
<Grid item xs={12} className={classes.modalButtonBar}>
122+
<Button
123+
type="button"
124+
color="primary"
125+
variant="outlined"
126+
onClick={resetForm}
127+
>
128+
Clear
129+
</Button>
130+
<Button
131+
type="submit"
132+
variant="contained"
133+
color="primary"
134+
disabled={prefix.trim() === ""}
135+
onClick={createProcess}
136+
>
137+
Save
138+
</Button>
139+
</Grid>
140+
</Grid>
141+
</ModalWrapper>
136142
);
137143
};
138144

0 commit comments

Comments
 (0)