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
This commit is contained in:
vadim
2026-03-27 12:22:28 +03:00
parent 51a5e1b5c1
commit 5ef01c2282
3 changed files with 27 additions and 3 deletions

View File

@@ -1,6 +1,7 @@
import { Admin, Resource } from 'react-admin'; import { Admin, Resource } from 'react-admin';
import dataProvider from './dataProvider'; import dataProvider from './dataProvider';
import authProvider from './auth/authProvider'; import authProvider from './auth/authProvider';
import { AppNotification } from './AppNotification';
import { EquipmentTypeList } from './resources/equipment-type/EquipmentTypeList'; import { EquipmentTypeList } from './resources/equipment-type/EquipmentTypeList';
import { EquipmentTypeCreate } from './resources/equipment-type/EquipmentTypeCreate'; 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'; import { RepairOrderShow } from './resources/repair-order/RepairOrderShow';
const App = () => ( const App = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider} requireAuth> <Admin
dataProvider={dataProvider}
authProvider={authProvider}
notification={AppNotification}
requireAuth
>
<Resource <Resource
name="equipment-types" name="equipment-types"
options={{ label: 'Виды оборудования' }} options={{ label: 'Виды оборудования' }}

View File

@@ -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',
},
}}
/>
);

View File

@@ -25,8 +25,10 @@ const httpClient = async (url: string, options: fetchUtils.Options = {}) => {
}; };
const messageFromBody = e?.body?.message; const messageFromBody = e?.body?.message;
const normalizedMessage = Array.isArray(messageFromBody) const normalizedMessage = Array.isArray(messageFromBody)
? messageFromBody.join(', ') ? messageFromBody.join('\n')
: messageFromBody; : typeof messageFromBody === 'string'
? messageFromBody.split(', ').join('\n')
: messageFromBody;
throw new HttpError( throw new HttpError(
normalizedMessage || e?.message || 'Request failed', normalizedMessage || e?.message || 'Request failed',