Merge pull request #72 from ansible/react-context-api

Implement React Context API

__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__/App.test.jsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { shallow, mount } from 'enzyme';
 import App from '../src/App';
 import api from '../src/api';
-import { API_LOGOUT } from '../src/endpoints';
+import { API_LOGOUT, API_CONFIG } from '../src/endpoints';
 
 import Dashboard from '../src/pages/Dashboard';
 import Login from '../src/pages/Login';
@@ -53,7 +53,13 @@ describe('<App />', () => {
     expect(logOutButton.length).toBe(1);
     logOutButton.simulate('click');
     appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(api.get).toHaveBeenCalledTimes(1);
     expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
   });
+
+  test('Componenet makes REST call to API_CONFIG endpoint when mounted', () => {
+    api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
+    const appWrapper = shallow(<App.WrappedComponent />);
+    expect(api.get).toHaveBeenCalledTimes(1);
+    expect(api.get).toHaveBeenCalledWith(API_CONFIG);
+  });
 });

__tests__/components/About.test.jsx

@@ -31,26 +31,4 @@ describe('<About />', () => {
     expect(onAboutModalClose).toBeCalled();
     aboutWrapper.unmount();
   });
-
-  test('sets error on api request failure', async () => {
-    api.get = jest.fn().mockImplementation(() => {
-      const err = new Error('404 error');
-      err.response = { status: 404, message: 'problem' };
-      return Promise.reject(err);
-    });
-    aboutWrapper = mount(
-      <I18nProvider>
-        <About isOpen />
-      </I18nProvider>
-    );
-
-    const aboutComponentInstance = aboutWrapper.find(About).instance();
-    await aboutComponentInstance.componentDidMount();
-    expect(aboutComponentInstance.state.error.response.status).toBe(404);
-    aboutWrapper.unmount();
-  });
-
-  test('API Config endpoint is valid', () => {
-    expect(API_CONFIG).toBeDefined();
-  });
 });

