tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: server component readonly state issues with document locking (#13878)

Browse Source 
### What?

Fixed two bugs with readonly state for server-rendered components (like
richtext fields and custom server fields):

1. Server components remained readonly after a user took over a locked
document
2. Server components were not readonly when viewing in "read only" mode
until page refresh

### Why?

Both issues stemmed from server-rendered components using their initial
readonly state that was baked in during server-side rendering, rather
than respecting dynamic readonly state changes:

1. **Takeover bug**: When a user took over a locked document,
client-side readonly state was updated but server components continued
using their initial readonly state because the server-side state wasn't
refreshed properly.

2. **Read-only view bug**: When entering "read only" mode, server
components weren't immediately updated to reflect the new readonly state
without a page refresh.

The root cause was that server-side `buildFormState` was called with
`readOnly: isLocked` during initial render, and individual field
components used this initial state rather than respecting dynamic
document-level readonly changes.

### How?

1. **Fixed race condition in `handleTakeOver`**: Made the function async
and await the `updateDocumentEditor` call before calling
`clearRouteCache()` to ensure the database is updated before page reload

2. **Improved editor comparison in `getIsLocked`**: Used `extractID()`
helper to properly compare editor IDs when the editor might be a
reference object

3. **Ensured cache clearing for all takeover scenarios**: Call
`clearRouteCache()` for both DocumentLocked modal and DocumentControls
takeovers to refresh server-side state

4. **Added Form key to force re-render**: Added `key={isLocked}` to the
Form component so it re-renders when the lock state changes, ensuring
all child components get fresh readonly state for both takeover and
read-only view scenarios


---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211373627247885
This commit is contained in:
Patrik
2025-09-24 15:11:10 -04:00
committed by GitHub
parent 7f35213c73
commit 512a8fa19f
10 changed files with 387 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
test/locked-documents/collections/Posts/fields/CustomTextFieldServer.tsx Normal file
View File

@@ -0,0 +1,22 @@
import type { TextFieldServerComponent } from 'payload'
import type React from 'react'
import { TextField } from '@payloadcms/ui'
export const CustomTextFieldServer: TextFieldServerComponent = ({
clientField,
path,
permissions,
readOnly,
schemaPath,
}) => {
return (
<TextField
field={clientField}
path={path}
permissions={permissions}
readOnly={readOnly}
schemaPath={schemaPath}
/>
)
}

25
test/locked-documents/collections/ServerComponents/index.ts Normal file
View File

@@ -0,0 +1,25 @@
import type { CollectionConfig } from 'payload'
export const serverComponentsSlug = 'server-components'
export const ServerComponentsCollection: CollectionConfig = {
slug: serverComponentsSlug,
admin: {
useAsTitle: 'customTextServer',
},
fields: [
{
name: 'customTextServer',
type: 'text',
admin: {
components: {
Field: '/collections/Posts/fields/CustomTextFieldServer.tsx#CustomTextFieldServer',
},
},
},
{
name: 'richText',
type: 'richText',
},
],
}

9
test/locked-documents/config.ts
View File

@@ -4,6 +4,7 @@ import path from 'path'
import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
import { PagesCollection } from './collections/Pages/index.js'
import { PostsCollection } from './collections/Posts/index.js'
import { ServerComponentsCollection } from './collections/ServerComponents/index.js'
import { TestsCollection } from './collections/Tests/index.js'
import { Users } from './collections/Users/index.js'
import { AdminGlobal } from './globals/Admin/index.js'
@@ -19,7 +20,13 @@ export default buildConfigWithDefaults({
baseDir: path.resolve(dirname),
},
},
collections: [PagesCollection, PostsCollection, TestsCollection, Users],
collections: [
PagesCollection,
PostsCollection,
ServerComponentsCollection,
TestsCollection,
Users,
],
globals: [AdminGlobal, MenuGlobal],
onInit: async (payload) => {
if (process.env.SEED_IN_CONFIG_ONINIT !== 'false') {

225
test/locked-documents/e2e.spec.ts
View File

@@ -13,6 +13,7 @@ import type {
Page as PageType,
PayloadLockedDocument,
Post,
ServerComponent,
Test,
User,
} from './payload-types.js'
@@ -25,7 +26,7 @@ import {
} from '../helpers.js'
import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
@@ -38,6 +39,7 @@ let page: Page
let globalUrl: AdminUrlUtil
let postsUrl: AdminUrlUtil
let pagesUrl: AdminUrlUtil
let serverComponentsUrl: AdminUrlUtil
let testsUrl: AdminUrlUtil
let payload: PayloadTestSDK<Config>
let serverURL: string
@@ -50,6 +52,7 @@ describe('Locked Documents', () => {
globalUrl = new AdminUrlUtil(serverURL, 'menu')
postsUrl = new AdminUrlUtil(serverURL, 'posts')
pagesUrl = new AdminUrlUtil(serverURL, 'pages')
serverComponentsUrl = new AdminUrlUtil(serverURL, 'server-components')
testsUrl = new AdminUrlUtil(serverURL, 'tests')
const context = await browser.newContext()
@@ -633,11 +636,19 @@ describe('Locked Documents', () => {
let expiredPostDoc: Post
let expiredPostLockedDoc: PayloadLockedDocument
let serverComponentDoc: ServerComponent
let lockedServerComponentDoc: PayloadLockedDocument
beforeAll(async () => {
postDoc = await createPostDoc({
text: 'new post doc',
})
serverComponentDoc = await payload.create({
collection: 'server-components',
data: {},
})
expiredTestDoc = await createTestDoc({
text: 'expired doc',
})
@@ -701,6 +712,21 @@ describe('Locked Documents', () => {
updatedAt: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
},
})
lockedServerComponentDoc = await payload.create({
collection: lockedDocumentCollection,
data: {
document: {
relationTo: 'server-components',
value: serverComponentDoc.id,
},
globalSlug: undefined,
user: {
relationTo: 'users',
value: user2.id,
},
},
})
})
afterAll(async () => {
@@ -714,6 +740,11 @@ describe('Locked Documents', () => {
id: lockedDoc.id,
})
await payload.delete({
collection: lockedDocumentCollection,
id: lockedServerComponentDoc.id,
})
await payload.delete({
collection: lockedDocumentCollection,
id: expiredTestLockedDoc.id,
@@ -724,6 +755,11 @@ describe('Locked Documents', () => {
id: postDoc.id,
})
await payload.delete({
collection: 'server-components',
id: serverComponentDoc.id,
})
await payload.delete({
collection: 'tests',
id: expiredTestDoc.id,
@@ -814,23 +850,46 @@ describe('Locked Documents', () => {
await expect(richTextRoot).toHaveAttribute('contenteditable', 'false')
await expect(richTextRoot).toHaveAttribute('aria-readonly', 'true')
// wrapper has read-only class (nice-to-have)
// wrapper has read-only class
await expect(page.locator('.rich-text-lexical').first()).toHaveClass(
/rich-text-lexical--read-only/,
)
})
test('should show server rendered fields in read-only if incoming user views locked doc in read-only mode', async () => {
await page.goto(serverComponentsUrl.edit(serverComponentDoc.id))
const modalContainer = page.locator('.payload__modal-container')
await expect(modalContainer).toBeVisible()
// Click read-only button to view doc in read-only mode
await page.locator('#document-locked-view-read-only').click()
// Wait for the modal to disappear
await expect(modalContainer).toBeHidden()
// fields should be readOnly / disabled
await expect(page.locator('#field-customTextServer')).toBeDisabled()
})
})
describe('document take over - modal - incoming user', () => {
let postDoc: Post
let user2: User
let lockedDoc: PayloadLockedDocument
let serverComponentDoc: ServerComponent
let lockedServerComponentsDoc: PayloadLockedDocument
beforeAll(async () => {
postDoc = await createPostDoc({
text: 'hello',
})
serverComponentDoc = await payload.create({
collection: 'server-components',
data: {},
})
user2 = await payload.create({
collection: 'users',
data: {
@@ -854,6 +913,21 @@ describe('Locked Documents', () => {
},
},
})
lockedServerComponentsDoc = await payload.create({
collection: lockedDocumentCollection,
data: {
document: {
relationTo: 'server-components',
value: serverComponentDoc.id,
},
globalSlug: undefined,
user: {
relationTo: 'users',
value: user2.id,
},
},
})
})
afterAll(async () => {
@@ -871,6 +945,21 @@ describe('Locked Documents', () => {
collection: 'posts',
id: postDoc.id,
})
await payload.delete({
collection: lockedDocumentCollection,
id: lockedDoc.id,
})
await payload.delete({
collection: lockedDocumentCollection,
id: lockedServerComponentsDoc.id,
})
await payload.delete({
collection: 'server-components',
id: serverComponentDoc.id,
})
})
test('should update user data if incoming user takes over from document modal', async () => {
@@ -908,18 +997,41 @@ describe('Locked Documents', () => {
expect(userEmail).toEqual('dev@payloadcms.com')
})
test('should render server rendered fields as editable on take over from document modal', async () => {
await page.goto(serverComponentsUrl.edit(serverComponentDoc.id))
const modalContainer = page.locator('.payload__modal-container')
await expect(modalContainer).toBeVisible()
// Click take-over button to take over editing rights of locked doc
await page.locator('#document-locked-take-over').click()
// Wait for the modal to disappear
await expect(modalContainer).toBeHidden()
// server fields should be enabled
await expect(page.locator('#field-customTextServer')).toBeEnabled()
})
})
describe('document take over - doc - incoming user', () => {
let postDoc: Post
let user2: User
let lockedDoc: PayloadLockedDocument
let serverComponentsDoc: ServerComponent
let lockedServerComponentsDoc: PayloadLockedDocument
beforeAll(async () => {
postDoc = await createPostDoc({
text: 'hello',
})
serverComponentsDoc = await payload.create({
collection: 'server-components',
data: {},
})
user2 = await payload.create({
collection: 'users',
data: {
@@ -943,6 +1055,21 @@ describe('Locked Documents', () => {
},
},
})
lockedServerComponentsDoc = await payload.create({
collection: lockedDocumentCollection,
data: {
document: {
relationTo: 'server-components',
value: serverComponentsDoc.id,
},
globalSlug: undefined,
user: {
relationTo: 'users',
value: user2.id,
},
},
})
})
afterAll(async () => {
@@ -956,10 +1083,20 @@ describe('Locked Documents', () => {
id: lockedDoc.id,
})
await payload.delete({
collection: lockedDocumentCollection,
id: lockedServerComponentsDoc.id,
})
await payload.delete({
collection: 'posts',
id: postDoc.id,
})
await payload.delete({
collection: 'server-components',
id: serverComponentsDoc.id,
})
})
test('should update user data if incoming user takes over from within document', async () => {
@@ -999,10 +1136,33 @@ describe('Locked Documents', () => {
expect(userEmail).toEqual('dev@payloadcms.com')
})
test('should render server rendered fields as editable after incoming user takes over from within document', async () => {
await page.goto(serverComponentsUrl.edit(serverComponentsDoc.id))
const modalContainer = page.locator('.payload__modal-container')
await expect(modalContainer).toBeVisible()
// Click read-only button to view doc in read-only mode
await page.locator('#document-locked-view-read-only').click()
// Wait for the modal to disappear
await expect(modalContainer).toBeHidden()
await expect(page.locator('#field-customTextServer')).toBeDisabled()
await page.locator('#take-over').click()
// eslint-disable-next-line payload/no-wait-function
await wait(500)
await expect(page.locator('#field-customTextServer')).toBeEnabled()
})
})
describe('document locking - previous user', () => {
let postDoc: Post
let serverComponentsDoc: ServerComponent
let user2: User
beforeAll(async () => {
@@ -1010,6 +1170,11 @@ describe('Locked Documents', () => {
text: 'hello',
})
serverComponentsDoc = await payload.create({
collection: 'server-components',
data: {},
})
user2 = await payload.create({
collection: 'users',
data: {
@@ -1030,6 +1195,11 @@ describe('Locked Documents', () => {
collection: 'posts',
id: postDoc.id,
})
await payload.delete({
collection: 'server-components',
id: serverComponentsDoc.id,
})
})
test('should show Document Take Over modal for previous user if taken over', async () => {
await page.goto(postsUrl.edit(postDoc.id))
@@ -1190,6 +1360,57 @@ describe('Locked Documents', () => {
// fields should be readOnly / disabled
await expect(page.locator('#field-text')).toBeDisabled()
})
test('should show server rendered fields in read-only mode if previous user views doc in read-only mode', async () => {
await page.goto(serverComponentsUrl.edit(serverComponentsDoc.id))
const textInput = page.locator('#field-customTextServer')
await textInput.fill('hello world')
// eslint-disable-next-line payload/no-wait-function
await wait(500)
// Retrieve document id from payload locks collection
const lockedDoc = await payload.find({
collection: lockedDocumentCollection,
limit: 1,
pagination: false,
where: {
'document.value': { equals: serverComponentsDoc.id },
},
})
// eslint-disable-next-line payload/no-wait-function
await wait(500)
// Update payload-locks collection document with different user
await payload.update({
id: lockedDoc.docs[0]?.id as number | string,
collection: lockedDocumentCollection,
data: {
user: {
relationTo: 'users',
value: user2.id,
},
},
})
// eslint-disable-next-line payload/no-wait-function
await wait(500)
// Try to edit the document again as the "old" user
await textInput.fill('goodbye')
// Wait for Take Over modal to appear
const modalContainer = page.locator('.payload__modal-container')
await expect(modalContainer).toBeVisible()
// Click read-only button to view doc in read-only mode
await page.locator('#document-take-over-view-read-only').click()
// fields should be readOnly / disabled
await expect(page.locator('#field-customTextServer')).toBeDisabled()
})
})
describe('dashboard - globals', () => {

41
test/locked-documents/payload-types.ts
View File

@@ -69,6 +69,7 @@ export interface Config {
collections: {
pages: Page;
posts: Post;
'server-components': ServerComponent;
tests: Test;
users: User;
'payload-locked-documents': PayloadLockedDocument;
@@ -79,6 +80,7 @@ export interface Config {
collectionsSelect: {
pages: PagesSelect<false> | PagesSelect<true>;
posts: PostsSelect<false> | PostsSelect<true>;
'server-components': ServerComponentsSelect<false> | ServerComponentsSelect<true>;
tests: TestsSelect<false> | TestsSelect<true>;
users: UsersSelect<false> | UsersSelect<true>;
'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
@@ -161,6 +163,31 @@ export interface Post {
createdAt: string;
_status?: ('draft' | 'published') | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "server-components".
*/
export interface ServerComponent {
id: string;
customTextServer?: string | null;
richText?: {
root: {
type: string;
children: {
type: string;
version: number;
[k: string]: unknown;
}[];
direction: ('ltr' | 'rtl') | null;
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
indent: number;
version: number;
};
[k: string]: unknown;
} | null;
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "tests".
@@ -213,6 +240,10 @@ export interface PayloadLockedDocument {
relationTo: 'posts';
value: string | Post;
} | null)
| ({
relationTo: 'server-components';
value: string | ServerComponent;
} | null)
| ({
relationTo: 'tests';
value: string | Test;
@@ -285,6 +316,16 @@ export interface PostsSelect<T extends boolean = true> {
createdAt?: T;
_status?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "server-components_select".
*/
export interface ServerComponentsSelect<T extends boolean = true> {
customTextServer?: T;
richText?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "tests_select".