mirror of
https://github.com/ansible/awx.git
synced 2026-05-09 10:27:37 -02:30
refactor wrapped nav components to expandable nav group component
This commit is contained in:
Jake McDermott
203
src/App.jsx
203
src/App.jsx
@@ -28,8 +28,7 @@ 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 NavExpandableGroup from './components/NavExpandableGroup';
|
||||||
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';
|
||||||
@@ -149,164 +148,58 @@ class App extends React.Component {
|
|||||||
{({ i18n }) => (
|
{({ i18n }) => (
|
||||||
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
||||||
<NavList>
|
<NavList>
|
||||||
<NavExpandable
|
<NavExpandableGroup
|
||||||
key="views"
|
|
||||||
groupId="views_group"
|
groupId="views_group"
|
||||||
title={i18n._("Views")}>
|
title={i18n._("Views")}
|
||||||
<NavItem key="home"
|
routes={[
|
||||||
to="/#/home"
|
{ path: '/home', title: i18n._('Dashboard') },
|
||||||
groupId="views_group">
|
{ path: '/jobs', title: i18n._('Jobs') },
|
||||||
{i18n._("Dashboard")}
|
{ path: '/schedules', title: i18n._('Schedules') },
|
||||||
</NavItem>
|
{ path: '/portal', title: i18n._('Portal Mode') },
|
||||||
<NavItem
|
]}
|
||||||
key="jobs"
|
/>
|
||||||
to="/#/jobs"
|
<NavExpandableGroup
|
||||||
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"
|
groupId="resources_group"
|
||||||
title={i18n._("Resources")}>
|
title={i18n._("Resources")}
|
||||||
<NavItem key="templates"
|
routes={[
|
||||||
to="/#/templates"
|
{ path: '/templates', title: i18n._('Templates') },
|
||||||
groupId="resources_group">
|
{ path: '/credentials', title: i18n._('Credentials') },
|
||||||
{i18n._("Templates")}
|
{ path: '/projects', title: i18n._('Projects') },
|
||||||
</NavItem>
|
{ path: '/inventories', title: i18n._('Inventories') },
|
||||||
<NavItem
|
{ path: '/inventory_scripts', title: i18n._('Inventory Scripts') }
|
||||||
key="credentials"
|
]}
|
||||||
to="/#/credentials"
|
/>
|
||||||
groupId="resources_group">
|
<NavExpandableGroup
|
||||||
{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"
|
groupId="access_group"
|
||||||
title={i18n._("Access")}>
|
title={i18n._("Access")}
|
||||||
<NavItem key="organizations"
|
routes={[
|
||||||
to="/#/organizations"
|
{ path: '/organizations', title: i18n._('Organizations') },
|
||||||
groupId="access_group">
|
{ path: '/users', title: i18n._('Users') },
|
||||||
{i18n._("Organizations")}
|
{ path: '/teams', title: i18n._('Teams') }
|
||||||
</NavItem>
|
]}
|
||||||
<NavItem
|
/>
|
||||||
key="users"
|
<NavExpandableGroup
|
||||||
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"
|
groupId="administration_group"
|
||||||
title={i18n._("Administration")}>
|
title={i18n._("Administration")}
|
||||||
<NavItem key="credential_types"
|
routes={[
|
||||||
to="/#/credential_types"
|
{ path: '/credential_types', title: i18n._('Credential Types') },
|
||||||
groupId="administration_group">
|
{ path: '/notification_templates', title: i18n._('Notifications') },
|
||||||
{i18n._("Credential Types")}
|
{ path: '/management_jobs', title: i18n._('Management Jobs') },
|
||||||
</NavItem>
|
{ path: '/instance_groups', title: i18n._('Instance Groups') },
|
||||||
<NavItem
|
{ path: '/applications', title: i18n._('Integrations') }
|
||||||
key="notification_templates"
|
]}
|
||||||
to="/#/notification_templates"
|
/>
|
||||||
groupId="administration_group">
|
<NavExpandableGroup
|
||||||
{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"
|
groupId="settings_group"
|
||||||
title={i18n._("Settings")}>
|
title={i18n._("Settings")}
|
||||||
<NavItem key="auth_settings"
|
routes={[
|
||||||
to="/#/auth_settings"
|
{ path: '/auth_settings', title: i18n._('Authentication') },
|
||||||
groupId="auth_settings">
|
{ path: '/jobs_settings', title: i18n._('Jobs') },
|
||||||
{i18n._("Authentication")}
|
{ path: '/system_settings', title: i18n._('System') },
|
||||||
</NavItem>
|
{ path: '/ui_settings', title: i18n._('User Interface') },
|
||||||
<NavItem
|
{ path: '/license', title: i18n._('License') }
|
||||||
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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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} />
|
|
||||||
));
|
|
||||||
Reference in New Issue
Block a user