mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 05:31:22 -03:30
refactor wrapped nav components to expandable nav group component
This commit is contained in:
Jake McDermott
parent
9114c16a97
commit
5d4aa56f4a
203
src/App.jsx
203
src/App.jsx
@ -28,8 +28,7 @@ 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 NavExpandableGroup from './components/NavExpandableGroup';
|
||||
|
||||
import Applications from './pages/Applications';
|
||||
import Credentials from './pages/Credentials';
|
||||
@ -149,164 +148,58 @@ class App extends React.Component {
|
||||
{({ i18n }) => (
|
||||
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
||||
<NavList>
|
||||
<NavExpandable
|
||||
key="views"
|
||||
<NavExpandableGroup
|
||||
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"
|
||||
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') },
|
||||
]}
|
||||
/>
|
||||
<NavExpandableGroup
|
||||
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"
|
||||
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') }
|
||||
]}
|
||||
/>
|
||||
<NavExpandableGroup
|
||||
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"
|
||||
title={i18n._("Access")}
|
||||
routes={[
|
||||
{ path: '/organizations', title: i18n._('Organizations') },
|
||||
{ path: '/users', title: i18n._('Users') },
|
||||
{ path: '/teams', title: i18n._('Teams') }
|
||||
]}
|
||||
/>
|
||||
<NavExpandableGroup
|
||||
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"
|
||||
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') }
|
||||
]}
|
||||
/>
|
||||
<NavExpandableGroup
|
||||
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>
|
||||
|
||||
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') }
|
||||
]}
|
||||
/>
|
||||
</NavList>
|
||||
</Nav>
|
||||
)}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
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);
|
||||
53
src/components/NavExpandableGroup.jsx
Normal file
53
src/components/NavExpandableGroup.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
withRouter
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
NavExpandable,
|
||||
NavItem,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class NavExpandableGroup extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
const { routes } = this.props;
|
||||
// Extract a list of paths from the route params and store them for later. This creates
|
||||
// an array of url paths associated with any NavItem component rendered by this component.
|
||||
this.navItemPaths = routes.map(({ path }) => path);
|
||||
}
|
||||
|
||||
isActiveGroup = () => this.navItemPaths.some(this.isActivePath);
|
||||
|
||||
isActivePath = (path) => {
|
||||
const { history } = this.props;
|
||||
|
||||
return history.location.pathname.includes(path);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { routes, groupId, staticContext, ...rest } = this.props;
|
||||
const isActive = this.isActiveGroup();
|
||||
|
||||
return (
|
||||
<NavExpandable
|
||||
isActive={isActive}
|
||||
isExpanded={isActive}
|
||||
groupId={groupId}
|
||||
{...rest}
|
||||
>
|
||||
{routes.map(({ path, title }) => (
|
||||
<NavItem
|
||||
groupId={groupId}
|
||||
isActive={this.isActivePath(path)}
|
||||
key={path}
|
||||
to={`/#${path}`}
|
||||
>
|
||||
{title}
|
||||
</NavItem>
|
||||
))}
|
||||
</NavExpandable>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(NavExpandableGroup);
|
||||
@ -1,7 +0,0 @@
|
||||
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…
x
Reference in New Issue
Block a user