Can you disable the React-Admin Undo feature in config?

Question

The Undo feature is a great, but it can cause inefficiencies during development cycles.

Is there an easy way for us to disable it in our staging environment, or at least lower the timeout?

Answer 1

The Edit and Create components support the undoable parameter. So you could do like this <Edit {...props} undoable={false} > to disable the undo function for a specific Form

Answer 2

When I unterstand the documentation and src correctly, you have to override the notification component in order to change the autoHideDuration. This is the time the notification is visible to the user and after the delay, the request is send to the api.

When you set it to 0 the requests should be send nearly immediately.
From the documentation - Theming - Notifications:

You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the autoHideDuration prop. For instance, to create a custom Notification component with a 5 seconds default:

// in src/MyNotification.js
import { Notification } from 'react-admin';

const MyNotification = props => <Notification {...props}autoHideDuration={5000} />;

export default MyNotification;

Answer 3

undoable can only be set on Edit component and not on the Create component.

Handle the formProps coming from the Create page by adding a custom variable to check if the props are indeed from the 'Create' page or from the server.

To customize notification for Create or Edit page you can pass the successMessage prop to the components

successMessage="Item created successfully" //or use translate

More about 'successMessage' can be found here - React Documentation

Answer 4

With react-admin v.4 the way to disable Undo feature so changes are immediately saved is to add mutationMode="optimistic" to Edit/Create component.

To change the success notification message use mutationOptions={{ onSuccess }} together with notify hook

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

    const notify = useNotify();
    const refresh = useRefresh();
    const redirect = useRedirect();

    const onSuccess = () => {
        notify(`Changes saved`);
        redirect('/your-collection');
        refresh();
    };

    return (
        <Edit mutationMode="optimistic" mutationOptions={{ onSuccess }}>
        ...