chore: use href for locale switching, warns user before leaving (#7215)

Opts to use links instead of router.replace when switching locales. The
main benefit is now the user will be warned if they have changes and
want to switch locales. Before it would switch locales and they would
lose any unsaved changes in the locale they came from.

packages/ui/src/elements/Autosave/index.tsx

@@ -43,7 +43,7 @@ export const Autosave: React.FC<Props> = ({
   } = useConfig()
   const { docConfig, getVersions, versions } = useDocumentInfo()
   const { reportUpdate } = useDocumentEvents()
-  const { dispatchFields, setSubmitted } = useForm()
+  const { dispatchFields, setModified, setSubmitted } = useForm()
   const submitted = useFormSubmitted()
   const versionsConfig = docConfig?.versions
 
@@ -80,7 +80,7 @@ export const Autosave: React.FC<Props> = ({
   // Store locale in ref so the autosave func
   // can always retrieve the most to date locale
   localeRef.current = locale
-
+  console.log(modifiedRef.current, modified)
   // When debounced fields change, autosave
   useEffect(() => {
     const abortController = new AbortController()
@@ -131,6 +131,7 @@ export const Autosave: React.FC<Props> = ({
                 if (res.status === 200) {
                   const newDate = new Date()
                   setLastSaved(newDate.getTime())
+                  setModified(false)
                   reportUpdate({
                     id,
                     entitySlug,
@@ -216,6 +217,7 @@ export const Autosave: React.FC<Props> = ({
     reportUpdate,
     serverURL,
     setSubmitted,
+    setModified,
     versionsConfig?.drafts,
     debouncedFields,
     submitted,

packages/ui/src/elements/Localizer/index.tsx

@@ -1,11 +1,9 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
-import { useRouter } from 'next/navigation.js'
 import React from 'react'
 
 import { useConfig } from '../../providers/Config/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
-import { useRouteCache } from '../../providers/RouteCache/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Popup, PopupList } from '../Popup/index.js'
@@ -24,8 +22,6 @@ export const Localizer: React.FC<{
   const { i18n } = useTranslation()
   const locale = useLocale()
   const { stringifyParams } = useSearchParams()
-  const router = useRouter()
-  const { clearRouteCache } = useRouteCache()
 
   if (localization) {
     const { locales } = localization
@@ -43,18 +39,13 @@ export const Localizer: React.FC<{
                 return (
                   <PopupList.Button
                     active={locale.code === localeOption.code}
-                    key={localeOption.code}
+                    href={stringifyParams({
-                    onClick={() => {
-                      router.replace(
-                        stringifyParams({
                       params: {
                         locale: localeOption.code,
                       },
-                        }),
+                    })}
-                      )
+                    key={localeOption.code}
-                      clearRouteCache()
+                    onClick={close}
-                      close()
-                    }}
                   >
                     {localeOptionLabel}
                     {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}

test/helpers.ts

@@ -30,20 +30,20 @@ type LoginArgs = {
 const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min
 
 const networkConditions = {
-  'Slow 3G': {
-    download: ((500 * 1000) / 8) * 0.8,
-    upload: ((500 * 1000) / 8) * 0.8,
-    latency: 400 * 5,
-  },
   'Fast 3G': {
     download: ((1.6 * 1000 * 1000) / 8) * 0.9,
-    upload: ((750 * 1000) / 8) * 0.9,
     latency: 1000,
+    upload: ((750 * 1000) / 8) * 0.9,
+  },
+  'Slow 3G': {
+    download: ((500 * 1000) / 8) * 0.8,
+    latency: 400 * 5,
+    upload: ((500 * 1000) / 8) * 0.8,
   },
   'Slow 4G': {
     download: ((4 * 1000 * 1000) / 8) * 0.8,
-    upload: ((3 * 1000 * 1000) / 8) * 0.8,
     latency: 1000,
+    upload: ((3 * 1000 * 1000) / 8) * 0.8,
   },
 }
 
@@ -53,10 +53,10 @@ const networkConditions = {
  * @param serverURL
  */
 export async function ensureAutoLoginAndCompilationIsDone({
-  page,
-  serverURL,
   customAdminRoutes,
   customRoutes,
+  page,
+  serverURL,
 }: {
   customAdminRoutes?: Config['admin']['routes']
   customRoutes?: Config['routes']
@@ -65,7 +65,7 @@ export async function ensureAutoLoginAndCompilationIsDone({
 }): Promise<void> {
   const {
     admin: {
-      routes: { login: loginRoute, createFirstUser: createFirstUserRoute },
+      routes: { createFirstUser: createFirstUserRoute, login: loginRoute },
     },
     routes: { admin: adminRoute },
   } = getAdminRoutes({ customAdminRoutes, customRoutes })
@@ -97,8 +97,8 @@ export async function ensureAutoLoginAndCompilationIsDone({
  */
 export async function throttleTest({
   context,
-  page,
   delay,
+  page,
 }: {
   context: BrowserContext
   delay: 'Fast 3G' | 'Slow 3G' | 'Slow 4G'
@@ -108,9 +108,9 @@ export async function throttleTest({
 
   await cdpSession.send('Network.emulateNetworkConditions', {
     downloadThroughput: networkConditions[delay].download,
-    uploadThroughput: networkConditions[delay].upload,
     latency: networkConditions[delay].latency,
     offline: false,
+    uploadThroughput: networkConditions[delay].upload,
   })
 
   await page.route('**/*', async (route) => {
@@ -123,7 +123,7 @@ export async function throttleTest({
 }
 
 export async function firstRegister(args: FirstRegisterArgs): Promise<void> {
-  const { page, serverURL, customAdminRoutes, customRoutes } = args
+  const { customAdminRoutes, customRoutes, page, serverURL } = args
 
   const {
     routes: { admin: adminRoute },
@@ -139,11 +139,11 @@ export async function firstRegister(args: FirstRegisterArgs): Promise<void> {
 }
 
 export async function login(args: LoginArgs): Promise<void> {
-  const { page, serverURL, data = devUser, customAdminRoutes, customRoutes } = args
+  const { customAdminRoutes, customRoutes, data = devUser, page, serverURL } = args
 
   const {
     admin: {
-      routes: { login: loginRoute, createFirstUser: createFirstUserRoute },
+      routes: { createFirstUser: createFirstUserRoute, login: loginRoute },
     },
     routes: { admin: adminRoute },
   } = getAdminRoutes({ customAdminRoutes, customRoutes })
@@ -236,7 +236,7 @@ export async function openDocControls(page: Page): Promise<void> {
 export async function changeLocale(page: Page, newLocale: string) {
   await page.locator('.localizer >> button').first().click()
   await page
-    .locator(`.localizer .popup.popup--active .popup-button-list button`, {
+    .locator(`.localizer .popup.popup--active .popup-button-list__button`, {
       hasText: newLocale,
     })
     .first()
@@ -349,8 +349,8 @@ export function describeIfInCIOrHasLocalstack(): jest.Describe {
 type AdminRoutes = Config['admin']['routes']
 
 export function getAdminRoutes({
-  customRoutes,
   customAdminRoutes,
+  customRoutes,
 }: {
   customAdminRoutes?: AdminRoutes
   customRoutes?: Config['routes']