fix(plugin-multi-tenant): autosave global documents not rendering (#13552)

Fixes #13507

When enabling autosave on global multi-tenant documents, the page would
not always render - more noticeably with smaller autosave intervals.

Author: JarrodMFlesch

packages/plugin-multi-tenant/src/utilities/getGlobalViewRedirect.ts

@@ -25,7 +25,7 @@ type Args = {
   view: ViewTypes
 }
 export async function getGlobalViewRedirect({
-  slug,
+  slug: collectionSlug,
   basePath,
   docID,
   headers,
@@ -64,45 +64,67 @@ export async function getGlobalViewRedirect({
     tenant = tenantOptions[0]?.value || null
   }
 
-  try {
-    const { docs } = await payload.find({
-      collection: slug,
-      depth: 0,
-      limit: 1,
-      overrideAccess: false,
-      pagination: false,
-      user,
-      where: {
-        [tenantFieldName]: {
-          equals: tenant,
+  if (tenant) {
+    try {
+      const globalTenantDocQuery = await payload.find({
+        collection: collectionSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+        select: {
+          id: true,
         },
-      },
-    })
+        where: {
+          [tenantFieldName]: {
+            equals: tenant,
+          },
+        },
+      })
 
-    const tenantDocID = docs?.[0]?.id
+      const globalTenantDocID = globalTenantDocQuery?.docs?.[0]?.id
 
-    if (view === 'document') {
-      if (docID && !tenantDocID) {
-        // viewing a document with an id but does not match the selected tenant, redirect to create route
-        redirectRoute = `/collections/${slug}/create`
-      } else if (tenantDocID && docID !== tenantDocID) {
-        // tenant document already exists but does not match current route doc ID, redirect to matching tenant doc
-        redirectRoute = `/collections/${slug}/${tenantDocID}`
-      }
-    } else if (view === 'list') {
-      if (tenantDocID) {
-        // tenant document exists, redirect to edit view
-        redirectRoute = `/collections/${slug}/${tenantDocID}`
-      } else {
-        // tenant document does not exist, redirect to create route
-        redirectRoute = `/collections/${slug}/create`
+      if (view === 'document') {
+        // global tenant document edit view
+        if (globalTenantDocID && docID !== globalTenantDocID) {
+          // tenant document already exists but does not match current route docID
+          // redirect to matching tenant docID from query
+          redirectRoute = `/collections/${collectionSlug}/${globalTenantDocID}`
+        } else if (docID && !globalTenantDocID) {
+          // a docID was found in the route but no global document with this tenant exists
+          // so we need to generate a redirect to the create route
+          redirectRoute = await generateCreateRedirect({
+            collectionSlug,
+            payload,
+            tenantID: tenant,
+          })
+        }
+      } else if (view === 'list') {
+        // global tenant document list view
+        if (globalTenantDocID) {
+          // tenant document exists, redirect from list view to the document edit view
+          redirectRoute = `/collections/${collectionSlug}/${globalTenantDocID}`
+        } else {
+          // no matching document was found for the current tenant
+          // so we need to generate a redirect to the create route
+          redirectRoute = await generateCreateRedirect({
+            collectionSlug,
+            payload,
+            tenantID: tenant,
+          })
+        }
       }
+    } catch (e: unknown) {
+      const prefix = `${e && typeof e === 'object' && 'message' in e && typeof e.message === 'string' ? `${e.message} - ` : ''}`
+      payload.logger.error(e, `${prefix}Multi Tenant Redirect Error`)
     }
-  } catch (e: unknown) {
-    payload.logger.error(
-      e,
-      `${typeof e === 'object' && e && 'message' in e ? `e?.message - ` : ''}Multi Tenant Redirect Error`,
-    )
+  } else {
+    // no tenants were found, redirect to the admin view
+    return formatAdminURL({
+      adminRoute: payload.config.routes.admin,
+      basePath,
+      path: '',
+      serverURL: payload.config.serverURL,
+    })
   }
 
   if (redirectRoute) {
@@ -114,5 +136,57 @@ export async function getGlobalViewRedirect({
     })
   }
 
+  // no redirect is needed
+  // the current route is valid
   return undefined
 }
+
+type GenerateCreateArgs = {
+  collectionSlug: string
+  payload: Payload
+  tenantID: number | string
+}
+/**
+ * Generate a redirect URL for creating a new document in a multi-tenant collection.
+ *
+ * If autosave is enabled on the collection, we need to create the document and then redirect to it.
+ * Otherwise we can redirect to the default create route.
+ */
+async function generateCreateRedirect({
+  collectionSlug,
+  payload,
+  tenantID,
+}: GenerateCreateArgs): Promise<`/${string}` | undefined> {
+  const collection = payload.collections[collectionSlug]
+  if (
+    collection?.config.versions?.drafts &&
+    typeof collection.config.versions.drafts === 'object' &&
+    collection.config.versions.drafts.autosave
+  ) {
+    // Autosave is enabled, create a document first
+    try {
+      const doc = await payload.create({
+        collection: collectionSlug,
+        data: {
+          tenant: tenantID,
+        },
+        depth: 0,
+        draft: true,
+        select: {
+          id: true,
+        },
+      })
+      return `/collections/${collectionSlug}/${doc.id}`
+    } catch (error) {
+      payload.logger.error(
+        error,
+        `Error creating autosave global multi tenant document for ${collectionSlug}`,
+      )
+    }
+
+    return '/'
+  }
+
+  // Autosave is not enabled, redirect to default create route
+  return `/collections/${collectionSlug}/create`
+}

packages/plugin-multi-tenant/src/utilities/getTenantOptions.ts

@@ -35,7 +35,7 @@ export const getTenantOptions = async ({
       overrideAccess: false,
       select: {
         [useAsTitle]: true,
-        ...(isOrderable ? { _order: true } : {}),
+        ...(isOrderable && { _order: true }),
       },
       sort: isOrderable ? '_order' : useAsTitle,
       user,

test/helpers/e2e/selectInput.ts

@@ -96,22 +96,26 @@ async function selectOption({
 type GetSelectInputValueFunction = <TMultiSelect = true>(args: {
   multiSelect: TMultiSelect
   selectLocator: Locator
+  valueLabelClass?: string
 }) => Promise<TMultiSelect extends true ? string[] : string | undefined>
 
 export const getSelectInputValue: GetSelectInputValueFunction = async ({
   selectLocator,
   multiSelect = false,
+  valueLabelClass,
 }) => {
   if (multiSelect) {
     // For multi-select, get all selected options
     const selectedOptions = await selectLocator
-      .locator('.multi-value-label__text')
+      .locator(valueLabelClass || '.multi-value-label__text')
       .allTextContents()
     return selectedOptions || []
   }
 
   // For single-select, get the selected value
-  const singleValue = await selectLocator.locator('.react-select--single-value').textContent()
+  const singleValue = await selectLocator
+    .locator(valueLabelClass || '.react-select--single-value')
+    .textContent()
   return (singleValue ?? undefined) as any
 }
 

test/plugin-multi-tenant/collections/AutosaveGlobal.ts

@@ -0,0 +1,30 @@
+import type { CollectionConfig } from 'payload'
+
+import { autosaveGlobalSlug } from '../shared.js'
+
+export const AutosaveGlobal: CollectionConfig = {
+  slug: autosaveGlobalSlug,
+  admin: {
+    useAsTitle: 'title',
+    group: 'Tenant Globals',
+  },
+  fields: [
+    {
+      name: 'title',
+      label: 'Title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+    },
+  ],
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100,
+      },
+    },
+  },
+}

test/plugin-multi-tenant/config.ts

@@ -7,15 +7,16 @@ const dirname = path.dirname(filename)
 import type { Config as ConfigType } from './payload-types.js'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { AutosaveGlobal } from './collections/AutosaveGlobal.js'
 import { Menu } from './collections/Menu.js'
 import { MenuItems } from './collections/MenuItems.js'
 import { Tenants } from './collections/Tenants.js'
 import { Users } from './collections/Users/index.js'
 import { seed } from './seed/index.js'
-import { menuItemsSlug, menuSlug } from './shared.js'
+import { autosaveGlobalSlug, menuItemsSlug, menuSlug } from './shared.js'
 
 export default buildConfigWithDefaults({
-  collections: [Tenants, Users, MenuItems, Menu],
+  collections: [Tenants, Users, MenuItems, Menu, AutosaveGlobal],
   admin: {
     autoLogin: false,
     importMap: {
@@ -44,6 +45,9 @@ export default buildConfigWithDefaults({
         [menuSlug]: {
           isGlobal: true,
         },
+        [autosaveGlobalSlug]: {
+          isGlobal: true,
+        },
       },
       i18n: {
         translations: {