feat: create common function & show explicit error messages for forma…

…t errors

app/containers/Applications/ApplicationDetailsCardItem.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useMemo} from 'react';
 import {Button, Card, Collapse, Col, Row} from 'react-bootstrap';
 import {createFragmentContainer, graphql} from 'react-relay';
-import JsonSchemaForm, {FieldProps} from 'react-jsonschema-form';
+import JsonSchemaForm, {FieldProps, AjvError} from 'react-jsonschema-form';
 import {FormJson} from 'next-env';
 import {ApplicationDetailsCardItem_formResult} from '__generated__/ApplicationDetailsCardItem_formResult.graphql';
 import {ApplicationDetailsCardItem_query} from '__generated__/ApplicationDetailsCardItem_query.graphql';
@@ -11,6 +11,7 @@ import SummaryFormArrayFieldTemplate from 'containers/Forms/SummaryFormArrayFiel
 import SummaryFormFieldTemplate from 'containers/Forms/SummaryFormFieldTemplate';
 import FormObjectFieldTemplate from 'containers/Forms/FormObjectFieldTemplate';
 import ApplicationReviewContainer from './ApplicationReviewContainer';
+import {customTransformErrors} from 'functions/customTransformErrors';
 
 interface Props {
   // The form_result used by the fragment
@@ -49,6 +50,10 @@ export const ApplicationDetailsCardItemComponent: React.FunctionComponent<Props>
   const {formJson} = formJsonByFormId;
   const {schema, uiSchema, customFormats} = formJson as FormJson;
 
+  const transformErrors = (errors: AjvError[]) => {
+    return customTransformErrors(errors, formJson);
+  };
+
   // Expands or collapses the form_result card
   const [isOpen, setIsOpen] = useState(false);
 
@@ -184,6 +189,7 @@ export const ApplicationDetailsCardItemComponent: React.FunctionComponent<Props>
             showErrorList={false}
             fields={CUSTOM_FIELDS}
             customFormats={customFormats}
+            transformErrors={transformErrors}
             schema={schema}
             uiSchema={uiSchema}
             ObjectFieldTemplate={FormObjectFieldTemplate}

app/containers/Forms/Form.tsx

@@ -21,6 +21,7 @@ import FuelRowIdField from './FuelRowIdField';
 import NumberField from './NumberField';
 import EmissionCategoryRowIdField from './EmissionCategoryRowIdField';
 import ProblemReportField from 'components/Forms/ProblemReportField';
+import {customTransformErrors} from 'functions/customTransformErrors';
 
 interface Props {
   query: Form_query;
@@ -65,25 +66,10 @@ export const FormComponent: React.FunctionComponent<Props> = ({
     formResult
   } = result || {formJsonByFormId: {}};
   if (!result) return null;
-  const {
-    schema,
-    uiSchema,
-    customFormats,
-    customFormatsErrorMessages = {}
-  } = formJson as FormJson;
+  const {schema, uiSchema, customFormats} = formJson as FormJson;
 
   const transformErrors = (errors: AjvError[]) => {
-    // Ignore oneOf errors https://github.com/rjsf-team/react-jsonschema-form/issues/1263
-    return errors
-      .filter((error) => error.name !== 'oneOf')
-      .map((error) => {
-        if (error.name !== 'format') return error;
-        if (!customFormatsErrorMessages[error.params.format]) return error;
-        return {
-          ...error,
-          message: customFormatsErrorMessages[error.params.format]
-        };
-      });
+    return customTransformErrors(errors, formJson);
   };
 
   const onError = () => {

app/functions/customTransformErrors.ts

@@ -0,0 +1,20 @@
+import {AjvError} from 'react-jsonschema-form';
+import {FormJson} from 'next-env';
+
+export const customTransformErrors = (
+  errors: AjvError[],
+  formJson: FormJson
+) => {
+  const {customFormatsErrorMessages = {}} = formJson;
+  // Ignore oneOf errors https://github.com/rjsf-team/react-jsonschema-form/issues/1263
+  return errors
+    .filter((error) => error.name !== 'oneOf')
+    .map((error) => {
+      if (error.name !== 'format') return error;
+      if (!customFormatsErrorMessages[error.params.format]) return error;
+      return {
+        ...error,
+        message: customFormatsErrorMessages[error.params.format]
+      };
+    });
+};