[Lens] Hides the legend actions from ES|QL charts when in dashboard (#217133)

Author: stratoula

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
+
 import {
   AreaSeries,
   Axis,
@@ -36,6 +37,7 @@ import {
 import { Datatable } from '@kbn/expressions-plugin/common';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 import { eventAnnotationServiceMock } from '@kbn/event-annotation-plugin/public/mocks';
 import { EventAnnotationOutput } from '@kbn/event-annotation-plugin/common';
 import { DataLayerConfig } from '../../common';
@@ -106,6 +108,23 @@ describe('XYChart component', () => {
     return shallow(<XYChart {...defaultProps} args={args} />);
   };
 
+  const dataFromESQL: Datatable = {
+    type: 'datatable',
+    columns: [
+      { id: 'a', name: 'a', meta: { type: 'number' } },
+      { id: 'b', name: 'b', meta: { type: 'number' } },
+      { id: 'c', name: 'c', meta: { type: 'string' } },
+      { id: 'd', name: 'd', meta: { type: 'string' } },
+    ],
+    rows: [
+      { a: 1, b: 2, c: 'I', d: 'Row 1' },
+      { a: 1, b: 5, c: 'J', d: 'Row 2' },
+    ],
+    meta: {
+      type: ESQL_TABLE_TYPE,
+    },
+  };
+
   beforeEach(() => {
     convertSpy = jest.fn((x) => x);
     getFormatSpy = jest.fn();
@@ -1517,6 +1536,69 @@ describe('XYChart component', () => {
     expect(wrapper.find(Settings).first().prop('legendAction')).toBeUndefined();
   });
 
+  test('legendAction is not triggering event on ES|QL charts when unified search is on KQL/Lucene mode', () => {
+    const { args } = sampleArgs();
+
+    const newArgs = {
+      ...args,
+      layers: args.layers.map((l) => ({
+        ...l,
+        table: dataFromESQL,
+      })),
+    };
+    const dataMock = dataPluginMock.createStartContract();
+    const newProps = {
+      ...defaultProps,
+      data: {
+        ...dataMock,
+        query: {
+          ...dataMock.query,
+          queryString: {
+            ...dataMock.query.queryString,
+            getQuery: () => ({
+              language: 'kuery',
+              query: 'field:value',
+            }),
+          },
+        },
+      },
+    };
+    const wrapper = mountWithIntl(<XYChart {...newProps} args={newArgs} interactive={true} />);
+
+    expect(wrapper.find(Settings).first().prop('legendAction')).toBeUndefined();
+  });
+
+  test('legendAction is triggering event on ES|QL charts when unified search is on ES|QL mode', () => {
+    const { args } = sampleArgs();
+
+    const newArgs = {
+      ...args,
+      layers: args.layers.map((l) => ({
+        ...l,
+        table: dataFromESQL,
+      })),
+    };
+    const dataMock = dataPluginMock.createStartContract();
+    const newProps = {
+      ...defaultProps,
+      data: {
+        ...dataMock,
+        query: {
+          ...dataMock.query,
+          queryString: {
+            ...dataMock.query.queryString,
+            getQuery: () => ({
+              esql: 'FROM "index-pattern" WHERE "field" = "value"',
+            }),
+          },
+        },
+      },
+    };
+    const wrapper = mountWithIntl(<XYChart {...newProps} args={newArgs} interactive={true} />);
+
+    expect(wrapper.find(Settings).first().prop('legendAction')).toBeDefined();
+  });
+
   test('it renders stacked bar', () => {
     const { args } = sampleArgs();
     const component = shallow(

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -36,6 +36,7 @@ import {
 import { partition } from 'lodash';
 import { IconType } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { isOfAggregateQueryType } from '@kbn/es-query';
 import { PaletteRegistry } from '@kbn/coloring';
 import { RenderMode } from '@kbn/expressions-plugin/common';
 import { useKbnPalettes } from '@kbn/palettes';
@@ -747,6 +748,11 @@ export function XYChart({
     formatFactory
   );
 
+  // ES|QL charts are allowed to create filters only when the unified search bar query is ES|QL (e.g. in Discover)
+  const applicationQuery = data.query.queryString.getQuery();
+  const canCreateFilters =
+    !isEsqlMode || (isEsqlMode && applicationQuery && isOfAggregateQueryType(applicationQuery));
+
   return (
     <>
       <GlobalXYChartStyles />
@@ -873,7 +879,7 @@ export function XYChart({
               onBrushEnd={interactive ? (brushHandler as BrushEndListener) : undefined}
               onElementClick={interactive ? clickHandler : undefined}
               legendAction={
-                interactive
+                interactive && canCreateFilters
                   ? getLegendAction(
                       dataLayers,
                       onClickValue,