minio · dvaldivia · Oct 24, 2023 · Oct 24, 2023
diff --git a/portal-ui/package.json b/portal-ui/package.json
@@ -17,7 +17,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.4.3",
-    "mds": "https://github.com/minio/mds.git#v0.9.6",
+    "mds": "https://github.com/minio/mds.git#v0.10.0",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx
@@ -17,6 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import {
   Box,
+  CheckCircleIcon,
   FormLayout,
   Grid,
   InputBox,
@@ -25,10 +26,9 @@ import {
   Select,
   Switch,
   Tooltip,
+  WarnIcon,
 } from "mds";
 import get from "lodash/get";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
@@ -117,7 +117,7 @@ const AddBulkReplicationModal = ({
               color: "#42C91A",
             }}
           >
-            <CheckCircleOutlineIcon />
+            <CheckCircleIcon />
           </Box>
         );
       case "n/a":
@@ -132,7 +132,7 @@ const AddBulkReplicationModal = ({
               }}
             >
               <Tooltip tooltip={errString} placement="top">
-                <ErrorOutlineIcon />
+                <WarnIcon />
               </Tooltip>
             </Box>
           );

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
@@ -17,17 +17,17 @@
 import React, { Fragment, useEffect, useState } from "react";
 import {
   Box,
+  CheckCircleIcon,
   FormLayout,
   Grid,
   InputBox,
   ReadBox,
   Select,
   Switch,
   Tooltip,
+  WarnIcon,
 } from "mds";
 import get from "lodash/get";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
@@ -208,7 +208,7 @@ const AddBulkReplicationModal = ({
               color: "#42C91A",
             }}
           >
-            <CheckCircleOutlineIcon />
+            <CheckCircleIcon />
           </Box>
         );
       case "n/a":
@@ -222,7 +222,7 @@ const AddBulkReplicationModal = ({
               }}
             >
               <Tooltip tooltip={errString} placement="top">
-                <ErrorOutlineIcon />
+                <WarnIcon />
               </Tooltip>
             </Box>
           );

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
@@ -15,11 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Button, OpenListIcon, SyncIcon, Grid, Box, breakPoints } from "mds";
+import {
+  Button,
+  OpenListIcon,
+  SyncIcon,
+  Grid,
+  Box,
+  breakPoints,
+  TimeIcon,
+} from "mds";
 import { DateTime } from "luxon";
-
-import ScheduleIcon from "@mui/icons-material/Schedule";
-import WatchLaterIcon from "@mui/icons-material/WatchLater";
 import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";
 
 interface IDateRangeSelector {
@@ -154,7 +159,7 @@ const DateRangeSelector = ({
                 },
               }}
             >
