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,
|
BackgroundImage,
|
||||||
BackgroundImageSrc,
|
BackgroundImageSrc,
|
||||||
Nav,
|
Nav,
|
||||||
NavExpandable,
|
|
||||||
NavList,
|
NavList,
|
||||||
NavItem,
|
|
||||||
Page,
|
Page,
|
||||||
PageHeader,
|
PageHeader,
|
||||||
PageSidebar,
|
PageSidebar,
|
||||||
@ -30,6 +28,8 @@ import HelpDropdown from './components/HelpDropdown';
|
|||||||
import LogoutButton from './components/LogoutButton';
|
import LogoutButton from './components/LogoutButton';
|
||||||
import TowerLogo from './components/TowerLogo';
|
import TowerLogo from './components/TowerLogo';
|
||||||
import ConditionalRedirect from './components/ConditionalRedirect';
|
import ConditionalRedirect from './components/ConditionalRedirect';
|
||||||
|
import NavExpandable from './components/NavExpandable';
|
||||||
|
import NavItem from './components/NavItem';
|
||||||
|
|
||||||
import Applications from './pages/Applications';
|
import Applications from './pages/Applications';
|
||||||
import Credentials from './pages/Credentials';
|
import Credentials from './pages/Credentials';
|
||||||
@ -67,41 +67,6 @@ const language = (navigator.languages && navigator.languages[0])
|
|||||||
|
|
||||||
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[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 {
|
class App extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
@ -160,7 +125,12 @@ class App extends React.Component {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Switch>
|
<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>
|
<Fragment>
|
||||||
<Page
|
<Page
|
||||||
header={(
|
header={(
|
||||||
@ -179,129 +149,164 @@ class App extends React.Component {
|
|||||||
{({ i18n }) => (
|
{({ i18n }) => (
|
||||||
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
||||||
<NavList>
|
<NavList>
|
||||||
<SideNavItems
|
<NavExpandable
|
||||||
history={history}
|
key="views"
|
||||||
items={[
|
groupId="views_group"
|
||||||
{
|
title={i18n._("Views")}>
|
||||||
groupName: 'views',
|
<NavItem key="home"
|
||||||
title: i18n._('Views'),
|
to="/#/home"
|
||||||
routes: [
|
groupId="views_group">
|
||||||
{
|
{i18n._("Dashboard")}
|
||||||
path: 'home',
|
</NavItem>
|
||||||
title: i18n._('Dashboard')
|
<NavItem
|
||||||
},
|
key="jobs"
|
||||||
{
|
to="/#/jobs"
|
||||||
path: 'jobs',
|
groupId="views_group">
|
||||||
title: i18n._('Jobs')
|
{i18n._("Jobs")}
|
||||||
},
|
</NavItem>
|
||||||
{
|
<NavItem
|
||||||
path: 'schedules',
|
key="schedules"
|
||||||
title: i18n._('Schedules')
|
to="/#/schedules"
|
||||||
},
|
groupId="views_group">
|
||||||
{
|
{i18n._("Schedules")}
|
||||||
path: 'portal',
|
</NavItem>
|
||||||
title: i18n._('Portal Mode')
|
<NavItem
|
||||||
},
|
key="portal"
|
||||||
]
|
to="/#/portal"
|
||||||
},
|
groupId="views_group">
|
||||||
{
|
{i18n._("Portal Mode")}
|
||||||
groupName: 'resources',
|
</NavItem>
|
||||||
title: i18n._('Resources'),
|
</NavExpandable>
|
||||||
routes: [
|
|
||||||
{
|
<NavExpandable
|
||||||
path: 'templates',
|
key="resources"
|
||||||
title: i18n._('Templates')
|
groupId="resources_group"
|
||||||
},
|
title={i18n._("Resources")}>
|
||||||
{
|
<NavItem key="templates"
|
||||||
path: 'credentials',
|
to="/#/templates"
|
||||||
title: i18n._('Credentials')
|
groupId="resources_group">
|
||||||
},
|
{i18n._("Templates")}
|
||||||
{
|
</NavItem>
|
||||||
path: 'projects',
|
<NavItem
|
||||||
title: i18n._('Projects')
|
key="credentials"
|
||||||
},
|
to="/#/credentials"
|
||||||
{
|
groupId="resources_group">
|
||||||
path: 'inventories',
|
{i18n._("Credentials")}
|
||||||
title: i18n._('Inventories')
|
</NavItem>
|
||||||
},
|
<NavItem
|
||||||
{
|
key="projects"
|
||||||
path: 'inventory_scripts',
|
to="/#/projects"
|
||||||
title: i18n._('Inventory Scripts')
|
groupId="resources_group">
|
||||||
}
|
{i18n._("Projects")}
|
||||||
]
|
</NavItem>
|
||||||
},
|
<NavItem
|
||||||
{
|
key="inventories"
|
||||||
groupName: 'access',
|
to="/#/inventories"
|
||||||
title: i18n._('Access'),
|
groupId="resources_group">
|
||||||
routes: [
|
{i18n._("Inventories")}
|
||||||
{
|
</NavItem>
|
||||||
path: 'organizations',
|
<NavItem
|
||||||
title: i18n._('Organizations')
|
key="inventory_scropts"
|
||||||
},
|
to="/#/inventory_scripts"
|
||||||
{
|
groupId="resources_group">
|
||||||
path: 'users',
|
{i18n._("Inventory Scripts")}
|
||||||
title: i18n._('Users')
|
</NavItem>
|
||||||
},
|
</NavExpandable>
|
||||||
{
|
|
||||||
path: 'teams',
|
<NavExpandable
|
||||||
title: i18n._('Teams')
|
key="access"
|
||||||
}
|
groupId="access_group"
|
||||||
]
|
title={i18n._("Access")}>
|
||||||
},
|
<NavItem key="organizations"
|
||||||
{
|
to="/#/organizations"
|
||||||
groupName: 'administration',
|
groupId="access_group">
|
||||||
title: i18n._('Administration'),
|
{i18n._("Organizations")}
|
||||||
routes: [
|
</NavItem>
|
||||||
{
|
<NavItem
|
||||||
path: 'credential_types',
|
key="users"
|
||||||
title: i18n._('Credential Types'),
|
to="/#/users"
|
||||||
},
|
groupId="access_group">
|
||||||
{
|
{i18n._("Users")}
|
||||||
path: 'notification_templates',
|
</NavItem>
|
||||||
title: i18n._('Notifications')
|
<NavItem
|
||||||
},
|
key="teams"
|
||||||
{
|
to="/#/teams"
|
||||||
path: 'management_jobs',
|
groupId="access_group">
|
||||||
title: i18n._('Management Jobs')
|
{i18n._("Teams")}
|
||||||
},
|
</NavItem>
|
||||||
{
|
</NavExpandable>
|
||||||
path: 'instance_groups',
|
|
||||||
title: i18n._('Instance Groups')
|
<NavExpandable
|
||||||
},
|
key="administration"
|
||||||
{
|
groupId="administration_group"
|
||||||
path: 'applications',
|
title={i18n._("Administration")}>
|
||||||
title: i18n._('Integrations')
|
<NavItem key="credential_types"
|
||||||
}
|
to="/#/credential_types"
|
||||||
]
|
groupId="administration_group">
|
||||||
},
|
{i18n._("Credential Types")}
|
||||||
{
|
</NavItem>
|
||||||
groupName: 'settings',
|
<NavItem
|
||||||
title: i18n._('Settings'),
|
key="notification_templates"
|
||||||
routes: [
|
to="/#/notification_templates"
|
||||||
{
|
groupId="administration_group">
|
||||||
path: 'auth_settings',
|
{i18n._("Notification Templates")}
|
||||||
title: i18n._('Authentication'),
|
</NavItem>
|
||||||
},
|
<NavItem
|
||||||
{
|
key="management_jobs"
|
||||||
path: 'jobs_settings',
|
to="/#/management_jobs"
|
||||||
title: i18n._('Jobs')
|
groupId="administration_group">
|
||||||
},
|
{i18n._("Management Jobs")}
|
||||||
{
|
</NavItem>
|
||||||
path: 'system_settings',
|
<NavItem
|
||||||
title: i18n._('System')
|
key="instance_groups"
|
||||||
},
|
to="/#/instance_groups"
|
||||||
{
|
groupId="administration_group">
|
||||||
path: 'ui_settings',
|
{i18n._("Instance Groups")}
|
||||||
title: i18n._('User Interface')
|
</NavItem>
|
||||||
},
|
<NavItem
|
||||||
{
|
key="applications"
|
||||||
path: 'license',
|
to="/#/applications"
|
||||||
title: i18n._('License')
|
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>
|
</NavList>
|
||||||
</Nav>
|
</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