You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2022/04/15 18:58:39 UTC
[superset] branch master updated: fix: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long (#19472)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 154f1ea8c9 fix: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long (#19472)
154f1ea8c9 is described below
commit 154f1ea8c92e38ba46a906d2121a85a1c9fac310
Author: Diego Medina <di...@gmail.com>
AuthorDate: Fri Apr 15 14:58:32 2022 -0400
fix: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long (#19472)
---
.../DashboardBuilder/DashboardBuilder.tsx | 29 ++++++++++++++++------
superset-frontend/src/dashboard/constants.ts | 2 --
2 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index ab1e95b9a1..11a5b28e56 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -18,7 +18,7 @@
*/
/* eslint-env browser */
import cx from 'classnames';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useState, useMemo } from 'react';
import { JsonObject, styled, css, t } from '@superset-ui/core';
import { Global } from '@emotion/react';
import { useDispatch, useSelector } from 'react-redux';
@@ -59,10 +59,8 @@ import {
CLOSED_FILTER_BAR_WIDTH,
FILTER_BAR_HEADER_HEIGHT,
FILTER_BAR_TABS_HEIGHT,
- HEADER_HEIGHT,
MAIN_HEADER_HEIGHT,
OPEN_FILTER_BAR_WIDTH,
- TABS_HEIGHT,
} from 'src/dashboard/constants';
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
import DashboardContainer from './DashboardContainer';
@@ -252,6 +250,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
[dispatch],
);
+ const headerRef = React.useRef<HTMLDivElement>(null);
const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
const rootChildId = dashboardRoot?.children[0];
const topLevelTabs =
@@ -264,10 +263,26 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
uiConfig.hideTitle ||
standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
isReport;
+ const [barTopOffset, setBarTopOffset] = useState(0);
- const barTopOffset =
- (hideDashboardHeader ? 0 : HEADER_HEIGHT) +
- (topLevelTabs ? TABS_HEIGHT : 0);
+ useEffect(() => {
+ setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);
+
+ let observer: ResizeObserver;
+ if (typeof global.ResizeObserver !== 'undefined' && headerRef.current) {
+ observer = new ResizeObserver(entries => {
+ setBarTopOffset(
+ current => entries?.[0]?.contentRect?.height || current,
+ );
+ });
+
+ observer.observe(headerRef.current);
+ }
+
+ return () => {
+ observer?.disconnect();
+ };
+ }, []);
const {
showDashboard,
@@ -364,7 +379,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
</StickyPanel>
</FiltersPanel>
)}
- <StyledHeader>
+ <StyledHeader ref={headerRef}>
{/* @ts-ignore */}
<DragDroppable
data-test="top-level-tabs"
diff --git a/superset-frontend/src/dashboard/constants.ts b/superset-frontend/src/dashboard/constants.ts
index 169a2d09de..296bc0a9b3 100644
--- a/superset-frontend/src/dashboard/constants.ts
+++ b/superset-frontend/src/dashboard/constants.ts
@@ -35,8 +35,6 @@ export const PLACEHOLDER_DATASOURCE: Datasource = {
};
export const MAIN_HEADER_HEIGHT = 53;
-export const TABS_HEIGHT = 50;
-export const HEADER_HEIGHT = 72;
export const CLOSED_FILTER_BAR_WIDTH = 32;
export const OPEN_FILTER_BAR_WIDTH = 260;
export const FILTER_BAR_HEADER_HEIGHT = 80;