From 31871f54d4c87d83e56ccfd3d1293756661f5112 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Sat, 30 Apr 2022 12:00:58 -0700
Subject: [PATCH] Update HelpBox for Create Bucket. Add spacing. (#1934)

---
 .../Console/Buckets/ListBuckets/AddBucket.tsx | 94 ++++++++-----------
 .../src/screens/Console/Buckets/reducers.ts   |  4 +-
 2 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 25553a2f6..d04db4ed4 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -52,13 +52,8 @@ import { setErrorSnackMessage } from "../../../../actions";
 import PageLayout from "../../Common/Layout/PageLayout";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import FormLayout from "../../Common/FormLayout";
-import { SecureComponent } from "../../../../common/SecureComponent";
-import {
-  CONSOLE_UI_RESOURCE,
-  IAM_SCOPES,
-} from "../../../../common/SecureComponent/permissions";
-import AButton from "../../Common/AButton/AButton";
 import HelpBox from "../../../../common/HelpBox";
+import SectionTitle from "../../Common/SectionTitle";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -87,7 +82,6 @@ const styles = (theme: Theme) =>
       fontWeight: "bold",
       color: "#000000",
       fontSize: 20,
-      paddingBottom: 8,
     },
     ...containerForHeader(theme.spacing(4)),
   });
