Pass disabled prop directly into dropdown child components

ui/src/shared/components/Dropdown.js

@@ -146,7 +146,6 @@ export class Dropdown extends Component {
 
     const {isOpen, searchTerm, filteredItems, highlightedItemIndex} = this.state
     const menuItems = useAutoComplete ? filteredItems : items
-    const disabledClass = disabled ? 'disabled' : null
 
     return (
       <div
@@ -165,7 +164,7 @@ export class Dropdown extends Component {
               buttonSize={buttonSize}
               buttonColor={buttonColor}
               toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
               onFilterChange={this.handleFilterChange}
               onFilterKeyPress={this.handleFilterKeyPress}
             />
@@ -176,7 +175,7 @@ export class Dropdown extends Component {
               buttonSize={buttonSize}
               buttonColor={buttonColor}
               toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
             />}
         {isOpen && menuItems.length
           ? <DropdownMenu

ui/src/shared/components/DropdownHead.js

@@ -2,16 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownHead = ({
   iconName,
   selected,
   buttonSize,
   toggleStyle,
   buttonColor,
-  disabledClass,
+  disabled,
 }) =>
   <div
-    className={`btn dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`btn dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
     style={toggleStyle}
   >
     {iconName && <span className={classnames('icon', {[iconName]: true})} />}
@@ -21,15 +25,15 @@ const DropdownHead = ({
     <span className="caret" />
   </div>
 
-const {string, shape} = PropTypes
+const {bool, string, shape} = PropTypes
 
 DropdownHead.propTypes = {
   iconName: string,
-  selected: string,
-  buttonSize: string,
+  selected: string.isRequired,
+  buttonSize: string.isRequired,
   toggleStyle: shape(),
-  buttonColor: string,
-  disabledClass: string,
+  buttonColor: string.isRequired,
+  disabled: bool,
 }
 
 export default DropdownHead

ui/src/shared/components/DropdownInput.js

@@ -1,17 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownInput = ({
   searchTerm,
   buttonSize,
   buttonColor,
   toggleStyle,
-  disabledClass,
+  disabled,
   onFilterChange,
   onFilterKeyPress,
 }) =>
   <div
-    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
     style={toggleStyle}
   >
     <input
@@ -29,14 +33,14 @@ const DropdownInput = ({
 
 export default DropdownInput
 
-const {func, shape, string} = PropTypes
+const {bool, func, shape, string} = PropTypes
 
 DropdownInput.propTypes = {
   searchTerm: string,
   buttonSize: string,
   buttonColor: string,
   toggleStyle: shape({}),
-  disabledClass: string,
-  onFilterChange: func,
-  onFilterKeyPress: func,
+  disabled: bool,
+  onFilterChange: func.isRequired,
+  onFilterKeyPress: func.isRequired,
 }