Skip to content

Commit 078e09b

Browse files
bexsoftBenjamin Perezdvaldivia
authored
Fixed inconsistences in create tenant modal (#349)
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>
1 parent d6f9784 commit 078e09b

File tree

8 files changed

+167
-166
lines changed

8 files changed

+167
-166
lines changed

‎portal-ui/bindata_assetfs.go

Lines changed: 97 additions & 97 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,20 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
3535
const styles = (theme: Theme) =>
3636
createStyles({
3737
errorBlock: {
38-
color: "red"
38+
color: "red",
3939
},
4040
minTableHeader: {
4141
color: "#393939",
4242
"& tr": {
4343
"& th": {
44-
fontWeight: "bold"
45-
}
46-
}
44+
fontWeight: "bold",
45+
},
46+
},
4747
},
4848
buttonContainer: {
49-
textAlign: "right"
49+
textAlign: "right",
5050
},
51-
...modalBasic
51+
...modalBasic,
5252
});
5353

5454
interface IEnableBucketEncryptionProps {
@@ -108,12 +108,7 @@ class EnableBucketEncryption extends React.Component<
108108

109109
render() {
110110
const { classes, open } = this.props;
111-
const {
112-
loading,
113-
encryptionError,
114-
kmsKeyID,
115-
encryptionType
116-
} = this.state;
111+
const { loading, encryptionError, kmsKeyID, encryptionType } = this.state;
117112

118113
return (
119114
<ModalWrapper
@@ -148,7 +143,7 @@ class EnableBucketEncryption extends React.Component<
148143
<Grid item xs={12}>
149144
<SelectWrapper
150145
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
151-
this.setState({ encryptionType: e.target.value as string});
146+
this.setState({ encryptionType: e.target.value as string });
152147
}}
153148
id="select-encryption-type"
154149
name="select-encryption-type"
@@ -162,7 +157,7 @@ class EnableBucketEncryption extends React.Component<
162157
{
163158
label: "SSE-KMS",
164159
value: "sse-kms",
165-
}
160+
},
166161
]}
167162
/>
168163
</Grid>

