Updated HelpMenu components to use only mds subcomponents (#3119)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2023-11-01 09:54:14 -06:00
parent 6d5d11d5b4
commit 78164054d4
4 changed files with 125 additions and 180 deletions
--- 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>
  );
 };
--- 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%",
--- 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"}
--- a/portal-ui/src/screens/shared/tabs.tsx
+++ b/portal-ui/src/screens/shared/tabs.tsx
@@ -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>
-  );
-};