fix(sdk): Fix static dashboard API (#43581)

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

@@ -9,36 +9,38 @@ import {
   useEmbedTheme,
   useRefreshDashboard,
 } from "metabase/dashboard/hooks";
+import { useEmbedFont } from "metabase/dashboard/hooks/use-embed-font";
 import type { EmbedDisplayParams } from "metabase/dashboard/types";
 import { isNotNull } from "metabase/lib/types";
 import { PublicOrEmbeddedDashboard } from "metabase/public/containers/PublicOrEmbeddedDashboard/PublicOrEmbeddedDashboard";
 import { Box } from "metabase/ui";
 import type { DashboardId } from "metabase-types/api";
 
+type StaticDashboardProps = {
+  dashboardId: DashboardId;
+  withTitle?: boolean;
+  withDownloads?: boolean;
+  hiddenParameters?: string[];
+  initialParameterValues?: Query;
+};
+
 const _StaticDashboard = ({
   dashboardId,
-  parameterQueryParams = {},
-  bordered,
-  titled,
-  theme: userTheme,
-  font,
-  hideDownloadButton,
-  hideParameters,
-}: {
-  dashboardId: DashboardId;
-  parameterQueryParams?: Query;
-  hideParameters?: string[];
-} & Partial<Omit<EmbedDisplayParams, "hideParameters">>) => {
+  initialParameterValues: parameterQueryParams = {},
+  withTitle: titled = true,
+  withDownloads = true,
+  hiddenParameters = [],
+}: StaticDashboardProps) => {
+  // temporary name until we change `hideDownloadButton` to `downloads`
+  const hideDownloadButton = !withDownloads;
+
   const options: EmbedDisplayParams = {
     ...DEFAULT_EMBED_DISPLAY_OPTIONS,
     ...pick(
       {
-        bordered,
         titled,
-        theme: userTheme,
-        font,
         hideDownloadButton,
-        hideParameters: hideParameters ? hideParameters.join(",") : null,
+        hideParameters: hiddenParameters.join(",") ?? null,
       },
       isNotNull,
     ),
@@ -55,27 +57,29 @@ const _StaticDashboard = ({
     });
 
   const { hasNightModeToggle, isNightMode, onNightModeChange, theme } =
-    useEmbedTheme(options.theme);
+    useEmbedTheme();
+
+  const { font } = useEmbedFont();
 
   return (
     <Box ref={ref} style={{ overflow: "auto" }}>
       <PublicOrEmbeddedDashboard
         dashboardId={dashboardId}
         parameterQueryParams={parameterQueryParams}
-        bordered={options.bordered}
-        font={options.font}
         hasNightModeToggle={hasNightModeToggle}
         hideDownloadButton={options.hideDownloadButton}
         hideParameters={options.hideParameters}
         isNightMode={isNightMode}
         onNightModeChange={onNightModeChange}
-        theme={theme}
         titled={options.titled}
+        theme={theme}
         isFullscreen={isFullscreen}
         onFullscreenChange={onFullscreenChange}
         refreshPeriod={refreshPeriod}
         onRefreshPeriodChange={onRefreshPeriodChange}
         setRefreshElapsedHook={setRefreshElapsedHook}
+        font={font}
+        bordered={options.bordered}
       />
     </Box>
   );

frontend/src/metabase/dashboard/hoc/DashboardControls.tsx

 import type { ComponentType } from "react";
-import { memo, useEffect } from "react";
+import { memo } from "react";
 
 import { useSyncURLSlug } from "metabase/dashboard/components/DashboardTabs/use-sync-url-slug";
 import {
@@ -7,8 +7,6 @@ import {
   useDashboardUrlParams,
   useRefreshDashboard,
 } from "metabase/dashboard/hooks";
-import { useDispatch } from "metabase/lib/redux";
-import { setOptions } from "metabase/redux/embed";
 
 import type {
   DashboardControlsPassedProps,
@@ -29,8 +27,6 @@ export const DashboardControls = <T extends DashboardControlsProps>(
     location,
     ...props
   }: DashboardControlsProps) {
-    const dispatch = useDispatch();
-
     const parameterQueryParams = location.query;
 
     const { refreshDashboard } = useRefreshDashboard({
@@ -65,14 +61,6 @@ export const DashboardControls = <T extends DashboardControlsProps>(
 
     useSyncURLSlug({ location });
 
-    useEffect(() => {
-      dispatch(
-        setOptions({
-          font: font ?? undefined,
-        }),
-      );
-    }, [dispatch, font, location]);
-
     return (
       <ComposedComponent
         {...(props as T)}

frontend/src/metabase/dashboard/hooks/use-embed-display-options.ts

 import { useState } from "react";
 
+import { useEmbedFont } from "metabase/dashboard/hooks/use-embed-font";
 import { useEmbedTheme } from "metabase/dashboard/hooks/use-embed-theme";
 import { isWithinIframe } from "metabase/lib/dom";
 
@@ -22,10 +23,12 @@ export const useEmbedDisplayOptions = (): EmbedDisplayControls => {
   const [hideDownloadButton, setHideDownloadButton] = useState(
     DEFAULT_EMBED_DISPLAY_OPTIONS.hideDownloadButton,
   );
-  const [font, setFont] = useState(DEFAULT_EMBED_DISPLAY_OPTIONS.font);
   const [hideParameters, setHideParameters] = useState(
     DEFAULT_EMBED_DISPLAY_OPTIONS.hideParameters,
   );
+
+  const { font, setFont } = useEmbedFont();
+
   const {
     hasNightModeToggle,
     isNightMode,

frontend/src/metabase/dashboard/hooks/use-embed-font.ts

+import { useCallback, useEffect } from "react";
+
+import type { EmbedFont } from "metabase/dashboard/types";
+import { useDispatch, useSelector } from "metabase/lib/redux";
+import { setOptions } from "metabase/redux/embed";
+import { getFont } from "metabase/styled-components/selectors";
+
+export const useEmbedFont = () => {
+  const font = useSelector(getFont);
+
+  const dispatch = useDispatch();
+  const setFont = useCallback(
+    (font: EmbedFont) => {
+      dispatch(
+        setOptions({
+          font: font ?? undefined,
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  useEffect(() => {
+    setFont(font);
+  }, [font, setFont]);
+
+  return { font, setFont };
+};