Replace query once query response returned (#2415)

* Replace query once query response returned

* Fix bug with refresh druid datasources

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

@@ -211,6 +211,8 @@ class ChartContainer extends React.PureComponent {
     if (this.props.standalone) {
       return this.renderChart();
     }
+    const queryResponse = this.props.queryResponse;
+    const query = queryResponse && queryResponse.query ? queryResponse.query : null;
     return (
       <div className="chart-container">
         <Panel
@@ -270,6 +272,7 @@ class ChartContainer extends React.PureComponent {
                 <ExploreActionButtons
                   slice={this.state.mockSlice}
                   canDownload={this.props.can_download}
+                  query={query}
                   queryEndpoint={getExploreUrl(this.props.latestQueryFormData, 'query')}
                 />
               </div>

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

@@ -6,6 +6,7 @@ import { github } from 'react-syntax-highlighter/dist/styles';
 const $ = window.$ = require('jquery');
 
 const propTypes = {
+  query: PropTypes.string,
   queryEndpoint: PropTypes.string.isRequired,
 };
 
@@ -25,22 +26,29 @@ export default class DisplayQueryButton extends React.PureComponent {
           src="/static/assets/images/loading.gif"
         />),
     });
-    $.ajax({
-      type: 'GET',
-      url: this.props.queryEndpoint,
-      success: (data) => {
-        const modalBody = data.language ?
-          <SyntaxHighlighter language={data.language} style={github}>
-            {data.query}
-          </SyntaxHighlighter>
-          :
-          <pre>{data.query}</pre>;
-        this.setState({ modalBody });
-      },
-      error(data) {
-        this.setState({ modalBody: (<pre>{data.error}</pre>) });
-      },
-    });
+    if (this.props.query) {
+      const modalBody = (
+        <pre>{this.props.query}</pre>
+      );
+      this.setState({ modalBody });
+    } else {
+      $.ajax({
+        type: 'GET',
+        url: this.props.queryEndpoint,
+        success: (data) => {
+          const modalBody = data.language ?
+            <SyntaxHighlighter language={data.language} style={github}>
+              {data.query}
+            </SyntaxHighlighter>
+            :
+            <pre>{data.query}</pre>;
+          this.setState({ modalBody });
+        },
+        error(data) {
+          this.setState({ modalBody: (<pre>{data.error}</pre>) });
+        },
+      });
+    }
   }
   render() {
     return (

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

@@ -8,9 +8,10 @@ const propTypes = {
   canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
   slice: PropTypes.object,
   queryEndpoint: PropTypes.string,
+  query: PropTypes.string,
 };
 
-export default function ExploreActionButtons({ canDownload, slice, queryEndpoint }) {
+export default function ExploreActionButtons({ canDownload, slice, query, queryEndpoint }) {
   const exportToCSVClasses = cx('btn btn-default btn-sm', {
     'disabled disabledButton': !canDownload,
   });
@@ -40,6 +41,7 @@ export default function ExploreActionButtons({ canDownload, slice, queryEndpoint
         </a>
 
         <DisplayQueryButton
+          query={query}
           queryEndpoint={queryEndpoint}
         />
       </div>