Forms Refactoring 4 — Migrate entity forms to FormikForm (#24462)

frontend/src/metabase/account/profile/components/UserProfileForm/UserProfileForm.jsx

@@ -2,22 +2,28 @@ import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 
 import User from "metabase/entities/users";
-import { usePrevious } from "metabase/hooks/use-previous";
 
 const propTypes = {
   user: PropTypes.object,
 };
 
 const UserProfileForm = ({ user }) => {
-  const previousUser = usePrevious(user);
-  const handleSaved = useCallback(() => {
-    if (previousUser.locale !== user.locale) {
-      window.location.reload();
-    }
-  }, [previousUser?.locale, user?.locale]);
+  const handleSaved = useCallback(
+    values => {
+      if (user.locale !== values.locale) {
+        window.location.reload();
+      }
+    },
+    [user?.locale],
+  );
 
   return (
-    <User.Form user={user} form={User.forms.user(user)} onSaved={handleSaved} />
+    <User.Form
+      user={user}
+      form={User.forms.user(user)}
+      onSaved={handleSaved}
+      overwriteOnInitialValuesChange
+    />
   );
 };
 

frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx

@@ -142,6 +142,7 @@ class DatabaseEditApp extends Component {
                     onSubmit={handleSubmit}
                     submitTitle={addingNewDatabase ? t`Save` : t`Save changes`}
                     submitButtonComponent={Button}
+                    useLegacyForm
                   >
                     {({
                       Form,

frontend/src/metabase/components/CreateDashboardModal.unit.spec.js

 import React from "react";
-import { fireEvent, renderWithProviders, screen } from "__support__/ui";
+import {
+  fireEvent,
+  renderWithProviders,
+  screen,
+  waitFor,
+} from "__support__/ui";
 import userEvent from "@testing-library/user-event";
 import xhrMock from "xhr-mock";
 import { setupEnterpriseTest } from "__support__/enterprise";
@@ -113,9 +118,12 @@ describe("CreateDashboardModal", () => {
     ).toBeInTheDocument();
   });
 
-  it("can't submit if name is empty", () => {
+  it("can't submit if name is empty", async () => {
     setup();
-    expect(screen.queryByRole("button", { name: "Create" })).toBeDisabled();
+    const submitButton = await waitFor(() =>
+      screen.queryByRole("button", { name: "Create" }),
+    );
+    expect(submitButton).toBeDisabled();
   });
 
   it("calls onClose when Cancel button is clicked", () => {

frontend/src/metabase/entities/containers/EntityForm.jsx

@@ -2,7 +2,8 @@
 import React from "react";
 import { t } from "ttag";
 
-import Form from "metabase/containers/Form";
+import LegacyForm from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import ModalContent from "metabase/components/ModalContent";
 
 import entityType from "./EntityType";
@@ -21,16 +22,34 @@ const EForm = ({
   create,
   onSubmit = object => (object.id ? update(object) : create(object)),
   onSaved,
+  useLegacyForm,
   ...props
-}) => (
-  <Form
-    {...props}
-    form={form}
-    initialValues={entityObject}
-    onSubmit={onSubmit}
-    onSubmitSuccess={action => onSaved && onSaved(action.payload.object)}
-  />
-);
+}) => {
+  if (useLegacyForm) {
+    return (
+      <LegacyForm
+        {...props}
+        form={form}
+        initialValues={entityObject}
+        onSubmit={onSubmit}
+        onSubmitSuccess={action => onSaved && onSaved(action.payload.object)}
+      />
+    );
+  }
+  return (
+    <Form
+      {...props}
+      form={form}
+      initialValues={
+        typeof entityObject?.getPlainObject === "function"
+          ? entityObject.getPlainObject()
+          : entityObject
+      }
+      onSubmit={onSubmit}
+      onSubmitSuccess={action => onSaved && onSaved(action.payload.object)}
+    />
+  );
+};
 
 const Modal = ({
   children,
@@ -57,12 +76,14 @@ class EntityForm extends React.Component {
   render() {
     const { modal, ...props } = this.props;
 
-    const eForm = <EForm {...props} />;
-
     if (modal) {
-      return <Modal {...this.props}>{eForm}</Modal>;
+      return (
+        <Modal {...this.props}>
+          <EForm {...props} isModal />
+        </Modal>
+      );
     } else {
-      return eForm;
+      return <EForm {...props} />;
     }
   }
 }

frontend/src/metabase/setup/components/DatabaseStep/DatabaseStep.tsx

@@ -128,6 +128,7 @@ const DatabaseForm = ({
       database={database}
       onSubmit={handleSubmit}
       submitTitle={t`Connect database`}
+      useLegacyForm
     >
       {({
         Form,