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/ResultSet.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Alert, Button, ButtonGroup } from 'react-bootstrap';
+import { Table } from 'reactable';
+
+import VisualizeModal from './VisualizeModal';
+
+
+class ResultSet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: '',
+      showModal: false,
+    };
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.state.searchText !== nextState.searchText ||
+      this.state.showModal !== nextState.showModal
+    );
+  }
+  changeSearch(event) {
+    this.setState({ searchText: event.target.value });
+  }
+  showModal() {
+    this.setState({ showModal: true });
+  }
+  hideModal() {
+    this.setState({ showModal: false });
+  }
+  render() {
+    const results = this.props.query.results;
+    let controls = <div className="noControls" />;
+    if (this.props.showControls) {
+      controls = (
+        <div className="ResultSetControls">
+          <div className="clearfix">
+            <div className="pull-left">
+              <ButtonGroup>
+                <Button
+                  bsSize="small"
+                  onClick={this.showModal.bind(this)}
+                >
+                  <i className="fa fa-line-chart m-l-1" /> Visualize
+                </Button>
+                <Button bsSize="small">
+                  <i className="fa fa-file-text-o" /> .CSV
+                </Button>
+              </ButtonGroup>
+            </div>
+            <div className="pull-right">
+              <input
+                type="text"
+                onChange={this.changeSearch.bind(this)}
+                className="form-control input-sm"
+                placeholder="Search Results"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+    if (results && results.data.length > 0) {
+      return (
+        <div>
+          <VisualizeModal
+            show={this.state.showModal}
+            query={this.props.query}
+            onHide={this.hideModal.bind(this)}
+          />
+          {controls}
+          <div className="ResultSet">
+            <Table
+              data={results.data}
+              columns={results.columns}
+              sortable
+              className="table table-condensed table-bordered"
+              filterBy={this.state.searchText}
+              filterable={results.columns}
+              hideFilterInput
+            />
+          </div>
+        </div>
+      );
+    }
+    return (<Alert bsStyle="warning">The query returned no data</Alert>);
+  }
+}
+ResultSet.propTypes = {
+  query: React.PropTypes.object,
+  showControls: React.PropTypes.boolean,
+  search: React.PropTypes.boolean,
+  searchText: React.PropTypes.string,
+};
+ResultSet.defaultProps = {
+  showControls: true,
+  search: true,
+  searchText: '',
+};
+
+export default ResultSet;