Pass query instead of slice to Action buttons to prevent lagging query (#1948)

* Pass query instead of slice to Action buttons to prevent lagging query

* Delete beforeOpen and put DisplayQueryButton in pure component

superset/assets/javascripts/explore/components/DisplayQueryButton.jsx

@@ -2,36 +2,24 @@ import React, { PropTypes } from 'react';
 import ModalTrigger from './../../components/ModalTrigger';
 
 const propTypes = {
-  slice: PropTypes.object.isRequired,
+  query: PropTypes.string,
 };
 
-export default class DisplayQueryButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      viewSqlQuery: '',
-    };
-    this.beforeOpen = this.beforeOpen.bind(this);
-  }
+const defaultProps = {
+  query: '',
+};
 
-  beforeOpen() {
-    this.setState({
-      viewSqlQuery: this.props.slice.viewSqlQuery,
-    });
-  }
-
-  render() {
-    const modalBody = (<pre>{this.state.viewSqlQuery}</pre>);
-    return (
-      <ModalTrigger
-        isButton
-        triggerNode={<span>Query</span>}
-        modalTitle="Query"
-        modalBody={modalBody}
-        beforeOpen={this.beforeOpen}
-      />
-    );
-  }
+export default function DisplayQueryButton({ query }) {
+  const modalBody = (<pre>{query}</pre>);
+  return (
+    <ModalTrigger
+      isButton
+      triggerNode={<span>Query</span>}
+      modalTitle="Query"
+      modalBody={modalBody}
+    />
+  );
 }
 
 DisplayQueryButton.propTypes = propTypes;
+DisplayQueryButton.defaultProps = defaultProps;

superset/assets/javascripts/explore/components/ExploreActionButtons.jsx

@@ -7,9 +7,10 @@ import DisplayQueryButton from './DisplayQueryButton';
 const propTypes = {
   canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
   slice: PropTypes.object.isRequired,
+  query: PropTypes.string,
 };
 
-export default function ExploreActionButtons({ canDownload, slice }) {
+export default function ExploreActionButtons({ canDownload, slice, query }) {
   const exportToCSVClasses = cx('btn btn-default btn-sm', {
     'disabled disabledButton': !canDownload,
   });
@@ -37,7 +38,7 @@ export default function ExploreActionButtons({ canDownload, slice }) {
         <i className="fa fa-file-text-o"></i> .csv
       </a>
 
-      <DisplayQueryButton slice={slice} />
+      <DisplayQueryButton query={query} />
     </div>
   );
 }

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -254,6 +254,7 @@ class ChartContainer extends React.Component {
                 <ExploreActionButtons
                   slice={this.state.mockSlice}
                   canDownload={this.props.can_download}
+                  query={this.props.query}
                 />
               </div>
             </div>