Enable "Explore underlying data" actions for Lens visualizations (#70047

)

* refactor: 💡 rename folder to "explore_data"

* style: 💄 check for "share" plugin in more semantic way

"explore data" actions use Discover URL generator, which is registered
in "share" plugin, which is optional plugin, so we check for its
existance, because otherwise URL generator is not available.

* refactor: 💡 move KibanaURL to a separate file

* feat: 🎸 add "Explore underlying data" in-chart action

* fix: 🐛 fix imports after refactor

* feat: 🎸 add start.filtersFromContext to embeddable plugin

* feat: 🎸 add type checkers to data plugin

* feat: 🎸 better handle empty filters in Discover URL generator

* feat: 🎸 implement .getUrl() method of explore data in-chart act

* feat: 🎸 add embeddable.filtersAndTimeRangeFromContext()

* feat: 🎸 improve getUrl() method of explore data action

* test: 💍 update test mock

* fix possible stale hashHistory.location in discover

* style: 💄 ensureHashHistoryLocation -> syncHistoryLocations

* docs: ✏️ update autogenerated docs

* test: 💍 add in-chart "Explore underlying data" unit tests

* test: 💍 add in-chart "Explore underlying data" functional tests

* test: 💍 clean-up custom time range after panel action tests

* chore: 🤖 fix embeddable plugin mocks

* chore: 🤖 fix another mock

* test: 💍 add support for new action to pie chart service

* feat: 🎸 enable "Explore underlying data" action for Lens vis

* test: 💍 make tests green again

* refactor: 💡 rename trigger contexts

* chore: 🤖 fix TypeScript errors

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/data/public/actions/filters/create_filters_from_range_select.ts

@@ -22,9 +22,9 @@ import moment from 'moment';
 import { esFilters, IFieldType, RangeFilterParams } from '../../../public';
 import { getIndexPatterns } from '../../../public/services';
 import { deserializeAggConfig } from '../../search/expressions/utils';
-import { RangeSelectTriggerContext } from '../../../../embeddable/public';
+import { RangeSelectContext } from '../../../../embeddable/public';
 