__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() => {
-    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
-    wrapper.setState({ isHidden: false });
+  test('initially renders succesfully', async () => {
+    mount(
+      <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={() => {}} />);
-    wrapper.setState({ isHidden: false });
+    const wrapper = mount(
+      <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,4 +1,6 @@
 import React, { Fragment } from 'react';
+import { ConfigContext } from './context';
+
 import { I18nProvider, I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
@@ -22,7 +24,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';
@@ -61,19 +63,21 @@ const catalogs = { en, ja };
 
 // This spits out the language and the region.  Example: es-US
 const language = (navigator.languages && navigator.languages[0])
-|| navigator.language
-|| navigator.userLanguage;
+  || navigator.language
+  || navigator.userLanguage;
 
 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,
+      config: {},
+      error: false,
     };
   }
 
@@ -81,12 +85,27 @@ class App extends React.Component {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   };
 
-  onDevLogout = async () => {
-    await api.get(API_LOGOUT);
+  onLogoClick = () => {
+    this.setState({ activeGroup: 'views_group' });
   }
 
-  render () {
-    const { isNavOpen } = this.state;
+  onDevLogout = async () => {
+    await api.get(API_LOGOUT);
+    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
+  }
+
+  async componentDidMount() {
+    // Grab our config data from the API and store in state
+    try {
+      const { data } = await api.get(API_CONFIG);
+      this.setState({ config: data });
+    } catch (error) {
+      this.setState({ error });
+    }
+  }
+
+  render() {
+    const { isNavOpen, config } = this.state;
     const { logo, loginInfo, history } = this.props;
 
     const PageToolbar = (
@@ -118,118 +137,121 @@ class App extends React.Component {
               [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
             }}
           />
-          <Switch>
-            <ConditionalRedirect
-              shouldRedirect={() => api.isAuthenticated()}
-              redirectPath="/"
-              path="/login"
-              component={() => <Login logo={logo} loginInfo={loginInfo} />}
-            />
-            <Fragment>
-              <Page
-                header={(
-                  <PageHeader
-                    logo={<TowerLogo />}
-                    toolbar={PageToolbar}
-                    showNavToggle
-                    onNavToggle={this.onNavToggle}
-                  />
-                )}
-                sidebar={(
-                  <PageSidebar
-                    isNavOpen={isNavOpen}
-                    nav={(
-                      <I18n>
-                        {({ i18n }) => (
-                          <Nav aria-label={i18n._(t`Primary Navigation`)}>
-                            <NavList>
-                              <NavExpandableGroup
-                                groupId="views_group"
-                                title={i18n._("Views")}
-                                routes={[
-                                  { path: '/home', title: i18n._('Dashboard') },
-                                  { path: '/jobs', title: i18n._('Jobs') },
-                                  { path: '/schedules', title: i18n._('Schedules') },
-                                  { path: '/portal', title: i18n._('Portal Mode') },
-                                ]}
-                              />
-                              <NavExpandableGroup
-                                groupId="resources_group"
-                                title={i18n._("Resources")}
-                                routes={[
-                                  { path: '/templates', title: i18n._('Templates') },
-                                  { path: '/credentials', title: i18n._('Credentials') },
-                                  { path: '/projects', title: i18n._('Projects') },
-                                  { path: '/inventories', title: i18n._('Inventories') },
-                                  { path: '/inventory_scripts', title: i18n._('Inventory Scripts') }
-                                ]}
-                              />
-                              <NavExpandableGroup
-                                groupId="access_group"
-                                title={i18n._("Access")}
-                                routes={[
-                                  { path: '/organizations', title: i18n._('Organizations') },
-                                  { path: '/users', title: i18n._('Users') },
-                                  { path: '/teams', title: i18n._('Teams') }
-                                ]}
-                              />
-                              <NavExpandableGroup
-                                groupId="administration_group"
-                                title={i18n._("Administration")}
-                                routes={[
-                                  { path: '/credential_types', title: i18n._('Credential Types') },
-                                  { path: '/notification_templates', title: i18n._('Notifications') },
-                                  { path: '/management_jobs', title: i18n._('Management Jobs') },
-                                  { path: '/instance_groups', title: i18n._('Instance Groups') },
-                                  { path: '/applications', title: i18n._('Integrations') }
-                                ]}
-                              />
-                              <NavExpandableGroup
-                                groupId="settings_group"
-                                title={i18n._("Settings")}
-                                routes={[
-                                  { path: '/auth_settings', title: i18n._('Authentication') },
-                                  { path: '/jobs_settings', title: i18n._('Jobs') },
-                                  { path: '/system_settings', title: i18n._('System') },
-                                  { path: '/ui_settings', title: i18n._('User Interface') },
-                                  { path: '/license', title: i18n._('License') }
-                                ]}
-                              />
-                            </NavList>
-                          </Nav>
-                        )}
-                      </I18n>
-                    )}
-                  />
-                )}
-                useCondensed
-              >
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
-                <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} />
-                <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} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
-              </Page>
-            </Fragment>
-          </Switch>
+          <ConfigContext.Provider value={config}>
+            <Switch>
+              <ConditionalRedirect
+                shouldRedirect={() => api.isAuthenticated()}
+                redirectPath="/"
+                path="/login"
+                component={() => <Login logo={logo} loginInfo={loginInfo} />}
+              />
+              <Fragment>
+                <Page
+                  header={(
+                    <PageHeader
+                      logo={<TowerLogo onClick={this.onLogoClick} />}
+                      toolbar={PageToolbar}
+                      showNavToggle
+                      onNavToggle={this.onNavToggle}
+                    />
+                  )}
+                  sidebar={(
+                    <PageSidebar
+                      isNavOpen={isNavOpen}
+                      nav={(
+                        <I18n>
+                          {({ i18n }) => (
+                            <Nav aria-label={i18n._(t`Primary Navigation`)}>
+                              <NavList>
+                                <NavExpandableGroup
+                                  groupId="views_group"
+                                  title={i18n._("Views")}
+                                  routes={[
+                                    { path: '/home', title: i18n._('Dashboard') },
+                                    { path: '/jobs', title: i18n._('Jobs') },
+                                    { path: '/schedules', title: i18n._('Schedules') },
+                                    { path: '/portal', title: i18n._('Portal Mode') },
+                                  ]}
+                                />
+                                <NavExpandableGroup
+                                  groupId="resources_group"
+                                  title={i18n._("Resources")}
+                                  routes={[
+                                    { path: '/templates', title: i18n._('Templates') },
+                                    { path: '/credentials', title: i18n._('Credentials') },
+                                    { path: '/projects', title: i18n._('Projects') },
+                                    { path: '/inventories', title: i18n._('Inventories') },
+                                    { path: '/inventory_scripts', title: i18n._('Inventory Scripts') }
+                                  ]}
+                                />
+                                <NavExpandableGroup
+                                  groupId="access_group"
+                                  title={i18n._("Access")}
+                                  routes={[
+                                    { path: '/organizations', title: i18n._('Organizations') },
+                                    { path: '/users', title: i18n._('Users') },
+                                    { path: '/teams', title: i18n._('Teams') }
+                                  ]}
+                                />
+                                <NavExpandableGroup
+                                  groupId="administration_group"
+                                  title={i18n._("Administration")}
+                                  routes={[
+                                    { path: '/credential_types', title: i18n._('Credential Types') },
+                                    { path: '/notification_templates', title: i18n._('Notifications') },
+                                    { path: '/management_jobs', title: i18n._('Management Jobs') },
+                                    { path: '/instance_groups', title: i18n._('Instance Groups') },
+                                    { path: '/applications', title: i18n._('Integrations') }
+                                  ]}
+                                />
+                                <NavExpandableGroup
+                                  groupId="settings_group"
+                                  title={i18n._("Settings")}
+                                  routes={[
+                                    { path: '/auth_settings', title: i18n._('Authentication') },
+                                    { path: '/jobs_settings', title: i18n._('Jobs') },
+                                    { path: '/system_settings', title: i18n._('System') },
+                                    { path: '/ui_settings', title: i18n._('User Interface') },
+                                    { path: '/license', title: i18n._('License') }
+                                  ]}
+                                />
+                              </NavList>
+                            </Nav>
+                          )}
+                        </I18n>
+                      )}
+                    />
+                  )}
+                  useCondensed
+                >
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
+                  <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} />
+                  <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} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
+                  <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
+
+                </Page>
+              </Fragment>
+            </Switch>
+          </ConfigContext.Provider>
         </Fragment>
       </I18nProvider>
     );

src/components/About.jsx

@@ -1,46 +1,21 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
 import {
   AboutModal,
   TextContent,
   TextList,
-  TextListItem } from '@patternfly/react-core';
+  TextListItem
+} from '@patternfly/react-core';
 
 import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
 import brandImg from '../../images/tower-logo-white.svg';
 import logoImg from '../../images/tower-logo-login.svg';
 
-import api from '../api';
-import { API_CONFIG } from '../endpoints';
+import { ConfigContext } from '../context';
 
 class About extends React.Component {
-  unmounting = false;
-
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      config: {},
-      error: false
-    };
-  }
-
-  async componentDidMount () {
-    try {
-      const { data } = await api.get(API_CONFIG);
-      this.safeSetState({ config: data });
-    } catch (error) {
-      this.safeSetState({ error });
-    }
-  }
-
-  componentWillUnmount () {
-    this.unmounting = true;
-  }
-
-  safeSetState = obj => !this.unmounting && this.setState(obj);
-
   createSpeechBubble = (version) => {
     let text = `Tower ${version}`;
     let top = '';
@@ -65,26 +40,25 @@ class About extends React.Component {
 
   render () {
     const { isOpen } = this.props;
-    const { config = {}, error } = this.state;
-    const { ansible_version = 'loading', version = 'loading' } = config;
-
     return (
       <I18n>
         {({ i18n }) => (
-          <AboutModal
-            isOpen={isOpen}
-            onClose={this.handleModalToggle}
-            productName="Ansible Tower"
-            trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
-            brandImageSrc={brandImg}
-            brandImageAlt={i18n._(t`Brand Image`)}
-            logoImageSrc={logoImg}
-            logoImageAlt={i18n._(t`AboutModal Logo`)}
-            heroImageSrc={heroImg}
-          >
-            <pre>
-              { this.createSpeechBubble(version) }
-              {`
+          <ConfigContext.Consumer>
+            {({ ansible_version, version }) => (
+              <AboutModal
+                isOpen={isOpen}
+                onClose={this.handleModalToggle}
+                productName="Ansible Tower"
+                trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
+                brandImageSrc={brandImg}
+                brandImageAlt={i18n._(t`Brand Image`)}
+                logoImageSrc={logoImg}
+                logoImageAlt={i18n._(t`AboutModal Logo`)}
+                heroImageSrc={heroImg}
+              >
+                <pre>
+                  {this.createSpeechBubble(version)}
+                  {`
               \\
               \\  ^__^
                   (oo)\\_______
@@ -92,22 +66,28 @@ class About extends React.Component {
                       ||----w |
                       ||     ||
                         `}
-            </pre>
+                </pre>
 
-            <TextContent>
-              <TextList component="dl">
-                <TextListItem component="dt">
-                  <Trans>Ansible Version</Trans>
-                </TextListItem>
-                <TextListItem component="dd">{ ansible_version }</TextListItem>
-              </TextList>
-            </TextContent>
-            { error ? <div>error</div> : ''}
-          </AboutModal>
+                <TextContent>
+                  <TextList component="dl">
+                    <TextListItem component="dt">
+                      <Trans>Ansible Version</Trans>
+                    </TextListItem>
+                    <TextListItem component="dd">{ansible_version}</TextListItem>
+                  </TextList>
+                </TextContent>
+              </AboutModal>
+            )}
+          </ConfigContext.Consumer>
         )}
       </I18n>
     );
   }
 }
 
+About.contextTypes = {
+  ansible_version: PropTypes.string,
+  version: PropTypes.string,
+};
+
 export default About;

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   FormGroup,
   Select,
@@ -11,24 +12,37 @@ class AnsibleSelect extends React.Component {
     this.onSelectChange = this.onSelectChange.bind(this);
   }
 
+  state = {
+    count: 1,
+  }
+
+  static getDerivedStateFromProps(nexProps, _) {
+    if (nexProps.data) {
+      return {
+        count: nexProps.data.length,
+      }
+    }
+    return null;
+  }
   onSelectChange(val, _) {
     this.props.selectChange(val);
   }
 
   render() {
-    const { hidden } = this.props;
-    if (hidden) {
-      return null;
-    } else {
+    const { count } = this.state;
+    if (count > 1) {
       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) => (
-              <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
+            {this.props.data.map((datum, index) => (
+              <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
-                    labelName="Ansible Environment"
-                    selected={this.state.custom_virtualenv}
-                    selectChange={this.onSelectChange}
-                    data={this.state.custom_virtualenvs}
-                    hidden={this.state.hideAnsibleSelect}
-                  />
+                  <ConfigContext.Consumer>
+                    {({ custom_virtualenvs }) =>
+                      <AnsibleSelect
+                        labelName="Ansible Environment"
+                        selected={this.state.custom_virtualenv}
+                        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);