diff --git a/.changeset/odd-paws-speak.md b/.changeset/odd-paws-speak.md new file mode 100644 index 0000000000..f91d138b22 --- /dev/null +++ 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); +.... + { + stackApi?.goBack(); + editDialog?.closeDialog({ delay: true }); + }} + > +``` \ No newline at end of file diff --git a/demo/admin/src/news/generated/NewsForm.tsx b/demo/admin/src/news/generated/NewsForm.tsx index 7139e4d4e5..6debd6a3d6 100644 --- 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 ( - - apiRef={formApiRef} - onSubmit={handleSubmit} - mode={mode} - initialValues={initialValues} - onAfterSubmit={(values, form) => { - //don't go back automatically - }} - > + apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}> {({ values }) => ( {saveConflict.dialogs} diff --git a/demo/admin/src/products/ProductForm.tsx b/demo/admin/src/products/ProductForm.tsx index b2db47e7a3..cc38b67ecb 100644 --- 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 index e93d9bf893..4705b5d3f7 100644 --- 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 ( - - apiRef={formApiRef} - onSubmit={handleSubmit} - mode={mode} - initialValues={initialValues} - onAfterSubmit={(values, form) => { - //don't go back automatically TODO remove this automatismn - }} - subscription={{}} - > + apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues} subscription={{}}> {() => ( {saveConflict.dialogs} diff --git a/demo/admin/src/products/generated/ProductForm.tsx b/demo/admin/src/products/generated/ProductForm.tsx index 7c4b9cd8f6..eedbf4c97f 100644 --- 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 ( - - apiRef={formApiRef} - onSubmit={handleSubmit} - mode={mode} - initialValues={initialValues} - onAfterSubmit={(values, form) => { - //don't go back automatically - }} - > + apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}> {({ values }) => ( {saveConflict.dialogs} diff --git a/demo/admin/src/products/tags/ProductTagForm.tsx b/demo/admin/src/products/tags/ProductTagForm.tsx index 42d4243c25..b79512620e 100644 --- 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 ( - - apiRef={formApiRef} - onSubmit={handleSubmit} - mode={mode} - initialValues={initialValues} - onAfterSubmit={(values, form) => { - //don't go back automatically TODO remove this automatismn - }} - subscription={{}} - > + apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues} subscription={{}}> {() => ( {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 index e8aa42cc83..e6f1f38245 100644 --- 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. -## 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`. - - - - - -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`. - - { - // noop - }} - > - {/* ... */} - -`} -/> - ## 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 deleted file mode 100644 index d815242149..0000000000 --- a/packages/admin/admin-stories/src/docs/form/stories/ContextBasedFeatures.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Field, FinalForm, FinalFormInput, FormSection, SaveButton, Stack, StackBreadcrumbs, StackPage, useStackSwitch } from "@comet/admin"; -import { List, ListItem, ListItemText } from "@mui/material"; -import { storiesOf } from "@storybook/react"; -import * as React from "react"; - -import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator"; -import { storyRouterDecorator } from "../../../story-router.decorator"; - -interface User { - id: number; - name: string; -} - -const usersData: User[] = [ - { - id: 1, - name: "John Doe", - }, - { - id: 2, - name: "Jane Gold", - }, - { - id: 3, - name: "Steve Goodman", - }, -]; - -storiesOf("stories/form/Context-based Features", module) - .addDecorator(apolloRestStoryDecorator()) - .addDecorator(storyRouterDecorator()) - .add("FinalForm in Stack", () => { - const [StackSwitch, switchApi] = useStackSwitch(); - const [users, setUsers] = React.useState(usersData); - - return ( - - - - - - {users.map((user) => { - return ( - switchApi.activatePage("form", String(user.id))} - > - - - ); - })} - - - - {(selectedUserId) => ( - { - return new Promise((resolve) => - setTimeout(() => { - setUsers((users) => { - return users.map((user) => { - if (user.id === Number(selectedUserId)) { - user.name = values.name; - } - return user; - }); - }); - - resolve(undefined); - }, 500), - ); - }} - initialValues={users.find((user) => user.id === Number(selectedUserId))} - > - - - - - - )} - - - - ); - }); diff --git a/packages/admin/admin/src/FinalForm.tsx b/packages/admin/admin/src/FinalForm.tsx index 69ca1775aa..a469c2f933 100644 --- 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 = , InitialFormValues = Partial>() => @@ -39,9 +36,8 @@ interface IProps, InitialFormValues = Partial SubmissionErrors | Promise | 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) => void; validateWarning?: (values: FormValues) => ValidationErrors | Promise | undefined; @@ -70,18 +66,10 @@ export class FinalFormSubmitEvent extends Event { export function FinalForm(props: IProps) { 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 (
(props: IProps) { {(formRenderProps.submitError || formRenderProps.error) && (
{formRenderProps.submitError || formRenderProps.error}
)} - {!editDialog && <>{formRenderProps.submitting && }} @@ -232,7 +219,7 @@ export function FinalForm(props: IProps) { } } - 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 index dfc9ed4b5a..e5826151ea 100644 --- 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 index 60e0ab2846..6b97384154 100644 --- 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 }) => (