Updated help box for license request

Author: Benjamin Perez

portal-ui/src/common/HelpBox.tsx

@@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
 interface IHelpBox {
   classes: any;
   iconComponent: any;
-  title: string;
+  title: string | React.ReactNode;
   help: any;
 }
 

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

@@ -257,7 +257,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
     <Fragment>
       <PageHeader label="Health" />
       <PageLayout>
-        {!registeredCluster && <RegisterCluster />}
+        {!registeredCluster && <RegisterCluster compactMode />}
         <Grid item xs={12} className={classes.boxy}>
           <TestWrapper title={title} advancedVisible={false}>
             <Grid container className={classes.buttons}>
@@ -325,7 +325,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
             </Grid>
           </TestWrapper>
         </Grid>
-        {!diagStarted && (
+        {!diagStarted && registeredCluster && (
           <Fragment>
             <br />
             <HelpBox

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

@@ -206,7 +206,7 @@ const Speedtest = () => {
     <Fragment>
       <PageHeader label="Performance" />
       <PageLayout>
-        {plan !== "STANDARD" && plan !== "ENTERPRISE" && <RegisterCluster />}
+        {!registeredCluster && <RegisterCluster compactMode />}
         {!distributedSetup ? (
           <DistributedOnly
             iconComponent={<SpeedtestIcon />}
@@ -311,7 +311,7 @@ const Speedtest = () => {
               </Grid>
             </Grid>
 
-            {!start && !currStatus && (
+            {!start && !currStatus && registeredCluster && (
               <Fragment>
                 <br />
                 <HelpBox

portal-ui/src/screens/Console/Support/Profile.tsx

@@ -144,7 +144,7 @@ const Profile = ({ classes }: IProfileProps) => {
     <Fragment>
       <PageHeader label="Profile" />
       <PageLayout>
-        {plan !== "STANDARD" && plan !== "ENTERPRISE" && <RegisterCluster />}
+        {plan !== "STANDARD" && plan !== "ENTERPRISE" && <RegisterCluster compactMode />}
         <Grid item xs={12} className={classes.boxy}>
           <Grid item xs={12} className={classes.dropdown}>
             <Grid

portal-ui/src/screens/Console/Support/Register.tsx

@@ -1,5 +1,5 @@
 // This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
+// Copyright (c) 2022 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

portal-ui/src/screens/Console/Support/RegisterCluster.tsx

@@ -14,14 +14,48 @@
 // 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 React, { Fragment } from "react";
 import Grid from "@mui/material/Grid";
 import { Box, Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import WarnIcon from "../../../icons/WarnIcon";
+import HelpBox from "../../../common/HelpBox";
 
-const RegisterCluster = () => {
+interface IRegisterCluster {
+  compactMode?: boolean;
+}
+
+const RegisterCluster = ({ compactMode = false }: IRegisterCluster) => {
   const navigate = useNavigate();
 
+  const redirectButton = (<Button
+    type="submit"
+    variant="contained"
+    color="primary"
+    onClick={() => navigate("/support/register")}
+  >
+    Register your Cluster
+  </Button>);
+
+  const registerMessage = "Use your MinIO Subscription Network login credentials to register this cluster.";
+
+  if (compactMode) {
+    return (
+      <Fragment>
+        <HelpBox
+          title={
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexGrow: 1 }}>
+              <span>{registerMessage}</span> {redirectButton}
+            </div>
+          }
+          iconComponent={<WarnIcon />}
+          help={<Fragment />}
+        />
+        <br />
+      </Fragment>
+    );
+  }
+
   return (
     <Box
       sx={{
@@ -32,9 +66,9 @@ const RegisterCluster = () => {
         justifyContent: "center",
         flexFlow: {
           sm: "row",
-          xs: "column",
+          xs: "column"
         },
-        marginBottom: "15px",
+        marginBottom: "15px"
       }}
     >
       <Grid container>
@@ -51,8 +85,8 @@ const RegisterCluster = () => {
                 width: "83px",
                 height: "14px",
                 marginLeft: "5px",
-                marginRight: "5px",
-              },
+                marginRight: "5px"
+              }
             }}
           >
             Register your cluster
@@ -64,15 +98,15 @@ const RegisterCluster = () => {
               display: "flex",
               flexFlow: {
                 xs: "column",
-                md: "row",
-              },
+                md: "row"
+              }
             }}
           >
             <Box
               sx={{
                 display: "flex",
                 flexFlow: "column",
-                flex: "2",
+                flex: "2"
               }}
             >
               <Box
@@ -81,32 +115,24 @@ const RegisterCluster = () => {
                   display: "flex",
                   flexFlow: "column",
                   marginTop: "15px",
-                  marginBottom: "15px",
+                  marginBottom: "15px"
                 }}
               >
-                Use your MinIO Subscription Network login credentials to
-                register this cluster.
+                {registerMessage}
               </Box>
               <Box
                 sx={{
-                  flex: "1",
+                  flex: "1"
                 }}
               >
                 <Box
                   sx={{
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "flex-end",
+                    justifyContent: "flex-end"
                   }}
                 >
-                  <Button
-                    type="submit"
-                    variant="contained"
-                    color="primary"
-                    onClick={() => navigate("/support/register")}
-                  >
-                    Register your Cluster
-                  </Button>
+                  {redirectButton}
                 </Box>
               </Box>
             </Box>

portal-ui/src/screens/Console/Tools/Inspect.tsx

@@ -202,7 +202,7 @@ const Inspect = ({ classes }: { classes: any }) => {
     <Fragment>
       <PageHeader label={"Inspect"} />
       <PageLayout>
-        {plan !== "STANDARD" && plan !== "ENTERPRISE" && <RegisterCluster />}
+        {plan !== "STANDARD" && plan !== "ENTERPRISE" && <RegisterCluster compactMode />}
         {!distributedSetup ? (
           <DistributedOnly
             iconComponent={<InspectMenuIcon />}