From a77b56b522fed0463d4b04931f7926cecdc0843c Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 11:12:47 -0700
Subject: [PATCH] Toggle Bucket Naming Rules display by clicking text (#2311)

---
 .../AddBucket/BucketNamingRules.tsx           | 163 +++++++++---------
 1 file changed, 82 insertions(+), 81 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
index 856a3c11d..b6c9c81e3 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
@@ -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 />