From 6cdd001c7145067e71be40326e15423377454c1d Mon Sep 17 00:00:00 2001
From: Vera Liu <vera.liu@airbnb.com>
Date: Wed, 15 Mar 2017 09:43:48 -0700
Subject: [PATCH] Replace query once query response returned

---
 jitney_events                                 |  0
 .../explorev2/components/ChartContainer.jsx   |  3 ++
 .../components/DisplayQueryButton.jsx         | 40 +++++++++++--------
 .../components/ExploreActionButtons.jsx       |  4 +-
 4 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 jitney_events

diff --git a/jitney_events b/jitney_events
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
index 66879d949d7df..ce6a5b9b1c0fc 100644
--- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/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>
diff --git a/superset/assets/javascripts/explorev2/components/DisplayQueryButton.jsx b/superset/assets/javascripts/explorev2/components/DisplayQueryButton.jsx
index 769c064846bfd..cf39a6c3930cd 100644
--- a/superset/assets/javascripts/explorev2/components/DisplayQueryButton.jsx
+++ b/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 (
diff --git a/superset/assets/javascripts/explorev2/components/ExploreActionButtons.jsx b/superset/assets/javascripts/explorev2/components/ExploreActionButtons.jsx
index 5823c93bf6f5a..bb30c9821b685 100644
--- a/superset/assets/javascripts/explorev2/components/ExploreActionButtons.jsx
+++ b/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>