Redesign the "Add Panel" Experience (#183764)

## Summary

Closes #144418

This PR introduces changes to the dashboard add panel selection
functionality, so that panel selection would now happen from within a
flyout, and as such panels are now grouped together logically.

With this implementation any panel that is intended to show up within
this new flyout is required to have either been registered leveraging
the ui action trigger `ADD_PANEL_TRIGGER` and have it's `grouping` value
defined or belong to a subset of visualization types (`PROMOTED`,
`TOOLS`, and `LEGACY`) that would automatically get grouped.

It's worth pointing out that because we can't control the order at which
UI actions gets registered, we won't always get the the panel groups in
the same order, for this specific reason ~a new optional property
(`placementPriority`) has been added in~ the property `order` is now
leveraged such that it allows a user registering a UI action define a
relative weight for where they'd like their group to show up. All
registered actions would be rendered in descending order considering all
`order` defined, in the case where no order is defined `0` is assumed
for the group. In addition an action which is registered without a
group, would automatically get assigned into a default group titled
"Other".

The search implemented within the add panel is rudimentary, checking if
the group titles and group item titles contain the input character; when
a group title is matched the entire group is remains highlighted, in the
case that the group isn't matched and it's just the group item, only
said item is highlighted within it's group.

## Visuals

#### Default view
<img width="2560" alt="Screenshot 2024-06-10 at 17 44 17"
src="https://github.com/elastic/kibana/assets/7893459/90aadf82-684a-4263-aecd-2843c3eff3c1">


#### Search match view
<img width="2560" alt="Screenshot 2024-06-10 at 17 45 11"
src="https://github.com/elastic/kibana/assets/7893459/5a766f29-a3b7-40e3-b1f7-8b423073cd87">


##### P.S.

This changes also includes changes to the display of certain panels;
- ML group has a new title i.e. *Machine Learning and Analytics*
- In serverless, the observability panels (SLO*) only shows as a
selection choice in the observability project type.


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
<!--
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
-->
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


<!--
### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->

---------

Co-authored-by: Catherine Liu <[email protected]>
Co-authored-by: kibanamachine <[email protected]>

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/index.ts

@@ -8,7 +8,6 @@
 
 import { CoreStart } from '@kbn/core/public';
 import { CONTEXT_MENU_TRIGGER, PANEL_NOTIFICATION_TRIGGER } from '@kbn/embeddable-plugin/public';
-
 import { DashboardStartDependencies } from '../plugin';
 import { AddToLibraryAction } from './add_to_library_action';
 import { LegacyAddToLibraryAction } from './legacy_add_to_library_action';

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',
+        order: 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',
+            order: 0,
           },
           {
             'data-test-subj': 'create-action-Action name',
             icon: 'empty',
+            id: 'TEST_ACTION_02',
+            name: 'Action name',
+            onClick: expect.any(Function),
+            description: 'Action tooltip',
+            order: 0,
+          },
+        ],
+      },
+      other: {
+        id: 'other',
+        title: 'Other',
+        order: -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',
+            order: 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({});
   });
 });

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

@@ -5,13 +5,35 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import type { ActionExecutionContext, Action } from '@kbn/ui-actions-plugin/public';
+
+import {
+  type ActionExecutionContext,
+  type Action,
+  addPanelMenuTrigger,
+} from '@kbn/ui-actions-plugin/public';
 import { PresentationContainer } from '@kbn/presentation-containers';
