pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-16 02:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long (#19472)

Browse Source
This commit is contained in:
Diego Medina 2022-04-15 14:58:32 -04:00 committed by GitHub
parent 8d4a52c9d0
commit 154f1ea8c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
View File

@ -18,7 +18,7 @@
*/ */
/* eslint-env browser */ /* eslint-env browser */
import cx from 'classnames'; 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 { JsonObject, styled, css, t } from '@superset-ui/core';
import { Global } from '@emotion/react'; import { Global } from '@emotion/react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
@ -59,10 +59,8 @@ import {
CLOSED_FILTER_BAR_WIDTH, CLOSED_FILTER_BAR_WIDTH,
FILTER_BAR_HEADER_HEIGHT, FILTER_BAR_HEADER_HEIGHT,
FILTER_BAR_TABS_HEIGHT, FILTER_BAR_TABS_HEIGHT,
HEADER_HEIGHT,
MAIN_HEADER_HEIGHT, MAIN_HEADER_HEIGHT,
OPEN_FILTER_BAR_WIDTH, OPEN_FILTER_BAR_WIDTH,
TABS_HEIGHT,
} from 'src/dashboard/constants'; } from 'src/dashboard/constants';
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils'; import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
import DashboardContainer from './DashboardContainer'; import DashboardContainer from './DashboardContainer';
@ -252,6 +250,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
[dispatch], [dispatch],
); );
const headerRef = React.useRef<HTMLDivElement>(null);
const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID]; const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
const rootChildId = dashboardRoot?.children[0]; const rootChildId = dashboardRoot?.children[0];
const topLevelTabs = const topLevelTabs =
@ -264,10 +263,26 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
uiConfig.hideTitle || uiConfig.hideTitle ||
standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE || standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
isReport; isReport;
const [barTopOffset, setBarTopOffset] = useState(0);
const barTopOffset = useEffect(() => {
(hideDashboardHeader ? 0 : HEADER_HEIGHT) + setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);
(topLevelTabs ? TABS_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 { const {
showDashboard, showDashboard,
@ -364,7 +379,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
</StickyPanel> </StickyPanel>
</FiltersPanel> </FiltersPanel>
)} )}
<StyledHeader> <StyledHeader ref={headerRef}>
{/* @ts-ignore */} {/* @ts-ignore */}
<DragDroppable <DragDroppable
data-test="top-level-tabs" data-test="top-level-tabs"

2
superset-frontend/src/dashboard/constants.ts
View File

@ -35,8 +35,6 @@ export const PLACEHOLDER_DATASOURCE: Datasource = {
}; };
export const MAIN_HEADER_HEIGHT = 53; 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 CLOSED_FILTER_BAR_WIDTH = 32;
export const OPEN_FILTER_BAR_WIDTH = 260; export const OPEN_FILTER_BAR_WIDTH = 260;
export const FILTER_BAR_HEADER_HEIGHT = 80; export const FILTER_BAR_HEADER_HEIGHT = 80;