fix: trying to get i18n working

apps/gitness/src/components/RootWrapper.tsx

@@ -1,6 +1,7 @@
 import { SandboxRoot } from '@harnessio/ui/views'
 
 import { useAppContext } from '../framework/context/AppContext'
+import { handleLanguageChange } from '../i18n/i18n'
 
 // import { useGetSpaceURLParam } from '../framework/hooks/useGetSpaceParam'
 
@@ -19,6 +20,7 @@ const RootWrapper = () => {
         recentMenu={[]}
         changePinnedMenu={_data => {}}
         changeRecentMenu={_data => {}}
+        handleLanguageChange={handleLanguageChange}
       />
     </>
   )

apps/gitness/src/i18n/i18n.ts

@@ -1,12 +1,8 @@
-// import LanguageDetector from 'i18next-browser-languagedetector'
-
 import { initReactI18next } from 'react-i18next'
 
 import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 
-// import resourcesToBackend from 'i18next-resources-to-backend'
-
 import { i18nextViewsInstance } from '@harnessio/ui/internationalization'
 
 // import common from './en/common.json'
@@ -16,33 +12,49 @@ import { i18nextViewsInstance } from '@harnessio/ui/internationalization'
 //   en: { common }
 //   // fr: { common: common_fr }∏
 // }
+const languageDetectorOptions = {
+  // Order and from where user language should be detected
+  order: ['cookie', 'localStorage', 'navigator'],
 
-console.log('i18n from views', i18nextViewsInstance)
-console.log('i18n from gitness', i18n)
+  // Keys to search language in
+  lookupQuerystring: 'lng',
+  lookupCookie: 'i18next',
+  lookupLocalStorage: 'i18nextLng',
+
+  // Cache user language on
+  caches: ['cookie', 'localStorage']
+}
 
 i18n
   .use(initReactI18next)
   .use(LanguageDetector)
-  //   .use(
-  //     resourcesToBackend((language: string, namespace: string) => {
-  //       return import(`./${language}/${namespace}.json`)
-  //     })
-  //   )
   .init({
+    detection: languageDetectorOptions,
     resources: {},
-    fallbackLng: 'fr',
+    fallbackLng: 'en',
+    // lng: 'en',
     debug: true,
-    lng: 'fr',
+    react: {
+      bindI18n: 'loaded languageChanged',
+      bindI18nStore: 'added',
+      useSuspense: true
+    },
+    // lng: 'fr',
     interpolation: {
       escapeValue: false
     }
   })
 
+export const handleLanguageChange = (lng: string) => {
+  console.log('handleLanguageChange here', lng)
+  i18n.changeLanguage(lng)
+  i18nextViewsInstance.i18nextViewsInstance.changeLanguage(lng)
+}
+
 i18n.on('languageChanged', lng => {
   console.log('languageChanged here', lng)
-  i18nextViewsInstance.i18nextViewsInstance.changeLanguage('fr')
+  i18nextViewsInstance.i18nextViewsInstance.changeLanguage('en')
 })
-i18n.changeLanguage('en')
-// i18nextViewsInstance.changeLanguage('fr')
+// i18n.changeLanguage('en')
 
 export default i18n

packages/ui/src/components/navbar/data.ts

@@ -40,5 +40,12 @@ export const userMenuItems: UserMenuItemType[] = [
     title: 'Log out',
     to: null,
     isSeparated: true
+  },
+  {
+    key: UserMenuKeys.CHANGE_LANGUAGE,
+    iconName: 'settings-1',
+    title: 'Language',
+    to: null,
+    isSeparated: false
   }
 ]

packages/ui/src/components/navbar/index.tsx

