Convert QueryMaker to TypesScript and add test

ui/src/data_explorer/components/QueryMaker.js

@@ -1,67 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import QueryEditor from './QueryEditor'
-import SchemaExplorer from 'src/shared/components/SchemaExplorer'
-import {buildRawText} from 'utils/influxql'
-
-const rawTextBinder = (links, id, action) => text =>
-  action(links.queries, id, text)
-
-const QueryMaker = ({
-  source,
-  actions,
-  timeRange,
-  activeQuery,
-  initialGroupByTime,
-}) => (
-  <div className="query-maker query-maker--panel">
-    <div className="query-maker--tab-contents">
-      <QueryEditor
-        query={buildRawText(activeQuery, timeRange)}
-        config={activeQuery}
-        onUpdate={rawTextBinder(
-          source.links,
-          activeQuery.id,
-          actions.editRawTextAsync
-        )}
-      />
-      <SchemaExplorer
-        initialGroupByTime={initialGroupByTime}
-        query={activeQuery}
-        actions={actions}
-      />
-    </div>
-  </div>
-)
-
-const {func, shape, string} = PropTypes
-
-QueryMaker.propTypes = {
-  source: shape({
-    links: shape({
-      queries: string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  timeRange: shape({
-    upper: string,
-    lower: string,
-  }).isRequired,
-  actions: shape({
-    chooseNamespace: func.isRequired,
-    chooseMeasurement: func.isRequired,
-    chooseTag: func.isRequired,
-    groupByTag: func.isRequired,
-    addQuery: func.isRequired,
-    toggleField: func.isRequired,
-    groupByTime: func.isRequired,
-    toggleTagAcceptance: func.isRequired,
-    applyFuncsToField: func.isRequired,
-    editRawTextAsync: func.isRequired,
-    addInitialField: func.isRequired,
-  }).isRequired,
-  activeQuery: shape({}),
-  initialGroupByTime: string.isRequired,
-}
-
-export default QueryMaker

ui/src/data_explorer/components/QueryMaker.tsx

@@ -0,0 +1,52 @@
+import React, {PureComponent} from 'react'
+
+import QueryEditor from './QueryEditor'
+import SchemaExplorer from 'src/shared/components/SchemaExplorer'
+import {buildRawText} from 'src/utils/influxql'
+import {Source, TimeRange, Query} from 'src/types'
+
+const rawTextBinder = (links, id, action) => text =>
+  action(links.queries, id, text)
+
+interface Props {
+  source: Source
+  timeRange: TimeRange
+  actions: any
+  activeQuery: Query
+  initialGroupByTime: string
+}
+
+class QueryMaker extends PureComponent<Props> {
+  public render() {
+    const {source, actions, activeQuery, initialGroupByTime} = this.props
+
+    return (
+      <div className="query-maker query-maker--panel">
+        <div className="query-maker--tab-contents">
+          <QueryEditor
+            query={this.rawText}
+            config={activeQuery}
+            onUpdate={rawTextBinder(
+              source.links,
+              activeQuery.id,
+              actions.editRawTextAsync
+            )}
+          />
+          <SchemaExplorer
+            source={source}
+            query={activeQuery}
+            actions={actions}
+            initialGroupByTime={initialGroupByTime}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  get rawText(): string {
+    const {activeQuery, timeRange} = this.props
+    return buildRawText(activeQuery, timeRange)
+  }
+}
+
+export default QueryMaker

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -100,7 +100,6 @@ export class DataExplorer extends PureComponent<Props, State> {
     } = this.props
 
     const {showWriteForm} = this.state
-    const selectedDatabase = _.get(queryConfigs, ['0', 'database'], null)
     return (
       <div className="data-explorer">
         {showWriteForm ? (
@@ -108,7 +107,7 @@ export class DataExplorer extends PureComponent<Props, State> {
             <WriteDataForm
               source={source}
               errorThrown={errorThrownAction}
-              selectedDatabase={selectedDatabase}
+              selectedDatabase={this.selectedDatabase}
               onClose={this.handleCloseWriteData}
               writeLineProtocol={writeLineProtocol}
             />
@@ -152,18 +151,22 @@ export class DataExplorer extends PureComponent<Props, State> {
     )
   }
 
-  private handleCloseWriteData = () => {
+  private handleCloseWriteData = (): void => {
     this.setState({showWriteForm: false})
   }
 
-  private handleOpenWriteData = () => {
+  private handleOpenWriteData = (): void => {
     this.setState({showWriteForm: true})
   }
 
-  private handleChooseTimeRange = bounds => {
+  private handleChooseTimeRange = (bounds: TimeRange): void => {
     this.props.setTimeRange(bounds)
   }
 
+  private get selectedDatabase() {
+    return _.get(this.props.queryConfigs, ['0', 'database'], null)
+  }
+
   private get activeQuery() {
     const {queryConfigs} = this.props
 

ui/test/data_explorer/components/QueryMaker.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import QueryMaker from 'src/data_explorer/components/QueryMaker'
+import {shallow} from 'enzyme'
+import {source, query, timeRange} from 'test/resources'
+
+const setup = () => {
+  const props = {
+    source,
+    timeRange,
+    actions: {
+      chooseNamespace: () => {},
+      chooseMeasurement: () => {},
+      chooseTag: () => {},
+      groupByTag: () => {},
+      addQuery: () => {},
+      toggleField: () => {},
+      groupByTime: () => {},
+      toggleTagAcceptance: () => {},
+      applyFuncsToField: () => {},
+      editRawTextAsync: () => {},
+      addInitialField: () => {},
+      fill: () => {},
+      removeFuncs: () => {},
+    },
+    activeQuery: query,
+    initialGroupByTime: '',
+  }
+
+  const wrapper = shallow(<QueryMaker {...props} />)
+
+  return {
+    wrapper,
+  }
+}
+
+describe('DataExplorer.Components.QueryMaker', () => {
+  describe('rendering', () => {
+    it('renders', () => {
+      const {wrapper} = setup()
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+})