feat(ui): toggle showing only modified fields in version diff view (#10807)

## Description

As an author reviewing the versions I have for a document , I would like
to the ability to focus only on the differences I made and not see the
entire document.
[Screencast from 2024-09-05
16-38-40.webm](https://github.com/user-attachments/assets/25d44a51-bcac-47d5-a2ec-cadae4d108d4)

A checkbox was added to the Version View allowing user to decide if
he/she wants to see only modified fields or the entire documents.
#7981 - mention this feature and also in discord

- [v] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

<!-- Please delete options that are not relevant. -->

- [v] New feature (non-breaking change which adds functionality)

## Checklist:

- [  ] Existing test suite passes locally with my changes
(Actually it's stuck on S3 upload test , note related to my code)

One lat question - should we really translate text for all locales ? or
we can leave it undefined for now ?(besides english)

---------

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

Author: tsemachh

packages/next/package.json

@@ -87,6 +87,7 @@
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
     "busboy": "^1.6.0",
+    "dequal": "2.0.3",
     "file-type": "19.3.0",
     "graphql-http": "^1.22.0",
     "graphql-playground-html": "1.6.30",

packages/next/src/views/Version/Default/index.scss

@@ -46,6 +46,10 @@
       margin: 0 0 0 var(--base);
     }
 
+    &__modifiedCheckBox {
+      margin: 0 0 0 var(--base);
+    }
+
     @include mid-break {
       &__intro,
       &__header {
@@ -57,6 +61,7 @@
         gap: calc(var(--base) / 4);
       }
 
+
       &__restore {
         margin: calc(var(--base) * 0.5) 0 0 0;
       }

packages/next/src/views/Version/Default/index.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { OptionObject } from 'payload'
 
-import { Gutter, useConfig, useDocumentInfo, usePayloadAPI, useTranslation } from '@payloadcms/ui'
+import {
+  CheckboxInput,
+  Gutter,
+   useConfig, useDocumentInfo, usePayloadAPI, useTranslation } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
 import React, { useState } from 'react'
 
@@ -38,7 +41,10 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
   const [locales, setLocales] = useState<OptionObject[]>(localeOptions)
 
   const [compareValue, setCompareValue] = useState<CompareOption>()
-
+  const [modifiedOnly, setModifiedOnly] = useState(false)
+  function onToggleModifiedOnly() {
+    setModifiedOnly(!modifiedOnly)
+  }
   const {
     admin: { dateFormat },
     localization,
@@ -101,6 +107,14 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
                 versionID={versionID}
               />
             )}
+            <span className={`${baseClass}__modifiedCheckBox`}>
+              <CheckboxInput
+                checked={modifiedOnly}
+                id={'modifiedOnly'}
+                label={i18n.t('version:modifiedOnly')}
+                onToggle={onToggleModifiedOnly}
+              />
+            </span>
           </header>
         </div>
         <div className={`${baseClass}__controls`}>
@@ -126,6 +140,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             fields={(collectionConfig || globalConfig)?.fields}
             i18n={i18n}
             locales={localeValues}
+            modifiedOnly={modifiedOnly}
             version={
               globalConfig
                 ? {

packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx

@@ -22,6 +22,7 @@ export const Iterable: React.FC<DiffComponentProps> = ({
   i18n,
   locale,
   locales,
+  modifiedOnly,
   version,
 }) => {
   const versionRowCount = Array.isArray(version) ? version.length : 0
@@ -82,9 +83,9 @@ export const Iterable: React.FC<DiffComponentProps> = ({
                       fields={fields}
                       i18n={i18n}
                       locales={locales}
-                      version={versionRow}
-                    />
-                  </DiffCollapser>
+                      modifiedOnly
+                  version={versionRow}
+                /></DiffCollapser>
                 </div>
               )
             })}

packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -67,6 +67,7 @@ const Tab: React.FC<TabProps> = ({
   i18n,
   locale,
   locales,
+  modifiedOnly,
   tab,
   version,
 }) => {
@@ -94,6 +95,7 @@ const Tab: React.FC<TabProps> = ({
         fields={tab.fields}
         i18n={i18n}
         locales={locales}
+        modifiedOnly={modifiedOnly}
         version={version}
       />
     </DiffCollapser>

packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts

@@ -20,5 +20,6 @@ export type DiffComponentProps<TField extends ClientField = ClientField> = {
   readonly isRichText?: boolean
   readonly locale?: string
   readonly locales?: string[]
+  readonly modifiedOnly?: boolean
   readonly version: any
 }

packages/next/src/views/Version/RenderFieldsToDiff/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
-import { ShimmerEffect, StaggeredShimmers } from '@payloadcms/ui'
+import { ShimmerEffect } from '@payloadcms/ui'
+import { dequal } from 'dequal/lite'
 import { fieldAffectsData, fieldIsID } from 'payload/shared'
 import React, { Fragment, useEffect } from 'react'
 
@@ -20,6 +21,7 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
   fields,
   i18n,
   locales,
+  modifiedOnly,
   version,
 }) => {
   // typing it as `as typeof _diffComponents` here ensures the TField generics of DiffComponentProps are respected.
@@ -65,6 +67,10 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
                   ? JSON.stringify(comparison?.[fieldName])
                   : comparison?.[fieldName]
 
+                if (modifiedOnly && dequal(versionValue, comparisonValue)) {
+                  return null
+                }
+
                 const hasPermission =
                   fieldPermissions === true ||
                   fieldPermissions?.[fieldName] === true ||
@@ -89,6 +95,7 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
                   i18n,
                   isRichText,
                   locales,
+                  modifiedOnly,
                   version: versionValue,
                 }
 

packages/next/src/views/Version/RenderFieldsToDiff/types.ts

@@ -15,6 +15,7 @@ export type Props = {
   readonly fields: ClientField[]
   readonly i18n: I18nClient
   readonly locales: string[]
+  readonly modifiedOnly?: boolean
   readonly version: Record<string, any>
 }
 

packages/translations/src/clientKeys.ts

@@ -363,6 +363,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'version:draft',
   'version:draftSavedSuccessfully',
   'version:lastSavedAgo',
+  'version:modifiedOnly',
   'version:noFurtherVersionsFound',
   'version:noRowsFound',
   'version:noRowsSelected',

packages/translations/src/languages/ar.ts

@@ -448,6 +448,7 @@ export const arTranslations: DefaultTranslationsObject = {
     draft: 'مسودّة',
     draftSavedSuccessfully: 'تمّ حفظ المسودّة بنجاح.',
     lastSavedAgo: 'تم الحفظ آخر مرة قبل {{distance}}',
+    modifiedOnly: 'تم التعديل فقط',
     noFurtherVersionsFound: 'لم يتمّ العثور على نسخات أخرى',
     noRowsFound: 'لم يتمّ العثور على {{label}}',
     noRowsSelected: 'لم يتم اختيار {{label}}',