Add create / edit side effects and transform

[fzaninotto]

Problem

I wanted to force a refresh after save in a <Create> view. I found it super hard to do even though I know the react-admin internals. I realized it's probably impossible for someone who doesn't know react-admin.

Also, there are ways to override the notification message in the Create/Edit view (successMessage) and ways to override the redirect in SimpleForm. These are both side effects that should be the responsibility of the main controller, not the form. These props allow a very granular customization, but don't allow adding another side effect.

Finally, the recent addition of the onSave prop requires too much documentation and too much boilerplate for most common use cases.

Solution

Allow users to declare success and failure side effects at the controller side, and to override them for each SaveButton.

Introduce a transform function to transform a submitted record before it is sent to the dataProvider.

Examples

Customizing the notification based on the error from the dataProvider:

import { Edit, useNotify, useRedirect } from 'react-admin';

const PostEdit = props => {
    const notify = useNotify();
    const redirect = useRedirect();
    const onFailure = (error) => {
        if (error.code == 123) {
            notify('Could not save changes: concurrent edition in progress', 'warning');
        } else {
            notify('ra.notification.http_error', 'warning')
        }
        redirect('list', props.basePath);
    }
    return (
        <Edit {...props} onFailure={onFailure}>
            ...
        </Edit>
    );
}

Altering the form value when the user clicks on a particular save button:

const PostCreateToolbar = props => (
    <Toolbar {...props}>
        <SaveButton submitOnEnter={true} />
        <SaveButton
            label="post.action.save_and_notify"
            transform={data => ({ ...data, notify: true })}
            submitOnEnter={false}
        />
    </Toolbar>
);

const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm toolbar={<PostCreateToolbar />}>
            // ...
        </SimpleForm>
    </Create>
);

Tasks

• Add onSuccess, onFailure and transform support in <Create> and <Edit>
• Add onSuccess, onFailure and transform support in <SaveButton>
• Deprecate successMessage
• Deprecate onSave
• Add unit & integration tests for the new props
• Update documentation

[djhi]

👍

[djhi]

Awesome 😍