fix(sdk): Use theme font in charts and tooltips (#42855)

* Allow charts font override in SDK

* Fix default not configured font

enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import type { HTMLAttributes } from "react";
 
-import { DEFAULT_FONT } from "embedding-sdk/config";
 import type { EmbeddingTheme } from "embedding-sdk/types/theme/private";
 import { getRootStyle } from "metabase/css/core/base.styled";
 import { defaultFontFiles } from "metabase/css/core/fonts.styled";
@@ -35,7 +34,7 @@ const SdkContentWrapperInner = styled.div<
     fontFiles: FontFile[] | null;
   }
 >`
-  --mb-default-font-family: "${({ theme }) => getFontFamily(theme)}";
+  --mb-default-font-family: "${({ theme }) => theme.fontFamily}";
   --mb-color-brand: ${({ theme }) => theme.fn.themeColor("brand")};
   --mb-color-brand-alpha-04: ${({ theme }) =>
     alpha(theme.fn.themeColor("brand"), 0.04)};
@@ -72,9 +71,6 @@ const SdkContentWrapperInner = styled.div<
   }
 `;
 
-const getFontFamily = (theme: EmbeddingTheme) =>
-  theme.fontFamily ?? DEFAULT_FONT;
-
 const getWrapperStyle = (theme: EmbeddingTheme) => css`
   font-size: ${theme.other.fontSize ?? "0.875em"};
 `;

enterprise/frontend/src/embedding-sdk/components/public/MetabaseProvider.tsx

@@ -18,6 +18,7 @@ import type { SDKConfig } from "embedding-sdk/types";
 import type { MetabaseTheme } from "embedding-sdk/types/theme";
 import { colors } from "metabase/lib/colors";
 import type { ColorName } from "metabase/lib/colors/types";
+import { setOptions } from "metabase/redux/embed";
 import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
 import { ThemeProvider } from "metabase/ui/components/theme/ThemeProvider";
 
@@ -47,6 +48,16 @@ const MetabaseProviderInternal = ({
     return theme && getEmbeddingThemeOverride(theme);
   }, [theme]);
 
+  useEffect(() => {
+    if (theme?.fontFamily) {
+      store.dispatch(
+        setOptions({
+          font: theme.fontFamily,
+        }),
+      );
+    }
+  }, [theme?.fontFamily]);
+
   useEffect(() => {
     store.dispatch(setPlugins(pluginsConfig || null));
   }, [pluginsConfig]);

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.ts

 import { merge } from "icepick";
 
+import { DEFAULT_FONT } from "embedding-sdk/config";
 import { colors } from "metabase/lib/colors";
 import type { ColorName, ColorPalette } from "metabase/lib/colors/types";
 
@@ -14,6 +15,9 @@ import type { EmbeddingThemeOverride } from "../../types/theme/private";
 import { colorTuple } from "./color-tuple";
 import { DEFAULT_EMBEDDED_COMPONENT_THEME } from "./default-component-theme";
 
+const getFontFamily = (theme: MetabaseTheme) =>
+  theme.fontFamily ?? DEFAULT_FONT;
+
 /**
  * Transforms a public-facing Metabase theme configuration
  * into a Mantine theme override for internal use.
@@ -27,8 +31,9 @@ export function getEmbeddingThemeOverride(
   );
 
   const override: EmbeddingThemeOverride = {
+    fontFamily: getFontFamily(theme),
+
     ...(theme.lineHeight && { lineHeight: theme.lineHeight }),
-    ...(theme.fontFamily && { fontFamily: theme.fontFamily }),
 
     other: {
       ...components,

enterprise/frontend/src/embedding-sdk/types/theme/index.ts

@@ -8,7 +8,7 @@ export interface MetabaseTheme {
   fontSize?: string;
 
   /**
-   * Base font family supported by Metabase.
+   * Base font family supported by Metabase, defaults to `Lato`.
    * Custom fonts are not yet supported in this version.
    **/
   fontFamily?: MetabaseFontFamily;

frontend/src/metabase/core/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import * as React from "react";
 import * as ReactIs from "react-is";
 
