Parse multiple user profile errors (#4217)

apps/admin-ui/src/components/alert/AlertPanel.tsx

@@ -13,7 +13,11 @@ type AlertPanelProps = {
 
 export function AlertPanel({ alerts, onCloseAlert }: AlertPanelProps) {
   return (
-    <AlertGroup data-testid="global-alerts" isToast>
+    <AlertGroup
+      data-testid="global-alerts"
+      isToast
+      style={{ whiteSpace: "pre-wrap" }}
+    >
       {alerts.map(({ id, variant, message, description }) => (
         <Alert
           key={id}

apps/admin-ui/src/user/CreateUser.tsx

@@ -13,6 +13,10 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { UserProfileProvider } from "../realm-settings/user-profile/UserProfileContext";
 import { toUser } from "./routes/User";
 import { UserForm } from "./UserForm";
+import {
+  isUserProfileError,
+  userProfileErrorToString,
+} from "./UserProfileFields";
 
 import "./user-section.css";
 
@@ -37,8 +41,12 @@ export default function CreateUser() {
       addAlert(t("userCreated"), AlertVariant.success);
       navigate(toUser({ id: createdUser.id, realm, tab: "settings" }));
     } catch (error) {
+      if (isUserProfileError(error)) {
+        addError(userProfileErrorToString(error), error);
+      } else {
         addError("users:userCreateError", error);
       }
+    }
   };
 
   return (

apps/admin-ui/src/user/EditUser.tsx

@@ -33,6 +33,10 @@ import { UserCredentials } from "./UserCredentials";
 import { BruteForced, UserForm } from "./UserForm";
 import { UserGroups } from "./UserGroups";
 import { UserIdentityProviderLinks } from "./UserIdentityProviderLinks";
+import {
+  isUserProfileError,
+  userProfileErrorToString,
+} from "./UserProfileFields";
 import { UserRoleMapping } from "./UserRoleMapping";
 import { UserSessions } from "./UserSessions";
 
@@ -130,8 +134,12 @@ const EditUserForm = ({ user, bruteForced, refresh }: EditUserFormProps) => {
       addAlert(t("userSaved"), AlertVariant.success);
       refresh();
     } catch (error) {
+      if (isUserProfileError(error)) {
+        addError(userProfileErrorToString(error), error);
+      } else {
         addError("users:userCreateError", error);
       }
+    }
   };
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({

apps/admin-ui/src/user/UserProfileFields.tsx

@@ -1,6 +1,3 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
 import {
   Form,
   FormGroup,
@@ -8,13 +5,16 @@ import {
   SelectOption,
   Text,
 } from "@patternfly/react-core";
+import { Fragment } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import type {
   UserProfileAttribute,
   UserProfileAttributeRequired,
 } from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
-import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
+import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { useUserProfile } from "../realm-settings/user-profile/UserProfileContext";
 import useToggle from "../utils/useToggle";
 
@@ -25,6 +25,20 @@ type UserProfileFieldsProps = {
   roles?: string[];
 };
 
+export type UserProfileError = {
+  responseData: { errors?: { errorMessage: string }[] };
+};
+
+export function isUserProfileError(error: unknown): error is UserProfileError {
+  return !!(error as UserProfileError).responseData.errors;
+}
+
+export function userProfileErrorToString(error: UserProfileError) {
+  return (
+    error.responseData["errors"]?.map((e) => e["errorMessage"]).join("\n") || ""
+  );
+}
+
 export const UserProfileFields = ({
   roles = ["admin"],
 }: UserProfileFieldsProps) => {