feat(ui): support locale change option from UI (#9553)

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -11,7 +11,9 @@
  *  limitations under the License.
  */
 
-import { Badge, Dropdown, Image, Input, Menu, Space } from 'antd';
+import { Badge, Dropdown, Image, Input, Menu, Select, Space } from 'antd';
+import { CookieStorage } from 'cookie-storage';
+import i18next from 'i18next';
 import { debounce, toString } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,6 +34,10 @@ import {
   getEntityType,
   prepareFeedLink,
 } from '../../utils/FeedUtils';
+import {
+  languageSelectOptions,
+  SupportedLocales,
+} from '../../utils/i18next/i18nextUtil';
 import {
   inPageSearchOptions,
   isInPageSearchAllowed,
@@ -50,6 +56,9 @@ import { WhatsNewModal } from '../Modals/WhatsNewModal';
 import NotificationBox from '../NotificationBox/NotificationBox.component';
 import { useWebSocketConnector } from '../web-scoket/web-scoket.provider';
 import { NavBarProps } from './NavBar.interface';
+
+const cookieStorage = new CookieStorage();
+
 const NavBar = ({
   supportDropdown,
   profileDropdown,
@@ -86,6 +95,10 @@ const NavBar = ({
     [currentUser]
   );
 
+  const [language, setLanguage] = useState(
+    cookieStorage.getItem('i18next') || SupportedLocales.English
+  );
+
   const { socket } = useWebSocketConnector();
 
   const navStyle = (value: boolean) => {
@@ -262,6 +275,11 @@ const NavBar = ({
     }
   }, [profilePicture]);
 
+  const handleLanguageChange = (langCode: string) => {
+    setLanguage(langCode);
+    i18next.changeLanguage(langCode);
+  };
+
   return (
     <>
       <div className="tw-h-16 tw-py-3 tw-border-b-2 tw-border-separator tw-bg-white">
@@ -374,7 +392,13 @@ const NavBar = ({
               ))}
           </div>
           <Space className="tw-ml-auto">
-            <Space size={24}>
+            <Space size={16}>
+              <Select
+                bordered={false}
+                options={languageSelectOptions}
+                value={language}
+                onChange={handleLanguageChange}
+              />
               <NavLink
                 className="focus:tw-no-underline"
                 data-testid="appbar-item-settings"

openmetadata-ui/src/main/resources/ui/src/utils/i18next/i18nextUtil.ts

@@ -12,18 +12,33 @@
  */
 
 import { InitOptions } from 'i18next';
+import { map } from 'lodash';
 import enUS from '../../locale/languages/en-us.json';
 import frFR from '../../locale/languages/fr-fr.json';
 
+export enum SupportedLocales {
+  English = 'en-US',
+  Français = 'fr-FR',
+}
+
+export const languageSelectOptions = map(SupportedLocales, (value, key) => ({
+  label: key,
+  value,
+}));
+
 // Returns i18next options
 export const getInitOptions = (): InitOptions => {
   return {
-    supportedLngs: ['en-US', 'fr-FR'],
+    supportedLngs: Object.values(SupportedLocales),
     resources: {
       'en-US': { translation: enUS },
       'fr-FR': { translation: frFR },
     },
     fallbackLng: ['en-US'],
+    detection: {
+      order: ['cookie'],
+      caches: ['cookie'], // cache user language on
+    },
     interpolation: {
       escapeValue: false, // XSS safety provided by React
     },