CardView - Filtering: can't set filter in filterBuilder if headerFilter.dataSource is present (DevExpress#29932)

Co-authored-by: Alyar <>

Author: Raushen

e2e/testcafe-devextreme/tests/cardView/headerFilter/common.functional.ts

@@ -1,4 +1,5 @@
 import CardView from 'devextreme-testcafe-models/cardView';
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 import { baseConfig } from './helpers/baseConfig';
@@ -410,3 +411,65 @@ test('The item\'s selection state should be correct after resetting the search',
     },
   });
 });
+
+test('FilterBuilder should work with custom headerFilter data source', async (t) => {
+  const cardView = new CardView('#container');
+  const IS_ANY_OPERATION_ITEM_INDEX = 9;
+  const ADD_CONDITION_ITEM_INDEX = 0;
+
+  await t
+    .click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(3)
+    .click(cardView.getHeaderFilterPopup().getOkButton().element);
+
+  const filterBuilderPopup = await cardView.getFilterPanel().openFilterBuilderPopup(t);
+  const filterBuilder = filterBuilderPopup.getFilterBuilder();
+  await t
+    .click(filterBuilder.getAddButton())
+    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .click(FilterBuilder.getPopupTreeViewNode(ADD_CONDITION_ITEM_INDEX))
+    .click(filterBuilder.getField(0, 'itemOperation').element)
+    .click(FilterBuilder.getPopupTreeViewNode(IS_ANY_OPERATION_ITEM_INDEX))
+    .click(filterBuilder.getField(0, 'itemValue').element)
+    .click(cardView.getHeaderFilterList().getItem(1).element)
+    .click(cardView.getHeaderFilterList().getItem(2).element)
+    .click(cardView.getHeaderFilterPopup().getOkButton().element)
+    .click(filterBuilderPopup.asPopup().getOkButton().element);
+
+  await t
+    .expect(cardView.getCards().count)
+    .eql(2)
+    .expect(cardView.getCard(0).getFieldValueCell('Id').textContent)
+    .eql('2')
+    .expect(cardView.getCard(1).getFieldValueCell('Id').textContent)
+    .eql('3');
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    columns: [
+      {
+        dataField: 'id',
+        headerFilter: {
+          dataSource: [
+            { value: 1, text: '1' },
+            { value: 2, text: '2' },
+            { value: 3, text: '3' },
+          ],
+        },
+      },
+      {
+        dataField: 'title',
+      },
+      {
+        dataField: 'name',
+      },
+      {
+        dataField: 'lastName',
+      },
+    ],
+    filterPanel: { visible: true },
+  });
+});

e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts

@@ -2,6 +2,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Popup from 'devextreme-testcafe-models/popup';
 import Popover from 'devextreme-testcafe-models/popover';
 import Toolbar from 'devextreme-testcafe-models/toolbar/toolbar';
+import { Selector } from 'testcafe';
 import { testScreenshot, isMaterialBased } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
@@ -16,6 +17,9 @@ const dynamicFixture = isMaterialBased()
 dynamicFixture`Popup_toolbar`
   .page(url(__dirname, '../../container.html'));
 
