Introduce ErrorBlock component to display error text

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

@@ -39,6 +39,7 @@ 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({
@@ -55,9 +56,6 @@ const styles = (theme: Theme) =>
       minWidth: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -274,13 +272,7 @@ const Account = ({ classes }: IServiceAccountsProps) => {
           </Grid>
           {error !== "" && (
             <Grid item xs={12}>
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {error}
-              </Typography>
+              <ErrorBlock errorMessage={error} withBreak={false} />
             </Grid>
           )}
           <Grid item xs={12}>

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

@@ -16,20 +16,17 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 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";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     jsonPolicyEditor: {
       minHeight: 400,
       width: "100%",
@@ -107,13 +104,7 @@ const AddServiceAccount = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <CodeMirrorWrapper

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

@@ -18,7 +18,6 @@ import React, { useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Button, LinearProgress } from "@material-ui/core";
 import {
@@ -28,12 +27,10 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import { ChangePasswordRequest } from "../Buckets/types";
 import api from "../../../common/api";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -120,13 +117,7 @@ const ChangePassword = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {error !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {error}
-                </Typography>
+                <ErrorBlock errorMessage={error} />
               </Grid>
             )}
             <Grid item xs={12}>

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

@@ -14,9 +14,8 @@
 // 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, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
 import {
   Button,
   Dialog,
@@ -27,12 +26,10 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../common/api";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     wrapText: {
       maxWidth: "200px",
       whiteSpace: "normal",
@@ -95,18 +92,7 @@ const DeleteServiceAccount = ({
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete service account{" "}
           <b className={classes.wrapText}>{selectedServiceAccount}</b>?
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>

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

@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
@@ -38,12 +37,10 @@ import {
 import { useDebounce } from "use-debounce";
 import { MakeBucketRequest } from "../types";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -191,13 +188,7 @@ const AddBucket = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <Grid item xs={12}>

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

@@ -14,7 +14,6 @@
 // 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 { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -27,29 +26,15 @@ import {
 } from "@material-ui/core";
 import api from "../../../../common/api";
 import { BucketList } from "../types";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IDeleteBucketProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedBucket: string;
 }
 
-interface IDeleteBucketState {
-  deleteLoading: boolean;
-  deleteError: string;
-}
-
 const DeleteBucket = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedBucket,
@@ -94,18 +79,7 @@ const DeleteBucket = ({
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete bucket <b>{selectedBucket}</b>? <br />
           A bucket can only be deleted if it's empty.
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
@@ -133,4 +107,4 @@ const DeleteBucket = ({
   );
 };
 
-export default withStyles(styles)(DeleteBucket);
+export default DeleteBucket;

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

@@ -38,6 +38,7 @@ import {
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -54,9 +55,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -183,7 +181,11 @@ const ListBuckets = ({
       )}
       <PageHeader label={"Buckets"} />
       <Grid container>
-        {error !== "" && <span className={classes.error}>{error}</span>}
+        {error !== "" && (
+          <Grid item xs={12}>
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          </Grid>
+        )}
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField

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

@@ -14,7 +14,6 @@
 // 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 { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -26,17 +25,9 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../../../../common/api";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 interface IDeleteObjectProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedObject: string;
@@ -49,7 +40,6 @@ interface IDeleteObjectState {
 }
 
 const DeleteObject = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedBucket,
@@ -101,14 +91,7 @@ const DeleteObject = ({
           Are you sure you want to delete: <b>{selectedObject}</b>?{" "}
           {deleteError !== "" && (
             <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
+              <ErrorBlock errorMessage={deleteError} />
             </React.Fragment>
           )}
         </DialogContentText>
@@ -139,4 +122,4 @@ const DeleteObject = ({
   );
 };
 
-export default withStyles(styles)(DeleteObject);
+export default DeleteObject;

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

@@ -76,9 +76,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),

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

@@ -5,6 +5,7 @@ import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../../../common/api";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 interface ITagModal {
   modalOpen: boolean;
@@ -83,7 +84,9 @@ const AddTagModal = ({
           <h3 className={classes.pathLabel}>
             Selected Object: {selectedObject}
           </h3>
-          {error !== "" && <span>{error}</span>}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           <Grid item xs={12}>
             <InputBoxWrapper
               value={newKey}

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

@@ -52,6 +52,7 @@ import DeleteObject from "../ListObjects/DeleteObject";
 import AddTagModal from "./AddTagModal";
 import DeleteTagModal from "./DeleteTagModal";
 import SetLegalHoldModal from "./SetLegalHoldModal";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -343,7 +344,7 @@ const ObjectDetails = ({
         <Grid item xs={12} className={classes.container}>
           {error !== "" && (
             <Grid item xs={12}>
-              {error}
+              <ErrorBlock errorMessage={error} />
             </Grid>
           )}
           <Grid item xs={12} className={classes.obTitleSection}>