Introduce a standard way to create handle errors (#918)

cypress/integration/client_scopes_test.spec.ts

@@ -35,7 +35,7 @@ describe("Client Scopes test", function () {
 
       // The error should inform about duplicated name/id
       masthead.checkNotificationMessage(
-        "Could not create client scope: 'Error: Request failed with status code 409'"
+        "Could not create client scope: 'Client Scope address already exists'"
       );
     });
 

cypress/integration/clients_test.spec.ts

@@ -42,7 +42,7 @@ describe("Clients test", function () {
 
       // The error should inform about duplicated name/id
       masthead.checkNotificationMessage(
-        "Could not create client: 'Error: Request failed with status code 409'"
+        "Could not create client: 'Client account already exists'"
       );
     });
 

src/authentication/AuthenticationSection.tsx

@@ -48,7 +48,7 @@ export const AuthenticationSection = () => {
   const { realm } = useRealm();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { url } = useRouteMatch();
 
   const [selectedFlow, setSelectedFlow] = useState<AuthenticationType>();
@@ -114,7 +114,7 @@ export const AuthenticationSection = () => {
         refresh();
         addAlert(t("deleteFlowSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("deleteFlowError", { error }), AlertVariant.danger);
+        addError("authentication:deleteFlowError", error);
       }
     },
   });

src/authentication/DuplicateFlowModal.tsx

@@ -34,7 +34,7 @@ export const DuplicateFlowModal = ({
     shouldUnregister: false,
   });
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   useEffect(() => {
     setValue("description", description);
@@ -62,7 +62,7 @@ export const DuplicateFlowModal = ({
       }
       addAlert(t("copyFlowSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("copyFlowError", { error }), AlertVariant.danger);
+      addError("authentication:copyFlowError", error);
     }
     onComplete();
   };

src/client-scopes/ClientScopesSection.tsx

@@ -39,7 +39,7 @@ export const ClientScopesSection = () => {
   const { url } = useRouteMatch();
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -100,12 +100,7 @@ export const ClientScopesSection = () => {
         addAlert(t("deletedSuccess"), AlertVariant.success);
         refresh();
       } catch (error) {
-        addAlert(
+        addError("client-scopes:deleteError", error);
-          t("deleteError", {
-            error: error.response?.data?.errorMessage || error,
-          }),
-          AlertVariant.danger
-        );
       }
     },
   });
@@ -122,7 +117,7 @@ export const ClientScopesSection = () => {
             addAlert(t("clientScopeSuccess"), AlertVariant.success);
             refresh();
           } catch (error) {
-            addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+            addError("client-scopes:clientScopeError", error);
           }
         }}
       />
@@ -154,7 +149,7 @@ export const ClientScopesSection = () => {
                 addAlert(t("clientScopeSuccess"), AlertVariant.success);
                 refresh();
               } catch (error) {
-                addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+                addError("client-scopes:clientScopeError", error);
               }
             });
             setChangeTypeOpen(false);

src/client-scopes/details/MapperList.tsx

@@ -35,7 +35,7 @@ type Row = ProtocolMapperRepresentation & {
 export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const history = useHistory();
   const { realm } = useRealm();
@@ -75,10 +75,7 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
         refresh();
         addAlert(t("common:mappingCreatedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError("common:mappingCreatedError", error);
-          t("common:mappingCreatedError", { error }),
-          AlertVariant.danger
-        );
       }
     }
   };
@@ -166,10 +163,7 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
                 );
                 refresh();
               } catch (error) {
-                addAlert(
+                addError("common:mappingDeletedError", error);
-                  t("common:mappingDeletedError", { error }),
-                  AlertVariant.danger
-                );
               }
               return true;
             },

src/client-scopes/details/MappingDetails.tsx

@@ -41,7 +41,7 @@ type Params = {
 export const MappingDetails = () => {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id, mapperId } = useParams<Params>();
   const { register, errors, setValue, control, handleSubmit } = useForm();
@@ -113,10 +113,7 @@ export const MappingDetails = () => {
         addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
         history.push(`/${realm}/client-scopes/${id}/mappers`);
       } catch (error) {
-        addAlert(
+        addError("common:mappingDeletedError", error);
-          t("common:mappingDeletedError", { error }),
-          AlertVariant.danger
-        );
       }
     },
   });
@@ -136,7 +133,7 @@ export const MappingDetails = () => {
       }
       addAlert(t(`common:mapping${key}Success`), AlertVariant.success);
     } catch (error) {
-      addAlert(t(`common:mapping${key}Error`, { error }), AlertVariant.danger);
+      addError(`common:mapping${key}Error`, error);
     }
   };
 

src/client-scopes/form/ClientScopeForm.tsx

