Handle submission validation errors

[alanpoulain]

Fixes #4703.
Fixes #4351.

Returning a promise in the submit function is essential for handling correctly submission errors: https://final-form.org/docs/react-final-form/types/FormProps#3-asynchronous-with-a-promise.

It has been discussed in this issue too: #4351.

useCreateController and useEditController hooks are already returning a promise resolving to undefined for the save function: it will not break anything.

To handle submission errors, the custom save function could be implemented by using the useDataProvider hook, like this: bmihelac@1a9f02b.

In order to be able to use the useMutation hook too, a returnPromise option has been added, like asked in @fzaninotto's comment: #4703 (comment).

I hope it will be OK, it would be really nice to have a way to handle submission errors easily in React-Admin and API Platform Admin!

[fzaninotto]

Awesome! Can you add some usage documentation in https://marmelab.com/react-admin/CreateEdit.html#validation, and a unit test in useMutation.spec.tsx?

[alanpoulain]

PR has been updated to add:

• documentation
• a unit test for useMutation
• allowing save to be defined in SimpleForm
• handle submitError in inputs

I've tested it on a project. With this code:

const Create = (props) => {
  const [mutate] = useMutation()
  const save = useCallback(
    async (values) => {
      try {
        await mutate({
          type: 'create',
          resource: 'origins',
          payload: { data: values },
        }, { returnPromise: true });
      } catch (error) {
        return {
          url: 'a custom server error',
        };
      }
    },
    [mutate],
  )

  return (
    <Wrapper>
      <RACreate undoable={false} {...props}>
        <SimpleForm toolbar={<Toolbar />} save={save} redirect='/origins'>
          <InputGuesser source='name' fullWidth variant='outlined' />
          <InputGuesser source='url' fullWidth variant='outlined' />
          <InputGuesser source='comment' fullWidth variant='outlined' />
        </SimpleForm>
      </RACreate>
    </Wrapper>
  )
}

The result is:

submission_errors.mp4

[alanpoulain]

Rebased against next.
The unit test useQueryWithStore › should refetch the dataProvider on refresh seems to be flaky.
Locally, sometimes it passes, sometimes not:

[fzaninotto]

This is really concerning to me. Any error in the form.restart() won't be caught.

Can you explain why the error occurs, why the setTimeout removes it, and check if there is no other way? And can you add a unit test?

[alanpoulain]

This is the way final-form is telling to do it: https://github.com/final-form/final-form/blob/ee1ef7272882a966644ca1bf0ea6f115a2492251/src/FinalForm.js#L933.
However this constraint seems to have been removed in the next version:
final-form/final-form#363
I don't see how we could add a unit test for this.

[alanpoulain]

I've added a comment to explain that the setTimeout should be removed when the next version of final-form will be released.
And actually there is already a test for this:

react-admin/cypress/integration/edit.js

Lines 260 to 277 in baaf3da

	it('should not display a warning about unsaved changes when an array input has been updated', () => {
	ListPagePosts.navigate();
	ListPagePosts.nextPage(); // Ensure the record is visible in the table
	EditPostPage.navigate();
	// Select first notification input checkbox
	cy.get(
	EditPostPage.elements.input('notifications', 'checkbox-group-input')
	)
	.eq(0)
	.click();
	EditPostPage.submit();
	// If the update succeeded without display a warning about unsaved changes,
	// we should have been redirected to the list
	cy.url().then(url => expect(url).to.contain('/#/posts'));
	});

(it throws the linked error without the setTimeout)

[djhi]

The unit test useQueryWithStore › should refetch the dataProvider on refresh seems to be flaky

Indeed. Looking into it

[fzaninotto]

Thank you very much!