feat(flag flip): Setting Horizontal Filters to True by default. (#32317)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

RESOURCES/FEATURE_FLAGS.md

@@ -49,7 +49,6 @@ These features are **finished** but currently being tested. They are usable, but
 - ENABLE_SUPERSET_META_DB: [(docs)](https://superset.apache.org/docs/configuration/databases/#querying-across-databases)
 - ESTIMATE_QUERY_COST
 - GLOBAL_ASYNC_QUERIES [(docs)](https://github.com/apache/superset/blob/master/CONTRIBUTING.md#async-chart-queries)
-- HORIZONTAL_FILTER_BAR
 - IMPERSONATE_WITH_EMAIL_PREFIX
 - PLAYWRIGHT_REPORTS_AND_THUMBNAILS
 - RLS_IN_SQLLAB

UPDATING.md

@@ -24,6 +24,7 @@ assists people when migrating to a new version.
 
 ## Next
 
+- [32317](https://github.com/apache/superset/pull/32317) The horizontal filter bar feature is now out of testing/beta development and its feature flag `HORIZONTAL_FILTER_BAR` has been removed.
 - [31976](https://github.com/apache/superset/pull/31976) Removed the `DISABLE_LEGACY_DATASOURCE_EDITOR` feature flag. The previous value of the feature flag was `True` and now the feature is permanently removed.
 - [31959](https://github.com/apache/superset/pull/32000) Removes CSV_UPLOAD_MAX_SIZE config, use your web server to control file upload size.
 - [31959](https://github.com/apache/superset/pull/31959) Removes the following endpoints from data uploads: `/api/v1/database/<id>/<file type>_upload` and `/api/v1/database/<file type>_metadata`, in favour of new one (Details on the PR). And simplifies permissions.

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -46,7 +46,6 @@ export enum FeatureFlag {
   EscapeMarkdownHtml = 'ESCAPE_MARKDOWN_HTML',
   EstimateQueryCost = 'ESTIMATE_QUERY_COST',
   GlobalAsyncQueries = 'GLOBAL_ASYNC_QUERIES',
-  HorizontalFilterBar = 'HORIZONTAL_FILTER_BAR',
   ListviewsDefaultCardView = 'LISTVIEWS_DEFAULT_CARD_VIEW',
   ScheduledQueries = 'SCHEDULED_QUERIES',
   SqllabBackendPersistence = 'SQLLAB_BACKEND_PERSISTENCE',

superset-frontend/src/dashboard/actions/hydrate.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 /* eslint-disable camelcase */
-import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
 import { chart } from 'src/components/Chart/chartReducer';
 import { initSliceEntities } from 'src/dashboard/reducers/sliceEntities';
 import { getInitialState as getInitialNativeFilterState } from 'src/dashboard/reducers/nativeFilters';
@@ -279,9 +278,7 @@ export const hydrateDashboard =
             conf: common?.conf,
           },
           filterBarOrientation:
-            (isFeatureEnabled(FeatureFlag.HorizontalFilterBar) &&
-              metadata.filter_bar_orientation) ||
-            FilterBarOrientation.Vertical,
+            metadata.filter_bar_orientation || FilterBarOrientation.Vertical,
           crossFiltersEnabled,
         },
         dataMask,

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

@@ -22,8 +22,6 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   addAlpha,
   css,
-  isFeatureEnabled,
-  FeatureFlag,
   JsonObject,
   styled,
   t,
@@ -396,10 +394,7 @@ const DashboardBuilder = () => {
     state => state.dashboardState.fullSizeChartId,
   );
   const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
-    ({ dashboardInfo }) =>
-      isFeatureEnabled(FeatureFlag.HorizontalFilterBar)
-        ? dashboardInfo.filterBarOrientation
-        : FilterBarOrientation.Vertical,
+    ({ dashboardInfo }) => dashboardInfo.filterBarOrientation,
   );
 
   const handleChangeTab = useCallback(

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx

@@ -23,7 +23,6 @@ import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'spec/helpers/testing-library';
 import { DashboardInfo, FilterBarOrientation } from 'src/dashboard/types';
 import * as mockedMessageActions from 'src/components/MessageToasts/actions';
-import { FeatureFlag } from '@superset-ui/core';
 import FilterBarSettings from '.';
 
 const initialState: { dashboardInfo: DashboardInfo } = {
@@ -76,20 +75,12 @@ beforeEach(() => {
   fetchMock.restore();
 });
 
-test('Dropdown trigger renders with FF HORIZONTAL_FILTER_BAR on', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
+test('Dropdown trigger renders', async () => {
   await setup();
   expect(screen.getByLabelText('gear')).toBeVisible();
 });
 
 test('Dropdown trigger renders with dashboard edit permissions', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   await setup({
     dash_edit_perm: true,
   });
@@ -97,10 +88,6 @@ test('Dropdown trigger renders with dashboard edit permissions', async () => {
 });
 
 test('Dropdown trigger does not render without dashboard edit permissions', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   await setup({
     dash_edit_perm: false,
   });
@@ -131,10 +118,6 @@ test('Can enable/disable cross-filtering', async () => {
 });
 
 test('Popover opens with "Vertical" selected', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   await setup();
   userEvent.click(screen.getByLabelText('gear'));
   userEvent.hover(screen.getByText('Orientation of filter bar'));
@@ -146,10 +129,6 @@ test('Popover opens with "Vertical" selected', async () => {
 });
 
 test('Popover opens with "Horizontal" selected', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   await setup({ filterBarOrientation: FilterBarOrientation.Horizontal });
   userEvent.click(screen.getByLabelText('gear'));
   userEvent.hover(screen.getByText('Orientation of filter bar'));
@@ -161,10 +140,6 @@ test('Popover opens with "Horizontal" selected', async () => {
 });
 
 test('On selection change, send request and update checked value', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   fetchMock.put('glob:*/api/v1/dashboard/1', {
     result: {
       json_metadata: JSON.stringify({
@@ -218,10 +193,6 @@ test('On selection change, send request and update checked value', async () => {
 });
 
 test('On failed request, restore previous selection', async () => {
-  // @ts-ignore
-  global.featureFlags = {
-    [FeatureFlag.HorizontalFilterBar]: true,
-  };
   fetchMock.put('glob:*/api/v1/dashboard/1', 400);
 
   const dangerToastSpy = jest.spyOn(mockedMessageActions, 'addDangerToast');

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

@@ -19,13 +19,7 @@
 
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  FeatureFlag,
-  isFeatureEnabled,
-  styled,
-  t,
-  useTheme,
-} from '@superset-ui/core';
+import { styled, t, useTheme } from '@superset-ui/core';
 import { MenuProps } from 'src/components/Menu';
 import { FilterBarOrientation, RootState } from 'src/dashboard/types';
 import {
@@ -96,8 +90,6 @@ const FilterBarSettings = () => {
   const dashboardId = useSelector<RootState, number>(
     ({ dashboardInfo }) => dashboardInfo.id,
   );
-  const canSetHorizontalFilterBar =
-    canEdit && isFeatureEnabled(FeatureFlag.HorizontalFilterBar);
 
   const [openScopingModal, scopingModal] = useCrossFiltersScopingModal();
 
@@ -193,7 +185,7 @@ const FilterBarSettings = () => {
           </FilterConfigurationLink>
         ),
       });
-      if (canSetHorizontalFilterBar) {
+      if (canEdit) {
         items.push({ type: 'divider' });
       }
     }
@@ -206,11 +198,9 @@ const FilterBarSettings = () => {
         key: CROSS_FILTERS_SCOPING_MENU_KEY,
         label: t('Cross-filtering scoping'),
       });
-      if (canSetHorizontalFilterBar) {
-        items.push({ type: 'divider' });
-      }
+      items.push({ type: 'divider' });
     }
-    if (canSetHorizontalFilterBar) {
+    if (canEdit) {
       items.push({
         key: 'placement',
         label: t('Orientation of filter bar'),
@@ -243,7 +233,6 @@ const FilterBarSettings = () => {
   }, [
     selectedFilterBarOrientation,
     canEdit,
-    canSetHorizontalFilterBar,
     crossFiltersMenuItem,
     dashboardId,
     filterValues,

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

@@ -34,8 +34,6 @@ import {
   css,
   SupersetTheme,
   t,
-  isFeatureEnabled,
-  FeatureFlag,
   isNativeFilterWithDataMask,
 } from '@superset-ui/core';
 import {
@@ -73,10 +71,7 @@ const FilterControls: FC<FilterControlsProps> = ({
   onFilterSelectionChange,
 }) => {
   const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
-    ({ dashboardInfo }) =>
-      isFeatureEnabled(FeatureFlag.HorizontalFilterBar)
-        ? dashboardInfo.filterBarOrientation
-        : FilterBarOrientation.Vertical,
+    ({ dashboardInfo }) => dashboardInfo.filterBarOrientation,
   );
 
   const { outlinedFilterId, lastUpdated } = useFilterOutlined();

superset/config.py

@@ -527,7 +527,6 @@ DEFAULT_FEATURE_FLAGS: dict[str, bool] = {
     "DRILL_TO_DETAIL": True,  # deprecated
     "DRILL_BY": True,
     "DATAPANEL_CLOSED_BY_DEFAULT": False,
-    "HORIZONTAL_FILTER_BAR": False,
     # The feature is off by default, and currently only supported in Presto and Postgres,  # noqa: E501
     # and Bigquery.
     # It also needs to be enabled on a per-database basis, by adding the key/value pair

tests/integration_tests/superset_test_config.py

@@ -73,7 +73,6 @@ FEATURE_FLAGS = {
     "AVOID_COLORS_COLLISION": True,
     "DRILL_TO_DETAIL": True,
     "DRILL_BY": True,
-    "HORIZONTAL_FILTER_BAR": True,
 }
 
 WEBDRIVER_BASEURL = "http://0.0.0.0:8081/"