move wrapper / shared components out of App component

src/index.jsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import { render } from 'react-dom';
-
-import App from './App';
-import api from './api';
+import {
+  HashRouter as Router,
+  Switch,
+} from 'react-router-dom';
+import {
+  I18n,
+  I18nProvider,
+} from '@lingui/react';
+import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly-next/patternfly.css';
-
 import './app.scss';
 import './components/Pagination/styles.scss';
 import './components/DataListToolbar/styles.scss';
 
+import api from './api';
+import App from './App';
+import Background from './components/Background';
 import Applications from './pages/Applications';
 import Credentials from './pages/Credentials';
 import CredentialTypes from './pages/CredentialTypes';
@@ -34,150 +42,16 @@ import License from './pages/License';
 import Teams from './pages/Teams';
 import Templates from './pages/Templates';
 import Users from './pages/Users';
+import ja from '../build/locales/ja/messages';
+import en from '../build/locales/en/messages';
 
-const routeGroups = [
-  {
-    groupId: 'views_group',
-    title: 'Views',
-    routes: [
-      {
-        path: '/home',
-        title: 'Dashboard',
-        component: Dashboard
-      },
-      {
-        path: '/jobs',
-        title: 'Jobs',
-        component: Jobs
-      },
-      {
-        path: '/schedules',
-        title: 'Schedules',
-        component: Schedules
-      },
-      {
-        path: '/portal',
-        title: 'Portal Mode',
-        component: Portal
-      },
-    ],
-  },
-  {
-    groupId: 'resources_group',
-    title: "Resources",
-    routes: [
-      {
-        path: '/templates',
-        title: 'Templates',
-        component: Templates
-      },
-      {
-        path: '/credentials',
-        title: 'Credentials',
-        component: Credentials
-      },
-      {
-        path: '/projects',
-        title: 'Projects',
-        component: Projects
-      },
-      {
-        path: '/inventories',
-        title: 'Inventories',
-        component: Inventories
-      },
-      {
-        path: '/inventory_scripts',
-        title: 'Inventory Scripts',
-        component: InventoryScripts
-      },
-    ],
-  },
-  {
-    groupId: 'access_group',
-    title: 'Access',
-    routes: [
-      {
-        path: '/organizations',
-        title: 'Organizations',
-        component: Organizations
-      },
-      {
-        path: '/users',
-        title: 'Users',
-        component: Users
-      },
-      {
-        path: '/teams',
-        title: 'Teams',
-        component: Teams
-      },
-    ],
-  },
-  {
-    groupId: 'administration_group',
-    title: 'Administration',
-    routes: [
-      {
-        path: '/credential_types',
-        title: 'Credential Types',
-        component: CredentialTypes
-      },
-      {
-        path: '/notification_templates',
-        title: 'Notifications',
-        component: NotificationTemplates
-      },
-      {
-        path: '/management_jobs',
-        title: 'Management Jobs',
-        component: ManagementJobs
-      },
-      {
-        path: '/instance_groups',
-        title: 'Instance Groups',
-        component: InstanceGroups
-      },
-      {
-        path: '/applications',
-        title: 'Integrations',
-        component: Applications
-      },
-    ],
-  },
-  {
-    groupId: 'settings_group',
-    title: 'Settings',
-    routes: [
-      {
-        path: '/auth_settings',
-        title: 'Authentication',
-        component: AuthSettings
-      },
-      {
-        path: '/jobs_settings',
-        title: 'Jobs',
-        component: JobsSettings
-      },
-      {
-        path: '/system_settings',
-        title: 'System',
-        component: SystemSettings
-      },
-      {
-        path: '/ui_settings',
-        title: 'User Interface',
-        component: UISettings
-      },
-      {
-        path: '/license',
-        title: 'License',
-        component: License
-      },
-    ],
-  },
-];
-
+const catalogs = { en, ja };
+// Derive the language and region from global user agent data. Example: es-US
+// https://developer.mozilla.org/en-US/docs/Web/API/Navigator
+const language = (navigator.languages && navigator.languages[0])
+  || navigator.language
+  || navigator.userLanguage;
+const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
 
 export async function main () {
   const el = document.getElementById('app');
@@ -186,11 +60,166 @@ export async function main () {
   const { custom_logo, custom_login_info } = data;
 
   render(
-    <App
-      logo={custom_logo}
-      loginInfo={custom_login_info}
-      routeGroups={routeGroups}
-    />, el);
+    <Router>
+      <I18nProvider
+        language={languageWithoutRegionCode}
+        catalogs={catalogs}
+      >
+        <I18n>
+          {({ i18n }) => (
+            <Background>
+              <App
+                logo={custom_logo}
+                loginInfo={custom_login_info}
+                navLabel={i18n._(t`Primary Navigation`)}
+                routeGroups={[
+                  {
+                    title: i18n._(t`Views`),
+                    groupId: 'views_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Dashboard`),
+                        path: '/home',
+                        component: Dashboard
+                      },
+                      {
+                        title: i18n._(t`Jobs`),
+                        path: '/jobs',
+                        component: Jobs
+                      },
+                      {
+                        title: i18n._(t`Schedules`),
+                        path: '/schedules',
+                        component: Schedules
+                      },
+                      {
+                        title: i18n._(t`Portal Mode`),
+                        path: '/portal',
+                        component: Portal
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Resources`),
+                    groupId: 'resources_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Templates`),
+                        path: '/templates',
+                        component: Templates
+                      },
+                      {
+                        title: i18n._(t`Credentials`),
+                        path: '/credentials',
+                        component: Credentials
+                      },
+                      {
+                        title: i18n._(t`Projects`),
+                        path: '/projects',
+                        component: Projects
+                      },
+                      {
+                        title: i18n._(t`Inventories`),
+                        path: '/inventories',
+                        component: Inventories
+                      },
+                      {
+                        title: i18n._(t`Inventory Scripts`),
+                        path: '/inventory_scripts',
+                        component: InventoryScripts
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Access`),
+                    groupId: 'access_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Organizations`),
+                        path: '/organizations',
+                        component: Organizations
+                      },
+                      {
+                        title: i18n._(t`Users`),
+                        path: '/users',
+                        component: Users
+                      },
+                      {
+                        title: i18n._(t`Teams`),
+                        path: '/teams',
+                        component: Teams
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Administration`),
+                    groupId: 'administration_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Credential Types`),
+                        path: '/credential_types',
+                        component: CredentialTypes
+                      },
+                      {
+                        title: i18n._(t`Notifications`),
+                        path: '/notification_templates',
+                        component: NotificationTemplates
+                      },
+                      {
+                        title: i18n._(t`Management Jobs`),
+                        path: '/management_jobs',
+                        component: ManagementJobs
+                      },
+                      {
+                        title: i18n._(t`Instance Groups`),
+                        path: '/instance_groups',
+                        component: InstanceGroups
+                      },
+                      {
+                        title: i18n._(t`Integrations`),
+                        path: '/applications',
+                        component: Applications
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Settings`),
+                    groupId: 'settings_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Authentication`),
+                        path: '/auth_settings',
+                        component: AuthSettings
+                      },
+                      {
+                        title: i18n._(t`Jobs`),
+                        path: '/jobs_settings',
+                        component: JobsSettings
+                      },
+                      {
+                        title: i18n._(t`System`),
+                        path: '/system_settings',
+                        component: SystemSettings
+                      },
+                      {
+                        title: i18n._(t`User Interface`),
+                        path: '/ui_settings',
+                        component: UISettings
+                      },
+                      {
+                        title: i18n._(t`License`),
+                        path: '/license',
+                        component: License
+                      },
+                    ],
+                  },
+                ]}
+              />
+            </Background>
+          )}
+        </I18n>
+      </I18nProvider>
+    </Router>, el);
 };
 
 export default main();