Skip to content

Commit f35fb60

Browse files
authored
Merge pull request #10386 from marmelab/story/textInput_with_server_error
Add a story when `TextInput` trigger a server error
2 parents 77f7ed8 + f278b42 commit f35fb60

File tree

1 file changed

+68
-1
lines changed

1 file changed

+68
-1
lines changed

packages/ra-ui-materialui/src/input/TextInput.stories.tsx

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { required } from 'ra-core';
2+
import { required, Resource } from 'ra-core';
33
import { useFormState, useFormContext } from 'react-hook-form';
44

55
import { TextInput } from './TextInput';
@@ -9,6 +9,8 @@ import { Edit } from '../detail';
99
import { SimpleForm, Toolbar } from '../form';
1010
import { SaveButton } from '../button';
1111
import { FormInspector } from './common';
12+
import { Admin } from 'react-admin';
13+
import { MemoryRouter } from 'react-router';
1214

1315
export default { title: 'ra-ui-materialui/input/TextInput' };
1416

@@ -176,6 +178,71 @@ export const Error = () => (
176178
</AdminContext>
177179
);
178180

181+
export const ServerError = () => (
182+
<MemoryRouter initialEntries={['/posts/create']}>
183+
<Admin
184+
dataProvider={
185+
{
186+
create: (resource, { data }) => {
187+
console.log(`reject create on ${resource}: `, data);
188+
return Promise.reject({
189+
data,
190+
message:
191+
'An article with this title already exists. The title must be unique.',
192+
});
193+
},
194+
} as any
195+
}
196+
>
197+
<Resource
198+
name="posts"
199+
create={() => (
200+
<Create resource="posts" record={{ title: 'Lorem ipsum' }}>
201+
<SimpleForm toolbar={AlwaysOnToolbar}>
202+
<TextInput source="title" />
203+
<FormInspector />
204+
</SimpleForm>
205+
</Create>
206+
)}
207+
/>
208+
</Admin>
209+
</MemoryRouter>
210+
);
211+
212+
export const ServerValidationError = () => (
213+
<MemoryRouter initialEntries={['/posts/create']}>
214+
<Admin
215+
dataProvider={
216+
{
217+
create: (resource, { data }) => {
218+
console.log(`reject create on ${resource}: `, data);
219+
return Promise.reject({
220+
data,
221+
body: {
222+
errors: {
223+
title: 'An article with this title already exists. The title must be unique.',
224+
},
225+
},
226+
});
227+
},
228+
} as any
229+
}
230+
>
231+
<Resource
232+
name="posts"
233+
create={() => (
234+
<Create resource="posts" record={{ title: 'Lorem ipsum' }}>
235+
<SimpleForm toolbar={AlwaysOnToolbar}>
236+
<TextInput source="title" />
237+
<FormInspector />
238+
</SimpleForm>
239+
</Create>
240+
)}
241+
/>
242+
</Admin>
243+
</MemoryRouter>
244+
);
245+
179246
export const Sx = () => (
180247
<Wrapper>
181248
<TextInput

0 commit comments

Comments
 (0)