Portafly: Adding reacti18next

portafly/package.json

@@ -10,10 +10,13 @@
     "dotenv-expand": "5.1.0",
     "fs-extra": "^8.1.0",
     "history": "^4.10.1",
+    "i18next": "^19.3.3",
+    "i18next-browser-languagedetector": "^4.0.2",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
     "react-async": "^10.0.0",
     "react-dom": "^16.12.0",
+    "react-i18next": "^11.3.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-router-last-location": "^2.0.1",
@@ -25,6 +28,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/i18next": "^13.0.0",
+    "@types/i18next-browser-languagedetector": "^3.0.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -126,7 +131,8 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
       "@src": "<rootDir>/src/root.ts",
       "@src/(.*)": "<rootDir>/src/$1",
-      "@test/(.*)": "<rootDir>/src/tests/$1"
+      "@test/(.*)": "<rootDir>/src/tests/$1",
+      "i18next": "<rootDir>/src/tests/__mocks__/reacti18nextMock.js"
     },
     "moduleFileExtensions": [
       "web.js",

portafly/src/App.tsx

@@ -1,53 +1,12 @@
 import 'react-app-polyfill/ie11'
-import { Brand } from '@patternfly/react-core'
 import React from 'react'
-import { BrowserRouter as Router, Redirect, useHistory } from 'react-router-dom'
-import { AppLayout, SwitchWith404, LazyRoute } from 'components'
+import { BrowserRouter as Router, Redirect } from 'react-router-dom'
+import { SwitchWith404, LazyRoute, Root } from 'components'
 import { LastLocationProvider } from 'react-router-last-location'
-import logo from 'assets/logo.svg'
-
-const Logo = <Brand src={logo} alt="patternfly logo" />
-const navItems = [
-  {
-    title: 'Overview',
-    to: '/',
-    exact: true
-  },
-  {
-    title: 'Analytics',
-    to: '/analytics',
-    items: [
-      { to: '/analytics/usage', title: 'Usage' }
-    ]
-  },
-  {
-    title: 'Applications',
-    to: '/applications',
-    items: [
-      { to: '/applications', title: 'Listing' },
-      { to: '/applications/plans', title: 'Application Plans' }
-    ]
-  },
-  {
-    title: 'Integration',
-    to: '/integration',
-    items: [
-      { to: '/integration/configuration', title: 'Configuration' }
-    ]
-  }
-]
 
 const getOverviewPage = () => import('pages/Overview')
 const getApplicationsPage = () => import('pages/Applications')
 
-const App = () => (
-  <Router>
-    <LastLocationProvider>
-      <Root />
-    </LastLocationProvider>
-  </Router>
-)
-
 const PagesSwitch = () => (
   <SwitchWith404>
     <LazyRoute path="/" exact getComponent={getOverviewPage} />
@@ -56,25 +15,14 @@ const PagesSwitch = () => (
   </SwitchWith404>
 )
 
-const Root = () => {
-  const history = useHistory()
-  const logoProps = React.useMemo(
-    () => ({
-      onClick: () => history.push('/')
-    }),
-    [history]
-  )
-  return (
-    <AppLayout
-      logo={Logo}
-      logoProps={logoProps}
-      navVariant="vertical"
-      navItems={navItems}
-      navGroupsStyle="expandable"
-    >
-      <PagesSwitch />
-    </AppLayout>
-  )
-}
+const App = () => (
+  <Router>
+    <LastLocationProvider>
+      <Root>
+        <PagesSwitch />
+      </Root>
+    </LastLocationProvider>
+  </Router>
+)
 
 export { App }

portafly/src/components/Root.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Brand } from '@patternfly/react-core'
+import { useTranslation } from 'i18n/useTranslation'
+import { useHistory } from 'react-router-dom'
+import { AppLayout } from 'components'
+import logo from 'assets/logo.svg'
+
+const Root: React.FunctionComponent = ({ children }) => {
+  const { t } = useTranslation('shared')
+  const Logo = <Brand src={logo} alt={t('logo_alt_text')} />
+
+  const navItems = [
+    {
+      title: t('nav_items.overview'),
+      to: '/',
+      exact: true
+    },
+    {
+      title: t('nav_items.analytics'),
+      to: '/analytics',
+      items: [
+        { to: '/analytics/usage', title: t('nav_items.analytics_usage') }
+      ]
+    },
+    {
+      title: t('nav_items.applications'),
+      to: '/applications',
+      items: [
+        { to: '/applications', title: t('nav_items.applications_listing') },
+        { to: '/applications/plans', title: t('nav_items.applications_app_plans') }
+      ]
+    },
+    {
+      title: t('nav_items.integration'),
+      to: '/integration',
+      items: [
+        { to: '/integration/configuration', title: t('nav_items.integration_configuration') }
+      ]
+    }
+  ]
+
+  const history = useHistory()
+  const logoProps = React.useMemo(
+    () => ({
+      onClick: () => history.push('/')
+    }),
+    [history]
+  )
+  return (
+    <AppLayout
+      logo={Logo}
+      logoProps={logoProps}
+      navVariant="vertical"
+      navItems={navItems}
+      navGroupsStyle="expandable"
+    >
+      {children}
+    </AppLayout>
+  )
+}
+
+export { Root }

portafly/src/components/index.tsx

@@ -8,3 +8,4 @@ export * from './Loading'
 export * from './NotFound'
 export * from './SwitchWith404'
 export * from './util'
+export * from './Root'

portafly/src/i18n/i18n.tsx

@@ -0,0 +1,34 @@
+import i18n, { FormatFunction } from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+import { ITranslationsPages, Translations, EN } from 'i18n'
+
+const formatFn: FormatFunction = (value, format) => {
+  if (format === 'uppercase') return value.toUpperCase()
+  if (format === 'lowercase') return value.toLowerCase()
+  return value
+}
+
+const sections: Array<ITranslationsPages> = ['shared', 'overview', 'analytics', 'applications', 'integration']
+
+const options = {
+  lng: EN,
+  fallbackLng: [EN],
+  debug: false,
+  interpolation: {
+    format: formatFn,
+    escapeValue: false
+  },
+  ns: sections,
+  defaultNS: 'shared',
+  react: {
+    transKeepBasicHtmlNodesFor: ['br', 'strong', 'i']
+  },
+  resources: Translations
+}
+
+i18n.use(LanguageDetector)
+  .use(initReactI18next)
+  .init(options)
+
+export { i18n }

portafly/src/i18n/index.ts

@@ -0,0 +1,4 @@
+export * from './i18n'
+export * from './locales'
+export * from './supported-languages'
+export * from './useTranslation'

portafly/src/i18n/locales/en/analytics.json

@@ -0,0 +1,8 @@
+{
+  "page_title": "Analytics | Portafly",
+  "page_title_desc": "Page title of the Analytics page",
+  "body_title": "Analytics",
+  "body_title_desc": "Body title of the Analytics page",
+  "subtitle": "This is the Analytics page",
+  "subtitle_desc": "Subtitle of the Analytics page"
+}

portafly/src/i18n/locales/en/applications.json

@@ -0,0 +1,8 @@
+{
+  "page_title": "Applications | Portafly",
+  "page_title_desc": "Page title of the Applications page",
+  "body_title": "Applications",
+  "body_title_desc": "Body title of the Applications page",
+  "subtitle": "This is the Applications page",
+  "subtitle_desc": "Subtitle of the Applications page"
+}

portafly/src/i18n/locales/en/index.ts

@@ -0,0 +1,13 @@
+import shared from 'i18n/locales/en/shared.json'
+import overview from 'i18n/locales/en/overview.json'
+import analytics from 'i18n/locales/en/analytics.json'
+import applications from 'i18n/locales/en/applications.json'
+import integration from 'i18n/locales/en/integration.json'
+
+export {
+  shared,
+  overview,
+  analytics,
+  applications,
+  integration
+}

portafly/src/i18n/locales/en/integration.json

@@ -0,0 +1,8 @@
+{
+  "page_title": "Integration | Portafly",
+  "page_title_desc": "Page title of the Integration page",
+  "body_title": "Integration",
+  "body_title_desc": "Body title of the Integration page",
+  "subtitle": "This is the Integration page",
+  "subtitle_desc": "Subtitle of the Integration page"
+}

portafly/src/i18n/locales/en/overview.json

@@ -0,0 +1,8 @@
+{
+  "page_title": "Overview | Portafly",
+  "page_title_desc": "Page title of the Overview page",
+  "body_title": "Overview",
+  "body_title_desc": "Body title of the Overview page",
+  "subtitle": "This is the Overview page",
+  "subtitle_desc": "Subtitle of the Overview page"
+}

portafly/src/i18n/locales/en/shared.json

@@ -0,0 +1,30 @@
+{
+  "logo_alt_text": "Red Hat Integration logo",
+  "logo_alt_text_desc": "Alt attribute of the main logo",
+  "nav_items": {
+    "overview": "Overview",
+    "overview_desc": "Title of Overview menu item",
+    "analytics": "Analytics",
+    "analytics_desc": "Title of Analytics menu item",
+    "analytics_usage": "Usage",
+    "analytics_usage_desc": "Title of Analytics > Usage menu item",
+    "applications": "Applications",
+    "applications_desc": "Title of Applications menu item",
+    "applications_listing": "Listing",
+    "applications_listing_desc": "Title of Applications > Listing menu item",
+    "applications_app_plans": "Applications Plans",
+    "applications_app_plans_desc": "Title of Applications > Applications Plans menu item",
+    "integration": "Integration",
+    "integration_desc": "Title of Integration menu item",
+    "integration_configuration": "Configuration",
+    "integration_configuration_desc": "Title of Integration > Configuration menu item"
+  },
+  "navigation_items_desc": "Titles of navigation items",
+  "format": {
+    "uppercase": "{{text, uppercase}}",
+    "uppercase_desc": "Formats a text as uppercase",
+    "lowercase": "{{text, lowercase}}",
+    "lowercase_desc": "Formats a text as lowercase"
+  },
+  "format_desc": "Utilities to format text"
+}

portafly/src/i18n/locales/index.ts

@@ -0,0 +1,11 @@
+import { ISupportedLanguages } from 'i18n'
+import * as en from 'i18n/locales/en'
+
+export type ITranslationsPages = keyof typeof en
+export type ITranslations = { [P in ITranslationsPages]: any }
+
+const Translations: Record<ISupportedLanguages, ITranslations> = {
+  en
+}
+
+export { Translations }

portafly/src/i18n/supported-languages.ts

@@ -0,0 +1,3 @@
+export const EN = 'en'
+
+export type ISupportedLanguages = typeof EN // | typeof ...

portafly/src/i18n/useTranslation.ts

@@ -0,0 +1,14 @@
+import { useTranslation, UseTranslationOptions } from 'react-i18next'
+import { ITranslationsPages } from 'i18n'
+
+/**
+ * This wrapper mostly allow us to control what strings we pass
+ * into useTranslation and provides the IDE with intellisense for
+ * that matter.
+ */
+const useTranslationWrapper = (
+  ns?: ITranslationsPages | Array<ITranslationsPages>,
+  options?: UseTranslationOptions
+) => useTranslation(ns, options)
+
+export { useTranslationWrapper as useTranslation }

portafly/src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import '@patternfly/react-core/dist/styles/base.css'
+import 'i18n/i18n'
 import { App } from 'App'
 
 ReactDOM.render(<App />, document.getElementById('root'))

portafly/src/pages/Applications.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'i18n/useTranslation'
 import { useFetch } from 'react-async'
 import { useDocumentTitle } from 'components'
 import {
@@ -11,7 +12,8 @@ import {
 import { Table, TableHeader, TableBody } from '@patternfly/react-table'
 
 const Applications: React.FunctionComponent = () => {
-  useDocumentTitle('Applications')
+  const { t } = useTranslation('applications')
+  useDocumentTitle(t('page_title'))
 
   const columns = [
     'Name',
@@ -48,22 +50,22 @@ const Applications: React.FunctionComponent = () => {
     <>
       <PageSection variant={PageSectionVariants.light}>
         <TextContent>
-          <Text component="h1">Applications</Text>
+          <Text component="h1">{t('body_title')}</Text>
         </TextContent>
         <TextContent>
           <Text component={TextVariants.p}>
-            This is the applications screen.
+            {t('subtitle')}
           </Text>
         </TextContent>
       </PageSection>
 
       <PageSection>
         {rows
           && (
-          <Table cells={columns} rows={rows}>
-            <TableHeader />
-            <TableBody />
-          </Table>
+            <Table cells={columns} rows={rows}>
+              <TableHeader />
+              <TableBody />
+            </Table>
           )}
       </PageSection>
     </>