[Dashboard][Lens] Add "convert to lens" action to dashboard

.buildkite/ftr_configs.yml

@@ -185,6 +185,7 @@ enabled:
   - x-pack/test/functional/apps/lens/group3/config.ts
   - x-pack/test/functional/apps/lens/open_in_lens/tsvb/config.ts
   - x-pack/test/functional/apps/lens/open_in_lens/agg_based/config.ts
+  - x-pack/test/functional/apps/lens/open_in_lens/dashboard/config.ts
   - x-pack/test/functional/apps/license_management/config.ts
   - x-pack/test/functional/apps/logstash/config.ts
   - x-pack/test/functional/apps/management/config.ts

src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss

@@ -106,6 +106,17 @@
   &:focus {
     background-color: $euiFocusBackgroundColor;
   }
+
+}
+
+.embPanel__optionsMenuPopover-notification::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: '•';
+  transform: translate(50%, -50%);
+  color: $euiColorAccent;
+  font-size: $euiSizeL;
 }
 
 .embPanel .embPanel__optionsMenuButton {

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -455,13 +455,18 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       sortedActions = sortedActions.filter(({ id }) => this.props.actionPredicate!(id));
     }
 
-    return await buildContextMenuForActions({
+    const panels = await buildContextMenuForActions({
       actions: sortedActions.map((action) => ({
         action,
         context: { embeddable: this.props.embeddable },
         trigger: contextMenuTrigger,
       })),
       closeMenu: this.closeMyContextMenuPanel,
     });
+
+    return {
+      panels,
+      actions: sortedActions,
+    };
   };
 }

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -30,7 +30,10 @@ export interface PanelHeaderProps {
   index?: number;
   isViewMode: boolean;
   hidePanelTitle: boolean;
-  getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor[]>;
+  getActionContextMenuPanel: () => Promise<{
+    panels: EuiContextMenuPanelDescriptor[];
+    actions: Action[];
+  }>;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
   notifications: Array<Action<EmbeddableContext>>;

src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx

@@ -15,17 +15,24 @@ import {
   EuiContextMenuPanelDescriptor,
   EuiPopover,
 } from '@elastic/eui';
+import { Action } from '@kbn/ui-actions-plugin/public';
 
 export interface PanelOptionsMenuProps {
-  getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor[]>;
+  getActionContextMenuPanel: () => Promise<{
+    panels: EuiContextMenuPanelDescriptor[];
+    actions: Action[];
+  }>;
   isViewMode: boolean;
   closeContextMenu: boolean;
   title?: string;
   index?: number;
 }
 
 interface State {
-  actionContextMenuPanel?: EuiContextMenuPanelDescriptor[];
+  actionContextMenuPanel?: {
+    panels: EuiContextMenuPanelDescriptor[];
+    actions: Action[];
+  };
   isPopoverOpen: boolean;
 }
 
@@ -93,9 +100,16 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
       />
     );
 
+    const showNotification = this.state.actionContextMenuPanel?.actions.some(
+      (action) => action.showNotification
+    );
+
     return (
       <EuiPopover
-        className="embPanel__optionsMenuPopover"
+        className={
+          'embPanel__optionsMenuPopover' +
+          (showNotification ? ' embPanel__optionsMenuPopover-notification' : '')
+        }
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
@@ -109,7 +123,7 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
       >
         <EuiContextMenu
           initialPanelId="mainMenu"
-          panels={this.state.actionContextMenuPanel || []}
+          panels={this.state.actionContextMenuPanel?.panels || []}
         />
       </EuiPopover>
     );

src/plugins/ui_actions/public/actions/action.ts

@@ -104,6 +104,12 @@ export interface Action<Context extends object = object>
    *
    */
   disabled?: boolean;
+
+  /**
+   * Determines if notification should be shown in menu for that action
+   *
+   */
+  showNotification?: boolean;
 }
 
 /**
@@ -151,6 +157,12 @@ export interface ActionDefinition<Context extends object = object>
    *
    */
   disabled?: boolean;
+
+  /**
+   * Determines if notification should be shown in menu for that action
+   *
+   */
+  showNotification?: boolean;
 }
 
 export type ActionContext<A> = A extends ActionDefinition<infer Context> ? Context : never;

src/plugins/ui_actions/public/actions/action_internal.ts

@@ -25,6 +25,7 @@ export class ActionInternal<A extends ActionDefinition = ActionDefinition>
   public readonly MenuItem?: UiComponent<ActionMenuItemProps<Context<A>>>;
   public readonly ReactMenuItem?: React.FC<ActionMenuItemProps<Context<A>>>;
   public readonly grouping?: PresentableGrouping<Context<A>>;
