feat(admin-ui): Add display name + pull supported languages from config (#5028)

.changeset/early-months-nail.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+feat(admin-ui): Add display name + pull supported languages from config

packages/admin-ui/ui/src/domain/settings/personal-information/language-settings/language-menu.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
 import { Select } from "@medusajs/ui"
+import { supportedLanguages } from "../../../../i18n"
 
 const LanguageMenu: React.FC = () => {
   const { i18n } = useTranslation()
@@ -16,9 +17,9 @@ const LanguageMenu: React.FC = () => {
           <Select.Value />
         </Select.Trigger>
         <Select.Content>
-          {i18n.languages.map((lng) => (
-            <Select.Item key={lng} value={lng}>
-              {lng}
+          {supportedLanguages.map((lng) => (
+            <Select.Item key={lng.locale} value={lng.locale}>
+              {lng.name}
             </Select.Item>
           ))}
         </Select.Content>

packages/admin-ui/ui/src/i18n/index.ts

@@ -1,7 +1,14 @@
 import i18n from "i18next"
-import { initReactI18next } from "react-i18next"
-import Backend from "i18next-http-backend"
 import LanguageDetector from "i18next-browser-languagedetector"
+import Backend from "i18next-http-backend"
+import { initReactI18next } from "react-i18next"
+
+export const supportedLanguages = [
+  {
+    locale: "en",
+    name: "English",
+  },
+]
 
 void i18n
   .use(Backend)
@@ -9,7 +16,8 @@ void i18n
   .use(initReactI18next)
   // https://www.i18next.com/overview/configuration-options
   .init({
-    fallbackLng: ["en"],
+    supportedLngs: supportedLanguages.map((l) => l.locale),
+    fallbackLng: "en",
     returnNull: false,
     debug: true,
     interpolation: {