Basic Ansible Environment Select Component

- Component conditionally renders based on # of virtual environments.
- User can add an Organization and associate it with a virtual environment.

__tests__/components/AnsibleEnvironmentSelect.test.jsx

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

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

@@ -11,18 +11,6 @@ describe('<OrganizationAdd />', () => {
       />
     );
   });
-  test('calls "onSelectChange" on dropdown select change', () => {
-    const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
-    const wrapper = mount(
-      <OrganizationAdd
-        match={{ path: '/organizations/add', url: '/organizations/add' }}
-        location={{ search: '', pathname: '/organizations/add' }}
-      />
-    );
-    expect(spy).not.toHaveBeenCalled();
-    wrapper.find('select').simulate('change');
-    expect(spy).toHaveBeenCalled();
-  });
   test('calls "handleChange" when input values change', () => {
     const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
     const wrapper = mount(

src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core';
+import { API_CONFIG } from '../../endpoints';
+import api from '../../api';
+
+class AnsibleEnvironmentSelect 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;
+    if (isHidden) {
+      return null;
+    } else {
+      return (
+        <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+          <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
+            <SelectOption isDisabled value="Select Ansible Environment" label="Select Ansible Environment" />
+            {this.state.custom_virtualenvs.map((env, index) => (
+              <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
+            ))}
+          </Select>
+        </FormGroup>
+      );
+    }
+  }
+}
+
+export default AnsibleEnvironmentSelect;

src/components/AnsibleEnvironmentSelect/index.js

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

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

@@ -11,14 +11,13 @@ import {
   ToolbarGroup,
   Button,
   Gallery,
-  Select,
-  SelectOption,
   Card,
   CardBody,
 } from '@patternfly/react-core';
 
 import { API_ORGANIZATIONS } from '../../../endpoints';
 import api from '../../../api';
+import AnsibleEnvironmentSelect from '../../../components/AnsibleEnvironmentSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {
@@ -30,17 +29,19 @@ class OrganizationAdd extends React.Component {
     this.onSubmit = this.onSubmit.bind(this);
     this.resetForm = this.resetForm.bind(this);
   }
+
   state = {
     name: '',
     description: '',
     instanceGroups: '',
-    ansible_environment: 'default',
+    custom_virtualenv: '',
     post_endpoint: API_ORGANIZATIONS,
   };
 
-  onSelectChange (value, _) {
+  onSelectChange(value, _) {
-    this.setState({ ansible_environment: value });
+    this.setState({ custom_virtualenv: value });
   };
+
   resetForm() {
     this.setState({
       ...this.state,
@@ -48,20 +49,17 @@ class OrganizationAdd extends React.Component {
       description: ''
     })
   }
+
   handleChange(_, evt) {
     this.setState({ [evt.target.name]: evt.target.value });
   }
+
   async onSubmit() {
     const data = Object.assign({}, { ...this.state });
     await api.post(API_ORGANIZATIONS, data);
     this.resetForm();
   }
-  envs = [ // Placeholder for Ansible Environment Dropdown
+
-    { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
-    { ansible_environment: '1', label: '1', disabled: false },
-    { ansible_environment: '2', label: '2', disabled: false },
-    { ansible_environment: '3', label: '3', disabled: false }
-  ];
   render() {
     const { name } = this.state;
     const enabled = name.length > 0; // TODO: add better form validation
@@ -106,13 +104,7 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+                  <AnsibleEnvironmentSelect selected={this.state.custom_virtualenv} selectChange={this.onSelectChange} />
-                    <Select value={this.state.ansible_environment} onChange={this.onSelectChange} aria-label="Select Input">
-                      {this.envs.map((env, index) => (
-                        <SelectOption isDisabled={env.disabled} key={index} value={env.ansible_environment} label={env.label} />
-                      ))}
-                    </Select>
-                  </FormGroup>
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>