From 105ffd8a760895fcee5405254ec302f47c514935 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Tue, 13 Aug 2024 16:08:19 +0200 Subject: [PATCH] [ES|QL] Removes the unnecessary index pattern references from the Lens charts (#190296) ## Summary ES|QL charts do not use permanent dataviews. They are just using adHoc dataviews for technical reasons and only (as the entire Lens architecture is based on them). By calculating (and exporting to the state) the references is creating some bad UX behavior as the dashboards expect the dataviews to exist. This PR is fixing this by removing the unnecessary references from the Lens charts. --- .../lens_configuration_flyout.test.tsx | 26 +++++++++++ .../lens_configuration_flyout.tsx | 43 +++++++++++-------- .../lens/public/embeddable/embeddable.tsx | 38 +++++++++------- 3 files changed, 73 insertions(+), 34 deletions(-) diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx index 2c1d3290fde7f..c5b6e202d481f 100644 --- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx @@ -227,6 +227,32 @@ describe('LensEditConfigurationFlyout', () => { expect(saveByRefSpy).toHaveBeenCalled(); }); + it('should call the onApplyCb callback if apply button is clicked', async () => { + const onApplyCbSpy = jest.fn(); + + renderConfigFlyout( + { + closeFlyout: jest.fn(), + onApplyCb: onApplyCbSpy, + }, + { esql: 'from index1 | limit 10' } + ); + userEvent.click(screen.getByTestId('applyFlyoutButton')); + expect(onApplyCbSpy).toHaveBeenCalledWith({ + title: 'test', + visualizationType: 'testVis', + state: { + datasourceStates: { testDatasource: 'state' }, + visualization: {}, + filters: [], + query: { esql: 'from index1 | limit 10' }, + }, + filters: [], + query: { esql: 'from index1 | limit 10' }, + references: [], + }); + }); + it('should not display the editor if canEditTextBasedQuery prop is false', async () => { renderConfigFlyout({ canEditTextBasedQuery: false, diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx index 42a84dc8b2f55..6c66c463f92d4 100644 --- a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx +++ b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx @@ -239,6 +239,11 @@ export function LensEditConfigurationFlyout({ onCancelCb, ]); + const textBasedMode = useMemo( + () => (isOfAggregateQueryType(query) ? getAggregateQueryMode(query) : undefined), + [query] + ); + const onApply = useCallback(() => { const dsStates = Object.fromEntries( Object.entries(datasourceStates).map(([id, ds]) => { @@ -246,18 +251,21 @@ export function LensEditConfigurationFlyout({ return [id, dsState]; }) ); - const references = extractReferencesFromState({ - activeDatasources: Object.keys(datasourceStates).reduce( - (acc, id) => ({ - ...acc, - [id]: datasourceMap[id], - }), - {} - ), - datasourceStates, - visualizationState: visualization.state, - activeVisualization, - }); + // as ES|QL queries are using adHoc dataviews, we don't want to pass references + const references = !textBasedMode + ? extractReferencesFromState({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, id) => ({ + ...acc, + [id]: datasourceMap[id], + }), + {} + ), + datasourceStates, + visualizationState: visualization.state, + activeVisualization, + }) + : []; const attrs = { ...attributes, state: { @@ -289,14 +297,15 @@ export function LensEditConfigurationFlyout({ onApplyCb?.(attrs as TypedLensByValueInput['attributes']); closeFlyout?.(); }, [ - visualization.activeId, - savedObjectId, - closeFlyout, - onApplyCb, datasourceStates, + textBasedMode, visualization.state, + visualization.activeId, activeVisualization, attributes, + savedObjectId, + onApplyCb, + closeFlyout, datasourceMap, saveByRef, updateByRefInput, @@ -385,8 +394,6 @@ export function LensEditConfigurationFlyout({ getUserMessages, ]); - const textBasedMode = isOfAggregateQueryType(query) ? getAggregateQueryMode(query) : undefined; - if (isLoading) return null; // Example is the Discover editing where we dont want to render the text based editor on the panel, neither the suggestions (for now) if (!canEditTextBasedQuery && hidesSuggestions) { diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx index 85cc646de3005..faa617f081d8f 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable.tsx @@ -792,22 +792,28 @@ export class Embeddable ...viz.state.datasourceStates, [activeDatasourceId]: datasourceState, }; - const references = extractReferencesFromState({ - activeDatasources: Object.keys(datasourceStates).reduce( - (acc, datasourceId) => ({ - ...acc, - [datasourceId]: this.deps.datasourceMap[datasourceId], - }), - {} - ), - datasourceStates: Object.fromEntries( - Object.entries(datasourceStates).map(([id, state]) => [id, { isLoading: false, state }]) - ), - visualizationState, - activeVisualization: this.activeVisualizationId - ? this.deps.visualizationMap[visualizationType ?? this.activeVisualizationId] - : undefined, - }); + const references = + activeDatasourceId === 'formBased' + ? extractReferencesFromState({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: this.deps.datasourceMap[datasourceId], + }), + {} + ), + datasourceStates: Object.fromEntries( + Object.entries(datasourceStates).map(([id, state]) => [ + id, + { isLoading: false, state }, + ]) + ), + visualizationState, + activeVisualization: this.activeVisualizationId + ? this.deps.visualizationMap[visualizationType ?? this.activeVisualizationId] + : undefined, + }) + : []; const attrs = { ...viz, state: {