Refactor AnsibleSelect data prop to accept an array of option objects

* First custom_virtualenv in options list is always default

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -20,7 +20,8 @@ class AnsibleSelect extends React.Component {
   }
 
   render () {
-    const { label, value, data, defaultSelected, i18n } = this.props;
+    const { value, data, i18n } = this.props;
+
     return (
       <FormSelect
         value={value}
@@ -28,15 +29,12 @@ class AnsibleSelect extends React.Component {
         aria-label={i18n._(t`Select Input`)}
       >
         {data.map((datum) => (
-          datum === defaultSelected ? (
+          <FormSelectOption
-            <FormSelectOption
+            key={datum.value}
-              key=""
+            value={datum.value}
-              value=""
+            label={datum.label}
-              label={i18n._(t`Use Default ${label}`)}
+            isDisabled={datum.disabled}
-            />
+          />
-          ) : (
-            <FormSelectOption key={datum} value={datum} label={datum} />
-          )
         ))}
       </FormSelect>
     );
@@ -45,15 +43,10 @@ class AnsibleSelect extends React.Component {
 
 AnsibleSelect.defaultProps = {
   data: [],
-  label: 'Ansible Select',
-  defaultSelected: null,
 };
 
 AnsibleSelect.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.string),
+  data: PropTypes.arrayOf(PropTypes.object),
-  defaultSelected: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
 };

src/components/AnsibleSelect/AnsibleSelect.test.jsx

@@ -2,8 +2,17 @@ import React from 'react';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import AnsibleSelect, { _AnsibleSelect } from './AnsibleSelect';
 
-const label = 'test select';
+const mockData = [
-const mockData = ['/venv/baz/', '/venv/ansible/'];
+  {
+    label: 'Baz',
+    value: '/venv/baz/'
+  },
+  {
+    label: 'Default',
+    value: '/venv/ansible/'
+  }
+];
+
 describe('<AnsibleSelect />', () => {
   test('initially renders succesfully', async () => {
     mountWithContexts(
@@ -11,7 +20,6 @@ describe('<AnsibleSelect />', () => {
         value="foo"
         name="bar"
         onChange={() => { }}
-        label={label}
         data={mockData}
       />
     );
@@ -24,7 +32,6 @@ describe('<AnsibleSelect />', () => {
         value="foo"
         name="bar"
         onChange={() => { }}
-        label={label}
         data={mockData}
       />
     );
@@ -33,17 +40,17 @@ describe('<AnsibleSelect />', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  test('Returns correct select options if defaultSelected props is passed', () => {
+  test('Returns correct select options', () => {
     const wrapper = mountWithContexts(
       <AnsibleSelect
         value="foo"
         name="bar"
         onChange={() => { }}
-        label={label}
         data={mockData}
-        defaultSelected={mockData[1]}
       />
     );
+    // console.log(wrapper.debug());
     expect(wrapper.find('FormSelect')).toHaveLength(1);
+    expect(wrapper.find('FormSelectOption')).toHaveLength(2);
   });
 });

src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx

@@ -105,7 +105,8 @@ describe('<OrganizationAdd />', () => {
       { context: { config } }
     ).find('AnsibleSelect');
     expect(wrapper.find('FormSelect')).toHaveLength(1);
-    expect(wrapper.find('FormSelectOption')).toHaveLength(2);
+    expect(wrapper.find('FormSelectOption')).toHaveLength(3);
+    expect(wrapper.find('FormSelectOption').first().prop('value')).toEqual('/venv/ansible/');
   });
 
   test('AnsibleSelect component does not render if there are 0 virtual environments', () => {

src/screens/Organization/shared/OrganizationForm.jsx

@@ -93,7 +93,11 @@ class OrganizationForm extends Component {
   render () {
     const { organization, handleCancel, i18n, me } = this.props;
     const { instanceGroups, formIsValid, error } = this.state;
-    const defaultVenv = '/venv/ansible/';
+    const defaultVenv = {
+      label: i18n._(t`Use Default Ansible Environment`),
+      value: '/venv/ansible/',
+      key: 'default'
+    };
 
     return (
       <Formik
@@ -133,7 +137,10 @@ class OrganizationForm extends Component {
                       {(
                         <Tooltip
                           position="right"
-                          content="The maximum number of hosts allowed to be managed by this organization. Value defaults to 0 which means no limit. Refer to the Ansible documentation for more details."
+                          content={i18n._(t`The maximum number of hosts allowed
+                          to be managed by this organization. Value defaults to
+                          0 which means no limit. Refer tothe Ansible
+                          documentation for more details.`)}
                         >
                           <QuestionCircleIcon />
                         </Tooltip>
@@ -156,9 +163,10 @@ class OrganizationForm extends Component {
                           label={i18n._(t`Ansible Environment`)}
                         >
                           <AnsibleSelect
-                            data={custom_virtualenvs}
+                            data={[defaultVenv, ...custom_virtualenvs
-                            defaultSelected={defaultVenv}
+                              .filter(datum => datum !== defaultVenv.value)
-                            label={i18n._(t`Ansible Environment`)}
+                              .map(datum => ({ label: datum, value: datum, key: datum }))
+                            ]}
                             {...field}
                           />
                         </FormGroup>

src/screens/Organization/shared/OrganizationForm.test.jsx

@@ -144,7 +144,8 @@ describe('<OrganizationForm />', () => {
       }
     );
     expect(wrapper.find('FormSelect')).toHaveLength(1);
-    expect(wrapper.find('FormSelectOption')).toHaveLength(2);
+    expect(wrapper.find('FormSelectOption')).toHaveLength(3);
+    expect(wrapper.find('FormSelectOption').first().prop('value')).toEqual('/venv/ansible/');
   });
 
   test('calls handleSubmit when form submitted', async () => {