Add HelpBox to DirectCSI. (#1225)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx

@@ -0,0 +1,86 @@
+// 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";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
+import BoxIconButton from "../BoxIconButton/BoxIconButton";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      padding: 8,
+      marginLeft: 8,
+      borderWidth: 1,
+      borderColor: "#696969",
+      color: "#696969",
+      borderStyle: "solid",
+      borderRadius: 3,
+      "& .MuiSvgIcon-root": {
+        fontSize: 20,
+      },
+      "& .MuiTouchRipple-root span": {
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: 3,
+        opacity: 0.3,
+      },
+      "&:disabled": {
+        color: "#EBEBEB",
+        borderColor: "#EBEBEB",
+      },
+    },
+    contained: {
+      borderColor: theme.palette.primary.main,
+      background: theme.palette.primary.main,
+      color: "white",
+      "& .MuiTouchRipple-root span": {
+        backgroundColor: theme.palette.primary.dark,
+        borderRadius: 3,
+        opacity: 0.3,
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.primary.light,
+        color: "#FFF",
+      },
+    },
+  });
+
+interface IBoxButton extends ButtonProps {
+  classes: any;
+  label?: string;
+}
+
+const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
+  const altRest = rest as IconButtonProps;
+  return (
+    <Fragment>
+      <Box sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
+        <Button {...rest} endIcon={children}>
+          {label}
+        </Button>
+      </Box>
+      <Box sx={{ display: { xs: "block", sm: "block", md: "none" } }}>
+        <BoxIconButton {...altRest} tooltip={label}>
+          {children}
+        </BoxIconButton>
+      </Box>
+    </Fragment>
+  );
+};
+
+export default withStyles(styles)(BoxButton);

portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx

@@ -19,10 +19,10 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid, InputAdornment, TextField } from "@mui/material";
+import { Grid, InputAdornment, TextField } from "@mui/material";
 import get from "lodash/get";
 import GroupIcon from "@mui/icons-material/Group";
-import { AddIcon } from "../../../icons";
+import { AddIcon, StorageIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import {
   actionsTray,
@@ -44,6 +44,8 @@ import FormatErrorsResult from "./FormatErrorsResult";
 import RefreshIcon from "../../../icons/RefreshIcon";
 import SearchIcon from "../../../icons/SearchIcon";
 import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
+import HelpBox from "../../../common/HelpBox";
+import BoxButton from "../Common/BoxButton/BoxButton";
 
 interface IDirectCSIMain {
   classes: any;
@@ -83,7 +85,7 @@ const styles = (theme: Theme) =>
     },
     linkItem: {
       display: "default",
-      color: "#072F51",
+      color: theme.palette.info.main,
       textDecoration: "none",
       "&:hover": {
         textDecoration: "underline",
@@ -246,7 +248,7 @@ const DirectCSIMain = ({
           }}
         />
       )}
-      <h1 className={classes.sectionTitle}>Drives</h1>
+      <h1 className={classes.sectionTitle}>Local Drives</h1>
       <Grid item xs={12} className={classes.actionsTray}>
         <TextField
           placeholder="Search Drives"
@@ -278,42 +280,50 @@ const DirectCSIMain = ({
         >
           <RefreshIcon />
         </BoxIconButton>
-        <Button
+        <BoxButton
           variant="contained"
           color="primary"
-          endIcon={<GroupIcon />}
           disabled={checkedDrives.length <= 0 || notAvailable}
           onClick={formatSelectedDrives}
+          label={"Format Selected Drives"}
         >
-          Format Selected Drives
-        </Button>
-        <Button
+          <GroupIcon />
+        </BoxButton>
+        <BoxButton
           variant="contained"
           color="primary"
-          endIcon={<AddIcon />}
+          label={"Format All Drives"}
           onClick={formatAllDrives}
           disabled={notAvailable}
         >
-          Format All Drives
-        </Button>
+          <AddIcon />
+        </BoxButton>
       </Grid>
 
       <Grid item xs={12}>
         {notAvailable && !loading ? (
-          <div className={classes.notAvailableNotice}>
-            To manage locally attached drives you need to install direct-csi,
-            for more information
-            <br />
-            please follow this
-            <a
-              href="https://github.com/minio/direct-csi"
-              rel="noreferrer"
-              target="_blank"
-              className={classes.linkItem}
-            >
-              Link
-            </a>
-          </div>
+          <HelpBox
+            title={"Leverage locally attached drives"}
+            iconComponent={<StorageIcon />}
+            help={
+              <Fragment>
+                We can automatically provision persistent volumes (PVs) on top
+                locally attached drives on your Kubernetes nodes by leveraging
+                Direct-CSI.
+                <br />
+                <br />
+                For more information{" "}
+                <a
+                  href="https://github.com/minio/direct-csi"
+                  rel="noreferrer"
+                  target="_blank"
+                  className={classes.linkItem}
+                >
+                  Visit Direct-CSI Documentation
+                </a>
+              </Fragment>
+            }
+          />
         ) : (
           <TableWrapper
             itemActions={tableActions}

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

@@ -14,11 +14,11 @@
 // 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, useState, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Route, Router, Switch, Redirect, Link } from "react-router-dom";
+import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
 import {
   actionsTray,
   containerForHeader,

portal-ui/src/screens/Console/Storage/StoragePVCs.tsx

@@ -100,7 +100,7 @@ const StorageVolumes = ({
 
   return (
     <Fragment>
-      <h1 className={classes.sectionTitle}>Volumes</h1>
+      <h1 className={classes.sectionTitle}>Persistent Volumes Claims</h1>
       <Grid item xs={12} className={classes.actionsTray}>
         <TextField
           placeholder="Search Volumes (PVCs)"