feat(payload): add field admin option: admin.hiddenInVersionView

This hides a field from the version view where different versions of the
same document can be compared.

Author: franciscolourenco

Diff for: docs/fields/overview.mdx

@@ -173,21 +173,22 @@ Example:
 
 In addition to each field's base configuration, you can define specific traits and properties for fields that only have effect on how they are rendered in the Admin panel. The following properties are available for all fields within the `admin` property:
 
-| Option              | Description                                                                                                                                                                                                                      |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `condition`         | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
-| `components`        | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
-| `description`       | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
-| `position`          | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
-| `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. |
-| `style`             | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
-| `className`         | Attach a CSS class name to the root DOM element of a field.                                                                                                                                                                      |
-| `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.                                                            |
-| `disabled`          | If a field is `disabled`, it is completely omitted from the Admin panel.                                                                                                                                                         |
-| `disableBulkEdit`   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
-| `disableListColumn` | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
-| `disableListFilter` | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
-| `hidden`            | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
+| Option                | Description                                                                                                                                                                                                                      |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `condition`           | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
+| `components`          | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
+| `description`         | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
+| `position`            | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
+| `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. |
+| `style`               | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
+| `className`           | Attach a CSS class name to the root DOM element of a field.                                                                                                                                                                      |
+| `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.                                                            |
+| `disabled`            | If a field is `disabled`, it is completely omitted from the Admin panel.                                                                                                                                                         |
+| `disableBulkEdit`     | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
+| `disableListColumn`   | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
+| `disableListFilter`   | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
+| `hidden`              | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
+| `hiddenInVersionView` | Set `hiddenInVersionView` to `true` to prevent fields from appearing in the version view when comparing multiple versions of a document.                                                                                                       |
 
 ### Custom components
 

Diff for: packages/payload/src/admin/components/views/Version/RenderFieldsToDiff/index.tsx

@@ -24,6 +24,9 @@ const RenderFieldsToDiff: React.FC<Props> = ({
       // Don't render hidden fields
       if ('hidden' in field && field.hidden) return null
 
+      // Don't render fields with admin.hiddenInVersionView
+      if ('hiddenInVersionView' in field.admin && field.admin.hiddenInVersionView) return null
+
       const Component = fieldComponents[field.type]
 
       const isRichText = field.type === 'richText'

Diff for: packages/payload/src/fields/config/schema.ts

@@ -23,6 +23,7 @@ export const baseAdminFields = joi.object().keys({
   disableListFilter: joi.boolean().default(false),
   disabled: joi.boolean().default(false),
   hidden: joi.boolean().default(false),
+  hiddenInVersionView: joi.boolean().default(false),
   initCollapsed: joi.boolean().default(false),
   position: joi.string().valid('sidebar'),
   readOnly: joi.boolean().default(false),

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

@@ -117,6 +117,7 @@ type Admin = {
   disableListFilter?: boolean
   disabled?: boolean
   hidden?: boolean // it could make sense to rename this option to hiddenInEditView
+  hiddenInVersionView?: boolean
   position?: 'sidebar'
   readOnly?: boolean
   style?: CSSProperties

Diff for: test/fields/collections/Text/index.ts

@@ -162,6 +162,13 @@ const TextFields: CollectionConfig = {
         hidden: true,
       },
     },
+    {
+      name: 'hiddenInVersionView',
+      type: 'text',
+      admin: {
+        hiddenInVersionView: true,
+      },
+    },
     {
       name: 'disableListColumnText',
       type: 'text',

Diff for: test/fields/e2e.spec.ts

@@ -287,6 +287,34 @@ describe('fields', () => {
         await expect(page.locator('#field-adminHidden')).toBeHidden()
       })
     })
+
+    describe('admin.hiddenInVersionView', () => {
+      test('should be hidden in the version view', async () => {
+        const doc = await payload.create({
+          collection: textFieldsSlug,
+          data: textDoc,
+        })
+        const versions = await payload.findVersions({
+          collection: textFieldsSlug,
+          where: { parent: { equals: doc.id } },
+          limit: 1,
+        })
+
+        await page.goto(url.version(doc.id, versions.docs[0].id))
+
+        await expect(
+          page.locator('.field-diff-label', {
+            hasText: exactText('Text'),
+          }),
+        ).toBeVisible()
+
+        await expect(
+          page.locator('.field-diff-label', {
+            hasText: exactText('Hidden In Version View'),
+          }),
+        ).toBeHidden()
+      })
+    })
   })
 
   describe('number', () => {