From b787c3fef4655c1142da3d827fe6766c853ffe72 Mon Sep 17 00:00:00 2001 From: jayakrishnankk Date: Wed, 28 Sep 2022 22:03:30 -0500 Subject: [PATCH] feat(embedded): +2 functions: getDashboardPermalink, getActiveTabs (#21444) Co-authored-by: Jayakrishnan Karolil --- superset-embedded-sdk/src/index.ts | 13 +++-- superset-frontend/src/embedded/api.tsx | 66 ++++++++++++++++++++++++ superset-frontend/src/embedded/index.tsx | 31 ++++++----- 3 files changed, 94 insertions(+), 16 deletions(-) create mode 100644 superset-frontend/src/embedded/api.tsx diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index 200acbb587cc..56a07e5544c1 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -66,6 +66,8 @@ export type Size = { export type EmbeddedDashboard = { getScrollSize: () => Promise unmount: () => void + getDashboardPermalink: (anchor: string) => Promise + getActiveTabs: () => Promise } /** @@ -115,14 +117,14 @@ export async function embedDashboard({ .map(key => DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key] + '=' + filterConfig[key]).join('&') : "" - // setup the iframe's sandbox configuration + // set up the iframe's sandbox configuration iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work iframe.sandbox.add("allow-scripts"); // obviously the iframe needs scripts iframe.sandbox.add("allow-presentation"); // for fullscreen charts iframe.sandbox.add("allow-downloads"); // for downloading charts as image iframe.sandbox.add("allow-forms"); // for forms to submit iframe.sandbox.add("allow-popups"); // for exporting charts as csv - // add these ones if it turns out we need them: + // add these if it turns out we need them: // iframe.sandbox.add("allow-top-navigation"); // add the event listener before setting src, to be 100% sure that we capture the load event @@ -153,7 +155,7 @@ export async function embedDashboard({ }); } - const [guestToken, ourPort] = await Promise.all([ + const [guestToken, ourPort]: [string, Switchboard] = await Promise.all([ fetchGuestToken(), mountIframe(), ]); @@ -175,9 +177,14 @@ export async function embedDashboard({ } const getScrollSize = () => ourPort.get('getScrollSize'); + const getDashboardPermalink = (anchor: string) => + ourPort.get('getDashboardPermalink', { anchor }); + const getActiveTabs = () => ourPort.get('getActiveTabs') return { getScrollSize, unmount, + getDashboardPermalink, + getActiveTabs, }; } diff --git a/superset-frontend/src/embedded/api.tsx b/superset-frontend/src/embedded/api.tsx new file mode 100644 index 000000000000..675e97ac542f --- /dev/null +++ b/superset-frontend/src/embedded/api.tsx @@ -0,0 +1,66 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { store } from '../views/store'; +import { bootstrapData } from '../preamble'; +import { getDashboardPermalink as getDashboardPermalinkUtil } from '../utils/urlUtils'; + +type Size = { + width: number; + height: number; +}; + +type EmbeddedSupersetApi = { + getScrollSize: () => Size; + getDashboardPermalink: ({ anchor }: { anchor: string }) => Promise; + getActiveTabs: () => string[]; +}; + +const getScrollSize = (): Size => ({ + width: document.body.scrollWidth, + height: document.body.scrollHeight, +}); + +const getDashboardPermalink = async ({ + anchor, +}: { + anchor: string; +}): Promise => { + const state = store?.getState(); + const { dashboardId, dataMask, activeTabs } = { + dashboardId: + state?.dashboardInfo?.id || bootstrapData?.embedded!.dashboard_id, + dataMask: state?.dataMask, + activeTabs: state.dashboardState?.activeTabs, + }; + + return getDashboardPermalinkUtil({ + dashboardId, + dataMask, + activeTabs, + anchor, + }); +}; + +const getActiveTabs = () => store?.getState()?.dashboardState?.activeTabs || []; + +export const embeddedApi: EmbeddedSupersetApi = { + getScrollSize, + getDashboardPermalink, + getActiveTabs, +}; diff --git a/superset-frontend/src/embedded/index.tsx b/superset-frontend/src/embedded/index.tsx index c28d416a18ae..df673f24e7a4 100644 --- a/superset-frontend/src/embedded/index.tsx +++ b/superset-frontend/src/embedded/index.tsx @@ -30,6 +30,7 @@ import Loading from 'src/components/Loading'; import { addDangerToast } from 'src/components/MessageToasts/actions'; import ToastContainer from 'src/components/MessageToasts/ToastContainer'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; +import { embeddedApi } from './api'; const debugMode = process.env.WEBPACK_MODE === 'development'; @@ -183,19 +184,23 @@ window.addEventListener('message', function embeddedPageInitializer(event) { let started = false; - switchboard.defineMethod('guestToken', ({ guestToken }) => { - setupGuestClient(guestToken); - if (!started) { - start(); - started = true; - } - }); - - switchboard.defineMethod('getScrollSize', () => ({ - width: document.body.scrollWidth, - height: document.body.scrollHeight, - })); - + switchboard.defineMethod( + 'guestToken', + ({ guestToken }: { guestToken: string }) => { + setupGuestClient(guestToken); + if (!started) { + start(); + started = true; + } + }, + ); + + switchboard.defineMethod('getScrollSize', embeddedApi.getScrollSize); + switchboard.defineMethod( + 'getDashboardPermalink', + embeddedApi.getDashboardPermalink, + ); + switchboard.defineMethod('getActiveTabs', embeddedApi.getActiveTabs); switchboard.start(); } });