From 89d49e55bbf6dfa045fb11822ea5760ab28a1362 Mon Sep 17 00:00:00 2001
From: George Voicu <george@vitaminsoftware.com>
Date: Fri, 1 Mar 2024 01:27:13 +0100
Subject: [PATCH] feat(embedded-sdk): Add 'urlParams' option to pass query
 parameters to embedded dashboard (#24408)

---
 superset-embedded-sdk/README.md         |  7 ++++++-
 superset-embedded-sdk/package-lock.json |  4 ++--
 superset-embedded-sdk/package.json      |  2 +-
 superset-embedded-sdk/src/index.ts      | 18 +++++++++++-------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md
index 94c759a528..06b5b63b07 100644
--- a/superset-embedded-sdk/README.md
+++ b/superset-embedded-sdk/README.md
@@ -40,10 +40,15 @@ embedDashboard({
   supersetDomain: "https://superset.example.com",
   mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
-  dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
+  dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional), urlParams (optional)
       hideTitle: true,
       filters: {
           expanded: true,
+      },
+      urlParams: {
+          foo: 'value1',
+          bar: 'value2',
+          // ...
       }
   },
 });
diff --git a/superset-embedded-sdk/package-lock.json b/superset-embedded-sdk/package-lock.json
index 6c0052ac3c..a1bd80d041 100644
--- a/superset-embedded-sdk/package-lock.json
+++ b/superset-embedded-sdk/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@superset-ui/embedded-sdk",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@superset-ui/embedded-sdk",
-      "version": "0.1.0-alpha.10",
+      "version": "0.1.0-alpha.11",
       "license": "Apache-2.0",
       "dependencies": {
         "@superset-ui/switchboard": "^0.18.26-0",
diff --git a/superset-embedded-sdk/package.json b/superset-embedded-sdk/package.json
index 55ed198598..7e8fca1f48 100644
--- a/superset-embedded-sdk/package.json
+++ b/superset-embedded-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@superset-ui/embedded-sdk",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "description": "SDK for embedding resources from Superset into your own application",
   "access": "public",
   "keywords": [
diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts
index a9ff0c485d..4cbcb74ae7 100644
--- a/superset-embedded-sdk/src/index.ts
+++ b/superset-embedded-sdk/src/index.ts
@@ -42,6 +42,9 @@ export type UiConfigType = {
     visible?: boolean
     expanded?: boolean
   }
+  urlParams?: {
+    [key: string]: any
+  }
 }
 
 export type EmbedDashboardParams = {
@@ -112,14 +115,15 @@ export async function embedDashboard({
   async function mountIframe(): Promise<Switchboard> {
     return new Promise(resolve => {
       const iframe = document.createElement('iframe');
-      const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : ""
+      const dashboardConfigUrlParams = dashboardUiConfig ? {uiConfig: `${calculateConfig()}`} : undefined;
       const filterConfig = dashboardUiConfig?.filters || {}
       const filterConfigKeys = Object.keys(filterConfig)
-      const filterConfigUrlParams = filterConfigKeys.length > 0
-        ? "&"
-        + filterConfigKeys
-          .map(key => DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key] + '=' + filterConfig[key]).join('&')
-        : ""
+      const filterConfigUrlParams = Object.fromEntries(filterConfigKeys.map(
+        key => [DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key], filterConfig[key]]))
+
+      // Allow url query parameters from dashboardUiConfig.urlParams to override the ones from filterConfig
+      const urlParams = {...dashboardConfigUrlParams, ...filterConfigUrlParams, ...dashboardUiConfig?.urlParams}
+      const urlParamsString = Object.keys(urlParams).length ? '?' + new URLSearchParams(urlParams).toString() : ''
 
       // set up the iframe's sandbox configuration
       iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work
@@ -153,7 +157,7 @@ export async function embedDashboard({
         resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug }));
       });
 
-      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`;
+      iframe.src = `${supersetDomain}/embedded/${id}${urlParamsString}`;
       //@ts-ignore
       mountPoint.replaceChildren(iframe);
       log('placed the iframe')