[explore] convert query and save btns to react (#690)

* start to convert query and save btns to react * more explore.jsx to explore/
apache · Jul 8, 2016 · 8020464 · 8020464
1 parent 8135c24
commit 8020464
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 64 deletions.
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/javascripts/explore.js → ...el/assets/javascripts/explore/explore.jsx b/caravel/assets/javascripts/explore.js → ...el/assets/javascripts/explore/explore.jsx
@@ -5,21 +5,25 @@
 // js
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
-var px = require('./modules/caravel.js');
-var showModal = require('./modules/utils.js').showModal;
+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 './components/QueryAndSaveBtns.jsx';
 
 require('jquery-ui');
 $.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
 require('bootstrap');
 
-require('./caravel-select2.js');
+require('./../caravel-select2.js');
 
-require('../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
+require('../../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
 
 // css
-require('../vendor/pygments.css');
-require('../stylesheets/explore.css');
-require('../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
+require('../../vendor/pygments.css');
+require('../../stylesheets/explore.css');
+require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
 
 var slice;
 
@@ -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 () {
@@ -417,45 +427,51 @@ function initExploreView() {
       $("#save_as_new").prop("checked", true);
       setButtonsState();
     });
-    $('#btn_modal_save').click(function () {
-      var action = $('input[name=rdo_save]:checked').val();
-      if (action === 'saveas') {
-        var slice_name = $('input[name=new_slice_name]').val();
-        if (slice_name === '') {
-          showModal({
-            title: "Error",
-            body: "You must pick a name for the new slice"
-          });
-          return;
-        }
-        document.getElementById("slice_name").value = slice_name;
-      }
-      var add_to_dash = $('input[name=add_to_dash]:checked').val();
-      if (add_to_dash === 'existing' && $('#save_to_dashboard_id').val() === '') {
-        showModal({
-          title: "Error",
-          body: "You must pick an existing dashboard"
-        });
-        return;
-      } else if (add_to_dash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
-        showModal({
-          title: "Error",
-          body: "Please enter a name for the new dashboard"
-        });
-        return;
-      }
-      $('#action').val(action);
-      prepForm();
-      $("#query").submit();
-    });
-    $('#btn_modal_save_goto_dash').click(function () {
-      document.getElementById("goto_dash").value = 'true';
-      $('#btn_modal_save').click();
+
+    $('#btn_modal_save').on('click', () => saveSlice());
+
+    $('#btn_modal_save_goto_dash').click(() => {
+      document.getElementById('goto_dash').value = 'true';
+      saveSlice();
     });
   }
   prepSaveDialog();
 }
 
+function saveSlice() {
+  console.log('saveSlice')
+
+  var action = $('input[name=rdo_save]:checked').val();
+  if (action === 'saveas') {
+    var slice_name = $('input[name=new_slice_name]').val();
+    if (slice_name === '') {
+      showModal({
+        title: "Error",
+        body: "You must pick a name for the new slice"
+      });
+      return;
+    }
+    document.getElementById("slice_name").value = slice_name;
+  }
+  var add_to_dash = $('input[name=add_to_dash]:checked').val();
+  if (add_to_dash === 'existing' && $('#save_to_dashboard_id').val() === '') {
+    showModal({
+      title: "Error",
+      body: "You must pick an existing dashboard"
+    });
+    return;
+  } else if (add_to_dash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
+    showModal({
+      title: "Error",
+      body: "Please enter a name for the new dashboard"
+    });
+    return;
+  }
+  $('#action').val(action);
+  prepForm();
+  $("#query").submit();
+}
+
 $(document).ready(function () {
   initExploreView();
 

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/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 %}