feat: show fields inside groups as separate columns in the list view (#7355)

## Description

Group fields are shown as one column, this PR changes this so that the
individual field is now shown separately.

Before change:
<img width="1227" alt="before change"
src="https://github.com/user-attachments/assets/dfae58fd-8ad2-4329-84fd-ed1d4eb20854">

After change:
<img width="1229" alt="after change"
src="https://github.com/user-attachments/assets/d4fd78bb-c474-436e-a0f5-cac4638b91a4">

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

## Type of change

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

## Checklist:

- [X] I have added tests that prove my fix is effective or that my
feature works
- [X] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

---------

Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>

Author: andershermansen

packages/next/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts

@@ -1,6 +1,6 @@
 import type { ArrayFieldClient, BlocksFieldClient, ClientConfig, ClientField } from 'payload'
 
-import { fieldShouldBeLocalized } from 'payload/shared'
+import { fieldShouldBeLocalized, groupHasName } from 'payload/shared'
 
 import { fieldHasChanges } from './fieldHasChanges.js'
 import { getFieldsForRowComparison } from './getFieldsForRowComparison.js'
@@ -114,25 +114,37 @@ export function countChangedFields({
 
       // Fields that have nested fields and nest their fields' data.
       case 'group': {
-        if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) {
-          locales.forEach((locale) => {
+        if (groupHasName(field)) {
+          if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) {
+            locales.forEach((locale) => {
+              count += countChangedFields({
+                comparison: comparison?.[field.name]?.[locale],
+                config,
+                fields: field.fields,
+                locales,
+                parentIsLocalized: parentIsLocalized || field.localized,
+                version: version?.[field.name]?.[locale],
+              })
+            })
+          } else {
             count += countChangedFields({
-              comparison: comparison?.[field.name]?.[locale],
+              comparison: comparison?.[field.name],
               config,
               fields: field.fields,
               locales,
               parentIsLocalized: parentIsLocalized || field.localized,
-              version: version?.[field.name]?.[locale],
+              version: version?.[field.name],
             })
-          })
+          }
         } else {
+          // Unnamed group field: data is NOT nested under `field.name`
           count += countChangedFields({
-            comparison: comparison?.[field.name],
+            comparison,
             config,
             fields: field.fields,
             locales,
             parentIsLocalized: parentIsLocalized || field.localized,
-            version: version?.[field.name],
+            version,
           })
         }
         break

packages/payload/src/exports/shared.ts

@@ -29,6 +29,7 @@ export {
   fieldIsVirtual,
   fieldShouldBeLocalized,
   fieldSupportsMany,
+  groupHasName,
   optionIsObject,
   optionIsValue,
   optionsAreObjects,

packages/payload/src/fields/config/types.ts

@@ -770,7 +770,7 @@ export type NamedGroupFieldClient = {
 export type UnnamedGroupFieldClient = {
   admin?: AdminClient & Pick<UnnamedGroupField['admin'], 'hideGutter'>
   fields: ClientField[]
-} & Omit<FieldBaseClient, 'required'> &
+} & Omit<FieldBaseClient, 'name' | 'required'> &
   Pick<UnnamedGroupField, 'label' | 'type'>
 
 export type GroupFieldClient = NamedGroupFieldClient | UnnamedGroupFieldClient
@@ -1960,6 +1960,12 @@ export function tabHasName<TField extends ClientTab | Tab>(tab: TField): tab is
   return 'name' in tab
 }
 
+export function groupHasName(
+  group: Partial<NamedGroupFieldClient>,
+): group is NamedGroupFieldClient {
+  return 'name' in group
+}
+
 /**
  * Check if a field has localized: true set. This does not check if a field *should*
  * be localized. To check if a field should be localized, use `fieldShouldBeLocalized`.