Merge pull request #106 from ansible/add-select-default-option

Add default option for AnsibleSelect dropdown.

__tests__/components/AnsibleSelect.test.jsx

@@ -11,7 +11,7 @@ describe('<AnsibleSelect />', () => {
         value="foo"
         name="bar"
         onChange={() => { }}
-        labelName={label}
+        label={label}
         data={mockData}
       />
     );
@@ -24,7 +24,7 @@ describe('<AnsibleSelect />', () => {
         value="foo"
         name="bar"
         onChange={() => { }}
-        labelName={label}
+        label={label}
         data={mockData}
       />
     );
@@ -39,11 +39,24 @@ describe('<AnsibleSelect />', () => {
         value="foo"
         name="bar"
         onChange={() => { }}
-        labelName={label}
+        label={label}
         data={null}
       />
     );
     expect(wrapper.find('FormGroup')).toHaveLength(0);
     expect(wrapper.find('Select')).toHaveLength(0);
   });
+  test('Returns correct select options if defaultSelected props is passed', () => {
+    const wrapper = mount(
+      <AnsibleSelect
+        value="foo"
+        name="bar"
+        onChange={() => { }}
+        label={label}
+        data={mockData}
+        defaultSelected={mockData[1]}
+      />
+    );
+    expect(wrapper.find('Select')).toHaveLength(1);
+  });
 });

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -32,22 +32,20 @@ class AnsibleSelect extends React.Component {
 
   render () {
     const { count } = this.state;
-    const { value, data } = this.props;
+    const { label = '', value, data, defaultSelected } = this.props;
     let elem;
     if (count > 1) {
       elem = (
         <Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
-          {data.map((datum) => (
-            <SelectOption isDisabled={datum.disabled} key={datum} value={datum} label={datum} />
-          ))}
+          {data.map((datum) => (datum === defaultSelected
+            ? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
+          }
         </Select>
       );
     } else {
       elem = null;
     }
-
     return elem;
   }
 }
-
 export default AnsibleSelect;

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -33,6 +33,7 @@ class OrganizationAdd extends React.Component {
       custom_virtualenv: '',
       instanceGroups: [],
       error: '',
+      defaultEnv: '/venv/ansible/',
     };
   }
 
@@ -92,6 +93,7 @@ class OrganizationAdd extends React.Component {
       name,
       description,
       custom_virtualenv,
+      defaultEnv,
       instanceGroups,
       error
     } = this.state;
@@ -137,10 +139,12 @@ class OrganizationAdd extends React.Component {
                   {({ custom_virtualenvs }) => (
                     <FormGroup label="Ansible Environment" fieldId="add-org-form-custom-virtualenv">
                       <AnsibleSelect
+                        label="Ansible Environment"
                         name="custom_virtualenv"
                         value={custom_virtualenv}
                         onChange={this.onFieldChange}
                         data={custom_virtualenvs}
+                        defaultSelected={defaultEnv}
                       />
                     </FormGroup>
                   )}
@@ -151,7 +155,7 @@ class OrganizationAdd extends React.Component {
                 submitDisabled={!enabled}
                 onCancel={this.onCancel}
               />
-              { error ? <div>error</div> : '' }
+              {error ? <div>error</div> : ''}
             </Form>
           </CardBody>
         </Card>