Skip to content

Commit 9ad5c44

Browse files
franciscolourencofranciscolourenco
committed
feat(ui): hidding fields in version view with admin.hiddenInVersionView
1 parent f363aa2 commit 9ad5c44

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
@@ -394,21 +394,22 @@ export const CollectionConfig: CollectionConfig = {
394394

395395
The following options are available:
396396

397-
| Option | Description |
398-
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
399-
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](#conditional-logic). |
400-
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. |
401-
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](#description). |
402-
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
403-
| **`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. |
404-
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
405-
| **`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. |
406-
| **`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. |
407-
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
408-
| **`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. |
409-
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
410-
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
411-
| **`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. |
397+
| Option | Description |
398+
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
399+
| **`condition`** | Programmatically show / hide fields based on other fields. [More details](#conditional-logic). |
400+
| **`components`** | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. |
401+
| **`description`** | Helper text to display alongside the field to provide more information for the editor. [More details](#description). |
402+
| **`position`** | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
403+
| **`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. |
404+
| **`style`** | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field. |
405+
| **`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. |
406+
| **`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. |
407+
| **`disabled`** | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely. |
408+
| **`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. |
409+
| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector. |
410+
| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options. |
411+
| **`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. |
412+
| **`hiddenInVersionView`** | Set `hiddenInVersionView` to `true` to prevent fields from appearing in the version view. |
412413

413414
## Field Descriptions
414415

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
@@ -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
@@ -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)