Update active nav item based on url

__tests__/App.test.jsx

@@ -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);
   });
+
 });

src/App.jsx

@@ -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);

src/index.jsx

@@ -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();