fix(ui): ensures visible list view thumbnails with enableListViewSelectAPI (#13864)

Fixes #13856

When using `enableListViewSelectAPI` on upload collections the thumbnail
images require data, this PR ensures that the required data is always
selected.

Author: JarrodMFlesch

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

@@ -0,0 +1,49 @@
+import type { SanitizedCollectionConfig, SelectType } from 'payload'
+
+/**
+ * Mutates the incoming select object to append fields required for upload thumbnails
+ * @param collectionConfig
+ * @param select
+ */
+export const appendUploadSelectFields = ({
+  collectionConfig,
+  select,
+}: {
+  collectionConfig: SanitizedCollectionConfig
+  select: SelectType
+}) => {
+  if (!collectionConfig.upload || !select) {
+    return
+  }
+
+  select.mimeType = true
+  select.thumbnailURL = true
+
+  if (collectionConfig.upload.imageSizes && collectionConfig.upload.imageSizes.length > 0) {
+    if (
+      collectionConfig.upload.adminThumbnail &&
+      typeof collectionConfig.upload.adminThumbnail === 'string'
+    ) {
+      /** Only return image size properties that are required to generate the adminThumbnailURL */
+      select.sizes = {
+        [collectionConfig.upload.adminThumbnail]: {
+          filename: true,
+        },
+      }
+    } else {
+      /** Only return image size properties that are required for thumbnails */
+      select.sizes = collectionConfig.upload.imageSizes.reduce((acc, imageSizeConfig) => {
+        return {
+          ...acc,
+          [imageSizeConfig.name]: {
+            filename: true,
+            url: true,
+            width: true,
+          },
+        }
+      }, {})
+    }
+  } else {
+    select.url = true
+  }
+}

packages/next/src/views/List/index.tsx

@@ -1,19 +1,20 @@
+import type {
+  AdminViewServerProps,
+  CollectionPreferences,
+  Column,
+  ColumnPreference,
+  ListQuery,
+  ListViewClientProps,
+  ListViewServerPropsOnly,
+  PaginatedDocs,
+  QueryPreset,
+  SanitizedCollectionPermission,
+} from 'payload'
+
 import { DefaultListView, HydrateAuthProvider, ListQueryProvider } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { getColumns, renderFilters, renderTable, upsertPreferences } from '@payloadcms/ui/rsc'
 import { notFound } from 'next/navigation.js'
-import {
-  type AdminViewServerProps,
-  type CollectionPreferences,
-  type Column,
-  type ColumnPreference,
-  type ListQuery,
-  type ListViewClientProps,
-  type ListViewServerPropsOnly,
-  type PaginatedDocs,
-  type QueryPreset,
-  type SanitizedCollectionPermission,
-} from 'payload'
 import {
   combineWhereConstraints,
   formatAdminURL,
@@ -25,6 +26,7 @@ import {
 import React, { Fragment } from 'react'
 
 import { getDocumentPermissions } from '../Document/getDocumentPermissions.js'
+import { appendUploadSelectFields } from './appendUploadSelectFields.js'
 import { handleGroupBy } from './handleGroupBy.js'
 import { renderListViewSlots } from './renderListViewSlots.js'
 import { resolveAllFilterOptions } from './resolveAllFilterOptions.js'
@@ -223,6 +225,12 @@ export const renderListView = async (
       ? transformColumnsToSelect(columns)
       : undefined
 
+    /** Force select image fields for list view thumbnails */
+    appendUploadSelectFields({
+      collectionConfig,
+      select,
+    })
+
     try {
       if (collectionConfig.admin.groupBy && query.groupBy) {
         ;({ columnState, data, Table } = await handleGroupBy({