fix(ui): invalid req.locale shows incorrect data (#14537)

If a view is loaded and the req.locale is one that you do not have
access to due to filterAvailableLocales, the locale selector is set to
the correct locale but the data is incorrect.

This PR adjusts the locale on the req inside the applyLocaleFiltering if
the incoming locale is not accessible due to filterAvailable locales.

Author: JarrodMFlesch

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

@@ -247,6 +247,27 @@ export const RootPage = async ({
   })
   await applyLocaleFiltering({ clientConfig, config, req })
 
+  // Ensure locale on req is still valid after filtering locales
+  if (
+    clientConfig.localization &&
+    req.locale &&
+    !clientConfig.localization.localeCodes.includes(req.locale)
+  ) {
+    redirect(
+      `${currentRoute}${qs.stringify(
+        {
+          ...searchParams,
+          locale: clientConfig.localization.localeCodes.includes(
+            clientConfig.localization.defaultLocale,
+          )
+            ? clientConfig.localization.defaultLocale
+            : clientConfig.localization.localeCodes[0],
+        },
+        { addQueryPrefix: true },
+      )}`,
+    )
+  }
+
   const visibleEntities = getVisibleEntities({ req })
 
   const folderID = routeParams.folderID

packages/ui/src/providers/Locale/index.tsx

@@ -8,7 +8,6 @@ import React, { createContext, use, useEffect, useRef, useState } from 'react'
 import { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'
 import { useAuth } from '../Auth/index.js'
 import { useConfig } from '../Config/index.js'
-import { usePreferences } from '../Preferences/index.js'
 
 const LocaleContext = createContext({} as Locale)
 
@@ -50,7 +49,6 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
 
   const defaultLocale = localization ? localization.defaultLocale : 'en'
 
-  const { getPreference, setPreference } = usePreferences()
   const localeFromParams = useSearchParams().get('locale')
 
   const [locale, setLocale] = React.useState<Locale>(() => {
@@ -111,7 +109,7 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
     }
 
     void resetLocale()
-  }, [defaultLocale, getPreference, localization, fetchURL, localeFromParams, user?.id])
+  }, [defaultLocale, localization, fetchURL, localeFromParams, user?.id])
 
   return (
     <LocaleContext value={locale}>

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

@@ -88,6 +88,11 @@ export const MenuItems: CollectionConfig = {
       type: 'text',
       required: true,
     },
+    {
+      name: 'localizedName',
+      type: 'text',
+      localized: true,
+    },
     {
       name: 'content',
       type: 'richText',

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

@@ -82,5 +82,29 @@ export const Tenants: CollectionConfig = {
       type: 'checkbox',
       label: 'Public Tenant',
     },
+    {
+      name: 'selectedLocales',
+      type: 'select',
+      hasMany: true,
+      defaultValue: ['allLocales'],
+      options: [
+        {
+          label: 'All Locales',
+          value: 'allLocales',
+        },
+        {
+          label: 'English',
+          value: 'en',
+        },
+        {
+          label: 'Spanish',
+          value: 'es',
+        },
+        {
+          label: 'French',
+          value: 'fr',
+        },
+      ],
+    },
   ],
 }

test/plugin-multi-tenant/config.ts

@@ -6,6 +6,7 @@ const dirname = path.dirname(filename)
 
 import type { Config as ConfigType } from './payload-types.js'
 
+import { getTenantFromCookie } from '../../packages/plugin-multi-tenant/src/utilities/getTenantFromCookie.js'
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { AutosaveGlobal } from './collections/AutosaveGlobal.js'
 import { Menu } from './collections/Menu.js'
@@ -63,6 +64,32 @@ export default buildConfigWithDefaults({
       },
     }),
   ],
+  localization: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'fr'],
+    filterAvailableLocales: async ({ locales, req }) => {
+      const tenant = getTenantFromCookie(req.headers, 'text')
+      if (tenant) {
+        const fullTenant = await req.payload.findByID({
+          collection: 'tenants',
+          id: tenant,
+        })
+        if (
+          fullTenant &&
+          Array.isArray(fullTenant.selectedLocales) &&
+          fullTenant.selectedLocales.length > 0
+        ) {
+          if (fullTenant.selectedLocales.includes('allLocales')) {
+            return locales
+          }
+          return locales.filter((locale) =>
+            fullTenant.selectedLocales?.includes(locale.code as any),
+          )
+        }
+      }
+      return locales
+    },
+  },
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),
   },

test/plugin-multi-tenant/e2e.spec.ts

@@ -9,7 +9,12 @@ import { fileURLToPath } from 'url'
 import type { PayloadTestSDK } from '../helpers/sdk/index.js'
 import type { Config } from './payload-types.js'
 
-import { ensureCompilationIsDone, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers.js'
+import {
+  changeLocale,
+  ensureCompilationIsDone,
+  initPageConsoleErrorCatch,
+  saveDocAndAssert,
+} from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { loginClientSide } from '../helpers/e2e/auth/login.js'
 import { goToListDoc } from '../helpers/e2e/goToListDoc.js'
@@ -260,6 +265,34 @@ test.describe('Multi Tenant', () => {
         ).toBeHidden()
       })
     })
+
+    test('should show correct filtered localized data', async () => {
+      await loginClientSide({
+        data: credentials.admin,
+        page,
+        serverURL,
+      })
+
+      await setTenantFilter({
+        page,
+        tenant: 'Blue Dog',
+      })
+
+      await changeLocale(page, 'es')
+
+      await setTenantFilter({
+        page,
+        tenant: 'Anchor Bar',
+      })
+
+      await page.goto(menuItemsURL.list)
+
+      await expect(
+        page.locator('.collection-list .table .cell-localizedName', {
+          hasText: 'Popcorn EN',
+        }),
+      ).toBeVisible()
+    })
   })
 
   test.describe('Documents', () => {
@@ -758,9 +791,12 @@ async function setTenantFilter({
 }: {
   page: Page
   tenant: string
-  urlUtil: AdminUrlUtil
+  urlUtil?: AdminUrlUtil
 }): Promise<void> {
-  await page.goto(urlUtil.list)
+  if (urlUtil) {
+    await page.goto(urlUtil.list)
+  }
+
   await openNav(page)
   await selectInput({
     multiSelect: false,