Toggle Bucket Naming Rules display by clicking text

[jinapurapu]

Adds show/hide rules toggle to text adjacent to button.

[kaankabalak]

@jinapurapu, as we already have the same toggle function associated with both spans, we can do something like the following to avoid repetition in our code:

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 651877c3..afcf5ff3 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
@@ -63,26 +63,15 @@ const BucketNamingRules = ({ errorList }: { errorList: boolean[] }) => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        {showNamingRules ? (
-          <span
-            onClick={() => {
-              toggleNamingRules();
-            }}
-            style={{ color: "#0288D1", textDecoration: "underline" }}
-          >
-            {" "}
-            Hide Bucket Naming Rules{" "}
-          </span>
-        ) : (
-          <span
-            onClick={() => {
-              toggleNamingRules();
-            }}
-            style={{ color: "#0288D1", textDecoration: "underline" }}
-          >
-            View Bucket Naming Rules
-          </span>
-        )}
+        <span
+          onClick={() => {
+            toggleNamingRules();
+          }}
+          style={{ color: "#0288D1", textDecoration: "underline", cursor: "pointer", fontSize: "14px" }}
+        >
+          {showNamingRules ? "Hide" : "View"}
+          {" Bucket Naming Rules"}
+        </span>
         <Button
           variant="text"
           size="small"

[bexsoft]

LGTM

[bexsoft]

LGTM