Forms Refactoring 5 — Isolate legacy form types (#24463)

frontend/src/metabase-types/forms/index.ts

@@ -6,7 +6,10 @@ export type FieldValues = Record<FieldName, DefaultFieldValue>;
 type FieldValidateResultOK = undefined;
 type FieldValidateResultError = string;
 
-export type BaseFieldDefinition = {
+// Extending Record type here as field definition's props
+// will be just spread to the final field widget
+// (e.g. autoFocus, placeholder)
+export type BaseFieldDefinition = Record<string, unknown> & {
   name: string;
   type?: string;
   title?: string;
@@ -31,7 +34,8 @@ export type BaseFieldDefinition = {
 };
 
 export type StandardFormFieldDefinition = BaseFieldDefinition & {
-  type: string | (() => JSX.Element);
+  // If not is not provided, we're going to use default text input
+  type?: string | (() => JSX.Element);
 };
 
 export type CustomFormFieldDefinition = BaseFieldDefinition & {
@@ -62,7 +66,13 @@ export type FormField<Value = DefaultFieldValue> = {
 };
 
 export type FormObject = {
-  fields: (values: FieldValues) => FormFieldDefinition[];
+  fields:
+    | FormFieldDefinition[]
+    | ((values?: FieldValues) => FormFieldDefinition[]);
+};
+
+export type PopulatedFormObject = {
+  fields: (values?: FieldValues) => FormFieldDefinition[];
   fieldNames: (values: FieldValues) => FieldName[];
   hidden: (obj: unknown) => void;
   initial: (obj: unknown) => void;

frontend/src/metabase-types/forms/legacy.ts

+export type FieldName = string;
+export type DefaultFieldValue = unknown;
+
+export type FieldValues = Record<FieldName, DefaultFieldValue>;
+
+type FieldValidateResultOK = undefined;
+type FieldValidateResultError = string;
+
+// Extending Record type here as field definition's props
+// will be just spread to the final field widget
+// (e.g. autoFocus, placeholder)
+export type BaseFieldDefinition = Record<string, unknown> & {
+  name: string;
+  type?: string;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  hidden?: boolean;
+
+  info?: string;
+  infoLabel?: string;
+  infoLabelTooltip?: string;
+
+  align?: "left" | "right";
+  horizontal?: boolean;
+  descriptionPosition?: "top" | "bottom";
+  visibleIf?: Record<FieldName, unknown>;
+
+  initial?: (value: unknown) => DefaultFieldValue;
+  validate?: (
+    value: DefaultFieldValue,
+  ) => FieldValidateResultOK | FieldValidateResultError;
+  normalize?: (value: unknown) => DefaultFieldValue;
+};
+
+export type StandardFormFieldDefinition = BaseFieldDefinition & {
+  // If not is not provided, we're going to use default text input
+  type?: string | (() => JSX.Element);
+};
+
+export type CustomFormFieldDefinition = BaseFieldDefinition & {
+  widget: () => JSX.Element;
+};
+
+export type FormFieldDefinition =
+  | StandardFormFieldDefinition
+  | CustomFormFieldDefinition;
+
+export type FormField<Value = DefaultFieldValue> = {
+  name: FieldName;
+  value: Value;
+  error?: string;
+  initialValue: Value;
+
+  active: boolean;
+  dirty: boolean;
+  invalid: boolean;
+  pristine: boolean;
+  touched: boolean;
+  valid: boolean;
+  visited: boolean;
+
+  onBlur: () => void;
+  onFocus: () => void;
+};
+
+export type FormObject = {
+  fields:
+    | FormFieldDefinition[]
+    | ((values?: FieldValues) => FormFieldDefinition[]);
+};
+
+export type PopulatedFormObject = {
+  fields: (values?: FieldValues) => FormFieldDefinition[];
+  fieldNames: (values: FieldValues) => FieldName[];
+  hidden: (obj: unknown) => void;
+  initial: (obj: unknown) => void;
+  normalize: (obj: unknown) => void;
+  validate: (obj: unknown) => void;
+  disablePristineSubmit?: boolean;
+};

frontend/src/metabase/components/form/CustomForm/CustomForm.tsx

 import React from "react";
 import _ from "underscore";
 
-import { FormFieldDefinition, FormObject } from "metabase-types/forms";
+import {
+  FormFieldDefinition,
+  PopulatedFormObject,
+} from "metabase-types/forms/legacy";
 
 import {
   BaseFormProps,
@@ -17,7 +20,7 @@ import CustomFormSubmit from "./CustomFormSubmit";
 import Form from "./Form";
 
 interface FormRenderProps extends BaseFormProps {
-  form: FormObject;
+  form: PopulatedFormObject;
   formFields: FormFieldDefinition[];
   Form: React.ComponentType<{ children: React.ReactNode }>;
   FormField: React.ComponentType<CustomFormFieldProps>;

frontend/src/metabase/components/form/CustomForm/CustomFormField.tsx

@@ -14,7 +14,7 @@ import {
   StandardFormFieldDefinition,
   CustomFormFieldDefinition,
   FormFieldDefinition,
-} from "metabase-types/forms";
+} from "metabase-types/forms/legacy";
 
 import {
   CustomFormLegacyContext,

frontend/src/metabase/components/form/CustomForm/CustomFormFooter/CustomFormFooter.tsx

 import React from "react";
 import PropTypes from "prop-types";
-import cx from "classnames";
 import { t } from "ttag";
 
 import Button from "metabase/core/components/Button";

frontend/src/metabase/components/form/CustomForm/types.ts

@@ -6,13 +6,12 @@ import {
   FieldValues,
   FormFieldDefinition,
   FormField,
-  FormObject,
-} from "metabase-types/forms";
+  PopulatedFormObject,
+} from "metabase-types/forms/legacy";
 
 export interface BaseFormProps {
   formKey?: string;
-  formName?: string;
-  formObject: FormObject;
+  formObject: PopulatedFormObject;
 
   formFields: FormFieldDefinition[];
   formFieldsByName: Record<FieldName, FormFieldDefinition>;

frontend/src/metabase/components/form/FormField/FormField.tsx

@@ -6,7 +6,7 @@ import {
   FormField as FormFieldType,
   BaseFieldDefinition,
   FormFieldDefinition,
-} from "metabase-types/forms";
+} from "metabase-types/forms/legacy";
 
 import FormFieldView from "./FormFieldView";
 

frontend/src/metabase/components/form/FormField/FormFieldView.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 
 import Tooltip from "metabase/components/Tooltip";
 
-import { BaseFieldDefinition } from "metabase-types/forms";
+import { BaseFieldDefinition } from "metabase-types/forms/legacy";
 
 import { FormFieldDescription } from "./FormFieldDescription";
 import {

frontend/src/metabase/components/form/FormikCustomForm/CustomForm.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import _ from "underscore";
 import { Form } from "formik";
 
-import { FormFieldDefinition, FormObject } from "metabase-types/forms";
+import { FormFieldDefinition, PopulatedFormObject } from "metabase-types/forms";
 
 import { BaseFormProps, OptionalFormViewProps } from "./types";
 
@@ -14,7 +14,7 @@ import CustomFormSubmit from "./CustomFormSubmit";
 import { FormContext } from "./context";
 
 interface FormRenderProps extends BaseFormProps {
-  form: FormObject;
+  form: PopulatedFormObject;
   formFields: FormFieldDefinition[];
   Form: React.ComponentType<{ children: React.ReactNode }>;
   FormField: React.ComponentType<CustomFormFieldProps>;

frontend/src/metabase/components/form/FormikCustomForm/types.ts

@@ -5,12 +5,13 @@ import {
   FieldValues,
   FormFieldDefinition,
   FormField,
-  FormObject,
+  PopulatedFormObject,
 } from "metabase-types/forms";
 
 export interface BaseFormProps {
   formKey?: string;
-  formObject: FormObject;
+  formName?: string;
+  formObject: PopulatedFormObject;
 
   formFields: FormFieldDefinition[];
   formFieldsByName: Record<FieldName, FormFieldDefinition>;

frontend/src/metabase/containers/FormikForm/FormikForm.tsx

@@ -31,7 +31,7 @@ interface FormContainerProps {
   normalize?: () => void;
 
   onSubmit: (values: FieldValues) => Promise<void>;
-  onSubmitSuccess: (action: unknown) => void;
+  onSubmitSuccess?: (action: unknown) => void;
 }
 
 type ServerErrorResponse = {