Merge pull request #55 from ansible/ansible-environment-dropdown

Basic Ansible Environment Select Component

__tests__/components/AnsibleSelect.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AnsibleSelect from '../../src/components/AnsibleSelect';
+
+const mockData = ['foo', 'bar'];
+describe('<AnsibleSelect />', () => {
+  test('initially renders succesfully', async() => {
+    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
+    wrapper.setState({ isHidden: false });
+  });
+  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 });
+    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/AnsibleSelect/AnsibleSelect.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core';
+
+class AnsibleSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectChange = this.onSelectChange.bind(this);
+  }
+
+  onSelectChange(val, _) {
+    this.props.selectChange(val);
+  }
+
+  render() {
+    const { hidden } = this.props;
+    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) => (
+              <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
+            ))}
+          </Select>
+        </FormGroup>
+      );
+    }
+  }
+}
+
+export default AnsibleSelect;

src/components/AnsibleSelect/index.js

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

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_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
 import api from '../../../api';
+import AnsibleSelect from '../../../components/AnsibleSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {
@@ -30,17 +29,20 @@ 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,
+    custom_virtualenvs: [],
+    hideAnsibleSelect: true,
   };
 
-  onSelectChange (value, _) {
+  onSelectChange(value, _) {
-    this.setState({ ansible_environment: value });
+    this.setState({ custom_virtualenv: value });
   };
+
   resetForm() {
     this.setState({
       ...this.state,
@@ -48,20 +50,25 @@ 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 },
+  async componentDidMount() {
-    { ansible_environment: '1', label: '1', disabled: false },
+    const { data } = await api.get(API_CONFIG);
-    { ansible_environment: '2', label: '2', disabled: false },
+    this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
-    { ansible_environment: '3', label: '3', disabled: false }
+    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
@@ -106,13 +113,13 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+                  <AnsibleSelect
-                    <Select value={this.state.ansible_environment} onChange={this.onSelectChange} aria-label="Select Input">
+                    labelName="Ansible Environment"
-                      {this.envs.map((env, index) => (
+                    selected={this.state.custom_virtualenv}
-                        <SelectOption isDisabled={env.disabled} key={index} value={env.ansible_environment} label={env.label} />
+                    selectChange={this.onSelectChange}
-                      ))}
+                    data={this.state.custom_virtualenvs}
-                    </Select>
+                    hidden={this.state.hideAnsibleSelect}
-                  </FormGroup>
+                  />
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>