feat(embedding-sdk): emit data-mask events through embedded sdk to iframe parent

RESOURCES/FEATURE_FLAGS.md

@@ -82,6 +82,7 @@ independently. This new framework will also allow for non-boolean configurations
 - DRUID_JOINS
 - EMBEDDABLE_CHARTS
 - EMBEDDED_SUPERSET
+- EMBEDDED_SUPERSET_EMIT_DATA_MASKS
 - ENABLE_TEMPLATE_PROCESSING
 - ESCAPE_MARKDOWN_HTML
 - LISTVIEWS_DEFAULT_CARD_VIEW

superset-embedded-sdk/src/index.ts

@@ -71,11 +71,12 @@ export type Size = {
 }
 
 export type EmbeddedDashboard = {
-  getScrollSize: () => Promise<Size>
-  unmount: () => void
-  getDashboardPermalink: (anchor: string) => Promise<string>
-  getActiveTabs: () => Promise<string[]>
-}
+  getScrollSize: () => Promise<Size>;
+  unmount: () => void;
+  getDashboardPermalink: (anchor: string) => Promise<string>;
+  getActiveTabs: () => Promise<string[]>;
+  getDataMasks: (callbackFn: (dataMasks: any[]) => void) => void;
+};
 
 /**
  * Embeds a Superset dashboard into the page using an iframe.
@@ -197,12 +198,18 @@ 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')
+  const getActiveTabs = () => ourPort.get<string[]>('getActiveTabs');
+  const getDataMasks = (callbackFn: (dataMasks: any[]) => void) => {
+    ourPort.start();
+    ourPort.defineMethod("getDataMasks", callbackFn);
+  };
+
 
   return {
     getScrollSize,
     unmount,
     getDashboardPermalink,
     getActiveTabs,
+    getDataMasks,
   };
 }

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -41,6 +41,7 @@ export enum FeatureFlag {
   DynamicPlugins = 'DYNAMIC_PLUGINS',
   EmbeddableCharts = 'EMBEDDABLE_CHARTS',
   EmbeddedSuperset = 'EMBEDDED_SUPERSET',
+  EmbeddedSupersetEmitDataMasks = 'EMBEDDED_SUPERSET_EMIT_DATA_MASKS',
   EnableAdvancedDataTypes = 'ENABLE_ADVANCED_DATA_TYPES',
   /** @deprecated */
   EnableJavascriptControls = 'ENABLE_JAVASCRIPT_CONTROLS',

superset-frontend/src/embedded/index.tsx

@@ -19,7 +19,13 @@
 import { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { makeApi, t, logging } from '@superset-ui/core';
+import {
+  makeApi,
+  t,
+  logging,
+  isFeatureEnabled,
+  FeatureFlag,
+} from '@superset-ui/core';
 import Switchboard from '@superset-ui/switchboard';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import setupClient from 'src/setup/setupClient';
@@ -213,4 +219,13 @@
   }
 });
 
+if (isFeatureEnabled(FeatureFlag.EmbeddedSupersetEmitDataMasks)) {
+  log('setting up Switchboard event emitter');
+
+  store.subscribe(() => {
+    const state = store.getState();
+    Switchboard.emit('getDataMasks', state.dataMask);
+  });
+}
+
 log('embed page is ready to receive messages');

superset/config.py

@@ -496,6 +496,7 @@ class D3TimeFormat(TypedDict, total=False):
     # This feature flag is stil in beta and is not recommended for production use.
     "GLOBAL_ASYNC_QUERIES": False,
     "EMBEDDED_SUPERSET": False,
+    "EMBEDDED_SUPERSET_EMIT_DATA_MASKS": False,
     # Enables Alerts and reports new implementation
     "ALERT_REPORTS": False,
     "ALERT_REPORT_TABS": False,