implement field template local error functionality, fix snapshots

src/components/form/ConnectedFieldTemplate.tsx

@@ -70,8 +70,6 @@ function FormikFieldTemplate<Values>({
     return annotations;
   }, [analysisAnnotations, error, formik, showUntouchedErrors, touched, value]);
 
-  console.log({ analysisAnnotations, fieldAnnotations });
-
   return (
     <FieldTemplate
       value={value}

src/components/form/FieldTemplate.tsx

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { type ReactNode } from "react";
+import React, { type ReactNode, useMemo } from "react";
 import {
   type FormControlProps,
   Collapse,
@@ -69,6 +69,7 @@ export type CustomFieldWidgetProps<
   disabled?: boolean;
   value: TValue;
   onChange: React.ChangeEventHandler<TInputElement>;
+  setLocalError: (error: string | null) => void;
 };
 export type CustomFieldWidget<
   TValue = string | string[] | number,
@@ -87,16 +88,36 @@ const FieldTemplate: <As extends React.ElementType, T = Element>(
   fitLabelWidth,
   widerLabel,
   description,
-  annotations,
+  annotations = [],
   value,
   children,
   blankValue = "",
   as: AsControl,
   className,
   ...restFieldProps
 }) => {
+  const [localError, setLocalError] = React.useState<string | null>(null);
+  const localErrorAnnotation = useMemo<FieldAnnotation | null>(() => {
+    if (localError == null) {
+      return null;
+    }
+
+    return {
+      message: localError,
+      type: AnnotationType.Error,
+    };
+  }, [localError]);
+
+  const fieldAnnotations = useMemo<FieldAnnotation[]>(
+    () => [
+      ...annotations,
+      ...(localErrorAnnotation ? [localErrorAnnotation] : []),
+    ],
+    [annotations, localErrorAnnotation],
+  );
+
   const isInvalid = !isEmpty(
-    annotations?.filter(
+    fieldAnnotations?.filter(
       (annotation) => annotation.type === AnnotationType.Error,
     ),
   );
@@ -145,6 +166,7 @@ const FieldTemplate: <As extends React.ElementType, T = Element>(
       name={name}
       isInvalid={isInvalid}
       value={nonUndefinedValue}
+      setLocalError={setLocalError}
       {...restFieldProps}
     >
       {children}
@@ -153,12 +175,12 @@ const FieldTemplate: <As extends React.ElementType, T = Element>(
 
   return (
     <FormGroup className={cx(styles.formGroup, className)}>
-      <Collapse in={!isEmpty(annotations)}>
+      <Collapse in={fieldAnnotations.length > 0}>
         <div className="mb-2 w-100">
-          {isEmpty(annotations) ? (
+          {isEmpty(fieldAnnotations) ? (
             <div className={styles.annotationPlaceholder} />
           ) : (
-            annotations?.map(({ message, type, actions }, index) => (
+            fieldAnnotations?.map(({ message, type, actions }, index) => (
               <FieldAnnotationAlert
                 // eslint-disable-next-line react/no-array-index-key -- Requires a refactor of the `FieldAnnotation` component to require specifying a key
                 key={index}