-import type {
-  EuiContextMenuPanelDescriptor,
-  EuiContextMenuPanelItemDescriptor,
-} from '@elastic/eui';
-import { addPanelMenuTrigger } from '../../triggers';
+import { COMMON_EMBEDDABLE_GROUPING } from '@kbn/embeddable-plugin/public';
+import type { IconType, CommonProps } from '@elastic/eui';
+import React, { type MouseEventHandler } from 'react';
+
+export interface PanelSelectionMenuItem extends Pick<CommonProps, 'data-test-subj'> {
+  id: string;
+  name: string;
+  icon: IconType;
+  onClick: MouseEventHandler;
+  description?: string;
+  isDisabled?: boolean;
+  isDeprecated?: boolean;
+  order: number;
+}
+
+export type GroupedAddPanelActions = Pick<
+  PanelSelectionMenuItem,
+  'id' | 'isDisabled' | 'data-test-subj' | 'order'
+> & {
+  title: string;
+  items: PanelSelectionMenuItem[];
+};
 
 const onAddPanelActionClick =
   (action: Action, context: ActionExecutionContext<object>, closePopover: () => void) =>
@@ -30,56 +52,66 @@ const onAddPanelActionClick =
     } else action.execute(context);
   };
 
-export type GroupedAddPanelActions = EuiContextMenuPanelDescriptor & {
-  icon?: string;
-};
-
-export const getAddPanelActionMenuItems = (
+export const getAddPanelActionMenuItemsGroup = (
   api: PresentationContainer,
   actions: Array<Action<object>> | undefined,
   closePopover: () => void
-): [EuiContextMenuPanelItemDescriptor[], Record<string, GroupedAddPanelActions>] => {
-  const ungrouped: EuiContextMenuPanelItemDescriptor[] = [];
+) => {
   const grouped: Record<string, GroupedAddPanelActions> = {};
 
   const context = {
     embeddable: api,
     trigger: addPanelMenuTrigger,
   };
 
-  const getMenuItem = (item: Action<object>) => {
+  const getMenuItem = (item: Action<object>): PanelSelectionMenuItem => {
     const actionName = item.getDisplayName(context);
 
     return {
+      id: item.id,
       name: actionName,
       icon:
         (typeof item.getIconType === 'function' ? item.getIconType(context) : undefined) ?? 'empty',
       onClick: onAddPanelActionClick(item, context, closePopover),
       'data-test-subj': `create-action-${actionName}`,
-      toolTipContent: item?.getDisplayNameTooltip?.(context),
+      description: item?.getDisplayNameTooltip?.(context),
+      order: item.order ?? 0,
     };
   };
 
   actions?.forEach((item) => {
     if (Array.isArray(item.grouping)) {
       item.grouping.forEach((group) => {
-        if (!grouped[group.id]) {
-          grouped[group.id] = {
-            id: group.id,
-            icon:
-              (typeof group.getIconType === 'function' ? group.getIconType(context) : undefined) ??
-              'empty',
-            title: group.getDisplayName ? group.getDisplayName(context) : undefined,
+        const groupId = group.id;
+        if (!grouped[groupId]) {
+          grouped[groupId] = {
+            id: groupId,
+            title: group.getDisplayName ? group.getDisplayName(context) : '',
+            'data-test-subj': `dashboardEditorMenu-${groupId}Group`,
+            order: group.order ?? 0,
             items: [],
           };
         }
 
         grouped[group.id]!.items!.push(getMenuItem(item));
       });
     } else {
-      ungrouped.push(getMenuItem(item));
+      // use other group as the default for definitions that don't have a group
+      const fallbackGroup = COMMON_EMBEDDABLE_GROUPING.other;
+
+      if (!grouped[fallbackGroup.id]) {
+        grouped[fallbackGroup.id] = {
+          id: fallbackGroup.id,
+          title: fallbackGroup.getDisplayName?.({ embeddable: api }) || '',
+          'data-test-subj': `dashboardEditorMenu-${fallbackGroup.id}Group`,
+          order: fallbackGroup.order || 0,
+          items: [],
+        };
+      }
+
+      grouped[fallbackGroup.id].items.push(getMenuItem(item));
     }
   });
 
-  return [ungrouped, grouped];
+  return grouped;
 };

src/plugins/dashboard/public/dashboard_app/top_nav/editor_menu.scss

@@ -3,4 +3,4 @@
   @include euiOverflowShadow;
   max-height: 60vh;
   overflow-y: scroll;
-}
+}