lazy load exposed flyout components

x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { lazy, Suspense } from 'react';
+import React, { lazy } from 'react';
 import { Switch, Route, Redirect, HashRouter, RouteComponentProps } from 'react-router-dom';
 import {
   ChromeStart,
@@ -15,7 +15,6 @@ import {
   ChromeBreadcrumb,
   CoreStart,
 } from 'kibana/public';
-import { EuiLoadingSpinner } from '@elastic/eui';
 import { BASE_PATH, Section, routeToAlertDetails } from './constants';
 import { AppContextProvider, useAppDependencies } from './app_context';
 import { hasShowAlertsCapability } from './lib/capabilities';
@@ -24,6 +23,7 @@ import { TypeRegistry } from './type_registry';
 import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { PluginStartContract as AlertingStart } from '../../../alerting/public';
+import { suspendedComponentWithProps } from './lib/suspended_component_with_props';
 
 const TriggersActionsUIHome = lazy(() => import('./home'));
 const AlertDetailsRoute = lazy(() =>
@@ -68,22 +68,15 @@ export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) =
     <Switch>
       <Route
         path={`${BASE_PATH}/:section(${sectionsRegex})`}
-        component={suspendedRouteComponent(TriggersActionsUIHome)}
+        component={suspendedComponentWithProps<RouteComponentProps<any>>(TriggersActionsUIHome)}
       />
       {canShowAlerts && (
-        <Route path={routeToAlertDetails} component={suspendedRouteComponent(AlertDetailsRoute)} />
+        <Route
+          path={routeToAlertDetails}
+          component={suspendedComponentWithProps<RouteComponentProps<any>>(AlertDetailsRoute)}
+        />
       )}
       <Redirect from={`${BASE_PATH}`} to={`${BASE_PATH}/${DEFAULT_SECTION}`} />
     </Switch>
   );
 };
-
-function suspendedRouteComponent<T = unknown>(
-  RouteComponent: React.ComponentType<RouteComponentProps<T>>
-) {
-  return (props: RouteComponentProps<T>) => (
-    <Suspense fallback={<EuiLoadingSpinner />}>
-      <RouteComponent {...props} />
-    </Suspense>
-  );
-}

x-pack/plugins/triggers_actions_ui/public/application/lib/suspended_component_with_props.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+export function suspendedComponentWithProps<T = unknown>(
+  ComponentToSuspend: React.ComponentType<T>
+) {
+  return (props: T) => (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <ComponentToSuspend {...props} />
+    </Suspense>
+  );
+}

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx

@@ -699,3 +699,6 @@ export const ActionForm = ({
     </Fragment>
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { ActionForm as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx

@@ -319,3 +319,6 @@ const UpgradeYourLicenseCallOut = ({ http }: { http: HttpSetup }) => (
     </EuiFlexGroup>
   </EuiCallOut>
 );
+
+// eslint-disable-next-line import/no-default-export
+export { ConnectorAddFlyout as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx

@@ -254,3 +254,6 @@ export const ConnectorEditFlyout = ({
     </EuiFlyout>
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { ConnectorEditFlyout as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -37,9 +37,9 @@ import {
 import { AlertInstancesRouteWithApi } from './alert_instances_route';
 import { ViewInApp } from './view_in_app';
 import { PLUGIN } from '../../../constants/plugin';
-import { AlertEdit } from '../../alert_form';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { routeToAlertDetails } from '../../../constants';
+import { AlertEdit } from '../../../sections';
 
 type AlertDetailsProps = {
   alert: Alert;

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx

@@ -219,3 +219,6 @@ const parseErrors: (errors: IErrorObject) => boolean = errors =>
     if (isObject(errorList)) return parseErrors(errorList as IErrorObject);
     return errorList.length >= 1;
   });
+
+// eslint-disable-next-line import/no-default-export
+export { AlertAdd as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx

@@ -210,3 +210,6 @@ export const AlertEdit = ({
     </EuiPortal>
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { AlertEdit as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

@@ -25,7 +25,7 @@ import { isEmpty } from 'lodash';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { useAppDependencies } from '../../../app_context';
 import { ActionType, Alert, AlertTableItem, AlertTypeIndex, Pagination } from '../../../../types';
-import { AlertAdd } from '../../alert_form';
+import { AlertAdd } from '../../../sections';
 import { BulkOperationPopover } from '../../common/components/bulk_operation_popover';
 import { AlertQuickEditButtonsWithApi as AlertQuickEditButtons } from '../../common/components/alert_quick_edit_buttons';
 import { CollapsedItemActionsWithApi as CollapsedItemActions } from './collapsed_item_actions';

x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { lazy } from 'react';
+import { suspendedComponentWithProps } from '../lib/suspended_component_with_props';
+
+export const AlertAdd = suspendedComponentWithProps(lazy(() => import('./alert_form/alert_add')));
+export const AlertEdit = suspendedComponentWithProps(lazy(() => import('./alert_form/alert_edit')));
+
+export const ConnectorAddFlyout = suspendedComponentWithProps(
+  lazy(() => import('./action_connector_form/connector_add_flyout'))
+);
+export const ConnectorEditFlyout = suspendedComponentWithProps(
+  lazy(() => import('./action_connector_form/connector_edit_flyout'))
+);
+export const ActionForm = suspendedComponentWithProps(
+  lazy(() => import('./action_connector_form/action_form'))
+);

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -9,13 +9,13 @@ import { Plugin } from './plugin';
 
 export { AlertsContextProvider } from './application/context/alerts_context';
 export { ActionsConnectorsContextProvider } from './application/context/actions_connectors_context';
-export { AlertAdd } from './application/sections/alert_form';
-export { ActionForm } from './application/sections/action_connector_form';
 export { AlertAction, Alert, AlertTypeModel, ActionType } from './types';
 export {
+  ActionForm,
+  AlertAdd,
   ConnectorAddFlyout,
   ConnectorEditFlyout,
-} from './application/sections/action_connector_form';
+} from './application/sections';
 
 export function plugin(ctx: PluginInitializerContext) {
   return new Plugin(ctx);