-export async function createFiltersFromRangeSelectAction(event: RangeSelectTriggerContext['data']) {
+export async function createFiltersFromRangeSelectAction(event: RangeSelectContext['data']) {
   const column: Record<string, any> = event.table.columns[event.column];
 
   if (!column || !column.meta) {

src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts

@@ -27,7 +27,7 @@ import { dataPluginMock } from '../../../public/mocks';
 import { setIndexPatterns } from '../../../public/services';
 import { mockDataServices } from '../../../public/search/aggs/test_helpers';
 import { createFiltersFromValueClickAction } from './create_filters_from_value_click';
-import { ValueClickTriggerContext } from '../../../../embeddable/public';
+import { ValueClickContext } from '../../../../embeddable/public';
 
 const mockField = {
   name: 'bytes',
@@ -39,7 +39,7 @@ const mockField = {
 };
 
 describe('createFiltersFromValueClick', () => {
-  let dataPoints: ValueClickTriggerContext['data']['data'];
+  let dataPoints: ValueClickContext['data']['data'];
 
   beforeEach(() => {
     dataPoints = [

src/plugins/data/public/actions/filters/create_filters_from_value_click.ts

@@ -21,7 +21,7 @@ import { KibanaDatatable } from '../../../../../plugins/expressions/public';
 import { deserializeAggConfig } from '../../search/expressions';
 import { esFilters, Filter } from '../../../public';
 import { getIndexPatterns } from '../../../public/services';
-import { ValueClickTriggerContext } from '../../../../embeddable/public';
+import { ValueClickContext } from '../../../../embeddable/public';
 
 /**
  * For terms aggregations on `__other__` buckets, this assembles a list of applicable filter
@@ -114,7 +114,7 @@ const createFilter = async (
 export const createFiltersFromValueClickAction = async ({
   data,
   negate,
-}: ValueClickTriggerContext['data']) => {
+}: ValueClickContext['data']) => {
   const filters: Filter[] = [];
 
   await Promise.all(

src/plugins/data/public/actions/select_range_action.ts

@@ -24,12 +24,12 @@ import {
   ActionByType,
 } from '../../../../plugins/ui_actions/public';
 import { createFiltersFromRangeSelectAction } from './filters/create_filters_from_range_select';
-import { RangeSelectTriggerContext } from '../../../embeddable/public';
+import { RangeSelectContext } from '../../../embeddable/public';
 import { FilterManager, TimefilterContract, esFilters } from '..';
 
 export const ACTION_SELECT_RANGE = 'ACTION_SELECT_RANGE';
 
-export type SelectRangeActionContext = RangeSelectTriggerContext;
+export type SelectRangeActionContext = RangeSelectContext;
 
 async function isCompatible(context: SelectRangeActionContext) {
   try {

src/plugins/data/public/actions/value_click_action.ts

@@ -27,12 +27,12 @@ import {
 import { getOverlays, getIndexPatterns } from '../services';
 import { applyFiltersPopover } from '../ui/apply_filters';
 import { createFiltersFromValueClickAction } from './filters/create_filters_from_value_click';
-import { ValueClickTriggerContext } from '../../../embeddable/public';
+import { ValueClickContext } from '../../../embeddable/public';
 import { Filter, FilterManager, TimefilterContract, esFilters } from '..';
 
 export const ACTION_VALUE_CLICK = 'ACTION_VALUE_CLICK';
 
-export type ValueClickActionContext = ValueClickTriggerContext;
+export type ValueClickActionContext = ValueClickContext;
 
 async function isCompatible(context: ValueClickActionContext) {
   try {

src/plugins/embeddable/public/index.ts

@@ -48,8 +48,8 @@ export {
   EmbeddableOutput,
   EmbeddablePanel,
   EmbeddableRoot,
-  ValueClickTriggerContext,
-  RangeSelectTriggerContext,
+  ValueClickContext,
+  RangeSelectContext,
   ErrorEmbeddable,
   IContainer,
   IEmbeddable,

src/plugins/embeddable/public/lib/triggers/triggers.ts

@@ -25,7 +25,7 @@ export interface EmbeddableContext {
   embeddable: IEmbeddable;
 }
 
-export interface ValueClickTriggerContext<T extends IEmbeddable = IEmbeddable> {
+export interface ValueClickContext<T extends IEmbeddable = IEmbeddable> {
   embeddable?: T;
   data: {
     data: Array<{
@@ -39,7 +39,7 @@ export interface ValueClickTriggerContext<T extends IEmbeddable = IEmbeddable> {
   };
 }
 
-export interface RangeSelectTriggerContext<T extends IEmbeddable = IEmbeddable> {
+export interface RangeSelectContext<T extends IEmbeddable = IEmbeddable> {
   embeddable?: T;
   data: {
     table: KibanaDatatable;
@@ -50,16 +50,16 @@ export interface RangeSelectTriggerContext<T extends IEmbeddable = IEmbeddable>
 }
 
 export type ChartActionContext<T extends IEmbeddable = IEmbeddable> =
-  | ValueClickTriggerContext<T>
-  | RangeSelectTriggerContext<T>;
+  | ValueClickContext<T>
+  | RangeSelectContext<T>;
 
 export const isValueClickTriggerContext = (
   context: ChartActionContext
-): context is ValueClickTriggerContext => context.data && 'data' in context.data;
+): context is ValueClickContext => context.data && 'data' in context.data;
 
 export const isRangeSelectTriggerContext = (
   context: ChartActionContext
-): context is RangeSelectTriggerContext => context.data && 'range' in context.data;
+): context is RangeSelectContext => context.data && 'range' in context.data;
 
 export const CONTEXT_MENU_TRIGGER = 'CONTEXT_MENU_TRIGGER';
 export const contextMenuTrigger: Trigger<'CONTEXT_MENU_TRIGGER'> = {

src/plugins/ui_actions/public/types.ts

@@ -22,7 +22,7 @@ import { TriggerInternal } from './triggers/trigger_internal';
 import { Filter } from '../../data/public';
 import { SELECT_RANGE_TRIGGER, VALUE_CLICK_TRIGGER, APPLY_FILTER_TRIGGER } from './triggers';
 import { IEmbeddable } from '../../embeddable/public';
-import { RangeSelectTriggerContext, ValueClickTriggerContext } from '../../embeddable/public';
+import { RangeSelectContext, ValueClickContext } from '../../embeddable/public';
 
 export type TriggerRegistry = Map<TriggerId, TriggerInternal<any>>;
 export type ActionRegistry = Map<string, ActionInternal>;
@@ -37,8 +37,8 @@ export type TriggerContext = BaseContext;
 
 export interface TriggerContextMapping {
   [DEFAULT_TRIGGER]: TriggerContext;
-  [SELECT_RANGE_TRIGGER]: RangeSelectTriggerContext;
-  [VALUE_CLICK_TRIGGER]: ValueClickTriggerContext;
+  [SELECT_RANGE_TRIGGER]: RangeSelectContext;
+  [VALUE_CLICK_TRIGGER]: ValueClickContext;
   [APPLY_FILTER_TRIGGER]: {
     embeddable: IEmbeddable;
     filters: Filter[];

x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx

@@ -8,13 +8,10 @@ import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
 import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
-import {
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
-} from '../../../../../src/plugins/embeddable/public';
+import { ChartActionContext } from '../../../../../src/plugins/embeddable/public';
 import { CollectConfigProps } from '../../../../../src/plugins/kibana_utils/public';
 
-export type ActionContext = RangeSelectTriggerContext | ValueClickTriggerContext;
+export type ActionContext = ChartActionContext;
 
 export interface Config {
   name: string;

x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts

@@ -4,13 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
-} from '../../../../../src/plugins/embeddable/public';
+import { ChartActionContext } from '../../../../../src/plugins/embeddable/public';
 import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../src/plugins/kibana_utils/public';
 
-export type ActionContext = RangeSelectTriggerContext | ValueClickTriggerContext;
+export type ActionContext = ChartActionContext;
 
 export interface Config {
   /**

x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx

@@ -8,10 +8,7 @@ import React from 'react';
 import { EuiFormRow, EuiSwitch, EuiFieldText, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
 import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
-import {
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
-} from '../../../../../src/plugins/embeddable/public';
+import { ChartActionContext } from '../../../../../src/plugins/embeddable/public';
 import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../src/plugins/kibana_utils/public';
 
 function isValidUrl(url: string) {
@@ -23,7 +20,7 @@ function isValidUrl(url: string) {
   }
 }
 
-export type ActionContext = RangeSelectTriggerContext | ValueClickTriggerContext;
+export type ActionContext = ChartActionContext;
 
 export interface Config {
   url: string;

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx

@@ -22,8 +22,8 @@ import { createDashboardUrlGenerator } from '../../../../../../../src/plugins/da
 import { UrlGeneratorsService } from '../../../../../../../src/plugins/share/public/url_generators';
 import { VisualizeEmbeddableContract } from '../../../../../../../src/plugins/visualizations/public';
 import {
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
+  RangeSelectContext,
+  ValueClickContext,
 } from '../../../../../../../src/plugins/embeddable/public';
 import { StartDependencies } from '../../../plugin';
 import { SavedObjectLoader } from '../../../../../../../src/plugins/saved_objects/public';
@@ -136,8 +136,8 @@ describe('.execute() & getHref', () => {
     const context = ({
       data: {
         ...(useRangeEvent
-          ? ({ range: {} } as RangeSelectTriggerContext['data'])
-          : ({ data: [] } as ValueClickTriggerContext['data'])),
+          ? ({ range: {} } as RangeSelectContext['data'])
+          : ({ data: [] } as ValueClickContext['data'])),
         timeFieldName: 'order_date',
       },
       embeddable: {

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/types.ts

@@ -5,14 +5,14 @@
  */
 
 import {
-  ValueClickTriggerContext,
-  RangeSelectTriggerContext,
+  ValueClickContext,
+  RangeSelectContext,
   IEmbeddable,
 } from '../../../../../../../src/plugins/embeddable/public';
 
 export type ActionContext<T extends IEmbeddable = IEmbeddable> =
-  | ValueClickTriggerContext<T>
-  | RangeSelectTriggerContext<T>;
+  | ValueClickContext<T>
+  | RangeSelectContext<T>;
 
 export interface Config {
   dashboardId?: string;

x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts

@@ -43,14 +43,13 @@ export abstract class AbstractExploreDataAction<Context extends { embeddable?: I
   public async isCompatible({ embeddable }: Context): Promise<boolean> {
     if (!embeddable) return false;
     if (!this.params.start().plugins.discover.urlGenerator) return false;
-    if (!shared.isVisualizeEmbeddable(embeddable)) return false;
-    if (!shared.getIndexPattern(embeddable)) return false;
+    if (!shared.hasExactlyOneIndexPattern(embeddable)) return false;
     if (embeddable.getInput().viewMode !== ViewMode.VIEW) return false;
     return true;
   }
 
   public async execute(context: Context): Promise<void> {
-    if (!shared.isVisualizeEmbeddable(context.embeddable)) return;
+    if (!shared.hasExactlyOneIndexPattern(context.embeddable)) return;
 
     const { core } = this.params.start();
     const { appName, appPath } = await this.getUrl(context);
@@ -63,7 +62,7 @@ export abstract class AbstractExploreDataAction<Context extends { embeddable?: I
   public async getHref(context: Context): Promise<string> {
     const { embeddable } = context;
 
-    if (!shared.isVisualizeEmbeddable(embeddable)) {
+    if (!shared.hasExactlyOneIndexPattern(embeddable)) {
       throw new Error(`Embeddable not supported for "${this.getDisplayName(context)}" action.`);
     }
 

x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.test.ts

@@ -10,8 +10,8 @@ import { coreMock } from '../../../../../../src/core/public/mocks';
 import { UrlGeneratorContract } from '../../../../../../src/plugins/share/public';
 import {
   EmbeddableStart,
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
+  RangeSelectContext,
+  ValueClickContext,
   ChartActionContext,
 } from '../../../../../../src/plugins/embeddable/public';
 import { i18n } from '@kbn/i18n';
@@ -85,8 +85,8 @@ const setup = ({ useRangeEvent = false }: { useRangeEvent?: boolean } = {}) => {
 
   const data: ChartActionContext<typeof embeddable>['data'] = {
     ...(useRangeEvent
-      ? ({ range: {} } as RangeSelectTriggerContext['data'])
-      : ({ data: [] } as ValueClickTriggerContext['data'])),
+      ? ({ range: {} } as RangeSelectContext['data'])
+      : ({ data: [] } as ValueClickContext['data'])),
     timeFieldName: 'order_date',
   };
 
@@ -139,9 +139,16 @@ describe('"Explore underlying data" panel action', () => {
       expect(isCompatible).toBe(false);
     });
 
-    test('returns false if embeddable is not Visualize embeddable', async () => {
-      const { action, embeddable, context } = setup();
-      (embeddable as any).type = 'NOT_VISUALIZE_EMBEDDABLE';
+    test('returns false if embeddable has more than one index pattern', async () => {
+      const { action, output, context } = setup();
+      output.indexPatterns = [
+        {
+          id: 'index-ptr-foo',
+        },
+        {
+          id: 'index-ptr-bar',
+        },
+      ];
 
       const isCompatible = await action.isCompatible(context);
 

x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts

@@ -6,16 +6,16 @@
 
 import { Action } from '../../../../../../src/plugins/ui_actions/public';
 import {
-  ValueClickTriggerContext,
-  RangeSelectTriggerContext,
+  ValueClickContext,
+  RangeSelectContext,
 } from '../../../../../../src/plugins/embeddable/public';
 import { DiscoverUrlGeneratorState } from '../../../../../../src/plugins/discover/public';
 import { isTimeRange, isQuery, isFilters } from '../../../../../../src/plugins/data/public';
 import { KibanaURL } from './kibana_url';
 import * as shared from './shared';
 import { AbstractExploreDataAction } from './abstract_explore_data_action';
 
-export type ExploreDataChartActionContext = ValueClickTriggerContext | RangeSelectTriggerContext;
+export type ExploreDataChartActionContext = ValueClickContext | RangeSelectContext;
 
 export const ACTION_EXPLORE_DATA_CHART = 'ACTION_EXPLORE_DATA_CHART';
 
@@ -49,7 +49,7 @@ export class ExploreDataChartAction extends AbstractExploreDataAction<ExploreDat
     };
 
     if (embeddable) {
-      state.indexPatternId = shared.getIndexPattern(embeddable) || undefined;
+      state.indexPatternId = shared.getIndexPatterns(embeddable)[0] || undefined;
 
       const input = embeddable.getInput();
 

x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.test.ts

@@ -125,9 +125,16 @@ describe('"Explore underlying data" panel action', () => {
       expect(isCompatible).toBe(false);
     });
 
-    test('returns false if embeddable is not Visualize embeddable', async () => {
-      const { action, embeddable, context } = setup();
-      (embeddable as any).type = 'NOT_VISUALIZE_EMBEDDABLE';
+    test('returns false if embeddable has more than one index pattern', async () => {
+      const { action, output, context } = setup();
+      output.indexPatterns = [
+        {
+          id: 'index-ptr-foo',
+        },
+        {
+          id: 'index-ptr-bar',
+        },
+      ];
 
       const isCompatible = await action.isCompatible(context);
 

x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts

@@ -38,7 +38,7 @@ export class ExploreDataContextMenuAction extends AbstractExploreDataAction<Embe
     const state: DiscoverUrlGeneratorState = {};
 
     if (embeddable) {
-      state.indexPatternId = shared.getIndexPattern(embeddable) || undefined;
+      state.indexPatternId = shared.getIndexPatterns(embeddable)[0] || undefined;
 
       const input = embeddable.getInput();