Redesign the "Add Panel" Experience

examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts

@@ -9,7 +9,11 @@
 import { i18n } from '@kbn/i18n';
 import { apiIsPresentationContainer } from '@kbn/presentation-containers';
 import { EmbeddableApiContext } from '@kbn/presentation-publishing';
-import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import {
+  IncompatibleActionError,
+  UiActionsStart,
+  ADD_PANEL_TRIGGER,
+} from '@kbn/ui-actions-plugin/public';
 import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
 import { ADD_DATA_TABLE_ACTION_ID, DATA_TABLE_ID } from './constants';
 
@@ -39,5 +43,5 @@ export const registerCreateDataTableAction = (uiActions: UiActionsStart) => {
         defaultMessage: 'Data table',
       }),
   });
-  uiActions.attachAction('ADD_PANEL_TRIGGER', ADD_DATA_TABLE_ACTION_ID);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_DATA_TABLE_ACTION_ID);
 };

examples/embeddable_examples/public/react_embeddables/embeddable_examples_grouping.ts

@@ -10,4 +10,5 @@ export const embeddableExamplesGrouping = {
   id: 'embeddableExamples',
   getIconType: () => 'documentation',
   getDisplayName: () => 'Embeddable examples',
+  order: -10,
 };

examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx

@@ -9,7 +9,11 @@
 import { i18n } from '@kbn/i18n';
 import { apiCanAddNewPanel } from '@kbn/presentation-containers';
 import { EmbeddableApiContext } from '@kbn/presentation-publishing';
-import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import {
+  IncompatibleActionError,
+  UiActionsStart,
+  ADD_PANEL_TRIGGER,
+} from '@kbn/ui-actions-plugin/public';
 import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
 import { ADD_EUI_MARKDOWN_ACTION_ID, EUI_MARKDOWN_ID } from './constants';
 import { MarkdownEditorSerializedState } from './types';
@@ -41,7 +45,7 @@ export const registerCreateEuiMarkdownAction = (uiActions: UiActionsStart) => {
         defaultMessage: 'EUI Markdown',
       }),
   });
-  uiActions.attachAction('ADD_PANEL_TRIGGER', ADD_EUI_MARKDOWN_ACTION_ID);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_EUI_MARKDOWN_ACTION_ID);
   if (uiActions.hasTrigger('ADD_CANVAS_ELEMENT_TRIGGER')) {
     // Because Canvas is not enabled in Serverless, this trigger might not be registered - only attach
     // the create action if the Canvas-specific trigger does indeed exist.

examples/embeddable_examples/public/react_embeddables/field_list/create_field_list_action.tsx

@@ -9,7 +9,7 @@
 import { i18n } from '@kbn/i18n';
 import { apiCanAddNewPanel } from '@kbn/presentation-containers';
 import { EmbeddableApiContext } from '@kbn/presentation-publishing';
-import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { IncompatibleActionError, ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
 import { UiActionsPublicStart } from '@kbn/ui-actions-plugin/public/plugin';
 import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
 import { ADD_FIELD_LIST_ACTION_ID, FIELD_LIST_ID } from './constants';
@@ -34,5 +34,5 @@ export const registerCreateFieldListAction = (uiActions: UiActionsPublicStart) =
         defaultMessage: 'Field list',
       }),
   });
-  uiActions.attachAction('ADD_PANEL_TRIGGER', ADD_FIELD_LIST_ACTION_ID);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_FIELD_LIST_ACTION_ID);
 };

examples/embeddable_examples/public/react_embeddables/saved_book/create_saved_book_action.tsx

@@ -10,7 +10,7 @@ import { CoreStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { apiIsPresentationContainer } from '@kbn/presentation-containers';
 import { EmbeddableApiContext } from '@kbn/presentation-publishing';
-import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { IncompatibleActionError, ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
 import { UiActionsPublicStart } from '@kbn/ui-actions-plugin/public/plugin';
 import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
 import {
@@ -67,5 +67,5 @@ export const registerCreateSavedBookAction = (uiActions: UiActionsPublicStart, c
         defaultMessage: 'Book',
       }),
   });
-  uiActions.attachAction('ADD_PANEL_TRIGGER', ADD_SAVED_BOOK_ACTION_ID);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_SAVED_BOOK_ACTION_ID);
 };

examples/embeddable_examples/public/react_embeddables/search/register_add_search_panel_action.tsx

@@ -8,7 +8,11 @@
 
 import { apiCanAddNewPanel } from '@kbn/presentation-containers';
 import { EmbeddableApiContext } from '@kbn/presentation-publishing';
