Implement React Context API

- Move API GET request to /v2/config out to the top level of our App.
- Store /v2/config response data in sessionStorage.
- Use Context API to pass down relevant data to Organizations component.
- Wrap our AnsibleSelect component as a context consumer and pass in the list of Ansible Environments of the logged in user.
- Clear sessionStorage object when user logs out.
- Update unit tests.

__mocks__/axios.js

@@ -1,5 +1,13 @@
-const axios = require('axios');
+import * as endpoints from '../src/endpoints';
 
+const axios = require('axios');
+const mockAPIConfigData = {
+  data: {
+    custom_virtualenvs: ['foo', 'bar'],
+    ansible_version: "2.7.2",
+    version: "2.1.1-40-g2758a3848"
+  }
+};
 jest.genMockFromModule('axios');
 
 axios.create = jest.fn(() => axios);
@@ -9,7 +17,16 @@ axios.create.mockReturnValue({
   get: axios.get,
   post: axios.post
 });
-axios.get.mockResolvedValue('get results');
+axios.get.mockImplementation((endpoint) => {
+  if (endpoint === endpoints.API_CONFIG) {
+    return new Promise((resolve, reject) => {
+      resolve(mockAPIConfigData);
+    });
+  }
+  else {
+    return 'get results';
+  }
+});
 axios.post.mockResolvedValue('post results');
 
 axios.customClearMocks = () => {

__tests__/components/AnsibleSelect.test.jsx

@@ -2,16 +2,29 @@ import React from 'react';
 import { mount } from 'enzyme';
 import AnsibleSelect from '../../src/components/AnsibleSelect';
 
-const mockData = ['foo', 'bar'];
+const label = "test select"
+const mockData = ["/venv/baz/", "/venv/ansible/"];
 describe('<AnsibleSelect />', () => {
-  test('initially renders succesfully', async() => {
+  test('initially renders succesfully', async () => {
-    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
+    mount(
-    wrapper.setState({ isHidden: false });
+      <AnsibleSelect
+        selected="foo"
+        selectChange={() => { }}
+        labelName={label}
+        data={mockData}
+      />
+    );
   });
   test('calls "onSelectChange" on dropdown select change', () => {
     const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
-    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
+    const wrapper = mount(
-    wrapper.setState({ isHidden: false });
+      <AnsibleSelect
+        selected="foo"
+        selectChange={() => { }}
+        labelName={label}
+        data={mockData}
+      />
+    );
     expect(spy).not.toHaveBeenCalled();
     wrapper.find('select').simulate('change');
     expect(spy).toHaveBeenCalled();

__tests__/pages/Organizations/views/Organization.add.test.jsx

@@ -1,8 +1,29 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import OrganizationAdd from '../../../../src/pages/Organizations/views/Organization.add';
 import { MemoryRouter } from 'react-router-dom';
 
+let OrganizationAdd;
+const getAppWithConfigContext = (context = {
+  custom_virtualenvs: ['foo', 'bar']
+}) => {
+
+  // Mock the ConfigContext module being used in our OrganizationAdd component
+  jest.doMock('../../../../src/context', () => {
+    return {
+      ConfigContext: {
+        Consumer: (props) => props.children(context)
+      }
+    }
+  });
+
+  // Return the updated OrganizationAdd module with mocked context
+  return require('../../../../src/pages/Organizations/views/Organization.add').default;
+};
+
+beforeEach(() => {
+  OrganizationAdd = getAppWithConfigContext();
+})
+
 describe('<OrganizationAdd />', () => {
   test('initially renders succesfully', () => {
     mount(

package.json

@@ -53,6 +53,7 @@
     "@patternfly/react-styles": "^2.3.0",
     "@patternfly/react-tokens": "^1.9.0",
     "axios": "^0.18.0",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-router-dom": "^4.3.1"

src/App.jsx

@@ -1,6 +1,11 @@
 import React, { Fragment } from 'react';
+<<<<<<< HEAD
 import { I18nProvider, I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+=======
+import { ConfigContext } from './context';
+
+>>>>>>> Implement React Context API
 import {
   Redirect,
   Switch,
@@ -22,7 +27,7 @@ import {
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
 
 import api from './api';
-import { API_LOGOUT } from './endpoints';
+import { API_LOGOUT, API_CONFIG } from './endpoints';
 
 import HelpDropdown from './components/HelpDropdown';
 import LogoutButton from './components/LogoutButton';
@@ -68,24 +73,39 @@ const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
 
 
 class App extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
     this.state = {
-      isNavOpen
+      isNavOpen,
     };
   }
 
+  getSessionObject(key) {
+    return JSON.parse(sessionStorage.getItem(key) || '{}');
+  }
+
   onNavToggle = () => {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   };
 
   onDevLogout = async () => {
     await api.get(API_LOGOUT);
+    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
+    if (sessionStorage.config) {
+      sessionStorage.clear();
+    }
   }
 
-  render () {
+  async componentDidMount() {
+    // Grab our config data from the API and store in sessionStorage
+    if (!sessionStorage.config) {
+      const { data } = await api.get(API_CONFIG);
+      sessionStorage.setItem('config', JSON.stringify(data));
+    }
+  }
+  render() {
     const { isNavOpen } = this.state;
     const { logo, loginInfo, history } = this.props;
 
@@ -119,17 +139,12 @@ class App extends React.Component {
             }}
           />
           <Switch>
-            <ConditionalRedirect
+            <ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
-              shouldRedirect={() => api.isAuthenticated()}
-              redirectPath="/"
-              path="/login"
-              component={() => <Login logo={logo} loginInfo={loginInfo} />}
-            />
             <Fragment>
               <Page
                 header={(
                   <PageHeader
-                    logo={<TowerLogo />}
+                    logo={<TowerLogo onClick={this.onLogoClick} />}
                     toolbar={PageToolbar}
                     showNavToggle
                     onNavToggle={this.onNavToggle}
@@ -139,66 +154,133 @@ class App extends React.Component {
                   <PageSidebar
                     isNavOpen={isNavOpen}
                     nav={(
-                      <I18n>
+                      <Nav aria-label="Primary Navigation">
-                        {({ i18n }) => (
+                        <NavList>
-                          <Nav aria-label={i18n._(t`Primary Navigation`)}>
+                          <SideNavItems
-                            <NavList>
+                            history={history}
-                              <NavExpandableGroup
+                            items={[
-                                groupId="views_group"
+                              {
-                                title={i18n._("Views")}
+                                groupName: 'views',
-                                routes={[
+                                title: 'Views',
-                                  { path: '/home', title: i18n._('Dashboard') },
+                                routes: [
-                                  { path: '/jobs', title: i18n._('Jobs') },
+                                  {
-                                  { path: '/schedules', title: i18n._('Schedules') },
+                                    path: 'home',
-                                  { path: '/portal', title: i18n._('Portal Mode') },
+                                    title: 'Dashboard'
-                                ]}
+                                  },
-                              />
+                                  {
-                              <NavExpandableGroup
+                                    path: 'jobs',
-                                groupId="resources_group"
+                                    title: 'Jobs'
-                                title={i18n._("Resources")}
+                                  },
-                                routes={[
+                                  {
-                                  { path: '/templates', title: i18n._('Templates') },
+                                    path: 'schedules',
-                                  { path: '/credentials', title: i18n._('Credentials') },
+                                    title: 'Schedules'
-                                  { path: '/projects', title: i18n._('Projects') },
+                                  },
-                                  { path: '/inventories', title: i18n._('Inventories') },
+                                  {
-                                  { path: '/inventory_scripts', title: i18n._('Inventory Scripts') }
+                                    path: 'portal',
-                                ]}
+                                    title: 'Portal Mode'
-                              />
+                                  },
-                              <NavExpandableGroup
+                                ]
-                                groupId="access_group"
+                              },
-                                title={i18n._("Access")}
+                              {
-                                routes={[
+                                groupName: 'resources',
-                                  { path: '/organizations', title: i18n._('Organizations') },
+                                title: 'Resources',
-                                  { path: '/users', title: i18n._('Users') },
+                                routes: [
-                                  { path: '/teams', title: i18n._('Teams') }
+                                  {
-                                ]}
+                                    path: 'templates',
-                              />
+                                    title: 'Templates'
-                              <NavExpandableGroup
+                                  },
-                                groupId="administration_group"
+                                  {
-                                title={i18n._("Administration")}
+                                    path: 'credentials',
-                                routes={[
+                                    title: 'Credentials'
-                                  { path: '/credential_types', title: i18n._('Credential Types') },
+                                  },
-                                  { path: '/notification_templates', title: i18n._('Notifications') },
+                                  {
-                                  { path: '/management_jobs', title: i18n._('Management Jobs') },
+                                    path: 'projects',
-                                  { path: '/instance_groups', title: i18n._('Instance Groups') },
+                                    title: 'Projects'
-                                  { path: '/applications', title: i18n._('Integrations') }
+                                  },
-                                ]}
+                                  {
-                              />
+                                    path: 'inventories',
-                              <NavExpandableGroup
+                                    title: 'Inventories'
-                                groupId="settings_group"
+                                  },
-                                title={i18n._("Settings")}
+                                  {
-                                routes={[
+                                    path: 'inventory_scripts',
-                                  { path: '/auth_settings', title: i18n._('Authentication') },
+                                    title: 'Inventory Scripts'
-                                  { path: '/jobs_settings', title: i18n._('Jobs') },
+                                  }
-                                  { path: '/system_settings', title: i18n._('System') },
+                                ]
-                                  { path: '/ui_settings', title: i18n._('User Interface') },
+                              },
-                                  { path: '/license', title: i18n._('License') }
+                              {
-                                ]}
+                                groupName: 'access',
-                              />
+                                title: 'Access',
-                            </NavList>
+                                routes: [
-                          </Nav>
+                                  {
-                        )}
+                                    path: 'organizations',
-                      </I18n>
+                                    title: 'Organizations'
+                                  },
+                                  {
+                                    path: 'users',
+                                    title: 'Users'
+                                  },
+                                  {
+                                    path: 'teams',
+                                    title: 'Teams'
+                                  }
+                                ]
+                              },
+                              {
+                                groupName: 'administration',
+                                title: 'Administration',
+                                routes: [
+                                  {
+                                    path: 'credential_types',
+                                    title: 'Credential Types',
+                                  },
+                                  {
+                                    path: 'notification_templates',
+                                    title: 'Notifications'
+                                  },
+                                  {
+                                    path: 'management_jobs',
+                                    title: 'Management Jobs'
+                                  },
+                                  {
+                                    path: 'instance_groups',
+                                    title: 'Instance Groups'
+                                  },
+                                  {
+                                    path: 'applications',
+                                    title: 'Integrations'
+                                  }
+                                ]
+                              },
+                              {
+                                groupName: 'settings',
+                                title: 'Settings',
+                                routes: [
+                                  {
+                                    path: 'auth_settings',
+                                    title: 'Authentication',
+                                  },
+                                  {
+                                    path: 'jobs_settings',
+                                    title: 'Jobs'
+                                  },
+                                  {
+                                    path: 'system_settings',
+                                    title: 'System'
+                                  },
+                                  {
+                                    path: 'ui_settings',
+                                    title: 'User Interface'
+                                  },
+                                  {
+                                    path: 'license',
+                                    title: 'License'
+                                  }
+                                ]
+                              }
+                            ]}
+                          />
+                        </NavList>
+                      </Nav>
                     )}
                   />
                 )}
@@ -214,7 +296,9 @@ class App extends React.Component {
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
+                <ConfigContext.Provider value={this.getSessionObject('config')}>
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
+                </ConfigContext.Provider>
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   FormGroup,
   Select,
@@ -16,19 +17,19 @@ class AnsibleSelect extends React.Component {
   }
 
   render() {
-    const { hidden } = this.props;
+    if (this.props.data.length > 1) {
-    if (hidden) {
-      return null;
-    } else {
       return (
         <FormGroup label={this.props.labelName} fieldId="ansible-select">
           <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
-            {this.props.data.map((env, index) => (
+            {this.props.data.map((datum, index) => (
-              <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
+              <SelectOption isDisabled={datum.disabled} key={index} value={datum} label={datum} />
             ))}
           </Select>
         </FormGroup>
-      );
+      )
+    }
+    else {
+      return null;
     }
   }
 }

src/context.jsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ConfigContext = React.createContext({});

src/pages/Organizations/views/Organization.add.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { Trans } from '@lingui/macro';
 import {
@@ -17,7 +18,8 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 
-import { API_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
+import { ConfigContext } from '../../../context';
+import { API_ORGANIZATIONS } from '../../../endpoints';
 import api from '../../../api';
 import AnsibleSelect from '../../../components/AnsibleSelect'
 const { light } = PageSectionVariants;
@@ -38,8 +40,6 @@ class OrganizationAdd extends React.Component {
     description: '',
     instanceGroups: '',
     custom_virtualenv: '',
-    custom_virtualenvs: [],
-    hideAnsibleSelect: true,
     error:'',
   };
 
@@ -69,22 +69,10 @@ class OrganizationAdd extends React.Component {
     this.props.history.push('/organizations');
   }
 
-  async componentDidMount() {
-    try {
-      const { data } = await api.get(API_CONFIG);
-      this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
-      if (this.state.custom_virtualenvs.length > 1) {
-        // Show dropdown if we have more than one ansible environment
-        this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
-      }
-    } catch (error) {
-      this.setState({ error })
-    }
-    
-  }
   render() {
     const { name } = this.state;
     const enabled = name.length > 0; // TODO: add better form validation
+
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
@@ -128,13 +116,16 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <AnsibleSelect
+                  <ConfigContext.Consumer>
-                    labelName="Ansible Environment"
+                    {({ custom_virtualenvs }) =>
-                    selected={this.state.custom_virtualenv}
+                      <AnsibleSelect
-                    selectChange={this.onSelectChange}
+                        labelName="Ansible Environment"
-                    data={this.state.custom_virtualenvs}
+                        selected={this.state.custom_virtualenv}
-                    hidden={this.state.hideAnsibleSelect}
+                        selectChange={this.onSelectChange}
-                  />
+                        data={custom_virtualenvs}
+                      />
+                    }
+                  </ConfigContext.Consumer>
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>
@@ -155,4 +146,8 @@ class OrganizationAdd extends React.Component {
   }
 }
 
+OrganizationAdd.contextTypes = {
+  custom_virtualenvs: PropTypes.array,
+};
+
 export default withRouter(OrganizationAdd);