refactor: separate errorAtPath into its own hook (#16393)

Author: lmossman

airbyte-webapp/src/components/forms/SchemaForm/Controls/AdditionalPropertiesControl.tsx

@@ -15,6 +15,7 @@ import { SchemaFormControl } from "./SchemaFormControl";
 import { BaseControlComponentProps } from "./types";
 import { useToggleConfig } from "./useToggleConfig";
 import { useSchemaForm } from "../SchemaForm";
+import { useErrorAtPath } from "../useErrorAtPath";
 
 // Pattern to detect internal keys
 const INTERNAL_KEY_PATTERN = /^_key\d+$/;
@@ -94,9 +95,10 @@ export const AdditionalPropertiesControl = ({
   hideBorder = false,
 }: BaseControlComponentProps) => {
   const { formatMessage } = useIntl();
-  const { errorAtPath, extractDefaultValuesFromSchema } = useSchemaForm();
+  const { extractDefaultValuesFromSchema } = useSchemaForm();
   const { setValue } = useFormContext();
   const toggleConfig = useToggleConfig(baseProps.name, additionalPropertiesSchema);
+  const error = useErrorAtPath(baseProps.name);
 
   // Get all current key-value pairs
   const rawFormValue = useWatch({ name: baseProps.name });
@@ -195,7 +197,7 @@ export const AdditionalPropertiesControl = ({
       title={baseProps.label}
       tooltip={baseProps.labelTooltip}
       path={baseProps.name}
-      error={errorAtPath(baseProps.name)}
+      error={error}
       toggleConfig={baseProps.optional ? toggleConfig : undefined}
       header={baseProps.header}
     >

airbyte-webapp/src/components/forms/SchemaForm/Controls/ArrayOfObjectsControl.tsx

@@ -13,6 +13,7 @@ import { ControlGroup } from "./ControlGroup";
 import { SchemaFormControl } from "./SchemaFormControl";
 import { BaseControlComponentProps } from "./types";
 import { useSchemaForm } from "../SchemaForm";
+import { useErrorAtPath } from "../useErrorAtPath";
 import { AirbyteJsonSchema } from "../utils";
 
 export const ArrayOfObjectsControl = ({
@@ -21,10 +22,10 @@ export const ArrayOfObjectsControl = ({
   skipRenderedPathRegistration = false,
   overrideByPath = {},
 }: BaseControlComponentProps) => {
-  const { errorAtPath, extractDefaultValuesFromSchema } = useSchemaForm();
+  const { extractDefaultValuesFromSchema } = useSchemaForm();
   const { fields: items, append, remove } = useFieldArray({ name: baseProps.name });
   // react-hook-form adds "root" to the path of errors on the array of objects field
-  const error = errorAtPath(`${baseProps.name}.root`);
+  const error = useErrorAtPath(`${baseProps.name}.root`);
 
   if (!fieldSchema.items) {
     throw new Error("items is required on array of object fields");

airbyte-webapp/src/components/forms/SchemaForm/Controls/MultiOptionControl.tsx

@@ -13,6 +13,7 @@ import { SchemaFormControl } from "./SchemaFormControl";
 import { BaseControlComponentProps, OverrideByPath, BaseControlProps } from "./types";
 import { useToggleConfig } from "./useToggleConfig";
 import { useSchemaForm } from "../SchemaForm";
+import { useErrorAtPath } from "../useErrorAtPath";
 import { AirbyteJsonSchema, resolveTopLevelRef } from "../utils";
 
 export const MultiOptionControl = ({
@@ -28,12 +29,11 @@ export const MultiOptionControl = ({
   const {
     schema: rootSchema,
     getSelectedOptionSchema,
-    errorAtPath,
     extractDefaultValuesFromSchema,
     verifyArrayItems,
   } = useSchemaForm();
   const toggleConfig = useToggleConfig(baseProps.name, fieldSchema);
-  const error = errorAtPath(baseProps.name);
+  const error = useErrorAtPath(baseProps.name);
   const optionSchemas = fieldSchema.oneOf ?? fieldSchema.anyOf;
   const options = useMemo(
     () =>

airbyte-webapp/src/components/forms/SchemaForm/Controls/ObjectControl.tsx

@@ -13,8 +13,9 @@ import styles from "./ObjectControl.module.scss";
 import { SchemaFormControl } from "./SchemaFormControl";
 import { BaseControlComponentProps, BaseControlProps } from "./types";
 import { useToggleConfig } from "./useToggleConfig";
-import { useSchemaForm } from "../SchemaForm";
+import { useErrorAtPath } from "../useErrorAtPath";
 import { AirbyteJsonSchema, getDeclarativeSchemaTypeValue, displayName } from "../utils";
+
 export const ObjectControl = ({
   fieldSchema,
   baseProps,
@@ -23,10 +24,10 @@ export const ObjectControl = ({
   hideBorder = false,
   nonAdvancedFields,
 }: BaseControlComponentProps) => {
-  const { errorAtPath } = useSchemaForm();
   const { errors } = useFormState();
   const value = useWatch({ name: baseProps.name });
   const toggleConfig = useToggleConfig(baseProps.name, fieldSchema);
+  const error = useErrorAtPath(baseProps.name);
 
   if (!fieldSchema.properties) {
     if (!fieldSchema.additionalProperties) {
@@ -135,7 +136,7 @@ export const ObjectControl = ({
       title={baseProps.label}
       tooltip={baseProps.labelTooltip}
       path={baseProps.name}
-      error={errorAtPath(baseProps.name)}
+      error={error}
       toggleConfig={baseProps.optional ? toggleConfig : undefined}
       header={baseProps.header}
     >
@@ -152,7 +153,7 @@ const JsonEditor = ({
   toggleConfig: ReturnType<typeof useToggleConfig>;
 }) => {
   const { formatMessage } = useIntl();
-  const { errorAtPath } = useSchemaForm();
+  const error = useErrorAtPath(baseProps.name);
   const value = useWatch({ name: baseProps.name });
   const { setValue } = useFormContext();
   const [textValue, setTextValue] = useState(JSON.stringify(value, null, 2));
@@ -169,7 +170,7 @@ const JsonEditor = ({
       title={displayName(baseProps.name, baseProps.label)}
       tooltip={baseProps.labelTooltip}
       optional={baseProps.optional}
-      error={errorAtPath(baseProps.name)}
+      error={error}
       toggleConfig={baseProps.optional ? toggleConfig : undefined}
       footer={!textValue ? formatMessage({ id: "form.enterValidJson" }) : undefined}
     >

airbyte-webapp/src/components/forms/SchemaForm/SchemaForm.tsx

@@ -1,16 +1,7 @@
 import { ExtendedJSONSchema } from "json-schema-to-ts";
 import isBoolean from "lodash/isBoolean";
 import { createContext, useCallback, useContext, useMemo, useRef } from "react";
-import {
-  DefaultValues,
-  FieldError,
-  FieldValues,
-  FormProvider,
-  get,
-  useForm,
-  useFormContext,
-  useFormState,
-} from "react-hook-form";
+import { DefaultValues, FieldValues, FormProvider, get, useForm, useFormContext } from "react-hook-form";
 
 import { DynamicValidator } from "./DynamicValidator";
 import { RefsHandlerProvider } from "./RefsHandler";
@@ -140,7 +131,6 @@ interface SchemaFormContextValue {
   schema: AirbyteJsonSchema;
   onlyShowErrorIfTouched?: boolean;
   nestedUnderPath?: string;
-  errorAtPath: (path: string) => FieldError | undefined;
   extractDefaultValuesFromSchema: <T extends FieldValues>(fieldSchema: AirbyteJsonSchema) => DefaultValues<T>;
   verifyArrayItems: (
     items:
@@ -178,27 +168,10 @@ const SchemaFormProvider: React.FC<React.PropsWithChildren<SchemaFormProviderPro
   onlyShowErrorIfTouched,
   nestedUnderPath,
 }) => {
-  const { errors, touchedFields } = useFormState();
   const { getValues } = useFormContext();
   // Use a ref instead of state for rendered paths to prevent temporarily rendering fields twice
   const renderedPathsRef = useRef<Set<string>>(new Set<string>());
 
-  // Setup validation functions
-  const errorAtPath = (path: string): FieldError | undefined => {
-    const error: FieldError | undefined = get(errors, path);
-    const touched = get(touchedFields, path);
-    if ((onlyShowErrorIfTouched && !touched) || !error?.message) {
-      return undefined;
-    }
-    return {
-      type: error.type,
-      message: error.message,
-      ref: error.ref,
-      types: error.types,
-      root: error.root,
-    };
-  };
-
   // Update rendered paths tracking functions to use ref
   const registerRenderedPath = useCallback((path: string) => {
     if (path) {
@@ -277,7 +250,6 @@ const SchemaFormProvider: React.FC<React.PropsWithChildren<SchemaFormProviderPro
         schema,
         onlyShowErrorIfTouched,
         nestedUnderPath,
-        errorAtPath,
         extractDefaultValuesFromSchema: extractDefaultValuesFromSchemaCallback,
         verifyArrayItems: verifyArrayItemsCallback,
         getSelectedOptionSchema: getSelectedOptionSchemaCallback,

airbyte-webapp/src/components/forms/SchemaForm/useErrorAtPath.ts

@@ -0,0 +1,21 @@
+import { FieldError, get, useFormState } from "react-hook-form";
+
+import { useSchemaForm } from "./SchemaForm";
+
+export const useErrorAtPath = (path: string): FieldError | undefined => {
+  const { errors, touchedFields } = useFormState();
+  const { onlyShowErrorIfTouched } = useSchemaForm();
+
+  const error: FieldError | undefined = get(errors, path);
+  const touched = get(touchedFields, path);
+  if ((onlyShowErrorIfTouched && !touched) || !error?.message) {
+    return undefined;
+  }
+  return {
+    type: error.type,
+    message: error.message,
+    ref: error.ref,
+    types: error.types,
+    root: error.root,
+  };
+};