Merge pull request #1839 from payloadcms/fix/date-useastitle

fix: formats date when useAsTitle

src/admin/components/elements/DeleteDocument/index.tsx

@@ -21,6 +21,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
     title: titleFromProps,
     id,
     buttonId,
+    collection,
     collection: {
       admin: {
         useAsTitle,
@@ -38,7 +39,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
   const { toggleModal } = useModal();
   const history = useHistory();
   const { t, i18n } = useTranslation('general');
-  const title = useTitle(useAsTitle) || id;
+  const title = useTitle(useAsTitle, collection.slug) || id;
   const titleToRender = titleFromProps || title;
 
   const modalSlug = `delete-${id}`;

src/admin/components/elements/RenderTitle/index.tsx

@@ -8,12 +8,12 @@ const baseClass = 'render-title';
 const RenderTitle: React.FC<Props> = (props) => {
   const {
     useAsTitle,
+    collection,
     title: titleFromProps,
     data,
     fallback = '[untitled]',
   } = props;
-
-  const titleFromForm = useTitle(useAsTitle);
+  const titleFromForm = useTitle(useAsTitle, collection);
 
   let title = titleFromForm;
   if (!title) title = data?.id;

src/admin/components/elements/RenderTitle/types.ts

@@ -1,8 +1,9 @@
 export type Props = {
-  useAsTitle?: string,
+  useAsTitle?: string
   data?: {
-    id?: string,
-  },
-  title?: string,
-  fallback?: string,
+    id?: string
+  }
+  title?: string
+  fallback?: string
+  collection?: string
 }

src/admin/components/views/Account/Default.tsx

@@ -90,7 +90,12 @@ const DefaultAccount: React.FC<Props> = (props) => {
               <div className={`${baseClass}__edit`}>
                 <Gutter className={`${baseClass}__header`}>
                   <h1>
-                    <RenderTitle {...{ data, useAsTitle, fallback: `[${t('general:untitled')}]` }} />
+                    <RenderTitle
+                      data={data}
+                      collection={collection.slug}
+                      useAsTitle={useAsTitle}
+                      fallback={`[${t('general:untitled')}]`}
+                    />
                   </h1>
                   <Auth
                     useAPIKey={auth.useAPIKey}

src/admin/components/views/collections/Edit/Default.tsx

@@ -119,7 +119,12 @@ const DefaultEditView: React.FC<Props> = (props) => {
                   {customHeader && customHeader}
                   {!customHeader && (
                     <h1>
-                      <RenderTitle {...{ data, useAsTitle, fallback: `[${t('untitled')}]` }} />
+                      <RenderTitle
+                        data={data}
+                        collection={collection.slug}
+                        useAsTitle={useAsTitle}
+                        fallback={`[${t('untitled')}]`}
+                      />
                     </h1>
                   )}
                 </header>

src/admin/components/views/collections/Edit/SetStepNav.tsx

@@ -26,7 +26,7 @@ export const SetStepNav: React.FC<{
   const { t, i18n } = useTranslation('general');
   const { routes: { admin } } = useConfig();
 
-  const title = useTitle(useAsTitle);
+  const title = useTitle(useAsTitle, collection.slug);
 
   useEffect(() => {
     const nav: StepNavItem[] = [{

src/admin/hooks/useTitle.tsx

@@ -1,8 +1,26 @@
+import { format } from 'date-fns';
+import { useRelatedCollections } from '../components/forms/field-types/Relationship/AddNew/useRelatedCollections';
 import { useFormFields } from '../components/forms/Form/context';
+import { useConfig } from '../components/utilities/Config';
 
-const useTitle = (useAsTitle: string): string => {
+const useTitle = (useAsTitle: string, collection: string): string => {
   const titleField = useFormFields(([fields]) => fields[useAsTitle]);
-  return titleField?.value as string;
+  const value: string = titleField?.value as string || '';
+
+  const { admin: { dateFormat: dateFormatFromConfig } } = useConfig();
+  const collectionConfig = useRelatedCollections(collection)?.[0];
+  const fieldConfig = collectionConfig?.fields?.find((field) => 'name' in field && field?.name === useAsTitle);
+
+  const isDate = fieldConfig?.type === 'date';
+
+  let title = value;
+
+  if (isDate && value) {
+    const dateFormat = fieldConfig?.admin?.date?.displayFormat || dateFormatFromConfig;
+    title = format(new Date(value), dateFormat);
+  }
+
+  return title;
 };
 
 export default useTitle;

test/fields/e2e.spec.ts

@@ -400,19 +400,7 @@ describe('fields', () => {
       url = new AdminUrlUtil(serverURL, 'date-fields');
     });
 
-    test('should clear date', async () => {
-      await page.goto(url.create);
-      const dateField = page.locator('#field-default input');
-      await expect(dateField).toBeVisible();
-      await dateField.fill('2021-08-01');
-      await expect(dateField).toHaveValue('2021-08-01');
-      const clearButton = page.locator('#field-default .date-time-picker__clear-button');
-      await expect(clearButton).toBeVisible();
-      await clearButton.click();
-      await expect(dateField).toHaveValue('');
-    });
-
-    test('should display formatted date in list view if displayFormat option added to date field', async () => {
+    test('should display formatted date in list view table cell', async () => {
       await page.goto(url.list);
       const formattedDateCell = page.locator('.row-1 .cell-timeOnly');
       await expect(formattedDateCell).toContainText(' Aug ');
@@ -420,6 +408,24 @@ describe('fields', () => {
       const notFormattedDateCell = page.locator('.row-1 .cell-default');
       await expect(notFormattedDateCell).toContainText('August');
     });
+
+    test('should display formatted date in useAsTitle', async () => {
+      await page.goto(url.list);
+      await page.locator('.row-1 .cell-default a').click();
+      await expect(page.locator('.collection-edit__header .render-title')).toContainText('August');
+    });
+
+    test('should clear date', async () => {
+      await page.goto(url.create);
+      const dateField = await page.locator('#field-default input');
+      await expect(dateField).toBeVisible();
+      await dateField.fill('2021-08-01');
+      await expect(dateField).toHaveValue('2021-08-01');
+      const clearButton = await page.locator('#field-default .date-time-picker__clear-button');
+      await expect(clearButton).toBeVisible();
+      await clearButton.click();
+      await expect(dateField).toHaveValue('');
+    });
   });
 
   describe('relationship', () => {