basic functionality working

harness · Nov 26, 2024 · ad8787e · ad8787e
1 parent 59c75c4
commit ad8787e
Show file tree

Hide file tree

Showing 14 changed files with 1,173 additions and 81 deletions.
diff --git a/apps/gitness/package.json b/apps/gitness/package.json
@@ -31,6 +31,8 @@
     "clsx": "^2.1.1",
     "diff2html": "3.4.22",
     "event-source-polyfill": "^1.0.22",
+    "i18next": "^24.0.2",
+    "i18next-browser-languagedetector": "^8.0.0",
     "jotai": "^2.6.3",
     "lang-map": "^0.4.0",
     "lodash-es": "^4.17.21",
@@ -41,6 +43,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.1.1",
     "yaml": "^2.5.0",
     "zod": "^3.23.8"
   },
@@ -59,6 +62,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "immer": "^10.1.1",
     "prettier": "^3.0.3",
     "react-router-dom": "^6.26.0",
     "tailwindcss": "^3.4.4",
@@ -67,8 +71,7 @@
     "vite": "^5.4.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^2.1.2",
-    "zustand": "^4.5.4",
-    "immer": "^10.1.1"
+    "zustand": "^4.5.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

diff --git a/apps/gitness/src/App.tsx b/apps/gitness/src/App.tsx
@@ -1,3 +1,4 @@
+import { I18nextProvider } from 'react-i18next'
 import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 
 import { QueryClientProvider } from '@tanstack/react-query'
@@ -24,6 +25,7 @@ import { AppProvider } from './framework/context/AppContext'
 import { ExitConfirmProvider } from './framework/context/ExitConfirmContext'
 import { ExplorerPathsProvider } from './framework/context/ExplorerPathsContext'
 import { queryClient } from './framework/queryClient'
+import i18n from './i18n/i18n'
 import PipelineLayout from './layouts/PipelineStudioLayout'
 import PullRequestLayout from './layouts/PullRequestLayout'
 import RepoLayout from './layouts/RepoLayout'
@@ -484,17 +486,19 @@ export default function App() {
 
   return (
     <AppProvider>
-      <ThemeProvider defaultTheme="dark">
-        <QueryClientProvider client={queryClient}>
-          <TooltipProvider>
-            <ExitConfirmProvider>
-              <NuqsAdapter>
-                <RouterProvider router={router} />
-              </NuqsAdapter>
-            </ExitConfirmProvider>
-          </TooltipProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
+      <I18nextProvider i18n={i18n}>
+        <ThemeProvider defaultTheme="dark">
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
+              <ExitConfirmProvider>
+                <NuqsAdapter>
+                  <RouterProvider router={router} />
+                </NuqsAdapter>
+              </ExitConfirmProvider>
+            </TooltipProvider>
+          </QueryClientProvider>
+        </ThemeProvider>
+      </I18nextProvider>
     </AppProvider>
   )
 }
diff --git a/apps/gitness/src/i18n/i18n.ts b/apps/gitness/src/i18n/i18n.ts
@@ -0,0 +1,48 @@
+// 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'
+// import common_fr from './common-fr.json'
+
+// const resources = {
+//   en: { common }
+//   // fr: { common: common_fr }∏
+// }
+
+console.log('i18n from views', i18nextViewsInstance)
+console.log('i18n from gitness', i18n)
+
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  //   .use(
+  //     resourcesToBackend((language: string, namespace: string) => {
+  //       return import(`./${language}/${namespace}.json`)
+  //     })
+  //   )
+  .init({
+    resources: {},
+    fallbackLng: 'fr',
+    debug: true,
+    lng: 'fr',
+    interpolation: {
+      escapeValue: false
+    }
+  })
+
+i18n.on('languageChanged', lng => {
+  console.log('languageChanged here', lng)
+  i18nextViewsInstance.i18nextViewsInstance.changeLanguage('fr')
+})
+i18n.changeLanguage('fr')
+// i18nextViewsInstance.changeLanguage('fr')
+
+export default i18n
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -9,6 +9,7 @@
     "./components": "./dist/components.js",
     "./views": "./dist/views.js",
     "./hooks": "./dist/hooks.js",
+    "./internationalization": "./dist/internationalization.js",
     "./tailwind.config": "./tailwind.config.js",
     "./styles.css": "./dist/styles.css"
   },
