[E2E] Embedding helpers improvements (#32701)

* Move util functions inside the `visitEmbeddedPage` helper

* Clean up `cy.exec` comand

* Tighten the scope of `cy.exec`

* Use query string to set filters

* Construct url hash from page style and hidden filters

* Improve JSDoc

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

 import { METABASE_SECRET_KEY } from "e2e/support/cypress_data";
 
-const jwtSignLocation = "e2e/support/external/e2e-jwt-sign.js";
+/**
+ * @typedef {object} QuestionResource
+ * @property {number} question - ID of a question we are embedding
+ *
+ * @typedef {object} DashboardResource
+ * @property {number} dashboard - ID of a dashboard we are embedding
+ *
+ * @typedef {object} EmbedPayload
+ * @property {(QuestionResource|DashboardResource)} resource
+ * {@link QuestionResource} or {@link DashboardResource}
+ * @property {object} params
+ *
+ * @typedef {object} HiddenFilters
+ * @property {string} hide_parameters
+ *
+ * @typedef {object} PageStyle
+ * @property {boolean} bordered
+ * @property {boolean} titled
+ * @property {boolean} hide_download_button - EE/PRO only feature to disable downloads
+ */
 
 /**
- * Programatically generate token and visit the embedded page for question or dashboard
+ * Programmatically generate token and visit the embedded page for a question or a dashboard
  *
- * @param {object} payload
- * @param {{setFilters: string, hideFilters:string}}
+ * @param {EmbedPayload} payload - The {@link EmbedPayload} we pass to this function
+ * @param {{setFilters: object, pageStyle: PageStyle, hideFilters: string[]}} options
  *
  * @example
  * visitEmbeddedPage(payload, {
- *   // We divide filter values with an ampersand
- *   setFilters: "id=92&source=Organic",
- *   // We divide multiple hidden filters with coma.
- *   // Make sure there are no spaces in between!
- *   hideFilters: "created_at,state"
+ *   setFilters: {id: 92, source: "Organic"},
+ *   pageStyle: {titled: true},
+ *   hideFilters: ["id", "source"]
  * });
  */
 export function visitEmbeddedPage(
   payload,
-  { setFilters = "", hideFilters = "" } = {},
+  { setFilters = {}, hideFilters = [], pageStyle = {} } = {},
 ) {
+  const jwtSignLocation = "e2e/support/external/e2e-jwt-sign.js";
+
   const payloadWithExpiration = {
     ...payload,
     exp: Math.round(Date.now() / 1000) + 10 * 60, // 10 minute expiration
   };
 
   const stringifiedPayload = JSON.stringify(payloadWithExpiration);
+  const signTransaction = `node  ${jwtSignLocation} '${stringifiedPayload}' ${METABASE_SECRET_KEY}`;
 
-  const embeddableObject = getEmbeddableObject(payload);
-
-  const urlRoot = `/embed/${embeddableObject}/`;
-  const filters = getFilterValues(setFilters);
-  const hiddenFilters = getHiddenFilters(hideFilters);
-  // Style is hard coded for now because we're not concerned with testing its properties
-  const style = "#bordered=true&titled=true";
-
-  cy.exec(
-    `node  ${jwtSignLocation} '${stringifiedPayload}' ${METABASE_SECRET_KEY}`,
-  ).then(({ stdout: token }) => {
-    const embeddableUrl = urlRoot + token + filters + style + hiddenFilters;
+  cy.exec(signTransaction).then(({ stdout: tokenizedQuery }) => {
+    const embeddableObject = getEmbeddableObject(payload);
+    const hiddenFilters = getHiddenFilters(hideFilters);
+    const urlRoot = `/embed/${embeddableObject}/${tokenizedQuery}`;
+    const urlHash = getHash(pageStyle, hiddenFilters);
 
     // Always visit embedded page logged out
     cy.signOut();
 
-    cy.visit(embeddableUrl);
+    cy.visit({
+      url: urlRoot,
+      qs: setFilters,
+      onBeforeLoad: window => {
+        if (urlHash) {
+          window.location.hash = urlHash;
+        }
+      },
+    });
   });
-}
 
-/**
- * Construct the string that sets value to certain filters
- *
- * @param {string} filters
- * @returns string
- */
-function getFilterValues(filters) {
-  return filters && "?" + filters;
-}
+  /**
+   * Construct a hidden filters object from the list of filters we want to hide
+   *
+   * @param {string[]} filters
+   * @returns {HiddenFilters}
+   */
+  function getHiddenFilters(filters) {
+    const params = filters.join(",");
+    return filters.length > 0 ? { hide_parameters: params } : {};
+  }
 
-/**
- * Construct the string that hides certain filters
- *
- * @param {string} filters
- * @returns string
- */
-function getHiddenFilters(filters) {
-  return filters && "&hide_parameters=" + filters;
-}
+  /**
+   * Get the URL hash from the page style and/or hidden filters parameters
+   *
+   * @param {PageStyle} pageStyle
+   * @param {HiddenFilters} hiddenFilters
+   *
+   * @returns string
+   */
+  function getHash(pageStyle, hiddenFilters) {
+    return new URLSearchParams({ ...pageStyle, ...hiddenFilters }).toString();
+  }
 
-/**
- * Extract the embeddable object type from the payload
- *
- * @param {object} payload
- * @returns ("question"|"dashboard")
- */
-function getEmbeddableObject(payload) {
-  return Object.keys(payload.resource)[0];
+  /**
+   * Extract the embeddable object type from the payload
+   *
+   * @param {EmbedPayload} payload - See {@link EmbedPayload}
+   * @returns ("question"|"dashboard")
+   */
+  function getEmbeddableObject(payload) {
+    return Object.keys(payload.resource)[0];
+  }
 }
 
 /**
- * Grab iframe `src` via UI and open it,
+ * Grab an iframe `src` via UI and open it,
  * but make sure user is signed out.
  */
 export function visitIframe() {

e2e/test/scenarios/dashboard-filters/dashboard-filters-auto-apply.cy.spec.js

@@ -726,7 +726,7 @@ const openSlowEmbeddingDashboard = (params = {}) => {
       params: {},
     };
     visitEmbeddedPage(embeddingPayload, {
-      setFilters: new URLSearchParams(params).toString(),
+      setFilters: params,
     });
   });
 

e2e/test/scenarios/dashboard-filters/reproductions/29347-remapped-field-values.cy.spec.js

@@ -130,7 +130,7 @@ describe("issues 29347, 29346", () => {
             params: {},
           },
           {
-            setFilters: `${filterDetails.slug}=${filterValue}`,
+            setFilters: { [filterDetails.slug]: filterValue },
           },
         );
       });

