From 429dfb4314fbdf7e5e8037afa0768ca6cadaff0d Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:38:55 -0700
Subject: [PATCH] Add HelpTips to Console (#3054)

---
 .../Account/AddServiceAccountScreen.tsx       |  23 +++-
 .../Console/Account/ServiceAccountPolicy.tsx  |  12 +-
 .../BucketDetails/AccessDetailsPanel.tsx      |  29 ++++-
 .../Buckets/BucketDetails/AccessRulePanel.tsx |  22 +++-
 .../Buckets/BucketDetails/AddAccessRule.tsx   |   9 +-
 .../Buckets/BucketDetails/AddEvent.tsx        |  12 +-
 .../BucketDetails/AddLifecycleModal.tsx       |  59 +++++++++-
 .../BucketDetails/BucketEventsPanel.tsx       |  20 +++-
 .../BucketDetails/BucketLifecyclePanel.tsx    |  20 +++-
 .../BucketDetails/BucketReplicationPanel.tsx  |  20 +++-
 .../BucketDetails/BucketSummaryPanel.tsx      |  68 ++++++++++-
 .../Buckets/BucketDetails/SetAccessPolicy.tsx |  12 +-
 .../BucketDetails/SetRetentionConfig.tsx      |  26 +++-
 .../SummaryItems/EditablePropertyItem.tsx     |  48 +++++---
 .../ListBuckets/AddBucket/AddBucket.tsx       | 111 ++++++++++++++++++
 .../AutocompleteWrapper.tsx                   |   9 +-
 .../CodeMirrorWrapper/CodeMirrorWrapper.tsx   |   4 +
 .../Console/Policies/AddPolicyScreen.tsx      |  10 ++
 .../Console/Policies/PolicyDetails.tsx        |  29 ++++-
 .../screens/Console/Policies/PolicyView.tsx   |  25 +++-
 .../Users/AddUserServiceAccountScreen.tsx     |  33 +++++-
 21 files changed, 556 insertions(+), 45 deletions(-)

diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
index 7429a52a7..a5fd6f661 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -28,6 +28,7 @@ import {
   InputBox,
   Switch,
   ServiceAccountIcon,
+  HelpTip,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -190,10 +191,24 @@ const AddServiceAccount = () => {
               {isRestrictedByPolicy && (
                 <Grid item xs={12}>
                   <Box>
-                    <PanelTitle>
-                      Current User Policy - edit the JSON to remove permissions
-                      for this Access Key
-                    </PanelTitle>
+                    <HelpTip
+                      content={
+                        <Fragment>
+                          <a
+                            target="blank"
+                            href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                          >
+                            Guide to access policy structure
+                          </a>
+                        </Fragment>
+                      }
+                      placement="right"
+                    >
+                      <PanelTitle>
+                        Current User Policy - edit the JSON to remove
+                        permissions for this Access Key
+                      </PanelTitle>
+                    </HelpTip>
                   </Box>
                   <Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
                     <CodeMirrorWrapper
diff --git a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
index e33558d0b..64b57ff70 100644
--- a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
+++ b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import { Button, ChangeAccessPolicyIcon, Grid } from "mds";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
@@ -98,6 +98,16 @@ const ServiceAccountPolicy = ({
                 setPolicyDefinition(value);
               }}
               editorHeight={"350px"}
+              helptip={
+                <Fragment>
+                  <a
+                    target="blank"
+                    href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                  >
+                    Guide to access policy structure
+                  </a>
+                </Fragment>
+              }
             />
           </Grid>
           <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
index 8f3468874..8ad156008 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import { DataTable, SectionTitle, Tabs } from "mds";
+import { DataTable, SectionTitle, Tabs, HelpTip } from "mds";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
 import {
@@ -145,7 +145,32 @@ const AccessDetails = () => {
 
   return (
     <Fragment>
-      <SectionTitle separator>Access Audit</SectionTitle>
+      <SectionTitle separator>
+        <HelpTip
+          content={
+            <Fragment>
+              Understand which{" "}
+              <a
+                target="blank"
+                href="https://min.io/docs/minio/linux/administration/identity-access-management/policy-based-access-control.html#"
+              >
+                Policies
+              </a>{" "}
+              and{" "}
+              <a
+                target="blank"
+                href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html"
+              >
+                Users
+              </a>{" "}
+              are authorized to access this Bucket.
+            </Fragment>
+          }
+          placement="right"
+        >
+          Access Audit
+        </HelpTip>
+      </SectionTitle>
       <Tabs
         currentTabOrPath={curTab}
         onTabClick={(newValue: string) => {
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index e156ef625..69cdac637 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { AddIcon, Button, DataTable, SectionTitle } from "mds";
+import { AddIcon, Button, DataTable, SectionTitle, HelpTip } from "mds";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { api } from "api";
@@ -194,7 +194,25 @@ const AccessRule = () => {
           </SecureComponent>
         }
       >
-        Anonymous Access
+        <HelpTip
+          content={
+            <Fragment>
+              Setting an{" "}
+              <a
+                href="https://min.io/docs/minio/linux/reference/minio-mc/mc-anonymous-set.html"
+                target="blank"
+              >
+                Anonymous
+              </a>{" "}
+              policy allows clients to access the Bucket or prefix contents and
+              perform actions consistent with the specified policy without
+              authentication.
+            </Fragment>
+          }
+          placement="right"
+        >
+          Anonymous Access
+        </HelpTip>
       </SectionTitle>
       <SecureComponent
         scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
index 0aba27e4c..cd164f075 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import {
   AddAccessRuleIcon,
@@ -115,6 +115,13 @@ const AddAccessRule = ({
           value={selectedAccess}
           options={accessOptions}
           disabled={false}
+          helpTip={
+            <Fragment>
+              Select the desired level of access available to unauthenticated
+              Users
+            </Fragment>
+          }
+          helpTipPlacement="right"
         />
         <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
           <Button
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
index 775dc4333..a7b5dbb39 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, Fragment } from "react";
 import { Button, DataTable, EventSubscriptionIcon, Grid, InputBox } from "mds";
 import { ErrorResponseHandler } from "../../../../common/types";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
@@ -170,6 +170,16 @@ const AddEvent = ({
                 label={"ARN"}
                 value={arn}
                 options={arnValues || []}
+                helptip={
+                  <Fragment>
+                    <a
+                      target="blank"
+                      href="https://docs.aws.amazon.com/IAM/latest/UserGuide/reference-arns.html"
+                    >
+                      Amazon Resource Name
+                    </a>
+                  </Fragment>
+                }
               />
             </Grid>
             <Grid item xs={12} sx={formFieldStyles.formFieldRow}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
index 83d031435..deb9e1c37 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+
 import get from "lodash/get";
 import {
   Button,
@@ -44,6 +45,7 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import { IAM_PAGES } from "common/SecureComponent/permissions";
 
 interface IReplicationModal {
   open: boolean;
@@ -218,7 +220,7 @@ const AddLifecycleModal = ({
               currentValue={ilmType}
               id="ilm_type"
               name="ilm_type"
-              label="Type of lifecycle"
+              label="Type of Lifecycle"
               onChange={(e) => {
                 setIlmType(e.target.value as "expiry" | "transition");
               }}
@@ -226,6 +228,33 @@ const AddLifecycleModal = ({
                 { value: "expiry", label: "Expiry" },
                 { value: "transition", label: "Transition" },
               ]}
+              helpTip={
+                <Fragment>
+                  Select{" "}
+                  <a
+                    target="blank"
+                    href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/create-lifecycle-management-expiration-rule.html"
+                  >
+                    Expiry
+                  </a>{" "}
+                  to delete Objects per this rule. Select{" "}
+                  <a
+                    target="blank"
+                    href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/transition-objects-to-minio.html"
+                  >
+                    Transition
+                  </a>{" "}
+                  to move Objects to a remote storage{" "}
+                  <a
+                    target="blank"
+                    href="https://min.io/docs/minio/windows/administration/object-management/transition-objects-to-minio.html#configure-the-remote-storage-tier"
+                  >
+                    Tier
+                  </a>{" "}
+                  per this rule.
+                </Fragment>
+              }
+              helpTipPlacement="right"
             />
             {versioningInfo?.status === "Enabled" && (
               <Select
@@ -240,6 +269,20 @@ const AddLifecycleModal = ({
                   { value: "current", label: "Current Version" },
                   { value: "noncurrent", label: "Non-Current Version" },
                 ]}
+                helpTip={
+                  <Fragment>
+                    Select whether to apply the rule to current or non-current
+                    Object
+                    <a
+                      target="blank"
+                      href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/create-lifecycle-management-expiration-rule.html#expire-versioned-objects"
+                    >
+                      {" "}
+                      Versions
+                    </a>
+                  </Fragment>
+                }
+                helpTipPlacement="right"
               />
             )}
 
@@ -276,6 +319,20 @@ const AddLifecycleModal = ({
                   setStorageClass(value as string);
                 }}
                 options={tiersList}
+                helpTip={
+                  <Fragment>
+                    Configure a{" "}
+                    <a
+                      href={IAM_PAGES.TIERS_ADD}
+                      color="secondary"
+                      style={{ textDecoration: "underline" }}
+                    >
+                      remote tier
+                    </a>{" "}
+                    to receive transitioned Objects
+                  </Fragment>
+                }
+                helpTipPlacement="right"
               />
             )}
             <Grid item xs={12} sx={formFieldRowFilter}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
index 13e92c409..f88f9fd56 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -26,6 +26,7 @@ import {
   DataTable,
   Grid,
   SectionTitle,
+  HelpTip,
 } from "mds";
 import { api } from "api";
 import { NotificationConfig } from "api/consoleApi";
@@ -176,7 +177,24 @@ const BucketEventsPanel = () => {
           </SecureComponent>
         }
       >
-        Events
+        <HelpTip
+          content={
+            <Fragment>
+              MinIO{" "}
+              <a
+                target="blank"
+                href="https://min.io/docs/minio/kubernetes/upstream/administration/monitoring.html"
+              >
+                bucket notifications
+              </a>{" "}
+              allow administrators to send notifications to supported external
+              services on certain object or bucket events.
+            </Fragment>
+          }
+          placement="right"
+        >
+          Events
+        </HelpTip>
       </SectionTitle>
 
       <Grid container>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
index e836f0a17..a7652b924 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -24,6 +24,7 @@ import {
   HelpBox,
   SectionTitle,
   TiersIcon,
+  HelpTip,
 } from "mds";
 import { useSelector } from "react-redux";
 import { api } from "api";
@@ -292,7 +293,24 @@ const BucketLifecyclePanel = () => {
           </SecureComponent>
         }
       >
-        Lifecycle Rules
+        <HelpTip
+          content={
+            <Fragment>
+              MinIO derives it’s behavior and syntax from{" "}
+              <a
+                target="blank"
+                href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-lifecycle-mgmt.html"
+              >
+                S3 lifecycle
+              </a>{" "}
+              for compatibility in migrating workloads and lifecycle rules from
+              S3 to MinIO.
+            </Fragment>
+          }
+          placement="right"
+        >
+          Lifecycle Rules
+        </HelpTip>
       </SectionTitle>
       <Grid container>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
index e026d43a5..6c8e5db17 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -27,6 +27,7 @@ import {
   HelpBox,
   SectionTitle,
   TrashIcon,
+  HelpTip,
 } from "mds";
 import api from "../../../../common/api";
 import {
@@ -303,7 +304,24 @@ const BucketReplicationPanel = () => {
           </Box>
         }
       >
-        Replication
+        <HelpTip
+          content={
+            <Fragment>
+              MinIO{" "}
+              <a
+                target="blank"
+                href="https://min.io/docs/minio/kubernetes/upstream/administration/bucket-replication.html"
+              >
+                server-side bucket replication
+              </a>{" "}
+              is an automatic bucket-level configuration that synchronizes
+              objects between a source and destination bucket.
+            </Fragment>
+          }
+          placement="right"
+        >
+          Replication
+        </HelpTip>
       </SectionTitle>
       <Grid container>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
index f18e05ca7..0c8baa02c 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+
 import get from "lodash/get";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -116,7 +117,6 @@ const BucketSummary = () => {
     useState<boolean>(false);
   const [enableVersioningOpen, setEnableVersioningOpen] =
     useState<boolean>(false);
-
   useEffect(() => {
     dispatch(setHelpName("bucket_detail_summary"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -441,6 +441,26 @@ const BucketSummary = () => {
                       setAccessPolicyScreenOpen(true);
                     }}
                     isLoading={bucketLoading}
+                    helpTip={
+                      <Fragment>
+                        <strong>Private</strong> policy limits access to
+                        credentialled accounts with appropriate permissions
+                        <br />
+                        <strong>Public</strong> policy anyone will be able to
+                        upload, download and delete files from this Bucket once
+                        logged in
+                        <br />
+                        <strong>Custom</strong> policy can be written to define
+                        which accounts are authorized to access this Bucket
+                        <br />
+                        <br />
+                        To allow Bucket access without credentials, use the{" "}
+                        <a href={`/buckets/${bucketName}/admin/prefix`}>
+                          Anonymous
+                        </a>{" "}
+                        setting
+                      </Fragment>
+                    }
                   />
                 </SecureComponent>
 
@@ -463,6 +483,26 @@ const BucketSummary = () => {
                       setEnableEncryptionScreenOpen(true);
                     }}
                     isLoading={loadingEncryption}
+                    helpTip={
+                      <Fragment>
+                        MinIO supports enabling automatic{" "}
+                        <a
+                          href="https://min.io/docs/minio/kubernetes/upstream/administration/server-side-encryption/server-side-encryption-sse-kms.html"
+                          target="blank"
+                        >
+                          SSE-KMS
+                        </a>{" "}
+                        and{" "}
+                        <a
+                          href="https://min.io/docs/minio/kubernetes/upstream/administration/server-side-encryption/server-side-encryption-sse-s3.html"
+                          target="blank"
+                        >
+                          SSE-S3
+                        </a>{" "}
+                        encryption of all objects written to a bucket using a
+                        specific External Key (EK) stored on the external KMS.
+                      </Fragment>
+                    }
                   />
                 </SecureComponent>
 
@@ -526,6 +566,19 @@ const BucketSummary = () => {
                   value={quotaEnabled ? "Enabled" : "Disabled"}
                   onEdit={setBucketQuota}
                   isLoading={loadingQuota}
+                  helpTip={
+                    <Fragment>
+                      Setting a{" "}
+                      <a
+                        href="https://min.io/docs/minio/linux/reference/minio-mc/mc-quota-set.html"
+                        target="blank"
+                      >
+                        quota
+                      </a>{" "}
+                      assigns a hard limit to a bucket beyond which MinIO does
+                      not allow writes.
+                    </Fragment>
+                  }
                 />
               </Box>
               <Box
@@ -618,6 +671,19 @@ const BucketSummary = () => {
                       setRetentionConfigOpen(true);
                     }}
                     isLoading={loadingRetention}
+                    helpTip={
+                      <Fragment>
+                        MinIO{" "}
+                        <a
+                          target="blank"
+                          href="https://min.io/docs/minio/macos/administration/object-management.html#object-retention"
+                        >
+                          Object Locking
+                        </a>{" "}
+                        enforces Write-Once Read-Many (WORM) immutability to
+                        protect versioned objects from deletion.
+                      </Fragment>
+                    }
                   />
 
                   <ValuePair
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
index 6fccec6bc..53af7bc8b 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import { api } from "api";
 import { BucketAccess } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
@@ -135,6 +135,16 @@ const SetAccessPolicy = ({
                   setPolicyDefinition(value);
                 }}
                 editorHeight={"300px"}
+                helptip={
+                  <Fragment>
+                    <a
+                      target="blank"
+                      href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                    >
+                      Guide to access policy structure
+                    </a>
+                  </Fragment>
+                }
               />
             </Grid>
           )}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
index 250d95338..1483aa4a4 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import {
   Button,
   Loader,
@@ -137,6 +137,30 @@ const SetRetentionConfig = ({
                 { value: "compliance", label: "Compliance" },
                 { value: "governance", label: "Governance" },
               ]}
+              helpTip={
+                <Fragment>
+                  {" "}
+                  <a
+                    href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#minio-object-locking-compliance"
+                    target="blank"
+                  >
+                    Compliance
+                  </a>{" "}
+                  lock protects Objects from write operations by all users,
+                  including the MinIO root user.
+                  <br />
+                  <br />
+                  <a
+                    href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#minio-object-locking-governance"
+                    target="blank"
+                  >
+                    Governance
+                  </a>{" "}
+                  lock protects Objects from write operations by non-privileged
+                  users.
+                </Fragment>
+              }
+              helpTipPlacement="right"
             />
             <RadioGroup
               currentValue={retentionUnit as string}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
index 477869913..c234c4b28 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { ActionLink, Box, ValuePair } from "mds";
+import { ActionLink, Box, HelpTip, ValuePair } from "mds";
 import { SecureComponent } from "../../../../../common/SecureComponent";
 
 import EditActionButton from "./EditActionButton";
@@ -29,6 +29,7 @@ type EditablePropertyItemProps = {
   onEdit: () => void;
   secureCmpProps?: Record<any, any>;
   disabled?: boolean;
+  helpTip?: any;
 };
 
 const SecureAction = ({
@@ -63,6 +64,7 @@ const EditablePropertyItem = ({
   value = null,
   onEdit,
   disabled = false,
+  helpTip,
 }: EditablePropertyItemProps) => {
   return (
     <Box
@@ -76,19 +78,37 @@ const EditablePropertyItem = ({
       <ValuePair
         label={property}
         value={
-          <SecureAction
-            resourceName={resourceName}
-            iamScopes={iamScopes}
-            secureCmpProps={secureCmpProps}
-          >
-            <ActionLink
-              isLoading={isLoading}
-              onClick={onEdit}
-              label={value}
-              sx={{ fontWeight: "bold" }}
-              disabled={disabled}
-            />
-          </SecureAction>
+          helpTip ? (
+            <SecureAction
+              resourceName={resourceName}
+              iamScopes={iamScopes}
+              secureCmpProps={secureCmpProps}
+            >
+              <HelpTip placement="left" content={helpTip}>
+                <ActionLink
+                  isLoading={isLoading}
+                  onClick={onEdit}
+                  label={value}
+                  sx={{ fontWeight: "bold" }}
+                  disabled={disabled}
+                />
+              </HelpTip>
+            </SecureAction>
+          ) : (
+            <SecureAction
+              resourceName={resourceName}
+              iamScopes={iamScopes}
+              secureCmpProps={secureCmpProps}
+            >
+              <ActionLink
+                isLoading={isLoading}
+                onClick={onEdit}
+                label={value}
+                sx={{ fontWeight: "bold" }}
+                disabled={disabled}
+              />
+            </SecureAction>
+          )
         }
       />
       <SecureAction
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
index eb2a8a1ae..82ebb2a00 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -350,6 +350,35 @@ const AddBucket = () => {
                           "Versioning",
                         )
                   }
+                  helpTip={
+                    <Fragment>
+                      MinIO supports keeping multiple{" "}
+                      <a
+                        href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/object-versioning.html#minio-bucket-versioning"
+                        target="blank"
+                      >
+                        “versions”
+                      </a>{" "}
+                      of an object in a single bucket.
+                      <br />
+                      Versioning is required to enable{" "}
+                      <a
+                        href="https://min.io/docs/minio/macos/administration/object-management.html#object-retention"
+                        target="blank"
+                      >
+                        Object Locking
+                      </a>{" "}
+                      and{" "}
+                      <a
+                        href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#object-retention-modes"
+                        target="blank"
+                      >
+                        Retention
+                      </a>
+                      .
+                    </Fragment>
+                  }
+                  helpTipPlacement="right"
                 />
                 {versioningEnabled && distributedSetup && !lockingEnabled && (
                   <Fragment>
@@ -361,6 +390,20 @@ const AddBucket = () => {
                         dispatch(setExcludeFolders(e.target.checked));
                       }}
                       indicatorLabels={["Enabled", "Disabled"]}
+                      helpTip={
+                        <Fragment>
+                          You can choose to{" "}
+                          <a href="https://min.io/docs/minio/windows/administration/object-management/object-versioning.html#exclude-folders-from-versioning">
+                            exclude folders and prefixes
+                          </a>{" "}
+                          from versioning if Object Locking is not enabled.
+                          <br />
+                          MinIO requires versioning to support replication.
+                          Objects in excluded prefixes do not replicate to any
+                          peer site or remote site.
+                        </Fragment>
+                      }
+                      helpTipPlacement="right"
                     />
                     <CSVMultiSelector
                       elements={excludedPrefixes}
@@ -411,6 +454,19 @@ const AddBucket = () => {
                           "Locking",
                         )
                   }
+                  helpTip={
+                    <Fragment>
+                      You can only enable{" "}
+                      <a
+                        href="https://min.io/docs/minio/macos/administration/object-management.html#object-retention"
+                        target="blank"
+                      >
+                        Object Locking
+                      </a>{" "}
+                      when first creating a bucket.
+                    </Fragment>
+                  }
+                  helpTipPlacement="right"
                 />
                 <Switch
                   value="bucket_quota"
@@ -422,6 +478,20 @@ const AddBucket = () => {
                   }}
                   label={"Quota"}
                   disabled={!distributedSetup}
+                  helpTip={
+                    <Fragment>
+                      Setting a{" "}
+                      <a
+                        href="https://min.io/docs/minio/linux/reference/minio-mc/mc-quota-set.html"
+                        target="blank"
+                      >
+                        quota
+                      </a>{" "}
+                      assigns a hard limit to a bucket beyond which MinIO does
+                      not allow writes.
+                    </Fragment>
+                  }
+                  helpTipPlacement="right"
                 />
                 {quotaEnabled && distributedSetup && (
                   <Fragment>
@@ -465,6 +535,23 @@ const AddBucket = () => {
                       dispatch(setRetention(event.target.checked));
                     }}
                     label={"Retention"}
+                    helpTip={
+                      <Fragment>
+                        MinIO supports setting both{" "}
+                        <a
+                          href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#configure-bucket-default-object-retention"
+                          target="blank"
+                        >
+                          bucket-default
+                        </a>{" "}
+                        and per-object retention rules.
+                        <br />
+                        <br /> For per-object retention settings, defer to the
+                        documentation for the PUT operation used by your
+                        preferred SDK.
+                      </Fragment>
+                    }
+                    helpTipPlacement="right"
                   />
                 )}
                 {retentionEnabled && distributedSetup && (
@@ -485,6 +572,30 @@ const AddBucket = () => {
                         { value: "compliance", label: "Compliance" },
                         { value: "governance", label: "Governance" },
                       ]}
+                      helpTip={
+                        <Fragment>
+                          {" "}
+                          <a
+                            href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#minio-object-locking-compliance"
+                            target="blank"
+                          >
+                            Compliance
+                          </a>{" "}
+                          lock protects Objects from write operations by all
+                          users, including the MinIO root user.
+                          <br />
+                          <br />
+                          <a
+                            href="https://min.io/docs/minio/macos/administration/object-management/object-retention.html#minio-object-locking-governance"
+                            target="blank"
+                          >
+                            Governance
+                          </a>{" "}
+                          lock protects Objects from write operations by
+                          non-privileged users.
+                        </Fragment>
+                      }
+                      helpTipPlacement="right"
                     />
                     <InputBox
                       type="number"
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper.tsx
index 1e3753d3c..82347027e 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper.tsx
@@ -33,7 +33,7 @@ import {
   inputFieldStyles,
   tooltipHelper,
 } from "../common/styleLibrary";
-import { HelpIcon } from "mds";
+import { HelpIcon, HelpTip } from "mds";
 
 interface selectorTypes {
   label: string;
@@ -50,6 +50,7 @@ interface SelectProps {
   onChange: (returnedValue: string) => void;
   disabled?: boolean;
   classes: any;
+  helptip?: any;
 }
 
 const styles = (theme: Theme) =>
@@ -85,6 +86,7 @@ const AutocompleteWrapper = ({
   tooltip = "",
   value,
   disabled = false,
+  helptip,
 }: SelectProps) => {
   const [internalValue, setInternalValue] = useState<selectorTypes>(options[0]);
 
@@ -100,7 +102,10 @@ const AutocompleteWrapper = ({
       <Grid item xs={12} className={classes.fieldContainer}>
         {label !== "" && (
           <InputLabel htmlFor={id} className={classes.inputLabel}>
-            <span>{label}</span>
+            <HelpTip content={helptip} placement="right">
+              {" "}
+              <span>{label}</span>
+            </HelpTip>
             {tooltip !== "" && (
               <div className={classes.tooltipContainer}>
                 <Tooltip title={tooltip} placement="top-start">
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
index 4dc8093f0..88fdd7f63 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
@@ -26,6 +26,7 @@ interface ICodeWrapper {
   tooltip?: string;
   onChange: (value: string) => any;
   editorHeight?: string | number;
+  helptip?: any;
 }
 
 const CodeMirrorWrapper = ({
@@ -35,6 +36,7 @@ const CodeMirrorWrapper = ({
   mode = "json",
   onChange,
   editorHeight = 250,
+  helptip,
 }: ICodeWrapper) => {
   return (
     <CodeEditor
@@ -59,6 +61,8 @@ const CodeMirrorWrapper = ({
           </TooltipWrapper>
         </Fragment>
       }
+      helpTip={helptip}
+      helpTipPlacement="right"
     />
   );
 };
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
index 3d334ccc9..c988ed335 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
@@ -140,6 +140,16 @@ const AddPolicyScreen = () => {
                       setPolicyDefinition(value);
                     }}
                     editorHeight={"350px"}
+                    helptip={
+                      <Fragment>
+                        <a
+                          target="blank"
+                          href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                        >
+                          Guide to access policy structure
+                        </a>
+                      </Fragment>
+                    }
                   />
                 </Grid>
                 <Grid item xs={12} sx={{ textAlign: "right" }}>
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 18d4b7a11..9f6d120e5 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -31,6 +31,7 @@ import {
   SectionTitle,
   Tabs,
   TrashIcon,
+  HelpTip,
 } from "mds";
 import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 
@@ -531,9 +532,21 @@ const PolicyDetails = () => {
                         dispatch(setHelpName("policy_details_policy"))
                       }
                     >
-                      <SectionTitle separator sx={{ marginBottom: 15 }}>
-                        Raw Policy
-                      </SectionTitle>
+                      <HelpTip
+                        content={
+                          <Fragment>
+                            <a
+                              target="blank"
+                              href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                            >
+                              Guide to access policy structure
+                            </a>
+                          </Fragment>
+                        }
+                        placement="right"
+                      >
+                        <SectionTitle>Raw Policy</SectionTitle>
+                      </HelpTip>
                       <form
                         noValidate
                         autoComplete="off"
@@ -551,6 +564,16 @@ const PolicyDetails = () => {
                                 }
                               }}
                               editorHeight={"350px"}
+                              helptip={
+                                <Fragment>
+                                  <a
+                                    target="blank"
+                                    href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                                  >
+                                    Guide to access policy structure
+                                  </a>
+                                </Fragment>
+                              }
                             />
                           </Grid>
                           <Grid
diff --git a/portal-ui/src/screens/Console/Policies/PolicyView.tsx b/portal-ui/src/screens/Console/Policies/PolicyView.tsx
index 24f980697..aa832ba5c 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyView.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyView.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { DisabledIcon, EnabledIcon, Box, Grid } from "mds";
+import { DisabledIcon, EnabledIcon, Box, Grid, HelpTip } from "mds";
 import SearchBox from "../Common/SearchBox";
 import { STATUS_COLORS } from "../Dashboard/BasicDashboard/Utils";
 import { IAMStatement } from "./types";
@@ -53,9 +53,26 @@ const PolicyView = ({
     <Grid container>
       <Grid item xs={12}>
         <Grid container sx={{ display: "flex", alignItems: "center" }}>
-          <Grid item xs={12} sm={6} sx={{ fontWeight: "bold" }}>
-            Statements
-          </Grid>
+          <HelpTip
+            content={
+              <Fragment>
+                Define which actions are permitted on a specified resource.
+                Learn more about{" "}
+                <a
+                  target="blank"
+                  href="https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements_condition.html"
+                >
+                  IAM conditional statements
+                </a>
+                .
+              </Fragment>
+            }
+            placement="right"
+          >
+            <Grid item xs={12} sm={6} sx={{ fontWeight: "bold" }}>
+              Statements
+            </Grid>
+          </HelpTip>
           <Grid
             item
             xs={12}
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
index 467b7f6a9..0cc4d4dbc 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
@@ -28,6 +28,7 @@ import {
   ServiceAccountCredentialsIcon,
   ServiceAccountIcon,
   Switch,
+  HelpTip,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -213,10 +214,24 @@ const AddServiceAccount = () => {
               {isRestrictedByPolicy && (
                 <Grid item xs={12}>
                   <Box>
-                    <PanelTitle>
-                      Current User Policy - edit the JSON to remove permissions
-                      for this Access Key
-                    </PanelTitle>
+                    <HelpTip
+                      content={
+                        <Fragment>
+                          <a
+                            target="blank"
+                            href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                          >
+                            Guide to access policy structure
+                          </a>
+                        </Fragment>
+                      }
+                      placement="right"
+                    >
+                      <PanelTitle>
+                        Current User Policy - edit the JSON to remove
+                        permissions for this Access Key
+                      </PanelTitle>
+                    </HelpTip>
                   </Box>
                   <Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
                     <CodeMirrorWrapper
@@ -225,6 +240,16 @@ const AddServiceAccount = () => {
                         setPolicyJSON(value);
                       }}
                       editorHeight={"350px"}
+                      helptip={
+                        <Fragment>
+                          <a
+                            target="blank"
+                            href="https://min.io/docs/minio/kubernetes/upstream/administration/identity-access-management/policy-based-access-control.html#policy-document-structure"
+                          >
+                            Guide to access policy structure
+                          </a>
+                        </Fragment>
+                      }
                     />
                   </Grid>
                 </Grid>