From 548a9a7433f7ed47049faaf1e3773f93d3b6e356 Mon Sep 17 00:00:00 2001
From: Denis Berezin <denis.berezin@metabase.com>
Date: Wed, 30 Oct 2024 20:54:36 +0300
Subject: [PATCH] fix(sdk): Editable dashboard should not overlap content below
it (#49293)
* fix(sdk): Editable dashboard should not overlap content below it
* Add sizing note
---
enterprise/frontend/src/embedding-sdk/README.md | 12 ++++++++++++
.../InteractiveDashboard/ConnectedDashboard.tsx | 2 ++
.../EditableDashboard.styled.tsx | 2 +-
.../InteractiveDashboard/EditableDashboard.tsx | 1 +
.../components/Dashboard/Dashboard.styled.tsx | 1 +
.../dashboard/components/Dashboard/Dashboard.tsx | 2 ++
.../src/metabase/dashboard/types/display-options.ts | 7 ++++++-
7 files changed, 25 insertions(+), 2 deletions(-)
diff --git a/enterprise/frontend/src/embedding-sdk/README.md b/enterprise/frontend/src/embedding-sdk/README.md
index 5648e00a083..fe95823319b 100644
--- a/enterprise/frontend/src/embedding-sdk/README.md
+++ b/enterprise/frontend/src/embedding-sdk/README.md
@@ -652,6 +652,18 @@ component.
but without its cards - at this stage dashboard title, tabs and cards grid is rendered, but cards content is not yet
loaded.
+By default, this component takes full page height (100vh). You can override this with custom styles passed via `style` or `className` props.
+
+```tsx
+<EditableDashboard
+ style={{
+ height: 800,
+ overflow: "auto",
+ }}
+ dashboardId={dashboardId}
+/>
+```
+
### Creating Dashboards
Creating dashboard could be done with `useCreateDashboardApi` hook or `CreateDashboardModal` component.
diff --git a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/ConnectedDashboard.tsx b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/ConnectedDashboard.tsx
index 18fa81845c2..df0924ee415 100644
--- a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/ConnectedDashboard.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/ConnectedDashboard.tsx
@@ -35,6 +35,7 @@ import {
} from "metabase/dashboard/selectors";
import type {
DashboardFullscreenControls,
+ DashboardLoaderWrapperProps,
DashboardRefreshPeriodControls,
} from "metabase/dashboard/types";
import { useValidatedEntityId } from "metabase/lib/entity-id/hooks/use-validated-entity-id";
@@ -100,6 +101,7 @@ type ConnectedDashboardProps = {
className?: string;
} & DashboardFullscreenControls &
DashboardRefreshPeriodControls &
+ DashboardLoaderWrapperProps &
PublicOrEmbeddedDashboardEventHandlersProps;
const ConnectedDashboardInner = ({
diff --git a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.styled.tsx b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.styled.tsx
index b7d25ceb80f..4f473126453 100644
--- a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.styled.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.styled.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
import { PublicComponentWrapper } from "embedding-sdk/components/private/PublicComponentWrapper";
export const StyledPublicComponentWrapper = styled(PublicComponentWrapper)`
- height: 100vh;
+ min-height: 100vh;
background: var(--mb-color-bg-dashboard);
display: flex;
flex-direction: column;
diff --git a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.tsx b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.tsx
index c3730c9412f..299581aa061 100644
--- a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveDashboard/EditableDashboard.tsx
@@ -91,6 +91,7 @@ export const EditableDashboard = ({
setRefreshElapsedHook={setRefreshElapsedHook}
isFullscreen={isFullscreen}
onFullscreenChange={onFullscreenChange}
+ noLoaderWrapper
onNavigateToNewCardFromDashboard={onNavigateToNewCardFromDashboard}
downloadsEnabled={withDownloads}
onLoad={onLoad}
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx
index d5f3cdc6768..c4acd9ea02e 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx
@@ -44,6 +44,7 @@ export const DashboardLoadingAndErrorWrapper = styled(
export const DashboardStyled = styled.div`
display: flex;
+ flex: 1 0 auto;
flex-direction: column;
min-height: 100%;
width: 100%;
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.tsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.tsx
index 885ac3d7f52..15c20fa5ce8 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.tsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.tsx
@@ -198,6 +198,7 @@ function Dashboard(props: DashboardProps) {
toggleSidebar,
parameterQueryParams,
downloadsEnabled = true,
+ noLoaderWrapper = false,
} = props;
const dispatch = useDispatch();
@@ -396,6 +397,7 @@ function Dashboard(props: DashboardProps) {
isNightMode={shouldRenderAsNightMode}
loading={!dashboard}
error={error}
+ noWrapper={noLoaderWrapper}
>
{() => {
if (!dashboard) {
diff --git a/frontend/src/metabase/dashboard/types/display-options.ts b/frontend/src/metabase/dashboard/types/display-options.ts
index 6a5296965ee..83db5da6fd9 100644
--- a/frontend/src/metabase/dashboard/types/display-options.ts
+++ b/frontend/src/metabase/dashboard/types/display-options.ts
@@ -26,7 +26,12 @@ export type DashboardDownloadControls = {
downloadsEnabled?: boolean;
};
+export type DashboardLoaderWrapperProps = {
+ noLoaderWrapper?: boolean;
+};
+
export type DashboardDisplayOptionControls = DashboardFullscreenControls &
DashboardRefreshPeriodControls &
DashboardNightModeControls &
- DashboardDownloadControls;
+ DashboardDownloadControls &
+ DashboardLoaderWrapperProps;
--
GitLab