fix: Hide FilterBar for Reports (#23543)

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

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

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

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

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/types.ts

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