diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx
index e07a1984d5..e9d8c75fbf 100644
--- a/__tests__/App.test.jsx
+++ b/__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('', () => {
api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(false);
- const appWrapper = mount();
+ const appWrapper = mount();
const login = appWrapper.find(Login);
expect(login.length).toBe(1);
@@ -33,7 +36,7 @@ describe('', () => {
api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(true);
- const appWrapper = mount();
+ const appWrapper = mount();
const dashboard = appWrapper.find(Dashboard);
expect(dashboard.length).toBe(1);
@@ -42,39 +45,47 @@ describe('', () => {
});
test('onNavSelect sets state.activeItem and state.activeGroup', () => {
- const appWrapper = shallow();
- appWrapper.instance().onNavSelect({ itemId: 'foo', groupId: 'bar' });
- expect(appWrapper.state().activeItem).toBe('foo');
+ const history = createMemoryHistory('/jobs');
+ const appWrapper = shallow();
+
+ appWrapper.instance().onNavSelect({ groupId: 'bar' });
expect(appWrapper.state().activeGroup).toBe('bar');
});
test('onNavToggle sets state.isNavOpen to opposite', () => {
- const appWrapper = shallow();
+ const history = createMemoryHistory('/jobs');
+
+ const appWrapper = shallow();
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();
+ const history = createMemoryHistory('/jobs');
+
+ const appWrapper = shallow();
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();
- const logoutButton = appWrapper.find('LogoutButton');
+ let appWrapper = mount();
+ 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);
});
+
});
diff --git a/src/App.jsx b/src/App.jsx
index 62edb76d3a..ac88f3f7f6 100644
--- a/src/App.jsx
+++ b/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,279 +116,277 @@ class App extends React.Component {
);
return (
-
-
-
-
- api.isAuthenticated()} redirectPath="/" path="/login" component={() => } />
-
- }
- toolbar={PageToolbar}
- showNavToggle
- onNavToggle={this.onNavToggle}
- />
- )}
- sidebar={(
-
-
-
+
+
+ api.isAuthenticated()} redirectPath="/" path="/login" component={() => } />
+
+ }
+ toolbar={PageToolbar}
+ showNavToggle
+ onNavToggle={this.onNavToggle}
+ />
+ )}
+ sidebar={(
+
+
+
+
-
- Dashboard
-
-
- Jobs
-
-
- Schedules
-
-
- My View
-
-
-
+
+ Jobs
+
+
+ Schedules
+
+
+ My View
+
+
+
+
-
- Templates
-
-
- Credentials
-
-
- Projects
-
-
- Inventories
-
-
- Inventory Scripts
-
-
-
+
+ Credentials
+
+
+ Projects
+
+
+ Inventories
+
+
+ Inventory Scripts
+
+
+
+
-
- Organizations
-
-
- Users
-
-
- Teams
-
-
-
+
+ Users
+
+
+ Teams
+
+
+
+
-
- Credential Types
-
-
- Notification Templates
-
-
- Management Jobs
-
-
- Instance Groups
-
-
- Applications
-
-
-
+
+ Notification Templates
+
+
+ Management Jobs
+
+
+ Instance Groups
+
+
+ Applications
+
+
+
+
-
- Authentication
-
-
- Jobs
-
-
- System
-
-
- User Interface
-
-
-
-
- )}
- />
- )}
- useCondensed
- >
- !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => ()} />
- !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
- !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
- !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
- !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
- !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
- !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
- !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
- !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
- !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
- !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
- !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
- !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
- !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
- !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
- !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
- !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
- !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
- !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
- !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
- !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
- !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
- !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
-
-
-
-
-
+ Authentication
+
+
+ Jobs
+
+
+ System
+
+
+ User Interface
+
+
+
+
+ )}
+ />
+ )}
+ useCondensed
+ >
+ !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => ()} />
+ !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
+ !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
+ !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
+ !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
+ !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
+ !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
+ !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
+ !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
+ !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
+ !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
+ !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
+ !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
+ !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
+ !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
+ !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
+ !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
+ !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
+ !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
+ !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
+ !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
+ !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
+ !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
+
+
+
+
);
}
}
-export default App;
+export default withRouter(App);
diff --git a/src/index.jsx b/src/index.jsx
index cd653d3c53..24a5eb8576 100644
--- a/src/index.jsx
+++ b/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';
@@ -15,8 +18,8 @@ import './components/DataListToolbar/styles.scss';
const el = document.getElementById('app');
const main = async () => {
- const { custom_logo, custom_login_info } = await api.get(API_ROOT);
- render(, el);
+ const { custom_logo, custom_login_info } = await api.get(API_ROOT);
+ render(, el);
};
main();