+import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
 import { DEFAULT_Z_INDEX } from "metabase/components/Popover/constants";
 import { isReducedMotionPreferred } from "metabase/lib/dom";
 import { isReactDOMTypeElement } from "metabase-types/guards";
@@ -59,6 +60,12 @@ function getTargetProps(
   }
 }
 
+function appendTo() {
+  return (
+    document.getElementById(EMBEDDING_SDK_ROOT_ELEMENT_ID) || document.body
+  );
+}
+
 /**
  * @deprecated: use Tooltip from "metabase/ui"
  */
@@ -106,7 +113,7 @@ function Tooltip({
       <TippyComponent
         theme={theme}
         className="popover"
-        appendTo={() => document.body}
+        appendTo={appendTo}
         content={tooltip}
         visible={visible}
         disabled={disabled}

frontend/src/metabase/lib/embed.js

@@ -3,7 +3,7 @@ import _ from "underscore";
 
 import { isFitViewportMode } from "metabase/hoc/FitViewPort";
 import { isWithinIframe, IFRAMED_IN_SELF } from "metabase/lib/dom";
-import { setOptions } from "metabase/redux/embed";
+import { setInitialUrlOptions } from "metabase/redux/embed";
 
 // detect if this page is embedded in itself, i.e. it's a embed preview
 // will need to do something different if we ever embed metabase in itself for another reason
@@ -42,7 +42,7 @@ export function initializeEmbedding(store) {
       }
     });
 
-    store.dispatch(setOptions(window.location));
+    store.dispatch(setInitialUrlOptions(window.location));
   }
 }
 

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx

@@ -23,7 +23,7 @@ import { useDispatch } from "metabase/lib/redux";
 import { FilterApplyButton } from "metabase/parameters/components/FilterApplyButton";
 import SyncedParametersList from "metabase/parameters/components/SyncedParametersList/SyncedParametersList";
 import { getVisibleParameters } from "metabase/parameters/utils/ui";
-import { setOptions } from "metabase/redux/embed";
+import { setInitialUrlOptions } from "metabase/redux/embed";
 import { getSetting } from "metabase/selectors/settings";
 import type Question from "metabase-lib/v1/Question";
 import { getValuePopulatedParameters } from "metabase-lib/v1/parameters/utils/parameter-values";
@@ -155,7 +155,7 @@ function EmbedFrame({
 
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(setOptions(location));
+    dispatch(setInitialUrlOptions(location));
   }, [dispatch, location]);
 
   const {

frontend/src/metabase/redux/embed.ts

@@ -4,6 +4,7 @@ import {
   createAction,
   handleActions,
 } from "metabase/lib/redux";
+import type { EmbedOptions } from "metabase-types/store";
 
 export const DEFAULT_EMBED_OPTIONS = {
   top_nav: true,
@@ -17,10 +18,9 @@ export const DEFAULT_EMBED_OPTIONS = {
   action_buttons: true,
 } as const;
 
-export const SET_OPTIONS = "metabase/embed/SET_OPTIONS";
-// FIXME: "setOptions" overrides all other options that haven't been passed. We should add another action to set only one key from options object.
-export const setOptions = createAction(
-  SET_OPTIONS,
+export const SET_INITIAL_URL_OPTIONS = "metabase/embed/SET_INITIAL_URL_OPTIONS";
+export const setInitialUrlOptions = createAction(
+  SET_INITIAL_URL_OPTIONS,
   ({ search, hash }: { search: string; hash: string }) => {
     return {
       ...parseSearchOptions(search),
@@ -29,12 +29,23 @@ export const setOptions = createAction(
   },
 );
 
+export const SET_OPTIONS = "metabase/embed/SET_OPTIONS";
+export const setOptions = createAction(
+  SET_OPTIONS,
+  (options: Partial<EmbedOptions>) => options,
+);
+
 const options = handleActions(
   {
-    [SET_OPTIONS]: (state, { payload }) => ({
+    [SET_INITIAL_URL_OPTIONS]: (state, { payload }) => ({
       ...DEFAULT_EMBED_OPTIONS,
       ...payload,
     }),
+
+    [SET_OPTIONS]: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    }),
   },
   {},
 );