I18n: Use locale preference (#53293)

public/app/core/internationalization/constants.ts

@@ -1,9 +1,7 @@
-type LocaleIdentifier = `${string}-${string}`;
+export const ENGLISH_US = 'en-US';
+export const FRENCH_FRANCE = 'fr-FR';
+export const SPANISH_SPAIN = 'es-ES';
 
-export const ENGLISH_US: LocaleIdentifier = 'en-US';
-export const FRENCH_FRANCE: LocaleIdentifier = 'fr-FR';
-export const SPANISH_SPAIN: LocaleIdentifier = 'es-ES';
+export const DEFAULT_LOCALE = ENGLISH_US;
 
-export const DEFAULT_LOCALE: LocaleIdentifier = ENGLISH_US;
-
-export const VALID_LOCALES: LocaleIdentifier[] = [ENGLISH_US, FRENCH_FRANCE, SPANISH_SPAIN];
+export const VALID_LOCALES: string[] = [ENGLISH_US, FRENCH_FRANCE, SPANISH_SPAIN];

public/app/core/internationalization/index.tsx

@@ -6,17 +6,17 @@ import config from 'app/core/config';
 
 import { messages as fallbackMessages } from '../../../locales/en-US/messages';
 
-import { DEFAULT_LOCALE, FRENCH_FRANCE, SPANISH_SPAIN, VALID_LOCALES } from './constants';
+import { DEFAULT_LOCALE, VALID_LOCALES } from './constants';
 
 let i18nInstance: I18n;
 
-export async function getI18n(localInput = DEFAULT_LOCALE) {
-  if (i18nInstance) {
+export async function initI18n(localInput: string = DEFAULT_LOCALE) {
+  const validatedLocale = VALID_LOCALES.includes(localInput) ? localInput : DEFAULT_LOCALE;
+
+  if (i18nInstance && i18nInstance.locale === validatedLocale) {
     return i18nInstance;
   }
 
-  const validatedLocale = VALID_LOCALES.includes(localInput) ? localInput : DEFAULT_LOCALE;
-
   // Dynamically load the messages for the user's locale
   const imp =
     config.featureToggles.internationalization &&
@@ -53,23 +53,9 @@ interface I18nProviderProps {
 }
 export function I18nProvider({ children }: I18nProviderProps) {
   useEffect(() => {
-    let loc;
-    if (config.featureToggles.internationalization) {
-      // TODO: Use locale preference instead of weekStart
-      switch (config.bootData.user.weekStart) {
-        case 'saturday':
-          loc = SPANISH_SPAIN;
-          break;
-        case 'sunday':
-          loc = FRENCH_FRANCE;
-          break;
-        default:
-          loc = DEFAULT_LOCALE;
-          break;
-      }
-    }
+    const locale = config.featureToggles.internationalization ? config.bootData.user.locale : DEFAULT_LOCALE;
 
-    getI18n(loc);
+    initI18n(locale);
   }, []);
 
   return (