Allow variables in URL Drilldown title

src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_definition.ts

@@ -6,13 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { LicenseType } from '@kbn/licensing-plugin/public';
-import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
-import { PersistableStateDefinition } from '@kbn/kibana-utils-plugin/common';
-import {
+import type { LicenseType } from '@kbn/licensing-plugin/public';
+import type { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
+import type { PersistableStateDefinition, UiComponent } from '@kbn/kibana-utils-plugin/common';
+import type {
   ActionFactoryDefinition,
   BaseActionConfig,
   BaseActionFactoryContext,
+  SerializedAction,
   SerializedEvent,
 } from '../dynamic_actions';
 
@@ -109,10 +110,19 @@ export interface DrilldownDefinition<
 
   /**
    * Should return an internationalized name of the drilldown, which will be
-   * displayed to the user.
+   * displayed to the user as the name of drilldown factory when configuring a drilldown.
    */
   getDisplayName: () => string;
 
+  /**
+   * Name of the drilldown instance displayed to the user at the moment of
+   * drilldown execution. Should be internationalized.
+   */
+  readonly actionMenuItem?: UiComponent<{
+    config: Omit<SerializedAction<Config>, 'factoryId'>;
+    context: ExecutionContext | ActionExecutionContext<ExecutionContext>;
+  }>;
+
   /**
    * isCompatible during execution
    * Could be used to prevent drilldown from execution

src/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.ts

@@ -110,6 +110,7 @@ export class UiActionsServiceEnhancements
     createConfig,
     isConfigValid,
     getDisplayName,
+    actionMenuItem,
     euiIcon,
     execute,
     getHref,
@@ -143,6 +144,17 @@ export class UiActionsServiceEnhancements
         type: factoryId,
         getIconType: () => euiIcon,
         getDisplayName: () => serializedAction.name,
+        MenuItem: actionMenuItem
+          ? () => {
+              const comp = actionMenuItem();
+              return {
+                render: (el, { context }) => {
+                  comp.render(el, { context, config: serializedAction });
+                },
+                unmount: comp.unmount,
+              };
+            }
+          : undefined,
         execute: async (context) => await execute(serializedAction.config, context),
         getHref: getHref ? async (context) => getHref(serializedAction.config, context) : undefined,
         isCompatible: isCompatible

x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx

@@ -15,9 +15,12 @@ import {
   SELECT_RANGE_TRIGGER,
   VALUE_CLICK_TRIGGER,
 } from '@kbn/embeddable-plugin/public';
-import { ROW_CLICK_TRIGGER } from '@kbn/ui-actions-plugin/public';
+import { ActionExecutionContext, ROW_CLICK_TRIGGER } from '@kbn/ui-actions-plugin/public';
 import type { Query, Filter, TimeRange } from '@kbn/es-query';
-import { CollectConfigProps as CollectConfigPropsBase } from '@kbn/kibana-utils-plugin/public';
+import type {
+  CollectConfigProps as CollectConfigPropsBase,
+  UiComponent,
+} from '@kbn/kibana-utils-plugin/public';
 import {
   reactToUiComponent,
   UrlTemplateEditorVariable,
@@ -32,6 +35,7 @@ import {
   urlDrilldownCompileUrl,
   UiActionsEnhancedBaseActionFactoryContext as BaseActionFactoryContext,
 } from '@kbn/ui-actions-enhanced-plugin/public';
+import type { SerializedAction } from '@kbn/ui-actions-enhanced-plugin/common/types';
 import { txtUrlDrilldownDisplayName } from './i18n';
 import { getEventVariableList, getEventScopeValues } from './variables/event_variables';
 import { getContextVariableList, getContextScopeValues } from './variables/context_variables';
@@ -82,6 +86,27 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
 
   public readonly getDisplayName = () => txtUrlDrilldownDisplayName;
 
+  public readonly actionMenuItem: UiComponent<{
+    config: Omit<SerializedAction<UrlDrilldownConfig>, 'factoryId'>;
+    context: ActionContext | ActionExecutionContext<ActionContext>;
+  }> = reactToUiComponent(({ config, context }) => {
+    const [title, setTitle] = React.useState(config.name);
+    React.useEffect(() => {
+      let unmounted = false;
+      const variables = this.getRuntimeVariables(context);
+      urlDrilldownCompileUrl(title, variables, false)
+        .then((result) => {
+          if (unmounted) return;
+          if (title !== result) setTitle(result);
+        })
+        .catch(() => {});
+      return () => {
+        unmounted = true;
+      };
+    });
+    return <>{title}</>;
+  });
+
   public readonly euiIcon = 'link';
 
   supportedTriggers(): UrlTrigger[] {