FinalForm: remove default onAfterSubmit implementation (#1446)

(2 breaking changes I wanted to do for a long time) The default implementation of onAfterSubmit did two things: - stackApi?.goBack(); - editDialog?.closeDialog({ delay: true }); Those where removed because there are now better ways to do this, and in many (most) cases the default implementation was disabled. - Stack go back: - The SaveSplitButton does go back conditionally, so it has to do it on it's own - we don't want a split button in future anyway - EditDialog close: - currently not solved, a future PR will fix this. Could also be fixed using #1441 once that is merged It is generally a bad idea to - have dependencies from one component (FinalForm) to random other ones (Stack, EditDialog) - instead this communication should be done using well thought apis ---- Additionally I also remove the Loading animation shown while submitting. Nowadays we have the SaveButton that has it's own animation during submitting --------- Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
vivid-planet · Dec 19, 2023 · 298b63b · 298b63b
1 parent d20f59c
commit 298b63b
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 184 deletions.
diff --git a/.changeset/odd-paws-speak.md b/.changeset/odd-paws-speak.md
@@ -0,0 +1,22 @@
+---
+"@comet/admin": major
+---
+
+FinalForm: remove default `onAfterSubmit` implementation
+
+In most cases the default implementation is not needed anymore. When upgrading, an empty
+function override of `onAfterSubmit` can be removed as it is not necessary any longer.
+
+To get back the old behavior use the following in application code:
+
+```
+const stackApi = React.useContext(StackApiContext);
+const editDialog = React.useContext(EditDialogApiContext);
+....
+    <FinalForm
+        onAfterSubmit={() => {
+            stackApi?.goBack();
+            editDialog?.closeDialog({ delay: true });
+        }}
+    >
+```
diff --git a/demo/admin/src/news/generated/NewsForm.tsx b/demo/admin/src/news/generated/NewsForm.tsx
@@ -141,15 +141,7 @@ export function NewsForm({ id }: FormProps): React.ReactElement {
     }
 
     return (
-        <FinalForm<FormValues>
-            apiRef={formApiRef}
-            onSubmit={handleSubmit}
-            mode={mode}
-            initialValues={initialValues}
-            onAfterSubmit={(values, form) => {
-                //don't go back automatically
-            }}
-        >
+        <FinalForm<FormValues> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}>
             {({ values }) => (
                 <EditPageLayout>
                     {saveConflict.dialogs}

diff --git a/demo/admin/src/products/ProductForm.tsx b/demo/admin/src/products/ProductForm.tsx
@@ -163,9 +163,6 @@ function ProductForm({ id }: FormProps): React.ReactElement {
             mode={mode}
             initialValues={initialValues}
             initialValuesEqual={isEqual} //required to compare block data correctly
-            onAfterSubmit={(values, form) => {
-                //don't go back automatically TODO remove this automatismn
-            }}
             subscription={{}}
         >
             {() => (

diff --git a/demo/admin/src/products/categories/ProductCategoryForm.tsx b/demo/admin/src/products/categories/ProductCategoryForm.tsx
@@ -125,16 +125,7 @@ function ProductCategoryForm({ id }: FormProps): React.ReactElement {
     }
 
     return (
-        <FinalForm<FormState>
-            apiRef={formApiRef}
-            onSubmit={handleSubmit}
-            mode={mode}
-            initialValues={initialValues}
-            onAfterSubmit={(values, form) => {
-                //don't go back automatically TODO remove this automatismn
-            }}
-            subscription={{}}
-        >
+        <FinalForm<FormState> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues} subscription={{}}>
             {() => (
                 <EditPageLayout>
                     {saveConflict.dialogs}

diff --git a/demo/admin/src/products/generated/ProductForm.tsx b/demo/admin/src/products/generated/ProductForm.tsx
@@ -135,15 +135,7 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
     }
 
     return (
-        <FinalForm<FormValues>
-            apiRef={formApiRef}
-            onSubmit={handleSubmit}
-            mode={mode}
-            initialValues={initialValues}
-            onAfterSubmit={(values, form) => {
-                //don't go back automatically
-            }}
-        >
+        <FinalForm<FormValues> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}>
             {({ values }) => (
                 <EditPageLayout>
                     {saveConflict.dialogs}

diff --git a/demo/admin/src/products/tags/ProductTagForm.tsx b/demo/admin/src/products/tags/ProductTagForm.tsx
@@ -122,16 +122,7 @@ function ProductTagForm({ id }: FormProps): React.ReactElement {
     }
 
     return (
-        <FinalForm<FormState>
-            apiRef={formApiRef}
-            onSubmit={handleSubmit}
-            mode={mode}
-            initialValues={initialValues}
-            onAfterSubmit={(values, form) => {
-                //don't go back automatically TODO remove this automatismn
-            }}
-            subscription={{}}
-        >
+        <FinalForm<FormState> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues} subscription={{}}>
             {() => (
                 <EditPageLayout>
                     {saveConflict.dialogs}

diff --git a/packages/admin/admin-stories/src/docs/form/components/FinalForm.stories.mdx b/packages/admin/admin-stories/src/docs/form/components/FinalForm.stories.mdx
@@ -80,40 +80,10 @@ This allows us to access the Final-Form FormApi outside the form.
     <Story id="stories-form-finalform--finalform-apiref" />
 </Canvas>
 
-## Context-based Features
-
-Comet Admin `FinalForm` uses React Contexts to interact with other Comet Admin components.
-
-### FinalForm in a Table
+## FinalForm in a Table
 
 If your `FinalForm` is located inside a [TableQuery](/story/docs-components-table-tablequery--page) component, the tableQuery is refetched automatically after submission.
 
-### FinalForm in a Stack
-
-If a `FinalForm` is used inside a [Stack](/story/docs-components-stack--page), it automatically navigates back to the previous `StackPage`.
-
-<Canvas>
-    <Story id="stories-form-context-based-features--finalform-in-stack" />
-</Canvas>
-
-This is not always desired.
-For example, if the FinalForm isn't located on an own StackPage.
-In this case you have to override the `onAfterSubmit()` function of `FinalForm`.
-
-<Source
-    language="tsx"
-    code={dedent`
-    <FinalForm
-        // ...
-        onAfterSubmit={() => {
-            // noop
-        }}
-    >
-        {/* ... */}
-    </FinalForm>
-`}
-/>
-
 ## Submit Mutation Best Practices
 
 We recommend abiding by the following best practices considering form submission mutations:

diff --git a/packages/admin/admin-stories/src/docs/form/stories/ContextBasedFeatures.stories.tsx b/packages/admin/admin-stories/src/docs/form/stories/ContextBasedFeatures.stories.tsx
diff --git a/packages/admin/admin/src/FinalForm.tsx b/packages/admin/admin/src/FinalForm.tsx
@@ -5,15 +5,12 @@ import * as React from "react";
 import { AnyObject, Form, FormRenderProps, RenderableProps } from "react-final-form";
 import { useIntl } from "react-intl";
 
-import { Loading } from "./common/Loading";
-import { EditDialogApiContext } from "./EditDialogApiContext";
 import { useEditDialogFormApi } from "./EditDialogFormApiContext";
 import { renderComponent } from "./finalFormRenderComponent";
 import { FinalFormContext, FinalFormContextProvider } from "./form/FinalFormContextProvider";
 import { messages } from "./messages";
 import { RouterPrompt } from "./router/Prompt";
 import { useSubRoutePrefix } from "./router/SubRoute";
-import { StackApiContext } from "./stack/Api";
 import { TableQueryContext } from "./table/TableQueryContext";
 
 export const useFormApiRef = <FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>() =>
@@ -39,9 +36,8 @@ interface IProps<FormValues = Record<string, any>, InitialFormValues = Partial<F
         event: FinalFormSubmitEvent,
     ) => SubmissionErrors | Promise<SubmissionErrors | undefined> | undefined | void;
 
-    /* override onAfterSubmit. This method will be called at the end of a submit process.
-     *
-     * default implementation : go back if a stackApi context exists
+    /**
+     * This method will be called at the end of a submit process.
      */
     onAfterSubmit?: (values: FormValues, form: FormApi<FormValues>) => void;
     validateWarning?: (values: FormValues) => ValidationErrors | Promise<ValidationErrors> | undefined;
@@ -70,18 +66,10 @@ export class FinalFormSubmitEvent extends Event {
 
 export function FinalForm<FormValues = AnyObject>(props: IProps<FormValues>) {
     const { client } = React.useContext(getApolloContext());
-    const stackApi = React.useContext(StackApiContext);
-    const editDialog = React.useContext(EditDialogApiContext);
     const tableQuery = React.useContext(TableQueryContext);
     const editDialogFormApi = useEditDialogFormApi();
 
-    const {
-        onAfterSubmit = () => {
-            stackApi?.goBack();
-            editDialog?.closeDialog({ delay: true });
-        },
-        validateWarning,
-    } = props;
+    const { onAfterSubmit, validateWarning } = props;
 
     return (
         <Form
@@ -204,7 +192,6 @@ export function FinalForm<FormValues = AnyObject>(props: IProps<FormValues>) {
                         {(formRenderProps.submitError || formRenderProps.error) && (
                             <div className="error">{formRenderProps.submitError || formRenderProps.error}</div>
                         )}
-                        {!editDialog && <>{formRenderProps.submitting && <Loading behavior="fillParent" />}</>}
                     </form>
                 </RouterPrompt>
             </FinalFormContextProvider>
@@ -232,7 +219,7 @@ export function FinalForm<FormValues = AnyObject>(props: IProps<FormValues>) {
                         }
                     }
 
-                    onAfterSubmit(values, form);
+                    onAfterSubmit?.(values, form);
                     editDialogFormApi?.onAfterSave?.();
                 });
                 return data;

diff --git a/packages/admin/cms-admin/src/dam/FileForm/EditFile.tsx b/packages/admin/cms-admin/src/dam/FileForm/EditFile.tsx
@@ -191,10 +191,6 @@ const EditFileInner = ({ file, id }: EditFileInnerProps) => {
                 },
             }}
             initialValuesEqual={(prevValues, newValues) => isEqual(prevValues, newValues)}
-            onAfterSubmit={() => {
-                // override default onAfterSubmit because default is stackApi.goBack()
-                // https://github.com/vivid-planet/comet/blob/master/packages/admin/src/FinalForm.tsx#L53
-            }}
             validateOnBlur
         >
             {({ pristine, hasValidationErrors, submitting, handleSubmit }) => (

diff --git a/packages/admin/cms-admin/src/generator/generateForm.ts b/packages/admin/cms-admin/src/generator/generateForm.ts
@@ -273,9 +273,6 @@ export async function writeCrudForm(generatorConfig: CrudGeneratorConfig, schema
                 onSubmit={handleSubmit}
                 mode={mode}
                 initialValues={initialValues}
-                onAfterSubmit={(values, form) => {
-                    //don't go back automatically
-                }}
             >
                 {({ values }) => (
                     <EditPageLayout>