specify a resourceType for dashboard embeds (#11386)

* specify a resourceType for dashboard embeds

* e2e test for dashboard embed snippet

* add delay

* increase delay

* remove delay, set secret key via api

frontend/src/metabase/components/TextEditor.jsx

@@ -40,6 +40,10 @@ export default class TextEditor extends Component {
   _update() {
     const element = ReactDOM.findDOMNode(this);
 
+    if (this._editor == null) {
+      return; // _editor is undefined when ace isn't loaded in tests
+    }
+
     this._updateValue();
 
     this._editor.getSession().setMode(this.props.mode);
@@ -74,6 +78,11 @@ export default class TextEditor extends Component {
   };
 
   componentDidMount() {
+    if (typeof ace === "undefined" || !ace || !ace.edit) {
+      // fail gracefully-ish if ace isn't available, e.x. in integration tests
+      return;
+    }
+
     const element = ReactDOM.findDOMNode(this);
     this._editor = ace.edit(element);
 

frontend/src/metabase/dashboard/containers/DashboardEmbedWidget.jsx

@@ -71,6 +71,7 @@ export default class DashboardEmbedWidget extends Component {
           className={className}
           resource={dashboard}
           resourceParameters={dashboard && dashboard.parameters}
+          resourceType="dashboard"
           onCreatePublicLink={() => createPublicLink(dashboard)}
           onDisablePublicLink={() => deletePublicLink(dashboard)}
           onUpdateEnableEmbedding={enableEmbedding =>

frontend/test/metabase/dashboard/dashboard.e2e.spec.js

@@ -29,6 +29,8 @@ import Question from "metabase/entities/questions";
 import Search from "metabase/entities/search";
 import Revisions from "metabase/entities/revisions";
 
+import { updateSetting } from "metabase/admin/settings/settings";
+
 import EditBar from "metabase/components/EditBar";
 
 import { delay } from "metabase/lib/promise";
@@ -358,5 +360,58 @@ describe("Dashboard", () => {
       await store.waitForActions([FETCH_DASHBOARD]);
       expect(app.find(".DashCard")).toHaveLength(1);
     });
+
+    it("displays the correct embed snippets", async () => {
+      checkDashboardWasCreated();
+
+      const store = await createTestStore();
+      await store.dispatch(
+        updateSetting({ key: "enable-embedding", value: true }),
+      );
+
+      await store.dispatch(
+        updateSetting({
+          key: "embedding-secret-key",
+          value:
+            "2547733eb6a2fc0ff405f43ca94433b90b8f49aa2c667c39d3c7ce8750fcf1af",
+        }),
+      );
+
+      const dashboardUrl = Urls.dashboard(dashboardId);
+      store.pushPath(dashboardUrl);
+      const app = mount(store.getAppContainer());
+      await store.waitForActions([FETCH_DASHBOARD]);
+      app.findByIcon("share").click();
+      app.findByText("Embed this dashboard in an application").click();
+      app.findByText("Code").click();
+      const [js, html] = app.find("TextEditor").map(n => n.prop("value"));
+      expect(js)
+        .toBe(`// you will need to install via 'npm install jsonwebtoken' or in your package.json
+
+var jwt = require("jsonwebtoken");
+
+var METABASE_SITE_URL = "http://localhost:4000";
+var METABASE_SECRET_KEY = "2547733eb6a2fc0ff405f43ca94433b90b8f49aa2c667c39d3c7ce8750fcf1af";
+
+var payload = {
+  resource: { dashboard: ${dashboardId} },
+  params: {},
+  exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
+};
+var token = jwt.sign(payload, METABASE_SECRET_KEY);
+
+var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";`);
+      expect(html).toBe(`<iframe
+    src="{{iframeUrl}}"
+    frameborder="0"
+    width="800"
+    height="600"
+    allowtransparency
+></iframe>`);
+
+      await store.dispatch(
+        updateSetting({ key: "enable-embedding", value: false }),
+      );
+    });
   });
 });