feat(embedded): add optional dashboard ui configuration (#19031)

* feat: add optional dashboard ui configuration

* change all flags to boolean

* update README and lint

superset-embedded-sdk/README.md

@@ -40,6 +40,7 @@ embedDashboard({
   supersetDomain: "https://superset.example.com",
   mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
   fetchGuestToken: () => fetchGuestTokenFromBackend(),
+  dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
 });
 ```
 

superset-embedded-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superset-ui/embedded-sdk",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "SDK for embedding resources from Superset into your own application",
   "access": "public",
   "keywords": [

superset-embedded-sdk/src/index.ts

@@ -29,6 +29,12 @@ import { Switchboard } from '@superset-ui/switchboard';
  */
 export type GuestTokenFetchFn = () => Promise<string>;
 
+export type UiConfigType = {
+  hideTitle?: boolean
+  hideTab?: boolean
+  hideChartControls?: boolean
+}
+
 export type EmbedDashboardParams = {
   /** The id provided by the embed configuration UI in Superset */
   id: string
@@ -38,6 +44,8 @@ export type EmbedDashboardParams = {
   mountPoint: HTMLElement
   /** A function to fetch a guest token from the Host App's backend server */
   fetchGuestToken: GuestTokenFetchFn
+  /** The dashboard UI config: hideTitle, hideTab, hideChartControls **/
+  dashboardUiConfig?: UiConfigType
   /** Are we in debug mode? */
   debug?: boolean
 }
@@ -59,6 +67,7 @@ export async function embedDashboard({
   supersetDomain,
   mountPoint,
   fetchGuestToken,
+  dashboardUiConfig,
   debug = false
 }: EmbedDashboardParams): Promise<EmbeddedDashboard> {
   function log(...info: unknown[]) {
@@ -69,9 +78,26 @@ export async function embedDashboard({
 
   log('embedding');
 
+  function calculateConfig() {
+    let configNumber = 0
+    if(dashboardUiConfig) {
+      if(dashboardUiConfig.hideTitle) {
+        configNumber += 1
+      }
+      if(dashboardUiConfig.hideTab) {
+        configNumber += 2
+      }
+      if(dashboardUiConfig.hideChartControls) {
+        configNumber += 8
+      }
+    }
+    return configNumber
+  }
+
   async function mountIframe(): Promise<Switchboard> {
     return new Promise(resolve => {
       const iframe = document.createElement('iframe');
+      const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : ""
 
       // setup the iframe's sandbox configuration
       iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work
@@ -103,7 +129,7 @@ export async function embedDashboard({
         resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug }));
       });
 
-      iframe.src = `${supersetDomain}/dashboard/${id}/embedded`;
+      iframe.src = `${supersetDomain}/dashboard/${id}/embedded${dashboardConfig}`;
       mountPoint.replaceChildren(iframe);
       log('placed the iframe')
     });