Merge pull request #5842 from marmelab/fix-save-button-breaking-change

Fix SaveButton Breaking Change Regarding FormContext
marmelab · Feb 2, 2021 · ac6f065 · ac6f065
2 parents 69edd3f + 59f87d0
commit ac6f065
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 29 deletions.
diff --git a/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx b/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx
@@ -57,9 +57,7 @@ describe('<SaveButton />', () => {
             <TestContext>
                 <ThemeProvider theme={theme}>
                     <SaveContextProvider value={saveContextValue}>
-                        <FormContextProvider value={formContextValue}>
-                            <SaveButton {...invalidButtonDomProps} />
-                        </FormContextProvider>
+                        <SaveButton {...invalidButtonDomProps} />
                     </SaveContextProvider>
                 </ThemeProvider>
             </TestContext>
@@ -78,9 +76,7 @@ describe('<SaveButton />', () => {
             <TestContext>
                 <ThemeProvider theme={theme}>
                     <SaveContextProvider value={saveContextValue}>
-                        <FormContextProvider value={formContextValue}>
-                            <SaveButton disabled={true} />
-                        </FormContextProvider>
+                        <SaveButton disabled={true} />
                     </SaveContextProvider>
                 </ThemeProvider>
             </TestContext>
@@ -92,9 +88,7 @@ describe('<SaveButton />', () => {
         const { getByLabelText } = render(
             <TestContext>
                 <SaveContextProvider value={saveContextValue}>
-                    <FormContextProvider value={formContextValue}>
-                        <SaveButton submitOnEnter />
-                    </FormContextProvider>
+                    <SaveButton submitOnEnter />
                 </SaveContextProvider>
             </TestContext>
         );
@@ -107,9 +101,7 @@ describe('<SaveButton />', () => {
         const { getByLabelText } = render(
             <TestContext>
                 <SaveContextProvider value={saveContextValue}>
-                    <FormContextProvider value={formContextValue}>
-                        <SaveButton submitOnEnter={false} />
-                    </FormContextProvider>
+                    <SaveButton submitOnEnter={false} />
                 </SaveContextProvider>
             </TestContext>
         );
@@ -144,12 +136,7 @@ describe('<SaveButton />', () => {
         const { getByLabelText } = render(
             <TestContext>
                 <SaveContextProvider value={saveContextValue}>
-                    <FormContextProvider value={formContextValue}>
-                        <SaveButton
-                            handleSubmitWithRedirect={onSubmit}
-                            saving
-                        />
-                    </FormContextProvider>
+                    <SaveButton handleSubmitWithRedirect={onSubmit} saving />
                 </SaveContextProvider>
             </TestContext>
         );
@@ -168,12 +155,10 @@ describe('<SaveButton />', () => {
                     dispatchSpy = jest.spyOn(store, 'dispatch');
                     return (
                         <SaveContextProvider value={saveContextValue}>
-                            <FormContextProvider value={formContextValue}>
-                                <SaveButton
-                                    handleSubmitWithRedirect={onSubmit}
-                                    invalid
-                                />
-                            </FormContextProvider>
+                            <SaveButton
+                                handleSubmitWithRedirect={onSubmit}
+                                invalid
+                            />
                         </SaveContextProvider>
                     );
                 }}

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.tsx b/packages/ra-ui-materialui/src/button/SaveButton.tsx
@@ -81,21 +81,37 @@ const SaveButton: FC<SaveButtonProps> = props => {
     const classes = useStyles(props);
     const notify = useNotify();
     const translate = useTranslate();
-    const { setOnSave } = useFormContext();
+    const saveContext = useFormContext();
     const { setOnSuccess, setOnFailure, setTransform } = useSaveContext(props);
 
     const handleClick = event => {
         // deprecated: use onSuccess and transform instead of onSave
         if (typeof onSave === 'function') {
             if (process.env.NODE_ENV !== 'production') {
-                console.log(
+                console.warn(
                     '<SaveButton onSave> prop is deprecated, use the onSuccess prop instead.'
                 );
+                if (!saveContext || !saveContext.setOnSave) {
+                    console.warn(
+                        'Using <SaveButton> outside a FormContext is deprecated.'
+                    );
+                }
+            }
+            if (saveContext && saveContext.setOnSave) {
+                saveContext.setOnSave(onSave);
             }
-            setOnSave(onSave);
         } else {
-            // we reset to the Form default save function
-            setOnSave();
+            if (
+                (process.env.NODE_ENV !== 'production' && !saveContext) ||
+                !saveContext.setOnSave
+            ) {
+                console.warn(
+                    'Using <SaveButton> outside a FormContext is deprecated.'
+                );
+            } else {
+                // we reset to the Form default save function
+                saveContext.setOnSave();
+            }
         }
         if (onSuccess) {
             setOnSuccess(onSuccess);