Skip to content

Commit 48f493b

Browse files
franciscolourencofranciscolourenco
committed
feat(ui): hidding fields in version view with admin.hiddenInVersionView
1 parent 2f82ead commit 48f493b

File tree

4 files changed

+42
-15
lines changed

4 files changed

+42
-15
lines changed

Diff for: ‎docs/fields/overview.mdx

+16-15
Original file line numberDiff line numberDiff line change
@@ -430,21 +430,22 @@ export const CollectionConfig: CollectionConfig = {
430430

431431
The following options are available:
432432

433-
| Option | Description |
434-
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
435-
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](#conditional-logic). |
436-
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. |
437-
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](#description). |
438-
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
439-
| **`width`** | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
440-
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
441-
| **`className`** | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field. |
442-
| **`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. |
443-
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
444-
| **`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. |
445-
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
446-
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
447-
| **`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. |
433+
| Option | Description |
434+
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
435+
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](#conditional-logic). |
436+
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. |
437+
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](#description). |
438+
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
439+
| **`width`** | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
440+
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
441+
| **`className`** | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field. |
442+
| **`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. |
443+
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
444+
| **`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. |
445+
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
446+
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
447+
| **`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. |
448+
| **`hiddenInVersionView`** | Set `hiddenInVersionView` to `true` to prevent fields from appearing in the version view. |
448449

449450
### Field Descriptions
450451

Diff for: ‎packages/next/src/views/Version/RenderFieldsToDiff/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
4242
return null
4343
}
4444

45+
// Don't render fields with admin.hiddenInVersionView
46+
if (field.admin.hiddenInVersionView) {
47+
return null
48+
}
49+
4550
const Component = diffComponents[field.type]
4651

4752
const isRichText = field.type === 'richText'

Diff for: ‎packages/payload/src/fields/config/types.ts

+10
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,11 @@ type Admin = {
301301
*/
302302
disableListFilter?: boolean
303303
hidden?: boolean
304+
/**
305+
* Shows / hides fields in the version diff view.
306+
* @type boolean
307+
*/
308+
hiddenInVersionView?: boolean
304309
position?: 'sidebar'
305310
readOnly?: boolean
306311
style?: CSSProperties
@@ -325,6 +330,11 @@ export type AdminClient = {
325330
*/
326331
disableListFilter?: boolean
327332
hidden?: boolean
333+
/**
334+
* Shows / hides fields in the version diff view.
335+
* @type boolean
336+
*/
337+
hiddenInVersionView?: boolean
328338
position?: 'sidebar'
329339
readOnly?: boolean
330340
style?: { '--field-width'?: CSSProperties['width'] } & CSSProperties

Diff for: ‎test/versions/e2e.spec.ts

+11
Original file line numberDiff line numberDiff line change
@@ -944,6 +944,17 @@ describe('Versions', () => {
944944
})
945945
await expect(adminDisabledField).toBeHidden()
946946
})
947+
948+
test('should not render fields with admin.hiddenInVersionView: true ', async () => {
949+
await openVersionsDiffView(postID, versionID)
950+
await expect(page.locator('.render-field-diffs').first()).toBeVisible()
951+
952+
// Fields with admin.hiddenInVersionView should be hidden in the version view
953+
const adminHiddenInVersionViewView = page.getByText('Admin Disable List View Field', {
954+
exact: true,
955+
})
956+
await expect(adminHiddenInVersionViewView).toBeHidden()
957+
})
947958
})
948959
})
949960
})

0 commit comments

Comments
 (0)