[RFR] Fix create to edit form values

cypress/integration/create.js

@@ -63,7 +63,7 @@ describe('Create Page', () => {
         );
     });
 
-    it('should redirect to show page after create success', () => {
+    it('should redirect to edit page after create success', () => {
         const values = [
             {
                 type: 'input',
@@ -79,6 +79,33 @@ describe('Create Page', () => {
 
         CreatePage.setValues(values);
         CreatePage.submit();
+        EditPage.waitUntilVisible();
+        cy.get(EditPage.elements.input('title')).should(el =>
+            expect(el).to.have.value('Test title')
+        );
+        cy.get(EditPage.elements.input('teaser')).should(el =>
+            expect(el).to.have.value('Test teaser')
+        );
+
+        EditPage.delete();
+    });
+
+    it('should redirect to show page after create success with "Save and show"', () => {
+        const values = [
+            {
+                type: 'input',
+                name: 'title',
+                value: 'Test title',
+            },
+            {
+                type: 'textarea',
+                name: 'teaser',
+                value: 'Test teaser',
+            },
+        ];
+
+        CreatePage.setValues(values);
+        CreatePage.submitAndShow();
         ShowPage.waitUntilVisible();
         EditPage.navigate();
         EditPage.delete();

cypress/support/CreatePage.js

@@ -7,8 +7,10 @@ export default url => ({
         inputs: `.ra-input`,
         snackbar: 'div[role="alertdialog"]',
         submitButton: ".create-page button[type='submit']",
-        submitAndAddButton:
+        submitAndShowButton:
             ".create-page form>div:last-child button[type='button']:nth-child(2)",
+        submitAndAddButton:
+            ".create-page form>div:last-child button[type='button']:nth-child(3)",
         submitCommentable:
             ".create-page form>div:last-child button[type='button']:last-child",
         descInput: '.ql-editor',
@@ -55,6 +57,13 @@ export default url => ({
         cy.wait(200); // let the notification disappear (could block further submits)
     },
 
+    submitAndShow() {
+        cy.get(this.elements.submitAndShowButton).click();
+        cy.get(this.elements.snackbar);
+        cy.get(this.elements.body).click(); // dismiss notification
+        cy.wait(200); // let the notification disappear (could block further submits)
+    },
+
     submitAndAdd() {
         cy.get(this.elements.submitAndAddButton).click();
         cy.get(this.elements.snackbar);

examples/simple/src/i18n/en.js

@@ -66,6 +66,7 @@ export const messages = {
             title: 'Post "%{title}"',
         },
         action: {
+            save_and_edit: 'Save and Edit',
             save_and_add: 'Save and Add',
             save_and_show: 'Save and Show',
             save_with_average_note: 'Save with Note',

examples/simple/src/posts/PostCreate.js

@@ -52,10 +52,16 @@ const SaveWithNoteButton = connect(
 
 const PostCreateToolbar = props => (
     <Toolbar {...props}>
+        <SaveButton
+            label="post.action.save_and_edit"
+            redirect="edit"
+            submitOnEnter={true}
+        />
         <SaveButton
             label="post.action.save_and_show"
             redirect="show"
-            submitOnEnter={true}
+            submitOnEnter={false}
+            variant="flat"
         />
         <SaveButton
             label="post.action.save_and_add"

packages/ra-core/src/actions/formActions.js

@@ -1,5 +1,6 @@
 export const INITIALIZE_FORM = 'RA/INITIALIZE_FORM';
 export const RESET_FORM = 'RA/RESET_FORM';
+export const BEFORE_LOCATION_CHANGE = 'RA/BEFORE_LOCATION_CHANGE';
 
 export const initializeForm = initialValues => ({
     type: INITIALIZE_FORM,
@@ -9,3 +10,9 @@ export const initializeForm = initialValues => ({
 export const resetForm = () => ({
     type: RESET_FORM,
 });
+
+export const beforeLocationChange = ({ payload, meta }) => ({
+    type: BEFORE_LOCATION_CHANGE,
+    payload,
+    meta,
+});

packages/ra-core/src/createAdminStore.js

@@ -7,6 +7,7 @@ import { USER_LOGOUT } from './actions/authActions';
 import createAppReducer from './reducer';
 import { adminSaga } from './sideEffect';
 import { defaultI18nProvider } from './i18n';
+import formMiddleware from './form/formMiddleware';
 
 export default ({
     authProvider,
@@ -36,7 +37,11 @@ export default ({
         resettableAppReducer,
         initialState,
         compose(
-            applyMiddleware(sagaMiddleware, routerMiddleware(history)),
+            applyMiddleware(
+                sagaMiddleware,
+                formMiddleware,
+                routerMiddleware(history)
+            ),
             typeof window !== 'undefined' && window.devToolsExtension
                 ? window.devToolsExtension()
                 : f => f

packages/ra-core/src/form/formMiddleware.js

@@ -0,0 +1,43 @@
+import { LOCATION_CHANGE } from 'react-router-redux';
+import { destroy } from 'redux-form';
+import isEqual from 'lodash/isEqual';
+
+import { resetForm } from '../actions/formActions';
+import { REDUX_FORM_NAME } from '../form/constants';
+
+/**
+ * This middleware ensure that whenever a location change happen, we get the
+ * chance to properly reset the redux-form record form, preventing data to be
+ * kept between different resources or form types (CREATE, EDIT).
+ *
+ * A middleware is needed instead of a saga because we need to control the actions
+ * order: we need to ensure we reset the redux form BEFORE the location actually
+ * change. Otherwise, the new page which may contains a record redux-form might
+ * initialize before our reset and loose its data.
+ */
+const formMiddleware = () => {
+    let previousLocation;
+    return next => action => {
+        if (
+            action.type !== LOCATION_CHANGE ||
+            (action.payload.state && action.payload.state.skipFormReset)
+        ) {
+            return next(action);
+        }
+
+        // history allows one to redirect to the same location which can happen
+        // when using a special menu for a create page for instance. In this case,
+        // we don't want to reset the form.
+        // See https://github.com/marmelab/react-admin/issues/2291
+        if (isEqual(action.payload, previousLocation)) {
+            return next(action);
+        }
+
+        previousLocation = action.payload;
+        next(resetForm());
+        next(destroy(REDUX_FORM_NAME));
+        return next(action);
+    };
+};
+
+export default formMiddleware;

packages/ra-core/src/form/formMiddleware.spec.js

@@ -0,0 +1,62 @@
+import { LOCATION_CHANGE } from 'react-router-redux';
+import { destroy } from 'redux-form';
+
+import formMiddleware from './formMiddleware';
+import { REDUX_FORM_NAME } from '../form/constants';
+import { resetForm } from '../actions/formActions';
+
+describe('form middleware', () => {
+    it('does not prevent actions other than LOCATION_CHANGE to be handled', () => {
+        const next = jest.fn();
+        const action = { type: '@@redux-form/INITIALIZE' };
+
+        formMiddleware()(next)(action);
+
+        expect(next).toHaveBeenCalledWith(action);
+        expect(next).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not prevent LOCATION_CHANGE actions to be handled if their state contains a skipFormReset set to true', () => {
+        const next = jest.fn();
+        const action = {
+            type: LOCATION_CHANGE,
+            payload: { state: { skipFormReset: true } },
+        };
+        formMiddleware()(next)(action);
+
+        expect(next).toHaveBeenCalledWith(action);
+    });
+
+    it('resets the record state and destroy the redux form before letting the location change to be handled', () => {
+        const next = jest.fn();
+        const action = {
+            type: LOCATION_CHANGE,
+            payload: {
+                pathname: '/posts/create',
+            },
+        };
+        formMiddleware()(next)(action);
+
+        expect(next).toHaveBeenCalledWith(resetForm());
+        expect(next).toHaveBeenCalledWith(destroy(REDUX_FORM_NAME));
+        expect(next).toHaveBeenCalledWith(action);
+        expect(next).toHaveBeenCalledTimes(3);
+    });
+
+    it('does not resets the record and form if LOCATION_CHANGE targets the same location', () => {
+        const next = jest.fn();
+        const action = {
+            type: LOCATION_CHANGE,
+            payload: {
+                pathname: '/posts/create',
+            },
+        };
+        const middleware = formMiddleware()(next);
+        middleware(action);
+        middleware(action);
+        expect(next).toHaveBeenCalledWith(resetForm());
+        expect(next).toHaveBeenCalledWith(destroy(REDUX_FORM_NAME));
+        expect(next).toHaveBeenCalledWith(action);
+        expect(next).toHaveBeenCalledTimes(4);
+    });
+});

packages/ra-core/src/sideEffect/admin.js

@@ -9,7 +9,6 @@ import redirection from './redirection';
 import accumulate from './accumulate';
 import refresh from './refresh';
 import undo from './undo';
-import recordForm from './recordForm';
 
 /**
  * @param {Object} dataProvider A Data Provider function
@@ -27,6 +26,5 @@ export default (dataProvider, authProvider, i18nProvider) =>
             refresh(),
             notification(),
             callback(),
-            recordForm(),
         ]);
     };

packages/ra-core/src/sideEffect/index.js

@@ -9,4 +9,3 @@ export accumulateSaga from './accumulate';
 export refreshSaga from './refresh';
 export i18nSaga from './i18n';
 export undoSaga from './undo';
-export recordForm from './recordForm';