From 1c16e21401b0506c4789a4082d2b70bab61562ba Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Thu, 3 Mar 2022 16:39:09 -0800 Subject: [PATCH 1/3] feat: add optional dashboard ui configuration --- superset-embedded-sdk/package.json | 2 +- superset-embedded-sdk/src/index.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/superset-embedded-sdk/package.json b/superset-embedded-sdk/package.json index fa426bb9efd4f..848e72a91ff91 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.3", + "version": "0.1.0-alpha.4", "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 a1cd1007c2107..2764a7ac905cf 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -38,6 +38,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: 1; hideTab: 2; hideNav: 4; hideChartControls: 8; **/ + uiConfig?: number /** Are we in debug mode? */ debug?: boolean } @@ -59,6 +61,7 @@ export async function embedDashboard({ supersetDomain, mountPoint, fetchGuestToken, + uiConfig, debug = false }: EmbedDashboardParams): Promise { function log(...info: unknown[]) { @@ -72,6 +75,7 @@ export async function embedDashboard({ async function mountIframe(): Promise { return new Promise(resolve => { const iframe = document.createElement('iframe'); + const dashboardConfig = uiConfig ? `?uiConfig=${uiConfig}` : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work @@ -103,7 +107,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') }); From 2cd6979527e12d20925cc0fd8a6d0557325afdae Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Wed, 9 Mar 2022 14:40:02 -0800 Subject: [PATCH 2/3] change all flags to boolean --- superset-embedded-sdk/src/index.ts | 32 +++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index 2764a7ac905cf..1fb8bd5917d5d 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -29,6 +29,13 @@ import { Switchboard } from '@superset-ui/switchboard'; */ export type GuestTokenFetchFn = () => Promise; +export type UiConfigType = { + hideTitle?: boolean + hideTab?: boolean + hideNav?: boolean + hideChartControls?: boolean +} + export type EmbedDashboardParams = { /** The id provided by the embed configuration UI in Superset */ id: string @@ -38,8 +45,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: 1; hideTab: 2; hideNav: 4; hideChartControls: 8; **/ - uiConfig?: number + /** The dashboard UI config: hideTitle, hideTab, hideNav, hideChartControls **/ + uiConfig?: UiConfigType /** Are we in debug mode? */ debug?: boolean } @@ -72,10 +79,29 @@ export async function embedDashboard({ log('embedding'); + function calculateConfig() { + let configNumber = 0 + if(uiConfig) { + if(uiConfig.hideTitle) { + configNumber += 1 + } + if(uiConfig.hideTab) { + configNumber += 2 + } + if(uiConfig.hideNav) { + configNumber += 4 + } + if(uiConfig.hideChartControls) { + configNumber += 8 + } + } + return configNumber + } + async function mountIframe(): Promise { return new Promise(resolve => { const iframe = document.createElement('iframe'); - const dashboardConfig = uiConfig ? `?uiConfig=${uiConfig}` : "" + const dashboardConfig = uiConfig ? `?uiConfig=${calculateConfig()}` : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work From 81099fec1d704acccf3082cd5eff69a179b20b63 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Wed, 9 Mar 2022 14:57:16 -0800 Subject: [PATCH 3/3] update README and lint --- superset-embedded-sdk/README.md | 1 + superset-embedded-sdk/src/index.ts | 22 +++++++++------------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md index 5ffd1f9735671..93b0aa4c09e63 100644 --- a/superset-embedded-sdk/README.md +++ b/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) }); ``` diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index 1fb8bd5917d5d..ad4fa3c8d59b7 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -32,7 +32,6 @@ export type GuestTokenFetchFn = () => Promise; export type UiConfigType = { hideTitle?: boolean hideTab?: boolean - hideNav?: boolean hideChartControls?: boolean } @@ -45,8 +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, hideNav, hideChartControls **/ - uiConfig?: UiConfigType + /** The dashboard UI config: hideTitle, hideTab, hideChartControls **/ + dashboardUiConfig?: UiConfigType /** Are we in debug mode? */ debug?: boolean } @@ -68,7 +67,7 @@ export async function embedDashboard({ supersetDomain, mountPoint, fetchGuestToken, - uiConfig, + dashboardUiConfig, debug = false }: EmbedDashboardParams): Promise { function log(...info: unknown[]) { @@ -80,18 +79,15 @@ export async function embedDashboard({ log('embedding'); function calculateConfig() { - let configNumber = 0 - if(uiConfig) { - if(uiConfig.hideTitle) { + let configNumber = 0 + if(dashboardUiConfig) { + if(dashboardUiConfig.hideTitle) { configNumber += 1 } - if(uiConfig.hideTab) { + if(dashboardUiConfig.hideTab) { configNumber += 2 } - if(uiConfig.hideNav) { - configNumber += 4 - } - if(uiConfig.hideChartControls) { + if(dashboardUiConfig.hideChartControls) { configNumber += 8 } } @@ -101,7 +97,7 @@ export async function embedDashboard({ async function mountIframe(): Promise { return new Promise(resolve => { const iframe = document.createElement('iframe'); - const dashboardConfig = uiConfig ? `?uiConfig=${calculateConfig()}` : "" + const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work