fix(ui): incorrect error states (#11574)

Fixes #11568

### What? Out of sync errors states
- Collaspibles & Tabs were not reporting accurate child error counts
- Arrays could get into a state where they would not update their error
states
- Slight issue with toasts 

### Tabs & Collapsibles
The logic for determining matching field paths was not functioning as
intended. Fields were attempting to match with paths such as `_index-0`
which will not work.

### Arrays
The form state was not updating when the server sent back errorPaths.
This PR adds `errorPaths` to `serverPropsToAccept`.

### Toasts
Some toasts could report errors in the form of `my > > error`. This
ensures they will be `my > error`

### Misc
Removes 2 files that were not in use:
- `getFieldStateFromPaths.ts`
- `getNestedFieldState.ts`

Author: JarrodMFlesch

packages/payload/src/fields/hooks/beforeChange/promise.ts

@@ -17,7 +17,9 @@ import { traverseFields } from './traverseFields.js'
 
 function buildFieldLabel(parentLabel: string, label: string): string {
   const capitalizedLabel = label.charAt(0).toUpperCase() + label.slice(1)
-  return parentLabel ? `${parentLabel} > ${capitalizedLabel}` : capitalizedLabel
+  return parentLabel && capitalizedLabel
+    ? `${parentLabel} > ${capitalizedLabel}`
+    : capitalizedLabel || parentLabel
 }
 
 type Args = {

packages/ui/src/elements/Toasts/fieldErrors.tsx

@@ -46,7 +46,8 @@ function createErrorsFromMessage(message: string): {
 
   if (errors.length === 1) {
     return {
-      message: `${intro}: ${errors[0]}`,
+      errors,
+      message: `${intro}:`,
     }
   }
 

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

@@ -107,7 +107,12 @@ const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {
 
   return (
     <Fragment>
-      <WatchChildErrors fields={fields} path={path.split('.')} setErrorCount={setErrorCount} />
+      <WatchChildErrors
+        fields={fields}
+        // removes the 'collapsible' path segment, i.e. `_index-0`
+        path={path.split('.').slice(0, -1)}
+        setErrorCount={setErrorCount}
+      />
       <div
         className={[
           fieldBaseClass,

packages/ui/src/fields/Tabs/Tab/index.tsx

@@ -25,15 +25,16 @@ export const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsAc
   const [errorCount, setErrorCount] = useState(undefined)
 
   const path = [
-    ...(parentPath ? parentPath.split('.') : []),
+    // removes parent 'tabs' path segment, i.e. `_index-0`
+    ...(parentPath ? parentPath.split('.').slice(0, -1) : []),
     ...(tabHasName(tab) ? [tab.name] : []),
-  ].join('.')
+  ]
 
   const fieldHasErrors = errorCount > 0
 
   return (
     <React.Fragment>
-      <WatchChildErrors fields={tab.fields} path={path.split('.')} setErrorCount={setErrorCount} />
+      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />
       <button
         className={[
           baseClass,

packages/ui/src/forms/Form/mergeServerFormState.ts

@@ -31,6 +31,7 @@ export const mergeServerFormState = ({
       'passesCondition',
       'valid',
       'errorMessage',
+      'errorPaths',
       'rows',
       'customComponents',
       'requiresRender',

packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts

@@ -3,41 +3,34 @@ import type { ClientField } from 'payload'
 
 import { fieldAffectsData } from 'payload/shared'
 
-export const buildPathSegments = (
-  parentPath: (number | string)[],
-  fields: ClientField[],
-): string[] => {
-  const pathNames = fields.reduce((acc, field) => {
+export const buildPathSegments = (fields: ClientField[]): (`${string}.` | string)[] => {
+  return fields.reduce((acc: (`${string}.` | string)[], field) => {
     const fields: ClientField[] = 'fields' in field ? field.fields : undefined
 
     if (fields) {
       if (fieldAffectsData(field)) {
         // group, block, array
-        const name = 'name' in field ? field.name : 'unnamed'
-        acc.push(...[...parentPath, name])
+        acc.push(`${field.name}.`)
       } else {
         // rows, collapsibles, unnamed-tab
-        acc.push(...buildPathSegments(parentPath, fields))
+        acc.push(...buildPathSegments(fields))
       }
     } else if (field.type === 'tabs') {
       // tabs
       if ('tabs' in field) {
         field.tabs?.forEach((tab) => {
-          let tabPath = parentPath
           if ('name' in tab) {
-            tabPath = [...parentPath, tab.name]
+            acc.push(`${tab.name}.`)
+          } else {
+            acc.push(...buildPathSegments(tab.fields))
           }
-          acc.push(...buildPathSegments(tabPath, tab.fields))
         })
       }
     } else if (fieldAffectsData(field)) {
       // text, number, date, etc.
-      const name = 'name' in field ? field.name : 'unnamed'
-      acc.push(...[...parentPath, name])
+      acc.push(field.name)
     }
 
     return acc
   }, [])
-
-  return pathNames
 }

packages/ui/src/forms/WatchChildErrors/getFieldStateFromPaths.ts

@@ -5,28 +5,50 @@ import type React from 'react'
 import { useThrottledEffect } from '../../hooks/useThrottledEffect.js'
 import { useAllFormFields, useFormSubmitted } from '../Form/context.js'
 import { buildPathSegments } from './buildPathSegments.js'
-import { getFieldStateFromPaths } from './getFieldStateFromPaths.js'
 
 type TrackSubSchemaErrorCountProps = {
   fields?: ClientField[]
+  /**
+   * This path should only include path segments that affect data
+   * i.e. it should not include _index-0 type segments
+   *
+   * For collapsibles and tabs you can simply pass their parent path
+   */
   path: (number | string)[]
   setErrorCount: (count: number) => void
 }
-
 export const WatchChildErrors: React.FC<TrackSubSchemaErrorCountProps> = ({
   fields,
-  path,
+  path: parentPath,
   setErrorCount,
 }) => {
   const [formState] = useAllFormFields()
   const hasSubmitted = useFormSubmitted()
 
-  const pathSegments = buildPathSegments(path, fields)
+  const segmentsToMatch = buildPathSegments(fields)
 
   useThrottledEffect(
     () => {
       if (hasSubmitted) {
-        const { errorCount } = getFieldStateFromPaths({ formState, pathSegments })
+        let errorCount = 0
+        Object.entries(formState).forEach(([key]) => {
+          const matchingSegment = segmentsToMatch?.some((segment) => {
+            const segmentToMatch = [...parentPath, segment].join('.')
+            // match fields with same parent path
+            if (segmentToMatch.endsWith('.')) {
+              return key.startsWith(segmentToMatch)
+            }
+            // match fields with same path
+            return key === segmentToMatch
+          })
+
+          if (matchingSegment) {
+            const pathState = formState[key]
+            if ('valid' in pathState && !pathState.valid) {
+              errorCount += 1
+            }
+          }
+        })
         setErrorCount(errorCount)
       }
     },

packages/ui/src/forms/WatchChildErrors/getNestedFieldState.ts

@@ -62,6 +62,12 @@ export const testEslintConfig = [
       'payload/no-wait-function': 'warn',
       // Enable the no-non-retryable-assertions rule ONLY for hunting for flakes
       // 'payload/no-non-retryable-assertions': 'error',
+      'playwright/expect-expect': [
+        'error',
+        {
+          assertFunctionNames: ['assertToastErrors', 'saveDocAndAssert', 'runFilterOptionsTest'],
+        },
+      ],
     },
   },
   {