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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Alert, Button } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import QueryLink from './QueryLink';
+
+import 'react-select/dist/react-select.css';
+
+const LeftPane = (props) => {
+  let queryElements;
+  if (props.workspaceQueries.length > 0) {
+    queryElements = props.workspaceQueries.map((q) => <QueryLink query={q} />);
+  } else {
+    queryElements = (
+      <Alert bsStyle="info">
+        Use the save button on the SQL editor to save a query
+        into this section for future reference.
+      </Alert>
+    );
+  }
+  return (
+    <div>
+      <div className="panel panel-default LeftPane">
+        <div className="panel-heading">
+          <div className="panel-title">
+            Saved Queries
+          </div>
+        </div>
+        <div className="panel-body">
+          {queryElements}
+        </div>
+      </div>
+      <br /><br />
+      <Button onClick={props.actions.resetState.bind(this)} bsStyle="danger">
+        Reset State
+      </Button>
+    </div>
+  );
+};
+
+LeftPane.propTypes = {
+  workspaceQueries: React.PropTypes.array,
+  actions: React.PropTypes.object,
+};
+
+LeftPane.defaultProps = {
+  workspaceQueries: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    workspaceQueries: state.workspaceQueries,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LeftPane);