Toggle Bucket Naming Rules display by clicking text (#2311)

This commit is contained in:
jinapurapu
2022-09-16 11:12:47 -07:00
committed by GitHub
parent 6ed5084691
commit a77b56b522

View File

@@ -16,12 +16,12 @@
import React, { Fragment, useState } from "react";
import Grid from "@mui/material/Grid";
import { Button, LinearProgress } from "@mui/material";
import { LinearProgress } from "@mui/material";
import { AppState } from "../../../../../store";
import { useSelector } from "react-redux";
import ShowTextIcon from "../../../../../icons/ShowTextIcon";
import HideTextIcon from "../../../../../icons/HideTextIcon";
import { Button } from "mds";
import ValidRule from "./ValidRule";
import InvalidRule from "./InvalidRule";
import NARule from "./NARule";
@@ -56,88 +56,89 @@ const BucketNamingRules = ({ errorList }: { errorList: boolean[] }) => {
uniqueName,
] = errorList;
const toggleNamingRules = () => {
setShowNamingRules(!showNamingRules);
};
return (
<Fragment>
<Grid item xs={12}>
{showNamingRules ? (
<span style={{ color: "#0288D1", textDecoration: "underline" }}>
{" "}
Hide Bucket Naming Rules{" "}
</span>
) : (
<span style={{ color: "#0288D1", textDecoration: "underline" }}>
View Bucket Naming Rules
</span>
)}
<Button
variant="text"
size="small"
onClick={() => {
setShowNamingRules(!showNamingRules);
}}
>
{showNamingRules ? <ShowTextIcon /> : <HideTextIcon />}
</Button>
{showNamingRules && (
<Grid container>
<Grid item xs={6}>
{bucketName.length === 0 ? (
<NARule ruleText={lengthRuleText} />
) : lengthRule ? (
<ValidRule ruleText={lengthRuleText} />
) : (
<InvalidRule ruleText={lengthRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={characterRuleText} />
) : validCharacters ? (
<ValidRule ruleText={characterRuleText} />
) : (
<InvalidRule ruleText={characterRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={periodRuleText} />
) : noAdjacentPeriods ? (
<ValidRule ruleText={periodRuleText} />
) : (
<InvalidRule ruleText={periodRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={ipRuleText} />
) : notIPFormat ? (
<ValidRule ruleText={ipRuleText} />
) : (
<InvalidRule ruleText={ipRuleText} />
)}
</Grid>
<Grid item xs={6}>
{bucketName.length === 0 ? (
<NARule ruleText={prefixRuleText} />
) : noPrefix ? (
<ValidRule ruleText={prefixRuleText} />
) : (
<InvalidRule ruleText={prefixRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={suffixRuleText} />
) : noSuffix ? (
<ValidRule ruleText={suffixRuleText} />
) : (
<InvalidRule ruleText={suffixRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={uniqueRuleText} />
) : uniqueName ? (
<ValidRule ruleText={uniqueRuleText} />
) : (
<InvalidRule ruleText={uniqueRuleText} />
)}
</Grid>
<Button
type="button"
id={"toggle-naming-rules"}
onClick={() => {
toggleNamingRules();
}}
icon={showNamingRules ? <ShowTextIcon /> : <HideTextIcon />}
label={(showNamingRules ? "Hide" : "View") + " Bucket Naming Rules"}
style={{
height: "10px",
width: "200px",
textAlign: "left",
paddingLeft: 0,
fontSize: "9px",
border: "none",
}}
/>
{showNamingRules && (
<Grid container fontSize={14} paddingTop={2}>
<Grid item xs={6}>
{bucketName.length === 0 ? (
<NARule ruleText={lengthRuleText} />
) : lengthRule ? (
<ValidRule ruleText={lengthRuleText} />
) : (
<InvalidRule ruleText={lengthRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={characterRuleText} />
) : validCharacters ? (
<ValidRule ruleText={characterRuleText} />
) : (
<InvalidRule ruleText={characterRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={periodRuleText} />
) : noAdjacentPeriods ? (
<ValidRule ruleText={periodRuleText} />
) : (
<InvalidRule ruleText={periodRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={ipRuleText} />
) : notIPFormat ? (
<ValidRule ruleText={ipRuleText} />
) : (
<InvalidRule ruleText={ipRuleText} />
)}
</Grid>
)}
</Grid>
<Grid item xs={6}>
{bucketName.length === 0 ? (
<NARule ruleText={prefixRuleText} />
) : noPrefix ? (
<ValidRule ruleText={prefixRuleText} />
) : (
<InvalidRule ruleText={prefixRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={suffixRuleText} />
) : noSuffix ? (
<ValidRule ruleText={suffixRuleText} />
) : (
<InvalidRule ruleText={suffixRuleText} />
)}
{bucketName.length === 0 ? (
<NARule ruleText={uniqueRuleText} />
) : uniqueName ? (
<ValidRule ruleText={uniqueRuleText} />
) : (
<InvalidRule ruleText={uniqueRuleText} />
)}
</Grid>
</Grid>
)}
{addLoading && (
<Grid item xs={12}>
<LinearProgress />