remove code from useDashboardUrlParams and related files (#44426)

* simplify bordered logic

*  setTitled

*  setHideDownloadButton

*  setHideParameters

* inline useEmbedDisplayOptions

* move DEFAULT_EMBED_DISPLAY_OPTIONS to costants file so we can remove use-embed-display-options.ts

* move consts up in the file

* update deps of useEffect

* fix ts error in the sdk

* use useEmbedFrameOptions in useDashboardUrlParams

* embed frame should not touch the `embed` slice, which is used for interactive embedding

enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-dashboard-params.ts

 import type { Query } from "history";
 import { pick } from "underscore";
 
+import { DEFAULT_EMBED_DISPLAY_OPTIONS } from "metabase/dashboard/constants";
 import {
-  DEFAULT_EMBED_DISPLAY_OPTIONS,
   useDashboardFullscreen,
   useDashboardRefreshPeriod,
   useRefreshDashboard,

frontend/src/metabase/dashboard/constants.ts

@@ -3,6 +3,8 @@ import type {
   DashboardState,
 } from "metabase-types/store";
 
+import type { EmbedDisplayParams } from "./types";
+
 export const SIDEBAR_NAME: Record<DashboardSidebarName, DashboardSidebarName> =
   {
     addQuestion: "addQuestion",
@@ -46,3 +48,13 @@ export const DASHBOARD_SLOW_TIMEOUT = 15 * 1000;
 
 export const DASHBOARD_PDF_EXPORT_ROOT_ID =
   "Dashboard-Parameters-And-Cards-Container";
+
+export const DEFAULT_EMBED_DISPLAY_OPTIONS: EmbedDisplayParams = {
+  bordered: false,
+  titled: true,
+  cardTitled: true,
+  hideDownloadButton: null,
+  hideParameters: null,
+  font: null,
+  theme: "light",
+};

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

@@ -43,14 +43,10 @@ export const DashboardControls = <T extends DashboardControlsProps>(
       isNightMode,
       onNightModeChange,
       refreshPeriod,
-      setBordered,
-      setHideDownloadButton,
-      setHideParameters,
       onFullscreenChange,
       setRefreshElapsedHook,
       onRefreshPeriodChange,
       setTheme,
-      setTitled,
       theme,
       titled,
       font,
@@ -77,11 +73,7 @@ export const DashboardControls = <T extends DashboardControlsProps>(
         onRefreshPeriodChange={onRefreshPeriodChange}
         bordered={bordered}
         hideDownloadButton={hideDownloadButton}
-        setBordered={setBordered}
-        setHideDownloadButton={setHideDownloadButton}
-        setHideParameters={setHideParameters}
         setTheme={setTheme}
-        setTitled={setTitled}
         theme={theme}
         titled={titled}
         font={font}

frontend/src/metabase/dashboard/hooks/index.ts

 export * from "./use-click-behavior-data";
 export * from "./use-dashboard-fullscreen";
-export * from "./use-embed-display-options";
 export * from "./use-dashboard-nav";
 export * from "./use-dashboard-refresh-period";
 export * from "./use-embed-theme";

frontend/src/metabase/dashboard/hooks/use-dashboard-url-params.ts

@@ -4,41 +4,36 @@ import { useEffect } from "react";
 import {
   useDashboardFullscreen,
   useDashboardRefreshPeriod,
+  useEmbedTheme,
 } from "metabase/dashboard/hooks";
-import { useEmbedDisplayOptions } from "metabase/dashboard/hooks/use-embed-display-options";
 import { useLocationSync } from "metabase/dashboard/hooks/use-location-sync";
-import type {
-  DashboardDisplayOptionControls,
-  RefreshPeriod,
-} from "metabase/dashboard/types";
+import type { RefreshPeriod } from "metabase/dashboard/types";
 import type { DashboardUrlHashOptions } from "metabase/dashboard/types/hash-options";
 import { parseHashOptions } from "metabase/lib/browser";
+import { useEmbedFrameOptions } from "metabase/public/hooks";
 import type { DisplayTheme } from "metabase/public/lib/types";
 
+import { useEmbedFont } from "./use-embed-font";
+
 export const useDashboardUrlParams = ({
   location,
   onRefresh,
 }: {
   location: Location;
   onRefresh: () => Promise<void>;
-}): DashboardDisplayOptionControls => {
+}) => {
+  const { font, setFont } = useEmbedFont();
+
+  const { bordered, titled, hide_parameters, hide_download_button } =
+    useEmbedFrameOptions({ location });
+
   const {
-    bordered,
-    font,
     hasNightModeToggle,
-    hideDownloadButton,
-    hideParameters,
     isNightMode,
     onNightModeChange,
-    setBordered,
-    setFont,
-    setHideDownloadButton,
-    setHideParameters,
     setTheme,
-    setTitled,
     theme,
-    titled,
-  } = useEmbedDisplayOptions();
+  } = useEmbedTheme();
 
   const { isFullscreen, onFullscreenChange } = useDashboardFullscreen();
   const { onRefreshPeriodChange, refreshPeriod, setRefreshElapsedHook } =
@@ -69,32 +64,14 @@ export const useDashboardUrlParams = ({
     const hashOptions = parseHashOptions(
       location.hash,
     ) as DashboardUrlHashOptions;
-    setTitled(hashOptions.titled ?? titled);
-    setBordered(hashOptions.bordered ?? bordered);
+
     setFont(hashOptions.font ?? font);
-    setHideDownloadButton(
-      hashOptions.hide_download_button ?? hideDownloadButton,
-    );
-    setHideParameters(hashOptions.hide_parameters ?? hideParameters);
-  }, [
-    bordered,
-    font,
-    hideDownloadButton,
-    hideParameters,
-    location.hash,
-    setBordered,
-    setFont,
-    setHideDownloadButton,
-    setHideParameters,
-    setTitled,
-    titled,
-  ]);
+  }, [font, location.hash, setFont]);
 
   return {
     isFullscreen,
     onFullscreenChange,
-    hideParameters,
-    setHideParameters,
+    hideParameters: hide_parameters,
     hasNightModeToggle,
     onNightModeChange,
     setTheme,
@@ -104,11 +81,8 @@ export const useDashboardUrlParams = ({
     setRefreshElapsedHook,
     onRefreshPeriodChange,
     bordered,
-    setBordered,
     titled,
-    setTitled,
-    hideDownloadButton,
-    setHideDownloadButton,
+    hideDownloadButton: hide_download_button,
     font,
     setFont,
   };

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";
-
-import type { EmbedDisplayControls, EmbedDisplayParams } from "../types";
-
-export const DEFAULT_EMBED_DISPLAY_OPTIONS: EmbedDisplayParams = {
-  bordered: false,
-  titled: true,
-  cardTitled: true,
-  hideDownloadButton: null,
-  hideParameters: null,
-  font: null,
-  theme: "light",
-};
-
-export const useEmbedDisplayOptions = (): EmbedDisplayControls => {
-  const [bordered, setBordered] = useState(
-    isWithinIframe() || DEFAULT_EMBED_DISPLAY_OPTIONS.bordered,
-  );
-  const [titled, setTitled] = useState(DEFAULT_EMBED_DISPLAY_OPTIONS.titled);
-  const [hideDownloadButton, setHideDownloadButton] = useState(
-    DEFAULT_EMBED_DISPLAY_OPTIONS.hideDownloadButton,
-  );
-  const [hideParameters, setHideParameters] = useState(
-    DEFAULT_EMBED_DISPLAY_OPTIONS.hideParameters,
-  );
-
-  const { font, setFont } = useEmbedFont();
-
-  const {
-    hasNightModeToggle,
-    isNightMode,
-    onNightModeChange,
-    setTheme,
-    theme,
-  } = useEmbedTheme();
-
-  return {
-    bordered,
-    setBordered,
-    titled,
-    setTitled,
-    hideDownloadButton,
-    setHideDownloadButton,
-    hideParameters,
-    setHideParameters,
-    font,
-    setFont,
-    hasNightModeToggle,
-    isNightMode,
-    onNightModeChange,
-    setTheme,
-    theme,
-  };
-};

frontend/src/metabase/dashboard/hooks/use-location-sync.ts

@@ -4,7 +4,7 @@ import { replace } from "react-router-redux";
 import { usePrevious } from "react-use";
 import { omit } from "underscore";
 
-import { DEFAULT_EMBED_DISPLAY_OPTIONS } from "metabase/dashboard/hooks/use-embed-display-options";
+import { DEFAULT_EMBED_DISPLAY_OPTIONS } from "metabase/dashboard/constants";
 import type { DashboardUrlHashOptions } from "metabase/dashboard/types";
 import { parseHashOptions, stringifyHashOptions } from "metabase/lib/browser";
 import { useDispatch } from "metabase/lib/redux";

frontend/src/metabase/dashboard/types/embed-display-options.ts

@@ -3,19 +3,16 @@ import type { DisplayTheme } from "metabase/public/lib/types";
 export type EmbedTitle = boolean;
 export type EmbedTitledControls = {
   titled: EmbedTitle;
-  setTitled: (titled: EmbedTitle) => void;
 };
 
 export type EmbedHideDownloadButton = boolean | null;
 export type EmbedHideDownloadButtonControls = {
   hideDownloadButton: EmbedHideDownloadButton;
-  setHideDownloadButton: (hideDownloadButton: EmbedHideDownloadButton) => void;
 };
 
 export type EmbedHideParameters = string | null;
 export type EmbedHideParametersControls = {
   hideParameters: EmbedHideParameters;
-  setHideParameters: (hideParameters: EmbedHideParameters) => void;
 };
 
 export type EmbedThemeControls = {
@@ -32,14 +29,8 @@ export type EmbedFontControls = {
   setFont: (font: EmbedFont) => void;
 };
 
-export type EmbedBordered = boolean;
-export type EmbedBorderControls = {
-  bordered: EmbedBordered;
-  setBordered: (bordered: EmbedBordered) => void;
-};
-
 export type EmbedDisplayParams = {
-  bordered: EmbedBordered;
+  bordered: boolean;
   titled: EmbedTitle;
   cardTitled: EmbedTitle;
   hideDownloadButton: EmbedHideDownloadButton;
@@ -49,7 +40,6 @@ export type EmbedDisplayParams = {
 };
 
 export type EmbedDisplayControls = EmbedThemeControls &
-  EmbedBorderControls &
   EmbedTitledControls &
   EmbedHideDownloadButtonControls &
   EmbedHideParametersControls &

frontend/src/metabase/public/hooks/use-embed-frame-options.ts

 import type { Location } from "history";
-import { useEffect } from "react";
 
 import type { DashboardUrlHashOptions } from "metabase/dashboard/types";
 import { parseHashOptions } from "metabase/lib/browser";
 import { isWithinIframe } from "metabase/lib/dom";
-import { useDispatch } from "metabase/lib/redux";
-import { setInitialUrlOptions } from "metabase/redux/embed";
 
 export const useEmbedFrameOptions = ({ location }: { location: Location }) => {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(setInitialUrlOptions(location));
-  }, [dispatch, location]);
-
   const {
     bordered = isWithinIframe(),
     titled = true,