Abstract out API get request to Add Org component.

- This makes it so we now have a generic select dropdown where we can pass data down as props.

__tests__/components/AnsibleEnvironmentSelect.test.jsx

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

src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx

@@ -4,43 +4,26 @@ import {
   Select,
   SelectOption,
 } from '@patternfly/react-core';
-import { API_CONFIG } from '../../endpoints';
-import api from '../../api';
 
-class AnsibleEnvironmentSelect extends React.Component {
+class AnsibleSelect extends React.Component {
   constructor(props) {
     super(props);
     this.onSelectChange = this.onSelectChange.bind(this);
   }
 
-  state = {
-    custom_virtualenvs: [],
-    isHidden: true,
-  }
-
-  async componentDidMount() {
-    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({ isHidden: !this.state.isHidden });
-    }
-  }
-
   onSelectChange(val, _) {
     this.props.selectChange(val);
   }
 
   render() {
-    const { isHidden } = this.state;
+    const hide = this.props.hidden;
-    if (isHidden) {
+    if (hide) {
       return null;
     } else {
       return (
-        <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+        <FormGroup label={this.props.labelName} fieldId="ansible-select">
           <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
-            <SelectOption isDisabled value="Select Ansible Environment" label="Select Ansible Environment" />
+            {this.props.data.map((env, index) => (
-            {this.state.custom_virtualenvs.map((env, index) => (
               <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
             ))}
           </Select>
@@ -50,4 +33,4 @@ class AnsibleEnvironmentSelect extends React.Component {
   }
 }
 
-export default AnsibleEnvironmentSelect;
+export default AnsibleSelect;

src/components/AnsibleEnvironmentSelect/index.js

@@ -1,3 +1,3 @@
-import AnsibleEnvironmentSelect from './AnsibleEnvironmentSelect';
+import AnsibleSelect from './AnsibleEnvironmentSelect';
 
-export default AnsibleEnvironmentSelect;
+export default AnsibleSelect;

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

@@ -15,9 +15,9 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 
-import { API_ORGANIZATIONS } from '../../../endpoints';
+import { API_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
 import api from '../../../api';
-import AnsibleEnvironmentSelect from '../../../components/AnsibleEnvironmentSelect'
+import AnsibleSelect from '../../../components/AnsibleEnvironmentSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {
@@ -35,7 +35,8 @@ class OrganizationAdd extends React.Component {
     description: '',
     instanceGroups: '',
     custom_virtualenv: '',
-    post_endpoint: API_ORGANIZATIONS,
+    custom_virtualenvs: [],
+    hideAnsibleSelect: true,
   };
 
   onSelectChange(value, _) {
@@ -60,6 +61,14 @@ class OrganizationAdd extends React.Component {
     this.resetForm();
   }
 
+  async componentDidMount() {
+    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 });
+    }
+  }
   render() {
     const { name } = this.state;
     const enabled = name.length > 0; // TODO: add better form validation
@@ -104,7 +113,13 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <AnsibleEnvironmentSelect selected={this.state.custom_virtualenv} selectChange={this.onSelectChange} />
+                  <AnsibleSelect
+                    labelName="Ansible Environment"
+                    selected={this.state.custom_virtualenv}
+                    selectChange={this.onSelectChange}
+                    data={this.state.custom_virtualenvs}
+                    hidden={this.state.hideAnsibleSelect}
+                  />
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>