@@ -24,6 +24,7 @@ interface NavbarProps {
   handleLogOut: () => void
   handleChangePinnedMenuItem: (item: NavbarItemType) => void
   handleRemoveRecentMenuItem: (item: NavbarItemType) => void
+  handleLanguageChange: (lang: string) => void
 }
 
 export const Navbar = ({
@@ -37,7 +38,8 @@ export const Navbar = ({
   handleCustomNav,
   handleLogOut,
   handleChangePinnedMenuItem,
-  handleRemoveRecentMenuItem
+  handleRemoveRecentMenuItem,
+  handleLanguageChange
 }: NavbarProps) => {
   const location = useLocation()
 
@@ -108,7 +110,12 @@ export const Navbar = ({
       </NavbarSkeleton.Content>
 
       <NavbarSkeleton.Footer>
-        <NavbarUser currentUser={currentUser} handleCustomNav={handleCustomNav} handleLogOut={handleLogOut} />
+        <NavbarUser
+          currentUser={currentUser}
+          handleCustomNav={handleCustomNav}
+          handleLogOut={handleLogOut}
+          handleLanguageChange={handleLanguageChange}
+        />
       </NavbarSkeleton.Footer>
     </NavbarSkeleton.Root>
   )

packages/ui/src/components/navbar/navbar-user/index.tsx

@@ -61,9 +61,10 @@ interface NavbarUserProps {
   currentUser: TypesUser | undefined
   handleCustomNav: () => void
   handleLogOut: () => void
+  handleLanguageChange: (lang: string) => void
 }
 
-export const NavbarUser = ({ currentUser, handleCustomNav, handleLogOut }: NavbarUserProps) => {
+export const NavbarUser = ({ currentUser, handleCustomNav, handleLogOut, handleLanguageChange }: NavbarUserProps) => {
   const username = currentUser?.display_name || currentUser?.uid || ''
 
   const menuItems = useMemo(() => {
@@ -76,6 +77,8 @@ export const NavbarUser = ({ currentUser, handleCustomNav, handleLogOut }: Navba
             return handleCustomNav()
           case UserMenuKeys.LOG_OUT:
             return handleLogOut()
+          case UserMenuKeys.CHANGE_LANGUAGE:
+            return handleLanguageChange('fr')
           default:
             return
         }

packages/ui/src/components/navbar/types.ts

@@ -27,7 +27,8 @@ export enum UserMenuKeys {
   THEME = 'theme',
   CUSTOM_NAV = 'customNavigation',
   ADMINISTRATION = 'administration',
-  LOG_OUT = 'logOut'
+  LOG_OUT = 'logOut',
+  CHANGE_LANGUAGE = 'changeLanguage'
 }
 
 export interface UserMenuItemType {

packages/ui/src/i18n/i18n.ts

@@ -18,7 +18,12 @@ const resources = {
 export const i18nextViewsInstance = createInstance({
   resources,
   fallbackLng: 'en',
-  //   lng: 'fr',
+  react: {
+    bindI18n: 'loaded languageChanged',
+    bindI18nStore: 'added',
+    useSuspense: true
+  },
+  // lng: i18nextViewsInstance.options.lng,
   interpolation: {
     escapeValue: false
   }

packages/ui/src/views/layouts/SandboxRoot.tsx

@@ -43,6 +43,7 @@ interface SandboxRootProps {
   logout?: () => void
   changePinnedMenu: (items: NavbarItemIdType[]) => void
   changeRecentMenu: (items: NavbarItemIdType[]) => void
+  handleLanguageChange: (lang: string) => void
 }
 
 export const SandboxRoot = ({
@@ -51,7 +52,8 @@ export const SandboxRoot = ({
   recentMenu,
   logout,
   changePinnedMenu,
-  changeRecentMenu
+  changeRecentMenu,
+  handleLanguageChange
 }: SandboxRootProps) => {
   const location = useLocation()
   const [recentMenuItems, setRecentMenuItems] = useState<NavbarItemType[]>([])
@@ -217,6 +219,7 @@ export const SandboxRoot = ({
           pinnedMenuItems={pinnedMenuItems}
           handleChangePinnedMenuItem={handleChangePinnedMenuItem}
           handleRemoveRecentMenuItem={handleRemoveRecentMenuItem}
+          handleLanguageChange={handleLanguageChange}
         />
       </SandboxLayout.LeftPanel>
       <Outlet />