fix(ui): adds fallback locale when defaultLocale is unavailable (#11614)

Author: jessrynkar

packages/ui/src/fields/Array/index.tsx

@@ -69,7 +69,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
 
   const editingDefaultLocale = (() => {
     if (localization && localization.fallback) {
-      const defaultLocale = localization.defaultLocale || 'en'
+      const defaultLocale = localization.defaultLocale
       return locale === defaultLocale
     }
 

packages/ui/src/fields/Blocks/index.tsx

@@ -76,7 +76,7 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
 
   const editingDefaultLocale = (() => {
     if (localization && localization.fallback) {
-      const defaultLocale = localization.defaultLocale || 'en'
+      const defaultLocale = localization.defaultLocale
       return locale === defaultLocale
     }
 

packages/ui/src/forms/NullifyField/index.tsx

@@ -24,12 +24,15 @@ export const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({
     config: { localization },
   } = useConfig()
   const [checked, setChecked] = React.useState<boolean>(typeof fieldValue !== 'number')
-  const defaultLocale =
-    localization && localization.defaultLocale ? localization.defaultLocale : 'en'
   const { t } = useTranslation()
 
-  if (!localized || currentLocale === defaultLocale || (localization && !localization.fallback)) {
-    // hide when field is not localized or editing default locale or when fallback is disabled
+  if (!localized || !localization) {
+    // hide when field is not localized or localization is not enabled
+    return null
+  }
+
+  if (localization.defaultLocale === currentLocale || !localization.fallback) {
+    // if editing default locale or when fallback is disabled
     return null
   }
 

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

@@ -48,22 +48,22 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
 
   const { user } = useAuth()
 
-  const defaultLocale =
-    localization && localization.defaultLocale ? localization.defaultLocale : 'en'
+  const defaultLocale = localization ? localization.defaultLocale : 'en'
 
   const { getPreference, setPreference } = usePreferences()
   const localeFromParams = useSearchParams().get('locale')
 
   const [locale, setLocale] = React.useState<Locale>(() => {
-    if (!localization) {
+    if (!localization || (localization && !localization.locales.length)) {
       // TODO: return null V4
       return {} as Locale
     }
 
     return (
       findLocaleFromCode(localization, localeFromParams) ||
       findLocaleFromCode(localization, initialLocaleFromPrefs) ||
-      findLocaleFromCode(localization, defaultLocale)
+      findLocaleFromCode(localization, defaultLocale) ||
+      findLocaleFromCode(localization, localization.locales[0].code)
     )
   })
 
@@ -97,14 +97,16 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
       if (localization && user?.id) {
         const localeToUse =
           localeFromParams ||
-          (await fetchPreferences<Locale['code']>('locale', fetchURL)?.then((res) => res.value)) ||
-          defaultLocale
+          (await fetchPreferences<Locale['code']>('locale', fetchURL)?.then((res) => res.value))
 
         const newLocale =
           findLocaleFromCode(localization, localeToUse) ||
-          findLocaleFromCode(localization, defaultLocale)
+          findLocaleFromCode(localization, defaultLocale) ||
+          findLocaleFromCode(localization, localization?.locales?.[0]?.code)
 
-        setLocale(newLocale)
+        if (newLocale) {
+          setLocale(newLocale)
+        }
       }
     }