Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adds forceRenderAllFields admin prop to force all fields in edit view to render immediately #10478

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: adds forceRenderAllFields admin prop to force all fields in edit view to render immediately #10478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd44fe5
feat: adds forceRenderAllFields admin prop to force all fields in edi…
PatrikKozak Jan 9, 2025
82905d7
Merge branch 'main' of github.com:payloadcms/payload into feat/admin-…
PatrikKozak Jan 9, 2025
e294447
chore: simplify tests
PatrikKozak Jan 9, 2025
cdfbaa1
Merge branch 'main' of github.com:payloadcms/payload into feat/admin-…
PatrikKozak Jan 9, 2025
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
37 changes: 19 additions & 18 deletions docs/admin/collections.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,25 @@ export const MyCollection: CollectionConfig = {

The following options are available:

| Option | Description |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`group`** | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
| **`hidden`** | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing. |
| **`hooks`** | Admin-specific hooks for this Collection. [More details](../hooks/collections). |
| **`useAsTitle`** | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with `virtual: true` cannot be used as the title. |
| **`description`** | Text to display below the Collection label in the List View to give editors more information. Alternatively, you can use the `admin.components.Description` to render a React component. [More details](#custom-components). |
| **`defaultColumns`** | Array of field names that correspond to which columns to show by default in this Collection's List View. |
| **`hideAPIURL`** | Hides the "API URL" meta field while editing documents within this Collection. |
| **`enableRichTextLink`** | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
| **`meta`** | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata). |
| **`preview`** | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview). |
| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview). |
| **`components`** | Swap in your own React components to be used within this Collection. [More details](#custom-components). |
| **`listSearchableFields`** | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields). |
| **`pagination`** | Set pagination-specific options for this Collection. [More details](#pagination). |
| **`baseListFilter`** | You can define a default base filter for this collection's List view, which will be merged into any filters that the user performs. |
| Option | Description |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`group`** | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
| **`hidden`** | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing. |
| **`hooks`** | Admin-specific hooks for this Collection. [More details](../hooks/collections). |
| **`useAsTitle`** | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with `virtual: true` cannot be used as the title. |
| **`description`** | Text to display below the Collection label in the List View to give editors more information. Alternatively, you can use the `admin.components.Description` to render a React component. [More details](#custom-components). |
| **`defaultColumns`** | Array of field names that correspond to which columns to show by default in this Collection's List View. |
| **`forceRenderAllFields`** | Forces all fields in the Edit view to render immediately, regardless of scroll position. By default, this is set to `false` to improve performance, as fields are progressively rendered to balance load times. Enabling this option can make it easier to locate fields using browser search (e.g., `CMD+F`). |
| **`hideAPIURL`** | Hides the "API URL" meta field while editing documents within this Collection. |
| **`enableRichTextLink`** | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
| **`meta`** | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata). |
| **`preview`** | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview). |
| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview). |
| **`components`** | Swap in your own React components to be used within this Collection. [More details](#custom-components). |
| **`listSearchableFields`** | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields). |
| **`pagination`** | Set pagination-specific options for this Collection. [More details](#pagination). |
| **`baseListFilter`** | You can define a default base filter for this collection's List view, which will be merged into any filters that the user performs. |

### Custom Components

Expand Down
19 changes: 10 additions & 9 deletions docs/admin/globals.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,16 @@ export const MyGlobal: GlobalConfig = {

The following options are available:

| Option | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **`group`** | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
| **`hidden`** | Set to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing. |
| **`components`** | Swap in your own React components to be used within this Global. [More details](#custom-components). |
| **`preview`** | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](#preview). |
| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview). |
| **`hideAPIURL`** | Hides the "API URL" meta field while editing documents within this collection. |
| **`meta`** | Page metadata overrides to apply to this Global within the Admin Panel. [More details](./metadata). |
| Option | Description |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`group`** | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
| **`hidden`** | Set to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing. |
| **`components`** | Swap in your own React components to be used within this Global. [More details](#custom-components). |
| **`preview`** | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](#preview). |
| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview). |
| **`hideAPIURL`** | Hides the "API URL" meta field while editing documents within this collection. |
| **`meta`** | Page metadata overrides to apply to this Global within the Admin Panel. [More details](./metadata). |
| **`forceRenderAllFields`** | Forces all fields in the Edit view to render immediately, regardless of scroll position. By default, this is set to `false` to improve performance, as fields are progressively rendered to balance load times. Enabling this option can make it easier to locate fields using browser search (e.g., `CMD+F`). |

### Custom Components

Expand Down
1 change: 1 addition & 0 deletions packages/next/src/views/LivePreview/index.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,7 @@ const PreviewView: React.FC<Props> = ({
Description={Description}
docPermissions={docPermissions}
fields={fields}
forceRenderAllFields={docConfig?.admin?.forceRenderAllFields}
forceSidebarWrap
readOnly={isReadOnlyForIncomingUser || !hasSavePermission}
schemaPathSegments={[collectionSlug || globalSlug]}
Expand Down
2 changes: 1 addition & 1 deletion packages/payload/src/admin/fields/Array.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { MarkOptional } from 'ts-essentials'

import type { ArrayField, ArrayFieldClient, ClientField } from '../../fields/config/types.js'
import type { ArrayField, ArrayFieldClient } from '../../fields/config/types.js'
import type { ArrayFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
Expand Down
5 changes: 5 additions & 0 deletions packages/payload/src/collections/config/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,11 @@ export type CollectionAdminOptions = {
description?: EntityDescription
enableRichTextLink?: boolean
enableRichTextRelationship?: boolean
/**
* Forces all fields in the Edit view to render immediately, regardless of scroll position
* @default false
*/
forceRenderAllFields?: boolean
/**
* Specify a navigational group for collections in the admin sidebar.
* - Provide a string to place the entity in a custom group.
Expand Down
5 changes: 5 additions & 0 deletions packages/payload/src/globals/config/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@ export type GlobalAdminOptions = {
* Custom description for collection
*/
description?: EntityDescription
/**
* Forces all fields in the Edit view to render immediately, regardless of scroll position
* @default false
*/
forceRenderAllFields?: boolean
/**
* Specify a navigational group for globals in the admin sidebar.
* - Provide a string to place the entity in a custom group.
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/elements/BulkUpload/EditForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export function EditForm({ submitted }: EditFormProps) {
}
docPermissions={docPermissions}
fields={collectionConfig.fields}
forceRenderAllFields={collectionConfig?.admin?.forceRenderAllFields}
schemaPathSegments={[collectionConfig.slug]}
/>
<ReportAllErrors />
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/src/elements/DocumentFields/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type Args = {
readonly Description?: React.ReactNode
readonly docPermissions: SanitizedDocumentPermissions
readonly fields: ClientField[]
readonly forceRenderAllFields?: boolean
readonly forceSidebarWrap?: boolean
readonly readOnly?: boolean
readonly schemaPathSegments: string[]
Expand All @@ -28,6 +29,7 @@ export const DocumentFields: React.FC<Args> = ({
Description,
docPermissions,
fields,
forceRenderAllFields,
forceSidebarWrap,
readOnly: readOnlyProp,
schemaPathSegments,
Expand Down Expand Up @@ -79,7 +81,7 @@ export const DocumentFields: React.FC<Args> = ({
<RenderFields
className={`${baseClass}__fields`}
fields={mainFields}
forceRender
forceRenderAllFields={forceRenderAllFields}
parentIndexPath=""
parentPath=""
parentSchemaPath={schemaPathSegments.join('.')}
Expand All @@ -95,7 +97,7 @@ export const DocumentFields: React.FC<Args> = ({
<div className={`${baseClass}__sidebar-fields`}>
<RenderFields
fields={sidebarFields}
forceRender
forceRenderAllFields={forceRenderAllFields}
parentIndexPath=""
parentPath=""
parentSchemaPath={schemaPathSegments.join('.')}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/fields/Array/ArrayRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
duplicateRow,
errorCount,
fields,
forceRender = false,
forceRender,
hasMaxRows,
isDragging,
isLoading: isLoadingFromProps,
Expand Down
Loading
Loading