From b15578cbdfd4a613d72bd50a5aee4cb09fb5c0fc Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Tue, 19 May 2020 14:58:01 -0400
Subject: [PATCH] [Uptime] Use React.lazy for alert type registration (#66829)

* Use React.lazy for alert type registration.

* Add typing to TLS alert component.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../alerts/alerts_containers/alert_monitor_status.tsx      | 7 +++++--
 .../overview/alerts/alerts_containers/alert_tls.tsx        | 5 ++++-
 .../uptime/public/lib/alert_types/monitor_status.tsx       | 5 ++++-
 x-pack/plugins/uptime/public/lib/alert_types/tls.tsx       | 5 +++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx
index 9dd27db0be607..77e0c98c0260d 100644
--- a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx
@@ -21,13 +21,13 @@ interface Props {
   };
 }
 
-export const AlertMonitorStatus = ({
+export const AlertMonitorStatus: React.FC<Props> = ({
   autocomplete,
   enabled,
   numTimes,
   setAlertParams,
   timerange,
-}: Props) => {
+}) => {
   const { filters, locations } = useSelector(selectMonitorStatusAlert);
   return (
     <AlertMonitorStatusComponent
@@ -41,3 +41,6 @@ export const AlertMonitorStatus = ({
     />
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { AlertMonitorStatus as default };
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx
index a2e1c1d43526c..c7657c34220fc 100644
--- a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx
@@ -10,7 +10,7 @@ import { AlertTlsComponent } from '../alert_tls';
 import { setAlertFlyoutVisible } from '../../../../state/actions';
 import { selectDynamicSettings } from '../../../../state/selectors';
 
-export const AlertTls = () => {
+export const AlertTls: React.FC<{}> = () => {
   const dispatch = useDispatch();
   const setFlyoutVisible = useCallback((value: boolean) => dispatch(setAlertFlyoutVisible(value)), [
     dispatch,
@@ -24,3 +24,6 @@ export const AlertTls = () => {
     />
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { AlertTls as default };
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
index bba7907d79c5d..08fc044bee201 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
+++ b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
@@ -11,7 +11,6 @@ import { isRight } from 'fp-ts/lib/Either';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { AlertTypeInitializer } from '.';
 import { StatusCheckExecutorParamsType } from '../../../common/runtime_types';
-import { AlertMonitorStatus } from '../../components/overview/alerts/alerts_containers';
 import { MonitorStatusTitle } from './monitor_status_title';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { MonitorStatusTranslations } from './translations';
@@ -57,6 +56,10 @@ export const validate = (alertParams: any) => {
 
 const { defaultActionMessage } = MonitorStatusTranslations;
 
+const AlertMonitorStatus = React.lazy(() =>
+  import('../../components/overview/alerts/alerts_containers/alert_monitor_status')
+);
+
 export const initMonitorStatusAlertType: AlertTypeInitializer = ({
   autocomplete,
 }): AlertTypeModel => ({
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
index 5e1b8cf233d70..15ac849fe871d 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
+++ b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
@@ -9,14 +9,15 @@ import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { TlsTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
-import { AlertTls } from '../../components/overview/alerts/alerts_containers/alert_tls';
 
 const { name, defaultActionMessage } = TlsTranslations;
 
 export const initTlsAlertType: AlertTypeInitializer = (): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
   iconClass: 'uptimeApp',
-  alertParamsExpression: () => <AlertTls />,
+  alertParamsExpression: React.lazy(() =>
+    import('../../components/overview/alerts/alerts_containers/alert_tls')
+  ),
   name,
   validate: () => ({ errors: {} }),
   defaultActionMessage,