UX error alert banner (#1620)

portal-ui/src/icons/AlertCloseIcon.tsx

@@ -0,0 +1,68 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const AlertCloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    width="11"
+    height="11"
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-alert-close-icon">
+        <rect
+          id="Rectángulo_1612"
+          data-name="Rectángulo 1612"
+          width="256"
+          height="256"
+          fill="none"
+        />
+      </clipPath>
+      <clipPath id="clip-path-2-alert-close-icon">
+        <rect
+          id="Rectángulo_1611"
+          data-name="Rectángulo 1611"
+          width="256"
+          height="256"
+        />
+      </clipPath>
+    </defs>
+    <g id="AlertCloseIcon" clipPath="url(#clip-path-alert-close-icon)">
+      <g id="AlertCloseIcon-2" data-name="AlertCloseIcon">
+        <g
+          id="Grupo_2527"
+          data-name="Grupo 2527"
+          clipPath="url(#clip-path-2-alert-close-icon)"
+        >
+          <path
+            id="Trazado_7276"
+            data-name="Trazado 7276"
+            d="M230.082,256.006a25.853,25.853,0,0,1-18.328-7.6l-83.761-83.735L44.259,248.41A25.92,25.92,0,0,1,7.6,211.754l83.735-83.735L7.6,44.259A25.92,25.92,0,0,1,44.259,7.6l83.735,83.735L211.754,7.6A25.92,25.92,0,0,1,248.41,44.259l-83.735,83.761,83.735,83.735a25.924,25.924,0,0,1-18.328,44.252"
+            transform="translate(-0.006 -0.006)"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AlertCloseIcon;

portal-ui/src/icons/index.ts

@@ -174,3 +174,4 @@ export { default as MetadataIcon } from "./MetadataIcon";
 export { default as LegalHoldIcon } from "./LegalHoldIcon";
 export { default as RetentionIcon } from "./RetentionIcon";
 export { default as TagsIcon } from "./TagsIcon";
+export { default as AlertCloseIcon } from "./AlertCloseIcon";

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

@@ -1,243 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// 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/>.
-
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// 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, { Fragment, useCallback, useEffect, useState } from "react";
-import { connect } from "react-redux";
-import get from "lodash/get";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CloseIcon from "@mui/icons-material/Close";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { AppState } from "../../../../../store";
-import {
-  setErrorSnackMessage,
-  setModalErrorSnackMessage,
-} from "../../../../../actions";
-import { snackBarMessage } from "../../../../../types";
-
-interface ImodalErrorProps {
-  customStyle?: any;
-  classes: any;
-  modalSnackMessage: snackBarMessage;
-  displayErrorMessage: typeof setErrorSnackMessage;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    modalErrorContainer: {
-      position: "absolute",
-      marginTop: 10,
-      width: "80%",
-      backgroundColor: "#fff",
-      border: "#C72C48 1px solid",
-      borderLeftWidth: 12,
-      borderRadius: 3,
-      zIndex: 1000,
-      padding: "10px 15px",
-      left: "50%",
-      transform: "translateX(-50%)",
-      opacity: 0,
-      transitionDuration: "0.2s",
-    },
-    modalErrorShow: {
-      opacity: 1,
-    },
-    closeButton: {
-      position: "absolute",
-      right: 5,
-      fontSize: "small",
-      border: 0,
-      backgroundColor: "#fff",
-      cursor: "pointer",
-    },
-    errorTitle: {
-      display: "flex",
-      alignItems: "center",
-    },
-    errorLabel: {
-      color: "#000",
-      fontSize: 18,
-      fontWeight: 500,
-      marginLeft: 5,
-      marginRight: 25,
-    },
-    messageIcon: {
-      color: "#C72C48",
-      display: "flex",
-      "& svg": {
-        width: 32,
-        height: 32,
-      },
-    },
-    detailsButton: {
-      color: "#9C9C9C",
-      display: "flex",
-      alignItems: "center",
-      border: 0,
-      backgroundColor: "transparent",
-      paddingLeft: 5,
-      fontSize: 14,
-      transformDuration: "0.3s",
-      cursor: "pointer",
-    },
-    extraDetailsContainer: {
-      fontStyle: "italic",
-      color: "#9C9C9C",
-      lineHeight: 0,
-      padding: "0 10px",
-      transition: "all .2s ease-in-out",
-      overflow: "hidden",
-    },
-    extraDetailsOpen: {
-      lineHeight: 1,
-      padding: "3px 10px",
-    },
-    arrowElement: {
-      marginLeft: -5,
-    },
-    arrowOpen: {
-      transform: "rotateZ(90deg)",
-      transformDuration: "0.3s",
-    },
-  });
-
-var timerI: any;
-
-const startHideTimer = (callbackFunction: () => void) => {
-  timerI = setInterval(callbackFunction, 10000);
-};
-
-const stopHideTimer = () => {
-  clearInterval(timerI);
-};
-
-const ModalError = ({
-  classes,
-  modalSnackMessage,
-  displayErrorMessage,
-  customStyle,
-}: ImodalErrorProps) => {
-  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
-  const [displayErrorMsg, setDisplayErrorMsg] = useState<boolean>(false);
-
-  const closeErrorMessage = useCallback(() => {
-    setDisplayErrorMsg(false);
-  }, []);
-
-  useEffect(() => {
-    if (!displayErrorMsg) {
-      displayErrorMessage({ detailedError: "", errorMessage: "" });
-      setDetailsOpen(false);
-      //clearInterval(timerI);
-    }
-  }, [displayErrorMessage, displayErrorMsg]);
-
-  useEffect(() => {
-    if (
-      modalSnackMessage.message !== "" &&
-      modalSnackMessage.type === "error"
-    ) {
-      //Error message received, we trigger the animation
-      setDisplayErrorMsg(true);
-      //startHideTimer(closeErrorMessage);
-    }
-  }, [closeErrorMessage, modalSnackMessage.message, modalSnackMessage.type]);
-
-  const detailsToggle = () => {
-    setDetailsOpen(!detailsOpen);
-  };
-
-  const message = get(modalSnackMessage, "message", "");
-  const messageDetails = get(modalSnackMessage, "detailedErrorMsg", "");
-
-  if (modalSnackMessage.type !== "error" || message === "") {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <div
-        className={`${classes.modalErrorContainer} ${
-          displayErrorMsg ? classes.modalErrorShow : ""
-        }`}
-        style={customStyle}
-        onMouseOver={stopHideTimer}
-        onMouseLeave={() => startHideTimer(closeErrorMessage)}
-      >
-        <button className={classes.closeButton} onClick={closeErrorMessage}>
-          <CloseIcon />
-        </button>
-        <div className={classes.errorTitle}>
-          <span className={classes.messageIcon}>
-            <ErrorOutlineIcon />
-          </span>
-          <span className={classes.errorLabel}>{message}</span>
-        </div>
-        {messageDetails !== "" && (
-          <Fragment>
-            <div className={classes.detailsContainerLink}>
-              <button className={classes.detailsButton} onClick={detailsToggle}>
-                Details
-                <ArrowRightIcon
-                  className={`${classes.arrowElement} ${
-                    detailsOpen ? classes.arrowOpen : ""
-                  }`}
-                />
-              </button>
-            </div>
-            <div
-              className={`${classes.extraDetailsContainer} ${
-                detailsOpen ? classes.extraDetailsOpen : ""
-              }`}
-            >
-              {messageDetails}
-            </div>
-          </Fragment>
-        )}
-      </div>
-    </Fragment>
-  );
-};
-
-const mapState = (state: AppState) => ({
-  modalSnackMessage: state.system.modalSnackBar,
-});
-
-const mapDispatchToProps = {
-  displayErrorMessage: setModalErrorSnackMessage,
-};
-
-const connector = connect(mapState, mapDispatchToProps);
-
-export default connector(withStyles(styles)(ModalError));

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