@@ -43,7 +43,7 @@ export const ClientScopeForm = () => {
   const adminClient = useAdminClient();
   const { id, type } = useParams<{ id: string; type: AllClientScopes }>();
 
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -126,10 +126,7 @@ export const ClientScopeForm = () => {
       }
       addAlert(t((id ? "update" : "create") + "Success"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError(`client-scopes:${id ? "update" : "create"}Error`, error);
-        t((id ? "update" : "create") + "Error", { error }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -146,7 +143,7 @@ export const ClientScopeForm = () => {
         await adminClient.clientScopes.del({ id });
         addAlert(t("deletedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("client-scopes:deleteError", error);
       }
     },
   });
@@ -178,12 +175,7 @@ export const ClientScopeForm = () => {
       );
       addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("client-scopes:roleMappingUpdatedError", error);
-        t("roleMappingUpdatedError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/clients/AdvancedTab.tsx

@@ -57,7 +57,7 @@ export const AdvancedTab = ({
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const revocationFieldName = "notBefore";
   const openIdConnect = "openid-connect";
 
@@ -143,10 +143,7 @@ export const AdvancedTab = ({
         refresh();
         addAlert(t("deleteNodeSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError("clients:deleteNodeFail", error);
-          t("deleteNodeFail", { error: error.response?.data?.error || error }),
-          AlertVariant.danger
-        );
       }
     },
   });

src/clients/ClientDetails.tsx

@@ -125,7 +125,7 @@ export type SaveOptions = {
 export const ClientDetails = () => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
   const history = useHistory();
@@ -164,7 +164,7 @@ export const ClientDetails = () => {
         addAlert(t("clientDeletedSuccess"), AlertVariant.success);
         history.push(toClients({ realm }));
       } catch (error) {
-        addAlert(`${t("clientDeleteError")} ${error}`, AlertVariant.danger);
+        addError("clients:clientDeleteError", error);
       }
     },
   });
@@ -227,7 +227,7 @@ export const ClientDetails = () => {
         setClient(newClient);
         addAlert(t(messageKey), AlertVariant.success);
       } catch (error) {
-        addAlert(`${t("clientSaveError")} '${error}'`, AlertVariant.danger);
+        addError("client:clientSaveError", error);
       }
     }
   };

src/clients/ClientsSection.tsx

@@ -29,7 +29,7 @@ import { toImportClient } from "./routes/ImportClient";
 
 export const ClientsSection = () => {
   const { t } = useTranslation("clients");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -64,7 +64,7 @@ export const ClientsSection = () => {
         addAlert(t("clientDeletedSuccess"), AlertVariant.success);
         refresh();
       } catch (error) {
-        addAlert(t("clientDeleteError", { error }), AlertVariant.danger);
+        addError("client:clientDeleteError", error);
       }
     },
   });

src/clients/add/NewClientForm.tsx

@@ -39,7 +39,7 @@ export const NewClientForm = () => {
     directAccessGrantsEnabled: true,
     standardFlowEnabled: true,
   });
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const methods = useForm<ClientRepresentation>({ defaultValues: client });
 
   const save = async () => {
@@ -50,7 +50,7 @@ export const NewClientForm = () => {
         toClient({ realm, clientId: newClient.id, tab: "settings" })
       );
     } catch (error) {
-      addAlert(t("createError", { error }), AlertVariant.danger);
+      addError("clients:createError", error);
     }
   };
 

src/clients/advanced/AddHostDialog.tsx

@@ -33,7 +33,7 @@ export const AddHostDialog = ({
   const { t } = useTranslation("clients");
   const { register, getValues } = useForm<Host>();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   return (
     <Modal
@@ -55,12 +55,7 @@ export const AddHostDialog = ({
               onAdded(node);
               addAlert(t("addedNodeSuccess"), AlertVariant.success);
             } catch (error) {
-              addAlert(
+              addError("clients:addedNodeFail", error);
-                t("addedNodeFail", {
-                  error: error.response?.data?.error || error,
-                }),
-                AlertVariant.danger
-              );
             }
 
             onClose();

src/clients/credentials/Credentials.tsx

@@ -46,7 +46,7 @@ export type CredentialsProps = {
 export const Credentials = ({ clientId, save }: CredentialsProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [providers, setProviders] = useState<ClientAuthenticatorProviders[]>(
     []
@@ -97,7 +97,7 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
       addAlert(t(`${message}Success`), AlertVariant.success);
       return data;
     } catch (error) {
-      addAlert(t(`${message}Error`, { error }), AlertVariant.danger);
+      addError(`clients:${message}Error`, error);
     }
   }
 

src/clients/import/ImportForm.tsx

@@ -31,7 +31,7 @@ export const ImportForm = () => {
   const form = useForm<ClientRepresentation>();
   const { register, handleSubmit, setValue } = form;
 
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const handleFileChange = (obj: object) => {
     const defaultClient = {
@@ -61,7 +61,7 @@ export const ImportForm = () => {
         toClient({ realm, clientId: newClient.id, tab: "settings" })
       );
     } catch (error) {
-      addAlert(t("clientImportError", { error }), AlertVariant.danger);
+      addError("clients:clientImportError", error);
     }
   };
 

src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -28,7 +28,7 @@ export const CreateInitialAccessToken = () => {
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const history = useHistory();
   const [token, setToken] = useState("");
@@ -41,7 +41,7 @@ export const CreateInitialAccessToken = () => {
       );
       setToken(access.token!);
     } catch (error) {
-      addAlert(t("tokenSaveError", { error }), AlertVariant.danger);
+      addError("clients:tokenSaveError", error);
     }
   };
 

src/clients/initial-access/InitialAccessTokenList.tsx

@@ -17,7 +17,7 @@ export const InitialAccessTokenList = () => {
   const { t } = useTranslation("clients");
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
   const history = useHistory();
@@ -41,7 +41,7 @@ export const InitialAccessTokenList = () => {
         addAlert(t("tokenDeleteSuccess"), AlertVariant.success);
         setToken(undefined);
       } catch (error) {
-        addAlert(t("tokenDeleteError", { error }), AlertVariant.danger);
+        addError("tokenDeleteError", error);
       }
     },
   });

src/clients/keys/Keys.tsx

@@ -44,7 +44,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
     formState: { isDirty },
   } = useFormContext<ClientForm>();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [keyInfo, setKeyInfo] = useState<CertificateRepresentation>();
   const [openGenerateKeys, setOpenGenerateKeys] = useState(false);
@@ -77,12 +77,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
       );
       addAlert(t("generateSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("clients:generateError", error);
-        t("generateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -101,12 +96,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
       );
       addAlert(t("importSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("clients:importError", error);
-        t("importError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/clients/scopes/ClientScopes.tsx

@@ -86,7 +86,7 @@ type SearchType = "client" | "assigned";
 export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [searchToggle, setSearchToggle] = useState(false);
   const [searchType, setSearchType] = useState<SearchType>("client");
@@ -156,7 +156,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
             addAlert(t("clientScopeSuccess"), AlertVariant.success);
             refresh();
           } catch (error) {
-            addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+            addError("clients:clientScopeError", error);
           }
         }}
       />
@@ -186,7 +186,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
               addAlert(t("clientScopeSuccess"), AlertVariant.success);
               refresh();
             } catch (error) {
-              addAlert(t("clientScopeError", { error }), AlertVariant.danger);
+              addError("clients:clientScopeError", error);
             }
           }}
         />
