fix(next): group by dates with null values (#13381)

When grouping by a date field and its value is null, the list view
crashes.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210979856538208

Author: jacobsfletch

packages/next/src/views/List/handleGroupBy.ts

@@ -143,7 +143,7 @@ export const handleGroupBy = async ({
         },
       })
 
-      let heading = valueOrRelationshipID || req.i18n.t('general:noValue')
+      let heading = valueOrRelationshipID
 
       if (
         groupByField?.type === 'relationship' &&
@@ -155,9 +155,9 @@ export const handleGroupBy = async ({
           valueOrRelationshipID
       }
 
-      if (groupByField.type === 'date') {
+      if (groupByField.type === 'date' && valueOrRelationshipID) {
         heading = formatDate({
-          date: String(heading),
+          date: String(valueOrRelationshipID),
           i18n: req.i18n,
           pattern: clientConfig.admin.dateFormat,
         })
@@ -174,7 +174,7 @@ export const handleGroupBy = async ({
           enableRowSelections,
           groupByFieldPath,
           groupByValue: valueOrRelationshipID,
-          heading,
+          heading: heading || req.i18n.t('general:noValue'),
           i18n: req.i18n,
           key: `table-${valueOrRelationshipID}`,
           orderableFieldName: collectionConfig.orderable === true ? '_order' : undefined,

test/group-by/collections/Posts/index.ts

@@ -1,7 +1,5 @@
 import type { CollectionConfig } from 'payload'
 
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
-
 import { categoriesSlug } from '../Categories/index.js'
 
 export const postsSlug = 'posts'
@@ -25,11 +23,8 @@ export const PostsCollection: CollectionConfig = {
       relationTo: categoriesSlug,
     },
     {
-      name: 'content',
-      type: 'richText',
-      editor: lexicalEditor({
-        features: ({ defaultFeatures }) => [...defaultFeatures],
-      }),
+      name: 'date',
+      type: 'date',
     },
     {
       type: 'tabs',

test/group-by/e2e.spec.ts

@@ -245,6 +245,26 @@ test.describe('Group By', () => {
     ).toBeVisible()
   })
 
+  test('should group by date fields even when their values are null', async () => {
+    await payload.create({
+      collection: postsSlug,
+      data: {
+        title: 'My Post',
+        date: null,
+      },
+    })
+
+    await page.goto(url.list)
+
+    await addGroupBy(page, { fieldLabel: 'Date', fieldPath: 'date' })
+
+    await expect(page.locator('.table-wrap')).toHaveCount(1)
+
+    await expect(
+      page.locator('.group-by-header__heading', { hasText: exactText('No value') }),
+    ).toBeVisible()
+  })
+
   test('should sort the group-by field globally', async () => {
     await page.goto(url.list)
 

test/group-by/payload-types.ts

@@ -125,21 +125,7 @@ export interface Post {
   id: string;
   title?: string | null;
   category?: (string | null) | Category;
-  content?: {
-    root: {
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  } | null;
+  date?: string | null;
   tab1Field?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -295,7 +281,7 @@ export interface PayloadMigration {
 export interface PostsSelect<T extends boolean = true> {
   title?: T;
   category?: T;
-  content?: T;
+  date?: T;
   tab1Field?: T;
   updatedAt?: T;
   createdAt?: T;