From d929bbfe3010f795cdf9ef28b48e9e249cf7ef86 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Thu, 15 Dec 2016 08:53:33 -0800
Subject: [PATCH] [explorev2] making QueryAndSaveBtns disabled while running
 queries (#1841)

As I altered QueryAndSaveBtns to add the `disabled` prop
I also moved it to using react-boostrap
---
 .../explore/components/QueryAndSaveBtns.jsx   | 30 ++++++++++++-------
 .../components/ExploreViewContainer.jsx       |  3 ++
 .../components/QueryAndSaveBtns_spec.jsx      |  7 +++--
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx b/superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
index 08259e9cf4d..1d06d7a8e69 100644
--- a/superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
+++ b/superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
@@ -1,36 +1,46 @@
 import React, { PropTypes } from 'react';
+import { Button, ButtonGroup } from 'react-bootstrap';
 import classnames from 'classnames';
 
 const propTypes = {
   canAdd: PropTypes.string.isRequired,
   onQuery: PropTypes.func.isRequired,
   onSave: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 const defaultProps = {
   onSave: () => {},
+  disabled: false,
 };
 
-export default function QueryAndSaveBtns({ canAdd, onQuery, onSave }) {
-  const saveClasses = classnames('btn btn-default btn-sm', {
+export default function QueryAndSaveBtns({ canAdd, onQuery, onSave, disabled }) {
+  const saveClasses = classnames({
     'disabled disabledButton': canAdd !== 'True',
   });
 
   return (
-    <div className="btn-group query-and-save">
-      <button id="query_button" type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
-        <i className="fa fa-bolt"></i> Query
-      </button>
-      <button
-        type="button"
+    <ButtonGroup className="query-and-save">
+      <Button
+        id="query_button"
+        onClick={onQuery}
+        bsSize="small"
+        disabled={disabled}
+        bsStyle="primary"
+      >
+        <i className="fa fa-bolt" /> Query
+      </Button>
+      <Button
         className={saveClasses}
+        bsSize="small"
         data-target="#save_modal"
         data-toggle="modal"
+        disabled={disabled}
         onClick={onSave}
       >
         <i className="fa fa-plus-circle"></i> Save as
-      </button>
-    </div>
+      </Button>
+    </ButtonGroup>
   );
 }
 
diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
index 3c594de726b..7e4d210e453 100644
--- a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -14,6 +14,7 @@ const propTypes = {
   form_data: React.PropTypes.object.isRequired,
   actions: React.PropTypes.object.isRequired,
   datasource_type: React.PropTypes.string.isRequired,
+  chartStatus: React.PropTypes.string.isRequired,
 };
 
 
@@ -94,6 +95,7 @@ class ExploreViewContainer extends React.Component {
               canAdd="True"
               onQuery={this.onQuery.bind(this, this.props.form_data)}
               onSave={this.toggleModal.bind(this)}
+              disabled={this.props.chartStatus === 'loading'}
             />
             <br /><br />
             <ControlPanelsContainer
@@ -121,6 +123,7 @@ function mapStateToProps(state) {
   return {
     datasource_type: state.datasource_type,
     form_data: state.viz.form_data,
+    chartStatus: state.chartStatus,
   };
 }
 
diff --git a/superset/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx b/superset/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
index a4c0d6cb5ae..7fa90010df3 100644
--- a/superset/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, it } from 'mocha';
+import { Button } from 'react-bootstrap';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
@@ -26,12 +27,12 @@ describe('QueryAndSaveButtons', () => {
     });
 
     it('renders 2 buttons', () => {
-      expect(wrapper.find('button')).to.have.lengthOf(2);
+      expect(wrapper.find(Button)).to.have.lengthOf(2);
     });
 
     it('renders buttons with correct text', () => {
-      expect(wrapper.find('button').contains(' Query')).to.eql(true);
-      expect(wrapper.find('button').contains(' Save as')).to.eql(true);
+      expect(wrapper.find(Button).contains(' Query')).to.eql(true);
+      expect(wrapper.find(Button).contains(' Save as')).to.eql(true);
     });
 
     it('calls onQuery when query button is clicked', () => {