From 4b65f9097f322d81f5b1293a0a15e5cd3eef6195 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 5 Oct 2016 15:07:03 -0700
Subject: [PATCH] Remove raw query tab from app

---
 ui/src/chronograf/components/Explorer.js      |   2 -
 ui/src/chronograf/components/ExplorerList.js  |   2 -
 ui/src/chronograf/components/PanelBuilder.js  |  63 +--------
 ui/src/chronograf/components/QueryEditor.js   |  14 +-
 ui/src/chronograf/components/RawQueryGroup.js | 123 ------------------
 ui/src/chronograf/components/RawQueryList.js  |  51 --------
 6 files changed, 7 insertions(+), 248 deletions(-)
 delete mode 100644 ui/src/chronograf/components/RawQueryGroup.js
 delete mode 100644 ui/src/chronograf/components/RawQueryList.js

diff --git a/ui/src/chronograf/components/Explorer.js b/ui/src/chronograf/components/Explorer.js
index d525b64c5..b026c2b28 100644
--- a/ui/src/chronograf/components/Explorer.js
+++ b/ui/src/chronograf/components/Explorer.js
@@ -28,7 +28,6 @@ const Explorer = React.createClass({
       applyFuncsToField: func.isRequired,
       deletePanel: func.isRequired,
     }).isRequired,