‎portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,7 @@ const CommentBoxWrapper = ({
9393
}`}
9494
>
9595
{label !== "" && (
96-
<InputLabel
97-
htmlFor={id}
98-
className={`${error !== "" ? classes.fieldLabelError : ""} ${
99-
classes.inputLabel
100-
}`}
101-
>
96+
<InputLabel htmlFor={id} className={classes.inputLabel}>
10297
<span>
10398
{label}
10499
{required ? "*" : ""}

‎portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@ const styles = (theme: Theme) =>
7676
display: "flex",
7777
alignItems: "center",
7878
},
79+
fieldBottom: {
80+
borderBottom: "#9c9c9c 1px solid",
81+
},
82+
fileInputField: {
83+
margin: "13px 0",
84+
},
7985
});
8086

8187
const FileSelector = ({
@@ -98,7 +104,7 @@ const FileSelector = ({
98104
<Grid
99105
item
100106
xs={12}
101-
className={`${classes.fieldContainer} ${
107+
className={`${classes.fieldBottom} ${classes.fieldContainer} ${
102108
error !== "" ? classes.errorInField : ""
103109
}`}
104110
>
@@ -137,6 +143,7 @@ const FileSelector = ({
137143
accept={accept}
138144
required={required}
139145
disabled={disabled}
146+
className={classes.fileInputField}
140147
/>
141148

142149
{value !== "" && (

‎portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ const inputStyles = makeStyles((theme: Theme) =>
109109
},
110110
error: {
111111
color: "#b53b4b",
112-
boxShadow: "inset 0px 0px 1px 1px #b53b4b",
113112
},
114113
})
115114
);
@@ -166,12 +165,7 @@ const InputBoxWrapper = ({
166165
}`}
167166
>
168167
{label !== "" && (
169-
<InputLabel
170-
htmlFor={id}
171-
className={`${error !== "" ? classes.fieldLabelError : ""} ${
172-
classes.inputLabel
173-
}`}
174-
>
168+
<InputLabel htmlFor={id} className={classes.inputLabel}>
175169
<span>
176170
{label}
177171
{required ? "*" : ""}

‎portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const styles = (theme: Theme) =>
3030
minWidth: 180,
3131
marginRight: 10,
3232
"& ul": {
33-
padding: 15,
33+
padding: "0 15px 0 0",
3434

3535
"& li": {
3636
listStyle: "lower-roman",

‎portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,13 @@ const styles = (theme: Theme) =>
100100
color: "#dc1f2e",
101101
fontSize: "0.75rem",
102102
},
103+
h3Section: {
104+
marginTop: 0,
105+
},
106+
descriptionText: {
107+
fontSize: 13,
108+
color: "#777777",
109+
},
103110
...modalBasic,
104111
});
105112

@@ -949,8 +956,10 @@ const AddTenant = ({
949956
componentRender: (
950957
<React.Fragment>
951958
<div className={classes.headerElement}>
952-
<h3>Name Tenant</h3>
953-
<span>How would you like to name this new tenant?</span>
959+
<h3 className={classes.h3Section}>Name Tenant</h3>
960+
<span className={classes.descriptionText}>
961+
How would you like to name this new tenant?
962+
</span>
954963
</div>
955964
<Grid item xs={12}>
956965
<InputBoxWrapper
@@ -996,7 +1005,7 @@ const AddTenant = ({
9961005
</Grid>
9971006
<Grid item xs={12}>
9981007
<br />
999-
<span>
1008+
<span className={classes.descriptionText}>
10001009
Check 'Advanced Mode' for additional configuration options, such
10011010
as IDP, Disk Encryption, and customized TLS/SSL Certificates.
10021011
<br />
@@ -1032,8 +1041,10 @@ const AddTenant = ({
10321041
componentRender: (
10331042
<React.Fragment>
10341043
<div className={classes.headerElement}>
1035-
<h3>Configure</h3>
1036-
<span>Basic configurations for tenant management</span>
1044+
<h3 className={classes.h3Section}>Configure</h3>
1045+
<span className={classes.descriptionText}>
1046+
Basic configurations for tenant management
1047+
</span>
10371048
</div>
10381049

10391050
<Grid item xs={12}>
@@ -1115,8 +1126,8 @@ const AddTenant = ({
11151126
componentRender: (
11161127
<React.Fragment>
11171128
<div className={classes.headerElement}>
1118-
<h3>IDP</h3>
1119-
<span>
1129+
<h3 className={classes.h3Section}>IDP</h3>
1130+
<span className={classes.descriptionText}>
11201131
Access to the tenant can be controlled via an external Identity
11211132
Manager.
11221133
</span>
@@ -1303,7 +1314,7 @@ const AddTenant = ({
13031314
componentRender: (
13041315
<React.Fragment>
13051316
<div className={classes.headerElement}>
1306-
<h3>Security</h3>
1317+
<h3 className={classes.h3Section}>Security</h3>
13071318
</div>
13081319
<Grid item xs={12}>
13091320
<FormSwitchWrapper
@@ -1425,8 +1436,10 @@ const AddTenant = ({
14251436
componentRender: (
14261437
<React.Fragment>
14271438
<div className={classes.headerElement}>
1428-
<h3>Encryption</h3>
1429-
<span>How would you like to encrypt the information at rest.</span>
1439+
<h3 className={classes.h3Section}>Encryption</h3>
1440+
<span className={classes.descriptionText}>
1441+
How would you like to encrypt the information at rest.
1442+
</span>
14301443
</div>
14311444
<Grid item xs={12}>
14321445
<FormSwitchWrapper
@@ -1887,8 +1900,10 @@ const AddTenant = ({
18871900
componentRender: (
18881901
<React.Fragment>
18891902
<div className={classes.headerElement}>
1890-
<h3>Tenant Size</h3>
1891-
<span>Please select the desired capacity</span>
1903+
<h3 className={classes.h3Section}>Tenant Size</h3>
1904+
<span className={classes.descriptionText}>
1905+
Please select the desired capacity
1906+
</span>
18921907
</div>
18931908
<span className={classes.error}>{distribution.error}</span>
18941909
<Grid item xs={12}>
@@ -1927,7 +1942,7 @@ const AddTenant = ({
19271942
</div>
19281943
<div className={classes.sizeFactorContainer}>
19291944
<SelectWrapper
1930-
label=""
1945+
label={"Unit"}
19311946
id="size_factor"
19321947
name="size_factor"
19331948
value={sizeFactor}
@@ -1967,7 +1982,7 @@ const AddTenant = ({
19671982
value={ecParity}
19681983
options={ecParityChoices}
19691984
/>
1970-
<span>
1985+
<span className={classes.descriptionText}>
19711986
Please select the desired parity. This setting will change the
19721987
max usable capacity in the cluster
19731988
</span>
@@ -2015,8 +2030,10 @@ const AddTenant = ({
20152030
componentRender: (
20162031
<React.Fragment>
20172032
<div className={classes.headerElement}>
2018-
<h3>Review</h3>
2019-
<span>Review the details of the new tenant</span>
2033+
<h3 className={classes.h3Section}>Review</h3>
2034+
<span className={classes.descriptionText}>
2035+
Review the details of the new tenant
2036+
</span>
20202037
</div>
20212038
{addError !== "" && (
20222039
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
3333
import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
3434
import history from "../../../../history";
3535
import RefreshIcon from "@material-ui/icons/Refresh";
36-
import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
36+
import {
37+
actionsTray,
38+
containerForHeader,
39+
searchField,
40+
} from "../../Common/FormComponents/common/styleLibrary";
3741
import PageHeader from "../../Common/PageHeader/PageHeader";
3842

3943
interface ITenantsList {
@@ -70,18 +74,8 @@ const styles = (theme: Theme) =>
7074
},
7175
},
7276
},
73-
actionsTray: {
74-
textAlign: "right",
75-
"& button": {
76-
marginLeft: 10,
77-
},
78-
},
79-
searchField: {
80-
background: "#FFFFFF",
81-
padding: 12,
82-
borderRadius: 5,
83-
boxShadow: "0px 3px 6px #00000012",
84-
},
77+
...actionsTray,
78+
...searchField,
8579
...containerForHeader(theme.spacing(4)),
8680
});
8781

@@ -248,17 +242,6 @@ const ListTenants = ({ classes }: ITenantsList) => {
248242
<Grid container>
249243
<Grid item xs={12} className={classes.container}>
250244
<Grid item xs={12} className={classes.actionsTray}>
251-
<IconButton
252-
color="primary"
253-
aria-label="Refresh Tenant List"
254-
component="span"
255-
onClick={() => {
256-
setIsLoading(true);
257-
}}
258-
>
259-
<RefreshIcon />
260-
</IconButton>
261-
262245
<TextField
263246
placeholder="Search Tenants"
264247
className={classes.searchField}
@@ -276,6 +259,16 @@ const ListTenants = ({ classes }: ITenantsList) => {
276259
),
277260
}}
278261
/>
262+
<IconButton
263+
color="primary"
264+
aria-label="Refresh Tenant List"
265+
component="span"
266+
onClick={() => {
267+
setIsLoading(true);
268+
}}
269+
>
270+
<RefreshIcon />
271+
</IconButton>
279272
<Button
280273
variant="contained"
281274
color="primary"

0 commit comments

Comments
 (0)