mirror of
https://github.com/elastic/kibana.git
synced 2025-04-18 23:21:39 -04:00
[Lens] Hides the legend actions from ES|QL charts when in dashboard (#217133)
This commit is contained in:
parent
ce10318ef3
commit
abeb2d4a5d
2 changed files with 89 additions and 1 deletions
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Add table
Reference in a new issue