feat(embedded): +2 functions: getDashboardPermalink, getActiveTabs (#21444)

Co-authored-by: Jayakrishnan Karolil <jayakrishnan.karolil@nielsen.com>

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,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<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,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();
   }
 });