mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
refactor navitem factory function to wrapped router-hoc nav components
This commit is contained in:
Jake McDermott
parent
b2ba863569
commit
9114c16a97
327
src/App.jsx
327
src/App.jsx
@ -11,9 +11,7 @@ import {
|
||||
BackgroundImage,
|
||||
BackgroundImageSrc,
|
||||
Nav,
|
||||
NavExpandable,
|
||||
NavList,
|
||||
NavItem,
|
||||
Page,
|
||||
PageHeader,
|
||||
PageSidebar,
|
||||
@ -30,6 +28,8 @@ import HelpDropdown from './components/HelpDropdown';
|
||||
import LogoutButton from './components/LogoutButton';
|
||||
import TowerLogo from './components/TowerLogo';
|
||||
import ConditionalRedirect from './components/ConditionalRedirect';
|
||||
import NavExpandable from './components/NavExpandable';
|
||||
import NavItem from './components/NavItem';
|
||||
|
||||
import Applications from './pages/Applications';
|
||||
import Credentials from './pages/Credentials';
|
||||
@ -67,41 +67,6 @@ const language = (navigator.languages && navigator.languages[0])
|
||||
|
||||
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
|
||||
|
||||
const SideNavItems = ({ items, history }) => {
|
||||
const currentPath = history.location.pathname.split('/')[1];
|
||||
let activeGroup;
|
||||
if (currentPath !== '') {
|
||||
[{ groupName: activeGroup }] = items
|
||||
.map(({ groupName, routes }) => ({
|
||||
groupName,
|
||||
paths: routes.map(({ path }) => path)
|
||||
}))
|
||||
.filter(({ paths }) => paths.indexOf(currentPath) > -1);
|
||||
} else {
|
||||
activeGroup = 'views';
|
||||
}
|
||||
|
||||
return (items.map(({ title, groupName, routes }) => (
|
||||
<NavExpandable
|
||||
key={groupName}
|
||||
title={title}
|
||||
groupId={`${groupName}_group`}
|
||||
isActive={`${activeGroup}_group` === `${groupName}_group`}
|
||||
isExpanded={`${activeGroup}_group` === `${groupName}_group`}
|
||||
>
|
||||
{routes.map(({ path, title: itemTitle }) => (
|
||||
<NavItem
|
||||
key={path}
|
||||
to={`#/${path}`}
|
||||
groupId={`${groupName}_group`}
|
||||
isActive={currentPath === path}
|
||||
>
|
||||
{itemTitle}
|
||||
</NavItem>
|
||||
))}
|
||||
</NavExpandable>
|
||||
)));
|
||||
};
|
||||
|
||||
class App extends React.Component {
|
||||
constructor (props) {
|
||||
@ -160,7 +125,12 @@ class App extends React.Component {
|
||||
}}
|
||||
/>
|
||||
<Switch>
|
||||
<ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
|
||||
<ConditionalRedirect
|
||||
shouldRedirect={() => api.isAuthenticated()}
|
||||
redirectPath="/"
|
||||
path="/login"
|
||||
component={() => <Login logo={logo} loginInfo={loginInfo} />}
|
||||
/>
|
||||
<Fragment>
|
||||
<Page
|
||||
header={(
|
||||
@ -179,129 +149,164 @@ class App extends React.Component {
|
||||
{({ i18n }) => (
|
||||
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
||||
<NavList>
|
||||
<SideNavItems
|
||||
history={history}
|
||||
items={[
|
||||
{
|
||||
groupName: 'views',
|
||||
title: i18n._('Views'),
|
||||
routes: [
|
||||
{
|
||||
path: 'home',
|
||||
title: i18n._('Dashboard')
|
||||
},
|
||||
{
|
||||
path: 'jobs',
|
||||
title: i18n._('Jobs')
|
||||
},
|
||||
{
|
||||
path: 'schedules',
|
||||
title: i18n._('Schedules')
|
||||
},
|
||||
{
|
||||
path: 'portal',
|
||||
title: i18n._('Portal Mode')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'resources',
|
||||
title: i18n._('Resources'),
|
||||
routes: [
|
||||
{
|
||||
path: 'templates',
|
||||
title: i18n._('Templates')
|
||||
},
|
||||
{
|
||||
path: 'credentials',
|
||||
title: i18n._('Credentials')
|
||||
},
|
||||
{
|
||||
path: 'projects',
|
||||
title: i18n._('Projects')
|
||||
},
|
||||
{
|
||||
path: 'inventories',
|
||||
title: i18n._('Inventories')
|
||||
},
|
||||
{
|
||||
path: 'inventory_scripts',
|
||||
title: i18n._('Inventory Scripts')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'access',
|
||||
title: i18n._('Access'),
|
||||
routes: [
|
||||
{
|
||||
path: 'organizations',
|
||||
title: i18n._('Organizations')
|
||||
},
|
||||
{
|
||||
path: 'users',
|
||||
title: i18n._('Users')
|
||||
},
|
||||
{
|
||||
path: 'teams',
|
||||
title: i18n._('Teams')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'administration',
|
||||
title: i18n._('Administration'),
|
||||
routes: [
|
||||
{
|
||||
path: 'credential_types',
|
||||
title: i18n._('Credential Types'),
|
||||
},
|
||||
{
|
||||
path: 'notification_templates',
|
||||
title: i18n._('Notifications')
|
||||
},
|
||||
{
|
||||
path: 'management_jobs',
|
||||
title: i18n._('Management Jobs')
|
||||
},
|
||||
{
|
||||
path: 'instance_groups',
|
||||
title: i18n._('Instance Groups')
|
||||
},
|
||||
{
|
||||
path: 'applications',
|
||||
title: i18n._('Integrations')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'settings',
|
||||
title: i18n._('Settings'),
|
||||
routes: [
|
||||
{
|
||||
path: 'auth_settings',
|
||||
title: i18n._('Authentication'),
|
||||
},
|
||||
{
|
||||
path: 'jobs_settings',
|
||||
title: i18n._('Jobs')
|
||||
},
|
||||
{
|
||||
path: 'system_settings',
|
||||
title: i18n._('System')
|
||||
},
|
||||
{
|
||||
path: 'ui_settings',
|
||||
title: i18n._('User Interface')
|
||||
},
|
||||
{
|
||||
path: 'license',
|
||||
title: i18n._('License')
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<NavExpandable
|
||||
key="views"
|
||||
groupId="views_group"
|
||||
title={i18n._("Views")}>
|
||||
<NavItem key="home"
|
||||
to="/#/home"
|
||||
groupId="views_group">
|
||||
{i18n._("Dashboard")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="jobs"
|
||||
to="/#/jobs"
|
||||
groupId="views_group">
|
||||
{i18n._("Jobs")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="schedules"
|
||||
to="/#/schedules"
|
||||
groupId="views_group">
|
||||
{i18n._("Schedules")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="portal"
|
||||
to="/#/portal"
|
||||
groupId="views_group">
|
||||
{i18n._("Portal Mode")}
|
||||
</NavItem>
|
||||
</NavExpandable>
|
||||
|
||||
<NavExpandable
|
||||
key="resources"
|
||||
groupId="resources_group"
|
||||
title={i18n._("Resources")}>
|
||||
<NavItem key="templates"
|
||||
to="/#/templates"
|
||||
groupId="resources_group">
|
||||
{i18n._("Templates")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="credentials"
|
||||
to="/#/credentials"
|
||||
groupId="resources_group">
|
||||
{i18n._("Credentials")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="projects"
|
||||
to="/#/projects"
|
||||
groupId="resources_group">
|
||||
{i18n._("Projects")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="inventories"
|
||||
to="/#/inventories"
|
||||
groupId="resources_group">
|
||||
{i18n._("Inventories")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="inventory_scropts"
|
||||
to="/#/inventory_scripts"
|
||||
groupId="resources_group">
|
||||
{i18n._("Inventory Scripts")}
|
||||
</NavItem>
|
||||
</NavExpandable>
|
||||
|
||||
<NavExpandable
|
||||
key="access"
|
||||
groupId="access_group"
|
||||
title={i18n._("Access")}>
|
||||
<NavItem key="organizations"
|
||||
to="/#/organizations"
|
||||
groupId="access_group">
|
||||
{i18n._("Organizations")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="users"
|
||||
to="/#/users"
|
||||
groupId="access_group">
|
||||
{i18n._("Users")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="teams"
|
||||
to="/#/teams"
|
||||
groupId="access_group">
|
||||
{i18n._("Teams")}
|
||||
</NavItem>
|
||||
</NavExpandable>
|
||||
|
||||
<NavExpandable
|
||||
key="administration"
|
||||
groupId="administration_group"
|
||||
title={i18n._("Administration")}>
|
||||
<NavItem key="credential_types"
|
||||
to="/#/credential_types"
|
||||
groupId="administration_group">
|
||||
{i18n._("Credential Types")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="notification_templates"
|
||||
to="/#/notification_templates"
|
||||
groupId="administration_group">
|
||||
{i18n._("Notification Templates")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="management_jobs"
|
||||
to="/#/management_jobs"
|
||||
groupId="administration_group">
|
||||
{i18n._("Management Jobs")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="instance_groups"
|
||||
to="/#/instance_groups"
|
||||
groupId="administration_group">
|
||||
{i18n._("Instance Groups")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="applications"
|
||||
to="/#/applications"
|
||||
groupId="administration_group">
|
||||
{i18n._("Applications")}
|
||||
</NavItem>
|
||||
</NavExpandable>
|
||||
|
||||
|
||||
<NavExpandable
|
||||
key="settings"
|
||||
groupId="settings_group"
|
||||
title={i18n._("Settings")}>
|
||||
<NavItem key="auth_settings"
|
||||
to="/#/auth_settings"
|
||||
groupId="auth_settings">
|
||||
{i18n._("Authentication")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="jobs_settings"
|
||||
to="/#/jobs_settings"
|
||||
groupId="settings_group">
|
||||
{i18n._("Jobs")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="s"
|
||||
to="/#/system_settings"
|
||||
groupId="settings_group">
|
||||
{i18n._("System")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="ui_settings"
|
||||
to="/#/ui_settings"
|
||||
groupId="settings_group">
|
||||
{i18n._("User Interface")}
|
||||
</NavItem>
|
||||
<NavItem
|
||||
key="license"
|
||||
to="/#/license"
|
||||
groupId="settings_group">
|
||||
{i18n._("License")}
|
||||
</NavItem>
|
||||
</NavExpandable>
|
||||
|
||||
</NavList>
|
||||
</Nav>
|
||||
)}
|
||||
|
||||
44
src/components/NavExpandable.jsx
Normal file
44
src/components/NavExpandable.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
withRouter
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
NavExpandable,
|
||||
NavItem,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class NavExpandableWrapper extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
// introspect to get any child 'NavItem' components
|
||||
const { children } = this.props;
|
||||
const navItems = children.filter(({ type }) => type.componentType === NavItem.displayName);
|
||||
|
||||
// Extract a list of 'to' params from the nav items and store it for later. This will create
|
||||
// an array of the url paths associated with any child NavItem components.
|
||||
this.navItemPaths = navItems.map(item => item.props.to.replace('/#', ''));
|
||||
}
|
||||
|
||||
isActiveGroup = () => {
|
||||
const { history } = this.props;
|
||||
|
||||
return this.navItemPaths.some(path => history.location.pathname.includes(path));
|
||||
};
|
||||
|
||||
render () {
|
||||
const { children, staticContext, ...rest } = this.props;
|
||||
const isActive = this.isActiveGroup();
|
||||
|
||||
return (
|
||||
<NavExpandable
|
||||
isActive={isActive}
|
||||
isExpanded={isActive}
|
||||
{...rest}
|
||||
>
|
||||
{ children }
|
||||
</NavExpandable>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(NavExpandableWrapper);
|
||||
7
src/components/NavItem.jsx
Normal file
7
src/components/NavItem.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { NavItem } from '@patternfly/react-core';
|
||||
|
||||
export default withRouter(({ history, to, staticContext, ...props }) => (
|
||||
<NavItem to={to} isActive={history.location.pathname.includes(to.replace('/#', ''))} {...props} />
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user