From 5ef01c22828839d177e545d741192a9add4f34da Mon Sep 17 00:00:00 2001
From: vadim <vadim@greact.local>
Date: Fri, 27 Mar 2026 12:22:28 +0300
Subject: [PATCH] format UI validation alerts as multiline

Render backend validation messages line-by-line in react-admin notifications so each error appears on a separate line.

Made-with: Cursor
---
 client/src/App.tsx             |  8 +++++++-
 client/src/AppNotification.tsx | 16 ++++++++++++++++
 client/src/dataProvider.ts     |  6 ++++--
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 client/src/AppNotification.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 91a825f..6479c97 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,6 +1,7 @@
 import { Admin, Resource } from 'react-admin';
 import dataProvider from './dataProvider';
 import authProvider from './auth/authProvider';
+import { AppNotification } from './AppNotification';
 
 import { EquipmentTypeList } from './resources/equipment-type/EquipmentTypeList';
 import { EquipmentTypeCreate } from './resources/equipment-type/EquipmentTypeCreate';
@@ -18,7 +19,12 @@ import { RepairOrderEdit } from './resources/repair-order/RepairOrderEdit';
 import { RepairOrderShow } from './resources/repair-order/RepairOrderShow';
 
 const App = () => (
-  <Admin dataProvider={dataProvider} authProvider={authProvider} requireAuth>
+  <Admin
+    dataProvider={dataProvider}
+    authProvider={authProvider}
+    notification={AppNotification}
+    requireAuth
+  >
     <Resource
       name="equipment-types"
       options={{ label: 'Виды оборудования' }}
diff --git a/client/src/AppNotification.tsx b/client/src/AppNotification.tsx
new file mode 100644
index 0000000..d194b14
--- /dev/null
+++ b/client/src/AppNotification.tsx
@@ -0,0 +1,16 @@
+import { Notification, NotificationProps } from 'react-admin';
+
+export const AppNotification = (props: NotificationProps) => (
+  <Notification
+    {...props}
+    sx={{
+      whiteSpace: 'pre-line',
+      '& .MuiAlert-message': {
+        whiteSpace: 'pre-line',
+      },
+      '& .MuiSnackbarContent-message': {
+        whiteSpace: 'pre-line',
+      },
+    }}
+  />
+);
diff --git a/client/src/dataProvider.ts b/client/src/dataProvider.ts
index f8987cc..5fdee6d 100644
--- a/client/src/dataProvider.ts
+++ b/client/src/dataProvider.ts
@@ -25,8 +25,10 @@ const httpClient = async (url: string, options: fetchUtils.Options = {}) => {
     };
     const messageFromBody = e?.body?.message;
     const normalizedMessage = Array.isArray(messageFromBody)
-      ? messageFromBody.join(', ')
-      : messageFromBody;
+      ? messageFromBody.join('\n')
+      : typeof messageFromBody === 'string'
+        ? messageFromBody.split(', ').join('\n')
+        : messageFromBody;
 
     throw new HttpError(
       normalizedMessage || e?.message || 'Request failed',