Modify function selector to optionally work as a single select

ui/src/data_explorer/components/FieldListItem.js

@@ -3,9 +3,6 @@ import classnames from 'classnames'
 import _ from 'lodash'
 
 import FunctionSelector from 'shared/components/FunctionSelector'
-import Dropdown from 'shared/components/Dropdown'
-
-import {INFLUXQL_FUNCTIONS} from '../constants'
 
 const {string, shape, func, arrayOf, bool} = PropTypes
 const FieldListItem = React.createClass({
@@ -41,7 +38,7 @@ const FieldListItem = React.createClass({
   handleApplyFunctions(selectedFuncs) {
     this.props.onApplyFuncsToField({
       field: this.props.fieldFunc.field,
-      funcs: this.props.isKapacitorRule ? [selectedFuncs.text] : selectedFuncs,
+      funcs: selectedFuncs,
     })
     this.setState({isOpen: false})
   },
@@ -50,38 +47,6 @@ const FieldListItem = React.createClass({
     const {isKapacitorRule, fieldFunc, isSelected} = this.props
     const {isOpen} = this.state
     const {field: fieldText} = fieldFunc
-    const items = INFLUXQL_FUNCTIONS.map(text => {
-      return {text}
-    })
-
-    if (isKapacitorRule) {
-      return (
-        <div
-          className={classnames('query-builder--list-item', {
-            active: isSelected,
-          })}
-          key={fieldFunc}
-          onClick={_.wrap(fieldFunc, this.handleToggleField)}
-        >
-          <span>
-            <div className="query-builder--checkbox" />
-            {fieldText}
-          </span>
-          {isSelected
-            ? <Dropdown
-                className="dropdown-110"
-                menuClass="dropdown-malachite"
-                buttonSize="btn-xs"
-                items={items}
-                onChoose={this.handleApplyFunctions}
-                selected={
-                  fieldFunc.funcs.length ? fieldFunc.funcs[0] : 'Function'
-                }
-              />
-            : null}
-        </div>
-      )
-    }
 
     let fieldFuncsLabel
     if (!fieldFunc.funcs.length) {
@@ -121,6 +86,7 @@ const FieldListItem = React.createClass({
           ? <FunctionSelector
               onApply={this.handleApplyFunctions}
               selectedItems={fieldFunc.funcs || []}
+              singleSelect={isKapacitorRule}
             />
           : null}
       </div>

ui/src/shared/components/FunctionSelector.js

@@ -12,6 +12,7 @@ class FunctionSelector extends Component {
     }
 
     this.onSelect = ::this.onSelect
+    this.onSingleSelect = ::this.onSingleSelect
     this.handleApplyFunctions = ::this.handleApplyFunctions
   }
 
@@ -36,6 +37,11 @@ class FunctionSelector extends Component {
     this.setState({localSelectedItems: nextItems})
   }
 
+  onSingleSelect(item) {
+    this.props.onApply([item])
+    this.setState({localSelectedItems: [item]})
+  }
+
   isSelected(item) {
     return !!this.state.localSelectedItems.find(text => text === item)
   }
@@ -48,47 +54,65 @@ class FunctionSelector extends Component {
 
   render() {
     const {localSelectedItems} = this.state
+    const {singleSelect} = this.props
 
     return (
       <div className="function-selector">
-        <div className="function-selector--header">
-          <span>
-            {localSelectedItems.length > 0
-              ? `${localSelectedItems.length} Selected`
-              : 'Select functions below'}
-          </span>
-          <div
-            className="btn btn-xs btn-success"
-            onClick={this.handleApplyFunctions}
-          >
-            Apply
-          </div>
-        </div>
-        <div className="function-selector--grid">
-          {INFLUXQL_FUNCTIONS.map((f, i) => {
-            return (
+        {singleSelect
+          ? null
+          : <div className="function-selector--header">
+              <span>
+                {localSelectedItems.length > 0
+                  ? `${localSelectedItems.length} Selected`
+                  : 'Select functions below'}
+              </span>
               <div
-                key={i}
-                className={classnames('function-selector--item', {
-                  active: this.isSelected(f),
-                })}
-                onClick={_.wrap(f, this.onSelect)}
+                className="btn btn-xs btn-success"
+                onClick={this.handleApplyFunctions}
               >
-                {f}
+                Apply
               </div>
-            )
-          })}
+            </div>}
+        <div className="function-selector--grid">
+          {singleSelect
+            ? INFLUXQL_FUNCTIONS.map((f, i) => {
+                return (
+                  <div
+                    key={i}
+                    className={classnames('function-selector--item', {
+                      active: this.isSelected(f),
+                    })}
+                    onClick={_.wrap(f, this.onSingleSelect)}
+                  >
+                    {f}
+                  </div>
+                )
+              })
+            : INFLUXQL_FUNCTIONS.map((f, i) => {
+                return (
+                  <div
+                    key={i}
+                    className={classnames('function-selector--item', {
+                      active: this.isSelected(f),
+                    })}
+                    onClick={_.wrap(f, this.onSelect)}
+                  >
+                    {f}
+                  </div>
+                )
+              })}
         </div>
       </div>
     )
   }
 }
 
-const {arrayOf, func, string} = PropTypes
+const {arrayOf, bool, func, string} = PropTypes
 
 FunctionSelector.propTypes = {
   onApply: func.isRequired,
   selectedItems: arrayOf(string.isRequired).isRequired,
+  singleSelect: bool,
 }
 
 export default FunctionSelector

ui/src/style/components/function-selector.scss

@@ -33,10 +33,12 @@ $function-selector--text-active: $g20-white;
   display: flex;
   flex-wrap: wrap;
   padding: $function-selector--gutter;
-  padding-top: 0;
   border-radius: 0 0 $radius $radius;
   background-color: $function-selector--bg;
 }
+.function-selector--header + .function-selector--grid {
+  padding-top: 0;
+}
 .function-selector--item {
   @include no-user-select();
   border-radius: $radius;