From eb805682e2d9b8ff6c4bda446e665d1045afe55f Mon Sep 17 00:00:00 2001 From: "Jae Ik, Lee" Date: Thu, 1 Sep 2022 21:50:02 +0900 Subject: [PATCH] feat(embedded): provides filter bar visibility setting on embedded dashboard (#21069) (#21070) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 이재익 [jileeon] --- superset-embedded-sdk/README.md | 7 ++++++- superset-embedded-sdk/src/const.ts | 4 ++++ superset-embedded-sdk/src/index.ts | 21 ++++++++++++++++++--- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md index 93b0aa4c09e63..7e05d94a6ce1d 100644 --- a/superset-embedded-sdk/README.md +++ b/superset-embedded-sdk/README.md @@ -40,7 +40,12 @@ 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) + dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional) + hideTitle: true, + filters: { + expanded: true, + } + }, }); ``` diff --git a/superset-embedded-sdk/src/const.ts b/superset-embedded-sdk/src/const.ts index e887974520359..72eba8525d758 100644 --- a/superset-embedded-sdk/src/const.ts +++ b/superset-embedded-sdk/src/const.ts @@ -18,3 +18,7 @@ */ export const IFRAME_COMMS_MESSAGE_TYPE = "__embedded_comms__"; +export const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY: { [index: string]: any } = { + visible: "show_filters", + expanded: "expand_filters", +} diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index 317195522c88d..200acbb587ccc 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -17,7 +17,10 @@ * under the License. */ -import { IFRAME_COMMS_MESSAGE_TYPE } from './const'; +import { + DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY, + IFRAME_COMMS_MESSAGE_TYPE +} from './const'; // We can swap this out for the actual switchboard package once it gets published import { Switchboard } from '@superset-ui/switchboard'; @@ -34,6 +37,11 @@ export type UiConfigType = { hideTitle?: boolean hideTab?: boolean hideChartControls?: boolean + filters?: { + [key: string]: boolean | undefined + visible?: boolean + expanded?: boolean + } } export type EmbedDashboardParams = { @@ -45,7 +53,7 @@ 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 **/ + /** The dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded **/ dashboardUiConfig?: UiConfigType /** Are we in debug mode? */ debug?: boolean @@ -99,6 +107,13 @@ export async function embedDashboard({ return new Promise(resolve => { const iframe = document.createElement('iframe'); const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : "" + 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('&') + : "" // setup the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work @@ -132,7 +147,7 @@ export async function embedDashboard({ resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug })); }); - iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}`; + iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`; mountPoint.replaceChildren(iframe); log('placed the iframe') });