migrates fieldSchemasToFormState

jacobsfletch · jacobsfletch · commit 340089f48378 · 2025-01-28T17:41:13.000-05:00
diff --git a/packages/payload/src/admin/forms/Form.ts b/packages/payload/src/admin/forms/Form.ts
@@ -1,7 +1,7 @@
 import { type SupportedLanguages } from '@payloadcms/translations'
 
 import type { SanitizedDocumentPermissions } from '../../auth/types.js'
-import type { Field, Validate } from '../../fields/config/types.js'
+import type { Field, TabAsField, Validate } from '../../fields/config/types.js'
 import type { TypedLocale } from '../../index.js'
 import type { DocumentPreferences } from '../../preferences/types.js'
 import type { PayloadRequest, Where } from '../../types/index.js'
@@ -43,7 +43,7 @@ export type FieldState = {
    * The fieldSchema may be part of the form state if `includeSchema: true` is passed to buildFormState.
    * This will never be in the form state of the client.
    */
-  fieldSchema?: Field
+  fieldSchema?: Field | TabAsField
   filterOptions?: FilterOptionsResult
   initialValue?: unknown
   passesCondition?: boolean
diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts
@@ -1683,7 +1683,7 @@ export type FieldWithManyClient = RelationshipFieldClient | SelectFieldClient
 export type FieldWithMaxDepth = RelationshipField | UploadField
 export type FieldWithMaxDepthClient = JoinFieldClient | RelationshipFieldClient | UploadFieldClient
 
-export function fieldHasSubFields<TField extends ClientField | Field>(
+export function fieldHasSubFields<TField extends ClientField | Field | TabAsField>(
   field: TField,
 ): field is TField & (TField extends ClientField ? FieldWithSubFieldsClient : FieldWithSubFields) {
   return (
diff --git a/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts b/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts
@@ -10,6 +10,7 @@ import type {
   PayloadRequest,
   SanitizedFieldPermissions,
   SanitizedFieldsPermissions,
+  TabAsField,
   Validate,
 } from 'payload'
 
@@ -21,7 +22,6 @@ import {
   fieldIsHiddenOrDisabled,
   fieldIsID,
   fieldIsLocalized,
-  getFieldPaths,
   tabHasName,
 } from 'payload/shared'
 
@@ -42,7 +42,7 @@ export type AddFieldStatePromiseArgs = {
   clientFieldSchemaMap?: ClientFieldSchemaMap
   collectionSlug?: string
   data: Data
-  field: Field
+  field: Field | TabAsField
   fieldIndex: number
   fieldSchemaMap: FieldSchemaMap
   /**
@@ -168,7 +168,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
       return
     }
 
-    const validate: Validate = field.validate
+    const validate: Validate = 'validate' in field ? field.validate : undefined
 
     let validationResult: string | true = true
 
@@ -235,12 +235,13 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
         const arrayValue = Array.isArray(data[field.name]) ? data[field.name] : []
 
         const { promises, rows } = arrayValue.reduce(
-          (acc, row, i: number) => {
-            const parentPath = path + '.' + i
+          (acc, row, rowIndex: number) => {
+            const rowPath = path + '.' + rowIndex
+
             row.id = row?.id || new ObjectId().toHexString()
 
             if (!omitParents && (!filter || filter(args))) {
-              const idKey = parentPath + '.id'
+              const idKey = rowPath + '.id'
 
               state[idKey] = {
                 initialValue: row.id,
@@ -270,7 +271,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
                 operation,
                 parentIndexPath: '',
                 parentPassesCondition: passesCondition,
-                parentPath,
+                parentPath: rowPath,
                 parentSchemaPath: schemaPath,
                 permissions:
                   fieldPermissions === true ? fieldPermissions : fieldPermissions?.fields || {},
@@ -357,22 +358,23 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
         const blocksValue = Array.isArray(data[field.name]) ? data[field.name] : []
 
         const { promises, rowMetadata } = blocksValue.reduce(
-          (acc, row, i: number) => {
+          (acc, row, rowIndex: number) => {
             const block = field.blocks.find((blockType) => blockType.slug === row.blockType)
+
             if (!block) {
               throw new Error(
                 `Block with type "${row.blockType}" was found in block data, but no block with that type is defined in the config for field with schema path ${schemaPath}.`,
               )
             }
 
-            const parentPath = path + '.' + i
+            const rowPath = path + '.' + rowIndex
 
             if (block) {
               row.id = row?.id || new ObjectId().toHexString()
 
               if (!omitParents && (!filter || filter(args))) {
                 // Handle block `id` field
-                const idKey = parentPath + '.id'
+                const idKey = rowPath + '.id'
 
                 state[idKey] = {
                   initialValue: row.id,
@@ -386,7 +388,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
                 }
 
                 // Handle `blockType` field
-                const fieldKey = parentPath + '.blockType'
+                const fieldKey = rowPath + '.blockType'
 
                 state[fieldKey] = {
                   initialValue: row.blockType,
@@ -400,7 +402,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
                 }
 
                 // Handle `blockName` field
-                const blockNameKey = parentPath + '.blockName'
+                const blockNameKey = rowPath + '.blockName'
 
                 state[blockNameKey] = {}
 
@@ -434,7 +436,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
                   operation,
                   parentIndexPath: '',
                   parentPassesCondition: passesCondition,
-                  parentPath,
+                  parentPath: rowPath,
                   parentSchemaPath: schemaPath + '.' + block.slug,
                   permissions:
                     fieldPermissions === true
@@ -546,6 +548,7 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
 
         break
       }
+
       case 'relationship':
       case 'upload': {
         if (field.filterOptions) {
@@ -678,8 +681,8 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
       operation,
       parentIndexPath: indexPath,
       parentPassesCondition: passesCondition,
-      parentPath,
-      parentSchemaPath,
+      parentPath: path,
+      parentSchemaPath: schemaPath,
       permissions: parentPermissions, // TODO: Verify this is correct
       preferences,
       previousFormState,
@@ -690,74 +693,85 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
       skipValidation,
       state,
     })
-  } else if (field.type === 'tabs') {
-    const promises = field.tabs.map((tab, tabIndex) => {
-      const isNamedTab = tabHasName(tab)
-
-      const {
-        indexPath: tabIndexPath,
-        path: tabPath,
-        schemaPath: tabSchemaPath,
-      } = getFieldPaths({
-        field: {
-          ...tab,
-          type: 'tab',
-        },
-        index: tabIndex,
-        parentIndexPath: indexPath,
-        parentPath,
-        parentSchemaPath,
-      })
-
-      let childPermissions: SanitizedFieldsPermissions = undefined
-
-      if (isNamedTab) {
-        if (parentPermissions === true) {
+  } else if (field.type === 'tab') {
+    const isNamedTab = tabHasName(field)
+
+    let childPermissions: SanitizedFieldsPermissions = undefined
+
+    if (isNamedTab) {
+      if (parentPermissions === true) {
+        childPermissions = true
+      } else {
+        const tabPermissions = parentPermissions?.[field.name]
+        if (tabPermissions === true) {
           childPermissions = true
         } else {
-          const tabPermissions = parentPermissions?.[tab.name]
-          if (tabPermissions === true) {
-            childPermissions = true
-          } else {
-            childPermissions = tabPermissions?.fields
-          }
+          childPermissions = tabPermissions?.fields
         }
-      } else {
-        childPermissions = parentPermissions
       }
+    } else {
+      childPermissions = parentPermissions
+    }
 
-      return iterateFields({
-        id,
-        addErrorPathToParent: addErrorPathToParentArg,
-        anyParentLocalized: tab.localized || anyParentLocalized,
-        clientFieldSchemaMap,
-        collectionSlug,
-        data: isNamedTab ? data?.[tab.name] || {} : data,
-        fields: tab.fields,
-        fieldSchemaMap,
-        filter,
-        forceFullValue,
-        fullData,
-        includeSchema,
-        omitParents,
-        operation,
-        parentIndexPath: isNamedTab ? '' : tabIndexPath,
-        parentPassesCondition: passesCondition,
-        parentPath: isNamedTab ? tabPath : parentPath,
-        parentSchemaPath: isNamedTab ? tabSchemaPath : parentSchemaPath,
-        permissions: childPermissions,
-        preferences,
-        previousFormState,
-        renderAllFields,
-        renderFieldFn,
-        req,
-        skipConditionChecks,
-        skipValidation,
-        state,
-      })
+    return iterateFields({
+      id,
+      addErrorPathToParent: addErrorPathToParentArg,
+      anyParentLocalized: fieldIsLocalized(field) || anyParentLocalized,
+      clientFieldSchemaMap,
+      collectionSlug,
+      data: isNamedTab ? data?.[field.name] || {} : data,
+      fields: field.fields,
+      fieldSchemaMap,
+      filter,
+      forceFullValue,
+      fullData,
+      includeSchema,
+      omitParents,
+      operation,
+      parentIndexPath: isNamedTab ? '' : indexPath,
+      parentPassesCondition: passesCondition,
+      parentPath: isNamedTab ? path : parentPath,
+      parentSchemaPath: schemaPath,
+      permissions: childPermissions,
+      preferences,
+      previousFormState,
+      renderAllFields,
+      renderFieldFn,
+      req,
+      skipConditionChecks,
+      skipValidation,
+      state,
+    })
+  } else if (field.type === 'tabs') {
+    return iterateFields({
+      id,
+      addErrorPathToParent: addErrorPathToParentArg,
+      anyParentLocalized: fieldIsLocalized(field) || anyParentLocalized,
+      clientFieldSchemaMap,
+      collectionSlug,
+      data,
+      fields: field.tabs.map((tab) => ({ ...tab, type: 'tab' })),
+      fieldSchemaMap,
+      filter,
+      forceFullValue,
+      fullData,
+      includeSchema,
+      omitParents,
+      operation,
+      parentIndexPath: indexPath,
+      parentPassesCondition: passesCondition,
+      parentPath: path,
+      parentSchemaPath: schemaPath,
+      permissions: parentPermissions,
+      preferences,
+      previousFormState,
+      renderAllFields,
+      renderFieldFn,
+      req,
+      skipConditionChecks,
+      skipValidation,
+      state,
     })
-
-    await Promise.all(promises)
   } else if (field.type === 'ui') {
     if (!filter || filter(args)) {
       state[path] = fieldState
diff --git a/packages/ui/src/forms/fieldSchemasToFormState/iterateFields.ts b/packages/ui/src/forms/fieldSchemasToFormState/iterateFields.ts
@@ -2,12 +2,13 @@ import type {
   ClientFieldSchemaMap,
   Data,
   DocumentPreferences,
-  Field as FieldSchema,
+  Field,
   FieldSchemaMap,
   FormState,
   FormStateWithoutComponents,
   PayloadRequest,
   SanitizedFieldsPermissions,
+  TabAsField,
 } from 'payload'
 
 import { getFieldPaths } from 'payload/shared'
@@ -26,7 +27,7 @@ type Args = {
   clientFieldSchemaMap?: ClientFieldSchemaMap
   collectionSlug?: string
   data: Data
-  fields: FieldSchema[]
+  fields: (Field | TabAsField)[]
   fieldSchemaMap: FieldSchemaMap
   filter?: (args: AddFieldStatePromiseArgs) => boolean
   /**
@@ -108,7 +109,7 @@ export const iterateFields = async ({
     const { indexPath, path, schemaPath } = getFieldPaths({
       field,
       index: fieldIndex,
-      parentIndexPath: 'name' in field ? '' : parentIndexPath,
+      parentIndexPath,
       parentPath,
       parentSchemaPath,
     })
diff --git a/packages/ui/src/utilities/buildClientFieldSchemaMap/traverseFields.ts b/packages/ui/src/utilities/buildClientFieldSchemaMap/traverseFields.ts
@@ -48,7 +48,7 @@ export const traverseFields = ({
 
     switch (field.type) {
       case 'array':
-      case 'group':
+      case 'group': {
         traverseFields({
           clientSchemaMap,
           config,
@@ -62,8 +62,9 @@ export const traverseFields = ({
         })
 
         break
+      }
 
-      case 'blocks':
+      case 'blocks': {
         field.blocks.map((block) => {
           const blockSchemaPath = `${schemaPath}.${block.slug}`
 
@@ -82,8 +83,10 @@ export const traverseFields = ({
         })
 
         break
+      }
+
       case 'collapsible':
-      case 'row':
+      case 'row': {
         traverseFields({
           clientSchemaMap,
           config,
@@ -96,6 +99,7 @@ export const traverseFields = ({
           schemaMap,
         })
         break
+      }
 
       case 'richText': {
         // richText sub-fields are not part of the ClientConfig or the Config.
diff --git a/packages/ui/src/utilities/buildFieldSchemaMap/traverseFields.ts b/packages/ui/src/utilities/buildFieldSchemaMap/traverseFields.ts