-    onClickStatement: func.isRequired,
   },
 
   getInitialState() {
@@ -120,7 +119,6 @@ const Explorer = React.createClass({
         timeRange={timeRange}
         query={this.getActiveQuery()}
         actions={actions}
-        onClickStatement={this.props.onClickStatement}
         onAddQuery={this.handleAddQuery}
       />
     );
diff --git a/ui/src/chronograf/components/ExplorerList.js b/ui/src/chronograf/components/ExplorerList.js
index 869f2e051..c4e6b27f6 100644
--- a/ui/src/chronograf/components/ExplorerList.js
+++ b/ui/src/chronograf/components/ExplorerList.js
@@ -14,7 +14,6 @@ const ExplorerList = React.createClass({
     panels: shape({}).isRequired,
     queryConfigs: PropTypes.shape({}),
     actions: shape({}).isRequired,
-    onClickStatement: func.isRequired,
     setActivePanel: func.isRequired,
     activePanelID: string,
   },
@@ -54,7 +53,6 @@ const ExplorerList = React.createClass({
               onToggleExplorer={this.handleToggleExplorer}
               isExpanded={panelID === activePanelID}
               actions={allActions}
-              onClickStatement={this.props.onClickStatement}
             />
           );
         })}
diff --git a/ui/src/chronograf/components/PanelBuilder.js b/ui/src/chronograf/components/PanelBuilder.js
index aec08b621..c9a047c24 100644
--- a/ui/src/chronograf/components/PanelBuilder.js
+++ b/ui/src/chronograf/components/PanelBuilder.js
@@ -1,14 +1,9 @@
 import React, {PropTypes} from 'react';
 import {connect} from 'react-redux';
-import classNames from 'classnames';
 import {bindActionCreators} from 'redux';
 import ExplorerList from './ExplorerList';
-import RawQueryList from './RawQueryList';
 import * as viewActions from '../actions/view';
 
-const EXPLORER = 'explorer';
-const RAW_QUERY = 'raw query';
-
 const {string, func} = PropTypes;
 const PanelBuilder = React.createClass({
   propTypes: {
@@ -31,72 +26,26 @@ const PanelBuilder = React.createClass({
     activePanelID: string,
   },
 
-  getInitialState() {
-    return {
-      activeTab: EXPLORER,
-    };
-  },
-
-  handleClickTab(nextTab) {
-    this.setState({
-      activeTab: nextTab,
-      activeQueryID: null,
-    });
-  },
-
   handleCreateExploer() {
     this.props.actions.createPanel();
   },
 
-  handleClickStatement(queryID) {
-    this.setState({
-      activeTab: RAW_QUERY,
-      activeQueryID: queryID,
-    });
-  },
-
   render() {
-    const {width} = this.props;
-    const {activeTab} = this.state;
+    const {width, actions} = this.props;
 
     return (
       <div className="panel-builder" style={{width}}>
-        <div className="panel-builder__tabs">
-          <div className={classNames("panel-builder__tab", {active: activeTab === EXPLORER})} onClick={() => this.handleClickTab(EXPLORER)}>Explorer</div>
-          <div className={classNames("panel-builder__tab", {active: activeTab === RAW_QUERY})} onClick={() => this.handleClickTab(RAW_QUERY)}>Raw Query</div>
-        </div>
         <div className="panel-builder__tab-content">
           <div className="panel-builder__item btn btn-block btn-primary" onClick={this.handleCreateExploer}><span className="icon graphline"></span>&nbsp;&nbsp;Create Graph</div>
-          {this.renderTab()}
+          <ExplorerList
+            actions={actions}
+            setActivePanel={this.props.setActivePanel}
+            activePanelID={this.props.activePanelID}
+          />
         </div>
       </div>
     );
   },
-
-  renderTab() {
-    const {actions} = this.props;
-    const {activeTab} = this.state;
-
-    if (activeTab === EXPLORER) {
-      return (
-        <ExplorerList
-          actions={actions}
-          onClickStatement={this.handleClickStatement}
-          setActivePanel={this.props.setActivePanel}
-          activePanelID={this.props.activePanelID}
-        />
-      );
-    }
-
-    return (
-      <RawQueryList
-        actions={actions}
-        activeQueryID={this.state.activeQueryID}
-        activePanelID={this.props.activePanelID}
-        setActivePanel={this.props.setActivePanel}
-      />
-    );
-  },
 });
 
 function mapStateToProps() {
diff --git a/ui/src/chronograf/components/QueryEditor.js b/ui/src/chronograf/components/QueryEditor.js
index 536480ace..bca872be3 100644
--- a/ui/src/chronograf/components/QueryEditor.js
+++ b/ui/src/chronograf/components/QueryEditor.js
@@ -33,7 +33,6 @@ const QueryEditor = React.createClass({
       groupByTime: func.isRequired,
       toggleTagAcceptance: func.isRequired,
     }).isRequired,
-    onClickStatement: func.isRequired,
   },
 
   getInitialState() {
@@ -99,24 +98,13 @@ const QueryEditor = React.createClass({
     return (
       <div className="query-editor">
         <div className="query-editor__code">
-          {this.renderQueryWarning()}
-          <pre className={classNames("", {"rq-mode": query.rawText})} onClick={() => this.props.onClickStatement(query.id)}><code>{statement}</code></pre>
+          <pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
         </div>
         {this.renderEditor()}
       </div>
     );
   },
 
-  renderQueryWarning() {
-    if (!this.props.query.rawText) {
-      return (
-        <div className="query-editor__warning">
-          <div className="btn btn-sm btn-warning" onClick={() => this.props.onClickStatement(this.props.query.id)}>Convert to Raw Query</div>
-        </div>
-      );
-    }
-  },
-
   renderEditor() {
     if (this.props.query.rawText) {
       return (
diff --git a/ui/src/chronograf/components/RawQueryGroup.js b/ui/src/chronograf/components/RawQueryGroup.js
deleted file mode 100644
index b55696ee0..000000000
--- a/ui/src/chronograf/components/RawQueryGroup.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, {PropTypes} from 'react';
-import classNames from 'classnames';
-import selectStatement from '../utils/influxql/select';
-import RenamePanelModal from './RenamePanelModal';
-
-const ENTER = 13;
-
-const RawQueryGroup = React.createClass({
-  propTypes: {
-    queryConfigs: PropTypes.arrayOf(PropTypes.shape({})),
-    panel: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }),
-    timeRange: PropTypes.shape({
-      upper: PropTypes.string,
-      lower: PropTypes.string,
-    }).isRequired,
-    actions: PropTypes.shape({
-      updateRawQuery: PropTypes.func.isRequired,
-      renamePanel: PropTypes.func.isRequired,
-      deletePanel: PropTypes.func.isRequired,
-    }),
-    activeQueryID: PropTypes.string,
-    setActivePanel: PropTypes.func,
-  },
-
-  handleRename(newName) {
-    this.props.actions.renamePanel(this.props.panel.id, newName);
-  },
-
-  handleDeletePanel(e) {
-    e.stopPropagation();
-    this.props.actions.deletePanel(this.props.panel.id);
-  },
-
-  openRenamePanelModal(e) {
-    e.stopPropagation();
-    $(`#renamePanelModal-${this.props.panel.id}`).modal('show'); // eslint-disable-line no-undef
-  },
-
-  handleSetActivePanel() {
-    this.props.setActivePanel(this.props.panel.id);
-  },
-
-  render() {
-    const {queryConfigs, timeRange, panel} = this.props;
-
-    return (
-      <div className="raw-editor__panel">
-        <RenamePanelModal panel={panel} onConfirm={this.handleRename} />
-        <div className="raw-editor__header" onClick={this.handleSelectExplorer}>
-          <div className="raw-editor__header-name">
-            {panel.name || "Panel"}
-          </div>
-          <div className="raw-editor__header-actions">
-            <div title="Rename" className="raw-editor__header-rename" onClick={this.openRenamePanelModal}><span className="icon pencil"></span></div>
-            <div title="Delete" className="raw-editor__header-delete" onClick={this.handleDeletePanel}><span className="icon trash"></span></div>
-          </div>
-        </div>
-        {queryConfigs.map((q) => {
-          return <RawQueryEditor onFocus={this.handleSetActivePanel} shouldFocus={this.props.activeQueryID === q.id} key={q.id} query={q} defaultValue={q.rawText || selectStatement(timeRange, q) || ''} updateRawQuery={this.props.actions.updateRawQuery} />;
-        })}
-      </div>
-    );
-  },
-});
-
-const RawQueryEditor = React.createClass({
-  propTypes: {
-    query: PropTypes.shape({
-      rawText: PropTypes.string,
-      id: PropTypes.string.isRequired,
-    }).isRequired,
-    updateRawQuery: PropTypes.func.isRequired,
-    defaultValue: PropTypes.string.isRequired,
-    shouldFocus: PropTypes.bool.isRequired,
-    onFocus: PropTypes.func.isRequired,
-  },
-
-  componentDidMount() {
-    if (this.props.shouldFocus) {
-      this.editor.scrollIntoView();
-      this.editor.focus();
-    }
-  },
-
-  handleKeyDown(e) {
-    e.stopPropagation();
-    if (e.keyCode !== ENTER) {
-      return;
-    }
-    e.preventDefault();
-    this.editor.blur();
-  },
-
-  updateRawQuery() {
-    const text = this.editor.value;
-    this.props.updateRawQuery(this.props.query.id, text);
-  },
-
-  render() {
-    const {defaultValue, query} = this.props;
-
-    return (
-      <div className={classNames("raw-query-editor-wrapper", {"rq-mode": query.rawText})}>
-        <textarea
-          className="raw-query-editor"
-          onKeyDown={this.handleKeyDown}
-          onBlur={this.updateRawQuery}
-          onFocus={this.props.onFocus}
-          ref={(editor) => this.editor = editor}
-          defaultValue={defaultValue}
-          placeholder="Blank query"
-        />
-        {/* <button title="Delete this query?" className="raw-query-editor-delete">
-          <span className="icon remove"></span>
-          </button> */}
-      </div>
-    );
-  },
-});
-
-export default RawQueryGroup;
diff --git a/ui/src/chronograf/components/RawQueryList.js b/ui/src/chronograf/components/RawQueryList.js
deleted file mode 100644
index afcdc22f7..000000000
--- a/ui/src/chronograf/components/RawQueryList.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, {PropTypes} from 'react';
-import {connect} from 'react-redux';
-import RawQueryGroup from './RawQueryGroup';
-
-const {func, string, shape} = PropTypes;
-const RawQueryList = React.createClass({
-  propTypes: {
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    panels: shape({}).isRequired,
-    queryConfigs: shape({}).isRequired,
-    actions: shape({
-      updateRawQuery: func.isRequired,
-      renamePanel: func.isRequired,
-    }).isRequired,
-    activeQueryID: PropTypes.string,
-    setActivePanel: PropTypes.func,
-  },
-
-  render() {
-    const {panels, timeRange, queryConfigs, actions, setActivePanel, activeQueryID} = this.props;
-
-    return (
-      <div>
-        <div className="alert alert-rawquery">
-          <span className="icon alert-triangle"></span>
-          Editing a query turns it into a <strong>Raw Query</strong> which is no longer editable from <strong>Explorer</strong> mode. This action cannot be undone.
-        </div>
-        {Object.keys(panels).map((panelID) => {
-          const panel = panels[panelID];
-          const queries = panel.queryIds.map((configId) => queryConfigs[configId]);
-          return (
-            <RawQueryGroup setActivePanel={setActivePanel} activeQueryID={activeQueryID} key={panelID} panel={panel} queryConfigs={queries} timeRange={timeRange} actions={actions} />
-          );
-        })}
-      </div>
-    );
-  },
-});
-
-function mapStateToProps(state) {
-  return {
-    timeRange: state.timeRange,
-    panels: state.panels,
-    queryConfigs: state.queryConfigs,
-  };
-}
-
-export default connect(mapStateToProps)(RawQueryList);