[Ui Actions] Support emitting nested triggers and actions

[stacey-gammon]

There is an example of this in the ui_actions_explorer (once #58765 is merged).

export const createPhoneUserAction = (getUiActionsApi: () => Promise<UiActionsStart>) =>
  createAction<typeof ACTION_PHONE_USER>({
    type: ACTION_PHONE_USER,
    getDisplayName: () => 'Call phone number',
    isCompatible: async ({ user }) => user.phone !== undefined,
    execute: async ({ user }) => {
      // One option - execute the more specific action directly.
      // makePhoneCallAction.execute({ phone: user.phone });

      // Another option - emit the trigger and automatically get *all* the actions attached
      // to the phone number trigger.
      // TODO: we need to figure out the best way to handle these nested actions however, since
      // we don't want multiple context menu's to pop up.
      if (user.phone !== undefined) {
        (await getUiActionsApi()).executeTriggerActions(PHONE_TRIGGER, { phone: user.phone });
      }
    },

This causes two pop up menus to show up. We have a real life desire to support this as well for the VALUE_CLICK_TRIGGER. If the data emitted with the value click trigger can be transformed to a Filter shape then you should be able to execute any actions that are attached to VALUE_CLICK_TRIGGER as well as any actions attached to APPLY_FILTER_TRIGGER.

For instance, say you have an action that just works of field: string, value: string data - e.g. it just searches google or something www.google.com/s?q="${field} ${value}". If you click on a pie slice, you will have this data. You should be able to attach the search google action to that trigger, as well as the usual actions that rely on Filter context.

Implementation thoughts

First: introduce the concept of automatically executed actions. I think this could be useful for other reasons anyway (consider the situation of a HOVER trigger and wanting to attach it to an action that shows a tooltip and an action that shows a global threshold line - those are two actions that should be executed simultaneously, and not shown to the user in a context menu for them to choose from).

Second: introduce batching of emitted triggers to be execute on the next event loop.

Then, an auto executed action can be attached to VALUE_CLICK_TRIGGER - ACTION_EMIT_APPLY_FILTER_TRIGGER. This checks to see if the data can be transformed into a Filter shape. If it does, it uiActionApi.emit(APPLY_FILTER_TRIGGER, filters). Because this is auto executed, it gets emitted before the event loop, should get batched up and then the context menu shown to the user should contain both actions attached to VALUE_CLICK_TRIGGER and actions attached to APPLY_FILTER_TRIGGER

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[Dosant]

@stacey-gammon, I implemented some of these as part of POC of url drilldown with trigger picker: #70421

The case I wanted to support:

1. Url drilldown can be attached to Value_Click or Range_Select
2. Dashboard drilldown can be attached to Apply_Filter

I didn't see your implementation thoughts before implementing this in POC and took different approach of setting up trigger reaction
https://github.com/elastic/kibana/pull/70421/files#diff-5bf8e69dcdd6059e2b1d7993737f5530R137

⬆️ this was easy to implement and it fitted nicely, but your suggestion seem more elegant and support wider range of cases.

I think, I'd try to implement your thoughts.

1 correction:

introduce batching of emitted triggers to be execute on the next event loop.

This can't be a js event loop, because action execution is async.
this will have to be some kind of internal action execution loop.