Added error notifications to console (#557)

Co-authored-by: Benjamin Perez <[email protected]>

Author: bexsoft

portal-ui/src/actions.ts

@@ -1,5 +1,5 @@
 // This file is part of MinIO Console Server
-// Copyright (c) 2020 MinIO, Inc.
+// 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
@@ -23,6 +23,9 @@ import {
   SET_LOADING_PROGRESS,
   SET_SNACK_BAR_MESSAGE,
   SET_SERVER_DIAG_STAT,
+  SET_ERROR_SNACK_MESSAGE,
+  SET_SNACK_MODAL_MESSAGE,
+  SET_MODAL_ERROR_MESSAGE,
 } from "./types";
 
 export function userLoggedIn(loggedIn: boolean) {
@@ -67,16 +70,37 @@ export const setLoadingProgress = (progress: number) => {
   };
 };
 
+export const setServerDiagStat = (status: string) => {
+  return {
+    type: SET_SERVER_DIAG_STAT,
+    serverDiagnosticStatus: status,
+  };
+};
+
 export const setSnackBarMessage = (message: string) => {
   return {
     type: SET_SNACK_BAR_MESSAGE,
-    snackBarMessage: message,
+    message,
   };
 };
 
-export const setServerDiagStat = (status: string) => {
+export const setErrorSnackMessage = (message: string) => {
   return {
-    type: SET_SERVER_DIAG_STAT,
-    serverDiagnosticStatus: status,
+    type: SET_ERROR_SNACK_MESSAGE,
+    message,
+  };
+};
+
+export const setModalSnackMessage = (message: string) => {
+  return {
+    type: SET_SNACK_MODAL_MESSAGE,
+    message,
+  };
+};
+
+export const setModalErrorSnackMessage = (message: string) => {
+  return {
+    type: SET_MODAL_ERROR_MESSAGE,
+    message,
   };
 };

portal-ui/src/reducer.ts

@@ -24,7 +24,10 @@ import {
   USER_LOGGED,
   SET_LOADING_PROGRESS,
   SET_SNACK_BAR_MESSAGE,
+  SET_ERROR_SNACK_MESSAGE,
   SET_SERVER_DIAG_STAT,
+  SET_SNACK_MODAL_MESSAGE,
+  SET_MODAL_ERROR_MESSAGE,
 } from "./types";
 
 const initialState: SystemState = {
@@ -36,7 +39,14 @@ const initialState: SystemState = {
   serverNeedsRestart: false,
   serverIsLoading: false,
   loadingProgress: 100,
-  snackBarMessage: "",
+  snackBar: {
+    message: "",
+    type: "message",
+  },
+  modalSnackBar: {
+    message: "",
+    type: "message",
+  },
   serverDiagnosticStatus: "",
 };
 
@@ -79,7 +89,22 @@ export function systemReducer(
     case SET_SNACK_BAR_MESSAGE:
       return {
         ...state,
-        snackBarMessage: action.snackBarMessage,
+        snackBar: { message: action.message, type: "message" },
+      };
+    case SET_ERROR_SNACK_MESSAGE:
+      return {
+        ...state,
+        snackBar: { message: action.message, type: "error" },
+      };
+    case SET_SNACK_MODAL_MESSAGE:
+      return {
+        ...state,
+        modalSnackBar: { message: action.message, type: "message" },
+      };
+    case SET_MODAL_ERROR_MESSAGE:
+      return {
+        ...state,
+        modalSnackBar: { message: action.message, type: "error" },
       };
     case SET_SERVER_DIAG_STAT:
       return {

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

@@ -15,12 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import api from "../../../common/api";
 import { Button } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
+import { setErrorSnackMessage } from "../../../actions";
 import AddServiceAccount from "./AddServiceAccount";
 import DeleteServiceAccount from "./DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
@@ -39,7 +41,6 @@ import {
 import Divider from "@material-ui/core/Divider";
 import LockIcon from "@material-ui/icons/Lock";
 import ChangePasswordModal from "./ChangePasswordModal";
-import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -86,12 +87,12 @@ const styles = (theme: Theme) =>
 
 interface IServiceAccountsProps {
   classes: any;
+  displayErrorMessage: typeof setErrorSnackMessage;
 }
 
-const Account = ({ classes }: IServiceAccountsProps) => {
+const Account = ({ classes, displayErrorMessage }: IServiceAccountsProps) => {
   const [records, setRecords] = useState<string[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string>("");
   const [filter, setFilter] = useState<string>("");
   const [addScreenOpen, setAddScreenOpen] = useState<boolean>(false);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
@@ -121,14 +122,13 @@ const Account = ({ classes }: IServiceAccountsProps) => {
 
           setLoading(false);
           setRecords(serviceAccounts);
-          setError("");
         })
         .catch((err) => {
-          setError(err);
+          displayErrorMessage(err);
           setLoading(false);
         });
     }
-  }, [loading, setLoading, setRecords, setError]);
+  }, [loading, setLoading, setRecords, displayErrorMessage]);
 
   const fetchRecords = () => {
     setLoading(true);
@@ -276,11 +276,6 @@ const Account = ({ classes }: IServiceAccountsProps) => {
           <Grid item xs={12}>
             <br />
           </Grid>
-          {error !== "" && (
-            <Grid item xs={12}>
-              <ErrorBlock errorMessage={error} withBreak={false} />
-            </Grid>
-          )}
           <Grid item xs={12}>
             <TableWrapper
               isLoading={loading}
@@ -297,4 +292,8 @@ const Account = ({ classes }: IServiceAccountsProps) => {
   );
 };
 
-export default withStyles(styles)(Account);
+const connector = connect(null, {
+  displayErrorMessage: setErrorSnackMessage,
+});
+
+export default withStyles(styles)(connector(Account));

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

@@ -23,7 +23,8 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import api from "../../../common/api";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
-import ErrorBlock from "../../shared/ErrorBlock";
+import { setModalErrorSnackMessage } from "../../../actions";
+import { connect } from "react-redux";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -46,15 +47,16 @@ interface IAddServiceAccountProps {
   classes: any;
   open: boolean;
   closeModalAndRefresh: (res: NewServiceAccount | null) => void;
+  setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
 }
 
 const AddServiceAccount = ({
   classes,
   open,
   closeModalAndRefresh,
+  setModalErrorSnackMessage,
 }: IAddServiceAccountProps) => {
   const [addSending, setAddSending] = useState(false);
-  const [addError, setAddError] = useState("");
   const [policyDefinition, setPolicyDefinition] = useState("");
 
   useEffect(() => {
@@ -65,18 +67,17 @@ const AddServiceAccount = ({
         })
         .then((res) => {
           setAddSending(false);
-          setAddError("");
           closeModalAndRefresh(res);
         })
         .catch((err) => {
           setAddSending(false);
-          setAddError(err);
+          setModalErrorSnackMessage(err);
         });
     }
   }, [
     addSending,
     setAddSending,
-    setAddError,
+    setModalErrorSnackMessage,
     policyDefinition,
     closeModalAndRefresh,
   ]);
@@ -107,11 +108,6 @@ const AddServiceAccount = ({
       >
         <Grid container>
           <Grid item xs={12} className={classes.formScrollable}>
-            {addError !== "" && (
-              <Grid item xs={12}>
-                <ErrorBlock errorMessage={addError} withBreak={false} />
-              </Grid>
-            )}
             <div className={classes.infoDetails}>
               Service Accounts inherit the policy explicitly attached to the
               parent user and the policy attached to each group in which the
@@ -157,4 +153,10 @@ const AddServiceAccount = ({
   );
 };
 
-export default withStyles(styles)(AddServiceAccount);
+const mapDispatchToProps = {
+  setModalErrorSnackMessage,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+export default withStyles(styles)(connector(AddServiceAccount));

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

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
+import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
@@ -27,7 +28,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import { ChangePasswordRequest } from "../Buckets/types";
 import api from "../../../common/api";
-import ErrorBlock from "../../shared/ErrorBlock";
+import { setModalErrorSnackMessage } from "../../../actions";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -43,24 +44,25 @@ interface IChangePasswordProps {
   classes: any;
   open: boolean;
   closeModal: () => void;
+  setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
 }
 
 const ChangePassword = ({
   classes,
   open,
   closeModal,
+  setModalErrorSnackMessage,
 }: IChangePasswordProps) => {
   const [currentPassword, setCurrentPassword] = useState<string>("");
   const [newPassword, setNewPassword] = useState<string>("");
   const [reNewPassword, setReNewPassword] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string>("");
 
   const changePassword = (event: React.FormEvent) => {
     event.preventDefault();
 
     if (newPassword !== reNewPassword) {
-      setError("New passwords don't match");
+      setModalErrorSnackMessage("New passwords don't match");
       return;
     }
 
@@ -78,7 +80,6 @@ const ChangePassword = ({
       .invoke("POST", "/api/v1/account/change-password", request)
       .then((res) => {
         setLoading(false);
-        setError("");
         setNewPassword("");
         setReNewPassword("");
         setCurrentPassword("");
@@ -89,7 +90,7 @@ const ChangePassword = ({
         setNewPassword("");
         setReNewPassword("");
         setCurrentPassword("");
-        setError(err);
+        setModalErrorSnackMessage(err);
       });
   };
 
@@ -115,11 +116,6 @@ const ChangePassword = ({
       >
         <Grid container>
           <Grid item xs={12} className={classes.formScrollable}>
-            {error !== "" && (
-              <Grid item xs={12}>
-                <ErrorBlock errorMessage={error} />
-              </Grid>
-            )}
             <Grid item xs={12}>
               <InputBoxWrapper
                 id="current-password"
@@ -185,4 +181,8 @@ const ChangePassword = ({
   ) : null;
 };
 
-export default withStyles(styles)(ChangePassword);
+const connector = connect(null, {
+  setModalErrorSnackMessage,
+});
+
+export default withStyles(styles)(connector(ChangePassword));