From bcb43327b1045c1b5bc5a209cf5026f74fc34b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hex=20Caf=C3=A9?=
<157834442+hexcafe@users.noreply.github.com>
Date: Thu, 3 Apr 2025 11:59:11 -0700
Subject: [PATCH] fix: `show_filters` URL parameter is not working (#29422)
Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: Vitor Avila <vitor.avila@preset.io>
---
.../DashboardBuilder.test.tsx | 42 +++++++++++++++++++
.../DashboardBuilder/DashboardBuilder.tsx | 2 +-
.../components/DashboardBuilder/state.ts | 5 ++-
3 files changed, 47 insertions(+), 2 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx
index 8a83e99547..9963369745 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 52af9ae9b2..7694140aa2 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 ec1cc0bc1f..2c45a799f1 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),
--
GitLab