-              <ScheduleIcon className="min-icon" />
+              <TimeIcon />
             </Box>
             <Box
               sx={{
@@ -197,7 +202,7 @@ const DateRangeSelector = ({
                 },
               }}
             >
-              <WatchLaterIcon className="min-icon" />
+              <TimeIcon />
             </Box>
             <Box
               sx={{

diff --git a/portal-ui/src/screens/Console/Configurations/utils.tsx b/portal-ui/src/screens/Console/Configurations/utils.tsx
@@ -14,16 +14,18 @@
 // 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 PublicIcon from "@mui/icons-material/Public";
-import CompressIcon from "@mui/icons-material/Compress";
-import CodeIcon from "@mui/icons-material/Code";
-import LocalHospitalIcon from "@mui/icons-material/LocalHospital";
-import FindReplaceIcon from "@mui/icons-material/FindReplace";
-import VpnKeyIcon from "@mui/icons-material/VpnKey";
-import PendingActionsIcon from "@mui/icons-material/PendingActions";
-import CallToActionIcon from "@mui/icons-material/CallToAction";
 import { IElement, IElementValue, IOverrideEnv, OverrideValue } from "./types";
-import { LogsIcon } from "mds";
+import {
+  CodeIcon,
+  CompressIcon,
+  ConsoleIcon,
+  FindReplaceIcon,
+  FirstAidIcon,
+  KeyIcon,
+  LogsIcon,
+  PendingItemsIcon,
+  PublicIcon,
+} from "mds";
 
 export const configurationElements: IElement[] = [
   {
@@ -42,7 +44,7 @@ export const configurationElements: IElement[] = [
     configuration_label: "API",
   },
   {
-    icon: <LocalHospitalIcon />,
+    icon: <FirstAidIcon />,
     configuration_id: "heal",
     configuration_label: "Heal",
   },
@@ -52,29 +54,22 @@ export const configurationElements: IElement[] = [
     configuration_label: "Scanner",
   },
   {
-    icon: <VpnKeyIcon />,
+    icon: <KeyIcon />,
     configuration_id: "etcd",
     configuration_label: "Etcd",
   },
   {
-    icon: <CallToActionIcon />,
+    icon: <ConsoleIcon />,
     configuration_id: "logger_webhook",
     configuration_label: "Logger Webhook",
   },
   {
-    icon: <PendingActionsIcon />,
+    icon: <PendingItemsIcon />,
     configuration_id: "audit_webhook",
     configuration_label: "Audit Webhook",
   },
   {
-    icon: (
-      <LogsIcon
-        className={
-          "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
-        }
-        style={{ width: 24, height: 24 }}
-      />
-    ),
+    icon: <LogsIcon />,
     configuration_id: "audit_kafka",
     configuration_label: "Audit Kafka",
   },

diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box } from "mds";
-import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
+import { Box, ExpandIcon } from "mds";
 
 import { IDashboardPanel } from "../types";
 
@@ -59,7 +58,7 @@ const ExpandGraphLink = ({ panelItem }: { panelItem: IDashboardPanel }) => {
         }}
         className={"zoom-graph-icon"}
       >
-        <ZoomOutMapIcon />
+        <ExpandIcon />
       </button>
     </Box>
   );

diff --git a/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/AddEndpointModal.tsx b/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/AddEndpointModal.tsx
@@ -15,13 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { Button, FormLayout, Grid, InputBox, ProgressBar } from "mds";
+import {
+  Button,
+  ConsoleIcon,
+  FormLayout,
+  Grid,
+  InputBox,
+  PendingItemsIcon,
+  ProgressBar,
+  WebhookIcon,
+} from "mds";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Webhook } from "@mui/icons-material";
-import CallToActionIcon from "@mui/icons-material/CallToAction";
-import PendingActionsIcon from "@mui/icons-material/PendingActions";
 import {
   configurationIsLoading,
   setErrorSnackMessage,
@@ -126,16 +132,16 @@ const AddEndpointModal = ({ open, type, onCloseEndpoint }: IEndpointModal) => {
   };
 
   let title = "Add new Webhook";
-  let icon = <Webhook />;
+  let icon = <WebhookIcon />;
 
   switch (type) {
     case "logger_webhook":
       title = "New Logger Webhook";
-      icon = <CallToActionIcon />;
+      icon = <ConsoleIcon />;
       break;
     case "audit_webhook":
       title = "New Audit Webhook";
-      icon = <PendingActionsIcon />;
+      icon = <PendingItemsIcon />;
       break;
   }
 

diff --git a/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx b/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx
@@ -21,16 +21,15 @@ import {
   FormLayout,
   Grid,
   InputBox,
+  PendingItemsIcon,
   ProgressBar,
   ReadBox,
   Switch,
   Tooltip,
+  WebhookIcon,
 } from "mds";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Webhook } from "@mui/icons-material";
 import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
-import CallToActionIcon from "@mui/icons-material/CallToAction";
-import PendingActionsIcon from "@mui/icons-material/PendingActions";
 import {
   configurationIsLoading,
   setErrorSnackMessage,
@@ -182,16 +181,16 @@ const EditEndpointModal = ({
   const overrideValues = overrideFields(hasOverride);
 
   let title = "Edit Webhook";
-  let icon = <Webhook />;
+  let icon = <WebhookIcon />;
 
   switch (type) {
     case "logger_webhook":
       title = `Edit ${defaultWH ? " the Default " : ""}Logger Webhook`;
-      icon = <CallToActionIcon />;
+      icon = <ConsoleIcon />;
       break;
     case "audit_webhook":
       title = `Edit ${defaultWH ? " the Default " : ""}Audit Webhook`;
-      icon = <PendingActionsIcon />;
+      icon = <PendingItemsIcon />;
       break;
   }
 

diff --git a/portal-ui/src/screens/Console/IDP/utils.tsx b/portal-ui/src/screens/Console/IDP/utils.tsx
@@ -14,8 +14,7 @@
 // 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 LoginIcon from "@mui/icons-material/Login";
-import { LockIcon } from "mds";
+import { LockIcon, LoginIcon } from "mds";
 
 export const ldapHelpBoxContents = [
   {

diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx
@@ -16,12 +16,12 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import clsx from "clsx";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import {
   AGPLV3Logo,
   Box,
   breakPoints,
   Button,
+  CheckCircleIcon,
   ConsoleEnterprise,
   ConsoleStandard,
   LicenseDocIcon,

diff --git a/portal-ui/src/screens/Console/valid-routes.tsx b/portal-ui/src/screens/Console/valid-routes.tsx
@@ -38,6 +38,8 @@ import {
   InspectMenuIcon,
   LambdaIcon,
   LicenseIcon,
+  LockOpenIcon,
+  LoginIcon,
   LogsMenuIcon,
   MetricsMenuIcon,
   MonitoringMenuIcon,
@@ -54,7 +56,6 @@ import {
 import { hasPermission } from "../../common/SecureComponent";
 import EncryptionIcon from "../../icons/SidebarMenus/EncryptionIcon";
 import EncryptionStatusIcon from "../../icons/SidebarMenus/EncryptionStatusIcon";
-import { LockOpen, Login } from "@mui/icons-material";
 
 const permissionsValidation = (item: IMenuItem) => {
   return (
@@ -169,13 +170,13 @@ export const validRoutes = (
           name: "OpenID",
           id: "openID",
           path: IAM_PAGES.IDP_OPENID_CONFIGURATIONS,
-          icon: <LockOpen />,
+          icon: <LockOpenIcon />,
         },
         {
           name: "LDAP",
           id: "ldap",
           path: IAM_PAGES.IDP_LDAP_CONFIGURATIONS,
-          icon: <Login />,
+          icon: <LoginIcon />,
         },
       ],
     },

diff --git a/portal-ui/src/screens/LoginPage/LoginCallback.tsx b/portal-ui/src/screens/LoginPage/LoginCallback.tsx
@@ -24,8 +24,7 @@ import { baseUrl } from "../../history";
 import { Paper } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import { Button } from "mds";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { Button, WarnIcon } from "mds";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -160,7 +159,7 @@ const LoginCallback = ({ classes }: ILoginCallBackProps) => {
           <Grid item xs={5} className={classes.theLogin}>
             <div className={classes.errorTitle}>
               <span className={classes.messageIcon}>
-                <ErrorOutlineIcon />
+                <WarnIcon />
               </span>
               <span className={classes.errorLabel}>Error from IDP</span>
             </div>

diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
@@ -8412,9 +8412,9 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-"mds@https://github.com/minio/mds.git#v0.9.6":
-  version "0.9.6"
-  resolved "https://github.com/minio/mds.git#e28dbbcc1a8df99c7cb0fc0c8e65d1d397f8761e"
+"mds@https://github.com/minio/mds.git#v0.10.0":
+  version "0.10.0"
+  resolved "https://github.com/minio/mds.git#6432ab89ec46b16e0908503758045b00b19334f8"
   dependencies:
     "@types/styled-components" "^5.1.28"
     "@uiw/react-textarea-code-editor" "^2.1.9"