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

Replaced mui accordion with mds component (#3089)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-10-17 10:32:23 -05:00
committed by GitHub
parent faafb77c73
commit 8cb0f1e558
2 changed files with 103 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
View File

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import {
Accordion,
Button,
FormLayout,
Grid,
@@ -32,12 +33,6 @@ import { useSelector } from "react-redux";
import { api } from "api";
import { BucketVersioningResponse, Tier } from "api/consoleApi";
import { errorToHandler } from "api/errors";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Typography,
} from "@mui/material";
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
@@ -77,6 +72,8 @@ const AddLifecycleModal = ({
const [isFormValid, setIsFormValid] = useState<boolean>(false);
const [expiredObjectDM, setExpiredObjectDM] = useState<boolean>(false);
const [loadingVersioning, setLoadingVersioning] = useState<boolean>(true);
const [expandedAdv, setExpandedAdv] = useState<boolean>(false);
const [expanded, setExpanded] = useState<boolean>(false);
/*To be removed on component replacement*/
const formFieldRowFilter = {
@@ -336,63 +333,64 @@ const AddLifecycleModal = ({
/>
)}
<Grid item xs={12} sx={formFieldRowFilter}>
<Accordion>
<AccordionSummary>
<Typography>Filters</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid item xs={12}>
<InputBox
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
</Grid>
<Grid item xs={12}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
</AccordionDetails>
<Accordion
title={"Filters"}
id={"lifecycle-filters"}
expanded={expanded}
onTitleClick={() => setExpanded(!expanded)}
>
<Grid item xs={12}>
<InputBox
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
</Grid>
<Grid item xs={12}>
<QueryMultiSelector
name="tags"
label="Tags"
elements={""}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Grid>
</Accordion>
</Grid>
{ilmType === "expiry" && targetVersion === "noncurrent" && (
<Grid item xs={12} sx={formFieldRowFilter}>
<Accordion>
<AccordionSummary>
<Typography>Advanced</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid item xs={12}>
<Switch
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expire Delete Marker"}
description={
"Remove the reference to the object if no versions are left"
}
/>
</Grid>
</AccordionDetails>
<Accordion
title={"Advanced"}
id={"lifecycle-advanced-filters"}
expanded={expandedAdv}
onTitleClick={() => setExpandedAdv(!expandedAdv)}
sx={{ marginTop: 15 }}
>
<Grid item xs={12}>
<Switch
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expire Delete Marker"}
description={
"Remove the reference to the object if no versions are left"
}
/>
</Grid>
</Accordion>
</Grid>
)}

98
portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
View File

@@ -17,6 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import {
Accordion,
Button,
FormLayout,
Grid,
@@ -27,12 +28,6 @@ import {
Select,
Switch,
} from "mds";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Typography,
} from "@mui/material";
import { api } from "api";
import { Tier } from "api/consoleApi";
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
@@ -72,6 +67,8 @@ const EditLifecycleConfiguration = ({
const [expiryDays, setExpiryDays] = useState<string>("0");
const [transitionDays, setTransitionDays] = useState<string>("0");
const [isFormValid, setIsFormValid] = useState<boolean>(false);
const [expandedAdv, setExpandedAdv] = useState<boolean>(false);
const [expanded, setExpanded] = useState<boolean>(false);
/*To be removed on component replacement*/
const formFieldRowFilter = {
@@ -449,57 +446,54 @@ const EditLifecycleConfiguration = ({
</Fragment>
)}
<Grid item xs={12} sx={formFieldRowFilter}>
<Accordion>
<AccordionSummary>
<Typography>Filters</Typography>
</AccordionSummary>
<AccordionDetails>
<InputBox
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
<QueryMultiSelector
name="tags"
label="Tags"
elements={tags}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</AccordionDetails>
<Accordion
title={"Filters"}
id={"lifecycle-filters"}
expanded={expanded}
onTitleClick={() => setExpanded(!expanded)}
>
<InputBox
id="prefix"
name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setPrefix(e.target.value);
}}
label="Prefix"
value={prefix}
/>
<QueryMultiSelector
name="tags"
label="Tags"
elements={tags}
onChange={(vl: string) => {
setTags(vl);
}}
keyPlaceholder="Tag Key"
valuePlaceholder="Tag Value"
withBorder
/>
</Accordion>
</Grid>
{ilmType === "expiry" &&
lifecycleRule.expiration?.noncurrent_expiration_days && (
<Grid item xs={12} sx={formFieldRowFilter}>
<Accordion>
<AccordionSummary>
<Typography>Advanced</Typography>
</AccordionSummary>
<AccordionDetails>
<Switch
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expired Object Delete Marker"}
/>
</AccordionDetails>
<Accordion
title={"Advanced"}
id={"lifecycle-advanced-filters"}
expanded={expandedAdv}
onTitleClick={() => setExpandedAdv(!expandedAdv)}
sx={{ marginTop: 15 }}
>
<Switch
value="expired_delete_marker"
id="expired_delete_marker"
name="expired_delete_marker"
checked={expiredObjectDM}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setExpiredObjectDM(event.target.checked);
}}
label={"Expired Object Delete Marker"}
/>
</Accordion>
</Grid>
)}