e2e/test/scenarios/embedding/embedding-linked-filters.cy.spec.js

@@ -192,7 +192,7 @@ describe("scenarios > embedding > dashboard > linked filters (metabase#13639, me
         };
 
         visitEmbeddedPage(payload, {
-          setFilters: "state=AK",
+          setFilters: { state: "AK" },
         });
       });
 
@@ -235,8 +235,8 @@ describe("scenarios > embedding > dashboard > linked filters (metabase#13639, me
         };
 
         visitEmbeddedPage(payload, {
-          setFilters: "state=AK",
-          hideFilters: "state",
+          setFilters: { state: "AK" },
+          hideFilters: ["state"],
         });
       });
 
@@ -362,7 +362,7 @@ describe("scenarios > embedding > dashboard > linked filters (metabase#13639, me
         };
 
         cy.log("Make sure we can override the default value");
-        visitEmbeddedPage(payload, { setFilters: "id_filter=4" });
+        visitEmbeddedPage(payload, { setFilters: { id_filter: 4 } });
 
         cy.location("search").should("eq", "?id_filter=4");
 
@@ -384,9 +384,10 @@ describe("scenarios > embedding > dashboard > linked filters (metabase#13639, me
           .and("contain", "Doohickey");
 
         cy.log("Make sure we can set multiple values");
-        visitEmbeddedPage(payload, {
-          setFilters: "id_filter=4&id_filter=29&category=Widget",
-        });
+        cy.window().then(
+          win =>
+            (win.location.search = "?id_filter=4&id_filter=29&category=Widget"),
+        );
 
         filterWidget()
           .should("have.length", 2)
@@ -435,7 +436,7 @@ describe("scenarios > embedding > dashboard > linked filters (metabase#13639, me
         };
 
         visitEmbeddedPage(payload, {
-          hideFilters: "id_filter",
+          hideFilters: ["id_filter"],
         });
       });
 

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

@@ -157,8 +157,8 @@ describe("scenarios > embedding > native questions", () => {
         // It should be possible to both set the filter value and hide it at the same time.
         // That's the synonymous to the locked filter.
         visitEmbeddedPage(payload, {
-          setFilters: "id=92",
-          hideFilters: "id,product_id,state,created_at,total",
+          setFilters: { id: 92 },
+          hideFilters: ["id", "product_id", "state", "created_at", "total"],
         });
 
         cy.findByTestId("table-row").should("have.length", 1);
@@ -186,7 +186,7 @@ describe("scenarios > embedding > native questions", () => {
         };
 
         visitEmbeddedPage(payload, {
-          setFilters: "created_at=Q2-2025&source=Organic&state=OR",
+          setFilters: { created_at: "Q2-2025", source: "Organic", state: "OR" },
         });
 
         filterWidget()
@@ -204,7 +204,7 @@ describe("scenarios > embedding > native questions", () => {
 
         // OTOH, we should also be able to override the default filter value by eplixitly setting it
         visitEmbeddedPage(payload, {
-          setFilters: "total=80",
+          setFilters: { total: 80 },
         });
 
         cy.get("legend").contains("Total").parent("fieldset").contains("80");