WIP move rawquery logic in to DE container

ui/src/data_explorer/components/QueryEditor.js

@@ -86,7 +86,7 @@ class QueryEditor extends Component {
 const {func, shape, string} = PropTypes
 
 QueryEditor.propTypes = {
-  query: string.isRequired,
+  query: string,
   onUpdate: func.isRequired,
   config: shape().isRequired,
 }

ui/src/data_explorer/components/QueryMaker.tsx

@@ -2,15 +2,14 @@ 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'
+import {Source, Query} from 'src/types'
 
 const rawTextBinder = (links, id, action) => text =>
   action(links.queries, id, text)
 
 interface Props {
   source: Source
-  timeRange: TimeRange
+  rawText: string
   actions: any
   activeQuery: Query
   initialGroupByTime: string
@@ -18,13 +17,19 @@ interface Props {
 
 class QueryMaker extends PureComponent<Props> {
   public render() {
-    const {source, actions, activeQuery, initialGroupByTime} = this.props
+    const {
+      source,
+      actions,
+      rawText,
+      activeQuery,
+      initialGroupByTime,
+    } = this.props
 
     return (
       <div className="query-maker query-maker--panel">
         <div className="query-maker--tab-contents">
           <QueryEditor
-            query={this.rawText}
+            query={rawText}
             config={activeQuery}
             onUpdate={rawTextBinder(
               source.links,
@@ -34,19 +39,14 @@ class QueryMaker extends PureComponent<Props> {
           />
           <SchemaExplorer
             source={source}
-            query={activeQuery}
             actions={actions}
+            query={activeQuery}
             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

@@ -76,9 +76,10 @@ export class DataExplorer extends PureComponent<Props, State> {
   public componentWillReceiveProps(nextProps) {
     const {router} = this.props
     const {queryConfigs, timeRange} = nextProps
-    const query = buildRawText(_.get(queryConfigs, ['0'], ''), timeRange)
 
+    const query = buildRawText(_.get(queryConfigs, ['0'], ''), timeRange)
     const qsCurrent = queryString.parse(location.search)
+
     if (query.length && qsCurrent.query !== query) {
       const qsNew = queryString.stringify({query})
       router.push(`${location.pathname}?${qsNew}`)
@@ -100,6 +101,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     } = this.props
 
     const {showWriteForm} = this.state
+
     return (
       <div className="data-explorer">
         {showWriteForm ? (
@@ -130,8 +132,8 @@ export class DataExplorer extends PureComponent<Props, State> {
         >
           <QueryMaker
             source={source}
+            rawText={this.rawText}
             actions={queryConfigActions}
-            timeRange={timeRange}
             activeQuery={this.activeQuery}
             initialGroupByTime={AUTO_GROUP_BY}
           />
@@ -163,11 +165,11 @@ export class DataExplorer extends PureComponent<Props, State> {
     this.props.setTimeRange(bounds)
   }
 
-  private get selectedDatabase() {
+  private get selectedDatabase(): string {
     return _.get(this.props.queryConfigs, ['0', 'database'], null)
   }
 
-  private get activeQuery() {
+  private get activeQuery(): Query {
     const {queryConfigs} = this.props
 
     if (queryConfigs.length === 0) {
@@ -178,6 +180,11 @@ export class DataExplorer extends PureComponent<Props, State> {
 
     return queryConfigs[0]
   }
+
+  get rawText(): string {
+    const {timeRange} = this.props
+    return buildRawText(this.activeQuery, timeRange)
+  }
 }
 
 const mapStateToProps = state => {