feat: add i18n support with German, English, Spanish, and French translations

.env

@@ -75,4 +75,5 @@ FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false
 FEATURE_FLUX_DEPLOYMENTS_ENABLE=false
 FEATURE_LINK_EXTERNAL_FLUX_ENABLE=false
 FEATURE_CANARY_ROLLOUT_PROGRESS_ENABLE=true
-COMMAND_BAR_REFETCH_INTERVAL=3600
+COMMAND_BAR_REFETCH_INTERVAL=3600
+GOOGLE_API_KEY=

package.json

@@ -20,6 +20,7 @@
         "dompurify": "^3.2.4",
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^10.3.0",
+        "lingo.dev": "^0.117.4",
         "moment": "^2.29.4",
         "query-string": "^7.1.1",
         "react": "^17.0.2",

src/components/Navigation/Navigation.tsx

@@ -16,6 +16,7 @@
 
 import { MouseEvent, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
+import { LocaleSwitcher } from 'lingo.dev/react/client'
 
 import {
     AnimatePresence,
@@ -259,6 +260,7 @@
                             showTooltip
                         />
                     )}
+                    <LocaleSwitcher locales={['en', 'es', 'fr', 'de']} />
                 </nav>
                 <AnimatePresence>
                     {isExpanded && (

src/index.tsx

@@ -20,9 +20,11 @@
 import * as Sentry from '@sentry/browser'
 import { CaptureConsole } from '@sentry/integrations'
 import { BrowserTracing } from '@sentry/tracing'
+import { LingoProviderWrapper, loadDictionary } from 'lingo.dev/react/client'
 
 import {
     customEnv,
+    DevtronProgressing,
     OverrideMergeStrategyType,
     QueryClientProvider,
     ThemeProvider,
@@ -187,18 +189,20 @@
 ReactDOM.render(
     <React.StrictMode>
         {window.top === window.self ? (
-            <QueryClientProvider>
-                <ThemeProvider>
-                    <BrowserRouter basename={window.__BASE_URL__}>
-                        <UseRegisterShortcutProvider>
-                            <UserEmailProvider>
-                                <App />
-                            </UserEmailProvider>
-                        </UseRegisterShortcutProvider>
-                        <ToastManagerContainer />
-                    </BrowserRouter>
-                </ThemeProvider>
-            </QueryClientProvider>
+            <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)} fallback={<DevtronProgressing />}>
+                <QueryClientProvider>
+                    <ThemeProvider>
+                        <BrowserRouter basename={window.__BASE_URL__}>
+                            <UseRegisterShortcutProvider>
+                                <UserEmailProvider>
+                                    <App />
+                                </UserEmailProvider>
+                            </UseRegisterShortcutProvider>
+                            <ToastManagerContainer />
+                        </BrowserRouter>
+                    </ThemeProvider>
+                </QueryClientProvider>
+            </LingoProviderWrapper>
         ) : null}
     </React.StrictMode>,
     root,