Skip to content

Commit 6ad1126

Browse files
franciscolourencofranciscolourenco
committed
feat(ui): hidding fields in version view with admin.hiddenInVersionView
1 parent 8ffc25a commit 6ad1126

File tree

4 files changed

+42
-15
lines changed

4 files changed

+42
-15
lines changed

Diff for: ‎docs/admin/fields.mdx

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

4141
The following options are available:
4242

43-
| Option | Description |
44-
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45-
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](../admin/fields#conditional-logic). |
46-
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. [More details](../admin/fields). |
47-
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](../admin/fields#description). |
48-
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
49-
| **`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. |
50-
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
51-
| **`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. |
52-
| **`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. |
53-
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
54-
| **`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. |
55-
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
56-
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
57-
| **`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. |
43+
| Option | Description |
44+
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45+
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](../admin/fields#conditional-logic). |
46+
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. [More details](../admin/fields). |
47+
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](../admin/fields#description). |
48+
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
49+
| **`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. |
50+
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
51+
| **`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. |
52+
| **`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. |
53+
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
54+
| **`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. |
55+
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
56+
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
57+
| **`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 in the **edit view**. |
58+
| **`hiddenInVersionView`** | Set `hiddenInVersionView` to `true` to prevent fields from appearing in the version view. |
5859

5960
## Field Descriptions
6061

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

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

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

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

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

+10
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,11 @@ type Admin = {
299299
*/
300300
disableListFilter?: boolean
301301
hidden?: boolean
302+
/**
303+
* Shows / hides fields in the version diff view.
304+
* @type boolean
305+
*/
306+
hiddenInVersionView?: boolean
302307
position?: 'sidebar'
303308
readOnly?: boolean
304309
style?: CSSProperties
@@ -323,6 +328,11 @@ export type AdminClient = {
323328
*/
324329
disableListFilter?: boolean
325330
hidden?: boolean
331+
/**
332+
* Shows / hides fields in the version diff view.
333+
* @type boolean
334+
*/
335+
hiddenInVersionView?: boolean
326336
position?: 'sidebar'
327337
readOnly?: boolean
328338
style?: { '--field-width'?: CSSProperties['width'] } & CSSProperties

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

+11
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,17 @@ describe('Versions', () => {
887887
})
888888
await expect(adminDisabledField).toBeHidden()
889889
})
890+
891+
test('should not render fields with admin.hiddenInVersionView: true ', async () => {
892+
await openVersionsDiffView(postID, versionID)
893+
await expect(page.locator('.render-field-diffs').first()).toBeVisible()
894+
895+
// Fields with admin.hiddenInVersionView should be hidden in the version view
896+
const adminHiddenInVersionViewView = page.getByText('Admin Disable List View Field', {
897+
exact: true,
898+
})
899+
await expect(adminHiddenInVersionViewView).toBeHidden()
900+
})
890901
})
891902
})
892903
})

0 commit comments

Comments
 (0)