Forms Refactoring 7 — Migrate remaining forms to FormikForm (#24465)

enterprise/frontend/src/metabase-enterprise/auth/components/SettingsSAMLForm.jsx

@@ -12,7 +12,7 @@ import Form, {
   FormSubmit,
   FormMessage,
   FormSection,
-} from "metabase/containers/Form";
+} from "metabase/containers/FormikForm";
 
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import CopyWidget from "metabase/components/CopyWidget";

frontend/src/metabase/admin/settings/components/SettingsGoogleForm.jsx

@@ -8,7 +8,7 @@ import Form, {
   FormField,
   FormSubmit,
   FormMessage,
-} from "metabase/containers/Form";
+} from "metabase/containers/FormikForm";
 
 import { updateSettings } from "metabase/admin/settings/settings";
 import { settingToFormField } from "metabase/admin/settings/utils";
@@ -38,6 +38,7 @@ class SettingsGoogleForm extends Component {
         style={{ maxWidth: 520 }}
         initialValues={initialValues}
         onSubmit={updateSettings}
+        overwriteOnInitialValuesChange
       >
         <Breadcrumbs
           crumbs={[

frontend/src/metabase/admin/settings/slack/components/SlackSetupForm/SlackSetupForm.tsx

 import React, { useMemo } from "react";
 import { t } from "ttag";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import { SlackSettings } from "metabase-types/api";
 import { getSlackForm } from "../../forms";
 import { FormProps } from "./types";

frontend/src/metabase/admin/settings/slack/components/SlackStatusForm/SlackStatusForm.tsx

 import React, { useCallback, useMemo } from "react";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import { SlackSettings } from "metabase-types/api";
 import { getSlackForm } from "../../forms";
 import { FormProps } from "./types";
@@ -13,7 +13,11 @@ const SlackStatusForm = ({ settings }: SlackStatusFormProps): JSX.Element => {
   const onSubmit = useCallback(() => undefined, []);
 
   return (
-    <Form form={form} initialValues={settings} onSubmit={onSubmit}>
+    <Form<SlackSettings>
+      form={form}
+      initialValues={settings}
+      onSubmit={onSubmit}
+    >
       {({ Form, FormField }: FormProps) => (
         <Form>
           <FormField name="slack-app-token" />

frontend/src/metabase/admin/settings/slack/forms.ts

 import { t } from "ttag";
+import { SlackSettings } from "metabase-types/api";
+import { FormObject } from "metabase-types/forms";
 
-export const getSlackForm = (readOnly?: boolean) => ({
+export const getSlackForm = (
+  readOnly?: boolean,
+): FormObject<SlackSettings> => ({
   fields: [
     {
       name: "slack-app-token",

frontend/src/metabase/containers/SaveQuestionModal.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { CSSTransitionGroup } from "react-transition-group";
 import { t } from "ttag";
 
-import Form, { FormField, FormFooter } from "metabase/containers/Form";
+import Form, { FormField, FormFooter } from "metabase/containers/FormikForm";
 import ModalContent from "metabase/components/ModalContent";
 import Radio from "metabase/core/components/Radio";
 import * as Q_DEPRECATED from "metabase/lib/query";
@@ -25,8 +25,8 @@ export default class SaveQuestionModal extends Component {
     multiStep: PropTypes.bool,
   };
 
-  validateName = (name, context) => {
-    if (context.form.saveType.value !== "overwrite") {
+  validateName = (name, { values }) => {
+    if (values.saveType !== "overwrite") {
       // We don't care if the form is valid when overwrite mode is enabled,
       // as original question's data will be submitted instead of the form values
       return validate.required()(name);

frontend/src/metabase/entities/questions/forms.js

 import { t } from "ttag";
+
 import MetabaseSettings from "metabase/lib/settings";
+import validate from "metabase/lib/validate";
+
 import { PLUGIN_CACHING } from "metabase/plugins";
 
 const FORM_FIELDS = [
-  { name: "name", title: t`Name` },
+  { name: "name", title: t`Name`, validate: validate.required() },
   {
     name: "description",
     title: t`Description`,

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx

@@ -18,7 +18,7 @@ import {
 import { isLocalField, isSameField } from "metabase/lib/query/field_ref";
 import { isFK, getSemanticTypeIcon } from "metabase/lib/schema_metadata";
 
-import RootForm from "metabase/containers/Form";
+import RootForm from "metabase/containers/FormikForm";
 import { usePrevious } from "metabase/hooks/use-previous";
 
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
@@ -76,7 +76,7 @@ function getFormFields({ dataset }) {
       value: type.id,
     }));
 
-  return fieldFormValues =>
+  return formFieldValues =>
     [
       { name: "display_name", title: t`Display name` },
       {
@@ -96,11 +96,11 @@ function getFormFields({ dataset }) {
         title: t`Column type`,
         widget: SemanticTypePicker,
         options: getSemanticTypeOptions(),
-        icon: getSemanticTypeIcon(fieldFormValues.semantic_type, "ellipsis"),
+        icon: getSemanticTypeIcon(formFieldValues?.semantic_type, "ellipsis"),
       },
       {
         name: "fk_target_field_id",
-        hidden: !isFK(fieldFormValues),
+        hidden: !isFK(formFieldValues),
         widget: FKTargetPicker,
         databaseId: dataset.databaseId(),
       },

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

 import React, { useState } from "react";
 import { t } from "ttag";
 import Users from "metabase/entities/users";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import { SubscribeInfo } from "metabase-types/store";
 import {
   FormContainer,
@@ -47,7 +47,7 @@ const NewsletterForm = ({
         {t`Get infrequent emails about new releases and feature updates.`}
       </FormHeader>
       {!isSubscribed && (
-        <Form
+        <Form<{ email: string }>
           form={Users.forms.newsletter}
           initialValues={initialValues}
           submitTitle={t`Subscribe`}

frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.unit.spec.tsx

@@ -9,7 +9,7 @@ const FormMock = (props: FormHTMLAttributes<HTMLFormElement>) => (
   </form>
 );
 
-jest.mock("metabase/containers/Form", () => FormMock);
+jest.mock("metabase/containers/FormikForm", () => FormMock);
 
 jest.mock("metabase/entities/users", () => ({
   forms: { newsletter: jest.fn() },

frontend/src/metabase/timelines/common/components/EditEventModal/EditEventModal.tsx

 import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import forms from "metabase/entities/timeline-events/forms";
 import { Timeline, TimelineEvent } from "metabase-types/api";
 import ModalBody from "../ModalBody";
@@ -47,7 +47,7 @@ const EditEventModal = ({
     <div>
       <ModalHeader title={t`Edit event`} onClose={onClose} />
       <ModalBody>
-        <Form
+        <Form<TimelineEvent>
           form={form}
           initialValues={event}
           isModal={true}

frontend/src/metabase/timelines/common/components/EditEventModal/EditEventModal.unit.spec.tsx

@@ -13,7 +13,7 @@ const FormMock = (props: FormHTMLAttributes<HTMLFormElement>) => (
   </form>
 );
 
-jest.mock("metabase/containers/Form", () => FormMock);
+jest.mock("metabase/containers/FormikForm", () => FormMock);
 
 describe("EditEventModal", () => {
   it("should submit modal", () => {

frontend/src/metabase/timelines/common/components/EditTimelineModal/EditTimelineModal.tsx

 import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import forms from "metabase/entities/timelines/forms";
 import { Timeline } from "metabase-types/api";
 import ModalBody from "../ModalBody";

frontend/src/metabase/timelines/common/components/EditTimelineModal/EditTimelineModal.unit.spec.tsx

@@ -10,7 +10,7 @@ const FormMock = (props: FormHTMLAttributes<HTMLFormElement>) => (
   </form>
 );
 
-jest.mock("metabase/containers/Form", () => FormMock);
+jest.mock("metabase/containers/FormikForm", () => FormMock);
 
 describe("EditTimelineModal", () => {
   it("should submit modal", () => {

frontend/src/metabase/timelines/common/components/NewEventModal/NewEventModal.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
 import { getDefaultTimezone } from "metabase/lib/time";
 import { getDefaultTimelineIcon } from "metabase/lib/timelines";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import forms from "metabase/entities/timeline-events/forms";
 import {
   Collection,
@@ -51,7 +51,7 @@ const NewEventModal = ({
     const hasOneTimeline = availableTimelines.length === 1;
 
     return {
-      timeline_id: defaultTimeline ? defaultTimeline.id : null,
+      timeline_id: defaultTimeline ? defaultTimeline.id : undefined,
       icon: hasOneTimeline ? defaultTimeline.icon : getDefaultTimelineIcon(),
       timezone: getDefaultTimezone(),
       source,
@@ -73,7 +73,7 @@ const NewEventModal = ({
     <div>
       <ModalHeader title={t`New event`} onClose={onClose} />
       <ModalBody>
-        <Form
+        <Form<Partial<TimelineEvent>>
           form={form}
           initialValues={initialValues}
           isModal={true}

frontend/src/metabase/timelines/common/components/NewTimelineModal/NewTimelineModal.tsx

 import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
-import Form from "metabase/containers/Form";
+import Form from "metabase/containers/FormikForm";
 import forms from "metabase/entities/timelines/forms";
 import { getDefaultTimelineIcon } from "metabase/lib/timelines";
 import { canonicalCollectionId } from "metabase/collections/utils";

frontend/src/metabase/timelines/common/components/NewTimelineModal/NewTimelineModal.unit.spec.tsx

@@ -10,7 +10,7 @@ const FormMock = (props: FormHTMLAttributes<HTMLFormElement>) => (
   </form>
 );
 
-jest.mock("metabase/containers/Form", () => FormMock);
+jest.mock("metabase/containers/FormikForm", () => FormMock);
 
 describe("NewTimelineModal", () => {
   it("should submit modal", () => {

frontend/test/metabase/scenarios/models/helpers/e2e-models-metadata-helpers.js

@@ -19,7 +19,7 @@ export function mapColumnTo({ table, column } = {}) {
   cy.findByText("Database column this maps to")
     .closest(".Form-field")
     .findByTestId("select-button")
-    .click();
+    .click({ force: true });
 
   popover().contains(table).click();