Add HelpTips to Console (#3054)

Author: jinapurapu

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

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}>

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) => {

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]}

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

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}>

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,14 +220,41 @@ 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");
               }}
               selectorOptions={[
                 { 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}>

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>

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}>

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}>