Merge pull request marmelab#5152 from marmelab/fix-edit-refresh

Disable Edit Automatic Refresh if Form is Dirty

packages/ra-core/src/actions/uiActions.ts

@@ -31,3 +31,15 @@ export interface RefreshViewAction {
 export const refreshView = (): RefreshViewAction => ({
     type: REFRESH_VIEW,
 });
+
+export const SET_AUTOMATIC_REFRESH = 'RA/SET_AUTOMATIC_REFRESH';
+
+export interface SetAutomaticRefreshAction {
+    readonly type: typeof SET_AUTOMATIC_REFRESH;
+    readonly payload: boolean;
+}
+
+export const setAutomaticRefresh = (enabled: boolean) => ({
+    type: SET_AUTOMATIC_REFRESH,
+    payload: enabled,
+});

packages/ra-core/src/dataProvider/index.ts

@@ -22,6 +22,7 @@ import useCreate from './useCreate';
 import useDelete from './useDelete';
 import useDeleteMany from './useDeleteMany';
 import useRefreshWhenVisible from './useRefreshWhenVisible';
+import useIsAutomaticRefreshEnabled from './useIsAutomaticRefreshEnabled';
 
 export {
     cacheDataProviderProxy,
@@ -48,4 +49,5 @@ export {
     useQueryWithStore,
     useRefreshWhenVisible,
     withDataProvider,
+    useIsAutomaticRefreshEnabled,
 };

packages/ra-core/src/dataProvider/useIsAutomaticRefreshEnabled.ts

@@ -0,0 +1,12 @@
+import { useSelector } from 'react-redux';
+import { ReduxState } from '../types';
+
+const useIsAutomaticRefreshEnabled = () => {
+    const automaticRefreshEnabled = useSelector<ReduxState>(
+        state => state.admin.ui.automaticRefreshEnabled
+    );
+
+    return automaticRefreshEnabled;
+};
+
+export default useIsAutomaticRefreshEnabled;

packages/ra-core/src/dataProvider/useRefreshWhenVisible.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useRefresh } from '../sideEffect';
+import useIsAutomaticRefreshEnabled from './useIsAutomaticRefreshEnabled';
 
 /**
  * Trigger a refresh of the page when the page comes back from background after a certain delay
@@ -8,9 +9,14 @@ import { useRefresh } from '../sideEffect';
  */
 const useRefreshWhenVisible = (delay = 1000 * 60 * 5) => {
     const refresh = useRefresh();
+    const automaticRefreshEnabled = useIsAutomaticRefreshEnabled();
+
     useEffect(() => {
         let lastHiddenTime;
         const handleVisibilityChange = () => {
+            if (!automaticRefreshEnabled) {
+                return;
+            }
             if (document.hidden) {
                 // tab goes hidden
                 lastHiddenTime = Date.now();
@@ -30,7 +36,7 @@ const useRefreshWhenVisible = (delay = 1000 * 60 * 5) => {
                 'visibilitychange',
                 handleVisibilityChange
             );
-    }, [delay, refresh]);
+    }, [automaticRefreshEnabled, delay, refresh]);
 };
 
 export default useRefreshWhenVisible;

packages/ra-core/src/form/FormWithRedirect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, useRef, useCallback, useMemo } from 'react';
+import { FC, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Form, FormProps } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
 
@@ -10,6 +10,8 @@ import getFormInitialValues from './getFormInitialValues';
 import FormContext from './FormContext';
 import { Record } from '../types';
 import { RedirectionSideEffect } from '../sideEffect';
