From 718d3728ddffc08416d9031ba1b11651136627d4 Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Thu, 28 May 2020 15:18:02 -0400 Subject: [PATCH] Relocate route config and remove route render props --- awx/ui_next/src/App.jsx | 11 +- awx/ui_next/src/App.test.jsx | 41 +++-- awx/ui_next/src/index.jsx | 263 +++++---------------------------- awx/ui_next/src/routeConfig.js | 181 +++++++++++++++++++++++ 4 files changed, 244 insertions(+), 252 deletions(-) create mode 100644 awx/ui_next/src/routeConfig.js diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx index df2291fbd5..5348548af5 100644 --- a/awx/ui_next/src/App.jsx +++ b/awx/ui_next/src/App.jsx @@ -136,12 +136,7 @@ class App extends Component { version, configError, } = this.state; - const { - i18n, - render = () => {}, - routeGroups = [], - navLabel = '', - } = this.props; + const { i18n, routeConfig = [], navLabel = '', children } = this.props; const header = ( - {routeGroups.map(({ groupId, groupTitle, routes }) => ( + {routeConfig.map(({ groupId, groupTitle, routes }) => ( - {render({ routeGroups })} + {children} ', () => { }); test('expected content is rendered', () => { + const routeConfig = [ + { + groupTitle: 'Group One', + groupId: 'group_one', + routes: [ + { title: 'Foo', path: '/foo' }, + { title: 'Bar', path: '/bar' }, + ], + }, + { + groupTitle: 'Group Two', + groupId: 'group_two', + routes: [{ title: 'Fiz', path: '/fiz' }], + }, + ]; const appWrapper = mountWithContexts( - - routeGroups.map(({ groupId }) =>
) - } - /> + + {routeConfig.map(({ groupId }) => ( +
+ ))} + ); // page components @@ -64,7 +64,6 @@ describe('', () => { expect(appWrapper.find('a[href="/#/bar"]').length).toBe(1); expect(appWrapper.find('a[href="/#/fiz"]').length).toBe(1); - // inline render expect(appWrapper.find('#group_one').length).toBe(1); expect(appWrapper.find('#group_two').length).toBe(1); }); diff --git a/awx/ui_next/src/index.jsx b/awx/ui_next/src/index.jsx index 779b12b772..3e19aa6b26 100644 --- a/awx/ui_next/src/index.jsx +++ b/awx/ui_next/src/index.jsx @@ -2,41 +2,18 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Route, Switch, Redirect } from 'react-router-dom'; import { I18n } from '@lingui/react'; -import { t } from '@lingui/macro'; import '@patternfly/react-core/dist/styles/base.css'; import { isAuthenticated } from './util/auth'; import Background from './components/Background'; -import Applications from './screens/Application'; -import Credentials from './screens/Credential'; -import CredentialTypes from './screens/CredentialType'; -import Dashboard from './screens/Dashboard'; -import Hosts from './screens/Host'; -import InstanceGroups from './screens/InstanceGroup'; -import Inventory from './screens/Inventory'; -import InventoryScripts from './screens/InventoryScript'; -import { Jobs } from './screens/Job'; -import Login from './screens/Login'; -import ManagementJobs from './screens/ManagementJob'; -import NotificationTemplates from './screens/NotificationTemplate'; -import Organizations from './screens/Organization'; -import Portal from './screens/Portal'; -import Projects from './screens/Project'; -import Schedules from './screens/Schedule'; -import AuthSettings from './screens/AuthSetting'; -import JobsSettings from './screens/JobsSetting'; -import SystemSettings from './screens/SystemSetting'; -import UISettings from './screens/UISetting'; -import License from './screens/License'; -import Teams from './screens/Team'; -import Templates from './screens/Template'; -import Users from './screens/User'; import NotFound from './screens/NotFound'; +import Login from './screens/Login'; import App from './App'; import RootProvider from './RootProvider'; import { BrandName } from './variables'; +import getRouteConfig from './routeConfig'; // eslint-disable-next-line import/prefer-default-export export function main(render) { @@ -56,21 +33,19 @@ export function main(render) { /> ); - const defaultRedirect = () => { - if (isAuthenticated(document.cookie)) { - return ; - } - return ( - - {removeTrailingSlash} - } - /> + const AppRoute = ({ auth, children, ...rest }) => + // eslint-disable-next-line no-nested-ternary + auth ? ( + isAuthenticated(document.cookie) ? ( + {children} + ) : ( - + ) + ) : isAuthenticated(document.cookie) ? ( + + ) : ( + {children} ); - }; return render( @@ -79,191 +54,33 @@ export function main(render) { {removeTrailingSlash} - - - { - if (!isAuthenticated(document.cookie)) { - return ; - } - return ( - { - const routeList = routeGroups - .reduce( - (allRoutes, { routes }) => allRoutes.concat(routes), - [] - ) - .map(({ component: PageComponent, path }) => ( - ( - - )} - /> - )); - routeList.push( - - ); - return {routeList}; - }} - /> - ); - }} - /> + + + + + + + + + + {getRouteConfig(i18n) + .flatMap(({ routes }) => routes) + .map(({ path, screen: Screen }) => ( + } + /> + )) + .concat( + + + + )} + + + )} diff --git a/awx/ui_next/src/routeConfig.js b/awx/ui_next/src/routeConfig.js new file mode 100644 index 0000000000..37f1732cb0 --- /dev/null +++ b/awx/ui_next/src/routeConfig.js @@ -0,0 +1,181 @@ +import { t } from '@lingui/macro'; + +import Applications from './screens/Application'; +import Credentials from './screens/Credential'; +import CredentialTypes from './screens/CredentialType'; +import Dashboard from './screens/Dashboard'; +import Hosts from './screens/Host'; +import InstanceGroups from './screens/InstanceGroup'; +import Inventory from './screens/Inventory'; +import InventoryScripts from './screens/InventoryScript'; +import { Jobs } from './screens/Job'; +import ManagementJobs from './screens/ManagementJob'; +import NotificationTemplates from './screens/NotificationTemplate'; +import Organizations from './screens/Organization'; +import Portal from './screens/Portal'; +import Projects from './screens/Project'; +import Schedules from './screens/Schedule'; +import AuthSettings from './screens/AuthSetting'; +import JobsSettings from './screens/JobsSetting'; +import SystemSettings from './screens/SystemSetting'; +import UISettings from './screens/UISetting'; +import License from './screens/License'; +import Teams from './screens/Team'; +import Templates from './screens/Template'; +import Users from './screens/User'; + +// Ideally, this should just be a regular object that we export, but we +// need the i18n. When lingui3 arrives, we will be able to import i18n +// directly and we can replace this function with a simple export. + +function getRouteConfig(i18n) { + return [ + { + groupTitle: i18n._(t`Views`), + groupId: 'views_group', + routes: [ + { + title: i18n._(t`Dashboard`), + path: '/home', + screen: Dashboard, + }, + { + title: i18n._(t`Jobs`), + path: '/jobs', + screen: Jobs, + }, + { + title: i18n._(t`Schedules`), + path: '/schedules', + screen: Schedules, + }, + { + title: i18n._(t`My View`), + path: '/portal', + screen: Portal, + }, + ], + }, + { + groupTitle: i18n._(t`Resources`), + groupId: 'resources_group', + routes: [ + { + title: i18n._(t`Templates`), + path: '/templates', + screen: Templates, + }, + { + title: i18n._(t`Credentials`), + path: '/credentials', + screen: Credentials, + }, + { + title: i18n._(t`Projects`), + path: '/projects', + screen: Projects, + }, + { + title: i18n._(t`Inventories`), + path: '/inventories', + screen: Inventory, + }, + { + title: i18n._(t`Hosts`), + path: '/hosts', + screen: Hosts, + }, + { + title: i18n._(t`Inventory Scripts`), + path: '/inventory_scripts', + screen: InventoryScripts, + }, + ], + }, + { + groupTitle: i18n._(t`Access`), + groupId: 'access_group', + routes: [ + { + title: i18n._(t`Organizations`), + path: '/organizations', + screen: Organizations, + }, + { + title: i18n._(t`Users`), + path: '/users', + screen: Users, + }, + { + title: i18n._(t`Teams`), + path: '/teams', + screen: Teams, + }, + ], + }, + { + groupTitle: i18n._(t`Administration`), + groupId: 'administration_group', + routes: [ + { + title: i18n._(t`Credential Types`), + path: '/credential_types', + screen: CredentialTypes, + }, + { + title: i18n._(t`Notifications`), + path: '/notification_templates', + screen: NotificationTemplates, + }, + { + title: i18n._(t`Management Jobs`), + path: '/management_jobs', + screen: ManagementJobs, + }, + { + title: i18n._(t`Instance Groups`), + path: '/instance_groups', + screen: InstanceGroups, + }, + { + title: i18n._(t`Integrations`), + path: '/applications', + screen: Applications, + }, + ], + }, + { + groupTitle: i18n._(t`Settings`), + groupId: 'settings_group', + routes: [ + { + title: i18n._(t`Authentication`), + path: '/auth_settings', + screen: AuthSettings, + }, + { + title: i18n._(t`Jobs`), + path: '/jobs_settings', + screen: JobsSettings, + }, + { + title: i18n._(t`System`), + path: '/system_settings', + screen: SystemSettings, + }, + { + title: i18n._(t`User Interface`), + path: '/ui_settings', + screen: UISettings, + }, + { + title: i18n._(t`License`), + path: '/license', + screen: License, + }, + ], + }, + ]; +} + +export default getRouteConfig;