fix: hide fields with read: false in list view columns, filters, and groupBy (#14118)

### What?

Fixes fields with `read: false` access control appearing in list view
column selector, filter dropdown, and groupBy dropdown. Previously,
these fields would show with `<No Restricted Field>` placeholders in
columns, and were still selectable in the filter and groupBy dropdowns
despite the user not having read access.

### Why?

Users should not be able to interact with fields they don't have read
access to.

### How?

- Created `filterFieldsWithPermissions` utility that recursively filters
fields based on `read` permissions
- Handles nested structures (tabs, groups, rows, collapsibles) by
recursively accessing nested permissions via
`fieldPermissions[fieldName]?.fields` or `fieldPermissions[fieldName]`
- Checks `fieldPermissions[field.name] === true` or
`fieldPermissions[field.name]?.read` for leaf fields with data
- Combines filtering logic from existing `filterFields` with permission
checks
- Updated `buildColumnState` to use `filterFieldsWithPermissions`
instead of `filterFields`, filtering both client and server fields
before flattening
- Updated `renderTable` to use `filterFieldsWithPermissions` when
building field lists for relationship tables

---------

Co-authored-by: Jarrod Flesch <[email protected]>

Author: PatrikKozak

packages/next/src/views/List/handleGroupBy.ts

@@ -6,6 +6,7 @@ import type {
   PaginatedDocs,
   PayloadRequest,
   SanitizedCollectionConfig,
+  SanitizedFieldsPermissions,
   SelectType,
   ViewTypes,
   Where,
@@ -28,6 +29,7 @@ export const handleGroupBy = async ({
   customCellProps,
   drawerSlug,
   enableRowSelections,
+  fieldPermissions,
   query,
   req,
   select,
@@ -44,6 +46,7 @@ export const handleGroupBy = async ({
   customCellProps?: Record<string, any>
   drawerSlug?: string
   enableRowSelections?: boolean
+  fieldPermissions?: SanitizedFieldsPermissions
   query?: ListQuery
   req: PayloadRequest
   select?: SelectType
@@ -183,6 +186,7 @@ export const handleGroupBy = async ({
           data: groupData,
           drawerSlug,
           enableRowSelections,
+          fieldPermissions,
           groupByFieldPath,
           groupByValue: serializableValue,
           heading: heading || req.i18n.t('general:noValue'),

packages/next/src/views/List/index.tsx

@@ -236,6 +236,7 @@ export const renderListView = async (
       collectionSlug,
       columns: collectionPreferences?.columns,
       i18n,
+      permissions,
     })
 
     const select = collectionConfig.admin.enableListViewSelectAPI
@@ -259,6 +260,7 @@ export const renderListView = async (
           customCellProps,
           drawerSlug,
           enableRowSelections,
+          fieldPermissions: permissions?.collections?.[collectionSlug]?.fields,
           query,
           req,
           select,
@@ -293,6 +295,7 @@ export const renderListView = async (
           data,
           drawerSlug,
           enableRowSelections,
+          fieldPermissions: permissions?.collections?.[collectionSlug]?.fields,
           i18n: req.i18n,
           orderableFieldName: collectionConfig.orderable === true ? '_order' : undefined,
           payload: req.payload,

packages/ui/src/elements/GroupByBuilder/index.tsx

@@ -6,6 +6,7 @@ import './index.scss'
 import React, { useMemo } from 'react'
 
 import { SelectInput } from '../../fields/Select/Input.js'
+import { useAuth } from '../../providers/Auth/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'
@@ -41,8 +42,19 @@ const supportedFieldTypes: Field['type'][] = [
 
 export const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {
   const { i18n, t } = useTranslation()
+  const { permissions } = useAuth()
 
-  const reducedFields = useMemo(() => reduceFieldsToOptions({ fields, i18n }), [fields, i18n])
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields
+
+  const reducedFields = useMemo(
+    () =>
+      reduceFieldsToOptions({
+        fieldPermissions,
+        fields,
+        i18n,
+      }),
+    [fields, fieldPermissions, i18n],
+  )
 
   const { query, refineListData } = useListQuery()
 

packages/ui/src/elements/WhereBuilder/index.tsx

@@ -7,6 +7,7 @@ import React, { useMemo } from 'react'
 
 import type { AddCondition, RemoveCondition, UpdateCondition, WhereBuilderProps } from './types.js'
 
+import { useAuth } from '../../providers/Auth/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'
@@ -24,10 +25,22 @@ export { WhereBuilderProps }
  * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).
  */
 export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
-  const { collectionPluralLabel, fields, renderedFilters, resolvedFilterOptions } = props
+  const { collectionPluralLabel, collectionSlug, fields, renderedFilters, resolvedFilterOptions } =
+    props
   const { i18n, t } = useTranslation()
-
-  const reducedFields = useMemo(() => reduceFieldsToOptions({ fields, i18n }), [fields, i18n])
+  const { permissions } = useAuth()
+
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields
+
+  const reducedFields = useMemo(
+    () =>
+      reduceFieldsToOptions({
+        fieldPermissions,
+        fields,
+        i18n,
+      }),
+    [fieldPermissions, fields, i18n],
+  )
 
   const { handleWhereChange, query } = useListQuery()
 

packages/ui/src/providers/TableColumns/buildColumnState/filterFieldsWithPermissions.tsx

@@ -0,0 +1,84 @@
+import type {
+  ClientField,
+  Field,
+  SanitizedFieldPermissions,
+  SanitizedFieldsPermissions,
+} from 'payload'
+
+import { fieldAffectsData, fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'
+
+const shouldSkipField = (field: ClientField | Field): boolean =>
+  (field.type !== 'ui' && fieldIsHiddenOrDisabled(field) && !fieldIsID(field)) ||
+  field?.admin?.disableListColumn === true
+
+export const filterFieldsWithPermissions = <T extends ClientField | Field = ClientField>({
+  fieldPermissions,
+  fields,
+}: {
+  fieldPermissions?: SanitizedFieldPermissions | SanitizedFieldsPermissions
+  fields: (ClientField | Field)[]
+}): T[] => {
+  return (fields ?? []).reduce((acc, field) => {
+    if (shouldSkipField(field)) {
+      return acc
+    }
+
+    // handle tabs
+    if (field.type === 'tabs' && 'tabs' in field) {
+      const formattedField = {
+        ...field,
+        tabs: field.tabs.map((tab) => ({
+          ...tab,
+          fields: filterFieldsWithPermissions<T>({
+            fieldPermissions:
+              typeof fieldPermissions === 'boolean'
+                ? fieldPermissions
+                : 'name' in tab && tab.name
+                  ? fieldPermissions[tab.name]?.fields || fieldPermissions[tab.name]
+                  : fieldPermissions,
+            fields: tab.fields,
+          }),
+        })),
+      } as ClientField | Field
+      acc.push(formattedField)
+      return acc
+    }
+
+    // handle fields with subfields (row, group, collapsible, etc.)
+    if ('fields' in field && Array.isArray(field.fields)) {
+      const formattedField = {
+        ...field,
+        fields: filterFieldsWithPermissions<T>({
+          fieldPermissions:
+            typeof fieldPermissions === 'boolean'
+              ? fieldPermissions
+              : 'name' in field && field.name
+                ? fieldPermissions[field.name]?.fields || fieldPermissions[field.name]
+                : fieldPermissions,
+          fields: field.fields,
+        }),
+      } as ClientField | Field
+      acc.push(formattedField)
+      return acc
+    }
+
+    if (fieldPermissions === true) {
+      acc.push(field)
+      return acc
+    }
+
+    if (fieldAffectsData(field)) {
+      const fieldPermission = fieldPermissions[field.name]
+      // Always allow ID fields, or if explicitly granted (true or { read: true })
+      // undefined means field is not in permissions object = denied
+      if (fieldIsID(field) || fieldPermission === true || fieldPermission?.read === true) {
+        acc.push(field)
+      }
+      return acc
+    }
+
+    // leaf
+    acc.push(field)
+    return acc
+  }, [])
+}

packages/ui/src/providers/TableColumns/buildColumnState/index.tsx

@@ -12,6 +12,7 @@ import type {
   Payload,
   PayloadRequest,
   SanitizedCollectionConfig,
+  SanitizedFieldsPermissions,
   ServerComponentProps,
   StaticLabel,
   ViewTypes,
@@ -32,7 +33,7 @@ import {
   SortColumn,
   // eslint-disable-next-line payload/no-imports-from-exports-dir -- MUST reference the exports dir: https://github.com/payloadcms/payload/issues/12002#issuecomment-2791493587
 } from '../../../exports/client/index.js'
-import { filterFields } from './filterFields.js'
+import { filterFieldsWithPermissions } from './filterFieldsWithPermissions.js'
 import { isColumnActive } from './isColumnActive.js'
 import { renderCell } from './renderCell.js'
 import { sortFieldMap } from './sortFieldMap.js'
@@ -45,6 +46,7 @@ export type BuildColumnStateArgs = {
   enableLinkedCell?: boolean
   enableRowSelections: boolean
   enableRowTypes?: boolean
+  fieldPermissions?: SanitizedFieldsPermissions
   i18n: I18nClient
   payload: Payload
   req?: PayloadRequest
@@ -79,6 +81,7 @@ export const buildColumnState = (args: BuildColumnStateArgs): Column[] => {
     docs,
     enableLinkedCell = true,
     enableRowSelections,
+    fieldPermissions,
     i18n,
     payload,
     req,
@@ -89,17 +92,26 @@ export const buildColumnState = (args: BuildColumnStateArgs): Column[] => {
   } = args
 
   // clientFields contains the fake `id` column
-  let sortedFieldMap = flattenTopLevelFields(filterFields(clientFields), {
-    i18n,
-    keepPresentationalFields: true,
-    moveSubFieldsToTop: true,
-  }) as ClientField[]
-
-  let _sortedFieldMap = flattenTopLevelFields(filterFields(serverFields), {
-    i18n,
-    keepPresentationalFields: true,
-    moveSubFieldsToTop: true,
-  }) as Field[] // TODO: think of a way to avoid this additional flatten
+  let sortedFieldMap = flattenTopLevelFields(
+    filterFieldsWithPermissions({ fieldPermissions, fields: clientFields }),
+    {
+      i18n,
+      keepPresentationalFields: true,
+      moveSubFieldsToTop: true,
+    },
+  ) as ClientField[]
+
+  let _sortedFieldMap = flattenTopLevelFields(
+    filterFieldsWithPermissions({
+      fieldPermissions,
+      fields: serverFields,
+    }),
+    {
+      i18n,
+      keepPresentationalFields: true,
+      moveSubFieldsToTop: true,
+    },
+  ) as Field[] // TODO: think of a way to avoid this additional flatten
 
   // place the `ID` field first, if it exists
   // do the same for the `useAsTitle` field with precedence over the `ID` field

packages/ui/src/utilities/buildTableState.ts

@@ -11,7 +11,7 @@ import type {
   Where,
 } from 'payload'
 
-import { APIError, canAccessAdmin, formatErrors } from 'payload'
+import { APIError, canAccessAdmin, formatErrors, getAccessResults } from 'payload'
 import { isNumber } from 'payload/shared'
 
 import { getClientConfig } from './getClientConfig.js'
@@ -100,6 +100,8 @@ const buildTableState = async (
     user,
   })
 
+  const permissions = await getAccessResults({ req })
+
   let collectionConfig: SanitizedCollectionConfig
   let clientCollectionConfig: ClientCollectionConfig
 
@@ -205,9 +207,13 @@ const buildTableState = async (
       collectionSlug,
       columns: columnsFromArgs,
       i18n: req.i18n,
+      permissions,
     }),
     data,
     enableRowSelections,
+    fieldPermissions: Array.isArray(collectionSlug)
+      ? true
+      : permissions.collections[collectionSlug].fields,
     i18n: req.i18n,
     orderableFieldName,
     payload,

packages/ui/src/utilities/getColumns.ts

@@ -1,10 +1,15 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ClientCollectionConfig, ClientConfig, ColumnPreference } from 'payload'
+import type {
+  ClientCollectionConfig,
+  ClientConfig,
+  ColumnPreference,
+  SanitizedPermissions,
+} from 'payload'
 
 import { flattenTopLevelFields } from 'payload'
 import { fieldAffectsData } from 'payload/shared'
 
-import { filterFields } from '../providers/TableColumns/buildColumnState/filterFields.js'
+import { filterFieldsWithPermissions } from '../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js'
 import { getInitialColumns } from '../providers/TableColumns/getInitialColumns.js'
 
 export const getColumns = ({
@@ -13,12 +18,14 @@ export const getColumns = ({
   collectionSlug,
   columns,
   i18n,
+  permissions,
 }: {
   clientConfig: ClientConfig
   collectionConfig?: ClientCollectionConfig
   collectionSlug: string | string[]
   columns: ColumnPreference[]
   i18n: I18nClient
+  permissions?: SanitizedPermissions
 }) => {
   const isPolymorphic = Array.isArray(collectionSlug)
 
@@ -30,7 +37,10 @@ export const getColumns = ({
         (each) => each.slug === collection,
       )
 
-      for (const field of filterFields(clientCollectionConfig.fields)) {
+      for (const field of filterFieldsWithPermissions({
+        fieldPermissions: permissions?.collections?.[collection]?.fields || true,
+        fields: clientCollectionConfig.fields,
+      })) {
         if (fieldAffectsData(field)) {
           if (fields.some((each) => fieldAffectsData(each) && each.name === field.name)) {
             continue
@@ -55,7 +65,16 @@ export const getColumns = ({
         }),
       )
     : getInitialColumns(
-        isPolymorphic ? fields : filterFields(fields),
+        isPolymorphic
+          ? fields
+          : filterFieldsWithPermissions({
+              fieldPermissions:
+                typeof collectionSlug === 'string' &&
+                permissions?.collections?.[collectionSlug]?.fields
+                  ? permissions.collections[collectionSlug].fields
+                  : true,
+              fields,
+            }),
         collectionConfig?.admin?.useAsTitle,
         isPolymorphic ? [] : collectionConfig?.admin?.defaultColumns,
       )