Skip to content

Commit 8cb0f1e

Browse files
bexsoftbexsoft
authored
Replaced mui accordion with mds component (#3089)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent faafb77 commit 8cb0f1e

File tree

2 files changed

+103
-111
lines changed

2 files changed

+103
-111
lines changed

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

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
1818

1919
import get from "lodash/get";
2020
import {
21+
Accordion,
2122
Button,
2223
FormLayout,
2324
Grid,
@@ -32,12 +33,6 @@ import { useSelector } from "react-redux";
3233
import { api } from "api";
3334
import { BucketVersioningResponse, Tier } from "api/consoleApi";
3435
import { errorToHandler } from "api/errors";
35-
import {
36-
Accordion,
37-
AccordionDetails,
38-
AccordionSummary,
39-
Typography,
40-
} from "@mui/material";
4136
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
4237
import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
4338
import { useAppDispatch } from "../../../../store";
@@ -77,6 +72,8 @@ const AddLifecycleModal = ({
7772
const [isFormValid, setIsFormValid] = useState<boolean>(false);
7873
const [expiredObjectDM, setExpiredObjectDM] = useState<boolean>(false);
7974
const [loadingVersioning, setLoadingVersioning] = useState<boolean>(true);
75+
const [expandedAdv, setExpandedAdv] = useState<boolean>(false);
76+
const [expanded, setExpanded] = useState<boolean>(false);
8077

8178
/*To be removed on component replacement*/
8279
const formFieldRowFilter = {
@@ -336,63 +333,64 @@ const AddLifecycleModal = ({
336333
/>
337334
)}
338335
<Grid item xs={12} sx={formFieldRowFilter}>
339-
<Accordion>
340-
<AccordionSummary>
341-
<Typography>Filters</Typography>
342-
</AccordionSummary>
343-
<AccordionDetails>
344-
<Grid item xs={12}>
345-
<InputBox
346-
id="prefix"
347-
name="prefix"
348-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
349-
setPrefix(e.target.value);
350-
}}
351-
label="Prefix"
352-
value={prefix}
353-
/>
354-
</Grid>
355-
<Grid item xs={12}>
356-
<QueryMultiSelector
357-
name="tags"
358-
label="Tags"
359-
elements={""}
360-
onChange={(vl: string) => {
361-
setTags(vl);
362-
}}
363-
keyPlaceholder="Tag Key"
364-
valuePlaceholder="Tag Value"
365-
withBorder
366-
/>
367-
</Grid>
368-
</AccordionDetails>
336+
<Accordion
337+
title={"Filters"}
338+
id={"lifecycle-filters"}
339+
expanded={expanded}
340+
onTitleClick={() => setExpanded(!expanded)}
341+
>
342+
<Grid item xs={12}>
343+
<InputBox
344+
id="prefix"
345+
name="prefix"
346+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
347+
setPrefix(e.target.value);
348+
}}
349+
label="Prefix"
350+
value={prefix}
351+
/>
352+
</Grid>
353+
<Grid item xs={12}>
354+
<QueryMultiSelector
355+
name="tags"
356+
label="Tags"
357+
elements={""}
358+
onChange={(vl: string) => {
359+
setTags(vl);
360+
}}
361+
keyPlaceholder="Tag Key"
362+
valuePlaceholder="Tag Value"
363+
withBorder
364+
/>
365+
</Grid>
369366
</Accordion>
370367
</Grid>
371368
{ilmType === "expiry" && targetVersion === "noncurrent" && (
372369
<Grid item xs={12} sx={formFieldRowFilter}>
373-
<Accordion>
374-
<AccordionSummary>
375-
<Typography>Advanced</Typography>
376-
</AccordionSummary>
377-
<AccordionDetails>
378-
<Grid item xs={12}>
379-
<Switch
380-
value="expired_delete_marker"
381-
id="expired_delete_marker"
382-
name="expired_delete_marker"
383-
checked={expiredObjectDM}
384-
onChange={(
385-
event: React.ChangeEvent<HTMLInputElement>,
386-
) => {
387-
setExpiredObjectDM(event.target.checked);
388-
}}
389-
label={"Expire Delete Marker"}
390-
description={
391-
"Remove the reference to the object if no versions are left"
392-
}
393-
/>
394-
</Grid>
395-
</AccordionDetails>
370+
<Accordion
371+
title={"Advanced"}
372+
id={"lifecycle-advanced-filters"}
373+
expanded={expandedAdv}
374+
onTitleClick={() => setExpandedAdv(!expandedAdv)}
375+
sx={{ marginTop: 15 }}
376+
>
377+
<Grid item xs={12}>
378+
<Switch
379+
value="expired_delete_marker"
380+
id="expired_delete_marker"
381+
name="expired_delete_marker"
382+
checked={expiredObjectDM}
383+
onChange={(
384+
event: React.ChangeEvent<HTMLInputElement>,
385+
) => {
386+
setExpiredObjectDM(event.target.checked);
387+
}}
388+
label={"Expire Delete Marker"}
389+
description={
390+
"Remove the reference to the object if no versions are left"
391+
}
392+
/>
393+
</Grid>
396394
</Accordion>
397395
</Grid>
398396
)}

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

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import React, { Fragment, useEffect, useState } from "react";
1818
import get from "lodash/get";
1919
import {
20+
Accordion,
2021
Button,
2122
FormLayout,
2223
Grid,
@@ -27,12 +28,6 @@ import {
2728
Select,
2829
Switch,
2930
} from "mds";
30-
import {
31-
Accordion,
32-
AccordionDetails,
33-
AccordionSummary,
34-
Typography,
35-
} from "@mui/material";
3631
import { api } from "api";
3732
import { Tier } from "api/consoleApi";
3833
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
@@ -72,6 +67,8 @@ const EditLifecycleConfiguration = ({
7267
const [expiryDays, setExpiryDays] = useState<string>("0");
7368
const [transitionDays, setTransitionDays] = useState<string>("0");
7469
const [isFormValid, setIsFormValid] = useState<boolean>(false);
70+
const [expandedAdv, setExpandedAdv] = useState<boolean>(false);
71+
const [expanded, setExpanded] = useState<boolean>(false);
7572

7673
/*To be removed on component replacement*/
7774
const formFieldRowFilter = {
@@ -449,57 +446,54 @@ const EditLifecycleConfiguration = ({
449446
</Fragment>
450447
)}
451448
<Grid item xs={12} sx={formFieldRowFilter}>
452-
<Accordion>
453-
<AccordionSummary>
454-
<Typography>Filters</Typography>
455-
</AccordionSummary>
456-
457-
<AccordionDetails>
458-
<InputBox
459-
id="prefix"
460-
name="prefix"
461-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
462-
setPrefix(e.target.value);
463-
}}
464-
label="Prefix"
465-
value={prefix}
466-
/>
467-
<QueryMultiSelector
468-
name="tags"
469-
label="Tags"
470-
elements={tags}
471-
onChange={(vl: string) => {
472-
setTags(vl);
473-
}}
474-
keyPlaceholder="Tag Key"
475-
valuePlaceholder="Tag Value"
476-
withBorder
477-
/>
478-
</AccordionDetails>
449+
<Accordion
450+
title={"Filters"}
451+
id={"lifecycle-filters"}
452+
expanded={expanded}
453+
onTitleClick={() => setExpanded(!expanded)}
454+
>
455+
<InputBox
456+
id="prefix"
457+
name="prefix"
458+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
459+
setPrefix(e.target.value);
460+
}}
461+
label="Prefix"
462+
value={prefix}
463+
/>
464+
<QueryMultiSelector
465+
name="tags"
466+
label="Tags"
467+
elements={tags}
468+
onChange={(vl: string) => {
469+
setTags(vl);
470+
}}
471+
keyPlaceholder="Tag Key"
472+
valuePlaceholder="Tag Value"
473+
withBorder
474+
/>
479475
</Accordion>
480476
</Grid>
481477
{ilmType === "expiry" &&
482478
lifecycleRule.expiration?.noncurrent_expiration_days && (
483479
<Grid item xs={12} sx={formFieldRowFilter}>
484-
<Accordion>
485-
<AccordionSummary>
486-
<Typography>Advanced</Typography>
487-
</AccordionSummary>
488-
489-
<AccordionDetails>
490-
<Switch
491-
value="expired_delete_marker"
492-
id="expired_delete_marker"
493-
name="expired_delete_marker"
494-
checked={expiredObjectDM}
495-
onChange={(
496-
event: React.ChangeEvent<HTMLInputElement>,
497-
) => {
498-
setExpiredObjectDM(event.target.checked);
499-
}}
500-
label={"Expired Object Delete Marker"}
501-
/>
502-
</AccordionDetails>
480+
<Accordion
481+
title={"Advanced"}
482+
id={"lifecycle-advanced-filters"}
483+
expanded={expandedAdv}
484+
onTitleClick={() => setExpandedAdv(!expandedAdv)}
485+
sx={{ marginTop: 15 }}
486+
>
487+
<Switch
488+
value="expired_delete_marker"
489+
id="expired_delete_marker"
490+
name="expired_delete_marker"
491+
checked={expiredObjectDM}
492+
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
493+
setExpiredObjectDM(event.target.checked);
494+
}}
495+
label={"Expired Object Delete Marker"}
496+
/>
503497
</Accordion>
504498
</Grid>
505499
)}

0 commit comments

Comments
 (0)