@@ -267,10 +267,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                     refresh();
                     addAlert(t("clientScopeSuccess"), AlertVariant.success);
                   } catch (error) {
-                    addAlert(
+                    addError("clients:clientScopeError", error);
-                      t("clientScopeError", { error }),
-                      AlertVariant.danger
-                    );
                   }
                 }}
               >
@@ -308,10 +305,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                         );
                         refresh();
                       } catch (error) {
-                        addAlert(
+                        addError("clients:clientScopeRemoveError", error);
-                          t("clientScopeRemoveError", { error }),
-                          AlertVariant.danger
-                        );
                       }
                     }}
                   >
@@ -343,10 +337,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                 addAlert(t("clientScopeRemoveSuccess"), AlertVariant.success);
                 refresh();
               } catch (error) {
-                addAlert(
+                addError("clients:clientScopeRemoveError", error);
-                  t("clientScopeRemoveError", { error }),
-                  AlertVariant.danger
-                );
               }
               return true;
             },

src/clients/service-account/ServiceAccount.tsx

@@ -20,7 +20,7 @@ type ServiceAccountProps = {
 export const ServiceAccount = ({ client }: ServiceAccountProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [hide, setHide] = useState(false);
   const [serviceAccount, setServiceAccount] = useState<UserRepresentation>();
@@ -94,12 +94,7 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
       );
       addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("clients:roleMappingUpdatedError", error);
-        t("roleMappingUpdatedError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
   return (

src/components/alert/Alerts.tsx

@@ -1,5 +1,8 @@
-import { AlertVariant } from "@patternfly/react-core";
 import React, { createContext, ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertVariant } from "@patternfly/react-core";
+import type { AxiosError } from "axios";
+
 import useRequiredContext from "../../utils/useRequiredContext";
 import { AlertPanel, AlertType } from "./AlertPanel";
 
@@ -9,6 +12,8 @@ type AlertProps = {
     variant?: AlertVariant,
     description?: string
   ) => void;
+
+  addError: (message: string, error: any) => void;
 };
 
 export const AlertContext = createContext<AlertProps | undefined>(undefined);
@@ -16,6 +21,7 @@ export const AlertContext = createContext<AlertProps | undefined>(undefined);
 export const useAlerts = () => useRequiredContext(AlertContext);
 
 export const AlertProvider = ({ children }: { children: ReactNode }) => {
+  const { t } = useTranslation();
   const [alerts, setAlerts] = useState<AlertType[]>([]);
 
   const createId = () => new Date().getTime();
@@ -34,8 +40,20 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
     setAlerts([{ key, message, variant, description }, ...alerts]);
   };
 
+  const addError = (message: string, error: Error | AxiosError) => {
+    addAlert(
+      t(message, {
+        error:
+          "response" in error
+            ? error.response?.data?.errorMessage || error.response?.data?.error
+            : error,
+      }),
+      AlertVariant.danger
+    );
+  };
+
   return (
-    <AlertContext.Provider value={{ addAlert }}>
+    <AlertContext.Provider value={{ addAlert, addError }}>
       <AlertPanel alerts={alerts} onCloseAlert={hideAlert} />
       {children}
     </AlertContext.Provider>

src/components/role-mapping/RoleMapping.tsx

@@ -91,7 +91,7 @@ export const RoleMapping = ({
 }: RoleMappingProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -159,7 +159,7 @@ export const RoleMapping = ({
         addAlert(t("clientScopeRemoveSuccess"), AlertVariant.success);
         refresh();
       } catch (error) {
-        addAlert(t("clientScopeRemoveError", { error }), AlertVariant.danger);
+        addError("clients:clientScopeRemoveError", error);
       }
     },
   });

src/groups/GroupAttributes.tsx

@@ -23,7 +23,7 @@ import { useLocation } from "react-router-dom";
 export const GroupAttributes = () => {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const form = useForm<AttributeForm>({ mode: "onChange" });
   const { fields, append, remove } = useFieldArray({
     control: form.control,
@@ -57,7 +57,7 @@ export const GroupAttributes = () => {
       form.setValue("attributes", convertAttributes(attributes));
       addAlert(t("groupUpdated"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("groupUpdateError", { error }), AlertVariant.danger);
+      addError("groups:groupUpdateError", error);
     }
   };
 

src/groups/GroupTable.tsx

@@ -28,7 +28,7 @@ export const GroupTable = () => {
   const { t } = useTranslation("groups");
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -69,7 +69,7 @@ export const GroupTable = () => {
       );
       setSelectedRows([]);
     } catch (error) {
-      addAlert(t("groupDeleteError", { error }), AlertVariant.danger);
+      addError("groups:groupDeleteError", error);
     }
     refresh();
   };
@@ -220,12 +220,7 @@ export const GroupTable = () => {
               refresh();
               addAlert(t("moveGroupSuccess"), AlertVariant.success);
             } catch (error) {
-              addAlert(
+              addError("groups:moveGroupError", error);
-                t("moveGroupError", {
-                  error: error.response?.data?.errorMessage || error,
-                }),
-                AlertVariant.danger
-              );
             }
           }}
         />

src/groups/GroupsModal.tsx

@@ -32,7 +32,7 @@ export const GroupsModal = ({
 }: GroupsModalProps) => {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { register, errors, handleSubmit } = useForm({
     defaultValues: { name: rename },
   });
@@ -54,7 +54,7 @@ export const GroupsModal = ({
         AlertVariant.success
       );
     } catch (error) {
-      addAlert(t("couldNotCreateGroup", { error }), AlertVariant.danger);
+      addError("groups:couldNotCreateGroup", error);
     }
   };
 

src/groups/GroupsSection.tsx

@@ -32,7 +32,7 @@ export const GroupsSection = () => {
 
   const adminClient = useAdminClient();
   const { subGroups, setSubGroups, currentGroup } = useSubGroups();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
   const [rename, setRename] = useState<string>();
@@ -48,7 +48,7 @@ export const GroupsSection = () => {
       });
       addAlert(t("groupDelete"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("groupDeleteError", { error }), AlertVariant.danger);
+      addError("groups:groupDeleteError", error);
     }
     return true;
   };

src/groups/Members.tsx

@@ -34,7 +34,7 @@ export const Members = () => {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const location = useLocation();
   const id = getLastId(location.pathname);
   const [includeSubGroup, setIncludeSubGroup] = useState(false);
@@ -172,7 +172,7 @@ export const Members = () => {
                           AlertVariant.success
                         );
                       } catch (error) {
-                        addAlert(t("usersLeftError"), AlertVariant.danger);
+                        addError("groups:usersLeftError", error);
                       }
 
                       refresh();
@@ -196,7 +196,7 @@ export const Members = () => {
                 });
                 addAlert(t("usersLeft", { count: 1 }), AlertVariant.success);
               } catch (error) {
-                addAlert(t("usersLeftError"), AlertVariant.danger);
+                addError("groups:usersLeftError", error);
               }
 
               return true;

