fix: Hide FilterBar for Reports (#23543)

This commit is contained in:
Geido 2023-04-01 10:45:50 +02:00 committed by GitHub
parent b52efe0599
commit a18e33b3bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 39 deletions

View File

@ -583,7 +583,10 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
{!hideDashboardHeader && <DashboardHeader />} {!hideDashboardHeader && <DashboardHeader />}
{showFilterBar && {showFilterBar &&
filterBarOrientation === FilterBarOrientation.HORIZONTAL && ( filterBarOrientation === FilterBarOrientation.HORIZONTAL && (
<FilterBar orientation={FilterBarOrientation.HORIZONTAL} /> <FilterBar
orientation={FilterBarOrientation.HORIZONTAL}
hidden={isReport}
/>
)} )}
{dropIndicatorProps && <div {...dropIndicatorProps} />} {dropIndicatorProps && <div {...dropIndicatorProps} />}
{!isReport && topLevelTabs && !uiConfig.hideNav && ( {!isReport && topLevelTabs && !uiConfig.hideNav && (
@ -655,18 +658,17 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
> >
<StickyPanel ref={containerRef} width={filterBarWidth}> <StickyPanel ref={containerRef} width={filterBarWidth}>
<ErrorBoundary> <ErrorBoundary>
{!isReport && ( <FilterBar
<FilterBar orientation={FilterBarOrientation.VERTICAL}
orientation={FilterBarOrientation.VERTICAL} verticalConfig={{
verticalConfig={{ filtersOpen: dashboardFiltersOpen,
filtersOpen: dashboardFiltersOpen, toggleFiltersBar: toggleDashboardFiltersOpen,
toggleFiltersBar: toggleDashboardFiltersOpen, width: filterBarWidth,
width: filterBarWidth, height: filterBarHeight,
height: filterBarHeight, offset: filterBarOffset,
offset: filterBarOffset, }}
}} hidden={isReport}
/> />
)}
</ErrorBoundary> </ErrorBoundary>
</StickyPanel> </StickyPanel>
</FiltersPanel> </FiltersPanel>

View File

@ -28,6 +28,7 @@ import {
SLOW_DEBOUNCE, SLOW_DEBOUNCE,
isNativeFilter, isNativeFilter,
usePrevious, usePrevious,
styled,
} from '@superset-ui/core'; } from '@superset-ui/core';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { updateDataMask, clearDataMask } from 'src/dataMask/actions'; import { updateDataMask, clearDataMask } from 'src/dataMask/actions';
@ -51,6 +52,10 @@ import ActionButtons from './ActionButtons';
import Horizontal from './Horizontal'; import Horizontal from './Horizontal';
import Vertical from './Vertical'; import Vertical from './Vertical';
const HiddenFilterBar = styled.div`
display: none;
`;
const EXCLUDED_URL_PARAMS: string[] = [ const EXCLUDED_URL_PARAMS: string[] = [
URL_PARAMS.nativeFilters.name, URL_PARAMS.nativeFilters.name,
URL_PARAMS.permalinkKey.name, URL_PARAMS.permalinkKey.name,
@ -113,6 +118,7 @@ export const FilterBarScrollContext = createContext(false);
const FilterBar: React.FC<FiltersBarProps> = ({ const FilterBar: React.FC<FiltersBarProps> = ({
orientation = FilterBarOrientation.VERTICAL, orientation = FilterBarOrientation.VERTICAL,
verticalConfig, verticalConfig,
hidden = false,
}) => { }) => {
const history = useHistory(); const history = useHistory();
const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask(); const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
@ -247,31 +253,38 @@ const FilterBar: React.FC<FiltersBarProps> = ({
/> />
); );
return orientation === FilterBarOrientation.HORIZONTAL ? ( const filterBarComponent =
<Horizontal orientation === FilterBarOrientation.HORIZONTAL ? (
actions={actions} <Horizontal
canEdit={canEdit} actions={actions}
dashboardId={dashboardId} canEdit={canEdit}
dataMaskSelected={dataMaskSelected} dashboardId={dashboardId}
filterValues={filterValues} dataMaskSelected={dataMaskSelected}
isInitialized={isInitialized} filterValues={filterValues}
onSelectionChange={handleFilterSelectionChange} isInitialized={isInitialized}
/> onSelectionChange={handleFilterSelectionChange}
) : verticalConfig ? ( />
<Vertical ) : verticalConfig ? (
actions={actions} <Vertical
canEdit={canEdit} actions={actions}
dataMaskSelected={dataMaskSelected} canEdit={canEdit}
filtersOpen={verticalConfig.filtersOpen} dataMaskSelected={dataMaskSelected}
filterValues={filterValues} filtersOpen={verticalConfig.filtersOpen}
isInitialized={isInitialized} filterValues={filterValues}
isDisabled={isApplyDisabled} isInitialized={isInitialized}
height={verticalConfig.height} isDisabled={isApplyDisabled}
offset={verticalConfig.offset} height={verticalConfig.height}
onSelectionChange={handleFilterSelectionChange} offset={verticalConfig.offset}
toggleFiltersBar={verticalConfig.toggleFiltersBar} onSelectionChange={handleFilterSelectionChange}
width={verticalConfig.width} toggleFiltersBar={verticalConfig.toggleFiltersBar}
/> width={verticalConfig.width}
) : null; />
) : null;
return hidden ? (
<HiddenFilterBar>{filterBarComponent}</HiddenFilterBar>
) : (
filterBarComponent
);
}; };
export default React.memo(FilterBar); export default React.memo(FilterBar);

View File

@ -47,6 +47,7 @@ interface VerticalBarConfig {
} }
export interface FiltersBarProps { export interface FiltersBarProps {
hidden?: boolean;
orientation: FilterBarOrientation; orientation: FilterBarOrientation;
verticalConfig?: VerticalBarConfig; verticalConfig?: VerticalBarConfig;
} }