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

@@ -0,0 +1,65 @@
+import React from 'react';
+import Link from './Link';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import shortid from 'shortid';
+
+// CSS
+import 'react-select/dist/react-select.css';
+
+class QueryLink extends React.Component {
+  popTab() {
+    const qe = {
+      id: shortid.generate(),
+      title: this.props.query.title,
+      dbId: this.props.query.dbId,
+      autorun: false,
+      sql: this.props.query.sql,
+    };
+    this.props.actions.addQueryEditor(qe);
+  }
+  render() {
+    return (
+      <div>
+        <div className="clearfix">
+          <div className="pull-left">
+            <a
+              href="#"
+              tooltip="Pop this query in a new tab"
+              onClick={this.popTab.bind(this)}
+            >
+              {this.props.query.title}
+            </a>
+          </div>
+          <div className="pull-right">
+            <Link
+              onClick={this.props.actions.removeWorkspaceQuery.bind(this, this.props.query)}
+              tooltip="Remove query from workspace"
+              href="#"
+            >
+              &times;
+            </Link>
+          </div>
+        </div>
+        <hr />
+      </div>
+    );
+  }
+}
+
+QueryLink.propTypes = {
+  query: React.PropTypes.object,
+  actions: React.PropTypes.object,
+};
+
+QueryLink.defaultProps = {
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(null, mapDispatchToProps)(QueryLink);
+