src/groups/MembersModal.tsx

@@ -25,7 +25,7 @@ type MemberModalProps = {
 export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
 
   const history = useHistory();
@@ -44,7 +44,7 @@ export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
       const users = await adminClient.users.find({ ...params });
       return _.differenceBy(users, members, "id").slice(0, max);
     } catch (error) {
-      addAlert(t("noUsersFoundError", { error }), AlertVariant.danger);
+      addError("groups:noUsersFoundError", error);
       return [];
     }
   };
@@ -73,7 +73,7 @@ export const MemberModal = ({ groupId, onClose }: MemberModalProps) => {
                 AlertVariant.success
               );
             } catch (error) {
-              addAlert(t("usersAddedError"), AlertVariant.danger);
+              addError("groups:usersAddedError", error);
             }
           }}
         >

src/groups/messages.ts

@@ -13,10 +13,10 @@ export default {
     leave: "Leave group",
     usersLeft: "{{count}} user left the group",
     usersLeft_plural: "{{count}} users left the group",
-    usersLeftError: "Could not remove users from the group",
+    usersLeftError: "Could not remove users from the group: {{error}}",
     usersAdded: "{{count}} user added to the group",
     usersAdded_plural: "{{count}} users added to the group",
-    usersAddedError: "Could not add users to the group",
+    usersAddedError: "Could not add users to the group: {{error}}",
     search: "Search",
     members: "Members",
     searchMembers: "Search members",

src/identity-providers/IdentityProvidersSection.tsx

@@ -56,7 +56,7 @@ export const IdentityProvidersSection = () => {
     useState<IdentityProviderRepresentation>();
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   useFetch(
     async () =>
@@ -124,7 +124,7 @@ export const IdentityProvidersSection = () => {
         refresh();
         addAlert(t("deletedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("identity-providers:deleteError", error);
       }
     },
   });

src/identity-providers/ManageOrderDialog.tsx

@@ -32,7 +32,7 @@ export const ManageOderDialog = ({
 }: ManageOderDialogProps) => {
   const { t } = useTranslation("identity-providers");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [alias, setAlias] = useState("");
   const [liveText, setLiveText] = useState("");
@@ -76,7 +76,7 @@ export const ManageOderDialog = ({
                 await adminClient.identityProviders.update({ alias }, provider);
                 addAlert(t("orderChangeSuccess"), AlertVariant.success);
               } catch (error) {
-                addAlert(t("orderChangeError", { error }), AlertVariant.danger);
+                addError("identity-providers:orderChangeError", error);
               }
             });
 

src/identity-providers/add/AddIdentityProvider.tsx

@@ -52,7 +52,7 @@ export const AddIdentityProvider = () => {
   } = form;
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const history = useHistory();
   const { realm } = useRealm();
 
@@ -66,12 +66,7 @@ export const AddIdentityProvider = () => {
       addAlert(t("createSuccess"), AlertVariant.success);
       history.push(`/${realm}/identity-providers/${id}/settings`);
     } catch (error) {
-      addAlert(
+      addError("identity-providers:createError", error);
-        t("createError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/identity-providers/add/AddOpenIdConnect.tsx

@@ -39,7 +39,7 @@ export const AddOpenIdConnect = () => {
   } = form;
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
   const save = async (provider: DiscoveryIdentity) => {
@@ -52,12 +52,7 @@ export const AddOpenIdConnect = () => {
       addAlert(t("createSuccess"), AlertVariant.success);
       history.push(`/${realm}/identity-providers/${id}/settings`);
     } catch (error) {
-      addAlert(
+      addError("identity-providers:createError", error);
-        t("createError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/identity-providers/add/DetailSettings.tsx

@@ -87,7 +87,7 @@ export const DetailSettings = () => {
   const { handleSubmit, setValue, getValues, reset } = form;
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const history = useHistory();
   const { realm } = useRealm();
 
@@ -112,12 +112,7 @@ export const DetailSettings = () => {
       setProvider(p);
       addAlert(t("updateSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("identity-providers:updateError", error);
-        t("updateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -132,7 +127,7 @@ export const DetailSettings = () => {
         addAlert(t("deletedSuccess"), AlertVariant.success);
         history.push(`/${realm}/identity-providers`);
       } catch (error) {
-        addAlert(t("deleteErrorError", { error }), AlertVariant.danger);
+        addError("identity-providers:deleteErrorError", error);
       }
     },
   });

src/realm-roles/AssociatedRolesTab.tsx

@@ -42,7 +42,7 @@ export const AssociatedRolesTab = ({
 }: AssociatedRolesTabProps) => {
   const { t } = useTranslation("roles");
   const history = useHistory();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { url } = useRouteMatch();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -169,7 +169,7 @@ export const AssociatedRolesTab = ({
 
         addAlert(t("associatedRolesRemoved"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("roleDeleteError", { error }), AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
       }
     },
   });
@@ -194,7 +194,7 @@ export const AssociatedRolesTab = ({
           addAlert(t("associatedRolesRemoved"), AlertVariant.success);
           refresh();
         } catch (error) {
-          addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+          addError("roles:roleDeleteError", error);
         }
       },
     });

src/realm-roles/RealmRoleTabs.tsx

@@ -66,7 +66,7 @@ export const RealmRoleTabs = () => {
     []
   );
 
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [open, setOpen] = useState(false);
   const convert = (role: RoleRepresentation) => {
@@ -179,12 +179,7 @@ export const RealmRoleTabs = () => {
       }
       addAlert(t(id ? "roleSaveSuccess" : "roleCreated"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError(`roles:${id ? "roleSave" : "roleCreate"}Error`, error);
-        t((id ? "roleSave" : "roleCreate") + "Error", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -201,7 +196,7 @@ export const RealmRoleTabs = () => {
       refresh();
       addAlert(t("addAssociatedRolesSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("addAssociatedRolesError", { error }), AlertVariant.danger);
+      addError("roles:addAssociatedRolesError", error);
     }
   };
 
@@ -225,7 +220,7 @@ export const RealmRoleTabs = () => {
         addAlert(t("roleDeletedSuccess"), AlertVariant.success);
         history.push(url.substr(0, url.indexOf("/roles") + "/roles".length));
       } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
       }
     },
   });
@@ -300,7 +295,7 @@ export const RealmRoleTabs = () => {
         history.push(loc);
         refresh();
       } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
       }
     },
   });

src/realm-roles/RolesList.tsx

@@ -52,7 +52,7 @@ export const RolesList = ({
   const { t } = useTranslation(messageBundle);
   const history = useHistory();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { url } = useRouteMatch();
   const { realm: realmName } = useRealm();
   const [realm, setRealm] = useState<myRealmRepresentation>();
@@ -104,7 +104,7 @@ export const RolesList = ({
         setSelectedRole(undefined);
         addAlert(t("roleDeletedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+        addError("roles:roleDeleteError", error);
       }
     },
   });
@@ -133,7 +133,7 @@ export const RolesList = ({
               if (
                 (role as RoleRepresentation).name === realm!.defaultRole!.name
               ) {
-                addAlert(`${t("defaultRoleDeleteError")}`, AlertVariant.danger);
+                addAlert(t("defaultRoleDeleteError"), AlertVariant.danger);
               } else toggleDeleteDialog();
             },
           },

src/realm-roles/messages.ts

@@ -5,6 +5,7 @@ export default {
     associatedRolesText: "Associated roles",
     addAssociatedRolesText: "Add associated roles",
     addAssociatedRolesSuccess: "Associated roles have been added",
+    addAssociatedRolesError: "Could not associate roles {{error}}",
     associatedRolesModalTitle: "Add roles to {{name}}",
     title: "Realm roles",
     addRole: "Add role",

src/realm-settings/EmailTab.tsx

@@ -36,7 +36,7 @@ export const RealmSettingsEmailTab = ({
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { whoAmI } = useWhoAmI();
 
   const [realm, setRealm] = useState(initialRealm);
@@ -82,10 +82,7 @@ export const RealmSettingsEmailTab = ({
       setRealm(savedRealm);
       addAlert(t("saveSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveError", error);
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -125,7 +122,7 @@ export const RealmSettingsEmailTab = ({
       );
       addAlert(t("testConnectionSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("testConnectionError"), AlertVariant.danger);
+      addError("realm-settings:testConnectionError", error);
     }
   };
 

src/realm-settings/JavaKeystoreModal.tsx

@@ -39,7 +39,7 @@ JavaKeystoreModalProps) => {
   const { t } = useTranslation("groups");
   const serverInfo = useServerInfo();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { handleSubmit, control } = useForm({});
   const [isEllipticCurveDropdownOpen, setIsEllipticCurveDropdownOpen] =
     useState(false);
@@ -59,12 +59,7 @@ JavaKeystoreModalProps) => {
       addAlert(t("saveProviderSuccess"), AlertVariant.success);
       refresh();
     } catch (error) {
-      addAlert(
+      addError("groups:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/KeysProvidersTab.tsx

@@ -61,7 +61,7 @@ type KeysTabInnerProps = {
 
 export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
   const { t } = useTranslation("realm-settings");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const adminClient = useAdminClient();
   const { realm } = useRealm();
   const { url } = useRouteMatch();
@@ -112,7 +112,7 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
 
         addAlert(t("deleteProviderSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("deleteProviderError", { error }), AlertVariant.danger);
+        addError("realm-settings:deleteProviderError", error);
       }
     },
   });

src/realm-settings/LocalizationTab.tsx

@@ -57,7 +57,7 @@ export const LocalizationTab = ({
   const [valueSelected, setValueSelected] = useState(false);
   const themeTypes = useServerInfo().themes!;
   const bundleForm = useForm<BundleForm>({ mode: "onChange" });
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm: currentRealm } = useRealm();
 
   const watchSupportedLocales = useWatch({
@@ -105,12 +105,9 @@ export const LocalizationTab = ({
         realmName: currentRealm!,
       });
       refresh();
-      addAlert(t("realm-settings:pairCreatedSuccess"), AlertVariant.success);
+      addAlert(t("pairCreatedSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("realm-settings:pairCreatedError", error);
-        t("realm-settings:pairCreatedError", { error }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/RSAGeneratedModal.tsx

@@ -38,7 +38,7 @@ export const RSAGeneratedModal = ({
   const { t } = useTranslation("realm-settings");
   const serverInfo = useServerInfo();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { handleSubmit, control } = useForm({});
   const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);
   const [isRSAalgDropdownOpen, setIsRSAalgDropdownOpen] = useState(false);
@@ -58,12 +58,7 @@ export const RSAGeneratedModal = ({
       addAlert(t("saveProviderSuccess"), AlertVariant.success);
       refresh();
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/RSAModal.tsx

@@ -40,7 +40,7 @@ export const RSAModal = ({
   const { t } = useTranslation("realm-settings");
   const serverInfo = useServerInfo();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { handleSubmit, control } = useForm({});
   const [isRSAalgDropdownOpen, setIsRSAalgDropdownOpen] = useState(false);
 
@@ -77,12 +77,7 @@ export const RSAModal = ({
         refresh();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/RealmSettingsSection.tsx

@@ -70,7 +70,7 @@ const RealmSettingsHeader = ({
 }: RealmSettingsHeaderProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const history = useHistory();
   const { refresh } = useRealm();
   const [partialImportOpen, setPartialImportOpen] = useState(false);
@@ -97,7 +97,7 @@ const RealmSettingsHeader = ({
         history.push("/master/");
         refresh();
       } catch (error) {
-        addAlert(t("deleteError", { error }), AlertVariant.danger);
+        addError("realm-settings:deleteError", error);
       }
     },
   });
@@ -147,7 +147,7 @@ export const RealmSettingsSection = () => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const form = useForm({ mode: "onChange" });
   const { control, getValues, setValue, reset: resetForm } = form;
   const [key, setKey] = useState(0);
@@ -197,10 +197,7 @@ export const RealmSettingsSection = () => {
       setRealm(realm);
       addAlert(t("saveSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveError", error);
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/SessionsTab.tsx

@@ -33,7 +33,7 @@ export const RealmSettingsSessionsTab = ({
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [realm, setRealm] = useState(initialRealm);
 
@@ -59,10 +59,7 @@ export const RealmSettingsSessionsTab = ({
       setRealm(savedRealm);
       addAlert(t("saveSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveError", error);
-        t("saveError", { error: error.response?.data?.errorMessage || error }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -76,7 +73,7 @@ export const RealmSettingsSessionsTab = ({
     <>
       <PageSection variant="light">
         <FormPanel
-          title={t("realm-settings:SSOSessionSettings")}
+          title={t("SSOSessionSettings")}
           className="kc-sso-session-template"
         >
           <FormAccess
@@ -202,7 +199,7 @@ export const RealmSettingsSessionsTab = ({
           </FormAccess>
         </FormPanel>
         <FormPanel
-          title={t("realm-settings:clientSessionSettings")}
+          title={t(".pf-c-data-list__item-draggable-iconclientSessionSettings")}
           className="kc-client-session-template"
         >
           <FormAccess
@@ -271,7 +268,7 @@ export const RealmSettingsSessionsTab = ({
           </FormAccess>
         </FormPanel>
         <FormPanel
-          title={t("realm-settings:offlineSessionSettings")}
+          title={t("offlineSessionSettings")}
           className="kc-offline-session-template"
         >
           <FormAccess

src/realm-settings/event-config/EventsTab.tsx

@@ -37,7 +37,7 @@ export const EventsTab = () => {
   const [addEventType, setAddEventType] = useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
   const setupForm = (eventConfig?: RealmEventsConfigRepresentation) => {
@@ -70,12 +70,7 @@ export const EventsTab = () => {
         }
         addAlert(t(`${type}-events-cleared`), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError(`realm-settings:${type}-events-cleared-error`, error);
-          t(`${type}-events-cleared-error`, {
-            error: error.response?.data?.errorMessage || error,
-          }),
-          AlertVariant.danger
-        );
       }
     },
   });
@@ -95,12 +90,7 @@ export const EventsTab = () => {
       setupForm({ ...events, ...eventConfig });
       addAlert(t("eventConfigSuccessfully"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError("realm-settings:eventConfigError", error);
-        t("eventConfigError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx

@@ -47,7 +47,7 @@ export const AESGeneratedForm = ({
   const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -79,12 +79,7 @@ export const AESGeneratedForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx

@@ -47,7 +47,7 @@ export const ECDSAGeneratedForm = ({
   const [isKeySizeDropdownOpen, setIsKeySizeDropdownOpen] = useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -79,12 +79,7 @@ export const ECDSAGeneratedForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx

@@ -49,7 +49,7 @@ export const HMACGeneratedForm = ({
     useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -81,12 +81,7 @@ export const HMACGeneratedForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx

@@ -47,7 +47,7 @@ export const JavaKeystoreForm = ({
   const [isAlgorithmDropdownOpen, setIsAlgorithmDropdownOpen] = useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -79,12 +79,7 @@ export const JavaKeystoreForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx

@@ -49,7 +49,7 @@ export const RSAGeneratedForm = ({
     useState(false);
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -81,12 +81,7 @@ export const RSAGeneratedForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm-settings/key-providers/rsa/RSAForm.tsx

@@ -54,7 +54,7 @@ export const RSAForm = ({
   const [certificateFileName, setCertificateFileName] = useState("");
 
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { id } = useParams<{ id: string }>();
 
@@ -86,12 +86,7 @@ export const RSAForm = ({
         refresh?.();
       }
     } catch (error) {
-      addAlert(
+      addError("realm-settings:saveProviderError", error);
-        t("saveProviderError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/realm/add/NewRealmForm.tsx

@@ -26,7 +26,7 @@ export const NewRealmForm = () => {
   const { refresh } = useWhoAmI();
   const { refresh: realmRefresh } = useRealm();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { register, handleSubmit, control, errors, setValue } =
     useForm<RealmRepresentation>({ mode: "onChange" });
@@ -49,12 +49,7 @@ export const NewRealmForm = () => {
       await realmRefresh();
       history.push(`/${realm.realm}`);
     } catch (error) {
-      addAlert(
+      addError("realm:saveRealmError", error);
-        t("saveRealmError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };
 

src/user-federation/UserFederationKerberosSettings.tsx

@@ -88,7 +88,7 @@ export const UserFederationKerberosSettings = () => {
 
   const { id } = useParams<{ id: string }>();
 
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   useEffect(() => {
     (async () => {
@@ -131,9 +131,9 @@ export const UserFederationKerberosSettings = () => {
         AlertVariant.success
       );
     } catch (error) {
-      addAlert(
+      addError(
-        `${t(id === "new" ? "createError" : "saveError")} '${error}'`,
+        `user-federation:${id === "new" ? "createError" : "saveError"}`,
-        AlertVariant.danger
+        error
       );
     }
   };
@@ -149,7 +149,7 @@ export const UserFederationKerberosSettings = () => {
         addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
         history.replace(`/${realm}/user-federation`);
       } catch (error) {
-        addAlert(`${t("userFedDeleteError")} ${error}`, AlertVariant.danger);
+        addAlert("user-federation:userFedDeleteError", error);
       }
     },
   });

src/user-federation/UserFederationLdapSettings.tsx

@@ -61,7 +61,7 @@ const LdapSettingsHeader = ({
   const { t } = useTranslation("user-federation");
   const { id } = useParams<{ id: string }>();
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
     titleKey: "user-federation:userFedDisableConfirmTitle",
     messageKey: "user-federation:userFedDisableConfirm",
@@ -90,7 +90,7 @@ const LdapSettingsHeader = ({
         }
       }
     } catch (error) {
-      addAlert(t("syncUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:syncUsersError", error);
     }
   };
 
@@ -112,7 +112,7 @@ const LdapSettingsHeader = ({
         }
       }
     } catch (error) {
-      addAlert(t("syncUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:syncUsersError", error);
     }
   };
 
@@ -123,7 +123,7 @@ const LdapSettingsHeader = ({
       }
       addAlert(t("unlinkUsersSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("unlinkUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:unlinkUsersError", error);
     }
   };
 
@@ -180,7 +180,7 @@ export const UserFederationLdapSettings = () => {
   const { realm } = useRealm();
 
   const { id } = useParams<{ id: string }>();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   useFetch(
     async () => {
@@ -223,7 +223,7 @@ export const UserFederationLdapSettings = () => {
       }
       addAlert(t("removeImportedUsersSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("removeImportedUsersError", { error }), AlertVariant.danger);
+      addError("user-federation:removeImportedUsersError", error);
     }
   };
 
@@ -249,10 +249,7 @@ export const UserFederationLdapSettings = () => {
       }
       addAlert(t(id ? "saveSuccess" : "createSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(
+      addError(`user-federation:${id ? "saveError" : "createError"}`, error);
-        t(id ? "saveError" : "createError", { error }),
-        AlertVariant.danger
-      );
     }
   };
 
@@ -265,7 +262,7 @@ export const UserFederationLdapSettings = () => {
         removeImportedUsers();
         addAlert(t("removeImportedUsersSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("removeImportedUsersError", { error }), AlertVariant.danger);
+        addError("user-federation:removeImportedUsersError", error);
       }
     },
   });
@@ -281,7 +278,7 @@ export const UserFederationLdapSettings = () => {
         addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
         history.replace(`/${realm}/user-federation`);
       } catch (error) {
-        addAlert(`${t("userFedDeleteError")} ${error}`, AlertVariant.danger);
+        addError("user-federation:userFedDeleteError", error);
       }
     },
   });

src/user-federation/UserFederationSection.tsx

@@ -29,7 +29,7 @@ import "./user-federation.css";
 export const UserFederationSection = () => {
   const [userFederations, setUserFederations] =
     useState<ComponentRepresentation[]>();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { t } = useTranslation("user-federation");
   const { realm } = useRealm();
   const adminClient = useAdminClient();
@@ -87,7 +87,7 @@ export const UserFederationSection = () => {
         refresh();
         addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("userFedDeleteError", { error }), AlertVariant.danger);
+        addError("user-federation:userFedDeleteError", error);
       }
     },
   });

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -48,7 +48,7 @@ export const LdapSettingsConnection = ({
   const { t: helpText } = useTranslation("user-federation-help");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const testLdap = async () => {
     try {
@@ -64,8 +64,7 @@ export const LdapSettingsConnection = ({
       );
       addAlert(t("testSuccess"), AlertVariant.success);
     } catch (error) {
-      addAlert(t("testError"), AlertVariant.danger);
+      addError("user-federation:testError", error);
-      console.error(error.response?.data?.errorMessage);
     }
   };
 

src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -45,7 +45,7 @@ export const LdapMapperDetails = () => {
   const { realm } = useRealm();
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
 
@@ -103,13 +103,13 @@ export const LdapMapperDetails = () => {
         AlertVariant.success
       );
     } catch (error) {
-      addAlert(
+      addError(
-        `${t(
+        `user-federation:${
           mapperId === "new"
             ? "common:mappingCreatedError"
             : "common:mappingUpdatedError"
-        )} '${error}'`,
+        }`,
-        AlertVariant.danger
+        error
       );
     }
   };

src/user-federation/ldap/mappers/LdapMapperList.tsx

@@ -19,7 +19,7 @@ export const LdapMapperList = () => {
   const history = useHistory();
   const { t } = useTranslation("user-federation");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { url } = useRouteMatch();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -63,10 +63,7 @@ export const LdapMapperList = () => {
         addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
         setSelectedMapper(undefined);
       } catch (error) {
-        addAlert(
+        addError("common:mappingDeletedError", error);
-          t("common:mappingDeletedError", { error }),
-          AlertVariant.danger
-        );
       }
     },
   });

src/user-federation/messages.ts

@@ -92,7 +92,7 @@ export default {
     createError: "User federation provider could not be created: {{error}}",
     testSuccess: "Successfully connected to LDAP",
     testError:
-      "Error when trying to connect to LDAP. See server.log for details.",
+      "Error when trying to connect to LDAP. See server.log for details. {{error}}",
 
     learnMore: "Learn more",
     addNewProvider: "Add new provider",

src/user/UserConsents.tsx

@@ -23,7 +23,7 @@ export const UserConsents = () => {
   const [selectedClient, setSelectedClient] =
     useState<UserConsentRepresentation>();
   const { t } = useTranslation("roles");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const [key, setKey] = useState(0);
 
   const adminClient = useAdminClient();
@@ -87,7 +87,7 @@ export const UserConsents = () => {
 
         addAlert(t("deleteGrantsSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("deleteGrantsError", { error }), AlertVariant.danger);
+        addError("roles:deleteGrantsError", error);
       }
     },
   });

src/user/UserForm.tsx

@@ -57,7 +57,7 @@ export const UserForm = ({
     []
   );
 
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const [open, setOpen] = useState(false);
 
@@ -121,10 +121,7 @@ export const UserForm = ({
         });
         addAlert(t("users:addedGroupMembership"), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError("users:addedGroupMembershipError", error);
-          t("users:addedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
       }
     });
   };

src/user/UserGroups.tsx

@@ -35,7 +35,7 @@ export type UserFormProps = {
 
 export const UserGroups = () => {
   const { t } = useTranslation("users");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
@@ -213,10 +213,7 @@ export const UserGroups = () => {
         refresh();
         addAlert(t("removedGroupMembership"), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError("users:removedGroupMembershipError", error);
-          t("removedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
       }
     },
   });
@@ -259,10 +256,7 @@ export const UserGroups = () => {
         refresh();
         addAlert(t("addedGroupMembership"), AlertVariant.success);
       } catch (error) {
-        addAlert(
+        addError("users:addedGroupMembershipError", error);
-          t("addedGroupMembershipError", { error }),
-          AlertVariant.danger
-        );
       }
     });
   };

src/user/UsersSection.tsx

@@ -34,7 +34,7 @@ type BruteUser = UserRepresentation & {
 export const UsersSection = () => {
   const { t } = useTranslation("users");
   const adminClient = useAdminClient();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const { realm: realmName } = useRealm();
   const history = useHistory();
   const { url } = useRouteMatch();
@@ -106,7 +106,7 @@ export const UsersSection = () => {
       }
       return users;
     } catch (error) {
-      addAlert(t("noUsersFoundError", { error }), AlertVariant.danger);
+      addError("users:noUsersFoundError", error);
       return [];
     }
   };
@@ -125,7 +125,7 @@ export const UsersSection = () => {
         refresh();
         addAlert(t("userDeletedSuccess"), AlertVariant.success);
       } catch (error) {
-        addAlert(t("userDeletedError", { error }), AlertVariant.danger);
+        addError("users:userDeletedError", error);
       }
     },
   });

src/user/UsersTabs.tsx

@@ -22,7 +22,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
   const history = useHistory();
   const { realm } = useRealm();
 
@@ -65,12 +65,7 @@ export const UsersTabs = () => {
         history.push(`/${realm}/users/${createdUser.id}/settings`);
       }
     } catch (error) {
-      addAlert(
+      addError("users:userCreateError", error);
-        t("users:userCreateError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
-      );
     }
   };