From 9150bb74b0889c382462e1f046d940a6d090a4e1 Mon Sep 17 00:00:00 2001
From: jasquat <2487833+jasquat@users.noreply.github.com>
Date: Wed, 5 Jun 2024 14:31:59 -0400
Subject: [PATCH] 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>
---
 .../ArrayFieldTemplate/ArrayFieldTemplate.tsx      | 14 ++++++++++++++
 spiffworkflow-frontend/src/rjsf/helpers.tsx        |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/spiffworkflow-frontend/src/rjsf/carbon_theme/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/spiffworkflow-frontend/src/rjsf/carbon_theme/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index d5b1792da..2372233da 100644
--- a/spiffworkflow-frontend/src/rjsf/carbon_theme/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/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(
diff --git a/spiffworkflow-frontend/src/rjsf/helpers.tsx b/spiffworkflow-frontend/src/rjsf/helpers.tsx
index 673337a7c..e5694043a 100644
--- a/spiffworkflow-frontend/src/rjsf/helpers.tsx
+++ b/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]}`;
     }
   }