[APM] Lazy-load alert triggers (#68806) (#68830)

Use `React.lazy` to load the alert triggers so the code doesn't load until the alert flyout is opened.

Fixes #66189.

Author: smith

x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx

@@ -116,3 +116,8 @@ export function ErrorRateAlertTrigger(props: Props) {
     />
   );
 }
+
+// Default export is required for React.lazy loading
+//
+// eslint-disable-next-line import/no-default-export
+export default ErrorRateAlertTrigger;

x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx

@@ -175,3 +175,8 @@ export function TransactionDurationAlertTrigger(props: Props) {
     />
   );
 }
+
+// Default export is required for React.lazy loading
+//
+// eslint-disable-next-line import/no-default-export
+export default TransactionDurationAlertTrigger;

x-pack/plugins/apm/public/plugin.ts

@@ -5,40 +5,38 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { lazy } from 'react';
+import { ConfigSchema } from '.';
 import {
   AppMountParameters,
   CoreSetup,
   CoreStart,
+  DEFAULT_APP_CATEGORIES,
   Plugin,
   PluginInitializerContext,
 } from '../../../../src/core/public';
-import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
-
-import {
-  PluginSetupContract as AlertingPluginPublicSetup,
-  PluginStartContract as AlertingPluginPublicStart,
-} from '../../alerts/public';
-import { FeaturesPluginSetup } from '../../features/public';
 import {
   DataPublicPluginSetup,
   DataPublicPluginStart,
 } from '../../../../src/plugins/data/public';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import {
+  PluginSetupContract as AlertingPluginPublicSetup,
+  PluginStartContract as AlertingPluginPublicStart,
+} from '../../alerts/public';
+import { FeaturesPluginSetup } from '../../features/public';
 import { LicensingPluginSetup } from '../../licensing/public';
 import {
   TriggersAndActionsUIPublicPluginSetup,
   TriggersAndActionsUIPublicPluginStart,
 } from '../../triggers_actions_ui/public';
-import { ConfigSchema } from '.';
-import { createCallApmApi } from './services/rest/createCallApmApi';
-import { featureCatalogueEntry } from './featureCatalogueEntry';
 import { AlertType } from '../common/alert_types';
-import { ErrorRateAlertTrigger } from './components/shared/ErrorRateAlertTrigger';
-import { TransactionDurationAlertTrigger } from './components/shared/TransactionDurationAlertTrigger';
+import { featureCatalogueEntry } from './featureCatalogueEntry';
+import { createCallApmApi } from './services/rest/createCallApmApi';
+import { createStaticIndexPattern } from './services/rest/index_pattern';
 import { setHelpExtension } from './setHelpExtension';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
-import { createStaticIndexPattern } from './services/rest/index_pattern';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -112,7 +110,9 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
         defaultMessage: 'Error rate',
       }),
       iconClass: 'bell',
-      alertParamsExpression: ErrorRateAlertTrigger,
+      alertParamsExpression: lazy(() =>
+        import('./components/shared/ErrorRateAlertTrigger')
+      ),
       validate: () => ({
         errors: [],
       }),
@@ -125,7 +125,9 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
         defaultMessage: 'Transaction duration',
       }),
       iconClass: 'bell',
-      alertParamsExpression: TransactionDurationAlertTrigger,
+      alertParamsExpression: lazy(() =>
+        import('./components/shared/TransactionDurationAlertTrigger')
+      ),
       validate: () => ({
         errors: [],
       }),