Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions docs/fields/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -616,8 +616,9 @@ The following options are available:
| **`readOnly`** | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value. |
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
| **`disableBulkEdit`** | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields. |
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
| **`disableGroupBy`** | Set `disableGroupBy` to `true` to prevent fields from appearing in the list view groupBy options. Defaults to `false`. |
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. Defaults to `false`. |
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. Defaults to `false`. |
| **`hidden`** | Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors. |

### Field Descriptions
Expand Down
10 changes: 6 additions & 4 deletions docs/upload/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -202,16 +202,18 @@ Each image size also supports `admin` options to control whether it appears in t
width: 400,
height: 300,
admin: {
disableGroupBy: true, // hide from list view groupBy options
disableListColumn: true, // hide from list view columns
disableListFilter: true, // hide from list view filters
},
}
```

| Option | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| **`disableListColumn`** | If set to `true`, this image size will not be available as a selectable column in the collection list view. Defaults to `false`. |
| **`disableListFilter`** | If set to `true`, this image size will not be available as a filter option in the collection list view. Defaults to `false`. |
| Option | Description |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **`disableGroupBy`** | If set to `true`, this image size will not be available as a selectable groupBy option in the collection list view. Defaults to `false`. |
| **`disableListColumn`** | If set to `true`, this image size will not be available as a selectable column in the collection list view. Defaults to `false`. |
| **`disableListFilter`** | If set to `true`, this image size will not be available as a filter option in the collection list view. Defaults to `false`. |

This is useful for hiding large or rarely used image sizes from the list view UI while still keeping them available in the API.

Expand Down
1 change: 1 addition & 0 deletions packages/payload/src/config/orderable/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export const addOrderableFieldsAndHook = (
admin: {
disableBulkEdit: true,
disabled: true,
disableGroupBy: true,
disableListColumn: true,
disableListFilter: true,
hidden: true,
Expand Down
10 changes: 10 additions & 0 deletions packages/payload/src/fields/config/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,11 @@ type Admin = {
description?: Description
disableBulkEdit?: boolean
disabled?: boolean
/**
* Shows / hides fields from appearing in the list view groupBy options.
* @type boolean
*/
disableGroupBy?: boolean
/**
* Shows / hides fields from appearing in the list view column selector.
* @type boolean
Expand All @@ -390,6 +395,11 @@ export type AdminClient = {
description?: StaticDescription
disableBulkEdit?: boolean
disabled?: boolean
/**
* Shows / hides fields from appearing in the list view groupBy options.
* @type boolean
*/
disableGroupBy?: boolean
/**
* Shows / hides fields from appearing in the list view column selector.
* @type boolean
Expand Down
10 changes: 9 additions & 1 deletion packages/payload/src/uploads/getBaseFields.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
name,
type: 'number',
admin: {
disableGroupBy: true,
disableListColumn: true,
disableListFilter: true,
hidden: true,
Expand All @@ -184,7 +185,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
}

// In Payload v4, image size subfields (`url`, `width`, `height`, etc.) should
// default to `disableListColumn: true` and `disableListFilter: true`
// default to `disableGroupBy: true`, `disableListColumn: true` and `disableListFilter: true`
// to avoid cluttering the collection list view and filters by default.
if (uploadOptions.imageSizes) {
uploadFields = uploadFields.concat([
Expand All @@ -199,6 +200,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
type: 'group',
admin: {
hidden: true,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -207,6 +209,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...url,
admin: {
...url.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -232,6 +235,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...width,
admin: {
...width.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -240,6 +244,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...height,
admin: {
...height.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -248,6 +253,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...mimeType,
admin: {
...mimeType.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -256,6 +262,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...filesize,
admin: {
...filesize.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand All @@ -264,6 +271,7 @@ export const getBaseUploadFields = ({ collection, config }: Options): Field[] =>
...filename,
admin: {
...filename.admin,
...(size.admin?.disableGroupBy && { disableGroupBy: true }),
...(size.admin?.disableListColumn && { disableListColumn: true }),
...(size.admin?.disableListFilter && { disableListFilter: true }),
},
Expand Down
8 changes: 7 additions & 1 deletion packages/payload/src/uploads/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,17 @@ export type ImageSize = {
/**
* Admin UI options that control how this image size appears in list views.
*
* NOTE: In Payload v4, these options (`disableListColumn`, `disableListFilter`)
* NOTE: In Payload v4, these options (`disableGroupBy`, `disableListColumn` and `disableListFilter`)
* should default to `true` so image size subfields are hidden from list columns
* and filters by default, reducing noise in the admin UI.
*/
admin?: {
/**
* If set to true, this image size will not be available
* as a selectable groupBy option in the collection list view.
* @default false
*/
disableGroupBy?: boolean
/**
* If set to true, this image size will not be available
* as a selectable column in the collection list view.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const tenantField = ({
admin: {
allowCreate: false,
allowEdit: false,
disableGroupBy: true,
disableListColumn: true,
disableListFilter: true,
position: 'sidebar',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/elements/GroupByBuilder/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {
}}
options={reducedFields.filter(
(field) =>
!field.field.admin.disableListFilter &&
!field.field.admin.disableGroupBy &&
field.value !== 'id' &&
supportedFieldTypes.includes(field.field.type),
)}
Expand Down
8 changes: 8 additions & 0 deletions test/group-by/collections/Posts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ export const PostsCollection: CollectionConfig = {
type: 'relationship',
relationTo: categoriesSlug,
},
{
name: 'virtualTitleFromCategory',
type: 'text',
virtual: 'category.title',
admin: {
disableGroupBy: true,
},
},
{
name: 'checkbox',
type: 'checkbox',
Expand Down
14 changes: 14 additions & 0 deletions test/group-by/e2e.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -804,6 +804,20 @@ test.describe('Group By', () => {
).toBeVisible()
})

test('should hide field from groupBy options when admin.disableGroupBy is true', async () => {
await page.goto(url.list)
const { groupByContainer } = await openGroupBy(page)

const field = groupByContainer.locator('#group-by--field-select')
await field.click()

await expect(
field.locator('.rs__option', {
hasText: exactText('Virtual Title From Category'),
}),
).toBeHidden()
})

test.describe('Trash', () => {
test('should show trashed docs in trash view when group-by is active', async () => {
await page.goto(url.list)
Expand Down
2 changes: 2 additions & 0 deletions test/group-by/payload-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export interface Post {
id: string;
title?: string | null;
category?: (string | null) | Category;
virtualTitleFromCategory?: string | null;
checkbox?: boolean | null;
date?: string | null;
tab1Field?: string | null;
Expand Down Expand Up @@ -321,6 +322,7 @@ export interface PayloadMigration {
export interface PostsSelect<T extends boolean = true> {
title?: T;
category?: T;
virtualTitleFromCategory?: T;
checkbox?: T;
date?: T;
tab1Field?: T;
Expand Down