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

@@ -0,0 +1,74 @@
+const $ = window.$ = require('jquery');
+const jQuery = window.jQuery = $; // eslint-disable-line
+require('bootstrap');
+
+import React from 'react';
+import { render } from 'react-dom';
+import * as Actions from './actions';
+
+import LeftPane from './components/LeftPane';
+import TabbedSqlEditors from './components/TabbedSqlEditors';
+import QueryAutoRefresh from './components/QueryAutoRefresh';
+import Alerts from './components/Alerts';
+
+import { bindActionCreators, compose, createStore } from 'redux';
+import { connect, Provider } from 'react-redux';
+
+import { initialState, sqlLabReducer } from './reducers';
+import persistState from 'redux-localstorage';
+
+require('./main.css');
+
+let enhancer = compose(persistState());
+if (process.env.NODE_ENV === 'dev') {
+  enhancer = compose(
+    persistState(), window.devToolsExtension && window.devToolsExtension()
+  );
+}
+let store = createStore(sqlLabReducer, initialState, enhancer);
+
+// jquery hack to highlight the navbar menu
+$('a[href="/caravel/sqllab"]').parent().addClass('active');
+
+const App = function (props) {
+  return (
+    <div className="App SqlLab">
+      <div className="container-fluid">
+        <QueryAutoRefresh />
+        <Alerts alerts={props.alerts} />
+        <div className="row">
+          <div className="col-md-9">
+            <TabbedSqlEditors />
+          </div>
+          <div className="col-md-3">
+            <LeftPane />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+App.propTypes = {
+  alerts: React.PropTypes.array,
+};
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+const ReduxedApp = connect(mapStateToProps, mapDispatchToProps)(App);
+
+render(
+  <Provider store={store}>
+    <ReduxedApp />
+  </Provider>,
+  document.getElementById('app')
+);