fix(ui): upload has many no rows error (#7804)

Author: paulpopus

packages/ui/src/fields/Upload/HasMany/index.scss

@@ -34,6 +34,12 @@
     flex-direction: column;
     gap: 0.25rem;
   }
+
+  &__no-data {
+    background: var(--theme-elevation-50);
+    padding: 0.5rem 0.75rem;
+    border-radius: 3px;
+  }
 }
 
 html[data-theme='light'] {

packages/ui/src/fields/Upload/HasMany/index.tsx

@@ -110,8 +110,6 @@ export const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string
       }
 
       void fetchFile()
-    } else {
-      setFileDocs([])
     }
   }, [value, relationTo, api, serverURL, i18n, code])
 
@@ -157,7 +155,8 @@ export const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string
         (acc, [key, value]) => (value ? [...acc, key] : acc),
         [] as string[],
       )
-      setValue([...value, ...selectedIDs])
+      if (value?.length) setValue([...value, ...selectedIDs])
+      else setValue(selectedIDs)
     },
     [setValue, value],
   )
@@ -167,8 +166,12 @@ export const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string
       <div className={[baseClass].join(' ')}>
         <FieldLabel Label={Label} field={field} label={label} />
 
-        <div className={[baseClass].join(' ')}>
-          <div>
+        <div>
+          {missingFiles || !value?.length ? (
+            <div className={[`${baseClass}__no-data`].join(' ')}>
+              {t('version:noRowsFound', { label: relationTo })}
+            </div>
+          ) : (
             <DraggableSortable
               className={`${baseClass}__draggable-rows`}
               ids={value}
@@ -197,7 +200,7 @@ export const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string
                   )
                 })}
             </DraggableSortable>
-          </div>
+          )}
         </div>
 
         <div className={[`${baseClass}__controls`].join(' ')}>
@@ -248,7 +251,8 @@ export const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string
         enableRowSelections
         onBulkSelect={onBulkSelect}
         onSelect={(selection) => {
-          setValue([...value, selection.docID])
+          if (value?.length) setValue([...value, selection.docID])
+          else setValue([selection.docID])
         }}
       />
     </Fragment>

test/fields/collections/RichText/e2e.spec.ts

@@ -268,7 +268,8 @@ describe('Rich Text', () => {
       await page.locator('.list-drawer__select-collection-wrap .rs__control').click()
 
       const menu = page.locator('.list-drawer__select-collection-wrap .rs__menu')
-      await expect(menu).not.toContainText('Uploads')
+      const regex = /\bUploads\b/
+      await expect(menu).not.toContainText(regex)
     })
 
     // TODO: Flaky test in CI. Flake: https://github.com/payloadcms/payload/actions/runs/8914532814/job/24482407114