From b125121ac857cacd21b28038ac8264ee74ae681e Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Mon, 21 Aug 2023 22:30:04 -0600
Subject: [PATCH] Migrated available mds components in Tiers Page (#3007)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../DistributedOnly/DistributedOnly.tsx       |  26 +-
 .../FileSelector/FileSelector.tsx             |  23 +-
 .../AddTierConfiguration.tsx                  |  79 ++---
 .../ListTiersConfiguration.tsx                | 322 ++++++++----------
 .../RegionSelectWrapper.tsx                   |  15 +-
 .../TiersConfiguration/TierTypeCard.tsx       |  81 ++---
 .../UpdateTierCredentialsModal.tsx            | 200 +++++------
 7 files changed, 312 insertions(+), 434 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/DistributedOnly/DistributedOnly.tsx b/portal-ui/src/screens/Console/Common/DistributedOnly/DistributedOnly.tsx
index a9502b29d..0bf77814c 100644
--- a/portal-ui/src/screens/Console/Common/DistributedOnly/DistributedOnly.tsx
+++ b/portal-ui/src/screens/Console/Common/DistributedOnly/DistributedOnly.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box, Grid } from "@mui/material";
-import { HelpBox } from "mds";
+import { HelpBox, Box, Grid, breakPoints } from "mds";
 
 interface IDistributedOnly {
   iconComponent: any;
@@ -25,7 +24,7 @@ interface IDistributedOnly {
 
 const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
   return (
-    <Grid container alignItems={"center"}>
+    <Grid container>
       <Grid item xs={12}>
         <HelpBox
           title={`${entity} not available`}
@@ -34,21 +33,16 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
             <Box
               sx={{
                 fontSize: "14px",
-                display: "flex",
-                border: "none",
-                flexFlow: {
-                  xs: "column",
-                  md: "row",
-                },
-                "& a": {
-                  color: (theme) => theme.colors.link,
-                  textDecoration: "underline",
+                [`@media (max-width: ${breakPoints.sm}px)`]: {
+                  display: "flex",
+                  flexFlow: "column",
                 },
               }}
             >
-              <div>This feature is not available for a single-disk setup.</div>
-
-              <div>
+              <span>
+                This feature is not available for a single-disk setup.&nbsp;
+              </span>
+              <span>
                 Please deploy a server in{" "}
                 <a
                   href="https://min.io/docs/minio/linux/operations/install-deploy-manage/deploy-minio-multi-node-multi-drive.html?ref=con"
@@ -58,7 +52,7 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
                   Distributed Mode
                 </a>{" "}
                 to use this feature.
-              </div>
+              </span>
             </Box>
           }
         />
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
index 6aaf126cb..f4a391726 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -16,8 +16,7 @@
 
 import React, { useState } from "react";
 import get from "lodash/get";
-import { Grid, InputLabel, Tooltip } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
+import { Grid, InputLabel, Tooltip, IconButton } from "mds";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 import CancelIcon from "@mui/icons-material/Cancel";
 import { Theme } from "@mui/material/styles";
@@ -96,16 +95,16 @@ const FileSelector = ({
       <Grid
         item
         xs={12}
-        className={`${classes.fileInputField} ${classes.fieldBottom} ${
-          classes.fieldContainer
-        } ${error !== "" ? classes.errorInField : ""}`}
+        className={`inputItem ${classes.fileInputField} ${
+          classes.fieldBottom
+        } ${classes.fieldContainer} ${
+          error !== "" ? classes.errorInField : ""
+        }`}
       >
         {label !== "" && (
           <InputLabel
             htmlFor={id}
-            className={`${error !== "" ? classes.fieldLabelError : ""} ${
-              classes.inputLabel
-            }`}
+            className={`${error !== "" ? classes.fieldLabelError : ""}`}
           >
             <span>
               {label}
@@ -113,7 +112,7 @@ const FileSelector = ({
             </span>
             {tooltip !== "" && (
               <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
+                <Tooltip tooltip={tooltip} placement="top">
                   <div className={classes.tooltip}>
                     <HelpIcon />
                   </div>
@@ -144,12 +143,9 @@ const FileSelector = ({
               <IconButton
                 color="primary"
                 aria-label="upload picture"
-                component="span"
                 onClick={() => {
                   setShowSelector(false);
                 }}
-                disableRipple={false}
-                disableFocusRipple={false}
                 size="small"
               >
                 <CancelIcon />
@@ -164,12 +160,9 @@ const FileSelector = ({
             <IconButton
               color="primary"
               aria-label="upload picture"
-              component="span"
               onClick={() => {
                 setShowSelector(true);
               }}
-              disableRipple={false}
-              disableFocusRipple={false}
               size="small"
             >
               <AttachFileIcon />
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
index 14f084ce0..f840dc951 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -18,19 +18,25 @@ import React, { Fragment, useCallback, useEffect, useState } from "react";
 
 import { useNavigate, useParams } from "react-router-dom";
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
-import { BackLink, Button, PageLayout } from "mds";
+import {
+  BackLink,
+  breakPoints,
+  Button,
+  Grid,
+  PageLayout,
+  InputBox,
+  SectionTitle,
+} from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Box } from "@mui/material";
 import {
   fileInputStyles,
   formFieldStyles,
   modalBasic,
+  modalStyleUtils,
   settingsCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
 import {
   azureServiceName,
@@ -348,53 +354,28 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
         >
           <form noValidate onSubmit={submitForm}>
             {type !== "" && targetElement ? (
-              <Grid
-                item
-                xs={12}
-                key={`icon-${targetElement.targetTitle}`}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "start",
-                  marginBottom: "20px",
-                }}
-              >
-                {targetElement.logo ? (
-                  <Box
-                    sx={{
-                      "& .min-icon": {
-                        height: "60px",
-                        width: "60px",
-                      },
-                    }}
-                  >
-                    {targetElement.logo}
-                  </Box>
-                ) : null}
-
-                <div className={classes.lambdaNotifTitle}>
-                  <b>
-                    {titleSelection ? titleSelection : ""} - Add Tier
-                    Configuration
-                  </b>
-                </div>
-              </Grid>
+              <SectionTitle icon={targetElement.logo} sx={{ marginBottom: 20 }}>
+                {titleSelection ? titleSelection : ""} - Add Tier Configuration
+              </SectionTitle>
             ) : null}
-
             <Grid
               item
               xs={12}
               sx={{
                 display: "grid",
-                gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
-                gridAutoFlow: { xs: "dense", sm: "row" },
-                gridRowGap: 25,
+                gridTemplateColumns: "1fr 1fr",
+                gridAutoFlow: "row",
+                gridRowGap: 20,
                 gridColumnGap: 50,
+                [`@media (max-width: ${breakPoints.sm}px)`]: {
+                  gridTemplateColumns: "1fr",
+                  gridAutoFlow: "dense",
+                },
               }}
             >
               {type !== "" && (
                 <Fragment>
-                  <InputBoxWrapper
+                  <InputBox
                     id="name"
                     name="name"
                     label="Name"
@@ -404,7 +385,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                     error={nameInputError}
                     required
                   />
-                  <InputBoxWrapper
+                  <InputBox
                     id="endpoint"
                     name="endpoint"
                     label="Endpoint"
@@ -417,7 +398,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                   />
                   {(type === s3ServiceName || type === minioServiceName) && (
                     <Fragment>
-                      <InputBoxWrapper
+                      <InputBox
                         id="accessKey"
                         name="accessKey"
                         label="Access Key"
@@ -428,7 +409,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                         }}
                         required
                       />
-                      <InputBoxWrapper
+                      <InputBox
                         id="secretKey"
                         name="secretKey"
                         label="Secret Key"
@@ -462,7 +443,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                   )}
                   {type === azureServiceName && (
                     <Fragment>
-                      <InputBoxWrapper
+                      <InputBox
                         id="accountName"
                         name="accountName"
                         label="Account Name"
@@ -473,7 +454,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                         }}
                         required
                       />
-                      <InputBoxWrapper
+                      <InputBox
                         id="accountKey"
                         name="accountKey"
                         label="Account Key"
@@ -486,7 +467,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                       />
                     </Fragment>
                   )}
-                  <InputBoxWrapper
+                  <InputBox
                     id="bucket"
                     name="bucket"
                     label="Bucket"
@@ -497,7 +478,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                     }}
                     required
                   />
-                  <InputBoxWrapper
+                  <InputBox
                     id="prefix"
                     name="prefix"
                     label="Prefix"
@@ -519,7 +500,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                     type={type as "azure" | "s3" | "minio" | "gcs"}
                   />
                   {type === s3ServiceName && (
-                    <InputBoxWrapper
+                    <InputBox
                       id="storageClass"
                       name="storageClass"
                       label="Storage Class"
@@ -533,7 +514,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
                 </Fragment>
               )}
             </Grid>
-            <Grid item xs={12} className={classes.settingsButtonContainer}>
+            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
               <Button
                 id={"save-tier-configuration"}
                 type="submit"
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index aa880a46e..3620d994f 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -17,37 +17,27 @@
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { useSelector } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Box, LinearProgress } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import {
+  ActionLink,
   AddIcon,
+  Box,
   Button,
+  DataTable,
+  Grid,
   HelpBox,
   PageLayout,
+  ProgressBar,
   RefreshIcon,
   TierOfflineIcon,
   TierOnlineIcon,
   TiersIcon,
   TiersNotAvailableIcon,
 } from "mds";
-import Grid from "@mui/material/Grid";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  settingsCommon,
-  tableStyles,
-  typesSelection,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import AButton from "../../Common/AButton/AButton";
-import SearchBox from "../../Common/SearchBox";
-
-import withSuspense from "../../Common/Components/withSuspense";
-import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { Tier } from "api/consoleApi";
+import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
@@ -64,52 +54,19 @@ import {
   setErrorSnackMessage,
   setHelpName,
 } from "../../../../systemSlice";
-import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
+import SearchBox from "../../Common/SearchBox";
+import withSuspense from "../../Common/Components/withSuspense";
+import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
-
 import HelpMenu from "../../HelpMenu";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-import { Tier } from "api/consoleApi";
+
 const UpdateTierCredentialsModal = withSuspense(
   React.lazy(() => import("./UpdateTierCredentialsModal")),
 );
 
-interface IListTiersConfig {
-  classes: any;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...actionsTray,
-    ...searchField,
-    ...settingsCommon,
-    ...typesSelection,
-    ...containerForHeader,
-    customConfigurationPage: {
-      minHeight: 400,
-    },
-    actionsTray: {
-      ...actionsTray.actionsTray,
-    },
-    searchField: {
-      ...searchField.searchField,
-      marginRight: "auto",
-      maxWidth: 380,
-    },
-
-    rightActionButtons: {
-      display: "flex",
-      "& button": {
-        whiteSpace: "nowrap",
-      },
-    },
-    ...tableStyles,
-  });
-
-const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
+const ListTiersConfiguration = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -206,9 +163,8 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
             justifyItems: "start",
             color: "#4CCB92",
             fontSize: "8px",
+            flexDirection: "column",
           }}
-          flexDirection={"column"}
-          display={"flex"}
         >
           <TierOnlineIcon style={{ fill: "#4CCB92", width: 14, height: 14 }} />
           ONLINE
@@ -220,12 +176,11 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
         container
         sx={{
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
           color: "#C83B51",
           fontSize: "8px",
         }}
-        flexDirection={"column"}
-        display={"flex"}
       >
         <TierOfflineIcon style={{ fill: "#C83B51", width: 14, height: 14 }} />
         OFFLINE
@@ -331,15 +286,24 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
           />
         ) : (
           <Fragment>
-            <Grid item xs={12} className={classes.actionsTray}>
+            <Grid item xs={12} sx={actionsTray.actionsTray}>
               <SearchBox
                 placeholder="Filter"
                 onChange={setFilter}
-                overrideClass={classes.searchField}
                 value={filter}
+                sx={{
+                  marginRight: "auto",
+                  maxWidth: 380,
+                }}
               />
 
-              <div className={classes.rightActionButtons}>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexWrap: "nowrap",
+                  gap: 5,
+                }}
+              >
                 <Button
                   id={"refresh-list"}
                   icon={<RefreshIcon />}
@@ -371,99 +335,97 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
                     />
                   </SecureComponent>
                 </TooltipWrapper>
-              </div>
+              </Box>
             </Grid>
-            {isLoading && <LinearProgress />}
+            {isLoading && <ProgressBar />}
             {!isLoading && (
               <Fragment>
                 {records.length > 0 && (
                   <Fragment>
-                    <Grid item xs={12} className={classes.tableBlock}>
+                    <Grid item xs={12}>
                       <SecureComponent
                         scopes={[IAM_SCOPES.ADMIN_LIST_TIERS]}
                         resource={CONSOLE_UI_RESOURCE}
                         errorProps={{ disabled: true }}
                       >
-                        <Box sx={{ width: "100%" }}>
-                          <TableWrapper
-                            itemActions={[
-                              {
-                                type: "edit",
-                                onClick: (tierData: Tier) => {
-                                  setSelectedTier(tierData);
-                                  setUpdateCredentialsOpen(true);
-                                },
+                        <DataTable
+                          itemActions={[
+                            {
+                              type: "edit",
+                              onClick: (tierData: Tier) => {
+                                setSelectedTier(tierData);
+                                setUpdateCredentialsOpen(true);
                               },
-                            ]}
-                            columns={[
-                              {
-                                label: "Tier Name",
-                                elementKey: "type",
-                                renderFunction: renderTierName,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Status",
-                                elementKey: "status",
-                                renderFunction: renderTierStatus,
-                                width: 50,
-                              },
-                              {
-                                label: "Type",
-                                elementKey: "type",
-                                renderFunction: renderTierType,
-                                width: 50,
-                              },
-                              {
-                                label: "Endpoint",
-                                elementKey: "type",
-                                renderFunction: renderTierEndpoint,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Bucket",
-                                elementKey: "type",
-                                renderFunction: renderTierBucket,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Prefix",
-                                elementKey: "type",
-                                renderFunction: renderTierPrefix,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Region",
-                                elementKey: "type",
-                                renderFunction: renderTierRegion,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Usage",
-                                elementKey: "type",
-                                renderFunction: renderTierUsage,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Objects",
-                                elementKey: "type",
-                                renderFunction: renderTierObjects,
-                                renderFullObject: true,
-                              },
-                              {
-                                label: "Versions",
-                                elementKey: "type",
-                                renderFunction: renderTierVersions,
-                                renderFullObject: true,
-                              },
-                            ]}
-                            isLoading={isLoading}
-                            records={filteredRecords}
-                            entityName="Tiers"
-                            idField="service_name"
-                            customPaperHeight={classes.customConfigurationPage}
-                          />
-                        </Box>
+                            },
+                          ]}
+                          columns={[
+                            {
+                              label: "Tier Name",
+                              elementKey: "type",
+                              renderFunction: renderTierName,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Status",
+                              elementKey: "status",
+                              renderFunction: renderTierStatus,
+                              width: 50,
+                            },
+                            {
+                              label: "Type",
+                              elementKey: "type",
+                              renderFunction: renderTierType,
+                              width: 50,
+                            },
+                            {
+                              label: "Endpoint",
+                              elementKey: "type",
+                              renderFunction: renderTierEndpoint,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Bucket",
+                              elementKey: "type",
+                              renderFunction: renderTierBucket,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Prefix",
+                              elementKey: "type",
+                              renderFunction: renderTierPrefix,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Region",
+                              elementKey: "type",
+                              renderFunction: renderTierRegion,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Usage",
+                              elementKey: "type",
+                              renderFunction: renderTierUsage,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Objects",
+                              elementKey: "type",
+                              renderFunction: renderTierObjects,
+                              renderFullObject: true,
+                            },
+                            {
+                              label: "Versions",
+                              elementKey: "type",
+                              renderFunction: renderTierVersions,
+                              renderFullObject: true,
+                            },
+                          ]}
+                          isLoading={isLoading}
+                          records={filteredRecords}
+                          entityName="Tiers"
+                          idField="service_name"
+                          customPaperHeight={"400px"}
+                        />
                       </SecureComponent>
                     </Grid>
                     <Grid
@@ -502,40 +464,36 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
                   </Fragment>
                 )}
                 {records.length === 0 && (
-                  <Grid
-                    container
-                    justifyContent={"center"}
-                    alignContent={"center"}
-                    alignItems={"center"}
-                  >
-                    <Grid item xs={8}>
-                      <HelpBox
-                        title={"Tiers"}
-                        iconComponent={<TiersIcon />}
-                        help={
-                          <Fragment>
-                            Tiers are used by the MinIO Object Lifecycle
-                            Management which 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 />
-                            {hasSetTier ? (
-                              <div>
-                                To get started,{" "}
-                                <AButton onClick={addTier}>Create Tier</AButton>
-                                .
-                              </div>
-                            ) : (
-                              ""
-                            )}
-                          </Fragment>
-                        }
-                      />
-                    </Grid>
-                  </Grid>
+                  <HelpBox
+                    title={"Tiers"}
+                    iconComponent={<TiersIcon />}
+                    help={
+                      <Fragment>
+                        Tiers are used by the MinIO Object Lifecycle Management
+                        which 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 />
+                        {hasSetTier ? (
+                          <div>
+                            To get started,{" "}
+                            <ActionLink
+                              isLoading={false}
+                              label={""}
+                              onClick={addTier}
+                            >
+                              Create Tier
+                            </ActionLink>
+                            .
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </Fragment>
+                    }
+                  />
                 )}
               </Fragment>
             )}
@@ -546,4 +504,4 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
   );
 };
 
-export default withStyles(styles)(ListTiersConfiguration);
+export default ListTiersConfiguration;
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx
index 55d719975..8f643e6fb 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx
@@ -13,8 +13,9 @@
 //
 // 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 { Grid, IconButton, InputLabel, Tooltip } from "@mui/material";
+import { Grid, IconButton, InputLabel, Tooltip } from "mds";
 import { InputProps as StandardInputProps } from "@mui/material/Input";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -127,19 +128,14 @@ const RegionSelectWrapper = ({
         )}
       >
         {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={
-              noLabelMinWidth ? classes.noMinWidthLabel : classes.inputLabel
-            }
-          >
+          <InputLabel htmlFor={id} noMinWidth={noLabelMinWidth}>
             <span>
               {label}
               {required ? "*" : ""}
             </span>
             {tooltip !== "" && (
               <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
+                <Tooltip tooltip={tooltip} placement="top">
                   <div className={classes.tooltip}>
                     <HelpIcon />
                   </div>
@@ -171,9 +167,6 @@ const RegionSelectWrapper = ({
                 }
                 id={overlayId}
                 size={"small"}
-                disableFocusRipple={false}
-                disableRipple={false}
-                disableTouchRipple={false}
               >
                 {overlayIcon}
               </IconButton>
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
index 33a4be243..a50193dbe 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
@@ -15,9 +15,39 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box, Grid } from "@mui/material";
+import styled from "styled-components";
+import get from "lodash/get";
 
-import { Button } from "mds";
+const TierButtonBase = styled.button(({ theme }) => ({
+  background: get(theme, "boxBackground", "#FFF"),
+  border: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+  borderRadius: 5,
+  height: 80,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "start",
+  marginBottom: 16,
+  marginRight: 8,
+  cursor: "pointer",
+  overflow: "hidden",
+  "&:hover": {
+    backgroundColor: get(theme, "buttons.regular.hover.background", "#ebebeb"),
+  },
+  "& .imageContainer": {
+    width: 80,
+    "& .min-icon": {
+      maxWidth: 46,
+      maxHeight: 46,
+    },
+  },
+  "& .tierNotifTitle": {
+    color: get(theme, "buttons.callAction.enabled.background", "#07193E"),
+    fontSize: 16,
+    fontFamily: "Inter,sans-serif",
+    paddingLeft: 18,
+    fontWeight: "bold",
+  },
+}));
 
 type TierTypeCardProps = {
   onClick: (name: string) => void;
@@ -25,54 +55,15 @@ type TierTypeCardProps = {
   name: string;
 };
 const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
-  const styles = {
-    tierTypeCard: {
-      height: "80px",
-      width: "auto",
-      display: "flex",
-      alignItems: "center",
-      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
-      id={name}
+    <TierButtonBase
       onClick={() => {
         onClick(name);
       }}
-      style={styles.tierTypeCard}
     >
-      <Grid container alignItems={"center"}>
-        {icon ? (
-          <Grid item padding={1} xs={4}>
-            <Box
-              sx={{
-                "& .min-icon": {
-                  height: "30px",
-                  width: "30px",
-                },
-              }}
-            >
-              {icon}
-            </Box>
-          </Grid>
-        ) : null}
-        <Grid item xs={8} style={styles.tierTypeTitle} paddingLeft={1}>
-          {name}
-        </Grid>
-      </Grid>
-    </Button>
+      <span className={"imageContainer"}>{icon}</span>
+      <span className={"tierNotifTitle"}>{name}</span>
+    </TierButtonBase>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
index 2a30189dd..723c6106e 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
@@ -16,47 +16,25 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
-import { Button, LockIcon } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { LinearProgress } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import {
-  formFieldStyles,
-  modalBasic,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { setModalErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
+import { Button, FormLayout, Grid, InputBox, LockIcon, ProgressBar } from "mds";
 import { Tier } from "api/consoleApi";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import { setModalErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 
 interface ITierCredentialsModal {
   open: boolean;
   closeModalAndRefresh: (refresh: boolean) => any;
-  classes: any;
   tierData: Tier;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-    },
-    ...modalBasic,
-    ...formFieldStyles,
-  });
-
 const UpdateTierCredentialsModal = ({
   open,
   closeModalAndRefresh,
-  classes,
   tierData,
 }: ITierCredentialsModal) => {
   const dispatch = useAppDispatch();
@@ -142,98 +120,88 @@ const UpdateTierCredentialsModal = ({
           addRecord();
         }}
       >
-        <Grid container>
-          <Grid item xs={12}>
-            {(type === "s3" || type === "minio") && (
-              <Fragment>
-                <div className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="accessKey"
-                    name="accessKey"
-                    label="Access Key"
-                    placeholder="Enter Access Key"
-                    value={accountName}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setAccountName(e.target.value);
-                    }}
-                  />
-                </div>
-                <div className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="secretKey"
-                    name="secretKey"
-                    label="Secret Key"
-                    placeholder="Enter Secret Key"
-                    value={accountKey}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setAccountKey(e.target.value);
-                    }}
-                  />
-                </div>
-              </Fragment>
-            )}
-            {type === "gcs" && (
-              <Fragment>
-                <FileSelector
-                  accept=".json"
-                  id="creds"
-                  label="Credentials"
-                  name="creds"
-                  onChange={(encodedValue, fileName) => {
-                    setEncodedCreds(encodedValue);
-                    setCreds(fileName);
-                  }}
-                  value={creds}
-                />
-              </Fragment>
-            )}
-            {type === "azure" && (
-              <Fragment>
-                <div className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="accountName"
-                    name="accountName"
-                    label="Account Name"
-                    placeholder="Enter Account Name"
-                    value={accountName}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setAccountName(e.target.value);
-                    }}
-                  />
-                </div>
-                <div className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="accountKey"
-                    name="accountKey"
-                    label="Account Key"
-                    placeholder="Enter Account Key"
-                    value={accountKey}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setAccountKey(e.target.value);
-                    }}
-                  />
-                </div>
-              </Fragment>
-            )}
-          </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
-            <Button
-              id={"save-credentials"}
-              type="submit"
-              variant="callAction"
-              disabled={savingTiers || !isFormValid}
-              label={"Save"}
-            />
-          </Grid>
-          {savingTiers && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
+        <FormLayout withBorders={false} containerPadding={false}>
+          {(type === "s3" || type === "minio") && (
+            <Fragment>
+              <InputBox
+                id="accessKey"
+                name="accessKey"
+                label="Access Key"
+                placeholder="Enter Access Key"
+                value={accountName}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccountName(e.target.value);
+                }}
+              />
+              <InputBox
+                id="secretKey"
+                name="secretKey"
+                label="Secret Key"
+                placeholder="Enter Secret Key"
+                value={accountKey}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccountKey(e.target.value);
+                }}
+              />
+            </Fragment>
           )}
+          {type === "gcs" && (
+            <Fragment>
+              <FileSelector
+                accept=".json"
+                id="creds"
+                label="Credentials"
+                name="creds"
+                onChange={(encodedValue, fileName) => {
+                  setEncodedCreds(encodedValue);
+                  setCreds(fileName);
+                }}
+                value={creds}
+              />
+            </Fragment>
+          )}
+          {type === "azure" && (
+            <Fragment>
+              <InputBox
+                id="accountName"
+                name="accountName"
+                label="Account Name"
+                placeholder="Enter Account Name"
+                value={accountName}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccountName(e.target.value);
+                }}
+              />
+              <InputBox
+                id="accountKey"
+                name="accountKey"
+                label="Account Key"
+                placeholder="Enter Account Key"
+                value={accountKey}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccountKey(e.target.value);
+                }}
+              />
+            </Fragment>
+          )}
+        </FormLayout>
+        {savingTiers && (
+          <Grid item xs={12}>
+            <ProgressBar />
+          </Grid>
+        )}
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+          <Button
+            id={"save-credentials"}
+            type="submit"
+            variant="callAction"
+            disabled={savingTiers || !isFormValid}
+            label={"Save"}
+          />
         </Grid>
       </form>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(UpdateTierCredentialsModal);
+export default UpdateTierCredentialsModal;