Restore FormGroup to parent Add Org component for AnsibleSelect.

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  FormGroup,
   Select,
   SelectOption,
 } from '@patternfly/react-core';
@@ -13,19 +12,6 @@ class AnsibleSelect extends React.Component {
     this.onSelectChange = this.onSelectChange.bind(this);
   }
 
-  state = {
-    count: 1,
-  }
-
-  static getDerivedStateFromProps (nexProps) {
-    if (nexProps.data) {
-      return {
-        count: nexProps.data.length,
-      };
-    }
-    return null;
-  }
-
   onSelectChange (val, event) {
     const { onChange, name } = this.props;
     event.target.name = name;
@@ -33,23 +19,14 @@ class AnsibleSelect extends React.Component {
   }
 
   render () {
-    const { count } = this.state;
+    const { label, value, data, defaultSelected } = this.props;
-    const { label = '', value, data, name, defaultSelected } = this.props;
+    return (
-    let elem;
+      <Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
-    if (count > 1) {
+        {data.map((datum) => (datum === defaultSelected
-      elem = (
+          ? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
-        <FormGroup label={label} fieldId={`ansible-select-${name}`}>
+        }
-          <Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
+      </Select>
-            {data.map((datum) => (datum === defaultSelected
+    );
-              ? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
-            }
-          </Select>
-        </FormGroup>
-      );
-    } else {
-      elem = null;
-    }
-    return elem;
   }
 }
 
@@ -57,14 +34,13 @@ AnsibleSelect.defaultProps = {
   data: [],
   label: 'Ansible Select',
   defaultSelected: null,
-  name: null,
 };
 
 AnsibleSelect.propTypes = {
   data: PropTypes.arrayOf(PropTypes.string),
   defaultSelected: PropTypes.string,
   label: PropTypes.string,
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
 };

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -137,14 +137,18 @@ class OrganizationAdd extends React.Component {
                 </FormGroup>
                 <ConfigContext.Consumer>
                   {({ custom_virtualenvs }) => (
-                    <AnsibleSelect
+                    custom_virtualenvs && custom_virtualenvs.length > 1 && (
-                      label="Ansible Environment"
+                      <FormGroup label="Ansible Environment" fieldId="add-org-custom-virtualenv">
-                      name="custom_virtualenv"
+                        <AnsibleSelect
-                      value={custom_virtualenv}
+                          label="Ansible Environment"
-                      onChange={this.onFieldChange}
+                          name="custom_virtualenv"
-                      data={custom_virtualenvs}
+                          value={custom_virtualenv}
-                      defaultSelected={defaultEnv}
+                          onChange={this.onFieldChange}
-                    />
+                          data={custom_virtualenvs}
+                          defaultSelected={defaultEnv}
+                        />
+                      </FormGroup>
+                    )
                   )}
                 </ConfigContext.Consumer>
               </Gallery>