+const COMPONENT_SELECTOR = '#container';
+const CLOSE_BUTTON_SELECTOR = '.dx-closebutton';
+
 [
   { name: 'dxPopup', Class: Popup },
   { name: 'dxPopover', Class: Popover },
@@ -24,7 +28,7 @@ dynamicFixture`Popup_toolbar`
     [true, false].forEach((rtlEnabled) => {
       safeSizeTest(`Extended toolbar should be used in ${name},rtlEnabled=${rtlEnabled},toolbar=${toolbar}`, async (t) => {
         const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-        const instance = new Class('#container');
+        const instance = new Class(COMPONENT_SELECTOR);
 
         if (toolbar === 'top') {
           const topToolbar = new Toolbar(instance.getToolbar());
@@ -34,7 +38,7 @@ dynamicFixture`Popup_toolbar`
           await bottomToolbar.option('overflowMenuVisible', true);
         }
 
-        await t.hover(instance.getCloseButton().element);
+        await t.hover(Selector(CLOSE_BUTTON_SELECTOR));
 
         await testScreenshot(t, takeScreenshot, `${name.replace('dx', '')}_${toolbar}_toolbar_menu,rtlEnabled=${rtlEnabled}.png`);
 
@@ -55,7 +59,7 @@ dynamicFixture`Popup_toolbar`
         rtlEnabled,
         visible: true,
         animation: undefined,
-        target: '#container',
+        target: COMPONENT_SELECTOR,
         hideOnOutsideClick: true,
         toolbarItems: [{
           location: 'before',

packages/devextreme/js/__internal/grids/new/grid_core/filtering/filter_visitors/filter_custom_operations_visitor.ts

@@ -32,6 +32,10 @@ export class FilterCustomOperationsVisitor {
 
           return getColumnByIndexOrName(columns, columnName);
         },
+        /*
+          Note: Root headerFilter options are used because the legacy code handles retrieving
+          options for specific columns on its own
+        */
         getHeaderFilterOptions: (): HeaderFilterRootOptions => this.options.oneWay('headerFilter').peek(),
         headerFilterController: this.headerFilterController,
       };

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/compatibility.ts

@@ -1,16 +1,23 @@
 import type { Column } from '../../columns_controller/types';
+import { DataController } from '../../data_controller/index';
+import { OptionsController } from '../../options_controller/options_controller';
 import { FilterController } from '../filter_controller';
+import { getDataSourceOptions } from './legacy_header_filter';
 import { HeaderFilterViewController } from './view_controller';
 
 export class CompatibilityHeaderFilterController {
   public static dependencies = [
     FilterController,
     HeaderFilterViewController,
+    DataController,
+    OptionsController,
   ] as const;
 
   constructor(
     private readonly realFilterController: FilterController,
     private readonly realHeaderFilterViewController: HeaderFilterViewController,
+    private readonly realDataController: DataController,
+    private readonly options: OptionsController,
   ) {}
 
   public getCustomFilterOperations(): unknown[] {
@@ -36,4 +43,21 @@ export class CompatibilityHeaderFilterController {
   public hideHeaderFilterMenu(): void {
     this.realHeaderFilterViewController.closePopup();
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public getDataSource(column: Column): any {
+    const adapter = this.realDataController.getStoreLoadAdapter();
+    const popupOptions = {
+      column: { ...column },
+      filterType: column.filterType,
+      filterValues: column.filterValues,
+    };
+    /*
+      Note: Root headerFilter options are used because the legacy code handles retrieving
+      options for specific columns on its own
+    */
+    const rootHeaderFilterOptions = this.options.oneWay('headerFilter').peek();
+
+    return getDataSourceOptions(adapter, popupOptions, rootHeaderFilterOptions, null);
+  }
 }

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/view_controller.ts

@@ -43,6 +43,10 @@ export class HeaderFilterViewController {
     isFilterBuilder?: boolean,
   ): void {
     const rootDataSource = this.dataController.getStoreLoadAdapter();
+    /*
+      Note: Root headerFilter options are used because the legacy code handles retrieving
+      options for specific columns on its own
+    */
     const rootHeaderFilterOptions = this.options.oneWay('headerFilter').peek();
     const filterExpression = this.getFilterExpressionWithoutCurrentColumn(column);
     const type = getHeaderFilterListType(column);

packages/testcafe-models/overlay/index.ts

@@ -23,7 +23,8 @@ export default class Overlay extends Widget {
 
   // eslint-disable-next-line class-methods-use-this
   getWrapper(): Selector {
-    return Selector(`.${CLASS.wrapper}`);
+    // NOTE: Returns the last found wrapper if multiple popups opened
+    return Selector(`.${CLASS.wrapper}`).nth(-1);
   }
 
   // eslint-disable-next-line class-methods-use-this

packages/testcafe-models/popup.ts

@@ -18,6 +18,11 @@ const CLASS = {
   navigatorCaption: 'dx-calendar-caption-button',
   viewsWrapper: 'dx-calendar-views-wrapper',
 };
+
+const SELECTORS = {
+  okButton: '[aria-label="OK"]',
+};
+
 export default class Popup extends Overlay {
   public static className = '.dx-popup-wrapper';
 
@@ -51,6 +56,10 @@ export default class Popup extends Overlay {
     return new Button(this.getWrapper().find(`.${CLASS.button}`).nth(index));
   }
 
+  getOkButton(): Button {
+    return new Button(this.getWrapper().find(SELECTORS.okButton));
+  }
+
   getCloseButton(): Button {
     return new Button(this.getWrapper().find(`.${CLASS.closeButton}`));
   }