SQL Lab - A multi-tab SQL editor (#514)

* Carapal react mockup

This is really just a mock up written in React to try different
components. It could become scaffolding to build a prototype, or not.

* Merging in Alanna's theme tweaks for SQL lab

* Tweak the display of the alert message in navbar

* Sketching the middleware refresh for Queries

* Adjustments

* Implement timer sync.

* CTAS

* Refactor the queries to be stored as a dict. (#994)

* Download csv endpoint. (#992)

* CSV download engdpoint.

* Use lower case booleans.

* Replcate loop with the object lookup by key.

* First changes for the sync

* Address comments

* Fix query deletions. Update only the queries from the store.

* Sync queries using tmp_id.

* simplify

* Fix the tests in the carapal. (#1023)

* Sync queries using tmp_id.

* Fix the unit tests

* Bux fixes. Pass 2.

* Tweakin' & linting

* Adding alpha label to the SQL LAb navbar entry

* Fixing the python unit tests

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import Select from 'react-select';
+import { Button } from 'react-bootstrap';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import QueryTable from './QueryTable';
+
+class QuerySearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryText: '',
+    };
+  }
+  changeQueryText(value) {
+    this.setState({ queryText: value });
+  }
+  render() {
+    const queries = this.props.queries;
+    return (
+      <div>
+        <div className="pane-cell pane-west m-t-5">
+          <div className="panel panel-default Workspace">
+            <div className="panel-heading">
+              <h6>
+                <i className="fa fa-search" /> Search Queries
+              </h6>
+            </div>
+            <div className="panel-body">
+              <input type="text" className="form-control" placeholder="Query Text" />
+              <Select
+                name="select-user"
+                placeholder="[User]"
+                options={['maxime_beauchemin', 'someone else']}
+                value={'maxime_beauchemin'}
+                className="m-t-10"
+                autosize={false}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="pane-cell">
+          <QueryTable
+            columns={['state', 'started', 'duration', 'rows', 'sql', 'actions']}
+            queries={queries}
+          />
+        </div>
+        <Button>Search!</Button>
+      </div>
+    );
+  }
+}
+QuerySearch.propTypes = {
+  queries: React.PropTypes.array,
+};
+QuerySearch.defaultProps = {
+  queries: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    queries: state.queries,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QuerySearch);