@@ -215,7 +209,7 @@ const AddBucket = ({
     addBucketRetention(false);
     addBucketRetentionMode("compliance");
     addBucketRetentionUnit("days");
-    addBucketRetentionValidity(1);
+    addBucketRetentionValidity(180);
   };
 
   useEffect(() => {
@@ -235,7 +229,7 @@ const AddBucket = ({
       addBucketRetention(false);
       addBucketRetentionMode("compliance");
       addBucketRetentionUnit("days");
-      addBucketRetentionValidity(1);
+      addBucketRetentionValidity(180);
     }
 
     if (retentionEnabled) {
@@ -287,21 +281,22 @@ const AddBucket = ({
                   MinIO uses buckets to organize objects. A bucket is similar to
                   a folder or directory in a filesystem, where each bucket can
                   hold an arbitrary number of objects.
-                  <SecureComponent
-                    scopes={[IAM_SCOPES.S3_CREATE_BUCKET]}
-                    resource={CONSOLE_UI_RESOURCE}
-                  >
-                    <br />
-                    <br />
-                    To get started,&nbsp;
-                    <AButton
-                      onClick={() => {
-                        history.push("/add-bucket");
-                      }}
-                    >
-                      Create a Bucket.
-                    </AButton>
-                  </SecureComponent>
+                  <br />
+                  <br />
+                  <b>Versioning</b> allows to keep multiple versions of the same
+                  object under the same key.
+                  <br />
+                  <br />
+                  <b>Object Locking</b> prevents objects from being deleted.
+                  Required to support retention and legal hold. Can only be
+                  enabled at bucket creation.
+                  <br />
+                  <br />
+                  <b>Quota</b> limits the amount of data in the bucket.
+                  <br />
+                  <br />
+                  <b>Retention</b> imposes rules to prevent object deletion for
+                  a period of time.
                 </Fragment>
               }
             />
@@ -314,7 +309,7 @@ const AddBucket = ({
               addRecord(e);
             }}
           >
-            <Grid item xs={12} container>
+            <Grid container marginTop={1} spacing={2}>
               <Grid item xs={12}>
                 <InputBoxWrapper
                   id="bucket-name"
@@ -328,8 +323,7 @@ const AddBucket = ({
                 />
               </Grid>
               <Grid item xs={12}>
-                <div className={classes.h6title}>Features</div>
-                <br />
+                <SectionTitle>Features</SectionTitle>
                 {!distributedSetup && (
                   <Fragment>
                     <div className={classes.error}>
@@ -360,9 +354,6 @@ const AddBucket = ({
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                     addBucketVersioned(event.target.checked);
                   }}
-                  description={
-                    "Allows to keep multiple versions of the same object under the same key."
-                  }
                   label={"Versioning"}
                   disabled={!distributedSetup || lockingEnabled}
                 />
@@ -381,9 +372,6 @@ const AddBucket = ({
                     }
                   }}
                   label={"Object Locking"}
-                  description={
-                    "Required to support retention and legal hold. Can only be enabled at bucket creation."
-                  }
                 />
               </Grid>
 
@@ -397,7 +385,6 @@ const AddBucket = ({
                     addBucketQuota(event.target.checked);
                   }}
                   label={"Quota"}
-                  description={"Limit the amount of data in the bucket."}
                   disabled={!distributedSetup}
                 />
               </Grid>
@@ -413,7 +400,7 @@ const AddBucket = ({
                           addBucketQuotaSize(e.target.value);
                         }
                       }}
-                      label="Quota"
+                      label="Capacity"
                       value={quotaSize}
                       required
                       min="1"
@@ -444,9 +431,6 @@ const AddBucket = ({
                       addBucketRetention(event.target.checked);
                     }}
                     label={"Retention"}
-                    description={
-                      "Impose rules to prevent object deletion for a period of time."
-                    }
                   />
                 </Grid>
               )}
@@ -457,7 +441,7 @@ const AddBucket = ({
                       currentSelection={retentionMode}
                       id="retention_mode"
                       name="retention_mode"
-                      label="Retention Mode"
+                      label="Mode"
                       onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
                         addBucketRetentionMode(e.target.value as string);
                       }}
@@ -467,21 +451,6 @@ const AddBucket = ({
                       ]}
                     />
                   </Grid>
-                  <Grid item xs={12}>
-                    <RadioGroupSelector
-                      currentSelection={retentionUnit}
-                      id="retention_unit"
-                      name="retention_unit"
-                      label="Retention Unit"
-                      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                        addBucketRetentionUnit(e.target.value as string);
-                      }}
-                      selectorOptions={[
-                        { value: "days", label: "Days" },
-                        { value: "years", label: "Years" },
-                      ]}
-                    />
-                  </Grid>
                   <Grid item xs={12}>
                     <InputBoxWrapper
                       type="number"
@@ -490,10 +459,23 @@ const AddBucket = ({
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         addBucketRetentionValidity(e.target.valueAsNumber);
                       }}
-                      label="Retention Validity"
+                      label="Validity"
                       value={String(retentionValidity)}
                       required
-                      min="1"
+                      overlayObject={
+                        <InputUnitMenu
+                          id={"retention_unit"}
+                          onUnitChange={(newValue) => {
+                            addBucketRetentionUnit(newValue);
+                          }}
+                          unitSelected={retentionUnit}
+                          unitsList={[
+                            { value: "days", label: "Days" },
+                            { value: "years", label: "Years" },
+                          ]}
+                          disabled={false}
+                        />
+                      }
                     />
                   </Grid>
                 </React.Fragment>
diff --git a/portal-ui/src/screens/Console/Buckets/reducers.ts b/portal-ui/src/screens/Console/Buckets/reducers.ts
index 0ecfcc69b..5fee9fe11 100644
--- a/portal-ui/src/screens/Console/Buckets/reducers.ts
+++ b/portal-ui/src/screens/Console/Buckets/reducers.ts
@@ -69,7 +69,7 @@ const initialState: BucketsState = {
   addBucketRetentionEnabled: false,
   addBucketRetentionMode: "compliance",
   addBucketRetentionUnit: "days",
-  addBucketRetentionValidity: 1,
+  addBucketRetentionValidity: 180,
   bucketDetails: {
     selectedTab: "summary",
     loadingBucket: false,
@@ -163,7 +163,7 @@ export function bucketsReducer(
         addBucketRetentionEnabled: false,
         addBucketRetentionMode: "compliance",
         addBucketRetentionUnit: "days",
-        addBucketRetentionValidity: 1,
+        addBucketRetentionValidity: 180,
       };
     case BUCKET_DETAILS_LOADING:
       return {