iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Filter bar not occupying 100% height when filter sets FF unset (#15228)

This commit is contained in:
Michael S. Molina 2021-06-17 10:38:14 -03:00 committed by GitHub
parent 388eb01f06
commit ea8507b4e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
import { DashboardLayout, RootState } from 'src/dashboard/types';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
import { useElementOnScreen } from 'src/common/hooks/useElementOnScreen';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import {
deleteTopLevelTabs,
handleComponentDrop,
@ -55,7 +56,8 @@ const TABS_HEIGHT = 50;
const HEADER_HEIGHT = 72;
const CLOSED_FILTER_BAR_WIDTH = 32;
const OPEN_FILTER_BAR_WIDTH = 260;
const FILTER_BAR_HEADER_HEIGHT = 128;
const FILTER_BAR_HEADER_HEIGHT = 80;
const FILTER_BAR_TABS_HEIGHT = 46;
type DashboardBuilderProps = {};
@ -192,7 +194,16 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const [containerRef, isSticky] = useElementOnScreen<HTMLDivElement>({
threshold: [1],
});
const offset = FILTER_BAR_HEADER_HEIGHT + (isSticky ? 0 : MAIN_HEADER_HEIGHT);
const filterSetEnabled = isFeatureEnabled(
FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET,
);
const offset =
FILTER_BAR_HEADER_HEIGHT +
(isSticky ? 0 : MAIN_HEADER_HEIGHT) +
(filterSetEnabled ? FILTER_BAR_TABS_HEIGHT : 0);
const filterBarHeight = `calc(100vh - ${offset}px)`;
const filterBarOffset = dashboardFiltersOpen ? 0 : barTopOffset + 20;

14
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
View File

@ -71,7 +71,7 @@ const Bar = styled.div<{ width: number }>`
left: 0;
flex-direction: column;
flex-grow: 1;
width: ${({ width }) => width}px; // arbitrary...
width: ${({ width }) => width}px;
background: ${({ theme }) => theme.colors.grayscale.light5};
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
@ -293,11 +293,13 @@ const FilterBar: React.FC<FiltersBarProps> = ({
</Tabs.TabPane>
</StyledTabs>
) : (
<FilterControls
dataMaskSelected={dataMaskSelected}
directPathToChild={directPathToChild}
onFilterSelectionChange={handleFilterSelectionChange}
/>
<div css={{ overflow: 'auto', height }}>
<FilterControls
dataMaskSelected={dataMaskSelected}
directPathToChild={directPathToChild}
onFilterSelectionChange={handleFilterSelectionChange}
/>
</div>
)}
</Bar>
</BarWrapper>