[Discover] Fix adding/removing a filter for a scripted field in Docum…

…ent Explorer view (elastic#130895)
kertal · May 24, 2022 · d0e1175 · d0e1175
1 parent 53c697a
commit d0e1175
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx
@@ -48,7 +48,11 @@ describe('Discover cell actions ', function () {
     );
     const button = findTestSubject(component, 'filterForButton');
     await button.simulate('click');
-    expect(contextMock.onFilter).toHaveBeenCalledWith('extension', 'jpg', '+');
+    expect(contextMock.onFilter).toHaveBeenCalledWith(
+      indexPatternMock.fields.getByName('extension'),
+      'jpg',
+      '+'
+    );
   });
   it('triggers filter function when FilterOutBtn is clicked', async () => {
     const contextMock = {
@@ -76,6 +80,10 @@ describe('Discover cell actions ', function () {
     );
     const button = findTestSubject(component, 'filterOutButton');
     await button.simulate('click');
-    expect(contextMock.onFilter).toHaveBeenCalledWith('extension', 'jpg', '-');
+    expect(contextMock.onFilter).toHaveBeenCalledWith(
+      indexPatternMock.fields.getByName('extension'),
+      'jpg',
+      '-'
+    );
   });
 });
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.tsx
@@ -11,7 +11,22 @@ import { EuiDataGridColumnCellActionProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DataViewField } from '@kbn/data-views-plugin/public';
 import { flattenHit } from '@kbn/data-plugin/public';
-import { DiscoverGridContext } from './discover_grid_context';
+import { DiscoverGridContext, GridContext } from './discover_grid_context';
+
+function onFilterCell(
+  context: GridContext,
+  rowIndex: EuiDataGridColumnCellActionProps['rowIndex'],
+  columnId: EuiDataGridColumnCellActionProps['columnId'],
+  mode: '+' | '-'
+) {
+  const row = context.rows[rowIndex];
+  const flattened = flattenHit(row, context.indexPattern);
+  const field = context.indexPattern.fields.getByName(columnId);
+
+  if (flattened && field) {
+    context.onFilter(field, flattened[columnId], mode);
+  }
+}
 
 export const FilterInBtn = ({
   Component,
@@ -27,12 +42,7 @@ export const FilterInBtn = ({
   return (
     <Component
       onClick={() => {
-        const row = context.rows[rowIndex];
-        const flattened = flattenHit(row, context.indexPattern);
-
-        if (flattened) {
-          context.onFilter(columnId, flattened[columnId], '+');
-        }
+        onFilterCell(context, rowIndex, columnId, '+');
       }}
       iconType="plusInCircle"
       aria-label={buttonTitle}
@@ -60,12 +70,7 @@ export const FilterOutBtn = ({
   return (
     <Component
       onClick={() => {
-        const row = context.rows[rowIndex];
-        const flattened = flattenHit(row, context.indexPattern);
-
-        if (flattened) {
-          context.onFilter(columnId, flattened[columnId], '-');
-        }
+        onFilterCell(context, rowIndex, columnId, '-');
       }}
       iconType="minusInCircle"
       aria-label={buttonTitle}