Fix iframe resizer not working (#47115)

e2e/support/helpers/e2e-embedding-helpers.js

@@ -107,18 +107,24 @@ export function visitEmbeddedPage(
   }
 }
 
+export function getIframeUrl() {
+  modal().findByText("Preview").click();
+
+  return cy.document().then(doc => {
+    const iframe = doc.querySelector("iframe");
+
+    return iframe.src;
+  });
+}
+
 /**
  * Grab an iframe `src` via UI and open it,
  * but make sure user is signed out.
  */
 export function visitIframe() {
-  modal().findByText("Preview").click();
-
-  cy.document().then(doc => {
-    const iframe = doc.querySelector("iframe");
-
+  getIframeUrl().then(iframeUrl => {
     cy.signOut();
-    cy.visit(iframe.src);
+    cy.visit(iframeUrl);
   });
 }
 

e2e/test/scenarios/embedding/embedding-dashboard.cy.spec.js

@@ -13,6 +13,7 @@ import {
   filterWidget,
   getDashboardCard,
   getIframeBody,
+  getIframeUrl,
   getRequiredToggle,
   goToTab,
   modal,
@@ -884,6 +885,60 @@ describeEE("scenarios > embedding > dashboard appearance", () => {
       cy.get("@previewEmbedSpy").should("have.callCount", 1);
     });
   });
+
+  it("should resize iframe to dashboard content size (metabase#47061)", () => {
+    const dashboardDetails = {
+      name: "dashboard name",
+      enable_embedding: true,
+    };
+
+    const questionDetails = {
+      name: "Orders",
+      query: {
+        "source-table": ORDERS_ID,
+      },
+    };
+    createQuestion(questionDetails)
+      .then(({ body: { id: card_id } }) => {
+        createDashboardWithTabs({
+          ...dashboardDetails,
+          dashcards: [
+            {
+              id: -1,
+              card_id,
+              row: 0,
+              col: 0,
+              size_x: 8,
+              size_y: 20,
+            },
+          ],
+        });
+      })
+      .then(dashboard => {
+        visitDashboard(dashboard.id);
+      });
+
+    openStaticEmbeddingModal({
+      activeTab: "parameters",
+      previewMode: "preview",
+      // EE users don't have to accept terms
+      acceptTerms: false,
+    });
+
+    getIframeUrl().then(iframeUrl => {
+      Cypress.config("baseUrl", null);
+      cy.visit(
+        `e2e/test/scenarios/embedding/embedding-dashboard.html?iframeUrl=${iframeUrl}`,
+      );
+    });
+
+    getIframeBody().findByText("Rows 1-21 of first 2000").should("exist");
+
+    cy.get("#iframe").then($iframe => {
+      const [iframe] = $iframe;
+      expect(iframe.clientHeight).to.be.greaterThan(1000);
+    });
+  });
 });
 
 function openFilterOptions(name) {

e2e/test/scenarios/embedding/embedding-dashboard.html

+<script src="http://localhost:4000/app/iframeResizer.js"></script>
+<iframe
+  id="iframe"
+  onload="iFrameResize({checkOrigin: false}, this)"
+  style="width: 100%; border: 0"
+></iframe>
+<script>
+  document.getElementById("iframe").src = new URLSearchParams(
+    location.search,
+  ).get("iframeUrl");
+</script>

frontend/src/metabase/lib/dom.js

@@ -495,23 +495,10 @@ export function initializeIframeResizer(onReady = () => {}) {
       onReady,
     };
 
-    // FIXME: Crimes
-    // This is needed so the FE test framework which runs in node
-    // without the avaliability of require.ensure skips over this part
-    // which is for external purposes only.
-    //
-    // Ideally that should happen in the test config, but it doesn't
-    // seem to want to play nice when messing with require
-    if (typeof require.ensure !== "function") {
-      return false;
-    }
-
     // Make iframe-resizer avaliable to the embed
     // We only care about contentWindow so require that minified file
 
-    require.ensure([], require => {
-      require("iframe-resizer/js/iframeResizer.contentWindow.js");
-    });
+    import("iframe-resizer/js/iframeResizer.contentWindow.js");
   }
 }