feat: Horizontal filter bar states (#22064)

Co-authored-by: Michael S. Molina <[email protected]>
apache · Nov 18, 2022 · 25114a7 · 25114a7
1 parent 896c832
commit 25114a7
Show file tree

Hide file tree

Showing 29 changed files with 907 additions and 451 deletions.
diff --git a/superset-frontend/spec/fixtures/mockDashboardInfo.js b/superset-frontend/spec/fixtures/mockDashboardInfo.js
@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FilterBarOrientation } from 'src/dashboard/types';
+
 export default {
   id: 1234,
   slug: 'dashboardSlug',
@@ -36,4 +38,5 @@ export default {
     flash_messages: [],
     conf: { SUPERSET_WEBSERVER_TIMEOUT: 60 },
   },
+  filterBarOrientation: FilterBarOrientation.VERTICAL,
 };
diff --git a/superset-frontend/spec/fixtures/mockStore.js b/superset-frontend/spec/fixtures/mockStore.js
@@ -71,60 +71,64 @@ export const mockStoreWithChartsInTabsAndRoot =
 export const sliceIdWithAppliedFilter = sliceId + 1;
 export const sliceIdWithRejectedFilter = sliceId + 2;
 
+export const stateWithFilters = {
+  ...mockState,
+  dashboardFilters,
+  dataMask: dataMaskWith2Filters,
+  charts: {
+    ...mockState.charts,
+    [sliceIdWithAppliedFilter]: {
+      ...mockState.charts[sliceId],
+      queryResponse: {
+        status: 'success',
+        applied_filters: [{ column: 'region' }],
+        rejected_filters: [],
+      },
+    },
+    [sliceIdWithRejectedFilter]: {
+      ...mockState.charts[sliceId],
+      queryResponse: {
+        status: 'success',
+        applied_filters: [],
+        rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
+      },
+    },
+  },
+};
+
 // has one chart with a filter that has been applied,
 // one chart with a filter that has been rejected,
 // and one chart with no filters set.
 export const getMockStoreWithFilters = () =>
