Add Helpbox to Tier Type selector screen and adjust formatting (#2519)

Author: jinapurapu

portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx

@@ -28,16 +28,22 @@ const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
   const styles = {
     tierTypeCard: {
       height: "80px",
-      width: "300px",
+      width: "auto",
       display: "flex",
       alignItems: "center",
-      justifyContent: "start",
+      justifyContent: "flex-start",
       padding: 5,
       border: "1px solid #E5E5E5",
       borderRadius: 2,
       cursor: "pointer",
+      overflow: "hidden",
       "&:hover": { background: "#ebebeb" },
     },
+    tierTypeTitle: {
+      fontWeight: 600,
+      fontSize: 14,
+      justifyContent: "center",
+    },
   };
   return (
     <Button
@@ -49,7 +55,7 @@ const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
     >
       <Grid container alignItems={"center"}>
         {icon ? (
-          <Grid item padding={5}>
+          <Grid item padding={1} xs={4}>
             <Box
               sx={{
                 "& .min-icon": {
@@ -62,16 +68,8 @@ const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
             </Box>
           </Grid>
         ) : null}
-        <Grid item>
-          <div
-            style={{
-              fontWeight: 600,
-              marginLeft: 10,
-              fontSize: 14,
-            }}
-          >
-            {name}
-          </div>
+        <Grid item xs={8} style={styles.tierTypeTitle} paddingLeft={1}>
+          {name}
         </Grid>
       </Grid>
     </Button>

portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx

@@ -23,7 +23,9 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
 import BackLink from "../../../../common/BackLink";
 import PageLayout from "../../Common/Layout/PageLayout";
 import TierTypeCard from "./TierTypeCard";
-import ContentBox from "../../Common/ContentBox";
+import HelpBox from "../../../../common/HelpBox";
+import { TiersIcon } from "../../../../icons";
+import FormLayout from "../../Common/FormLayout";
 
 const TierTypeSelector = () => {
   const navigate = useNavigate();
@@ -44,20 +46,75 @@ const TierTypeSelector = () => {
       />
 
       <PageLayout>
-        <ContentBox>
-          <div style={{ fontSize: 16, fontWeight: 600, paddingBottom: 15 }}>
-            Select Tier Type
-          </div>
+        <FormLayout
+          title={"Select Tier Type"}
+          icon={<TiersIcon />}
+          helpbox={
+            <HelpBox
+              iconComponent={<TiersIcon />}
+              title={"Tier Types"}
+              help={
+                <Fragment>
+                  MinIO supports creating object transition lifecycle management
+                  rules, where MinIO can automatically move an object to a
+                  remote storage “tier”.
+                  <br />
+                  <br />
+                  MinIO supports the following Tier types:
+                  <br />
+                  <ul>
+                    <li>
+                      <a
+                        href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/transition-objects-to-s3.html#minio-lifecycle-management-transition-to-s3?ref=con"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        MinIO or other S3-compatible storage
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/transition-objects-to-s3.html#minio-lifecycle-management-transition-to-s3?ref=con"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Amazon S3
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/transition-objects-to-gcs.html#minio-lifecycle-management-transition-to-gcs?ref=con"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Google Cloud Storage
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://min.io/docs/minio/kubernetes/upstream/administration/object-management/transition-objects-to-azure.html#minio-lifecycle-management-transition-to-azure?ref=con"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Microsoft Azure Blob Storage
+                      </a>
+                    </li>
+                  </ul>
+                </Fragment>
+              }
+            />
+          }
+        >
           <Box
             sx={{
-              margin: "0 auto",
+              margin: "15px",
               display: "grid",
               gridGap: "20px",
               gridTemplateColumns: {
                 xs: "repeat(1, 1fr)",
-                sm: "repeat(2, 1fr)",
-                md: "repeat(3, 1fr)",
-                lg: "repeat(4, 1fr)",
+                sm: "repeat(1, 1fr)",
+                md: "repeat(2, 1fr)",
+                lg: "repeat(2, 1fr)",
               },
             }}
           >
@@ -72,7 +129,7 @@ const TierTypeSelector = () => {
               />
             ))}
           </Box>
-        </ContentBox>
+        </FormLayout>
       </PageLayout>
     </Fragment>
   );