add i18next and config for i18n

Signed-off-by: Michael Robinson <merobi@gmail.com>

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@types/react": "^18.0.25",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react-i18next": "^12.0.0"
+  }
+}

web/src/components/header/Header.tsx

@@ -10,6 +10,7 @@ import MqText from '../core/text/MqText'
 import NamespaceSelect from '../namespace-select/NamespaceSelect'
 import React, { ReactElement } from 'react'
 import Search from '../search/Search'
+import { useTranslation } from 'react-i18next';
 
 const styles = (theme: Theme) => {
   return createStyles({
@@ -40,6 +41,7 @@ const styles = (theme: Theme) => {
 type HeaderProps = WithStyles<typeof styles>
 
 const Header = (props: HeaderProps): ReactElement => {
+  const { t } = useTranslation();
   const { classes } = props
   return (
     <AppBar position='fixed' elevation={0} className={classes.appBar}>
@@ -53,7 +55,8 @@ const Header = (props: HeaderProps): ReactElement => {
             <NamespaceSelect />
             <Box ml={2}>
               <MqText link href={API_DOCS_URL}>
-                API Docs
+                {/* API Docs */}
+                {t('header')}
               </MqText>
             </Box>
           </Box>

web/src/components/jobs/JobDetailPage.tsx

@@ -24,6 +24,7 @@ import MqText from '../core/text/MqText'
 import RunInfo from './RunInfo'
 import RunStatus from './RunStatus'
 import Runs from './Runs'
+import { useTranslation } from 'react-i18next';
 
 const styles = ({ spacing }: ITheme) => {
   return createStyles({
@@ -52,6 +53,7 @@ const JobDetailPage: FunctionComponent<IProps> = props => {
   const handleChange = (event: ChangeEvent, newValue: SetStateAction<number>) => {
     setTab(newValue)
   }
+  const { t } = useTranslation();
 
   useEffect(() => {
     fetchRuns(job.name, job.namespace)
@@ -82,8 +84,8 @@ const JobDetailPage: FunctionComponent<IProps> = props => {
     >
       <Box mb={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
         <Tabs value={tab} onChange={handleChange} textColor='primary' indicatorColor='primary'>
-          <Tab label='LATEST RUN' disableRipple={true} />
-          <Tab label='RUN HISTORY' disableRipple={true} />
+          <Tab label={t('JobTab1')} disableRipple={true} />
+          <Tab label={t('JobTab2')} disableRipple={true} />
         </Tabs>
         <Box display={'flex'} alignItems={'center'}>
           <Box mr={1}>

web/src/i18n.js

@@ -0,0 +1,46 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: {
+      en: {
+        translation: {
+          // here we will place our translations...
+          header: 'API Docs',
+          JobTab1: 'LATEST RUN',
+          JobTab2: 'RUN HISTORY'
+        }
+      },
+      fr: {
+        translation: {
+          header: 'API Docs',
+          JobTab1: 'DERNIÈRE COURSE',
+          JobTab2: "HISTORIQUE D'EXECUTION"
+        }
+      },
+      sp: {
+        translation: {
+          header: 'API Docs',
+          JobTab1: 'ÚLTIMA EJECUCIÓN',
+          JobTab2: 'HISTORIAL DE EJECUCIONES'
+        }
+      }
+
+    }
+  });
+
+export default i18n;

web/src/index.tsx

@@ -5,4 +5,7 @@ import App from './components/App'
 // fonts
 import './index.css'
 
+// i18n
+import './i18n.js';
+
 ReactDOM.render(<App />, document.getElementById('root'))