This is an automated email from the ASF dual-hosted git repository. msyavuz pushed a commit to branch msyavuz/feat/embedded-theme in repository https://gitbox.apache.org/repos/asf/superset.git
commit 164d9891087ad26d2a51d9a648f238a9dd42e0c0 Author: Mehmet Salih Yavuz <[email protected]> AuthorDate: Sat May 3 17:20:19 2025 +0300 feat(theming): Support embedding-sdk theming --- superset-embedded-sdk/src/index.ts | 14 ++++++++++++++ superset-frontend/src/embedded/index.tsx | 19 ++++++++++++++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts index f0ae1cab42..75af22d668 100644 --- a/superset-embedded-sdk/src/index.ts +++ b/superset-embedded-sdk/src/index.ts @@ -89,6 +89,7 @@ export type EmbeddedDashboard = { callbackFn: ObserveDataMaskCallbackFn, ) => void; getDataMask: () => Record<string, any>; + setThemeConfig: (themeConfig: Record<string, any>) => void; }; /** @@ -245,6 +246,18 @@ export async function embedDashboard({ ourPort.start(); ourPort.defineMethod('observeDataMask', callbackFn); }; + const setThemeConfig = async (themeConfig: Record<string, any>): Promise<void> => { + try { + ourPort.emit('setThemeConfig', { themeConfig }); + log('Theme config sent successfully (or at least message dispatched)'); + } catch (error) { + console.error('Failed to send theme config:', error); + log( + 'Error sending theme config. Ensure the iframe side implements the "setThemeConfig" method.', + ); + throw error; + } + }; return { getScrollSize, @@ -253,5 +266,6 @@ export async function embedDashboard({ getActiveTabs, observeDataMask, getDataMask, + setThemeConfig }; } diff --git a/superset-frontend/src/embedded/index.tsx b/superset-frontend/src/embedded/index.tsx index 51a3af8897..3cad93fe73 100644 --- a/superset-frontend/src/embedded/index.tsx +++ b/superset-frontend/src/embedded/index.tsx @@ -21,7 +21,7 @@ import 'src/public-path'; 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, themeObject } from '@superset-ui/core'; import Switchboard from '@superset-ui/switchboard'; import getBootstrapData from 'src/utils/getBootstrapData'; import setupClient from 'src/setup/setupClient'; @@ -35,6 +35,7 @@ import ToastContainer from 'src/components/MessageToasts/ToastContainer'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; import { embeddedApi } from './api'; import { getDataMaskChangeTrigger } from './utils'; +import { AnyThemeConfig } from 'packages/superset-ui-core/src/theme/types'; setupPlugins(); @@ -240,6 +241,22 @@ window.addEventListener('message', function embeddedPageInitializer(event) { ); Switchboard.defineMethod('getActiveTabs', embeddedApi.getActiveTabs); Switchboard.defineMethod('getDataMask', embeddedApi.getDataMask); + Switchboard.defineMethod( + 'setThemeConfig', + (payload: { themeConfig: AnyThemeConfig }) => { + const { themeConfig } = payload; + log('Received setThemeConfig request:', themeConfig); + + try { + console.log({ themeConfig }); + themeObject.setConfig(themeConfig); + return { success: true, message: 'Theme applied (placeholder)' }; + } catch (error) { + logging.error('Failed to apply theme config:', error); + throw new Error(`Failed to apply theme config: ${error.message}`); + } + }, + ); Switchboard.start(); } });
