From a3ebf51d6e1e23b76723d595d3882f1e3e43ffff Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:02:08 -0500
Subject: [PATCH] fix: incorrectly looking for schema paths when upload is not
 enabled (#9146)

### What?
![CleanShot 2024-11-12 at 12 17
56](https://github.com/user-attachments/assets/74b906a3-7e76-4ee9-8b18-bd24dd7fca82)

### Why?
Should not be attaching fields that it does not need.

### How?
Conditionally render slate upload drawer like we do with the toggler.
---
 .../field/elements/upload/Element/index.tsx   | 36 ++++++-----
 packages/ui/src/elements/EditMany/index.tsx   | 10 ++--
 packages/ui/src/views/List/index.tsx          | 60 ++++++-------------
 3 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/packages/richtext-slate/src/field/elements/upload/Element/index.tsx b/packages/richtext-slate/src/field/elements/upload/Element/index.tsx
index 1083aaf63..ee3450a93 100644
--- a/packages/richtext-slate/src/field/elements/upload/Element/index.tsx
+++ b/packages/richtext-slate/src/field/elements/upload/Element/index.tsx
@@ -154,22 +154,27 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
             </div>
             <div className={`${baseClass}__actions`}>
               {Boolean(customFieldsMap) && (
-                <DrawerToggler
-                  className={`${baseClass}__upload-drawer-toggler`}
-                  disabled={fieldProps?.field?.admin?.readOnly}
-                  slug={drawerSlug}
-                >
-                  <Button
-                    buttonStyle="icon-label"
-                    el="div"
-                    icon="edit"
-                    onClick={(e) => {
-                      e.preventDefault()
-                    }}
-                    round
-                    tooltip={t('fields:editRelationship')}
+                <>
+                  <DrawerToggler
+                    className={`${baseClass}__upload-drawer-toggler`}
+                    disabled={fieldProps?.field?.admin?.readOnly}
+                    slug={drawerSlug}
+                  >
+                    <Button
+                      buttonStyle="icon-label"
+                      el="div"
+                      icon="edit"
+                      onClick={(e) => {
+                        e.preventDefault()
+                      }}
+                      round
+                      tooltip={t('fields:editRelationship')}
+                    />
+                  </DrawerToggler>
+                  <UploadDrawer
+                    {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }}
                   />
-                </DrawerToggler>
+                </>
               )}
               <ListDrawerToggler
                 className={`${baseClass}__list-drawer-toggler`}
@@ -211,7 +216,6 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
       {children}
       {value?.id && <DocumentDrawer onSave={updateUpload} />}
       <ListDrawer onSelect={swapUpload} />
-      <UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />
     </div>
   )
 }
diff --git a/packages/ui/src/elements/EditMany/index.tsx b/packages/ui/src/elements/EditMany/index.tsx
index a95bfdcb4..b0208c42c 100644
--- a/packages/ui/src/elements/EditMany/index.tsx
+++ b/packages/ui/src/elements/EditMany/index.tsx
@@ -156,10 +156,10 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
       }
 
       void getInitialState()
+    }
 
-      return () => {
-        abortAndIgnore(controller)
-      }
+    return () => {
+      abortAndIgnore(controller)
     }
   }, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user, collectionPermissions])
 
@@ -186,7 +186,9 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
   )
 
   useEffect(() => {
-    abortAndIgnore(formStateAbortControllerRef.current)
+    return () => {
+      abortAndIgnore(formStateAbortControllerRef.current)
+    }
   }, [])
 
   if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
diff --git a/packages/ui/src/views/List/index.tsx b/packages/ui/src/views/List/index.tsx
index 331909cd4..4791d7e0f 100644
--- a/packages/ui/src/views/List/index.tsx
+++ b/packages/ui/src/views/List/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ClientCollectionConfig, StaticDescription } from 'payload'
+import type { ClientCollectionConfig } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import LinkImport from 'next/link.js'
@@ -24,7 +24,6 @@ import { Pagination } from '../../elements/Pagination/index.js'
 import { PerPage } from '../../elements/PerPage/index.js'
 import { PublishMany } from '../../elements/PublishMany/index.js'
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
-import { StaggeredShimmers } from '../../elements/ShimmerEffect/index.js'
 import { useStepNav } from '../../elements/StepNav/index.js'
 import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js'
 import { TableColumnsProvider } from '../../elements/TableColumns/index.js'
