Integrate proptypes for our shared components.

- Fix unit tests.
- Fix linter errors.

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
+  FormGroup,
   Select,
   SelectOption,
 } from '@patternfly/react-core';
@@ -32,15 +34,17 @@ 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;
     let elem;
     if (count > 1) {
       elem = (
-        <Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
-          {data.map((datum) => (datum === defaultSelected
-            ? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
-          }
-        </Select>
+        <FormGroup label={label} fieldId={`ansible-select-${name}`}>
+          <Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
+            {data.map((datum) => (datum === defaultSelected
+              ? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
+            }
+          </Select>
+        </FormGroup>
       );
     } else {
       elem = null;
@@ -48,4 +52,21 @@ class AnsibleSelect extends React.Component {
     return elem;
   }
 }
+
+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,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
 export default AnsibleSelect;