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>

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();
+  });
 });

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 +

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),