feat(embedded): +2 functions - getDashboardPermalinkForAnchor, getAct…

…iveTabs

superset-embedded-sdk/src/index.ts

@@ -66,6 +66,8 @@ export type Size = {
 export type EmbeddedDashboard = {
   getScrollSize: () => Promise<Size>
   unmount: () => void
+  getDashboardPermalink: (anchor: string) => Promise<string>
+  getActiveTabs: () => Promise<string[]>
 }
 
 /**
@@ -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<Size>('getScrollSize');
+  const getDashboardPermalink = (anchor: string) =>
+    ourPort.get<string>('getDashboardPermalink', { anchor });
+  const getActiveTabs = () => ourPort.get<string[]>('getActiveTabs')
 
   return {
     getScrollSize,
     unmount,
+    getDashboardPermalink,
+    getActiveTabs,
   };
 }

superset-frontend/src/embedded/api.tsx

@@ -0,0 +1,42 @@
+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<string>;
+  getActiveTabs: () => string[];
+}
+
+const getScrollSize = (): Size => ({
+  width: document.body.scrollWidth,
+  height: document.body.scrollHeight,
+})
+
+const getDashboardPermalink = async ({anchor}: {anchor: string}): Promise<string> => {
+  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
+};

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,17 @@ window.addEventListener('message', function embeddedPageInitializer(event) {
 
     let started = false;
 
-    switchboard.defineMethod('guestToken', ({ guestToken }) => {
+    switchboard.defineMethod('guestToken', ({ guestToken }: { guestToken: string }) => {
       setupGuestClient(guestToken);
       if (!started) {
         start();
         started = true;
       }
     });
 
-    switchboard.defineMethod('getScrollSize', () => ({
-      width: document.body.scrollWidth,
-      height: document.body.scrollHeight,
-    }));
-
+    switchboard.defineMethod('getScrollSize', embeddedApi.getScrollSize);
+    switchboard.defineMethod('getDashboardPermalink', embeddedApi.getDashboardPermalink);
+    switchboard.defineMethod('getActiveTabs', embeddedApi.getActiveTabs);
     switchboard.start();
   }
 });