MDS Console improvements (#3102)

- Removed mui badge component
- Updated icons screen
- Migrated Wizard Component
- Improved modals styles
- Updated KMS Status page

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx

@@ -27,10 +27,10 @@ import {
   Switch,
   Tooltip,
   WarnIcon,
+  Wizard,
 } from "mds";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import { ITiersDropDown } from "../types";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
@@ -196,20 +196,23 @@ const AddBulkReplicationModal = ({
       }}
       title="Set Lifecycle to multiple buckets"
     >
-      <GenericWizard
+      <Wizard
         loadingStep={addLoading || loadingTiers}
         wizardSteps={[
           {
             label: "Lifecycle Configuration",
             componentRender: (
               <Fragment>
-                <Grid item xs={12}>
-                  <ReadBox label="Local Buckets to replicate">
-                    {buckets.join(", ")}
-                  </ReadBox>
-                </Grid>
-                <h4>Remote Endpoint Configuration</h4>
                 <FormLayout withBorders={false} containerPadding={false}>
+                  <Grid item xs={12}>
+                    <ReadBox
+                      label="Local Buckets to replicate"
+                      sx={{ maxWidth: "440px", width: "100%" }}
+                    >
+                      {buckets.join(", ")}
+                    </ReadBox>
+                  </Grid>
+                  <h4>Remote Endpoint Configuration</h4>
                   <fieldset className={"inputItem"}>
                     <legend>Lifecycle Configuration</legend>
                     <RadioGroup

portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx

@@ -19,17 +19,16 @@ import {
   Box,
   CheckCircleIcon,
   FormLayout,
-  Grid,
   InputBox,
   ReadBox,
   Select,
   Switch,
   Tooltip,
   WarnIcon,
+  Wizard,
 } from "mds";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
@@ -302,28 +301,26 @@ const AddBulkReplicationModal = ({
       }}
       title="Set Multiple Bucket Replication"
     >
-      <GenericWizard
+      <Wizard
         loadingStep={addLoading || externalLoading}
         wizardSteps={[
           {
             label: "Remote Configuration",
             componentRender: (
               <Fragment>
-                <Grid item xs={12}>
+                <FormLayout containerPadding={false} withBorders={false}>
                   <ReadBox
-                    sx={{ width: "100%" }}
                     label="Local Buckets to replicate"
+                    sx={{ maxWidth: "440px", width: "100%" }}
                   >
                     {bucketsToAlter.join(", ")}
                   </ReadBox>
-                </Grid>
-                <h4>Remote Endpoint Configuration</h4>
-                <span style={{ fontSize: 14 }}>
-                  Please avoid the use of root credentials for this feature
-                </span>
-                <br />
-                <br />
-                <FormLayout containerPadding={false} withBorders={false}>
+                  <h4>Remote Endpoint Configuration</h4>
+                  <span style={{ fontSize: 14 }}>
+                    Please avoid the use of root credentials for this feature
+                    <br />
+                    <br />
+                  </span>
                   <InputBox
                     id="accessKey"
                     name="accessKey"

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -39,9 +39,9 @@ import {
   RefreshIcon,
   ScreenTitle,
   ShareIcon,
+  Badge,
 } from "mds";
 import { api } from "api";
-import { Badge } from "@mui/material"; // TODO: Remove this
 import { errorToHandler } from "api/errors";
 import { BucketQuota } from "api/consoleApi";
 import { useSelector } from "react-redux";
@@ -1029,14 +1029,7 @@ const ListObjects = () => {
                       id={"rewind-objects-list"}
                       label={"Rewind"}
                       icon={
-                        <Badge
-                          badgeContent=" "
-                          color="secondary"
-                          variant="dot"
-                          invisible={!rewindEnabled}
-                          className={""}
-                          sx={{ height: 16 }}
-                        >
+                        <Badge color="alert" dotOnly invisible={!rewindEnabled}>
                           <HistoryIcon
                             style={{
                               minWidth: 16,

portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx

@@ -216,6 +216,7 @@ const QueryMultiSelector = ({
             fontWeight: 600,
           },
         }}
+        className={"inputItem"}
       >
         <InputLabel>
           {label}

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -104,33 +104,6 @@ export const tooltipHelper = {
   },
 };
 
-export const containerForHeader = {
-  container: {
-    position: "relative" as const,
-    padding: "20px 35px 0",
-    "& h6": {
-      color: "#777777",
-      fontSize: 30,
-    },
-    "& p": {
-      "& span:not(*[class*='smallUnit'])": {
-        fontSize: 16,
-      },
-    },
-  },
-  sectionTitle: {
-    margin: 0,
-    marginBottom: ".8rem",
-    fontSize: "1.3rem",
-  },
-  boxy: {
-    border: "#E5E5E5 1px solid",
-    borderRadius: 2,
-    padding: 40,
-    backgroundColor: "#fff",
-  },
-};
-
 export const actionsTray = {
   label: {
     color: "#07193E",