Convert function selector

ui/src/data_explorer/components/QueryEditor.tsx

@@ -61,7 +61,7 @@ class QueryEditor extends PureComponent<Props, State> {
               <QueryStatus status={status}>
                 <Dropdown
                   items={QUERY_TEMPLATES}
-                  selected={'Query Templates'}
+                  selected="Query Templates"
                   onChoose={this.handleChooseMetaQuery}
                   className="dropdown-140 query-editor--templates"
                   buttonSize="btn-xs"

ui/src/shared/components/FunctionSelector.tsx

@@ -1,12 +1,21 @@
-import React, {Component} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import _ from 'lodash'
 import {INFLUXQL_FUNCTIONS} from 'src/data_explorer/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+interface Props {
+  onApply: (item: string[]) => void
+  selectedItems: string[]
+  singleSelect: boolean
+}
+
+interface State {
+  localSelectedItems: string[]
+}
+
 @ErrorHandling
-class FunctionSelector extends Component {
+class FunctionSelector extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
 
@@ -15,60 +24,20 @@ class FunctionSelector extends Component {
     }
   }
 
-  componentWillUpdate(nextProps) {
+  public componentWillUpdate(nextProps) {
     if (!_.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
       this.setState({localSelectedItems: nextProps.selectedItems})
     }
   }
 
-  onSelect = (item, e) => {
+  public render() {
-    e.stopPropagation()
-
-    const {localSelectedItems} = this.state
-
-    let nextItems
-    if (this.isSelected(item)) {
-      nextItems = localSelectedItems.filter(i => i !== item)
-    } else {
-      nextItems = [...localSelectedItems, item]
-    }
-
-    this.setState({localSelectedItems: nextItems})
-  }
-
-  onSingleSelect = item => {
-    if (item === this.state.localSelectedItems[0]) {
-      this.props.onApply([])
-      this.setState({localSelectedItems: []})
-    } else {
-      this.props.onApply([item])
-      this.setState({localSelectedItems: [item]})
-    }
-  }
-
-  isSelected = item => {
-    return !!this.state.localSelectedItems.find(text => text === item)
-  }
-
-  handleApplyFunctions = e => {
-    e.stopPropagation()
-
-    this.props.onApply(this.state.localSelectedItems)
-  }
-
-  render() {
-    const {localSelectedItems} = this.state
     const {singleSelect} = this.props
 
     return (
       <div className="function-selector">
-        {singleSelect ? null : (
+        {!singleSelect && (
           <div className="function-selector--header">
-            <span>
+            <span>{this.headerText}</span>
-              {localSelectedItems.length > 0
-                ? `${localSelectedItems.length} Selected`
-                : 'Select functions below'}
-            </span>
             <div
               className="btn btn-xs btn-success"
               onClick={this.handleApplyFunctions}
@@ -100,14 +69,49 @@ class FunctionSelector extends Component {
       </div>
     )
   }
-}
 
-const {arrayOf, bool, func, string} = PropTypes
+  private get headerText(): string {
+    const numItems = this.state.localSelectedItems.length
+    if (!numItems) {
+      return 'Select functions below'
+    }
 
-FunctionSelector.propTypes = {
+    return `${numItems} Selected`
-  onApply: func.isRequired,
+  }
-  selectedItems: arrayOf(string.isRequired).isRequired,
+
-  singleSelect: bool,
+  private onSelect = (item: string, e: MouseEvent<HTMLDivElement>): void => {
+    e.stopPropagation()
+
+    const {localSelectedItems} = this.state
+
+    let nextItems
+    if (this.isSelected(item)) {
+      nextItems = localSelectedItems.filter(i => i !== item)
+    } else {
+      nextItems = [...localSelectedItems, item]
+    }
+
+    this.setState({localSelectedItems: nextItems})
+  }
+
+  private onSingleSelect = (item: string): void => {
+    if (item === this.state.localSelectedItems[0]) {
+      this.props.onApply([])
+      this.setState({localSelectedItems: []})
+    } else {
+      this.props.onApply([item])
+      this.setState({localSelectedItems: [item]})
+    }
+  }
+
+  private isSelected = (item: string): boolean => {
+    return !!this.state.localSelectedItems.find(text => text === item)
+  }
+
+  private handleApplyFunctions = (e: MouseEvent<HTMLDivElement>): void => {
+    e.stopPropagation()
+    this.props.onApply(this.state.localSelectedItems)
+  }
 }
 
 export default FunctionSelector