fix(react-grid): use a column filter operation as a filter selector value

packages/dx-grid-core/src/plugins/table-filter-row/helpers.js

@@ -13,3 +13,14 @@ export const getColumnFilterOperations = (
   || DEFAULT_FILTER_OPERATIONS;
 
 export const isFilterValueEmpty = value => value === undefined || !String(value).length;
+
+export const getSelectedFilterOperation = (
+  filterOperations, columnName, columnFilter, columnFilterOperations,
+) => {
+  if (filterOperations[columnName]) {
+    return filterOperations[columnName];
+  }
+  return columnFilter && columnFilter.operation
+    ? columnFilter.operation
+    : columnFilterOperations[0];
+};

packages/dx-grid-core/src/plugins/table-filter-row/helpers.test.js

@@ -5,6 +5,7 @@ import {
   isFilterTableRow,
   getColumnFilterOperations,
   isFilterValueEmpty,
+  getSelectedFilterOperation,
 } from './helpers';
 
 describe('TableFilterRow Plugin helpers', () => {
@@ -53,4 +54,27 @@ describe('TableFilterRow Plugin helpers', () => {
         .toBeFalsy();
     });
   });
+
+  describe('#getSelectedFilterOperation', () => {
+    it('should get filter operation by column name', () => {
+      const filterOperation = getSelectedFilterOperation({ a: 'contains', b: 'startsWith' }, 'b');
+
+      expect(filterOperation)
+        .toBe('startsWith');
+    });
+
+    it('should use column filter operation if exists', () => {
+      const filterOperation = getSelectedFilterOperation({}, 'a', { operation: 'contains' });
+
+      expect(filterOperation)
+        .toBe('contains');
+    });
+
+    it('should use the first column filter operation', () => {
+      const filterOperation = getSelectedFilterOperation({}, 'a', null, ['endsWith', 'contains']);
+
+      expect(filterOperation)
+        .toBe('endsWith');
+    });
+  });
 });

packages/dx-react-grid/src/plugins/table-filter-row.jsx

@@ -11,6 +11,7 @@ import {
   isFilterTableRow,
   getColumnFilterOperations,
   isFilterValueEmpty,
+  getSelectedFilterOperation,
   TABLE_FILTER_TYPE,
 } from '@devexpress/dx-grid-core';
 
@@ -85,8 +86,9 @@ export class TableFilterRow extends React.PureComponent {
                 const columnFilterOperations = getColumnFilterOperations(
                   getAvailableFilterOperations, columnName,
                 );
-                const selectedFilterOperation = filterOperations[columnName]
-                  || columnFilterOperations[0];
+                const selectedFilterOperation = getSelectedFilterOperation(
+                  filterOperations, columnName, filter, columnFilterOperations,
+                );
                 const handleFilterOperationChange = (value) => {
                   this.setState({
                     filterOperations: {

packages/dx-react-grid/src/plugins/table-filter-row.test.jsx

@@ -10,6 +10,7 @@ import {
   isFilterTableRow,
   getColumnFilterOperations,
   isFilterValueEmpty,
+  getSelectedFilterOperation,
 } from '@devexpress/dx-grid-core';
 import { TableFilterRow } from './table-filter-row';
 
@@ -20,6 +21,7 @@ jest.mock('@devexpress/dx-grid-core', () => ({
   getColumnFilterConfig: jest.fn(),
   getColumnFilterOperations: jest.fn(),
   isFilterValueEmpty: jest.fn(),
+  getSelectedFilterOperation: jest.fn(),
 }));
 
 const defaultDeps = {
@@ -74,6 +76,7 @@ describe('TableFilterRow', () => {
     isFilterTableRow.mockImplementation(() => false);
     getColumnFilterOperations.mockImplementation(() => []);
     isFilterValueEmpty.mockImplementation(() => false);
+    getSelectedFilterOperation.mockImplementation(() => 'filterOperation');
   });
   afterEach(() => {
     jest.resetAllMocks();
@@ -296,8 +299,12 @@ describe('TableFilterRow', () => {
       .not.toHaveBeenCalled();
   });
 
-  it('should use the first available operation as the FilterSelector value by default', () => {
-    getColumnFilterOperations.mockImplementation(() => ['a', 'b', 'c']);
+  it('should calculate the FilterSelector value', () => {
+    const filter = { columnName: 'a', value: 'b', operation: 'startsWith' };
+    const columnFilterOperations = ['a', 'b', 'c'];
+    getColumnFilterConfig.mockImplementation(() => filter);
+    getColumnFilterOperations.mockImplementation(() => columnFilterOperations);
+
     const tree = mount((
       <PluginHost>
         {pluginDepsToComponents(defaultDeps)}
@@ -307,8 +314,17 @@ describe('TableFilterRow', () => {
         />
       </PluginHost>
     ));
+    const tableFilterRow = tree.find(TableFilterRow);
+    const filterSelectorValue = tree.find(defaultProps.filterSelectorComponent).prop('value');
 
-    expect(tree.find(defaultProps.filterSelectorComponent).prop('value'))
-      .toBe('a');
+    expect(getSelectedFilterOperation)
+      .toBeCalledWith(
+        tableFilterRow.instance().state.filterOperations,
+        defaultDeps.template.tableCell.tableColumn.column.name,
+        filter,
+        columnFilterOperations,
+      );
+    expect(filterSelectorValue)
+      .toBe('filterOperation');
   });
 });