@@ -1042,6 +1042,10 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           <br />
           WatchIcon
         </Grid>
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.AlertCloseIcon /> <br />
+          AlertCloseIcon
+        </Grid>
       </Grid>
       <h1>Menu Icons</h1>
       <Grid

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

@@ -14,112 +14,23 @@
 // 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, { Fragment, useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { connect } from "react-redux";
 import get from "lodash/get";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CloseIcon from "@mui/icons-material/Close";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
 import { snackBarMessage } from "../../../../types";
+import { Box } from "@mui/material";
+import { AlertCloseIcon } from "../../../../icons";
+import { Portal } from "@mui/base";
 
 interface IMainErrorProps {
-  customStyle?: any;
-  classes: any;
   snackBar: snackBarMessage;
   displayErrorMessage: typeof setErrorSnackMessage;
+  isModal?: boolean;
 }
 
-const styles = (theme: Theme) =>
+let timerI: any;
-  createStyles({
-    mainErrorContainer: {
-      position: "fixed",
-      width: "100%",
-      backgroundColor: "#fff",
-      border: "#C72C48 1px solid",
-      borderLeftWidth: 12,
-      borderRadius: 3,
-      zIndex: 5000,
-      padding: "10px 15px",
-      maxWidth: 600,
-      left: "50%",
-      transform: "translateX(-50%)",
-      marginTop: 15,
-      opacity: 0,
-      transitionDuration: "0.2s",
-    },
-    mainErrorShow: {
-      opacity: 1,
-    },
-    closeButton: {
-      position: "absolute",
-      right: 5,
-      fontSize: "small",
-      border: 0,
-      backgroundColor: "#fff",
-      cursor: "pointer",
-    },
-    errorTitle: {
-      display: "flex",
-      alignItems: "center",
-    },
-    errorLabel: {
-      color: "#000",
-      fontSize: 18,
-      fontWeight: 500,
-      marginLeft: 5,
-    },
-    messageIcon: {
-      color: "#C72C48",
-      display: "flex",
-      "& svg": {
-        width: 32,
-        height: 32,
-      },
-    },
-    simpleError: {
-      marginTop: 5,
-      padding: "2px 5px",
-      fontSize: 16,
-      color: "#000",
-    },
-    detailsButton: {
-      color: "#9C9C9C",
-      display: "flex",
-      alignItems: "center",
-      border: 0,
-      backgroundColor: "transparent",
-      paddingLeft: 5,
-      fontSize: 14,
-      transformDuration: "0.3s",
-      cursor: "pointer",
-    },
-    extraDetailsContainer: {
-      fontStyle: "italic",
-      color: "#9C9C9C",
-      lineHeight: 0,
-      padding: "0 10px",
-      transition: "all .2s ease-in-out",
-      overflow: "hidden",
-    },
-    extraDetailsOpen: {
-      lineHeight: 1,
-      padding: "3px 10px",
-    },
-    arrowElement: {
-      marginLeft: -5,
-    },
-    arrowOpen: {
-      transform: "rotateZ(90deg)",
-      transformDuration: "0.3s",
-    },
-  });
-
-var timerI: any;
 
 const startHideTimer = (callbackFunction: () => void) => {
   timerI = setInterval(callbackFunction, 10000);
@@ -130,12 +41,10 @@ const stopHideTimer = () => {
 };
 
 const MainError = ({
-  classes,
   snackBar,
   displayErrorMessage,
-  customStyle,
+  isModal = false,
 }: IMainErrorProps) => {
-  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
   const [displayErrorMsg, setDisplayErrorMsg] = useState<boolean>(false);
 
   const closeErrorMessage = useCallback(() => {
@@ -145,7 +54,6 @@ const MainError = ({
   useEffect(() => {
     if (!displayErrorMsg) {
       displayErrorMessage({ detailedError: "", errorMessage: "" });
-      setDetailsOpen(false);
       clearInterval(timerI);
     }
   }, [displayErrorMessage, displayErrorMsg]);
@@ -158,10 +66,6 @@ const MainError = ({
     }
   }, [closeErrorMessage, snackBar.message, snackBar.type]);
 
-  const detailsToggle = () => {
-    setDetailsOpen(!detailsOpen);
-  };
-
   const message = get(snackBar, "message", "");
   const messageDetails = get(snackBar, "detailedErrorMsg", "");
 
@@ -170,53 +74,98 @@ const MainError = ({
   }
 
   return (
-    <Fragment>
+    <Portal>
-      <div
+      <Box
-        className={`${classes.mainErrorContainer} ${
+        sx={{
-          displayErrorMsg ? classes.mainErrorShow : ""
+          "&.alert": {
-        }`}
+            border: 0,
-        style={customStyle}
+            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: {
+              md: "center",
+              xs: "left",
+            },
+          },
+
+          "& .close-btn-container": {
+            cursor: "pointer",
+            border: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            marginLeft: {
+              sm: "0px",
+              xs: "10px",
+            },
+
+            "& .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" : ""}`}
       >
-        <button className={classes.closeButton} onClick={closeErrorMessage}>
+        <div className="message-text">
-          <CloseIcon />
+          {messageDetails ? messageDetails : `${message}.`}
-        </button>
-        <div className={classes.errorTitle}>
-          <span className={classes.messageIcon}>
-            <ErrorOutlineIcon />
-          </span>
-          <span className={classes.errorLabel}>Error</span>
         </div>
-        <div className={classes.simpleError}>{message}</div>
+        <div className="close-btn-container">
-        {messageDetails !== "" && (
+          <button className="close-btn" autoFocus onClick={closeErrorMessage}>
-          <Fragment>
+            <AlertCloseIcon />
-            <div className={classes.detailsContainerLink}>
+          </button>
-              <button className={classes.detailsButton} onClick={detailsToggle}>
+        </div>
-                Details
+      </Box>
-                <ArrowRightIcon
+    </Portal>
-                  className={`${classes.arrowElement} ${
-                    detailsOpen ? classes.arrowOpen : ""
-                  }`}
-                />
-              </button>
-            </div>
-            <div
-              className={`${classes.extraDetailsContainer} ${
-                detailsOpen ? classes.extraDetailsOpen : ""
-              }`}
-            >
-              {messageDetails}
-            </div>
-          </Fragment>
-        )}
-      </div>
-    </Fragment>
   );
 };
 
-const mapState = (state: AppState) => ({
+const mapState = (state: AppState, ownProps: any) => ({
-  snackBar: state.system.snackBar,
+  snackBar: ownProps.isModal
+    ? state.system.modalSnackBar
+    : state.system.snackBar,
 });
 
 const mapDispatchToProps = {
@@ -225,4 +174,4 @@ const mapDispatchToProps = {
 
 const connector = connect(mapState, mapDispatchToProps);
 
-export default connector(withStyles(styles)(MainError));
+export default connector(MainError);

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

@@ -28,8 +28,8 @@ import {
 import { AppState } from "../../../../store";
 import { snackBarMessage } from "../../../../types";
 import { setModalSnackMessage } from "../../../../actions";
-import ModalError from "../FormComponents/ModalError/ModalError";
 import CloseIcon from "@mui/icons-material/Close";
+import MainError from "../MainError/MainError";
 
 interface IModalProps {
   classes: any;
@@ -149,7 +149,7 @@ const ModalWrapper = ({
         </div>
       </DialogTitle>
 
-      <ModalError />
+      <MainError isModal={true} />
       <Snackbar
         open={openSnackbar}
         className={classes.snackBarModal}

portal-ui/src/screens/LoginPage/LoginPage.tsx

@@ -41,6 +41,7 @@ import MainError from "../Console/Common/MainError/MainError";
 import { encodeFileName } from "../../common/utils";
 import { LockIcon, LoginMinIOLogo, UsersIcon } from "../../icons";
 import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary";
+import CssBaseline from "@mui/material/CssBaseline";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -556,8 +557,9 @@ const Login = ({
 
   return (
     <React.Fragment>
+      <CssBaseline />
+      <MainError />
       <Paper className={classes.loginPage}>
-        <MainError />
         <div className={classes.shadowBox}>
           <Grid container className={classes.loginContainer}>
             <Grid item className="consoleTextBanner">