Skip to content

Commit b125121

Browse files
bexsoftbexsoft
authored
Migrated available mds components in Tiers Page (#3007)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 0c480dd commit b125121

File tree

7 files changed

+311
-433
lines changed

7 files changed

+311
-433
lines changed

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React from "react";
18-
import { Box, Grid } from "@mui/material";
19-
import { HelpBox } from "mds";
18+
import { HelpBox, Box, Grid, breakPoints } from "mds";
2019

2120
interface IDistributedOnly {
2221
iconComponent: any;
@@ -25,7 +24,7 @@ interface IDistributedOnly {
2524

2625
const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
2726
return (
28-
<Grid container alignItems={"center"}>
27+
<Grid container>
2928
<Grid item xs={12}>
3029
<HelpBox
3130
title={`${entity} not available`}
@@ -34,21 +33,16 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
3433
<Box
3534
sx={{
3635
fontSize: "14px",
37-
display: "flex",
38-
border: "none",
39-
flexFlow: {
40-
xs: "column",
41-
md: "row",
42-
},
43-
"& a": {
44-
color: (theme) => theme.colors.link,
45-
textDecoration: "underline",
36+
[`@media (max-width: ${breakPoints.sm}px)`]: {
37+
display: "flex",
38+
flexFlow: "column",
4639
},
4740
}}
4841
>
49-
<div>This feature is not available for a single-disk setup.</div>
50-
51-
<div>
42+
<span>
43+
This feature is not available for a single-disk setup.&nbsp;
44+
</span>
45+
<span>
5246
Please deploy a server in{" "}
5347
<a
5448
href="https://min.io/docs/minio/linux/operations/install-deploy-manage/deploy-minio-multi-node-multi-drive.html?ref=con"
@@ -58,7 +52,7 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
5852
Distributed Mode
5953
</a>{" "}
6054
to use this feature.
61-
</div>
55+
</span>
6256
</Box>
6357
}
6458
/>

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

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616

1717
import React, { useState } from "react";
1818
import get from "lodash/get";
19-
import { Grid, InputLabel, Tooltip } from "@mui/material";
20-
import IconButton from "@mui/material/IconButton";
19+
import { Grid, InputLabel, Tooltip, IconButton } from "mds";
2120
import AttachFileIcon from "@mui/icons-material/AttachFile";
2221
import CancelIcon from "@mui/icons-material/Cancel";
2322
import { Theme } from "@mui/material/styles";
@@ -96,24 +95,24 @@ const FileSelector = ({
9695
<Grid
9796
item
9897
xs={12}
99-
className={`${classes.fileInputField} ${classes.fieldBottom} ${
100-
classes.fieldContainer
101-
} ${error !== "" ? classes.errorInField : ""}`}
98+
className={`inputItem ${classes.fileInputField} ${
99+
classes.fieldBottom
100+
} ${classes.fieldContainer} ${
101+
error !== "" ? classes.errorInField : ""
102+
}`}
102103
>
103104
{label !== "" && (
104105
<InputLabel
105106
htmlFor={id}
106-
className={`${error !== "" ? classes.fieldLabelError : ""} ${
107-
classes.inputLabel
108-
}`}
107+
className={`${error !== "" ? classes.fieldLabelError : ""}`}
109108
>
110109
<span>
111110
{label}
112111
{required ? "*" : ""}
113112
</span>
114113
{tooltip !== "" && (
115114
<div className={classes.tooltipContainer}>
116-
<Tooltip title={tooltip} placement="top-start">
115+
<Tooltip tooltip={tooltip} placement="top">
117116
<div className={classes.tooltip}>
118117
<HelpIcon />
119118
</div>
@@ -144,12 +143,9 @@ const FileSelector = ({
144143
<IconButton
145144
color="primary"
146145
aria-label="upload picture"
147-
component="span"
148146
onClick={() => {
149147
setShowSelector(false);
150148
}}
151-
disableRipple={false}
152-
disableFocusRipple={false}
153149
size="small"
154150
>
155151
<CancelIcon />
@@ -164,12 +160,9 @@ const FileSelector = ({
164160
<IconButton
165161
color="primary"
166162
aria-label="upload picture"
167-
component="span"
168163
onClick={() => {
169164
setShowSelector(true);
170165
}}
171-
disableRipple={false}
172-
disableFocusRipple={false}
173166
size="small"
174167
>
175168
<AttachFileIcon />

‎portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx‎

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,25 @@ import React, { Fragment, useCallback, useEffect, useState } from "react";
1818

1919
import { useNavigate, useParams } from "react-router-dom";
2020
import get from "lodash/get";
21-
import Grid from "@mui/material/Grid";
2221
import { Theme } from "@mui/material/styles";
23-
import { BackLink, Button, PageLayout } from "mds";
22+
import {
23+
BackLink,
24+
breakPoints,
25+
Button,
26+
Grid,
27+
PageLayout,
28+
InputBox,
29+
SectionTitle,
30+
} from "mds";
2431
import createStyles from "@mui/styles/createStyles";
2532
import withStyles from "@mui/styles/withStyles";
26-
import { Box } from "@mui/material";
2733
import {
2834
fileInputStyles,
2935
formFieldStyles,
3036
modalBasic,
37+
modalStyleUtils,
3138
settingsCommon,
3239
} from "../../Common/FormComponents/common/styleLibrary";
33-
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
3440
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
3541
import {
3642
azureServiceName,
@@ -348,53 +354,28 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
348354
>
349355
<form noValidate onSubmit={submitForm}>
350356
{type !== "" && targetElement ? (
351-
<Grid
352-
item
353-
xs={12}
354-
key={`icon-${targetElement.targetTitle}`}
355-
sx={{
356-
display: "flex",
357-
alignItems: "center",
358-
justifyContent: "start",
359-
marginBottom: "20px",
360-
}}
361-
>
362-
{targetElement.logo ? (
363-
<Box
364-
sx={{
365-
"& .min-icon": {
366-
height: "60px",
367-
width: "60px",
368-
},
369-
}}
370-
>
371-
{targetElement.logo}
372-
</Box>
373-
) : null}
374-
375-
<div className={classes.lambdaNotifTitle}>
376-
<b>
377-
{titleSelection ? titleSelection : ""} - Add Tier
378-
Configuration
379-
</b>
380-
</div>
381-
</Grid>
357+
<SectionTitle icon={targetElement.logo} sx={{ marginBottom: 20 }}>
358+
{titleSelection ? titleSelection : ""} - Add Tier Configuration
359+
</SectionTitle>
382360
) : null}
383-
384361
<Grid
385362
item
386363
xs={12}
387364
sx={{
388365
display: "grid",
389-
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
390-
gridAutoFlow: { xs: "dense", sm: "row" },
391-
gridRowGap: 25,
366+
gridTemplateColumns: "1fr 1fr",
367+
gridAutoFlow: "row",
368+
gridRowGap: 20,
392369
gridColumnGap: 50,
370+
[`@media (max-width: ${breakPoints.sm}px)`]: {
371+
gridTemplateColumns: "1fr",
372+
gridAutoFlow: "dense",
373+
},
393374
}}
394375
>
395376
{type !== "" && (
396377
<Fragment>
397-
<InputBoxWrapper
378+
<InputBox
398379
id="name"
399380
name="name"
400381
label="Name"
@@ -404,7 +385,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
404385
error={nameInputError}
405386
required
406387
/>
407-
<InputBoxWrapper
388+
<InputBox
408389
id="endpoint"
409390
name="endpoint"
410391
label="Endpoint"
@@ -417,7 +398,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
417398
/>
418399
{(type === s3ServiceName || type === minioServiceName) && (
419400
<Fragment>
420-
<InputBoxWrapper
401+
<InputBox
421402
id="accessKey"
422403
name="accessKey"
423404
label="Access Key"
@@ -428,7 +409,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
428409
}}
429410
required
430411
/>
431-
<InputBoxWrapper
412+
<InputBox
432413
id="secretKey"
433414
name="secretKey"
434415
label="Secret Key"
@@ -462,7 +443,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
462443
)}
463444
{type === azureServiceName && (
464445
<Fragment>
465-
<InputBoxWrapper
446+
<InputBox
466447
id="accountName"
467448
name="accountName"
468449
label="Account Name"
@@ -473,7 +454,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
473454
}}
474455
required
475456
/>
476-
<InputBoxWrapper
457+
<InputBox
477458
id="accountKey"
478459
name="accountKey"
479460
label="Account Key"
@@ -486,7 +467,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
486467
/>
487468
</Fragment>
488469
)}
489-
<InputBoxWrapper
470+
<InputBox
490471
id="bucket"
491472
name="bucket"
492473
label="Bucket"
@@ -497,7 +478,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
497478
}}
498479
required
499480
/>
500-
<InputBoxWrapper
481+
<InputBox
501482
id="prefix"
502483
name="prefix"
503484
label="Prefix"
@@ -519,7 +500,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
519500
type={type as "azure" | "s3" | "minio" | "gcs"}
520501
/>
521502
{type === s3ServiceName && (
522-
<InputBoxWrapper
503+
<InputBox
523504
id="storageClass"
524505
name="storageClass"
525506
label="Storage Class"
@@ -533,7 +514,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
533514
</Fragment>
534515
)}
535516
</Grid>
536-
<Grid item xs={12} className={classes.settingsButtonContainer}>
517+
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
537518
<Button
538519
id={"save-tier-configuration"}
539520
type="submit"

0 commit comments

Comments
 (0)