Fix two bugs in the Iodide extension

* Do not create unusable notebooks from Redash staging
* Do not show non-functional button if query has never been saved

.editorconfig

@@ -11,6 +11,6 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.js]
+[*.{js,jsx}]
 indent_style = space
 indent_size = 2

CHANGELOG.rst

@@ -1,6 +1,16 @@
 Changelog
 =========
 
+2019.7.3
+--------
+
+:date: 2019-07-16
+
+* Fix bug where the "Explore in Iodide" button creates unusable notebooks if
+  clicked on Redash staging
+* Fix bug where the "Explore in Iodide" button is shown, but non-functional, for
+  queries that have never been saved
+
 2019.7.2
 --------
 

setup.py

@@ -13,7 +13,7 @@
     long_description=readme,
     long_description_content_type="text/x-rst",
     name="redash-stmo",
-    version="2019.7.2",
+    version="2019.7.3",
     description="Extensions to Redash by Mozilla",
     python_requires="==2.*,>=2.7.0",
     project_urls={"homepage": "https://github.com/mozilla/redash-stmo"},

src/redash_stmo/__init__.py

@@ -3,4 +3,4 @@
 # file, you can obtain one at http://mozilla.org/MPL/2.0/.
 """Extensions to Redash by Mozilla"""
 
-__version__ = "2019.7.2"
+__version__ = "2019.7.3"

src/redash_stmo/integrations/iodide/bundle/IodideButton.jsx

@@ -29,7 +29,7 @@ class IodideButton extends React.Component {
     this.showSpinner();
 
     // Immediately open a window for Iodide. If we open it later, the browser
-    // may consider it to be an unwanted popup. We can close it if we encounter
+    // may consider it to be an unwanted popup. We will close it if we encounter
     // an error.
     //
     // https://stackoverflow.com/a/25050893/4297741
@@ -101,23 +101,29 @@ export default function init(ngModule) {
         this.origRender();
 
         const buttonContainerId = 'explore-in-iodide-container';
+        const queryID = window.location.pathname.match(
+          /\/queries\/(.*?)(\/|$)/,
+        )[1];
+
+        // Don't add the button if it already exists or if the query has never
+        // been saved. The button won't work if the query has never been saved.
+        if (document.getElementById(buttonContainerId) || queryID === 'new') {
+          return;
+        }
+
         const bottomController = document.querySelector('.bottom-controller');
         const queryControlDropdown = bottomController.querySelector(
           'query-control-dropdown',
         );
 
-        if (!document.getElementById(buttonContainerId)) {
-          const iodideButtonContainer = document.createElement('div');
-          iodideButtonContainer.id = buttonContainerId;
-          bottomController.insertBefore(
-            iodideButtonContainer,
-            queryControlDropdown,
-          );
-          const queryID = window.location.href.match(
-            /http.*\/queries\/(.*?)(\/|#|\?|$)/,
-          )[1];
-          render(<IodideButton queryID={queryID} />, iodideButtonContainer);
-        }
+        const iodideButtonContainer = document.createElement('div');
+        iodideButtonContainer.id = buttonContainerId;
+        bottomController.insertBefore(
+          iodideButtonContainer,
+          queryControlDropdown,
+        );
+
+        render(<IodideButton queryID={queryID} />, iodideButtonContainer);
       };
 
       return $delegate;

src/redash_stmo/integrations/iodide/extension.py

@@ -7,6 +7,7 @@
 
 from flask import render_template_string
 from redash.models import Query
+from redash.handlers.authentication import base_href
 from redash.handlers.base import BaseResource, get_object_or_404
 from redash.permissions import require_permission
 
@@ -31,6 +32,7 @@ def post(self, query_id):
         with open(self.TEMPLATE_PATH, "r") as template:
             source = template.read()
             context = {
+                "redash_url": base_href(),
                 "query_id": query_id,
                 "title": query.name,
                 "api_key": settings.IODIDE_DEFAULT_API_KEY,

src/redash_stmo/integrations/iodide/iodide-notebook.iomd.j2

@@ -12,7 +12,7 @@ information about Iodide, see the help menu.
 
 %% fetch
 // Download the data from Redash and save it to a variable called "dataset"
-json: dataset = https://sql.telemetry.mozilla.org/api/queries/{{ query_id }}/results.json?api_key={{ api_key }}
+json: dataset = {{ redash_url }}api/queries/{{ query_id }}/results.json?api_key={{ api_key }}
 js: https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly-basic.min.js
 
 %% js