[Discover] [ES|QL] Disable ES|QL multivalue filtering in Unified Doc …

…Viewer (elastic#194232)

## Summary

This PR disables ES|QL multivalue filtering in Unified Doc Viewer,
similar to what we did for Unified Data Table in elastic#193415:

![image](https://github.com/user-attachments/assets/f86c3ba9-05e9-4245-97f6-a8f9413950e9)

Part of elastic#193015.

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 6f01d6a)

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -324,12 +324,12 @@ export const DocViewerTable = ({
   }, [showPagination, curPageIndex, pageSize, onChangePageSize, changePageIndex]);
 
   const fieldCellActions = useMemo(
-    () => getFieldCellActions({ rows, onFilter: filter, onToggleColumn }),
-    [rows, filter, onToggleColumn]
+    () => getFieldCellActions({ rows, isEsqlMode, onFilter: filter, onToggleColumn }),
+    [rows, isEsqlMode, filter, onToggleColumn]
   );
   const fieldValueCellActions = useMemo(
-    () => getFieldValueCellActions({ rows, onFilter: filter }),
-    [rows, filter]
+    () => getFieldValueCellActions({ rows, isEsqlMode, onFilter: filter }),
+    [rows, isEsqlMode, filter]
   );
 
   useWindowSize(); // trigger re-render on window resize to recalculate the grid container height

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table_cell_actions.test.tsx

@@ -11,26 +11,27 @@ import React from 'react';
 import { getFieldCellActions, getFieldValueCellActions } from './table_cell_actions';
 import { FieldRow } from './field_row';
 import { buildDataTableRecord } from '@kbn/discover-utils';
-import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { render, screen } from '@testing-library/react';
+import { dataViewMockWithTimeField } from '@kbn/discover-utils/src/__mocks__';
 
 describe('TableActions', () => {
-  const rows: FieldRow[] = [
+  const getRows = (fieldName = 'message', fieldValue: unknown = 'test'): FieldRow[] => [
     new FieldRow({
-      name: 'message',
-      flattenedValue: 'flattenedField',
+      name: fieldName,
+      flattenedValue: fieldValue,
       hit: buildDataTableRecord(
         {
           _ignored: [],
           _index: 'test',
           _id: '1',
           _source: {
-            message: 'test',
+            [fieldName]: fieldValue,
           },
         },
-        dataView
+        dataViewMockWithTimeField
       ),
-      dataView,
+      dataView: dataViewMockWithTimeField,
       fieldFormats: {} as FieldFormatsStart,
       isPinned: false,
       columnsMeta: undefined,
@@ -49,38 +50,105 @@ describe('TableActions', () => {
   describe('getFieldCellActions', () => {
     it('should render correctly for undefined functions', () => {
       expect(
-        getFieldCellActions({ rows, onFilter: undefined, onToggleColumn: jest.fn() }).map((item) =>
-          item(EuiCellParams)
-        )
+        getFieldCellActions({
+          rows: getRows(),
+          isEsqlMode: false,
+          onFilter: undefined,
+          onToggleColumn: jest.fn(),
+        }).map((item) => item(EuiCellParams))
       ).toMatchSnapshot();
 
       expect(
-        getFieldCellActions({ rows, onFilter: undefined, onToggleColumn: undefined }).map((item) =>
-          item(EuiCellParams)
-        )
+        getFieldCellActions({
+          rows: getRows(),
+          isEsqlMode: false,
+          onFilter: undefined,
+          onToggleColumn: undefined,
+        }).map((item) => item(EuiCellParams))
       ).toMatchSnapshot();
     });
 
     it('should render the panels correctly for defined onFilter function', () => {
       expect(
-        getFieldCellActions({ rows, onFilter: jest.fn(), onToggleColumn: jest.fn() }).map((item) =>
-          item(EuiCellParams)
-        )
+        getFieldCellActions({
+          rows: getRows(),
+          isEsqlMode: false,
+          onFilter: jest.fn(),
+          onToggleColumn: jest.fn(),
+        }).map((item) => item(EuiCellParams))
       ).toMatchSnapshot();
     });
   });
 
   describe('getFieldValueCellActions', () => {
     it('should render correctly for undefined functions', () => {
       expect(
-        getFieldValueCellActions({ rows, onFilter: undefined }).map((item) => item(EuiCellParams))
+        getFieldValueCellActions({ rows: getRows(), isEsqlMode: false, onFilter: undefined }).map(
+          (item) => item(EuiCellParams)
+        )
       ).toMatchSnapshot();
     });
 
     it('should render the panels correctly for defined onFilter function', () => {
       expect(
-        getFieldValueCellActions({ rows, onFilter: jest.fn() }).map((item) => item(EuiCellParams))
+        getFieldValueCellActions({ rows: getRows(), isEsqlMode: false, onFilter: jest.fn() }).map(
+          (item) => item(EuiCellParams)
+        )
       ).toMatchSnapshot();
     });
+
+    it('should allow filtering in ES|QL mode', () => {
+      const actions = getFieldValueCellActions({
+        rows: getRows('extension'),
+        isEsqlMode: true,
+        onFilter: jest.fn(),
+      }).map((Action, i) => (
+        <Action
+          key={i}
+          {...EuiCellParams}
+          Component={(props: any) => (
+            <div data-test-subj={props['data-test-subj']}>{JSON.stringify(props)}</div>
+          )}
+        />
+      ));
+      render(<>{actions}</>);
+      const filterForProps = JSON.parse(
+        screen.getByTestId('addFilterForValueButton-extension').innerHTML
+      );
+      expect(filterForProps.disabled).toBe(false);
+      expect(filterForProps.title).toBe('Filter for value');
+      const filterOutProps = JSON.parse(
+        screen.getByTestId('addFilterOutValueButton-extension').innerHTML
+      );
+      expect(filterOutProps.disabled).toBe(false);
+      expect(filterOutProps.title).toBe('Filter out value');
+    });
+
+    it('should not allow filtering in ES|QL mode for multivalue fields', () => {
+      const actions = getFieldValueCellActions({
+        rows: getRows('extension', ['foo', 'bar']),
+        isEsqlMode: true,
+        onFilter: jest.fn(),
+      }).map((Action, i) => (
+        <Action
+          key={i}
+          {...EuiCellParams}
+          Component={(props: any) => (
+            <div data-test-subj={props['data-test-subj']}>{JSON.stringify(props)}</div>
+          )}
+        />
+      ));
+      render(<>{actions}</>);
+      const filterForProps = JSON.parse(
+        screen.getByTestId('addFilterForValueButton-extension').innerHTML
+      );
+      expect(filterForProps.disabled).toBe(true);
+      expect(filterForProps.title).toBe('Multivalue filtering is not supported in ES|QL');
+      const filterOutProps = JSON.parse(
+        screen.getByTestId('addFilterOutValueButton-extension').innerHTML
+      );
+      expect(filterOutProps.disabled).toBe(true);
+      expect(filterOutProps.title).toBe('Multivalue filtering is not supported in ES|QL');
+    });
   });
 });