Start query editor with placeholder text

ui/src/data_explorer/components/QueryBuilder.js

@@ -52,7 +52,7 @@ const QueryBuilder = React.createClass({
 
   handleAddRawQuery() {
     const newIndex = this.props.queries.length
-    this.props.actions.addQuery({rawText: `SELECT "fields" from "db"."rp"."measurement"`})
+    this.props.actions.addQuery({rawText: ''})
     this.handleSetActiveQueryIndex(newIndex)
   },
 
@@ -115,7 +115,7 @@ const QueryBuilder = React.createClass({
               query={q}
               onSelect={this.handleSetActiveQueryIndex}
               onDelete={onDeleteQuery}
-              queryTabText={q.rawText || buildInfluxQLQuery(timeRange, q) || `SELECT "fields" FROM "db"."rp"."measurement"`}
+              queryTabText={q.rawText || buildInfluxQLQuery(timeRange, q) || `Query ${i + 1}`}
             />
           )
         })}

ui/src/data_explorer/components/QueryEditor.js

@@ -91,9 +91,9 @@ const QueryEditor = React.createClass({
 
   renderQuery() {
     const {query, timeRange} = this.props
-    const statement = query.rawText || buildInfluxQLQuery(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`
+    const statement = query.rawText || buildInfluxQLQuery(timeRange, query) || `Select a database, measurement, and field below.`
 
-    if (!query.rawText) {
+    if (typeof query.rawText !== 'string') {
       return (
         <div className="query-builder--query-preview">
           <pre><code>{statement}</code></pre>

ui/src/data_explorer/components/RawQueryEditor.js

@@ -29,7 +29,7 @@ const RawQueryEditor = React.createClass({
       e.preventDefault()
       this.handleUpdate()
     } else if (e.keyCode === ESCAPE) {
-      this.setState({value: this.props.query.rawText}, () => {
+      this.setState({value: this.state.value}, () => {
         this.editor.blur()
       })
     }

ui/src/data_explorer/components/Table.js

@@ -6,6 +6,10 @@ import _ from 'lodash'
 import moment from 'moment'
 
 const {oneOfType, number, string, shape, arrayOf, func} = PropTypes
+const emptyCells = {
+  columns: [],
+  values: [],
+}
 
 const CustomCell = React.createClass({
   propTypes: {
@@ -39,10 +43,7 @@ const ChronoTable = React.createClass({
 
   getInitialState() {
     return {
-      cellData: {
+      cellData: emptyCells,
-        columns: [],
-        values: [],
-      },
       columnWidths: {},
     }
   },
@@ -54,6 +55,10 @@ const ChronoTable = React.createClass({
   },
 
   async fetchCellData(query) {
+    if (!query.text) {
+      return
+    }
+
     this.setState({isLoading: true})
     const {onEditRawStatus} = this.props
     // second param is db, we want to leave this blank
@@ -87,9 +92,15 @@ const ChronoTable = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.query.text !== nextProps.query.text) {
+    if (!this.props.query || !nextProps.query) {
-      this.fetchCellData(nextProps.query)
+      return
     }
+
+    if (this.props.query.text === nextProps.query.text) {
+      return
+    }
+
+    this.fetchCellData(nextProps.query)
   },
 
   handleColumnResize(newColumnWidth, columnKey) {