@@ -26,7 +27,8 @@
     "test:coverage": "vitest --run --coverage",
     "test:watch": "vitest",
     "test:changed": "vitest --run --changed=origin/main",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "extract": "i18next 'src/**/*.{js,jsx,ts,tsx}' -o src/components/i18n/locales/en.json"
   },
   "types": "./dist/index.d.ts",
   "style": "./dist/styles.css",
@@ -78,11 +80,13 @@
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.5",
+    "i18next": "^24.0.2",
     "input-otp": "^1.2.4",
     "lodash-es": "^4.17.21",
     "next-themes": "^0.3.0",
     "react-day-picker": "^8.10.1",
     "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.1.1",
     "react-resizable-panels": "^2.0.19",
     "react-router-dom": "^6.26.0",
     "sonner": "^1.5.0",
@@ -107,6 +111,7 @@
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.12.0",
+    "i18next-parser": "^9.0.2",
     "jsdom": "^25.0.1",
     "tailwindcss": "^3.4.14",
     "vite": "^5.4.11",

diff --git a/packages/ui/src/components/i18n/locales/en.json b/packages/ui/src/components/i18n/locales/en.json
@@ -0,0 +1,15 @@
+{
+  "navbar": {
+    "pin": "Pin",
+    "remove": "Remove",
+    "reorder": "Reorder",
+    "unpin": "Unpin",
+    "repositories": "Repositories",
+    "pipelines": "Pipelines",
+    "executions": "Executions",
+    "databases": "Databases",
+    "artifacts": "Artifacts",
+    "infrastructure": "Infrastructure",
+    "feature-flags": "Feature Flags"
+  }
+}
diff --git a/packages/ui/src/components/i18n/locales/fr.json b/packages/ui/src/components/i18n/locales/fr.json
@@ -0,0 +1,15 @@
+{
+  "navbar": {
+    "pin": "Épingler",
+    "remove": "Supprimer",
+    "reorder": "Réorganiser",
+    "unpin": "Détacher",
+    "repositories": "Dépôts",
+    "pipelines": "Pipelines",
+    "executions": "Exécutions",
+    "databases": "Bases de données",
+    "artifacts": "Artifacts",
+    "infrastructure": "Infrastructure",
+    "feature-flags": "Drapeaux de fonctionnalité"
+  }
+}
diff --git a/packages/ui/src/components/navbar/navbar-item/index.tsx b/packages/ui/src/components/navbar/navbar-item/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { NavLink } from 'react-router-dom'
 
 import {
@@ -29,6 +30,7 @@ export const NavbarItem = ({
   handleRemoveRecentMenuItem,
   handleCustomNav
 }: NavbarItemProps) => {
+  const { t } = useTranslation()
   const iconName = item.iconName.replace('-gradient', '') as IconProps['name']
 
   const handlePin = () => {
@@ -43,25 +45,25 @@ export const NavbarItem = ({
     <>
       <DropdownMenuItem onSelect={handlePin}>
         <Text size={2} truncate>
-          Pin
+          {t('navbar.pin')}
         </Text>
       </DropdownMenuItem>
       <DropdownMenuItem onSelect={handleRemoveRecent}>
         <Text size={2} truncate>
-          Remove
+          {t('navbar.remove')}
         </Text>
       </DropdownMenuItem>
     </>
   ) : (
     <>
       <DropdownMenuItem onSelect={handleCustomNav}>
         <Text size={2} truncate>
-          Reorder
+          {t('navbar.reorder')}
         </Text>
       </DropdownMenuItem>
       <DropdownMenuItem onSelect={handlePin}>
         <Text size={2} truncate>
-          Unpin
+          {t('navbar.unpin')}
         </Text>
       </DropdownMenuItem>
     </>

diff --git a/packages/ui/src/data/navbar-menu-data.ts b/packages/ui/src/data/navbar-menu-data.ts
@@ -1,57 +1,59 @@
 import { MenuGroupType, MenuGroupTypes } from '@components/navbar/types'
 
+import { i18nextViewsInstance } from '../i18n/i18n'
+
 export const navbarMenuData: MenuGroupType[] = [
   {
     groupId: 0,
-    title: 'Devops',
+    title: i18nextViewsInstance.t('navbar.devops'),
     type: MenuGroupTypes.GENERAL,
     items: [
       {
         id: 0,
         iconName: 'repositories-gradient',
-        title: 'Repositories',
+        title: i18nextViewsInstance.t('navbar.repositories'),
         description: 'Integrated & familiar git experience.',
         to: '/repos'
       },
       {
         id: 1,
         iconName: 'pipelines-gradient',
-        title: 'Pipelines',
+        title: i18nextViewsInstance.t('navbar.pipelines'),
         description: 'Up to 4X faster than other solutions.',
         to: '/pipelines'
       },
       {
         id: 2,
         iconName: 'execution-gradient',
-        title: 'Executions',
+        title: i18nextViewsInstance.t('navbar.executions'),
         description: 'Optimize feature rollout velocity.',
         to: '/executions'
       },
       {
         id: 3,
         iconName: 'database-gradient',
-        title: 'Databases',
+        title: i18nextViewsInstance.t('navbar.databases'),
         description: 'Manage all your infrastructure.',
         to: '/databases'
       },
       {
         id: 4,
         iconName: 'artifacts-gradient',
-        title: 'Artifacts',
+        title: i18nextViewsInstance.t('navbar.artifacts'),
         description: 'Validate service resilience.',
         to: '/sandbox/executions/artifacts'
       },
       {
         id: 5,
         iconName: 'infrastructure-gradient',
-        title: 'Infrastructure',
+        title: i18nextViewsInstance.t('navbar.infrastructure'),
         description: 'Manage all your infrastructure.',
         to: '/infrastructure'
       },
       {
         id: 6,
         iconName: 'flag-gradient',
-        title: 'Feature Flags',
+        title: i18nextViewsInstance.t('navbar.feature-flags'),
         description: 'Optimize feature rollout velocity.',
         to: '/feature-flags'
       }

diff --git a/packages/ui/src/data/pinned-menu-items-data.ts b/packages/ui/src/data/pinned-menu-items-data.ts
@@ -1,24 +1,28 @@
 import { NavbarItemType } from '@components/navbar/types'
 
+// import { t } from 'i18next'
+
+import { i18nextViewsInstance } from '../i18n/i18n'
+
 export const pinnedMenuItemsData: NavbarItemType[] = [
   {
     id: 0,
     iconName: 'repositories-gradient',
-    title: 'Repositories',
+    title: i18nextViewsInstance.t('navbar.repositories'),
     description: 'Integrated & familiar git experience.',
     to: '/repos'
   },
   {
     id: 1,
     iconName: 'pipelines-gradient',
-    title: 'Pipelines',
+    title: i18nextViewsInstance.t('navbar.pipelines'),
     description: 'Up to 4X faster than other solutions.',
     to: '/pipelines'
   },
   {
     id: 2,
     iconName: 'execution-gradient',
-    title: 'Executions',
+    title: i18nextViewsInstance.t('navbar.executions'),
     description: 'Optimize feature rollout velocity.',
     to: '/executions'
   }

diff --git a/packages/ui/src/i18n/i18n.ts b/packages/ui/src/i18n/i18n.ts
@@ -0,0 +1,27 @@
+import { initReactI18next } from 'react-i18next'
+
+import { createInstance } from 'i18next'
+
+import en_navbar from '../components/i18n/locales/en.json'
+import fr_navbar from '../components/i18n/locales/fr.json'
+
+// import fr from './fr.json'
+
+// const resources = {
+//   en: { translation: en },
+//   fr: { translation: fr }
+// }
+const resources = {
+  en: { translation: en_navbar },
+  fr: { translation: fr_navbar }
+}
+export const i18nextViewsInstance = createInstance({
+  resources,
+  fallbackLng: 'en',
+  //   lng: 'fr',
+  interpolation: {
+    escapeValue: false
+  }
+})
+i18nextViewsInstance.use(initReactI18next)
+i18nextViewsInstance.init()
diff --git a/packages/ui/src/i18n/index.ts b/packages/ui/src/i18n/index.ts
@@ -0,0 +1 @@
+export * as i18nextViewsInstance from './i18n'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -2,6 +2,7 @@
 
 import * as components from './components'
 import * as hooks from './hooks'
+import * as internationalization from './i18n/i18n'
 import * as views from './views'
 
-export { components, views, hooks }
+export { components, views, hooks, internationalization }
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
         components: resolve(__dirname, 'src/components/index.ts'),
         views: resolve(__dirname, 'src/views/index.ts'),
         hooks: resolve(__dirname, 'src/hooks/index.ts'),
+        internationalization: resolve(__dirname, 'src/i18n/index.ts'),
         index: resolve(__dirname, 'src/index.ts')
       },
       formats: ['es']