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

* feat: add optional dashboard ui configuration

* change all flags to boolean

* update README and lint
This commit is contained in:
Lily Kuang 2022-03-11 12:37:47 -08:00 committed by GitHub
parent 7524e1e3c8
commit 124cb0dc66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 2 deletions

View File

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

View File

@ -1,6 +1,6 @@
{ {
"name": "@superset-ui/embedded-sdk", "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", "description": "SDK for embedding resources from Superset into your own application",
"access": "public", "access": "public",
"keywords": [ "keywords": [

View File

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