[sqllab] some frontend tests (#1400)

* [sqllab] some frontend tests

* linting

* Addressing comments

* Addressing unaddressed comments

* Touchups

caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -18,16 +18,29 @@ import 'brace/mode/sql';
 import 'brace/theme/github';
 import 'brace/ext/language_tools';
 
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import * as Actions from '../actions';
-
 import shortid from 'shortid';
 import SouthPane from './SouthPane';
 import Timer from './Timer';
 
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 
+const propTypes = {
+  actions: React.PropTypes.object.isRequired,
+  database: React.PropTypes.object,
+  latestQuery: React.PropTypes.object,
+  networkOn: React.PropTypes.bool,
+  tables: React.PropTypes.array.isRequired,
+  queries: React.PropTypes.array.isRequired,
+  queryEditor: React.PropTypes.object.isRequired,
+};
+
+const defaultProps = {
+  networkOn: true,
+  database: null,
+  latestQuery: null,
+};
+
+
 class SqlEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -72,15 +85,6 @@ class SqlEditor extends React.Component {
     this.setState({ sql: text });
     this.props.actions.queryEditorSetSql(this.props.queryEditor, text);
   }
-  addWorkspaceQuery() {
-    this.props.actions.addWorkspaceQuery({
-      id: shortid.generate(),
-      sql: this.state.sql,
-      dbId: this.props.queryEditor.dbId,
-      schema: this.props.queryEditor.schema,
-      title: this.props.queryEditor.title,
-    });
-  }
   ctasChange() {}
   visualize() {}
   ctasChanged(event) {
@@ -130,7 +134,9 @@ class SqlEditor extends React.Component {
         {runButtons}
       </ButtonGroup>
     );
-    if (this.props.latestQuery && ['running', 'pending'].includes(this.props.latestQuery.state)) {
+    if (
+        this.props.latestQuery &&
+        ['running', 'pending'].indexOf(this.props.latestQuery.state) > -1) {
       runButtons = (
         <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
           <Button
@@ -202,7 +208,12 @@ class SqlEditor extends React.Component {
       <div className="SqlEditor" style={{ minHeight: this.sqlEditorHeight() }}>
         <Row>
           <Col md={3}>
-            <SqlEditorLeftBar queryEditor={this.props.queryEditor} />
+            <SqlEditorLeftBar
+              queryEditor={this.props.queryEditor}
+              tables={this.props.tables}
+              networkOn={this.props.networkOn}
+              actions={this.props.actions}
+            />
           </Col>
           <Col md={9}>
             <AceEditor
@@ -220,32 +231,17 @@ class SqlEditor extends React.Component {
             />
             {editorBottomBar}
             <br />
-            <SouthPane latestQuery={this.props.latestQuery} sqlEditor={this} />
+            <SouthPane
+              queries={this.props.queries}
+              actions={this.props.actions}
+            />
           </Col>
         </Row>
       </div>
     );
   }
 }
+SqlEditor.defaultProps = defaultProps;
+SqlEditor.propTypes = propTypes;
 
-SqlEditor.propTypes = {
-  actions: React.PropTypes.object,
-  database: React.PropTypes.object,
-  latestQuery: React.PropTypes.object,
-  queryEditor: React.PropTypes.object,
-};
-
-SqlEditor.defaultProps = {
-};
-
-function mapStateToProps() {
-  return {};
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SqlEditor);
+export default SqlEditor;