chore: retrofits formatUseAsTitle into ThumbnailCard #2270 (#2367)

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Props } from './types';
 import Thumbnail from '../Thumbnail';
+import { useConfig } from '../../utilities/Config';
+import { formatUseAsTitle } from '../../../hooks/useTitle';
 
 import './index.scss';
 
@@ -14,12 +16,13 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
     doc,
     collection,
     thumbnail,
-    label,
+    label: labelFromProps,
     alignLabel,
     onKeyDown,
   } = props;
 
-  const { t } = useTranslation('general');
+  const { t, i18n } = useTranslation('general');
+  const config = useConfig();
 
   const classes = [
     baseClass,
@@ -28,7 +31,16 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
     alignLabel && `${baseClass}--align-label-${alignLabel}`,
   ].filter(Boolean).join(' ');
 
-  const title: any = doc?.[collection?.admin?.useAsTitle] || doc?.filename || `[${t('untitled')}]`;
+  let title = labelFromProps;
+
+  if (!title) {
+    title = formatUseAsTitle({
+      doc,
+      collection,
+      i18n,
+      config,
+    }) || doc?.filename as string || `[${t('untitled')}]`;
+  }
 
   return (
     <div
@@ -47,7 +59,7 @@ export const ThumbnailCard: React.FC<Props> = (props) => {
         )}
       </div>
       <div className={`${baseClass}__label`}>
-        {label || title}
+        {title}
       </div>
     </div>
   );

src/admin/hooks/useTitle.tsx

@@ -8,7 +8,8 @@ import { useConfig } from '../components/utilities/Config';
 import { formatDate } from '../utilities/formatDate';
 import { getObjectDotNotation } from '../../utilities/getObjectDotNotation';
 
-// either send a `field` or an entire `doc`
+// either send the `useAsTitle` field itself
+// or an object to dynamically extract the `useAsTitle` field from
 export const formatUseAsTitle = (args: {
   field?: Field
   doc?: Record<string, any>