chore(ui): prevent loading orphaned documents when viewing root collection folders (#13684)

Root level collection folders should not display items, only folders. 


---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210821658736793

packages/next/src/views/CollectionFolders/buildView.tsx

@@ -178,7 +178,9 @@ export const buildCollectionFolderView = async (
                 permissions?.collections?.[config.folders.slug]?.create
                   ? config.folders.slug
                   : null,
-                permissions?.collections?.[collectionSlug]?.create ? collectionSlug : null,
+                resolvedFolderID && permissions?.collections?.[collectionSlug]?.create
+                  ? collectionSlug
+                  : null,
               ].filter(Boolean),
               baseFolderPath: `/collections/${collectionSlug}/${config.folders.slug}`,
               breadcrumbs,

packages/payload/src/folders/utils/getFolderData.ts

@@ -79,30 +79,17 @@ export const getFolderData = async ({
       subfolders: sortDocs({ docs: result.subfolders, sort }),
     }
   } else {
-    // subfolders and documents are queried separately
     const subfoldersPromise = getOrphanedDocs({
       collectionSlug: payload.config.folders.slug,
       folderFieldName: payload.config.folders.fieldName,
       req,
       where: folderWhere,
     })
-    const documentsPromise = collectionSlug
+    const [breadcrumbs, subfolders] = await Promise.all([breadcrumbsPromise, subfoldersPromise])
-      ? getOrphanedDocs({
-          collectionSlug,
-          folderFieldName: payload.config.folders.fieldName,
-          req,
-          where: documentWhere,
-        })
-      : Promise.resolve([])
-    const [breadcrumbs, subfolders, documents] = await Promise.all([
-      breadcrumbsPromise,
-      subfoldersPromise,
-      documentsPromise,
-    ])
 
     return {
       breadcrumbs,
-      documents: sortDocs({ docs: documents, sort }),
+      documents: [],
       folderAssignedCollections: collectionSlug ? [collectionSlug] : undefined,
       subfolders: sortDocs({ docs: subfolders, sort }),
     }

packages/ui/src/views/BrowseByFolder/index.tsx

@@ -264,7 +264,11 @@ function BrowseByFolderViewInContext(props: BrowseByFolderViewInContextProps) {
             TitleActions={[
               allowCreateCollectionSlugs.length && (
                 <ListCreateNewDocInFolderButton
-                  buttonLabel={t('general:createNew')}
+                  buttonLabel={
+                    allowCreateCollectionSlugs.length > 1
+                      ? t('general:createNew')
+                      : `${t('general:create')} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`
+                  }
                   collectionSlugs={allowCreateCollectionSlugs}
                   folderAssignedCollections={Array.isArray(folderType) ? folderType : []}
                   key="create-new-button"

packages/ui/src/views/CollectionFolder/index.tsx

@@ -302,7 +302,11 @@ function CollectionFolderViewInContext(props: CollectionFolderViewInContextProps
             TitleActions={[
               allowCreateCollectionSlugs.length && (
                 <ListCreateNewDocInFolderButton
-                  buttonLabel={t('general:createNew')}
+                  buttonLabel={
+                    allowCreateCollectionSlugs.length > 1
+                      ? t('general:createNew')
+                      : `${t('general:create')} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`
+                  }
                   collectionSlugs={allowCreateCollectionSlugs}
                   folderAssignedCollections={
                     Array.isArray(folderType) ? folderType : [collectionSlug]

test/folders/e2e.spec.ts

@@ -77,7 +77,7 @@ test.describe('Folders', () => {
 
     test('should create new folder from collection view', async () => {
       await page.goto(postURL.byFolder)
-      await createFolder({ folderName: 'New Folder From Collection', fromDropdown: true, page })
+      await createFolder({ folderName: 'New Folder From Collection', fromDropdown: false, page })
     })
 
     test('should create new folder from document view', async () => {
@@ -422,12 +422,10 @@ test.describe('Folders', () => {
 
     test('should create folder from By Folder view', async () => {
       await page.goto(postURL.byFolder)
-      const createDropdown = page.locator('.create-new-doc-in-folder__popup-button', {
+      const createButton = page.locator('.create-new-doc-in-folder__button', {
-        hasText: 'Create',
+        hasText: 'Create folder',
       })
-      await createDropdown.click()
+      await createButton.click()
-      const createFolderButton = page.locator('.popup-button-list__button', { hasText: 'Folder' })
-      await createFolderButton.click()
       await createFolderDoc({
         page,
         folderName: 'New Folder From Collection',
@@ -485,7 +483,7 @@ test.describe('Folders', () => {
       await createFolder({
         folderName,
         page,
-        fromDropdown: true,
+        fromDropdown: false,
         folderType: ['Omitted From Browse By', 'Posts'],
       })
 

test/helpers/folders/createFolder.ts

@@ -26,7 +26,7 @@ export async function createFolder({
     await createFolderButton.click()
   } else {
     const createFolderButton = page.locator(
-      '.create-new-doc-in-folder__button:has-text("Create New")',
+      '.list-header__title-and-actions .create-new-doc-in-folder__button:has-text("Create folder")',
     )
     await createFolderButton.click()
   }

test/helpers/folders/expectNoResultsAndCreateFolderButton.ts

@@ -7,6 +7,6 @@ type Args = {
 export async function expectNoResultsAndCreateFolderButton({ page }: Args): Promise<void> {
   const noResultsDiv = page.locator('div.no-results')
   await expect(noResultsDiv).toBeVisible()
-  const createFolderButton = page.locator('text=Create Folder')
+  const createFolderButton = noResultsDiv.locator('text=Create Folder')
   await expect(createFolderButton).toBeVisible()
 }