External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 09:07:45 -02:30
Code Issues Packages Projects Releases Wiki Activity

Update active nav item based on url

Browse Source
This commit is contained in:
Marliana Lara
2018-12-03 13:17:53 -05:00
parent 1e7ab9deed
commit 9341c4660c
3 changed files with 306 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
__tests__/App.test.jsx
View File

@@ -1,5 +1,8 @@
import React from 'react';
import { HashRouter as Router } from 'react-router-dom';
import { shallow, mount } from 'enzyme';
import { createMemoryHistory } from 'history'
import App from '../src/App';
import api from '../src/api';
import { API_LOGOUT } from '../src/endpoints';
@@ -21,7 +24,7 @@ describe('<App />', () => {
api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(false);
const appWrapper = mount(<App />);
const appWrapper = mount(<Router><App /></Router>);
const login = appWrapper.find(Login);
expect(login.length).toBe(1);
@@ -33,7 +36,7 @@ describe('<App />', () => {
api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(true);
const appWrapper = mount(<App />);
const appWrapper = mount(<Router><App /></Router>);
const dashboard = appWrapper.find(Dashboard);
expect(dashboard.length).toBe(1);
@@ -42,39 +45,47 @@ describe('<App />', () => {
});
test('onNavSelect sets state.activeItem and state.activeGroup', () => {
const appWrapper = shallow(<App />);
appWrapper.instance().onNavSelect({ itemId: 'foo', groupId: 'bar' });
expect(appWrapper.state().activeItem).toBe('foo');
const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
appWrapper.instance().onNavSelect({ groupId: 'bar' });
expect(appWrapper.state().activeGroup).toBe('bar');
});
test('onNavToggle sets state.isNavOpen to opposite', () => {
const appWrapper = shallow(<App />);
const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
expect(appWrapper.state().isNavOpen).toBe(true);
appWrapper.instance().onNavToggle();
expect(appWrapper.state().isNavOpen).toBe(false);
});
test('onLogoClick sets selected nav back to defaults', () => {
const appWrapper = shallow(<App />);
const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
expect(appWrapper.state().activeItem).toBe('bar');
expect(appWrapper.state().activeGroup).toBe('foo');
appWrapper.instance().onLogoClick();
expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
});
test('api.logout called from logout button', async () => {
api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
const appWrapper = mount(<App />);
const logoutButton = appWrapper.find('LogoutButton');
let appWrapper = mount(<Router><App /></Router>);
let logoutButton = appWrapper.find('LogoutButton');
logoutButton.props().onDevLogout();
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
await asyncFlush();
expect(api.get).toHaveBeenCalledTimes(1);
expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
await asyncFlush();
expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
console.log(appWrapper.state());
expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
});
});

69
src/App.jsx
View File

@@ -1,8 +1,8 @@
import React, { Fragment } from 'react';
import {
HashRouter as Router,
Redirect,
Switch,
withRouter
} from 'react-router-dom';
import {
@@ -61,13 +61,11 @@ class App extends React.Component {
this.state = {
isNavOpen,
activeGroup: 'views_group',
activeItem: 'views_group_dashboard'
};
}
onNavSelect = result => {
this.setState({
activeItem: result.itemId,
activeGroup: result.groupId
});
};
@@ -77,16 +75,31 @@ class App extends React.Component {
};
onLogoClick = () => {
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
this.setState({ activeGroup: 'views_group' });
}
onDevLogout = async () => {
console.log('called')
await api.get(API_LOGOUT);
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
console.log(this.state);
}
expand = (path, group) => {
const { history } = this.props;
const { activeGroup } = this.state;
const currentPath = history.location.pathname.split('/')[1];
if ((path === currentPath) && (group !== activeGroup)) {
this.setState({ activeGroup: group });
}
return (path === currentPath);
};
render () {
const { activeItem, activeGroup, isNavOpen } = this.state;
console.log('render');
const { activeGroup, isNavOpen } = this.state;
const { logo, loginInfo } = this.props;
const PageToolbar = (
@@ -103,7 +116,6 @@ class App extends React.Component {
);
return (
<Router>
<Fragment>
<BackgroundImage
src={{
@@ -146,7 +158,7 @@ class App extends React.Component {
to="#/home"
groupId="views_group"
itemId="views_group_dashboard"
isActive={activeItem === 'views_group_dashboard'}
isActive={this.expand('home', 'views_group')}
>
Dashboard
</NavItem>
@@ -154,7 +166,7 @@ class App extends React.Component {
to="#/jobs"
groupId="views_group"
itemId="views_group_jobs"
isActive={activeItem === 'views_group_jobs'}
isActive={this.expand('jobs', 'views_group')}
>
Jobs
</NavItem>
@@ -162,7 +174,7 @@ class App extends React.Component {
to="#/schedules"
groupId="views_group"
itemId="views_group_schedules"
isActive={activeItem === 'views_group_schedules'}
isActive={this.expand('schedules', 'views_group')}
>
Schedules
</NavItem>
@@ -170,7 +182,7 @@ class App extends React.Component {
to="#/portal"
groupId="views_group"
itemId="views_group_portal"
isActive={activeItem === 'views_group_portal'}
isActive={this.expand('portal', 'views_group')}
>
My View
</NavItem>
@@ -185,7 +197,7 @@ class App extends React.Component {
to="#/templates"
groupId="resources_group"
itemId="resources_group_templates"
isActive={activeItem === 'resources_group_templates'}
isActive={this.expand('templates', 'resources_group')}
>
Templates
</NavItem>
@@ -193,7 +205,7 @@ class App extends React.Component {
to="#/credentials"
groupId="resources_group"
itemId="resources_group_credentials"
isActive={activeItem === 'resources_group_credentials'}
isActive={this.expand('credentials', 'resources_group')}
>
Credentials
</NavItem>
@@ -201,7 +213,7 @@ class App extends React.Component {
to="#/projects"
groupId="resources_group"
itemId="resources_group_projects"
isActive={activeItem === 'resources_group_projects'}
isActive={this.expand('projects', 'resources_group')}
>
Projects
</NavItem>
@@ -209,7 +221,7 @@ class App extends React.Component {
to="#/inventories"
groupId="resources_group"
itemId="resources_group_inventories"
isActive={activeItem === 'resources_group_inventories'}
isActive={this.expand('inventories', 'resources_group')}
>
Inventories
</NavItem>
@@ -217,7 +229,7 @@ class App extends React.Component {
to="#/inventory_scripts"
groupId="resources_group"
itemId="resources_group_inventory_scripts"
isActive={activeItem === 'resources_group_inventory_scripts'}
isActive={this.expand('inventory_scripts', 'resources_group')}
>
Inventory Scripts
</NavItem>
@@ -232,7 +244,7 @@ class App extends React.Component {
to="#/organizations"
groupId="access_group"
itemId="access_group_organizations"
isActive={activeItem === 'access_group_organizations'}
isActive={this.expand('organizations', 'access_group')}
>
Organizations
</NavItem>
@@ -240,7 +252,7 @@ class App extends React.Component {
to="#/users"
groupId="access_group"
itemId="access_group_users"
isActive={activeItem === 'access_group_users'}
isActive={this.expand('users', 'access_group')}
>
Users
</NavItem>
@@ -248,7 +260,7 @@ class App extends React.Component {
to="#/teams"
groupId="access_group"
itemId="access_group_teams"
isActive={activeItem === 'access_group_teams'}
isActive={this.expand('teams', 'access_group')}
>
Teams
</NavItem>
@@ -263,7 +275,7 @@ class App extends React.Component {
to="#/credential_types"
groupId="administration_group"
itemId="administration_group_credential_types"
isActive={activeItem === 'administration_group_credential_types'}
isActive={this.expand('credential_types', 'administration_group')}
>
Credential Types
</NavItem>
@@ -271,7 +283,7 @@ class App extends React.Component {
to="#/notification_templates"
groupId="administration_group"
itemId="administration_group_notification_templates"
isActive={activeItem === 'administration_group_notification_templates'}
isActive={this.expand('notification_templates', 'administration_group')}
>
Notification Templates
</NavItem>
@@ -279,7 +291,7 @@ class App extends React.Component {
to="#/management_jobs"
groupId="administration_group"
itemId="administration_group_management_jobs"
isActive={activeItem === 'administration_group_management_jobs'}
isActive={this.expand('management_jobs', 'administration_group')}
>
Management Jobs
</NavItem>
@@ -287,7 +299,7 @@ class App extends React.Component {
to="#/instance_groups"
groupId="administration_group"
itemId="administration_group_instance_groups"
isActive={activeItem === 'administration_group_instance_groups'}
isActive={this.expand('instance_groups', 'administration_group')}
>
Instance Groups
</NavItem>
@@ -295,7 +307,7 @@ class App extends React.Component {
to="#/applications"
groupId="administration_group"
itemId="administration_group_applications"
isActive={activeItem === 'administration_group_applications'}
isActive={this.expand('applications', 'administration_group')}
>
Applications
</NavItem>
@@ -310,7 +322,7 @@ class App extends React.Component {
to="#/auth_settings"
groupId="settings_group"
itemId="settings_group_auth"
isActive={activeItem === 'settings_group_auth'}
isActive={this.expand('auth_settings', 'settings_group')}
>
Authentication
</NavItem>
@@ -318,7 +330,7 @@ class App extends React.Component {
to="#/jobs_settings"
groupId="settings_group"
itemId="settings_group_jobs"
isActive={activeItem === 'settings_group_jobs'}
isActive={this.expand('jobs_settings', 'settings_group')}
>
Jobs
</NavItem>
@@ -326,7 +338,7 @@ class App extends React.Component {
to="#/system_settings"
groupId="settings_group"
itemId="settings_group_system"
isActive={activeItem === 'settings_group_system'}
isActive={this.expand('system_settings', 'settings_group')}
>
System
</NavItem>
@@ -334,7 +346,7 @@ class App extends React.Component {
to="#/ui_settings"
groupId="settings_group"
itemId="settings_group_ui"
isActive={activeItem === 'settings_group_ui'}
isActive={this.expand('ui_settings', 'settings_group')}
>
User Interface
</NavItem>
@@ -373,9 +385,8 @@ class App extends React.Component {
</Fragment>
</Switch>
</Fragment>
</Router>
);
}
}
export default App;
export default withRouter(App);

5
src/index.jsx
View File

@@ -1,6 +1,9 @@
import React from 'react';
import { render } from 'react-dom';
import {
HashRouter as Router
} from 'react-router-dom';
import App from './App';
import api from './api';
import { API_ROOT } from './endpoints';
@@ -16,7 +19,7 @@ const el = document.getElementById('app');
const main = async () => {
const { custom_logo, custom_login_info } = await api.get(API_ROOT);
render(<App logo={custom_logo} loginInfo={custom_login_info} />, el);
render(<Router><App logo={custom_logo} loginInfo={custom_login_info} /></Router>, el);
};
main();