-  createStore(rootReducer, {
-    ...mockState,
-    dashboardFilters,
-    dataMask: dataMaskWith2Filters,
-    charts: {
-      ...mockState.charts,
-      [sliceIdWithAppliedFilter]: {
-        ...mockState.charts[sliceId],
-        queryResponse: {
-          status: 'success',
-          applied_filters: [{ column: 'region' }],
-          rejected_filters: [],
-        },
+  createStore(rootReducer, stateWithFilters);
+
+export const stateWithNativeFilters = {
+  ...mockState,
+  nativeFilters,
+  dataMask: dataMaskWith2Filters,
+  charts: {
+    ...mockState.charts,
+    [sliceIdWithAppliedFilter]: {
+      ...mockState.charts[sliceId],
+      queryResponse: {
+        status: 'success',
+        applied_filters: [{ column: 'region' }],
+        rejected_filters: [],
       },
-      [sliceIdWithRejectedFilter]: {
-        ...mockState.charts[sliceId],
-        queryResponse: {
-          status: 'success',
-          applied_filters: [],
-          rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
-        },
+    },
+    [sliceIdWithRejectedFilter]: {
+      ...mockState.charts[sliceId],
+      queryResponse: {
+        status: 'success',
+        applied_filters: [],
+        rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
       },
     },
-  });
+  },
+};
 
 export const getMockStoreWithNativeFilters = () =>
-  createStore(rootReducer, {
-    ...mockState,
-    nativeFilters,
-    dataMask: dataMaskWith2Filters,
-    charts: {
-      ...mockState.charts,
-      [sliceIdWithAppliedFilter]: {
-        ...mockState.charts[sliceId],
-        queryResponse: {
-          status: 'success',
-          applied_filters: [{ column: 'region' }],
-          rejected_filters: [],
-        },
-      },
-      [sliceIdWithRejectedFilter]: {
-        ...mockState.charts[sliceId],
-        queryResponse: {
-          status: 'success',
-          applied_filters: [],
-          rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
-        },
-      },
-    },
-  });
+  createStore(rootReducer, stateWithNativeFilters);
 
 export const stateWithoutNativeFilters = {
   ...mockState,

diff --git a/superset-frontend/src/components/DropdownSelectableIcon/index.tsx b/superset-frontend/src/components/DropdownSelectableIcon/index.tsx
@@ -43,6 +43,7 @@ const StyledDropdownButton = styled(
     height: unset;
     padding: 0;
     border: none;
+    width: auto !important;
 
     .anticon {
       line-height: 0;

diff --git a/superset-frontend/src/dashboard/actions/dashboardInfo.ts b/superset-frontend/src/dashboard/actions/dashboardInfo.ts
@@ -23,7 +23,7 @@ import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import {
   DashboardInfo,
-  FilterBarLocation,
+  FilterBarOrientation,
   RootState,
 } from 'src/dashboard/types';
 import { ChartConfiguration } from 'src/dashboard/reducers/types';
@@ -120,16 +120,18 @@ export const setChartConfiguration =
     }
   };
 
-export const SET_FILTER_BAR_LOCATION = 'SET_FILTER_BAR_LOCATION';
-export interface SetFilterBarLocation {
-  type: typeof SET_FILTER_BAR_LOCATION;
-  filterBarLocation: FilterBarLocation;
+export const SET_FILTER_BAR_ORIENTATION = 'SET_FILTER_BAR_ORIENTATION';
+export interface SetFilterBarOrientation {
+  type: typeof SET_FILTER_BAR_ORIENTATION;
+  filterBarOrientation: FilterBarOrientation;
 }
-export function setFilterBarLocation(filterBarLocation: FilterBarLocation) {
-  return { type: SET_FILTER_BAR_LOCATION, filterBarLocation };
+export function setFilterBarOrientation(
+  filterBarOrientation: FilterBarOrientation,
+) {
+  return { type: SET_FILTER_BAR_ORIENTATION, filterBarOrientation };
 }
 
-export function saveFilterBarLocation(location: FilterBarLocation) {
+export function saveFilterBarOrientation(orientation: FilterBarOrientation) {
   return async (dispatch: Dispatch, getState: () => RootState) => {
     const { id, metadata } = getState().dashboardInfo;
     const updateDashboard = makeApi<
@@ -143,15 +145,15 @@ export function saveFilterBarLocation(location: FilterBarLocation) {
       const response = await updateDashboard({
         json_metadata: JSON.stringify({
           ...metadata,
-          filter_bar_location: location,
+          filter_bar_orientation: orientation,
         }),
       });
       const updatedDashboard = response.result;
       const lastModifiedTime = response.last_modified_time;
       if (updatedDashboard.json_metadata) {
         const metadata = JSON.parse(updatedDashboard.json_metadata);
-        if (metadata.filter_bar_location) {
-          dispatch(setFilterBarLocation(metadata.filter_bar_location));
+        if (metadata.filter_bar_orientation) {
+          dispatch(setFilterBarOrientation(metadata.filter_bar_orientation));
         }
       }
       if (lastModifiedTime) {

diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -57,7 +57,7 @@ import getNativeFilterConfig from '../util/filterboxMigrationHelper';
 import { updateColorSchema } from './dashboardInfo';
 import { getChartIdsInFilterScope } from '../util/getChartIdsInFilterScope';
 import updateComponentParentsList from '../util/updateComponentParentsList';
-import { FilterBarLocation } from '../types';
+import { FilterBarOrientation } from '../types';
 
 export const HYDRATE_DASHBOARD = 'HYDRATE_DASHBOARD';
 
@@ -429,8 +429,8 @@ export const hydrateDashboard =
             flash_messages: common?.flash_messages,
             conf: common?.conf,
           },
-          filterBarLocation:
-            metadata.filter_bar_location ?? FilterBarLocation.VERTICAL,
+          filterBarOrientation:
+            metadata.filter_bar_orientation ?? FilterBarOrientation.VERTICAL,
         },
         dataMask,
         dashboardFilters,

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -40,7 +40,11 @@ import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
 import getDirectPathToTabIndex from 'src/dashboard/util/getDirectPathToTabIndex';
 import { URL_PARAMS } from 'src/constants';
 import { getUrlParam } from 'src/utils/urlUtils';
-import { DashboardLayout, RootState } from 'src/dashboard/types';
+import {
+  DashboardLayout,
+  FilterBarOrientation,
+  RootState,
+} from 'src/dashboard/types';
 import {
   setDirectPathToChild,
   setEditMode,
@@ -241,6 +245,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const fullSizeChartId = useSelector<RootState, number | null>(
     state => state.dashboardState.fullSizeChartId,
   );
+  const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
+    ({ dashboardInfo }) => dashboardInfo.filterBarOrientation,
+  );
 
   const handleChangeTab = useCallback(
     ({ pathToTabIndex }: { pathToTabIndex: string[] }) => {
@@ -277,6 +284,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     uiConfig.hideTitle ||
     standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
     isReport;
+
   const [barTopOffset, setBarTopOffset] = useState(0);
 
   useEffect(() => {
@@ -312,6 +320,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const filterSetEnabled = isFeatureEnabled(
     FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET,
   );
+  const showFilterBar = nativeFiltersEnabled && !editMode;
 
   const offset =
     FILTER_BAR_HEADER_HEIGHT +
@@ -354,6 +363,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     ({ dropIndicatorProps }: { dropIndicatorProps: JsonObject }) => (
       <div>
         {!hideDashboardHeader && <DashboardHeader />}
+        {showFilterBar &&
+          filterBarOrientation === FilterBarOrientation.HORIZONTAL && (
+            <FilterBar
+              directPathToChild={directPathToChild}
+              orientation={FilterBarOrientation.HORIZONTAL}
+            />
+          )}
         {dropIndicatorProps && <div {...dropIndicatorProps} />}
         {!isReport && topLevelTabs && !uiConfig.hideNav && (
           <WithPopoverMenu
@@ -382,6 +398,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       </div>
     ),
     [
+      directPathToChild,
+      nativeFiltersEnabled,
+      filterBarOrientation,
       editMode,
       handleChangeTab,
       handleDeleteTopLevelTabs,
@@ -394,7 +413,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
 
   return (
     <StyledDiv>
-      {nativeFiltersEnabled && !editMode && (
+      {showFilterBar && filterBarOrientation === FilterBarOrientation.VERTICAL && (
         <>
           <ResizableSidebar
             id={`dashboard:${dashboardId}`}
@@ -415,12 +434,15 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
                   <StickyPanel ref={containerRef} width={filterBarWidth}>
                     <ErrorBoundary>
                       <FilterBar
-                        filtersOpen={dashboardFiltersOpen}
-                        toggleFiltersBar={toggleDashboardFiltersOpen}
                         directPathToChild={directPathToChild}
-                        width={filterBarWidth}
-                        height={filterBarHeight}
-                        offset={filterBarOffset}
+                        orientation={FilterBarOrientation.VERTICAL}
+                        verticalConfig={{
+                          filtersOpen: dashboardFiltersOpen,
+                          toggleFiltersBar: toggleDashboardFiltersOpen,
+                          width: filterBarWidth,
+                          height: filterBarHeight,
+                          offset: filterBarOffset,
+                        }}
                       />
                     </ErrorBoundary>
                   </StickyPanel>

diff --git a/...end/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx b/...end/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'spec/helpers/testing-library';
-import { ActionButtons } from './index';
+import ActionButtons from './index';
 
 const createProps = () => ({
   onApply: jest.fn(),