+  public readonly showNotification?: boolean;
 
   constructor(public readonly definition: A) {
     this.id = this.definition.id;
@@ -33,6 +34,7 @@ export class ActionInternal<A extends ActionDefinition = ActionDefinition>
     this.MenuItem = this.definition.MenuItem;
     this.ReactMenuItem = this.MenuItem ? uiToReactComponent(this.MenuItem) : undefined;
     this.grouping = this.definition.grouping;
+    this.showNotification = this.definition.showNotification;
   }
 
   public execute(context: Context<A>) {

src/plugins/visualizations/public/actions/edit_in_lens_action.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { take } from 'rxjs/operators';
+import { EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
+import { reactToUiComponent } from '@kbn/kibana-react-plugin/public';
+import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
+import { TimefilterContract } from '@kbn/data-plugin/public';
+import { i18n } from '@kbn/i18n';
+import { IEmbeddable, ViewMode } from '@kbn/embeddable-plugin/public';
+import { Action } from '@kbn/ui-actions-plugin/public';
+import { VisualizeEmbeddable } from '../embeddable';
+import { DASHBOARD_VISUALIZATION_PANEL_TRIGGER } from '../triggers';
+import { getUiActions, getApplication, getEmbeddable } from '../services';
+
+export const ACTION_EDIT_IN_LENS = 'ACTION_EDIT_IN_LENS';
+
+export interface EditInLensContext {
+  embeddable: IEmbeddable;
+}
+
+const displayName = i18n.translate('visualizations.actions.editInLens.displayName', {
+  defaultMessage: 'Convert to Lens',
+});
+
+const ReactMenuItem: React.FC = () => {
+  return (
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem>{displayName}</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiBadge color={'accent'}>
+          {i18n.translate('visualizations.tonNavMenu.tryItBadgeText', {
+            defaultMessage: 'Try it',
+          })}
+        </EuiBadge>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+const UiMenuItem = reactToUiComponent(ReactMenuItem);
+
+const isVisualizeEmbeddable = (embeddable: IEmbeddable): embeddable is VisualizeEmbeddable => {
+  return 'getVis' in embeddable;
+};
+
+export class EditInLensAction implements Action<EditInLensContext> {
+  public id = ACTION_EDIT_IN_LENS;
+  public readonly type = ACTION_EDIT_IN_LENS;
+  public order = 30;
+  public showNotification = true;
+  public currentAppId: string | undefined;
+
+  constructor(private readonly timefilter: TimefilterContract) {}
+
+  async execute(context: ActionExecutionContext<EditInLensContext>): Promise<void> {
+    const application = getApplication();
+    if (application?.currentAppId$) {
+      application.currentAppId$
+        .pipe(take(1))
+        .subscribe((appId: string | undefined) => (this.currentAppId = appId));
+      application.currentAppId$.subscribe(() => {
+        getEmbeddable().getStateTransfer().isTransferInProgress = false;
+      });
+    }
+    const { embeddable } = context;
+    if (isVisualizeEmbeddable(embeddable)) {
+      const vis = embeddable.getVis();
+      const navigateToLensConfig = await vis.type.navigateToLens?.(vis, this.timefilter);
+      const searchFilters = vis.data.searchSource?.getField('filter');
+      const searchQuery = vis.data.searchSource?.getField('query');
+      const updatedWithMeta = {
+        ...navigateToLensConfig,
+        title:
+          embeddable.getOutput().title ||
+          i18n.translate('visualizations.actions.editInLens.visulizationTitle', {
+            defaultMessage: '{type} visualization',
+            values: {
+              type: vis.type.title,
+            },
+          }),
+        savedObjectId: vis.id,
+        embeddableId: embeddable.id,
+        originatingApp: this.currentAppId,
+        searchFilters,
+        searchQuery,
+      };
+      if (navigateToLensConfig) {
+        getEmbeddable().getStateTransfer().isTransferInProgress = true;
+        getUiActions().getTrigger(DASHBOARD_VISUALIZATION_PANEL_TRIGGER).exec(updatedWithMeta);
+      }
+    }
+  }
+
+  getDisplayName(context: ActionExecutionContext<EditInLensContext>): string {
+    return displayName;
+  }
+
+  MenuItem = UiMenuItem;
+
+  getIconType(context: ActionExecutionContext<EditInLensContext>): string | undefined {
+    return 'merge';
+  }
+
+  async isCompatible(context: ActionExecutionContext<EditInLensContext>) {
+    const { embeddable } = context;
+    if (!isVisualizeEmbeddable(embeddable)) {
+      return false;
+    }
+    const vis = embeddable.getVis();
+    if (!vis) {
+      return false;
+    }
+    const canNavigateToLens =
+      embeddable.getExpressionVariables?.()?.canNavigateToLens ??
+      (await vis.type.navigateToLens?.(vis, this.timefilter));
+    return Boolean(canNavigateToLens && embeddable.getInput().viewMode === ViewMode.EDIT);
+  }
+}

src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx

@@ -126,6 +126,7 @@ export class VisualizeEmbeddable
     VisualizeByValueInput,
     VisualizeByReferenceInput
   >;
+  private expressionVariables: Record<string, unknown> | undefined;
   private readonly expressionVariablesSubject = new ReplaySubject<
     Record<string, unknown> | undefined
   >(1);
@@ -584,12 +585,12 @@ export class VisualizeEmbeddable
   private async updateHandler() {
     const context = this.getExecutionContext();
 
-    const expressionVariables = await this.vis.type.getExpressionVariables?.(
+    this.expressionVariables = await this.vis.type.getExpressionVariables?.(
       this.vis,
       this.timefilter
     );
 
-    this.expressionVariablesSubject.next(expressionVariables);
+    this.expressionVariablesSubject.next(this.expressionVariables);
 
     const expressionParams: IExpressionLoaderParams = {
       searchContext: {
@@ -600,7 +601,7 @@ export class VisualizeEmbeddable
       },
       variables: {
         embeddableTitle: this.getTitle(),
-        ...expressionVariables,
+        ...this.expressionVariables,
       },
       searchSessionId: this.input.searchSessionId,
       syncColors: this.input.syncColors,
@@ -651,6 +652,10 @@ export class VisualizeEmbeddable
     return this.expressionVariablesSubject.asObservable();
   }
 
+  public getExpressionVariables() {
+    return this.expressionVariables;
+  }
+
   inputIsRefType = (input: VisualizeInput): input is VisualizeByReferenceInput => {
     if (!this.attributeService) {
       throw new Error('AttributeService must be defined for getInputAsRefType');

src/plugins/visualizations/public/index.ts

@@ -69,8 +69,10 @@ export type { IEditorController, EditorRenderProps } from './visualize_app/types
 export {
   VISUALIZE_EDITOR_TRIGGER,
   AGG_BASED_VISUALIZATION_TRIGGER,
+  DASHBOARD_VISUALIZATION_PANEL_TRIGGER,
   ACTION_CONVERT_TO_LENS,
   ACTION_CONVERT_AGG_BASED_TO_LENS,
+  ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS,
 } from './triggers';
 
 export const convertToLensModule = import('./convert_to_lens');

src/plugins/visualizations/public/plugin.ts

@@ -57,7 +57,11 @@ import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { TypesSetup, TypesStart } from './vis_types';
 import type { VisualizeServices } from './visualize_app/types';
-import { aggBasedVisualizationTrigger, visualizeEditorTrigger } from './triggers';
+import {
+  aggBasedVisualizationTrigger,
+  dashboardVisualizationPanelTrigger,
+  visualizeEditorTrigger,
+} from './triggers';
 import { createVisEditorsRegistry, VisEditorsRegistry } from './vis_editors_registry';
 import { showNewVisModal } from './wizard';
 import { VisualizeLocatorDefinition } from '../common/locator';
@@ -93,6 +97,7 @@ import {
   setSavedObjectTagging,
 } from './services';
 import { VisualizeConstants } from '../common/constants';
+import { EditInLensAction } from './actions/edit_in_lens_action';
 
 /**
  * Interface for this plugin's returned setup/start contracts.
@@ -340,6 +345,9 @@ export class VisualizationsPlugin
     expressions.registerFunction(xyDimensionExpressionFunction);
     uiActions.registerTrigger(aggBasedVisualizationTrigger);
     uiActions.registerTrigger(visualizeEditorTrigger);
+    uiActions.registerTrigger(dashboardVisualizationPanelTrigger);
+    const editInLensAction = new EditInLensAction(data.query.timefilter.timefilter);
+    uiActions.addTriggerAction('CONTEXT_MENU_TRIGGER', editInLensAction);
     const embeddableFactory = new VisualizeEmbeddableFactory({ start });
     embeddable.registerEmbeddableFactory(VISUALIZE_EMBEDDABLE_TYPE, embeddableFactory);
 

src/plugins/visualizations/public/triggers/index.ts

@@ -22,5 +22,13 @@ export const aggBasedVisualizationTrigger: Trigger = {
   description: 'Triggered when user navigates from a agg based visualization to Lens.',
 };
 
+export const DASHBOARD_VISUALIZATION_PANEL_TRIGGER = 'DASHBOARD_VISUALIZATION_PANEL_TRIGGER';
+export const dashboardVisualizationPanelTrigger: Trigger = {
+  id: DASHBOARD_VISUALIZATION_PANEL_TRIGGER,
+  title: 'Convert legacy visualization panel on dashboard to Lens',
+  description: 'Triggered when user use "Edit in Lens" action on dashboard panel',
+};
+
 export const ACTION_CONVERT_TO_LENS = 'ACTION_CONVERT_TO_LENS';
 export const ACTION_CONVERT_AGG_BASED_TO_LENS = 'ACTION_CONVERT_AGG_BASED_TO_LENS';
+export const ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS = 'ACTION_CONVERT_DASHBOARD_PANEL_TO_LENS';

src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx

@@ -39,6 +39,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => ({
     },
   })),
   withKibana: jest.fn((comp) => comp),
+  reactToUiComponent: jest.fn(),
 }));
 
 jest.mock('../../services', () => ({