Console help menu (#2804)

Authored-by: Jillian Inapurapu <jillii@Jillians-MBP.attlocal.net>

Author: jinapurapu

portal-ui/package.json

@@ -26,6 +26,7 @@
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.3",
     "react-grid-layout": "^1.2.0",
+    "react-markdown": "8.0.7",
     "react-redux": "^8.0.7",
     "react-router-dom": "6.11.2",
     "react-virtualized": "^9.22.5",

portal-ui/src/common/MoreLink.tsx

@@ -0,0 +1,75 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { ArrowIcon } from "mds";
+
+const MoreLink = ({
+  LeadingIcon,
+  text,
+  link,
+  color,
+}: {
+  LeadingIcon?: React.FunctionComponent;
+  text: string;
+  link: string;
+  color: string;
+}) => {
+  return (
+    <a
+      style={{
+        color: color,
+        font: "normal normal bold 12px/55px Inter",
+        display: "block",
+        textDecoration: "none",
+      }}
+      href={link}
+      target={"_blank"}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          height: 20,
+          gap: 2,
+        }}
+      >
+        {LeadingIcon && (
+          <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
+            {/*@ts-ignore*/}
+            <LeadingIcon style={{ height: 16, width: 16 }} />
+          </div>
+        )}
+        <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
+          {text}
+        </div>
+        <div
+          style={{
+            flexGrow: 0,
+            flexShrink: 1,
+            lineHeight: "12px",
+            marginTop: 2,
+          }}
+        >
+          <ArrowIcon style={{ width: 12 }} />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default MoreLink;

portal-ui/src/screens/Console/Account/Account.tsx

@@ -47,11 +47,16 @@ import { SecureComponent } from "../../../common/SecureComponent";
 import { selectSAs } from "../Configurations/utils";
 import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
 import ServiceAccountPolicy from "./ServiceAccountPolicy";
-import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
+import {
+  setErrorSnackMessage,
+  setHelpName,
+  setSnackBarMessage,
+} from "../../../systemSlice";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
 
 const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount"))
@@ -82,6 +87,11 @@ const Account = () => {
     fetchRecords();
   }, []);
 