@@ -35,7 +34,6 @@ import { useConfig } from '../../providers/Config/index.js'
 import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { SelectionProvider } from '../../providers/Selection/index.js'
-import { useServerFunctions } from '../../providers/ServerFunctions/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { useWindowInfo } from '../../providers/WindowInfo/index.js'
 import './index.scss'
@@ -98,8 +96,6 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
     }
   }, [InitialTable])
 
-  const payloadServerAction = useServerFunctions()
-
   const { user } = useAuth()
 
   const { getEntityConfig } = useConfig()
@@ -136,30 +132,18 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
     breakpoints: { s: smallBreak },
   } = useWindowInfo()
 
-  useEffect(() => {
-    if (!collectionConfig) {
-      const getNewConfig = async () => {
-        // @ts-expect-error eslint-disable-next-line
-        const res = (await payloadServerAction('render-config', {
-          collectionSlug,
-          languageCode: i18n.language,
-        })) as any as ClientCollectionConfig
-      }
-
-      void getNewConfig()
+  const docs = React.useMemo(() => {
+    if (isUploadCollection) {
+      return data.docs.map((doc) => {
+        return {
+          ...doc,
+          filesize: formatFilesize(doc.filesize),
+        }
+      })
+    } else {
+      return data.docs
     }
-  }, [payloadServerAction, collectionConfig, collectionSlug, data, i18n])
-
-  let docs = data.docs || []
-
-  if (isUploadCollection) {
-    docs = docs?.map((doc) => {
-      return {
-        ...doc,
-        filesize: formatFilesize(doc.filesize),
-      }
-    })
-  }
+  }, [data.docs, isUploadCollection])
 
   const openBulkUpload = React.useCallback(() => {
     setCollectionSlug(collectionSlug)
@@ -182,14 +166,14 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
       <TableColumnsProvider
         collectionSlug={collectionSlug}
         columnState={columnState}
-        docs={data.docs}
+        docs={docs}
         enableRowSelections={enableRowSelections}
         listPreferences={listPreferences}
         preferenceKey={preferenceKey}
         setTable={setTable}
       >
         <div className={`${baseClass} ${baseClass}--${collectionSlug}`}>
-          <SelectionProvider docs={data.docs} totalDocs={data.totalDocs} user={user}>
+          <SelectionProvider docs={docs} totalDocs={data.totalDocs} user={user}>
             {BeforeList}
             <Gutter className={`${baseClass}__wrap`}>
               <ListHeader
@@ -221,16 +205,8 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
                 renderedFilters={renderedFilters}
               />
               {BeforeListTable}
-              {!data.docs && (
-                <StaggeredShimmers
-                  className={[`${baseClass}__shimmer`, `${baseClass}__shimmer--rows`].join(' ')}
-                  count={6}
-                />
-              )}
-              {data.docs && data.docs.length > 0 && (
-                <RelationshipProvider>{Table}</RelationshipProvider>
-              )}
-              {data.docs && data.docs.length === 0 && (
+              {docs.length > 0 && <RelationshipProvider>{Table}</RelationshipProvider>}
+              {docs.length === 0 && (
                 <div className={`${baseClass}__no-results`}>
                   <p>
                     {i18n.t('general:noResults', { label: getTranslation(labels?.plural, i18n) })}
@@ -255,7 +231,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
                 </div>
               )}
               {AfterListTable}
-              {data.docs && data.docs.length > 0 && (
+              {docs.length > 0 && (
                 <div className={`${baseClass}__page-controls`}>
                   <Pagination
                     hasNextPage={data.hasNextPage}
@@ -268,7 +244,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
                     prevPage={data.prevPage}
                     totalPages={data.totalPages}
                   />
-                  {data?.totalDocs > 0 && (
+                  {data.totalDocs > 0 && (
                     <Fragment>
                       <div className={`${baseClass}__page-info`}>
                         {data.page * data.limit - (data.limit - 1)}-