Replaced Notification components with mds variants (#3103)

Replaced Notification components for mds variants

- Updated Warning Message components
- Replaced Snackbar component

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

Author: bexsoft

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.10.0",
+    "mds": "https://github.com/minio/mds.git#v0.10.1",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx

@@ -14,14 +14,15 @@
 // 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, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import {
   Button,
   ChangePasswordIcon,
   InputBox,
   Grid,
   FormLayout,
   ProgressBar,
+  InformativeMessage,
 } from "mds";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
@@ -35,7 +36,6 @@ import { useAppDispatch } from "../../../store";
 import { api } from "api";
 import { AccountChangePasswordRequest, ApiError } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
-import WarningMessage from "../Common/WarningMessage/WarningMessage";
 
 interface IChangePasswordProps {
   open: boolean;
@@ -120,24 +120,24 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
         This will change your Console password. Please note your new password
         down, as it will be required to log into Console after this session.
       </div>
-      <WarningMessage
-        title={""}
-        label={
-          <div>
-            <div>
-              If you are looking to change MINIO_ROOT_USER credentials, Please
-              refer to{" "}
-              <a
-                target="_blank"
-                rel="noopener"
-                href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html#id4?ref=con"
-              >
-                rotating
-              </a>{" "}
-              credentials .
-            </div>
-          </div>
+      <InformativeMessage
+        variant={"warning"}
+        title={"Warning"}
+        message={
+          <Fragment>
+            If you are looking to change MINIO_ROOT_USER credentials, <br />
+            Please refer to{" "}
+            <a
+              target="_blank"
+              rel="noopener"
+              href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html#id4?ref=con"
+            >
+              rotating
+            </a>{" "}
+            credentials.
+          </Fragment>
         }
+        sx={{ margin: "15px 0" }}
       />
       <form
         noValidate

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

@@ -15,13 +15,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
-import { ProgressBar, Grid, Box } from "mds";
+import { ProgressBar, Grid, Box, InformativeMessage } from "mds";
 import get from "lodash/get";
 import { BucketObjectItem } from "../ListObjects/types";
 import { AllowedPreviews, previewObjectType } from "../utils";
 import { encodeURLString } from "../../../../../../common/utils";
 import { api } from "../../../../../../api";
-import WarningMessage from "../../../../Common/WarningMessage/WarningMessage";
 
 interface IPreviewFileProps {
   bucketName: string;
@@ -177,10 +176,12 @@ const PreviewFile = ({
           )}
           {objectType === "none" && (
             <div>
-              <WarningMessage
-                label=" File couldn't be previewed using file extension or mime type. Please
+              <InformativeMessage
+                variant={"error"}
+                message=" File couldn't be previewed using file extension or mime type. Please
             try Download instead"
-                title="Preview unavailable "
+                title="Preview unavailable"
+                sx={{ margin: "15px 0" }}
               />
             </div>
           )}

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

@@ -368,45 +368,6 @@ export const formFieldStyles: any = {
   },
 };
 
-export const deleteDialogStyles: any = {
-  root: {
-    "& .MuiPaper-root": {
-      padding: "1rem 2rem 2rem 1rem",
-    },
-  },
-  title: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 600,
-    display: "flex",
-    alignItems: "center",
-    "& svg": {
-      marginRight: 10,
-    },
-    wordBreak: "break-all",
-    whiteSpace: "normal",
-  },
-  closeContainer: {
-    "& .MuiIconButton-root": {
-      top: -20,
-      left: 30,
-      position: "relative",
-      padding: 1,
-      "&:focus, &:hover": {
-        background: "#EAEAEA",
-      },
-    },
-    "& .min-icon": {
-      height: 16,
-      width: 16,
-    },
-  },
-};
-
 export const modalStyleUtils: any = {
   modalButtonBar: {
     marginTop: 15,

portal-ui/src/screens/Console/Common/MainError/MainError.tsx

@@ -15,12 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback, useEffect, useState } from "react";
+import { Snackbar } from "mds";
 import { useSelector } from "react-redux";
 import get from "lodash/get";
 import { AppState, useAppDispatch } from "../../../../store";
-
-import { AlertCloseIcon, Box, breakPoints } from "mds";
-import { Portal } from "@mui/base";
 import {
   setErrorSnackMessage,
   setModalSnackMessage,
@@ -30,16 +28,6 @@ interface IMainErrorProps {
   isModal?: boolean;
 }
 
-let timerI: any;
-
-const startHideTimer = (callbackFunction: () => void) => {
-  timerI = setInterval(callbackFunction, 10000);
-};
-
-const stopHideTimer = () => {
-  clearInterval(timerI);
-};
-
 const MainError = ({ isModal = false }: IMainErrorProps) => {
   const dispatch = useAppDispatch();
   const snackBar = useSelector((state: AppState) => {
@@ -55,15 +43,13 @@ const MainError = ({ isModal = false }: IMainErrorProps) => {
     if (!displayErrorMsg) {
       dispatch(setErrorSnackMessage({ detailedError: "", errorMessage: "" }));
       dispatch(setModalSnackMessage(""));
-      clearInterval(timerI);
     }
   }, [dispatch, displayErrorMsg]);
 
   useEffect(() => {
     if (snackBar.message !== "" && snackBar.type === "error") {
       //Error message received, we trigger the animation
       setDisplayErrorMsg(true);
-      startHideTimer(closeErrorMessage);
     }
   }, [closeErrorMessage, snackBar.message, snackBar.type]);
 
@@ -75,91 +61,14 @@ const MainError = ({ isModal = false }: IMainErrorProps) => {
   }
 
   return (
-    <Portal>
-      <Box
-        sx={{
-          "&.alert": {
-            border: 0,
-            left: 0,
-            right: 0,
-            top: 0,
-            height: "75px",
-            position: "fixed",
-            color: "#ffffff",
-            padding: "0 30px 0 30px",
-            zIndex: 10000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            fontWeight: 600,
-            backgroundColor: "#C72C48",
-            opacity: 0,
-            width: "100%",
-
-            "&.show": {
-              opacity: 1,
-            },
-          },
-          "& .message-text": {
-            flex: 2,
-            fontSize: "14px",
-            textAlign: "center",
-            [`@media (max-width: ${breakPoints.sm}px)`]: {
-              textAlign: "left",
-            },
-          },
-
-          "& .close-btn-container": {
-            cursor: "pointer",
-            border: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            marginLeft: 0,
-            [`@media (max-width: ${breakPoints.sm}px)`]: {
-              marginLeft: 10,
-            },
-
-            "& .close-btn": {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "23px",
-              width: "23px",
-              borderRadius: "50%",
-
-              border: 0,
-              backgroundColor: "transparent",
-              cursor: "pointer",
-
-              "&:hover,&:focus": {
-                border: 0,
-                outline: 0,
-                backgroundColor: "#ba0202",
-              },
-              "& .min-icon": {
-                height: "11px",
-                width: "11px",
-                fill: "#ffffff",
-              },
-            },
-          },
-        }}
-        onMouseOver={stopHideTimer}
-        onMouseLeave={() => startHideTimer(closeErrorMessage)}
-        className={`alert ${displayErrorMsg ? "show" : ""}`}
-      >
-        <div className="message-text">
-          {messageDetails ? messageDetails : `${message}.`}
-        </div>
-        <div className="close-btn-container">
-          <button className="close-btn" autoFocus onClick={closeErrorMessage}>
-            <AlertCloseIcon />
-          </button>
-        </div>
-      </Box>
-    </Portal>
+    <Snackbar
+      onClose={closeErrorMessage}
+      open={displayErrorMsg}
+      variant={"error"}
+      message={messageDetails ? messageDetails : `${message}.`}
+      autoHideDuration={10}
+      closeButton
+    />
   );
 };
 

portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx

@@ -15,22 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import Snackbar from "@mui/material/Snackbar";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  deleteDialogStyles,
-  snackBarCommon,
-} from "../FormComponents/common/styleLibrary";
+import { ModalBox, Snackbar } from "mds";
+import { CSSObject } from "styled-components";
 import { AppState, useAppDispatch } from "../../../../store";
-import MainError from "../MainError/MainError";
 import { setModalSnackMessage } from "../../../../systemSlice";
-import { ModalBox } from "mds";
-import { CSSObject } from "styled-components";
+import MainError from "../MainError/MainError";
 
 interface IModalProps {
-  classes: any;
   onClose: () => void;
   modalOpen: boolean;
   title: string | React.ReactNode;
@@ -41,18 +32,11 @@ interface IModalProps {
   sx?: CSSObject;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...deleteDialogStyles,
-    ...snackBarCommon,
-  });
-
 const ModalWrapper = ({
   onClose,
   modalOpen,
   title,
   children,
-  classes,
   wideLimit = true,
   titleIcon = null,
   iconColor = "default",
@@ -111,26 +95,17 @@ const ModalWrapper = ({
     >
       <MainError isModal={true} />
       <Snackbar
+        onClose={closeSnackBar}
         open={openSnackbar}
-        className={classes.snackBarModal}
-        onClose={() => {
-          closeSnackBar();
-        }}
         message={message}
-        ContentProps={{
-          className: `${classes.snackBar} ${
-            modalSnackMessage && modalSnackMessage.type === "error"
-              ? classes.errorSnackBar
-              : ""
-          }`,
-        }}
-        autoHideDuration={
-          modalSnackMessage && modalSnackMessage.type === "error" ? 10000 : 5000
-        }
+        mode={"inline"}
+        variant={modalSnackMessage.type === "error" ? "error" : "default"}
+        autoHideDuration={modalSnackMessage.type === "error" ? 10 : 5}
+        condensed
       />
       {children}
     </ModalBox>
   );
 };
 
-export default withStyles(styles)(ModalWrapper);
+export default ModalWrapper;