+  useEffect(() => {
+    dispatch(setHelpName("accessKeys"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loading) {
       api
@@ -179,13 +189,12 @@ const Account = () => {
           closeModalAndRefresh={closePolicyModal}
         />
       )}
-      {changePasswordModalOpen && (
-        <ChangePasswordModal
-          open={changePasswordModalOpen}
-          closeModal={() => setChangePasswordModalOpen(false)}
-        />
-      )}
-      <PageHeaderWrapper label="Access Keys" />
+      <ChangePasswordModal
+        open={changePasswordModalOpen}
+        closeModal={() => setChangePasswordModalOpen(false)}
+      />
+      <PageHeaderWrapper label="Access Keys" actions={<HelpMenu />} />
+
       <PageLayout>
         <Grid container>
           <Grid item xs={12} sx={{ ...actionsTray.actionsTray }}>

portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx

@@ -41,10 +41,11 @@ import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
 
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
 
-import { setErrorSnackMessage } from "../../../systemSlice";
+import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { getRandomString } from "../../../common/utils";
+import HelpMenu from "../HelpMenu";
 
 const AddServiceAccount = () => {
   const dispatch = useAppDispatch();
@@ -59,6 +60,11 @@ const AddServiceAccount = () => {
     useState<NewServiceAccount | null>(null);
   const [policyJSON, setPolicyJSON] = useState<string>("");
 
+  useEffect(() => {
+    dispatch(setHelpName("add_service_account"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (addSending) {
       api
@@ -128,6 +134,7 @@ const AddServiceAccount = () => {
               onClick={() => navigate(IAM_PAGES.ACCOUNT)}
             />
           }
+          actions={<HelpMenu />}
         />
         <PageLayout>
           <FormLayout

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx

@@ -37,7 +37,7 @@ import {
   SecureComponent,
 } from "../../../../common/SecureComponent";
 import { encodeURLString } from "../../../../common/utils";
-import { setErrorSnackMessage } from "../../../../systemSlice";
+import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import { Policy } from "../../../../api/consoleApi";
@@ -133,6 +133,11 @@ const AccessDetails = () => {
     }
   }, [loadingUsers, dispatch, bucketName, displayUsersList]);
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_detail_access"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loadingPolicies) {
       if (displayPoliciesList) {

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx

@@ -38,7 +38,7 @@ import {
 } from "../../../../common/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
-import { setErrorSnackMessage } from "../../../../systemSlice";
+import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
@@ -130,6 +130,11 @@ const AccessRule = () => {
     },
   ];
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_detail_prefix"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loadingAccessRules) {
       if (displayAccessRules) {

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx

@@ -67,6 +67,7 @@ import {
   selDistSet,
   selSiteRep,
   setErrorSnackMessage,
+  setHelpName,
 } from "../../../../systemSlice";
 import {
   selBucketDetailsInfo,
@@ -77,6 +78,7 @@ import {
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../../HelpMenu";
 
 const DeleteBucket = withSuspense(
   React.lazy(() => import("../ListBuckets/DeleteBucket"))
@@ -142,6 +144,11 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
     setActiveTab(selTab);
   }, [selTab]);
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_details"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (!iniLoad) {
       dispatch(setBucketDetailsLoad(true));
@@ -208,31 +215,36 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
           <BackLink label={"Buckets"} onClick={() => navigate("/buckets")} />
         }
         actions={
-          <TooltipWrapper
-            tooltip={
-              canBrowse
-                ? "Browse Bucket"
-                : permissionTooltipHelper(
-                    IAM_PERMISSIONS[IAM_ROLES.BUCKET_VIEWER],
-                    "browsing this bucket"
-                  )
-            }
-          >
-            <Button
-              id={"switch-browse-view"}
-              aria-label="Browse Bucket"
-              onClick={() => {
-                navigate(`/browser/${bucketName}`);
-              }}
-              icon={
-                <FolderIcon style={{ width: 20, height: 20, marginTop: -3 }} />
+          <Fragment>
+            <TooltipWrapper
+              tooltip={
+                canBrowse
+                  ? "Browse Bucket"
+                  : permissionTooltipHelper(
+                      IAM_PERMISSIONS[IAM_ROLES.BUCKET_VIEWER],
+                      "browsing this bucket"
+                    )
               }
-              style={{
-                padding: "0 10px",
-              }}
-              disabled={!canBrowse}
-            />
-          </TooltipWrapper>
+            >
+              <Button
+                id={"switch-browse-view"}
+                aria-label="Browse Bucket"
+                onClick={() => {
+                  navigate(`/browser/${bucketName}`);
+                }}
+                icon={
+                  <FolderIcon
+                    style={{ width: 20, height: 20, marginTop: -3 }}
+                  />
+                }
+                style={{
+                  padding: "0 10px",
+                }}
+                disabled={!canBrowse}
+              />
+            </TooltipWrapper>
+            <HelpMenu />
+          </Fragment>
         }
       />
       <PageLayout className={classes.pageContainer}>

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx

@@ -40,7 +40,7 @@ import {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
-import { setErrorSnackMessage } from "../../../../systemSlice";
+import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
@@ -86,6 +86,11 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
     }
   }, [loadingBucket, setLoadingEvents]);
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_detail_events"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loadingEvents) {
       if (displayEvents) {

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx

@@ -42,6 +42,8 @@ import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useParams } from "react-router-dom";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import { setHelpName } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -69,6 +71,7 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
   const [deleteLifecycleOpen, setDeleteLifecycleOpen] =
     useState<boolean>(false);
   const [selectedID, setSelectedID] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
 
   const bucketName = params.bucketName || "";
 
@@ -83,6 +86,11 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
     }
   }, [loadingBucket, setLoadingLifecycle]);
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_detail_lifecycle"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loadingLifecycle) {
       if (displayLifeCycleRules) {

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx

@@ -42,7 +42,7 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import withSuspense from "../../Common/Components/withSuspense";
 import EditReplicationModal from "./EditReplicationModal";
-import { setErrorSnackMessage } from "../../../../systemSlice";
+import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useParams } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
@@ -95,6 +95,11 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
     IAM_SCOPES.S3_GET_ACTIONS,
   ]);
 
+  useEffect(() => {
+    dispatch(setHelpName("bucket_detail_replication"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loadingBucket) {
       setLoadingReplication(true);