start to convert query and save btns to react

apache · Jul 7, 2016 · 51805b1 · 51805b1
1 parent 8135c24
commit 51805b1
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 23 deletions.
diff --git a/caravel/assets/javascripts/explore.js → caravel/assets/javascripts/explore.jsx b/caravel/assets/javascripts/explore.js → caravel/assets/javascripts/explore.jsx
@@ -8,6 +8,10 @@ var jQuery = window.jQuery = $;
 var px = require('./modules/caravel.js');
 var showModal = require('./modules/utils.js').showModal;
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+import QueryAndSaveBtns from './explore/components/QueryAndSaveBtns.jsx';
+
 require('jquery-ui');
 $.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
 require('bootstrap');
@@ -66,6 +70,7 @@ function query(force, pushState) {
   }
   $('#is_cached').hide();
   prepForm();
+
   if (pushState !== false) {
     // update the url after prepForm() fix the field ids
     history.pushState({}, document.title, slice.querystring());
@@ -333,9 +338,14 @@ function initExploreView() {
     add_filter(undefined, "having");
   });
 
-  $(".query").click(function () {
-    query(true);
-  });
+  const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
+  ReactDOM.render(
+    <QueryAndSaveBtns
+      canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
+      onQuery={() => query(true)}
+    />,
+    queryAndSaveBtnsEl
+  );
 
   function create_choices(term, data) {
     var filtered = $(data).filter(function () {

diff --git a/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx b/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const propTypes = {
+  canAdd: PropTypes.string.isRequired,
+  onQuery: PropTypes.func.isRequired,
+};
+
+export default class QueryAndSaveBtns extends React.Component {
+  render() {
+    const saveClasses = classnames('btn btn-default', {
+      'disabled disabledButton': this.props.canAdd !== 'True',
+    });
+
+    return (
+      <div className="btn-group query-and-save">
+        <button type="button" className="btn btn-primary" onClick={this.props.onQuery}>
+          <i className="fa fa-bolt"></i>Query
+        </button>
+        <button type="button"
+                className={saveClasses}
+                onClick={this.props.onSave}
+                data-target="#save_modal"
+                data-toggle="modal"
+        >
+          <i className="fa fa-plus-circle"></i>Save as
+        </button>
+      </div>
+    );
+  }
+}
+
+QueryAndSaveBtns.propTypes = propTypes;
diff --git a/caravel/assets/package.json b/caravel/assets/package.json
@@ -46,6 +46,7 @@
     "brace": "^0.7.0",
     "brfs": "^1.4.3",
     "cal-heatmap": "3.5.4",
+    "classnames": "^2.2.5",
     "css-loader": "^0.23.1",
     "d3": "^3.5.14",
     "d3-cloud": "^1.2.1",
@@ -66,16 +67,15 @@
     "mapbox-gl": "^0.20.0",
     "mustache": "^2.2.1",
     "nvd3": "1.8.3",
-    "react": "^0.14.7",
+    "react": "^15.2.0",
     "react-bootstrap": "^0.28.3",
-    "react-dom": "^0.14.7",
+    "react-dom": "^0.14.8",
     "react-grid-layout": "^0.12.3",
     "react-map-gl": "^1.0.0-beta-10",
     "react-resizable": "^1.3.3",
     "select2": "3.5",
     "select2-bootstrap-css": "^1.4.6",
     "style-loader": "^0.13.0",
-    "supercluster": "Pending PR at https://github.com/mapbox/supercluster/pull/12",
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "topojson": "^1.6.22",
     "transform-loader": "^0.2.3",

diff --git a/caravel/assets/webpack.config.js b/caravel/assets/webpack.config.js
@@ -7,15 +7,15 @@ var config = {
   entry: {
     'css-theme': APP_DIR + '/javascripts/css-theme.js',
     dashboard: APP_DIR + '/javascripts/dashboard.jsx',
-    explore: APP_DIR + '/javascripts/explore.js',
+    explore: APP_DIR + '/javascripts/explore.jsx',
     welcome: APP_DIR + '/javascripts/welcome.js',
     sql: APP_DIR + '/javascripts/sql.js',
     standalone: APP_DIR + '/javascripts/standalone.js',
     common: APP_DIR + '/javascripts/common.js'
   },
   output: {
     path: BUILD_DIR,
-    filename: '[name].entry.js'
+    filename: '[name].entry.jsx'
   },
   resolve: {
     alias: {

diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
@@ -29,20 +29,10 @@
   <div class="datasource container-fluid">
     <form id="query" method="GET" style="display: none;">
       <div class="header">
-          <div class="btn-group query-and-save">
-            <button type="button" class="btn btn-primary query">
-              <i class="fa fa-bolt"></i>{{ _("Query") }}
-            </button>
-            <button
-                type="button"
-                id="btn_save"
-                class="btn btn-default"
-                {{ "disabled" if not can_add }}
-                data-target="#save_modal"
-                data-toggle="modal">
-              <i class="fa fa-plus-circle"></i>{{ _("Save") }}
-            </button>
-          </div>
+          <span id="js-query-and-save-btns"
+               data-can-add="{{ can_add }}"
+          ></span>
+
           <span title="Data Source" data-toggle="tooltip">
             <select id="datasource_id" class="select2">
               {% for ds in datasources %}
@@ -319,5 +309,5 @@ <h4 class="modal-title">{{ _("Save a Slice") }}</h4>
 
 {% block tail_js %}
   {{ super() }}
-  <script src="/static/assets/javascripts/dist/explore.entry.js"></script>
+  <script src="/static/assets/javascripts/dist/explore.entry.jsx"></script>
 {% endblock %}