feat: conditional tabs

packages/drizzle/src/utilities/validateExistingBlockIsIdentical.ts

@@ -1,4 +1,4 @@
-import type { Block, Field } from 'payload'
+import type { Block, Field, Tab } from 'payload'
 
 import { InvalidConfiguration } from 'payload'
 import { fieldAffectsData, fieldHasSubFields, tabHasName } from 'payload/shared'
@@ -33,7 +33,7 @@
     if (field.type === 'tabs') {
       return [
         ...fieldsToUse,
-        ...field.tabs.reduce((tabFields, tab) => {
+        ...(field.tabs as Tab[]).reduce((tabFields, tab) => {
           fieldPrefix = 'name' in tab ? `${prefix}_${tab.name}` : prefix
           return [
             ...tabFields,

packages/graphql/src/schema/buildMutationInputType.ts

@@ -20,6 +20,7 @@
   SanitizedCollectionConfig,
   SanitizedConfig,
   SelectField,
+  Tab,
   TabsField,
   TextareaField,
   TextField,
@@ -272,7 +273,7 @@
       }
     },
     tabs: (inputObjectTypeConfig: InputObjectTypeConfig, field: TabsField) => {
-      return field.tabs.reduce((acc, tab) => {
+      return (field.tabs as Tab[]).reduce((acc, tab) => {
         if (tabHasName(tab)) {
           const fullName = combineParentName(parentName, toWords(tab.name, true))
           const requiresAtLeastOneField = groupOrTabHasRequiredSubfield(field)

packages/graphql/src/schema/buildObjectType.ts

@@ -21,6 +21,7 @@
   RowField,
   SanitizedConfig,
   SelectField,
+  Tab,
   TabsField,
   TextareaField,
   TextField,
@@ -52,7 +53,7 @@
 import { withNullableType } from './withNullableType.js'
 
 export type ObjectTypeConfig = {
   [path: string]: GraphQLFieldConfig<any, any>
 }
 
 type Args = {
@@ -108,7 +109,7 @@
       }
     },
     blocks: (objectTypeConfig: ObjectTypeConfig, field: BlocksField) => {
       const blockTypes: GraphQLObjectType<any, any>[] = field.blocks.reduce((acc, block) => {
         if (!graphqlResult.types.blockTypes[block.slug]) {
           const interfaceName =
             block?.interfaceName || block?.graphQL?.singularName || toWords(block.slug, true)
@@ -212,7 +213,7 @@
         ...objectTypeConfig,
         [field.name]: {
           type: graphqlResult.types.groupTypes[interfaceName],
           resolve: (parent, args, context: Context) => {
             return {
               ...parent[field.name],
               _id: parent._id ?? parent.id,
@@ -617,7 +618,7 @@
       }
     },
     tabs: (objectTypeConfig: ObjectTypeConfig, field: TabsField) =>
-      field.tabs.reduce((tabSchema, tab) => {
+      (field.tabs as Tab[]).reduce((tabSchema, tab) => {
         if (tabHasName(tab)) {
           const interfaceName =
             tab?.interfaceName || combineParentName(parentName, toWords(tab.name, true))
@@ -645,7 +646,7 @@
             ...tabSchema,
             [tab.name]: {
               type: graphqlResult.types.groupTypes[interfaceName],
               resolve(parent, args, context: Context) {
                 return {
                   ...parent[tab.name],
                   _id: parent._id ?? parent.id,

packages/graphql/src/schema/recursivelyBuildNestedPaths.ts

@@ -1,4 +1,4 @@
-import type { FieldWithSubFields, TabsField } from 'payload'
+import type { FieldWithSubFields, Tab, TabsField } from 'payload'
 
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared'
 
@@ -17,7 +17,7 @@ export const recursivelyBuildNestedPaths = ({ field, nestedFieldName2, parentNam
   if (field.type === 'tabs') {
     // if the tab has a name, treat it as a group
     // otherwise, treat it as a row
-    return field.tabs.reduce((tabSchema, tab: any) => {
+    return (field.tabs as Tab[]).reduce((tabSchema, tab: any) => {
       tabSchema.push(
         ...recursivelyBuildNestedPaths({
           field: {

packages/payload/src/admin/fields/Tabs.ts

@@ -23,8 +23,11 @@ import type {
 } from '../types.js'
 
 export type ClientTab =
-  | ({ fields: ClientField[]; readonly path?: string } & Omit<NamedTab, 'fields'>)
-  | ({ fields: ClientField[] } & Omit<UnnamedTab, 'fields'>)
+  | ({ fields: ClientField[]; passesCondition?: boolean; readonly path?: string } & Omit<
+      NamedTab,
+      'fields'
+    >)
+  | ({ fields: ClientField[]; passesCondition?: boolean } & Omit<UnnamedTab, 'fields'>)
 
 type TabsFieldBaseClientProps = FieldPaths & Pick<ServerFieldBase, 'permissions'>
 

packages/payload/src/errors/DuplicateTabsIds.ts

@@ -0,0 +1,7 @@
+import { APIError } from './APIError.js'
+
+export class DuplicateTabsIds extends APIError {
+  constructor(duplicates: string[]) {
+    super(`Collection tabs ids already in use: "${duplicates.join(', ')}"`)
+  }
+}

packages/payload/src/fields/config/sanitize.ts

@@ -1,4 +1,5 @@
 import { deepMergeSimple } from '@payloadcms/translations/utilities'
+import { v4 as uuid } from 'uuid'
 
 import type { CollectionConfig, SanitizedJoins } from '../../collections/config/types.js'
 import type { Config, SanitizedConfig } from '../../config/types.js'
@@ -263,6 +264,15 @@ export const sanitizeFields = async ({
           tab.label = toWords(tab.name)
         }
 
+        if (
+          'admin' in tab &&
+          tab.admin?.condition &&
+          typeof tab.admin.condition === 'function' &&
+          !tab.id
+        ) {
+          tab.id = tabHasName(tab) ? tab.name : uuid()
+        }
+
         tab.fields = await sanitizeFields({
           config,
           existingFieldNames: tabHasName(tab) ? new Set() : existingFieldNames,

packages/payload/src/fields/config/types.ts

@@ -692,11 +692,15 @@ export type CollapsibleFieldClient = {
   Pick<CollapsibleField, 'type'>
 
 type TabBase = {
-  description?: LabelFunction | StaticDescription
+  admin?: {
+    condition?: Condition
+  }
+  description?: Description
   fields: Field[]
+  id?: string
   interfaceName?: string
   saveToJWT?: boolean | string
-} & Omit<FieldBase, 'required' | 'validate'>
+} & Omit<FieldBase, 'admin' | 'required' | 'validate'>
 
 export type NamedTab = {
   /** Customize generated GraphQL and Typescript schema names.
@@ -725,11 +729,11 @@ export type UnnamedTab = {
 } & Omit<TabBase, 'name' | 'virtual'>
 
 export type Tab = NamedTab | UnnamedTab
-
 export type TabsField = {
   admin?: Omit<Admin, 'description'>
-  tabs: Tab[]
   type: 'tabs'
+} & {
+  tabs: Tab[]
 } & Omit<FieldBase, 'admin' | 'localized' | 'name' | 'saveToJWT' | 'virtual'>
 
 export type TabsFieldClient = {

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

@@ -77,6 +77,7 @@
   const passesCondition = field.admin?.condition
     ? Boolean(field.admin.condition(data, siblingData, { user: req.user }))
     : true
+
   let skipValidationFromHere = skipValidation || !passesCondition
   const { localization } = req.payload.config
   const defaultLocale = localization ? localization?.defaultLocale : 'en'
@@ -287,7 +288,7 @@
 
     case 'collapsible':
 
     case 'row': {
       await traverseFields({
         id,
         collection,

packages/payload/src/utilities/getEntityPolicies.ts

@@ -1,7 +1,7 @@
 import type { CollectionPermission, GlobalPermission } from '../auth/types.js'
 import type { SanitizedCollectionConfig, TypeWithID } from '../collections/config/types.js'
 import type { Access } from '../config/types.js'
-import type { Field, FieldAccess } from '../fields/config/types.js'
+import type { Field, FieldAccess, Tab } from '../fields/config/types.js'
 import type { SanitizedGlobalConfig } from '../globals/config/types.js'
 import type { AllOperations, Document, PayloadRequest, Where } from '../types/index.js'
 
@@ -207,7 +207,7 @@ export async function getEntityPolicies<T extends Args>(args: T): Promise<Return
           })
         } else if (field.type === 'tabs') {
           await Promise.all(
-            field.tabs.map(async (tab) => {
+            field.tabs.map(async (tab: Tab) => {
               if (tabHasName(tab)) {
                 if (!mutablePolicies[tab.name]) {
                   mutablePolicies[tab.name] = {

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

@@ -9,6 +9,7 @@
 } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useFormFields } from '@payloadcms/ui'
 import { tabHasName, toKebabCase } from 'payload/shared'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -21,8 +22,8 @@
 import { usePreferences } from '../../providers/Preferences/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { FieldDescription } from '../FieldDescription/index.js'
-import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'
+import { fieldBaseClass } from '../shared/index.js'
 import { TabsProvider } from './provider.js'
 import { TabComponent } from './Tab/index.js'
 
@@ -60,14 +61,31 @@
   const { preferencesKey } = useDocumentInfo()
   const { i18n } = useTranslation()
   const { isWithinCollapsible } = useCollapsible()
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)
+
+  const tabInfos = useFormFields(([fields]) => {
+    return tabs.map((tab, index) => {
+      return {
+        index,
+        passesCondition: fields?.[tab?.id]?.passesCondition ?? true,
+        tab,
+      }
+    })
+  })
+
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(() => {
+    return tabInfos.filter(({ passesCondition }) => passesCondition)?.[0]?.index ?? 0
+  })
+
   const tabsPrefKey = `tabs-${indexPath}`
   const [activeTabPath, setActiveTabPath] = useState<string>(() =>
     generateTabPath({ activeTabConfig: tabs[activeTabIndex], path: parentPath }),
   )
 
   const activePathChildrenPath = tabHasName(tabs[activeTabIndex]) ? activeTabPath : parentPath
 
+  const activeTabInfo = tabInfos[activeTabIndex]
+  const activeTabConfig = activeTabInfo?.tab
+
   const [activeTabSchemaPath, setActiveTabSchemaPath] = useState<string>(() =>
     generateTabPath({ activeTabConfig: tabs[0], path: parentSchemaPath }),
   )
@@ -145,7 +163,14 @@
     ],
   )
 
-  const activeTabConfig = tabs[activeTabIndex]
+  useEffect(() => {
+    if (activeTabInfo?.passesCondition === false) {
+      const nextTab = tabInfos.find(({ passesCondition }) => passesCondition)
+      if (nextTab) {
+        void handleTabChange(nextTab.index)
+      }
+    }
+  }, [activeTabInfo, tabInfos, handleTabChange])
 
   const activeTabDescription = activeTabConfig.description
 
@@ -168,18 +193,18 @@
       <TabsProvider>
         <div className={`${baseClass}__tabs-wrap`}>
           <div className={`${baseClass}__tabs`}>
-            {tabs.map((tab, tabIndex) => {
-              return (
+            {tabInfos.map(({ index, passesCondition, tab }) => {
+              return passesCondition ? (
                 <TabComponent
-                  isActive={activeTabIndex === tabIndex}
-                  key={tabIndex}
+                  isActive={activeTabIndex === index}
+                  key={index}
                   parentPath={path}
                   setIsActive={() => {
-                    void handleTabChange(tabIndex)
+                    void handleTabChange(index)
                   }}
                   tab={tab}
                 />
-              )
+              ) : null
             })}
           </div>
         </div>

packages/ui/src/forms/RenderFields/index.tsx

@@ -18,6 +18,7 @@ export const RenderFields: React.FC<RenderFieldsProps> = (props) => {
   const {
     className,
     fields,
+    filter,
     forceRender,
     margins,
     parentIndexPath,

packages/ui/src/forms/RenderFields/types.ts

@@ -3,6 +3,7 @@ import type { ClientField, SanitizedFieldPermissions } from 'payload'
 export type RenderFieldsProps = {
   readonly className?: string
   readonly fields: ClientField[]
+  readonly filter?: (field: ClientField) => boolean
   /**
    * Controls the rendering behavior of the fields, i.e. defers rendering until they intersect with the viewport using the Intersection Observer API.
    *

test/fields/collections/Tabs/e2e.spec.ts

@@ -132,4 +132,42 @@ describe('Tabs', () => {
       "Hello, I'm the first row, in a named tab",
     )
   })
+
+  test('should render conditional tab when checkbox is toggled', async () => {
+    await navigateToDoc(page, url)
+    const conditionalTabSelector = '.tabs-field__tab-button:text-is("Conditional Tab")'
+    await expect(page.locator(conditionalTabSelector)).toHaveCount(0)
+
+    const checkboxSelector = `input#field-conditionalTabVisible`
+    await page.locator(checkboxSelector).check()
+    await expect(page.locator(checkboxSelector)).toBeChecked()
+
+    await wait(300)
+
+    await expect(page.locator(conditionalTabSelector)).toHaveCount(1)
+    await switchTab(page, conditionalTabSelector)
+
+    await expect(
+      page.locator('label[for="field-conditionalTab__conditionalTabField"]'),
+    ).toHaveCount(1)
+  })
+
+  test('should hide nested conditional tab when checkbox is toggled', async () => {
+    await navigateToDoc(page, url)
+
+    // Show the conditional tab
+    const conditionalTabSelector = '.tabs-field__tab-button:text-is("Conditional Tab")'
+    const checkboxSelector = `input#field-conditionalTabVisible`
+    await page.locator(checkboxSelector).check()
+    await switchTab(page, conditionalTabSelector)
+
+    // Now assert on the nested conditional tab
+    const nestedConditionalTabSelector = '.tabs-field__tab-button:text-is("Nested Conditional Tab")'
+    await expect(page.locator(nestedConditionalTabSelector)).toHaveCount(1)
+
+    const nestedCheckboxSelector = `input#field-conditionalTab__nestedConditionalTabVisible`
+    await page.locator(nestedCheckboxSelector).uncheck()
+
+    await expect(page.locator(nestedConditionalTabSelector)).toHaveCount(0)
+  })
 })

test/fields/collections/Tabs/index.ts

@@ -21,9 +21,78 @@ const TabsFields: CollectionConfig = {
           'This should not collapse despite there being many tabs pushing the main fields open.',
       },
     },
+    {
+      name: 'conditionalTabVisible',
+      type: 'checkbox',
+      label: 'Toggle Conditional Tab',
+      admin: {
+        position: 'sidebar',
+        description:
+          'When active, the conditional tab should be visible. When inactive, it should be hidden.',
+      },
+    },
     {
       type: 'tabs',
       tabs: [
+        {
+          name: 'conditionalTab',
+          label: 'Conditional Tab',
+          description: 'This tab should only be visible when the conditional field is checked.',
+          fields: [
+            {
+              name: 'conditionalTabField',
+              type: 'text',
+              label: 'Conditional Tab Field',
+              defaultValue:
+                'This field should only be visible when the conditional tab is visible.',
+            },
+            {
+              name: 'nestedConditionalTabVisible',
+              type: 'checkbox',
+              label: 'Toggle Nested Conditional Tab',
+              defaultValue: true,
+              admin: {
+                description:
+                  'When active, the nested conditional tab should be visible. When inactive, it should be hidden.',
+              },
+            },
+            {
+              type: 'tabs',
+
+              tabs: [
+                {
+                  label: 'Nested Unconditional Tab',
+                  description: 'Description for a nested unconditional tab',
+                  fields: [
+                    {
+                      name: 'nestedUnconditionalTabInput',
+                      type: 'text',
+                    },
+                  ],
+                },
+                {
+                  label: 'Nested Conditional Tab',
+                  description: 'Here is a description for a nested conditional tab',
+                  fields: [
+                    {
+                      name: 'nestedConditionalTabInput',
+                      type: 'textarea',
+                      defaultValue:
+                        'This field should only be visible when the nested conditional tab is visible.',
+                    },
+                  ],
+                  admin: {
+                    condition: ({ conditionalTab }) =>
+                      !!conditionalTab?.nestedConditionalTabVisible,
+                  },
+                },
+              ],
+            },
+          ],
+          admin: {
+            condition: ({ conditionalTabVisible }) => !!conditionalTabVisible,
+          },
+        },
         {
           label: 'Tab with Array',
           description: 'This tab has an array.',