+import { useDispatch } from 'react-redux';
+import { setAutomaticRefresh } from '../actions';
 
 /**
  * Wrapper around react-final-form's Form to handle redirection on submit,
@@ -174,6 +176,11 @@ const FormView = ({ render, warnWhenUnsavedChanges, ...props }) => {
     // if record changes (after a getOne success or a refresh), the form must be updated
     useInitializeFormWithRecord(props.record);
     useWarnWhenUnsavedChanges(warnWhenUnsavedChanges);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(setAutomaticRefresh(props.pristine));
+    }, [dispatch, props.pristine]);
 
     const { redirect, setRedirect, handleSubmit } = props;
 

packages/ra-core/src/reducer/admin/ui.spec.ts

@@ -3,11 +3,13 @@ import {
     toggleSidebar,
     setSidebarVisibility,
     refreshView,
+    setAutomaticRefresh,
 } from '../../actions/uiActions';
 import reducer from './ui';
 
 describe('ui reducer', () => {
     const defaultState = {
+        automaticRefreshEnabled: true,
         sidebarOpen: false,
         optimistic: false,
         viewVersion: 0,
@@ -49,8 +51,38 @@ describe('ui reducer', () => {
             )
         );
     });
+    it('should return activated autimatic refresh by default', () => {
+        expect(reducer(undefined, { type: 'foo' })).toEqual(defaultState);
+    });
+    it('should set sidebar visibility upon SET_AUTOMATIC_REFRESH', () => {
+        expect({ ...defaultState, automaticRefreshEnabled: false }).toEqual(
+            reducer(
+                { ...defaultState, automaticRefreshEnabled: true },
+                setAutomaticRefresh(false)
+            )
+        );
+        expect({ ...defaultState, automaticRefreshEnabled: true }).toEqual(
+            reducer(
+                { ...defaultState, automaticRefreshEnabled: true },
+                setAutomaticRefresh(true)
+            )
+        );
+        expect({ ...defaultState, automaticRefreshEnabled: false }).toEqual(
+            reducer(
+                { ...defaultState, automaticRefreshEnabled: false },
+                setAutomaticRefresh(false)
+            )
+        );
+        expect({ ...defaultState, automaticRefreshEnabled: true }).toEqual(
+            reducer(
+                { ...defaultState, automaticRefreshEnabled: false },
+                setAutomaticRefresh(true)
+            )
+        );
+    });
     it('should increment the viewVersion upon REFRESH_VIEW', () => {
         expect({
+            automaticRefreshEnabled: true,
             optimistic: false,
             sidebarOpen: false,
             viewVersion: 1,

packages/ra-core/src/reducer/admin/ui.ts

@@ -10,6 +10,8 @@ import {
     StartOptimisticModeAction,
     STOP_OPTIMISTIC_MODE,
     StopOptimisticModeAction,
+    SET_AUTOMATIC_REFRESH,
+    SetAutomaticRefreshAction,
 } from '../../actions';
 
 type ActionTypes =
@@ -18,9 +20,11 @@ type ActionTypes =
     | RefreshViewAction
     | StartOptimisticModeAction
     | StopOptimisticModeAction
+    | SetAutomaticRefreshAction
     | { type: 'OTHER_ACTION' };
 
 export interface UIState {
+    readonly automaticRefreshEnabled: boolean;
     readonly sidebarOpen: boolean;
     readonly optimistic: boolean;
     readonly viewVersion: number;
@@ -37,6 +41,7 @@ const isDesktop = (): boolean =>
         : false;
 
 const defaultState: UIState = {
+    automaticRefreshEnabled: true,
     sidebarOpen: isDesktop(),
     optimistic: false,
     viewVersion: 0,
@@ -54,6 +59,11 @@ const uiReducer: Reducer<UIState> = (
             };
         case SET_SIDEBAR_VISIBILITY:
             return { ...previousState, sidebarOpen: action.payload };
+        case SET_AUTOMATIC_REFRESH:
+            return {
+                ...previousState,
+                automaticRefreshEnabled: action.payload,
+            };
         case REFRESH_VIEW:
             return {
                 ...previousState,

packages/ra-core/src/types.ts

@@ -285,6 +285,7 @@ export type LegacyDataProvider = (
 export interface ReduxState {
     admin: {
         ui: {
+            automaticRefreshEnabled: boolean;
             optimistic: boolean;
             sidebarOpen: boolean;
             viewVersion: number;