Convert QueryMakerTab to tsx

ui/src/data_explorer/components/QueryMakerTab.tsx

@@ -1,29 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
 import classnames from 'classnames'
 
-const QueryMakerTab = React.createClass({
-  propTypes: {
-    isActive: PropTypes.bool,
-    query: PropTypes.shape({
-      rawText: PropTypes.string,
-    }).isRequired,
-    onSelect: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    queryTabText: PropTypes.string,
-    queryIndex: PropTypes.number,
-  },
+interface Query {
+  rawText: string
+}
 
-  handleSelect() {
-    this.props.onSelect(this.props.queryIndex)
-  },
+interface Props {
+  isActive: boolean
+  query: Query
+  onSelect: (index: number) => void
+  onDelete: (index: number) => void
+  queryTabText: string
+  queryIndex: number
+}
 
-  handleDelete(e) {
-    e.stopPropagation()
-    this.props.onDelete(this.props.queryIndex)
-  },
-
-  render() {
+class QueryMakerTab extends PureComponent<Props> {
+  public render() {
     return (
       <div
         className={classnames('query-maker--tab', {
@@ -39,7 +31,16 @@ const QueryMakerTab = React.createClass({
         />
       </div>
     )
-  },
-})
+  }
+
+  private handleSelect() {
+    this.props.onSelect(this.props.queryIndex)
+  }
+
+  private handleDelete(e) {
+    e.stopPropagation()
+    this.props.onDelete(this.props.queryIndex)
+  }
+}
 
 export default QueryMakerTab

ui/src/shared/components/QueryTabList.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab'
+import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab.tsx'
 import buildInfluxQLQuery from 'utils/influxql'
 
 const QueryTabList = ({