feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard (#24408)

This commit is contained in:
George Voicu 2024-03-01 01:27:13 +01:00 committed by GitHub
parent ad3995daf6
commit 89d49e55bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 11 deletions

View File

@ -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',
// ...
}
},
});

View File

@ -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",

View File

@ -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": [

View File

@ -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')