Allow for rawText queries again

ui/src/chronograf/actions/view/index.js

@@ -119,6 +119,16 @@ export function chooseMeasurement(queryId, measurement) {
   };
 }
 
+export function editRawText(queryId, rawText) {
+  return {
+    type: 'EDIT_RAW_TEXT',
+    payload: {
+      queryId,
+      rawText,
+    },
+  };
+}
+
 export function setTimeRange(range) {
   window.localStorage.setItem('timeRange', JSON.stringify(range));
 

ui/src/chronograf/components/PanelBuilder.js

@@ -12,6 +12,7 @@ const PanelBuilder = React.createClass({
       createPanel: func.isRequired,
       deleteQuery: func.isRequired,
       addQuery: func.isRequired,
+      editRawText: func.isRequired,
       chooseNamespace: func.isRequired,
       chooseMeasurement: func.isRequired,
       toggleField: func.isRequired,

ui/src/chronograf/components/QueryEditor.js

@@ -86,37 +86,39 @@ const QueryEditor = React.createClass({
     this.props.actions.groupByTag(this.props.query.id, tagKey);
   },
 
+  handleEditRawText(_queryID, text) {
+    this.props.actions.editRawText(this.props.query.id, text);
+  },
+
   handleClickTab(tab) {
     this.setState({activeTab: tab});
   },
 
   render() {
-    const {query, timeRange} = this.props;
-
-    const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
-
     return (
       <div className="explorer--tab-contents">
-        <div className="qeditor--query-preview">
-          <pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
-        </div>
-        {this.renderEditor()}
+        {this.renderQuery()}
+        {this.renderLists()}
       </div>
     );
   },
 
-  renderEditor() {
-    if (this.props.query.rawText) {
+  renderQuery() {
+    const {query, timeRange} = this.props;
+    const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
+
+    if (!query.rawText) {
       return (
-        <div className="qeditor--empty">
-          <p className="margin-bottom-zero">
-            <span className="icon alert-triangle"></span>
-            &nbsp;Only editable in the <strong>Raw Query</strong> tab.
-          </p>
+        <div className="qeditor--query-preview">
+          <pre><code>{statement}</code></pre>
         </div>
       );
     }
 
+    return <RawQueryEditor query={query} onUpdate={this.handleEditRawText} defaultValue={query.rawText} />;
+  },
+
+  renderLists() {
     const {activeTab} = this.state;
     return (
       <div>
@@ -174,4 +176,47 @@ const QueryEditor = React.createClass({
   },
 });
 
+const ENTER = 13;
+const RawQueryEditor = React.createClass({
+  propTypes: {
+    query: PropTypes.shape({
+      rawText: PropTypes.string,
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+    onUpdate: PropTypes.func.isRequired,
+    defaultValue: PropTypes.string.isRequired,
+  },
+
+  handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.keyCode !== ENTER) {
+      return;
+    }
+    e.preventDefault();
+    this.editor.blur();
+  },
+
+  handleUpdate() {
+    const text = this.editor.value;
+    this.props.onUpdate(this.props.query.id, text);
+  },
+
+  render() {
+    const {defaultValue} = this.props;
+
+    return (
+      <div className="raw-query-editor-wrapper rq-mode">
+        <textarea
+          className="raw-query-editor"
+          onKeyDown={this.handleKeyDown}
+          onBlur={this.handleUpdate}
+          ref={(editor) => this.editor = editor}
+          defaultValue={defaultValue}
+          placeholder="Blank query"
+        />
+      </div>
+    );
+  },
+});
+
 export default QueryEditor;

ui/src/chronograf/reducers/queryConfigs.js

@@ -1,5 +1,6 @@
 import defaultQueryConfig from 'src/utils/defaultQueryConfig';
 import {
+  editRawText,
   applyFuncsToField,
   chooseMeasurement,
   chooseNamespace,
@@ -20,10 +21,10 @@ export default function queryConfigs(state = {}, action) {
 
     case 'CHOOSE_NAMESPACE': {
       const {queryId, database, retentionPolicy} = action.payload;
-      const nextQueryConfig = chooseNamespace(defaultQueryConfig(queryId), {database, retentionPolicy});
+      const nextQueryConfig = chooseNamespace(state[queryId], {database, retentionPolicy});
 
       return Object.assign({}, state, {
-        [queryId]: nextQueryConfig,
+        [queryId]: Object.assign(nextQueryConfig, {rawText: state[queryId].rawText}),
       });
     }
 
@@ -32,7 +33,7 @@ export default function queryConfigs(state = {}, action) {
       const nextQueryConfig = chooseMeasurement(state[queryId], measurement);
 
       return Object.assign({}, state, {
-        [queryId]: nextQueryConfig,
+        [queryId]: Object.assign(nextQueryConfig, {rawText: state[queryId].rawText}),
       });
     }
 
@@ -65,6 +66,15 @@ export default function queryConfigs(state = {}, action) {
       return nextState;
     }
 
+    case 'EDIT_RAW_TEXT': {
+      const {queryId, rawText} = action.payload;
+      const nextQueryConfig = editRawText(state[queryId], rawText);
+
+      return Object.assign({}, state, {
+        [queryId]: nextQueryConfig,
+      });
+    }
+
     case 'GROUP_BY_TIME': {
       const {queryId, time} = action.payload;
       const nextQueryConfig = groupByTime(state[queryId], time);

ui/src/utils/queryTransitions.js

@@ -1,7 +1,11 @@
 import defaultQueryConfig from './defaultQueryConfig';
 
+export function editRawText(query, rawText) {
+  return Object.assign({}, query, {rawText});
+}
+
 export function chooseNamespace(query, namespace) {
-  return Object.assign({}, query, namespace);
+  return Object.assign({}, defaultQueryConfig(query.id), namespace);
 }
 
 export function chooseMeasurement(query, measurement) {