[Examples plugin] Deprecated uiAction methods – Search panel rewrite (elastic#230400)

Solves partially elastic#227743

Author: olapawlus

examples/embeddable_examples/public/app/register_embeddable.tsx

@@ -12,7 +12,9 @@ import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
 // @ts-ignore
 import registerSearchEmbeddableSource from '../react_embeddables/search/register_search_embeddable?raw';
 // @ts-ignore
-import registerAttachActionSource from '../react_embeddables/search/register_add_search_panel_action?raw';
+import registerSearchPanelAction from '../react_embeddables/search/register_search_panel_action?raw';
+// @ts-ignore
+import createPanelAction from '../react_embeddables/search/create_search_panel_action?raw';
 // @ts-ignore
 import registerFieldListEmbeddableSource from '../react_embeddables/field_list/register_field_list_embeddable?raw';
 // @ts-ignore
@@ -50,14 +52,20 @@ export const RegisterEmbeddable = () => {
         <h2>Show embeddables in the Add panel menu</h2>
         <p>
           Add your own embeddables to <em>Add panel</em> menu by attaching an action to the{' '}
-          <strong>ADD_PANEL_TRIGGER</strong> trigger. Notice usage of <strong>grouping</strong> to
-          nest related panel types and avoid bloating <em>Add panel</em> menu. Please reach out to
+          <strong>ADD_PANEL_TRIGGER</strong> trigger. Register the action asynchronously to reduce
+          initial plugin bundle size. The example below uses <strong>addTriggerActionAsync </strong>
+          to register the action lazily. Notice usage of <strong>grouping</strong> to nest related
+          panel types and avoid bloating <em>Add panel</em> menu. Please reach out to
           @elastic/kibana-presentation team to coordinate menu updates.
         </p>
       </EuiText>
       <EuiSpacer size="s" />
       <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
-        {registerAttachActionSource}
+        {registerSearchPanelAction}
+      </EuiCodeBlock>
+      <EuiSpacer size="s" />
+      <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
+        {createPanelAction}
       </EuiCodeBlock>
 
       <EuiSpacer size="l" />

examples/embeddable_examples/public/plugin.ts

@@ -31,10 +31,10 @@ import { FIELD_LIST_ID } from './react_embeddables/field_list/constants';
 import { ADD_SAVED_BOOK_ACTION_ID } from './react_embeddables/saved_book/constants';
 import { ADD_FIELD_LIST_ACTION_ID } from './react_embeddables/field_list/constants';
 import { registerFieldListPanelPlacementSetting } from './react_embeddables/field_list/register_field_list_embeddable';
-import { registerAddSearchPanelAction } from './react_embeddables/search/register_add_search_panel_action';
 import { registerSearchEmbeddable } from './react_embeddables/search/register_search_embeddable';
 import { setKibanaServices } from './kibana_services';
 import { setupBookEmbeddable } from './react_embeddables/saved_book/setup_book_embeddable';
+import { registerSearchPanelAction } from './react_embeddables/search/register_search_panel_action';
 
 export interface SetupDeps {
   contentManagement: ContentManagementPublicSetup;
@@ -107,21 +107,22 @@ export class EmbeddableExamplesPlugin implements Plugin<void, void, SetupDeps, S
 
     registerFieldListPanelPlacementSetting(deps.dashboard);
 
+    registerSearchPanelAction(deps.uiActions);
+
     deps.uiActions.registerActionAsync(ADD_EUI_MARKDOWN_ACTION_ID, async () => {
       const { createEuiMarkdownAction } = await import(
         './react_embeddables/eui_markdown/create_eui_markdown_action'
       );
       return createEuiMarkdownAction();
     });
     deps.uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_EUI_MARKDOWN_ACTION_ID);
+
     if (deps.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.
       deps.uiActions.attachAction('ADD_CANVAS_ELEMENT_TRIGGER', ADD_EUI_MARKDOWN_ACTION_ID);
     }
 
-    registerAddSearchPanelAction(deps.uiActions);
-
     deps.uiActions.addTriggerActionAsync(ADD_PANEL_TRIGGER, ADD_DATA_TABLE_ACTION_ID, async () => {
       const { createDataTableAction } = await import(
         './react_embeddables/data_table/create_data_table_action'

examples/embeddable_examples/public/react_embeddables/search/create_search_panel_action.ts

@@ -0,0 +1,34 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { apiCanAddNewPanel } from '@kbn/presentation-containers';
+import { EmbeddableApiContext } from '@kbn/presentation-publishing';
+import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { SearchSerializedState } from './types';
+import { embeddableExamplesGrouping } from '../embeddable_examples_grouping';
+import { ADD_SEARCH_ACTION_ID, SEARCH_EMBEDDABLE_TYPE } from './constants';
+
+export const createSearchPanelAction = {
+  id: ADD_SEARCH_ACTION_ID,
+  grouping: [embeddableExamplesGrouping],
+  getDisplayName: () => 'Search example',
+  getIconType: () => 'search',
+  isCompatible: async ({ embeddable }: EmbeddableApiContext) => {
+    return apiCanAddNewPanel(embeddable);
+  },
+  execute: async ({ embeddable }: EmbeddableApiContext) => {
+    if (!apiCanAddNewPanel(embeddable)) throw new IncompatibleActionError();
+    embeddable.addNewPanel<SearchSerializedState>(
+      {
+        panelType: SEARCH_EMBEDDABLE_TYPE,
+      },
+      true
+    );
+  },
+};

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

@@ -0,0 +1,18 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { UiActionsStart, ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
+import { ADD_SEARCH_ACTION_ID } from './constants';
+
+export const registerSearchPanelAction = (uiActions: UiActionsStart) => {
+  uiActions.addTriggerActionAsync(ADD_PANEL_TRIGGER, ADD_SEARCH_ACTION_ID, async () => {
+    const { createSearchPanelAction } = await import('./create_search_panel_action');
+    return createSearchPanelAction;
+  });
+};