From 78164054d46fe367ceae15922f6eed2c5c8dfec7 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Wed, 1 Nov 2023 09:54:14 -0600
Subject: [PATCH] Updated HelpMenu components to use only mds subcomponents
 (#3119)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 portal-ui/src/common/MoreLink.tsx          |  35 ++--
 portal-ui/src/screens/Console/HelpItem.tsx |  32 ++--
 portal-ui/src/screens/Console/HelpMenu.tsx | 198 ++++++++++-----------
 portal-ui/src/screens/shared/tabs.tsx      |  40 -----
 4 files changed, 125 insertions(+), 180 deletions(-)
 delete mode 100644 portal-ui/src/screens/shared/tabs.tsx

diff --git a/portal-ui/src/common/MoreLink.tsx b/portal-ui/src/common/MoreLink.tsx
index e3c4df8f4..2ed53b939 100644
--- a/portal-ui/src/common/MoreLink.tsx
+++ b/portal-ui/src/common/MoreLink.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { ArrowIcon } from "mds";
+import { ArrowIcon, Box } from "mds";
 
 const MoreLink = ({
   LeadingIcon,
@@ -39,8 +39,8 @@ const MoreLink = ({
       href={link}
       target={"_blank"}
     >
-      <div
-        style={{
+      <Box
+        sx={{
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
@@ -49,16 +49,25 @@ const MoreLink = ({
         }}
       >
         {LeadingIcon && (
-          <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
-            {/*@ts-ignore*/}
-            <LeadingIcon style={{ height: 16, width: 16 }} />
-          </div>
+          <Box
+            sx={{
+              flexGrow: 0,
+              flexShrink: 1,
+              lineHeight: "12px",
+              "& svg": {
+                height: 16,
+                width: 16,
+              },
+            }}
+          >
+            <LeadingIcon />
+          </Box>
         )}
-        <div style={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
+        <Box sx={{ flexGrow: 0, flexShrink: 1, lineHeight: "12px" }}>
           {text}
-        </div>
-        <div
-          style={{
+        </Box>
+        <Box
+          sx={{
             flexGrow: 0,
             flexShrink: 1,
             lineHeight: "12px",
@@ -66,8 +75,8 @@ const MoreLink = ({
           }}
         >
           <ArrowIcon style={{ width: 12 }} />
-        </div>
-      </div>
+        </Box>
+      </Box>
     </a>
   );
 };
diff --git a/portal-ui/src/screens/Console/HelpItem.tsx b/portal-ui/src/screens/Console/HelpItem.tsx
index 6ee4b191c..18b21307b 100644
--- a/portal-ui/src/screens/Console/HelpItem.tsx
+++ b/portal-ui/src/screens/Console/HelpItem.tsx
@@ -31,37 +31,27 @@ const HelpItem = ({ item, displayImage = true }: IHelpItemProps) => {
         style={{
           display: "flex",
           flexDirection: "row",
-          flexWrap: "nowrap",
-          marginBottom: 20,
         }}
       >
         {displayImage && (
-          <div style={{ paddingLeft: 16, paddingRight: 16 }}>
+          <div style={{ paddingLeft: 16 }}>
             <a href={item.url} target={"_blank"}>
-              <div
+              <img
+                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                alt={item.title}
                 style={{
-                  backgroundColor: "#dedede",
                   width: 208,
-                  height: 62,
+                  height: 116,
+                  backgroundImage: `url(${item.img}), url(${placeholderImg})`,
+                  backgroundPosition: "center center",
+                  backgroundSize: "cover",
+                  backgroundRepeat: "no-repeat",
                 }}
-              >
-                <img
-                  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                  alt={item.title}
-                  style={{
-                    width: 208,
-                    height: 116,
-                    backgroundImage: `url(${item.img}), url(${placeholderImg})`,
-                    backgroundPosition: "center center",
-                    backgroundSize: "cover",
-                    backgroundRepeat: "no-repeat",
-                  }}
-                />
-              </div>
+              />
             </a>
           </div>
         )}
-        <div style={{ flexGrow: 1, flexBasis: "auto" }}>
+        <div style={{ flexGrow: 1, flexBasis: "auto", paddingLeft: 16 }}>
           <div
             style={{
               width: "100%",
diff --git a/portal-ui/src/screens/Console/HelpMenu.tsx b/portal-ui/src/screens/Console/HelpMenu.tsx
index 2b986fee8..8031cdaa2 100644
--- a/portal-ui/src/screens/Console/HelpMenu.tsx
+++ b/portal-ui/src/screens/Console/HelpMenu.tsx
@@ -15,8 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useRef, useState } from "react";
-import { MenuItem, Paper, Tab, Tabs } from "@mui/material";
-import HelpItem from "./HelpItem";
+import ReactMarkdown from "react-markdown";
+import styled from "styled-components";
+import get from "lodash/get";
 import {
   AlertCloseIcon,
   Box,
@@ -25,14 +26,42 @@ import {
   HelpIconFilled,
   IconButton,
   MinIOTierIcon,
+  TabItemProps,
+  Tabs,
 } from "mds";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../store";
-import { TabPanel } from "../shared/tabs";
 import { setHelpTabName } from "../../systemSlice";
 import { DocItem } from "./HelpMenu.types";
+import HelpItem from "./HelpItem";
 import MoreLink from "../../common/MoreLink";
-import ReactMarkdown from "react-markdown";
+
+const HelpMenuContainer = styled.div(({ theme }) => ({
+  backgroundColor: get(theme, "bgColor", "#FFF"),
+  position: "absolute",
+  zIndex: "10",
+  border: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+  borderRadius: 4,
+  boxShadow: "rgba(0, 0, 0, 0.1) 0px 0px 10px",
+  width: 754,
+  "& .tabsPanels": {
+    padding: "15px 0 0",
+  },
+  "& .helpContainer": {
+    maxHeight: 400,
+    overflowY: "auto",
+    "& .helpItemBlock": {
+      padding: 5,
+      "&:hover": {
+        backgroundColor: get(
+          theme,
+          "buttons.regular.hover.background",
+          "#E6EAEB",
+        ),
+      },
+    },
+  },
+}));
 
 const HelpMenu = () => {
   const helpTopics = require("../Console/helpTopics.json");
@@ -73,7 +102,7 @@ const HelpMenu = () => {
     }, [ref]);
   }
 
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
   useOutsideAlerter(wrapperRef);
 
   useEffect(() => {
@@ -148,7 +177,7 @@ const HelpMenu = () => {
   ]);
 
   const helpContent = (
-    <React.Fragment>
+    <Box className={"helpContainer"}>
       {headerDocs && (
         <div style={{ paddingLeft: 16, paddingRight: 16 }}>
           <div>
@@ -159,9 +188,9 @@ const HelpMenu = () => {
       )}
       {helpItems &&
         helpItems.map((aHelpItem, idx) => (
-          <MenuItem value={`${idx}`} key={`help-item-${aHelpItem}`}>
+          <Box className={"helpItemBlock"} key={`help-item-${aHelpItem}`}>
             <HelpItem item={aHelpItem} displayImage={false} />
-          </MenuItem>
+          </Box>
         ))}
       <div style={{ padding: 16 }}>
         <MoreLink
@@ -171,10 +200,10 @@ const HelpMenu = () => {
           color={"#C5293F"}
         />
       </div>
-    </React.Fragment>
+    </Box>
   );
   const helpContentVideo = (
-    <React.Fragment>
+    <Box className={"helpContainer"}>
       {headerVideo && (
         <Fragment>
           <div style={{ paddingLeft: 16, paddingRight: 16 }}>
@@ -185,9 +214,9 @@ const HelpMenu = () => {
       )}
       {helpItemsVideo &&
         helpItemsVideo.map((aHelpItem, idx) => (
-          <MenuItem value={`${idx}`} key={`help-item-${aHelpItem}`}>
+          <Box className={"helpItemBlock"} key={`help-item-${aHelpItem}`}>
             <HelpItem item={aHelpItem} />
-          </MenuItem>
+          </Box>
         ))}
       <div style={{ padding: 16 }}>
         <MoreLink
@@ -197,10 +226,10 @@ const HelpMenu = () => {
           color={"#C5293F"}
         />
       </div>
-    </React.Fragment>
+    </Box>
   );
   const helpContentBlog = (
-    <React.Fragment>
+    <Box className={"helpContainer"}>
       {headerBlog && (
         <Fragment>
           <div style={{ paddingLeft: 16, paddingRight: 16 }}>
@@ -211,9 +240,9 @@ const HelpMenu = () => {
       )}
       {helpItemsBlog &&
         helpItemsBlog.map((aHelpItem, idx) => (
-          <MenuItem value={`${idx}`} key={`help-item-${aHelpItem}`}>
+          <Box className={"helpItemBlock"} key={`help-item-${aHelpItem}`}>
             <HelpItem item={aHelpItem} />
-          </MenuItem>
+          </Box>
         ))}
       <div style={{ padding: 16 }}>
         <MoreLink
@@ -223,76 +252,53 @@ const HelpMenu = () => {
           color={"#C5293F"}
         />
       </div>
-    </React.Fragment>
+    </Box>
   );
 
-  function a11yProps(index: any) {
-    return {
-      id: `simple-tab-${index}`,
-      "aria-controls": `simple-tabpanel-${index}`,
-      style: {
-        fontWeight: "bold",
-      },
-    };
-  }
+  const constructHMTabs = () => {
+    const helpMenuElements: TabItemProps[] = [];
+
+    if (helpItems.length !== 0) {
+      helpMenuElements.push({
+        tabConfig: { label: "Documentation", id: "docs" },
+        content: helpContent,
+      });
+    }
+
+    if (helpItemsVideo.length !== 0) {
+      helpMenuElements.push({
+        tabConfig: { label: "Video", id: "video" },
+        content: helpContentVideo,
+      });
+    }
+
+    if (helpItemsBlog.length !== 0) {
+      helpMenuElements.push({
+        tabConfig: { label: "Blog", id: "blog" },
+        content: helpContentBlog,
+      });
+    }
+
+    return helpMenuElements;
+  };
 
   return (
     <Fragment>
       {helpMenuOpen && (
-        <div
-          ref={wrapperRef}
-          style={{
-            position: "absolute",
-            zIndex: "10",
-            background: "#F7F7F7 0% 0% no-repeat padding-box",
-            borderRadius: "4px",
-            width: 754,
-            boxShadow: "0px 0px 10px #0000001A",
-            border: "1px solid #E5E5E5",
-          }}
-        >
-          <Box>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-              }}
-            >
-              <div style={{ padding: 14 }}>
-                <HelpIconFilled style={{ color: "#3874A6", width: 16 }} />
-              </div>
-              <div
-                style={{
-                  flexGrow: 1,
-                }}
-              >
-                <Tabs
-                  value={helpTabName}
-                  onChange={(e: React.ChangeEvent<{}>, newValue: string) => {
-                    dispatch(setHelpTabName(newValue));
-                  }}
-                  indicatorColor="primary"
-                  textColor="primary"
-                  aria-label="cluster-tabs"
-                  variant="scrollable"
-                  scrollButtons="auto"
-                >
-                  {helpItems.length !== 0 && (
-                    <Tab
-                      value={"docs"}
-                      label="Documentation"
-                      {...a11yProps(0)}
-                    />
-                  )}
-                  {helpItemsVideo.length !== 0 && (
-                    <Tab value={"video"} label="Video" {...a11yProps(1)} />
-                  )}
-                  {helpItemsBlog.length !== 0 && (
-                    <Tab value={"blog"} label="Blog" {...a11yProps(2)} />
-                  )}
-                </Tabs>
-              </div>
-              <div style={{ padding: 10 }}>
+        <HelpMenuContainer ref={wrapperRef}>
+          <Tabs
+            options={constructHMTabs()}
+            currentTabOrPath={helpTabName}
+            onTabClick={(item) => dispatch(setHelpTabName(item))}
+            optionsInitialComponent={
+              <Box sx={{ margin: "10px 10px 10px 15px" }}>
+                <HelpIconFilled
+                  style={{ color: "#3874A6", width: 16, height: 16 }}
+                />
+              </Box>
+            }
+            optionsEndComponent={
+              <Box sx={{ marginRight: 15 }}>
                 <IconButton
                   onClick={() => {
                     setHelpMenuOpen(false);
@@ -301,32 +307,12 @@ const HelpMenu = () => {
                 >
                   <AlertCloseIcon style={{ color: "#919191", width: 12 }} />
                 </IconButton>
-              </div>
-            </div>
-            <Paper
-              style={{
-                maxHeight: 400,
-                overflowY: "auto",
-              }}
-            >
-              {helpItems.length !== 0 && (
-                <TabPanel index={"docs"} value={helpTabName}>
-                  {helpContent}
-                </TabPanel>
-              )}
-              {helpItemsVideo.length !== 0 && (
-                <TabPanel index={"video"} value={helpTabName}>
-                  {helpContentVideo}
-                </TabPanel>
-              )}
-              {helpItemsBlog.length !== 0 && (
-                <TabPanel index={"blog"} value={helpTabName}>
-                  {helpContentBlog}
-                </TabPanel>
-              )}
-            </Paper>
-          </Box>
-        </div>
+              </Box>
+            }
+            horizontalBarBackground
+            horizontal
+          />
+        </HelpMenuContainer>
       )}
       <Button
         id={systemHelpName ?? "help_button"}
diff --git a/portal-ui/src/screens/shared/tabs.tsx b/portal-ui/src/screens/shared/tabs.tsx
deleted file mode 100644
index d8415f55d..000000000
--- a/portal-ui/src/screens/shared/tabs.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 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, { Fragment } from "react";
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: any;
-  value: any;
-}
-
-export const TabPanel = (props: TabPanelProps) => {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      style={{ marginTop: "5px" }}
-      {...other}
-    >
-      {value === index && <Fragment>{children}</Fragment>}
-    </div>
-  );
-};