fix: simplifies field error paths (#5504)

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -22,6 +22,7 @@ type ArrayRowProps = UseDraggableSortableReturn & {
   CustomRowLabel?: React.ReactNode
   addRow: (rowIndex: number) => void
   duplicateRow: (rowIndex: number) => void
+  errorCount: number
   fieldMap: FieldMap
   forceRender?: boolean
   hasMaxRows?: boolean
@@ -35,6 +36,7 @@ type ArrayRowProps = UseDraggableSortableReturn & {
   row: Row
   rowCount: number
   rowIndex: number
+  schemaPath: string
   setCollapse: (rowID: string, collapsed: boolean) => void
 }
 
@@ -43,6 +45,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
   addRow,
   attributes,
   duplicateRow,
+  errorCount,
   fieldMap,
   forceRender = false,
   hasMaxRows,
@@ -57,6 +60,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
   row,
   rowCount,
   rowIndex,
+  schemaPath,
   setCollapse,
   setNodeRef,
   transform,
@@ -70,7 +74,6 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
     '0',
   )}`
 
-  const errorCount = row.errorPaths?.length
   const fieldHasErrors = errorCount > 0 && hasSubmitted
 
   const classNames = [
@@ -134,7 +137,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
           path={path}
           permissions={permissions?.fields}
           readOnly={readOnly}
-          schemaPath={parentPath}
+          schemaPath={schemaPath}
         />
       </Collapsible>
     </div>

packages/ui/src/fields/Array/index.tsx

@@ -112,6 +112,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
   const { path: pathFromContext } = useFieldProps()
 
   const {
+    errorPaths,
     path,
     rows = [],
     schemaPath,
@@ -180,10 +181,8 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
 
   const hasMaxRows = maxRows && rows.length >= maxRows
 
-  const fieldErrorCount =
-    rows.reduce((total, row) => total + (row?.errorPaths?.length || 0), 0) + (valid ? 0 : 1)
-
-  const fieldHasErrors = submitted && fieldErrorCount > 0
+  const fieldErrorCount = errorPaths.length
+  const fieldHasErrors = submitted && errorPaths.length > 0
 
   const showRequired = readOnly && rows.length === 0
   const showMinRows = rows.length < minRows || (required && rows.length === 0)
@@ -209,7 +208,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__header-content`}>
             <h3 className={`${baseClass}__title`}>
-              <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
+              <FieldLabel CustomLabel={CustomLabel} as="span" unstyled {...(labelProps || {})} />
             </h3>
             {fieldHasErrors && fieldErrorCount > 0 && (
               <ErrorPill count={fieldErrorCount} i18n={i18n} withMessage />
@@ -247,32 +246,39 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
           ids={rows.map((row) => row.id)}
           onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
         >
-          {rows.map((row, i) => (
-            <DraggableSortableItem disabled={readOnly} id={row.id} key={row.id}>
-              {(draggableSortableItemProps) => (
-                <ArrayRow
-                  {...draggableSortableItemProps}
-                  CustomRowLabel={CustomRowLabel}
-                  addRow={addRow}
-                  duplicateRow={duplicateRow}
-                  fieldMap={fieldMap}
-                  forceRender={forceRender}
-                  hasMaxRows={hasMaxRows}
-                  indexPath={indexPath}
-                  labels={labels}
-                  moveRow={moveRow}
-                  path={path}
-                  permissions={permissions}
-                  readOnly={readOnly}
-                  removeRow={removeRow}
-                  row={row}
-                  rowCount={rows.length}
-                  rowIndex={i}
-                  setCollapse={setCollapse}
-                />
-              )}
-            </DraggableSortableItem>
-          ))}
+          {rows.map((row, i) => {
+            const rowErrorCount = errorPaths?.filter((errorPath) =>
+              errorPath.startsWith(`${path}.${i}.`),
+            ).length
+            return (
+              <DraggableSortableItem disabled={readOnly} id={row.id} key={row.id}>
+                {(draggableSortableItemProps) => (
+                  <ArrayRow
+                    {...draggableSortableItemProps}
+                    CustomRowLabel={CustomRowLabel}
+                    addRow={addRow}
+                    duplicateRow={duplicateRow}
+                    errorCount={rowErrorCount}
+                    fieldMap={fieldMap}
+                    forceRender={forceRender}
+                    hasMaxRows={hasMaxRows}
+                    indexPath={indexPath}
+                    labels={labels}
+                    moveRow={moveRow}
+                    path={path}
+                    permissions={permissions}
+                    readOnly={readOnly}
+                    removeRow={removeRow}
+                    row={row}
+                    rowCount={rows.length}
+                    rowIndex={i}
+                    schemaPath={schemaPath}
+                    setCollapse={setCollapse}
+                  />
+                )}
+              </DraggableSortableItem>
+            )
+          })}
           {!valid && (
             <React.Fragment>
               {showRequired && (