Fixed formatting of Site Replication Helpbox text (#2080)

portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx

@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import PageLayout from "../../Common/Layout/PageLayout";
-import { Box, DialogContentText } from "@mui/material";
+import { Box, DialogContentText, Grid } from "@mui/material";
 import useApi from "../../Common/Hooks/useApi";
 import ReplicationSites from "./ReplicationSites";
 import TrashIcon from "../../../../icons/TrashIcon";
@@ -39,6 +39,7 @@ import {
   setErrorSnackMessage,
   setSnackBarMessage,
 } from "../../../../systemSlice";
+import AButton from "../../Common/AButton/AButton";
 
 export type ReplicationSite = {
   deploymentID: string;
@@ -174,19 +175,46 @@ const SiteReplication = () => {
           </Box>
         ) : null}
         {!hasSites && !isSiteInfoLoading ? (
-          <Box
+         <Grid
-            sx={{
+                    container
-              padding: "30px",
+                    justifyContent={"center"}
-              border: "1px solid #eaeaea",
+                    alignContent={"center"}
-              marginTop: "15px",
+                    alignItems={"center"}
-              marginBottom: "15px",
+                  >
-              height: "calc( 100vh - 450px )",
+                    <Grid item xs={8}>
-            }}
+                      <HelpBox
-          >
+                        title={"Site Replication"}
-            Site Replication is not configured.
+                        iconComponent={<ClustersIcon />}
-          </Box>
+                        help={
-        ) : null}
+                          <Fragment>
+                           This feature allows multiple independent MinIO sites (or clusters) that are using the same external 
+                           IDentity Provider (IDP) to be configured as replicas. 
+                            <br />
+                            <br />
+                            To get started,{" "}
+                            <AButton 
+                            onClick={() => {history.push(IAM_PAGES.SITE_REPLICATION_ADD);}}>
+                              Add a Replication Site
+                            </AButton>.
 
+                            <br/>
+                            You can learn more at our{" "}
+              <a
+                href="https://github.com/minio/minio/tree/master/docs/site-replication?ref=con"
+                target="_blank"
+                rel="noreferrer"
+              >
+                documentation
+              </a>
+              .
+                          </Fragment>
+                        }
+                      />
+                      </Grid>
+                      </Grid>
+                  
+        ) : null}
+      {hasSites && !isSiteInfoLoading ? (
         <HelpBox
           title={"Site Replication"}
           iconComponent={<ClustersIcon />}
@@ -196,30 +224,21 @@ const SiteReplication = () => {
               that are using the same external IDentity Provider (IDP) to be
               configured as replicas. In this situation the set of replica sites
               are referred to as peer sites or just sites.
-              <br />
+              <br /><br />
-              <Box>
+              Initially, only one of the sites added for replication may
-                <ul>
+              have data. After site-replication is successfully
-                  <li>
+              configured, this data is replicated to the other (initially
-                    Initially, only one of the sites added for replication may
+              empty) sites. Subsequently, objects may be written to any of
-                    have data. After site-replication is successfully
+              the sites, and they will be replicated to all other sites.
-                    configured, this data is replicated to the other (initially
+              <br /><br />
-                    empty) sites. Subsequently, objects may be written to any of
+              All sites must have the same deployment credentials (i.e.
-                    the sites, and they will be replicated to all other sites.
+              MINIO_ROOT_USER, MINIO_ROOT_PASSWORD).
-                  </li>
+              <br /><br />
-                  <li>
+              All sites must be using the same external IDP(s) if any.
-                    All sites must have the same deployment credentials (i.e.
+              <br /><br />
-                    MINIO_ROOT_USER, MINIO_ROOT_PASSWORD).
+              For SSE-S3 or SSE-KMS encryption via KMS, all sites must
-                  </li>
+              have access to a central KMS deployment server. 
-                  <li>
+              <br /><br />
-                    All sites must be using the same external IDP(s) if any.
-                  </li>
-                  <li>
-                    For SSE-S3 or SSE-KMS encryption via KMS, all sites must
-                    have access to a central KMS deployment. server.
-                  </li>
-                </ul>
-              </Box>
-              <br />
               You can learn more at our{" "}
               <a
                 href="https://github.com/minio/minio/tree/master/docs/site-replication?ref=con"
@@ -232,6 +251,7 @@ const SiteReplication = () => {
             </Fragment>
           }
         />
+        ) : null}
 
         {deleteAll ? (
           <ConfirmDialog