update route group params

__tests__/App.test.jsx

@@ -17,7 +17,7 @@ describe('<App />', () => {
           <App
             routeGroups={[
               {
-                title: 'Group One',
+                groupTitle: 'Group One',
                 groupId: 'group_one',
                 routes: [
                   { title: 'Foo', path: '/foo' },
@@ -25,7 +25,7 @@ describe('<App />', () => {
                 ],
               },
               {
-                title: 'Group Two',
+                groupTitle: 'Group Two',
                 groupId: 'group_two',
                 routes: [
                   { title: 'Fiz', path: '/fiz' },
@@ -77,19 +77,13 @@ describe('<App />', () => {
     expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
   });
 
-  test('logout button click triggers expected callback', async (done) => {
+  test('onLogout makes expected call to api client', async (done) => {
     const logout = jest.fn(() => Promise.resolve());
     const api = { logout };
 
-    const appWrapper = mount(
+    const appWrapper = shallow(<App api={api} />);
-      <HashRouter>
-        <I18nProvider>
-          <App api={api} />
-        </I18nProvider>
-      </HashRouter>
-    );
 
-    appWrapper.find('button[id="button-logout"]').simulate('click');
+    appWrapper.instance().onLogout();
     await asyncFlush();
     expect(api.logout).toHaveBeenCalledTimes(1);
 
@@ -106,6 +100,6 @@ describe('<App />', () => {
         </I18nProvider>
       </HashRouter>
     );
-    expect(api.get).toHaveBeenCalledTimes(1);
+    expect(getConfig).toHaveBeenCalledTimes(1);
   });
 });

__tests__/components/NavExpandableGroup.test.jsx

@@ -12,7 +12,7 @@ describe('NavExpandableGroup', () => {
         <Nav aria-label="Test Navigation">
           <NavExpandableGroup
             groupId="test"
-            title="Test"
+            groupTitle="Test"
             routes={[
               { path: '/foo', title: 'Foo' },
               { path: '/bar', title: 'Bar' },
@@ -45,7 +45,7 @@ describe('NavExpandableGroup', () => {
             <Nav aria-label="Test Navigation">
               <NavExpandableGroup
                 groupId="test"
-                title="Test"
+                groupTitle="Test"
                 routes={[
                   { path: '/foo', title: 'Foo' },
                   { path: '/bar', title: 'Bar' },

src/App.jsx

@@ -126,10 +126,12 @@ class App extends Component {
               nav={(
                 <Nav aria-label={navLabel}>
                   <NavList>
-                    {routeGroups.map(params => (
+                    {routeGroups.map(({ groupId, groupTitle, routes }) => (
                       <NavExpandableGroup
-                        key={params.groupId}
+                        key={groupId}
-                        {...params}
+                        groupId={groupId}
+                        groupTitle={groupTitle}
+                        routes={routes}
                       />
                     ))}
                   </NavList>

src/components/NavExpandableGroup.jsx

@@ -25,7 +25,7 @@ class NavExpandableGroup extends Component {
   };
 
   render () {
-    const { routes, groupId, staticContext, ...rest } = this.props;
+    const { groupId, groupTitle, routes } = this.props;
     const isActive = this.isActiveGroup();
 
     return (
@@ -33,7 +33,7 @@ class NavExpandableGroup extends Component {
         isActive={isActive}
         isExpanded={isActive}
         groupId={groupId}
-        {...rest}
+        title={groupTitle}
       >
         {routes.map(({ path, title }) => (
           <NavItem

src/index.jsx

@@ -111,7 +111,7 @@ export async function main (render, api) {
                         navLabel={i18n._(t`Primary Navigation`)}
                         routeGroups={[
                           {
-                            title: i18n._(t`Views`),
+                            groupTitle: i18n._(t`Views`),
                             groupId: 'views_group',
                             routes: [
                               {
@@ -137,7 +137,7 @@ export async function main (render, api) {
                             ],
                           },
                           {
-                            title: i18n._(t`Resources`),
+                            groupTitle: i18n._(t`Resources`),
                             groupId: 'resources_group',
                             routes: [
                               {
@@ -168,7 +168,7 @@ export async function main (render, api) {
                             ],
                           },
                           {
-                            title: i18n._(t`Access`),
+                            groupTitle: i18n._(t`Access`),
                             groupId: 'access_group',
                             routes: [
                               {
@@ -189,7 +189,7 @@ export async function main (render, api) {
                             ],
                           },
                           {
-                            title: i18n._(t`Administration`),
+                            groupTitle: i18n._(t`Administration`),
                             groupId: 'administration_group',
                             routes: [
                               {
@@ -220,7 +220,7 @@ export async function main (render, api) {
                             ],
                           },
                           {
-                            title: i18n._(t`Settings`),
+                            groupTitle: i18n._(t`Settings`),
                             groupId: 'settings_group',
                             routes: [
                               {

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

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { Trans } from '@lingui/macro';
 import {
@@ -18,10 +17,8 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 
-import { ConfigContext } from '../../../context';
+import AnsibleSelect from '../../../components/AnsibleSelect';
-import { API_ORGANIZATIONS } from '../../../endpoints';
+
-import api from '../../../api';
-import AnsibleSelect from '../../../components/AnsibleSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {
@@ -40,6 +37,8 @@ class OrganizationAdd extends React.Component {
     description: '',
     instanceGroups: '',
     custom_virtualenv: '',
+    custom_virtualenvs: [],
+    hideAnsibleSelect: true,
     error:'',
   };
 
@@ -61,7 +60,8 @@ class OrganizationAdd extends React.Component {
 
   async onSubmit() {
     const data = Object.assign({}, { ...this.state });
-    await api.post(API_ORGANIZATIONS, data);
+    await api.createOrganization(data);
+
     this.resetForm();
   }
 
@@ -69,10 +69,22 @@ class OrganizationAdd extends React.Component {
     this.props.history.push('/organizations');
   }
 
+  async componentDidMount() {
+    try {
+      const { data } = await api.getConfig();
+      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">
@@ -116,16 +128,13 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <ConfigContext.Consumer>
+                  <AnsibleSelect
-                    {({ custom_virtualenvs }) =>
+                    labelName="Ansible Environment"
-                      <AnsibleSelect
+                    selected={this.state.custom_virtualenv}
-                        labelName="Ansible Environment"
+                    selectChange={this.onSelectChange}
-                        selected={this.state.custom_virtualenv}
+                    data={this.state.custom_virtualenvs}
-                        selectChange={this.onSelectChange}
+                    hidden={this.state.hideAnsibleSelect}
-                        data={custom_virtualenvs}
+                  />
-                      />
-                    }
-                  </ConfigContext.Consumer>
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>
@@ -146,8 +155,4 @@ class OrganizationAdd extends React.Component {
   }
 }
 
-OrganizationAdd.contextTypes = {
-  custom_virtualenvs: PropTypes.array,
-};
-
 export default withRouter(OrganizationAdd);