Add Help Box to multiple Screens (#1129)

Author: dvaldivia

portal-ui/src/common/HelpBox.tsx

@@ -0,0 +1,66 @@
+// 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, { Component } from "react";
+import Grid from "@material-ui/core/Grid";
+import { createStyles } from "@material-ui/core";
+import { Theme, withStyles } from "@material-ui/core/styles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      border: "1px solid rgb(234, 237, 238)",
+      borderRadius: 5,
+      marginTop: 10,
+      marginBottom: 10,
+      backgroundColor: "#fbfafa",
+    },
+    icon: {
+      textAlign: "center",
+      padding: 30,
+      fontSize: 64,
+      "& .MuiSvgIcon-root": {
+        fontSize: 64,
+      },
+    },
+    iconSize: {
+      fontSize: 64,
+    },
+    helpText: { padding: 30, paddingLeft: 0, fontSize: 16 },
+  });
+
+interface IHelpBox {
+  classes: any;
+  iconComponent: any;
+  help: any;
+}
+
+const HelpBox = ({ classes, iconComponent, help }: IHelpBox) => {
+  return (
+    <div className={classes.root}>
+      <Grid container>
+        <Grid xs={2} className={classes.icon}>
+          {iconComponent}
+        </Grid>
+        <Grid xs={10} className={classes.helpText}>
+          {help}
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default withStyles(styles)(HelpBox);

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

@@ -20,7 +20,7 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import get from "lodash/get";
 import Grid from "@material-ui/core/Grid";
-import { AddIcon } from "../../../../icons";
+import { AddIcon, LambdaIcon, TiersIcon } from "../../../../icons";
 import { BucketEvent, BucketEventList } from "../types";
 import { setErrorSnackMessage } from "../../../../actions";
 import { AppState } from "../../../../store";
@@ -33,6 +33,7 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import api from "../../../../common/api";
 import DeleteEvent from "./DeleteEvent";
 import AddEvent from "./AddEvent";
+import HelpBox from "../../../../common/HelpBox";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -41,6 +42,9 @@ const styles = (theme: Theme) =>
     actionsTray: {
       ...actionsTray.actionsTray,
     },
+    twHeight: {
+      minHeight: 400,
+    },
   });
 
 interface IBucketEventsProps {
@@ -159,6 +163,30 @@ const BucketEventsPanel = ({
             records={records}
             entityName="Events"
             idField="id"
+            customPaperHeight={classes.twHeight}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <HelpBox
+            iconComponent={<LambdaIcon />}
+            help={
+              <Fragment>
+                MinIO bucket notifications allow administrators to send
+                notifications to supported external services on certain object
+                or bucket events. MinIO supports bucket and object-level S3
+                events similar to the Amazon S3 Event Notifications.
+                <br />
+                <br />
+                You can learn more at our{" "}
+                <a
+                  href="https://docs.min.io/minio/baremetal/monitoring/bucket-notifications/bucket-notifications.html?ref=con"
+                  target="_blank"
+                >
+                  documentation
+                </a>
+                .
+              </Fragment>
+            }
           />
         </Grid>
       </Grid>

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

@@ -22,7 +22,7 @@ import get from "lodash/get";
 import * as reactMoment from "react-moment";
 import Grid from "@material-ui/core/Grid";
 import { LifeCycleItem } from "../types";
-import { AddIcon } from "../../../../icons";
+import { AddIcon, TiersIcon } from "../../../../icons";
 import {
   actionsTray,
   searchField,
@@ -34,11 +34,15 @@ import api from "../../../../common/api";
 import EditLifecycleConfiguration from "./EditLifecycleConfiguration";
 import AddLifecycleModal from "./AddLifecycleModal";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
+import HelpBox from "../../../../common/HelpBox";
 
 const styles = (theme: Theme) =>
   createStyles({
     ...searchField,
     ...actionsTray,
+    twHeight: {
+      minHeight: 400,
+    },
   });
 
 interface IBucketLifecyclePanelProps {
@@ -199,6 +203,30 @@ const BucketLifecyclePanel = ({
             entityName="Lifecycle"
             customEmptyMessage="There are no Lifecycle rules yet"
             idField="id"
+            customPaperHeight={classes.twHeight}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <HelpBox
+            iconComponent={<TiersIcon />}
+            help={
+              <Fragment>
+                MinIO Object Lifecycle Management allows creating rules for time
+                or date based automatic transition or expiry of objects. For
+                object transition, MinIO automatically moves the object to a
+                configured remote storage tier.
+                <br />
+                <br />
+                You can learn more at our{" "}
+                <a
+                  href="https://docs.min.io/minio/baremetal/lifecycle-management/lifecycle-management-overview.html?ref=con"
+                  target="_blank"
+                >
+                  documentation
+                </a>
+                .
+              </Fragment>
+            }
           />
         </Grid>
       </Grid>

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

@@ -19,7 +19,7 @@ import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import { AddIcon } from "../../../../icons";
+import { AddIcon, BucketsIcon, TiersIcon } from "../../../../icons";
 import { setErrorSnackMessage } from "../../../../actions";
 import {
   actionsTray,
@@ -37,6 +37,7 @@ import api from "../../../../common/api";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import AddReplicationModal from "./AddReplicationModal";
 import DeleteReplicationRule from "./DeleteReplicationRule";
+import HelpBox from "../../../../common/HelpBox";
 
 interface IBucketReplicationProps {
   classes: any;
@@ -49,6 +50,9 @@ const styles = (theme: Theme) =>
   createStyles({
     ...searchField,
     ...actionsTray,
+    twHeight: {
+      minHeight: 400,
+    },
   });
 
 const BucketReplicationPanel = ({
@@ -235,6 +239,28 @@ const BucketReplicationPanel = ({
             records={replicationRules}
             entityName="Replication Rules"
             idField="id"
+            customPaperHeight={classes.twHeight}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <HelpBox
+            iconComponent={<BucketsIcon />}
+            help={
+              <Fragment>
+                MinIO supports server-side and client-side replication of
+                objects between source and destination buckets.
+                <br />
+                <br />
+                You can learn more at our{" "}
+                <a
+                  href="https://docs.min.io/minio/baremetal/replication/replication-overview.html?ref=con"
+                  target="_blank"
+                >
+                  documentation
+                </a>
+                .
+              </Fragment>
+            }
           />
         </Grid>
       </Grid>