-import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import {
+  IncompatibleActionError,
+  type UiActionsStart,
+  ADD_PANEL_TRIGGER,
+} from '@kbn/ui-actions-plugin/public';
 import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
 import { ADD_SEARCH_ACTION_ID, SEARCH_EMBEDDABLE_ID } from './constants';
 import { SearchSerializedState } from './types';
@@ -33,7 +37,7 @@ export const registerAddSearchPanelAction = (uiActions: UiActionsStart) => {
       );
     },
   });
-  uiActions.attachAction('ADD_PANEL_TRIGGER', ADD_SEARCH_ACTION_ID);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_SEARCH_ACTION_ID);
   if (uiActions.hasTrigger('ADD_CANVAS_ELEMENT_TRIGGER')) {
     // Because Canvas is not enabled in Serverless, this trigger might not be registered - only attach
     // the create action if the Canvas-specific trigger does indeed exist.

src/plugins/dashboard/public/triggers/index.ts → packages/kbn-ui-actions-browser/src/triggers/dashboard_app_panel_trigger.ts

@@ -5,16 +5,18 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 import { i18n } from '@kbn/i18n';
-import type { Trigger } from '@kbn/ui-actions-plugin/public';
+import { Trigger } from '.';
 
 export const ADD_PANEL_TRIGGER = 'ADD_PANEL_TRIGGER';
+
 export const addPanelMenuTrigger: Trigger = {
   id: ADD_PANEL_TRIGGER,
-  title: i18n.translate('dashboard.addPanelMenuTrigger.title', {
+  title: i18n.translate('uiActions.triggers.dashboard.addPanelMenu.title', {
     defaultMessage: 'Add panel menu',
   }),
-  description: i18n.translate('dashboard.addPanelMenuTrigger.description', {
+  description: i18n.translate('uiActions.triggers.dashboard.addPanelMenu.description', {
     defaultMessage: "A new action will appear to the dashboard's add panel menu",
   }),
 };

packages/kbn-ui-actions-browser/src/triggers/index.ts

@@ -11,3 +11,4 @@ export * from './row_click_trigger';
 export * from './default_trigger';
 export * from './visualize_field_trigger';
 export * from './visualize_geo_field_trigger';
+export * from './dashboard_app_panel_trigger';

src/plugins/dashboard/public/dashboard_actions/add_agg_vis_action.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EmbeddableApiContext, apiHasType, type HasType } from '@kbn/presentation-publishing';
+import { COMMON_EMBEDDABLE_GROUPING } from '@kbn/embeddable-plugin/public';
+import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { DASHBOARD_APP_ID } from '../dashboard_constants';
+import { pluginServices } from '../services/plugin_services';
+
+const ADD_AGG_VIS_ACTION_ID = 'ADD_AGG_VIS';
+
+type AddAggVisualizationPanelActionApi = HasType;
+
+const isApiCompatible = (api: unknown | null): api is AddAggVisualizationPanelActionApi => {
+  return apiHasType(api) && api.type === 'dashboard';
+};
+
+export class AddAggVisualizationPanelAction implements Action<EmbeddableApiContext> {
+  public readonly type = ADD_AGG_VIS_ACTION_ID;
+  public readonly id = ADD_AGG_VIS_ACTION_ID;
+  public readonly grouping = [COMMON_EMBEDDABLE_GROUPING.legacy];
+
+  public readonly order = 20;
+
+  private showNewVisModal;
+
+  constructor() {
+    ({
+      visualizations: { showNewVisModal: this.showNewVisModal },
+    } = pluginServices.getServices());
+  }
+
+  public getIconType() {
+    return 'visualizeApp';
+  }
+
+  public getDisplayName() {
+    return i18n.translate('dashboard.uiAction.addAggVis.displayName', {
+      defaultMessage: 'Aggregation based',
+    });
+  }
+
+  public async isCompatible({ embeddable }: EmbeddableApiContext) {
+    return isApiCompatible(embeddable);
+  }
+
+  public execute({ embeddable }: EmbeddableApiContext): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (!isApiCompatible(embeddable)) {
+        return reject(new IncompatibleActionError());
+      }
+
+      this.showNewVisModal({
+        originatingApp: DASHBOARD_APP_ID,
+        outsideVisualizeApp: true,
+        showAggsSelection: true,
+        onClose: resolve,
+      });
+    });
+  }
+}

src/plugins/dashboard/public/dashboard_actions/index.ts

@@ -8,6 +8,7 @@
 
 import { CoreStart } from '@kbn/core/public';
 import { CONTEXT_MENU_TRIGGER, PANEL_NOTIFICATION_TRIGGER } from '@kbn/embeddable-plugin/public';
+import { ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
 
 import { DashboardStartDependencies } from '../plugin';
 import { AddToLibraryAction } from './add_to_library_action';
@@ -21,6 +22,7 @@ import { LegacyLibraryNotificationAction } from './legacy_library_notification_a
 import { UnlinkFromLibraryAction } from './unlink_from_library_action';
 import { LegacyUnlinkFromLibraryAction } from './legacy_unlink_from_library_action';
 import { LibraryNotificationAction } from './library_notification_action';
+import { AddAggVisualizationPanelAction } from './add_agg_vis_action';
 
 interface BuildAllDashboardActionsProps {
   core: CoreStart;
@@ -46,6 +48,10 @@ export const buildAllDashboardActions = async ({
   uiActions.registerAction(panelLevelFiltersNotificationAction);
   uiActions.attachAction(PANEL_NOTIFICATION_TRIGGER, panelLevelFiltersNotificationAction.id);
 
+  const addAggVisualizationPanelAction = new AddAggVisualizationPanelAction();
+  uiActions.registerAction(addAggVisualizationPanelAction);
+  uiActions.attachAction(ADD_PANEL_TRIGGER, addAggVisualizationPanelAction.id);
+
   if (share) {
     const ExportCSVPlugin = new ExportCSVAction();
     uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, ExportCSVPlugin);

src/plugins/dashboard/public/dashboard_app/top_nav/add_panel_action_menu_items.test.ts

@@ -7,7 +7,7 @@
  */
 
 import { getMockPresentationContainer } from '@kbn/presentation-containers/mocks';
-import { getAddPanelActionMenuItems } from './add_panel_action_menu_items';
+import { getAddPanelActionMenuItemsGroup } from './add_panel_action_menu_items';
 
 describe('getAddPanelActionMenuItems', () => {
   it('returns the items correctly', async () => {
@@ -54,52 +54,62 @@ describe('getAddPanelActionMenuItems', () => {
         ],
       },
     ];
-    const [items, grouped] = getAddPanelActionMenuItems(
+    const grouped = getAddPanelActionMenuItemsGroup(
       getMockPresentationContainer(),
       registeredActions,
       jest.fn()
     );
-    expect(items).toStrictEqual([
-      {
-        'data-test-subj': 'create-action-Action name',
-        icon: 'pencil',
-        name: 'Action name',
-        onClick: expect.any(Function),
-        toolTipContent: 'Action tooltip',
-      },
-    ]);
+
     expect(grouped).toStrictEqual({
       groupedAddPanelAction: {
         id: 'groupedAddPanelAction',
         title: 'Custom group',
-        icon: 'logoElasticsearch',
+        placementPriority: 0,
+        'data-test-subj': 'dashboardEditorMenu-groupedAddPanelActionGroup',
         items: [
           {
             'data-test-subj': 'create-action-Action name 01',
             icon: 'pencil',
+            id: 'TEST_ACTION_01',
             name: 'Action name 01',
             onClick: expect.any(Function),
-            toolTipContent: 'Action tooltip',
+            description: 'Action tooltip',
+            placementPriority: 0,
           },
           {
             'data-test-subj': 'create-action-Action name',
             icon: 'empty',
+            id: 'TEST_ACTION_02',
+            name: 'Action name',
+            onClick: expect.any(Function),
+            description: 'Action tooltip',
+            placementPriority: 0,
+          },
+        ],
+      },
+      other: {
+        id: 'other',
+        title: 'Other',
+        placementPriority: -1,
+        'data-test-subj': 'dashboardEditorMenu-otherGroup',
+        items: [
+          {
+            id: 'ACTION_CREATE_ESQL_CHART',
             name: 'Action name',
+            icon: 'pencil',
+            description: 'Action tooltip',
             onClick: expect.any(Function),
-            toolTipContent: 'Action tooltip',
+            'data-test-subj': 'create-action-Action name',
+            placementPriority: 0,
           },
         ],
       },
     });
   });
 
   it('returns empty array if no actions have been registered', async () => {
-    const [items, grouped] = getAddPanelActionMenuItems(
-      getMockPresentationContainer(),
-      [],
-      jest.fn()
-    );
-    expect(items).toStrictEqual([]);
+    const grouped = getAddPanelActionMenuItemsGroup(getMockPresentationContainer(), [], jest.fn());
+
     expect(grouped).toStrictEqual({});
   });
 });