From 6efd523db24736db371dc129c9d1c9f28f9ff74e Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Wed, 2 Jan 2019 01:30:08 -0500 Subject: [PATCH] move wrapper / shared components out of App component --- src/App.jsx | 168 +++++++++------------- src/index.jsx | 333 ++++++++++++++++++++++++-------------------- src/pages/Login.jsx | 38 +++-- 3 files changed, 267 insertions(+), 272 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 07e7021ddf..c64bbb022e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,10 +2,8 @@ import React, { Fragment } from 'react'; import { ConfigContext } from './context'; import { - HashRouter as Router, Redirect, Switch, - withRouter, Route, } from 'react-router-dom'; import { @@ -19,30 +17,16 @@ import { ToolbarItem } from '@patternfly/react-core'; import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens'; -import { I18nProvider, I18n } from '@lingui/react'; -import { t } from '@lingui/macro'; import api from './api'; import { API_LOGOUT, API_CONFIG } from './endpoints'; -import ja from '../build/locales/ja/messages'; -import en from '../build/locales/en/messages'; import Login from './pages/Login'; -import Background from './components/Background'; import HelpDropdown from './components/HelpDropdown'; import LogoutButton from './components/LogoutButton'; import TowerLogo from './components/TowerLogo'; import NavExpandableGroup from './components/NavExpandableGroup'; -const catalogs = { en, ja }; -// Derive the language and the 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]; - - class App extends React.Component { constructor(props) { super(props); @@ -83,94 +67,80 @@ class App extends React.Component { render () { const { config, isNavOpen } = this.state; - // extract a flattened array of all routes from the provided route config - const { logo, loginInfo, routeGroups = [] } = this.props; + const { logo, loginInfo, navLabel, routeGroups = [] } = this.props; return ( - - - - {({ i18n }) => ( - api.isAuthenticated () ? ( - - - } /> - } /> - ( - - this.onNavToggle()} - logo={( - - )} - toolbar={( - - - - - - - this.onDevLogout()} - /> - - - - )} + api.isAuthenticated () ? ( + + } /> + } /> + ( + + this.onNavToggle()} + logo={( + + )} + toolbar={( + + + + + + + this.onDevLogout()} /> - )} - sidebar={( - - - { - routeGroups.map(params => ) - } - - - )} - /> - )} - > + + + + )} + /> + )} + sidebar={( + + { - // - // Extract a flattened array of all route params from the provided route groups - // and use it to create the route components. - // - // [{ routes }, { routes }] -> [route, route, route] -> () - // - routeGroups - .reduce((allRoutes, { routes }) => allRoutes.concat(routes), []) - .map(({ component: Component, path }) => ( - } /> - )) + routeGroups.map(params => ) } - - - )} /> - - - ) : ( - - } /> - - - ) - )} - - - + + + )} + /> + )} + > + { + // + // Extract a flattened array of all route params from the provided route config + // and use it to render route components. + // + // [{ routes }, { routes }] -> [route, route, route] -> () + // + routeGroups + .reduce((allRoutes, { routes }) => allRoutes.concat(routes), []) + .map(({ component: Component, path }) => ( + } /> + )) + } + + + )} /> + + ) : ( + + } /> + + + ) ); } } diff --git a/src/index.jsx b/src/index.jsx index 03a4264183..ed95e8b74e 100644 --- a/src/index.jsx +++ b/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( - , el); + + + + {({ i18n }) => ( + + + + )} + + + , el); }; export default main(); diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index ba7917f9a3..20690940b2 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -10,8 +10,6 @@ import { import towerLogo from '../../images/tower-logo-header.svg'; import api from '../api'; -import Background from '../components/Background'; - class AtLogin extends Component { constructor (props) { super(props); @@ -66,25 +64,23 @@ class AtLogin extends Component { return ( {({ i18n }) => ( - - - - - + + + )} );