[uiActionsEnhanced] reduce bundle size

packages/kbn-optimizer/limits.yml

@@ -73,7 +73,7 @@ pageLoadAssetSize:
   transform: 41007
   triggersActionsUi: 100000
   uiActions: 97717
-  uiActionsEnhanced: 313011
+  uiActionsEnhanced: 32000
   upgradeAssistant: 81241
   uptime: 40825
   urlDrilldown: 70674

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

@@ -129,7 +129,7 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
 
   public readonly isCompatible = async (config: Config, context: ActionContext) => {
     const scope = this.getRuntimeVariables(context);
-    const { isValid, error } = urlDrilldownValidateUrlTemplate(config.url, scope);
+    const { isValid, error } = await urlDrilldownValidateUrlTemplate(config.url, scope);
 
     if (!isValid) {
       // eslint-disable-next-line no-console
@@ -139,7 +139,7 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
       return false;
     }
 
-    const url = this.buildUrl(config, context);
+    const url = await this.buildUrl(config, context);
     const validUrl = this.deps.externalUrl.validateUrl(url);
     if (!validUrl) {
       return false;
@@ -148,9 +148,9 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
     return true;
   };
 
-  private buildUrl(config: Config, context: ActionContext): string {
+  private async buildUrl(config: Config, context: ActionContext): Promise<string> {
     const doEncode = config.encodeUrl ?? true;
-    const url = urlDrilldownCompileUrl(
+    const url = await urlDrilldownCompileUrl(
       config.url.template,
       this.getRuntimeVariables(context),
       doEncode
@@ -159,7 +159,7 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
   }
 
   public readonly getHref = async (config: Config, context: ActionContext): Promise<string> => {
-    const url = this.buildUrl(config, context);
+    const url = await this.buildUrl(config, context);
     const validUrl = this.deps.externalUrl.validateUrl(url);
     if (!validUrl) {
       throw new Error(

x-pack/plugins/ui_actions_enhanced/public/custom_time_range_action.tsx

@@ -15,7 +15,6 @@ import {
 } from 'src/plugins/embeddable/public';
 import { Action, IncompatibleActionError } from '../../../../src/plugins/ui_actions/public';
 import { TimeRange } from '../../../../src/plugins/data/public';
-import { CustomizeTimeRangeModal } from './customize_time_range_modal';
 import { OpenModal, CommonlyUsedRange } from './types';
 
 export const CUSTOM_TIME_RANGE = 'CUSTOM_TIME_RANGE';
@@ -97,6 +96,9 @@ export class CustomTimeRangeAction implements Action<TimeRangeActionContext> {
 
     // Only here for typescript
     if (hasTimeRange(embeddable)) {
+      const CustomizeTimeRangeModal = await import('./customize_time_range_modal').then(
+        (m) => m.CustomizeTimeRangeModal
+      );
       const modalSession = this.openModal(
         <CustomizeTimeRangeModal
           onClose={() => modalSession.close()}

x-pack/plugins/ui_actions_enhanced/public/custom_time_range_badge.tsx

@@ -10,7 +10,6 @@ import { prettyDuration, commonDurationRanges } from '@elastic/eui';
 import { IEmbeddable, Embeddable, EmbeddableInput } from 'src/plugins/embeddable/public';
 import { Action, IncompatibleActionError } from '../../../../src/plugins/ui_actions/public';
 import { TimeRange } from '../../../../src/plugins/data/public';
-import { CustomizeTimeRangeModal } from './customize_time_range_modal';
 import { doesInheritTimeRange } from './does_inherit_time_range';
 import { OpenModal, CommonlyUsedRange } from './types';
 
@@ -77,6 +76,9 @@ export class CustomTimeRangeBadge implements Action<TimeBadgeActionContext> {
 
     // Only here for typescript
     if (hasTimeRange(embeddable)) {
+      const CustomizeTimeRangeModal = await import('./customize_time_range_modal').then(
+        (m) => m.CustomizeTimeRangeModal
+      );
       const modalSession = this.openModal(
         <CustomizeTimeRangeModal
           onClose={() => modalSession.close()}

x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/containers/drilldown_manager/create_public_drilldown_manager.tsx

@@ -7,11 +7,15 @@
 
 import * as React from 'react';
 import { DrilldownManagerDependencies, PublicDrilldownManagerProps } from '../../types';
-import { DrilldownManagerProvider } from '../context';
-import { DrilldownManager } from './drilldown_manager';
 
 export type PublicDrilldownManagerComponent = React.FC<PublicDrilldownManagerProps>;
 
+const LazyDrilldownManager = React.lazy(() =>
+  import('./drilldown_manager_with_provider').then((m) => ({
+    default: m.DrilldownManagerWithProvider,
+  }))
+);
+
 /**
  * This HOC creates a "public" `<DrilldownManager>` component `PublicDrilldownManagerComponent`,
  * which can be exported from plugin contract for other plugins to consume.
@@ -21,9 +25,9 @@ export const createPublicDrilldownManager = (
 ): PublicDrilldownManagerComponent => {
   const PublicDrilldownManager: PublicDrilldownManagerComponent = (drilldownManagerProps) => {
     return (
-      <DrilldownManagerProvider {...dependencies} {...drilldownManagerProps}>
-        <DrilldownManager />
-      </DrilldownManagerProvider>
+      <React.Suspense fallback={null}>
+        <LazyDrilldownManager {...dependencies} {...drilldownManagerProps} />
+      </React.Suspense>
     );
   };
 

x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/containers/drilldown_manager/drilldown_manager_with_provider.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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { DrilldownManagerProvider, DrilldownManagerProviderProps } from '../context';
+import { DrilldownManager } from './drilldown_manager';
+
+export const DrilldownManagerWithProvider: React.FC<DrilldownManagerProviderProps> = (props) => {
+  return (
+    <DrilldownManagerProvider {...props}>
+      <DrilldownManager />
+    </DrilldownManagerProvider>
+  );
+};

x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/containers/drilldown_manager/index.ts

@@ -5,5 +5,4 @@
  * 2.0.
  */
 
-export * from './drilldown_manager';
 export * from './create_public_drilldown_manager';