diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx index 8a83e995475b21aa000cb5ca5806dcefdb23b06c..9963369745c5c2924e14f5e6cf824a2ffcba969e 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx @@ -32,6 +32,7 @@ import { import { storeWithState } from 'spec/fixtures/mockStore'; import mockState from 'spec/fixtures/mockState'; import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants'; +import * as useNativeFiltersModule from './state'; fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {}); fetchMock.put('glob:*/api/v1/dashboard/*', {}); @@ -262,4 +263,45 @@ describe('DashboardBuilder', () => { const filterbar = getByTestId('dashboard-filters-panel'); expect(filterbar).toHaveStyleRule('width', `${expectedValue}px`); }); + + it('should not render the filter bar when nativeFiltersEnabled is false', () => { + jest.spyOn(useNativeFiltersModule, 'useNativeFilters').mockReturnValue({ + showDashboard: true, + missingInitialFilters: [], + dashboardFiltersOpen: true, + toggleDashboardFiltersOpen: jest.fn(), + nativeFiltersEnabled: false, + }); + const { queryByTestId } = setup(); + + expect(queryByTestId('dashboard-filters-panel')).not.toBeInTheDocument(); + }); + + it('should render the filter bar when nativeFiltersEnabled is true and not in edit mode', () => { + jest.spyOn(useNativeFiltersModule, 'useNativeFilters').mockReturnValue({ + showDashboard: true, + missingInitialFilters: [], + dashboardFiltersOpen: true, + toggleDashboardFiltersOpen: jest.fn(), + nativeFiltersEnabled: true, + }); + const { queryByTestId } = setup(); + + expect(queryByTestId('dashboard-filters-panel')).toBeInTheDocument(); + }); + + it('should not render the filter bar when in edit mode even if nativeFiltersEnabled is true', () => { + jest.spyOn(useNativeFiltersModule, 'useNativeFilters').mockReturnValue({ + showDashboard: true, + missingInitialFilters: [], + dashboardFiltersOpen: true, + toggleDashboardFiltersOpen: jest.fn(), + nativeFiltersEnabled: true, + }); + const { queryByTestId } = setup({ + dashboardState: { ...mockState.dashboardState, editMode: true }, + }); + + expect(queryByTestId('dashboard-filters-panel')).not.toBeInTheDocument(); + }); }); diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index 52af9ae9b2b2e1576e4425a802d80fc9d4f9da69..7694140aa214ea11810368ca17cfa0427771b930 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -467,7 +467,7 @@ const DashboardBuilder = () => { ELEMENT_ON_SCREEN_OPTIONS, ); - const showFilterBar = !editMode; + const showFilterBar = !editMode && nativeFiltersEnabled; const offset = FILTER_BAR_HEADER_HEIGHT + diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts index ec1cc0bc1f0f81e4a527582a85c16b53527d0497..2c45a799f147a340ef9c48ce9550b87d7eb9357e 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts @@ -29,6 +29,9 @@ import { // eslint-disable-next-line import/prefer-default-export export const useNativeFilters = () => { const [isInitialized, setIsInitialized] = useState(false); + const showNativeFilters = useSelector<RootState, boolean>( + state => getUrlParam(URL_PARAMS.showFilters) ?? true, + ); const canEdit = useSelector<RootState, boolean>( ({ dashboardInfo }) => dashboardInfo.dash_edit_perm, ); @@ -41,7 +44,7 @@ export const useNativeFilters = () => { ); const nativeFiltersEnabled = - canEdit || (!canEdit && filterValues.length !== 0); + showNativeFilters && (canEdit || (!canEdit && filterValues.length !== 0)); const requiredFirstFilter = useMemo( () => filterValues.filter(filter => filter.requiredFirst),