rjsf-errors-on-array-template (#1683)

* display error messages on the ArrayFieldTemplate for item list errors

* do not change things that do not need it

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/rjsf/carbon_theme/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -8,6 +8,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import { getCommonAttributes } from '../../helpers';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -31,6 +32,7 @@ export default function ArrayFieldTemplate<
     required,
     schema,
     title,
+    rawErrors,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<
@@ -50,10 +52,14 @@ export default function ArrayFieldTemplate<
     S,
     F
   >('ArrayFieldTitleTemplate', registry, uiOptions);
+
+  const commonAttributes = getCommonAttributes('', schema, uiSchema, rawErrors);
+
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
+
   return (
     <fieldset className={className} id={idSchema.$id}>
       <ArrayFieldTitleTemplate
@@ -71,6 +77,14 @@ export default function ArrayFieldTemplate<
         uiSchema={uiSchema}
         registry={registry}
       />
+      {commonAttributes.errorMessageForField && (
+        <>
+          <div className="error-message">
+            {commonAttributes.errorMessageForField}
+          </div>
+          <br />
+        </>
+      )}
       <div className="row array-item-list">
         {items &&
           items.map(

spiffworkflow-frontend/src/rjsf/helpers.tsx

@@ -37,7 +37,7 @@ export const getCommonAttributes = (
       errorMessageForField = (schema as any).validationErrorMessage;
       errorMessageForFieldWithoutLabel = errorMessageForField;
     } else {
-      errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+      errorMessageForField = `"${labelToUse.replace(/\*$/, '')}" ${rawErrors[0]}`;
     }
   }