From 62ad819c70bf02591e79a36c8398ca386d7c004f Mon Sep 17 00:00:00 2001
From: Gidi Meir Morris <github@gidi.io>
Date: Tue, 7 Apr 2020 13:05:30 +0100
Subject: [PATCH] use health check in alert add/edit

---
 .../alert_action_health_check.test.tsx        | 136 ++++++++++++++++++
 .../components/alert_action_health_check.tsx  | 117 +++++++++++++++
 .../alert_action_security_call_out.test.tsx   |  78 ----------
 .../alert_action_security_call_out.tsx        |  78 ----------
 .../sections/alert_form/alert_add.tsx         |  97 ++++++-------
 .../sections/alert_form/alert_edit.tsx        | 127 ++++++++--------
 6 files changed, 366 insertions(+), 267 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.test.tsx
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.tsx
 delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.test.tsx
 delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.tsx

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.test.tsx
new file mode 100644
index 0000000000000..08310627b28a0
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.test.tsx
@@ -0,0 +1,136 @@
+/*
+ * 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 from 'react';
+import { render } from '@testing-library/react';
+
+import { AlertActionHealthCheck } from './alert_action_health_check';
+
+import { act } from 'react-dom/test-utils';
+import { httpServiceMock } from '../../../../../../src/core/public/mocks';
+
+const docLinks = { ELASTIC_WEBSITE_URL: 'elastic.co/', DOC_LINK_VERSION: 'current' };
+
+const http = httpServiceMock.createStartContract();
+
+describe('alert creation health check', () => {
+  test('renders spinner while health is loading', async () => {
+    http.get.mockImplementationOnce(() => new Promise(() => {}));
+
+    const { queryByText, container } = render(
+      <AlertActionHealthCheck action="creation" http={http} docLinks={docLinks}>
+        <p>{'shouldnt render'}</p>
+      </AlertActionHealthCheck>
+    );
+    await act(async () => {
+      // wait for useEffect to run
+    });
+
+    expect(container.getElementsByClassName('euiLoadingSpinner').length).toBe(1);
+    expect(queryByText('shouldnt render')).not.toBeInTheDocument();
+  });
+
+  it('renders children if keys are enabled', async () => {
+    http.get.mockResolvedValue({ isSufficientlySecure: true, hasPermanentEncryptionKey: true });
+
+    const { queryByText } = render(
+      <AlertActionHealthCheck action="creation" http={http} docLinks={docLinks}>
+        <p>{'should render'}</p>
+      </AlertActionHealthCheck>
+    );
+    await act(async () => {
+      // wait for useEffect to run
+    });
+    expect(queryByText('should render')).toBeInTheDocument();
+  });
+
+  test('renders warning if keys are disabled', async () => {
+    http.get.mockImplementationOnce(async () => ({
+      isSufficientlySecure: false,
+      hasPermanentEncryptionKey: true,
+    }));
+
+    const { queryAllByText, queryByTitle } = render(
+      <AlertActionHealthCheck action="creation" http={http} docLinks={docLinks}>
+        <p>{'should render'}</p>
+      </AlertActionHealthCheck>
+    );
+    await act(async () => {
+      // wait for useEffect to run
+    });
+
+    const [description, action] = queryAllByText(/TLS/i);
+    expect(description.textContent).toMatchInlineSnapshot(
+      `"Alert creation requires TLS between Elasticsearch and Kibana."`
+    );
+
+    expect(action.textContent).toMatchInlineSnapshot(`"enable TLS"`);
+
+    const actionLink = queryByTitle(action.textContent!);
+    expect(actionLink!.getAttribute('href')).toMatchInlineSnapshot(
+      `"elastic.co/guide/en/kibana/current/configuring-tls.html"`
+    );
+  });
+
+  test('renders warning if encryption key is ephemeral', async () => {
+    http.get.mockImplementationOnce(async () => ({
+      isSufficientlySecure: true,
+      hasPermanentEncryptionKey: false,
+    }));
+
+    const { queryAllByText, queryByTitle } = render(
+      <AlertActionHealthCheck action="creation" http={http} docLinks={docLinks}>
+        <p>{'should render'}</p>
+      </AlertActionHealthCheck>
+    );
+    await act(async () => {
+      // wait for useEffect to run
+    });
+
+    const [description, action] = queryAllByText(/Encryption/i);
+
+    expect(description.textContent).toMatchInlineSnapshot(
+      `"Alert creation requires a permanent Encryption Key."`
+    );
+
+    expect(action.textContent).toMatchInlineSnapshot(`"Configure an Encryption Key"`);
+
+    const actionLink = queryByTitle(action.textContent!);
+    expect(actionLink!.getAttribute('href')).toMatchInlineSnapshot(
+      `"elastic.co/guide/en/kibana/current/alert-action-settings-kb.html#general-alert-action-settings"`
+    );
+  });
+
+  test('renders warning if encryption key is ephemeral and keys are disabled', async () => {
+    http.get.mockImplementationOnce(async () => ({
+      isSufficientlySecure: false,
+      hasPermanentEncryptionKey: false,
+    }));
+
+    const { queryAllByText, queryByTitle } = render(
+      <AlertActionHealthCheck action="creation" http={http} docLinks={docLinks}>
+        <p>{'should render'}</p>
+      </AlertActionHealthCheck>
+    );
+    await act(async () => {
+      // wait for useEffect to run
+    });
+
+    const [description, action] = queryAllByText(/TLS/i);
+
+    expect(description.textContent).toMatchInlineSnapshot(
+      `"Alert creation requires TLS between Elasticsearch and Kibana, and a permanent Encryption Key."`
+    );
+
+    expect(action.textContent).toMatchInlineSnapshot(
+      `"enable TLS and configure an Encryption Key"`
+    );
+
+    const actionLink = queryByTitle(action.textContent!);
+    expect(actionLink!.getAttribute('href')).toMatchInlineSnapshot(
+      `"elastic.co/guide/en/kibana/current/alerting-getting-started.html#alerting-setup-prerequisites"`
+    );
+  });
+});
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.tsx
new file mode 100644
index 0000000000000..55108013597a0
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_health_check.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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, { Fragment } from 'react';
+import { Option, none, some, fold } from 'fp-ts/lib/Option';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { EuiCallOut, EuiButton, EuiLoadingSpinner } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { DocLinksStart, HttpSetup } from 'kibana/public';
+import { AlertingFrameworkHealth } from '../../types';
+import { health } from '../lib/alert_api';
+
+interface Props {
+  docLinks: Pick<DocLinksStart, 'ELASTIC_WEBSITE_URL' | 'DOC_LINK_VERSION'>;
+  action: string;
+  http: HttpSetup;
+}
+
+export const AlertActionHealthCheck: React.FunctionComponent<Props> = ({
+  docLinks,
+  http,
+  action,
+  children,
+}) => {
+  const [alertingHealth, setAlertingHealth] = React.useState<Option<AlertingFrameworkHealth>>(none);
+
+  React.useEffect(() => {
+    (async function() {
+      setAlertingHealth(some(await health({ http })));
+    })();
+  }, [http]);
+
+  return pipe(
+    alertingHealth,
+    fold(
+      () => <EuiLoadingSpinner size="m" />,
+      healthCheck => {
+        const [title, actionDescription, actionUrl] = getTextByHealthIssue(healthCheck, {
+          action,
+          docLinks,
+        });
+        return healthCheck?.isSufficientlySecure && healthCheck?.hasPermanentEncryptionKey ? (
+          <Fragment>{children}</Fragment>
+        ) : (
+          <EuiCallOut title={title} color="warning" iconType="iInCircle">
+            <EuiButton title={actionDescription} color="warning" href={actionUrl}>
+              {actionDescription}
+            </EuiButton>
+          </EuiCallOut>
+        );
+      }
+    )
+  );
+};
+
+function getTextByHealthIssue(
+  healthCheck: AlertingFrameworkHealth,
+  { docLinks, action }: Pick<Props, 'action' | 'docLinks'>
+) {
+  const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
+  return !healthCheck.isSufficientlySecure && !healthCheck.hasPermanentEncryptionKey
+    ? [
+        i18n.translate(
+          'xpack.triggersActionsUI.components.alertActionHealthCheck.tlsAndEncryptionError',
+          {
+            defaultMessage:
+              'Alert {action} requires TLS between Elasticsearch and Kibana, and a permanent Encryption Key.',
+            values: {
+              action,
+            },
+          }
+        ),
+        i18n.translate(
+          'xpack.triggersActionsUI.components.alertActionHealthCheck.tlsAndEncryptionErrorAction',
+          {
+            defaultMessage: 'enable TLS and configure an Encryption Key',
+          }
+        ),
+        `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alerting-getting-started.html#alerting-setup-prerequisites`,
+      ]
+    : !healthCheck.hasPermanentEncryptionKey
+    ? [
+        i18n.translate(
+          'xpack.triggersActionsUI.components.alertActionHealthCheck.encryptionError',
+          {
+            defaultMessage: 'Alert {action} requires a permanent Encryption Key.',
+            values: {
+              action,
+            },
+          }
+        ),
+        i18n.translate(
+          'xpack.triggersActionsUI.components.alertActionHealthCheck.encryptionErrorAction',
+          {
+            defaultMessage: 'Configure an Encryption Key',
+          }
+        ),
+        `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alert-action-settings-kb.html#general-alert-action-settings`,
+      ]
+    : [
+        i18n.translate('xpack.triggersActionsUI.components.alertActionHealthCheck.tlsError', {
+          defaultMessage: 'Alert {action} requires TLS between Elasticsearch and Kibana.',
+          values: {
+            action,
+          },
+        }),
+        i18n.translate('xpack.triggersActionsUI.components.alertActionHealthCheck.tlsErrorAction', {
+          defaultMessage: 'enable TLS',
+        }),
+        `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/configuring-tls.html`,
+      ];
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.test.tsx
deleted file mode 100644
index 85699cfbd750f..0000000000000
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * 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, { Fragment } from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { AlertActionSecurityCallOut } from './alert_action_security_call_out';
-
-import { EuiCallOut, EuiButton } from '@elastic/eui';
-import { act } from 'react-dom/test-utils';
-import { httpServiceMock } from '../../../../../../src/core/public/mocks';
-
-const docLinks = { ELASTIC_WEBSITE_URL: 'elastic.co/', DOC_LINK_VERSION: 'current' };
-
-const http = httpServiceMock.createStartContract();
-
-describe('alert action security call out', () => {
-  let useEffect: any;
-
-  const mockUseEffect = () => {
-    // make react execute useEffects despite shallow rendering
-    useEffect.mockImplementationOnce((f: Function) => f());
-  };
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useEffect = jest.spyOn(React, 'useEffect');
-    mockUseEffect();
-  });
-
-  test('renders nothing while health is loading', async () => {
-    http.get.mockImplementationOnce(() => new Promise(() => {}));
-
-    let component: ShallowWrapper | undefined;
-    await act(async () => {
-      component = shallow(
-        <AlertActionSecurityCallOut action="created" http={http} docLinks={docLinks} />
-      );
-    });
-
-    expect(component?.is(Fragment)).toBeTruthy();
-    expect(component?.html()).toBe('');
-  });
-
-  test('renders nothing if keys are enabled', async () => {
-    http.get.mockResolvedValue({ isSufficientlySecure: true });
-
-    let component: ShallowWrapper | undefined;
-    await act(async () => {
-      component = shallow(
-        <AlertActionSecurityCallOut action="created" http={http} docLinks={docLinks} />
-      );
-    });
-
-    expect(component?.is(Fragment)).toBeTruthy();
-    expect(component?.html()).toBe('');
-  });
-
-  test('renders the callout if keys are disabled', async () => {
-    http.get.mockResolvedValue({ isSufficientlySecure: false });
-
-    let component: ShallowWrapper | undefined;
-    await act(async () => {
-      component = shallow(
-        <AlertActionSecurityCallOut action="creation" http={http} docLinks={docLinks} />
-      );
-    });
-
-    expect(component?.find(EuiCallOut).prop('title')).toMatchInlineSnapshot(
-      `"Alert creation requires TLS between Elasticsearch and Kibana."`
-    );
-
-    expect(component?.find(EuiButton).prop('href')).toMatchInlineSnapshot(
-      `"elastic.co/guide/en/kibana/current/configuring-tls.html"`
-    );
-  });
-});
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.tsx
deleted file mode 100644
index f7a80202dff89..0000000000000
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/alert_action_security_call_out.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * 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, { Fragment } from 'react';
-import { Option, none, some, fold, filter } from 'fp-ts/lib/Option';
-import { pipe } from 'fp-ts/lib/pipeable';
-
-import { EuiCallOut, EuiButton, EuiSpacer } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-
-import { DocLinksStart, HttpSetup } from 'kibana/public';
-import { AlertingFrameworkHealth } from '../../types';
-import { health } from '../lib/alert_api';
-
-interface Props {
-  docLinks: Pick<DocLinksStart, 'ELASTIC_WEBSITE_URL' | 'DOC_LINK_VERSION'>;
-  action: string;
-  http: HttpSetup;
-}
-
-export const AlertActionSecurityCallOut: React.FunctionComponent<Props> = ({
-  http,
-  action,
-  docLinks,
-}) => {
-  const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
-
-  const [alertingHealth, setAlertingHealth] = React.useState<Option<AlertingFrameworkHealth>>(none);
-
-  React.useEffect(() => {
-    async function fetchSecurityConfigured() {
-      setAlertingHealth(some(await health({ http })));
-    }
-
-    fetchSecurityConfigured();
-  }, [http]);
-
-  return pipe(
-    alertingHealth,
-    filter(healthCheck => !healthCheck.isSufficientlySecure),
-    fold(
-      () => <Fragment />,
-      () => (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate(
-              'xpack.triggersActionsUI.components.alertActionSecurityCallOut.tlsDisabledTitle',
-              {
-                defaultMessage: 'Alert {action} requires TLS between Elasticsearch and Kibana.',
-                values: {
-                  action,
-                },
-              }
-            )}
-            color="warning"
-            size="s"
-            iconType="iInCircle"
-          >
-            <EuiButton
-              color="warning"
-              href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/configuring-tls.html`}
-            >
-              <FormattedMessage
-                id="xpack.triggersActionsUI.components.alertActionSecurityCallOut.enableTlsCta"
-                defaultMessage="Enable TLS"
-              />
-            </EuiButton>
-          </EuiCallOut>
-          <EuiSpacer />
-        </Fragment>
-      )
-    )
-  );
-};
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx
index e44e20751b315..3af092cea4827 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx
@@ -24,7 +24,7 @@ import { Alert, AlertAction, IErrorObject } from '../../../types';
 import { AlertForm, validateBaseProperties } from './alert_form';
 import { alertReducer } from './alert_reducer';
 import { createAlert } from '../../lib/alert_api';
-import { AlertActionSecurityCallOut } from '../../components/alert_action_security_call_out';
+import { AlertActionHealthCheck } from '../../components/alert_action_health_check';
 import { PLUGIN } from '../../constants/plugin';
 
 interface AlertAddProps {
@@ -153,7 +153,7 @@ export const AlertAdd = ({
             </h3>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <AlertActionSecurityCallOut
+        <AlertActionHealthCheck
           docLinks={docLinks}
           action={i18n.translate(
             'xpack.triggersActionsUI.sections.alertAdd.securityCalloutAction',
@@ -162,53 +162,54 @@ export const AlertAdd = ({
             }
           )}
           http={http}
-        />
-        <EuiFlyoutBody>
-          <AlertForm
-            alert={alert}
-            dispatch={dispatch}
-            errors={errors}
-            canChangeTrigger={canChangeTrigger}
-          />
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
-                {i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
-                  defaultMessage: 'Cancel',
-                })}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                color="secondary"
-                data-test-subj="saveAlertButton"
-                type="submit"
-                iconType="check"
-                isDisabled={hasErrors || hasActionErrors}
-                isLoading={isSaving}
-                onClick={async () => {
-                  setIsSaving(true);
-                  const savedAlert = await onSaveAlert();
-                  setIsSaving(false);
-                  if (savedAlert) {
-                    closeFlyout();
-                    if (reloadAlerts) {
-                      reloadAlerts();
+        >
+          <EuiFlyoutBody>
+            <AlertForm
+              alert={alert}
+              dispatch={dispatch}
+              errors={errors}
+              canChangeTrigger={canChangeTrigger}
+            />
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
+                  {i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
+                    defaultMessage: 'Cancel',
+                  })}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  fill
+                  color="secondary"
+                  data-test-subj="saveAlertButton"
+                  type="submit"
+                  iconType="check"
+                  isDisabled={hasErrors || hasActionErrors}
+                  isLoading={isSaving}
+                  onClick={async () => {
+                    setIsSaving(true);
+                    const savedAlert = await onSaveAlert();
+                    setIsSaving(false);
+                    if (savedAlert) {
+                      closeFlyout();
+                      if (reloadAlerts) {
+                        reloadAlerts();
+                      }
                     }
-                  }
-                }}
-              >
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
-                  defaultMessage="Save"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
+                  }}
+                >
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
+                    defaultMessage="Save"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </AlertActionHealthCheck>
       </EuiFlyout>
     </EuiPortal>
   );
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
index 3f27a7860bafa..2fc04b0b64901 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
@@ -26,7 +26,7 @@ import { Alert, AlertAction, IErrorObject } from '../../../types';
 import { AlertForm, validateBaseProperties } from './alert_form';
 import { alertReducer } from './alert_reducer';
 import { updateAlert } from '../../lib/alert_api';
-import { AlertActionSecurityCallOut } from '../../components/alert_action_security_call_out';
+import { AlertActionHealthCheck } from '../../components/alert_action_health_check';
 import { PLUGIN } from '../../constants/plugin';
 
 interface AlertEditProps {
@@ -137,7 +137,7 @@ export const AlertEdit = ({
             </h3>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <AlertActionSecurityCallOut
+        <AlertActionHealthCheck
           docLinks={docLinks}
           action={i18n.translate(
             'xpack.triggersActionsUI.sections.alertEdit.securityCalloutAction',
@@ -146,68 +146,69 @@ export const AlertEdit = ({
             }
           )}
           http={http}
-        />
-        <EuiFlyoutBody>
-          {hasActionsDisabled && (
-            <Fragment>
-              <EuiCallOut
-                size="s"
-                color="danger"
-                iconType="alert"
-                title={i18n.translate(
-                  'xpack.triggersActionsUI.sections.alertEdit.disabledActionsWarningTitle',
-                  { defaultMessage: 'This alert has actions that are disabled' }
-                )}
-              />
-              <EuiSpacer />
-            </Fragment>
-          )}
-          <AlertForm
-            alert={alert}
-            dispatch={dispatch}
-            errors={errors}
-            canChangeTrigger={false}
-            setHasActionsDisabled={setHasActionsDisabled}
-          />
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty data-test-subj="cancelSaveEditedAlertButton" onClick={closeFlyout}>
-                {i18n.translate('xpack.triggersActionsUI.sections.alertEdit.cancelButtonLabel', {
-                  defaultMessage: 'Cancel',
-                })}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                color="secondary"
-                data-test-subj="saveEditedAlertButton"
-                type="submit"
-                iconType="check"
-                isDisabled={hasErrors || hasActionErrors}
-                isLoading={isSaving}
-                onClick={async () => {
-                  setIsSaving(true);
-                  const savedAlert = await onSaveAlert();
-                  setIsSaving(false);
-                  if (savedAlert) {
-                    closeFlyout();
-                    if (reloadAlerts) {
-                      reloadAlerts();
-                    }
-                  }
-                }}
-              >
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.alertEdit.saveButtonLabel"
-                  defaultMessage="Save"
+        >
+          <EuiFlyoutBody>
+            {hasActionsDisabled && (
+              <Fragment>
+                <EuiCallOut
+                  size="s"
+                  color="danger"
+                  iconType="alert"
+                  title={i18n.translate(
+                    'xpack.triggersActionsUI.sections.alertEdit.disabledActionsWarningTitle',
+                    { defaultMessage: 'This alert has actions that are disabled' }
+                  )}
                 />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
+                <EuiSpacer />
+              </Fragment>
+            )}
+            <AlertForm
+              alert={alert}
+              dispatch={dispatch}
+              errors={errors}
+              canChangeTrigger={false}
+              setHasActionsDisabled={setHasActionsDisabled}
+            />
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty data-test-subj="cancelSaveEditedAlertButton" onClick={closeFlyout}>
+                  {i18n.translate('xpack.triggersActionsUI.sections.alertEdit.cancelButtonLabel', {
+                    defaultMessage: 'Cancel',
+                  })}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  fill
+                  color="secondary"
+                  data-test-subj="saveEditedAlertButton"
+                  type="submit"
+                  iconType="check"
+                  isDisabled={hasErrors || hasActionErrors}
+                  isLoading={isSaving}
+                  onClick={async () => {
+                    setIsSaving(true);
+                    const savedAlert = await onSaveAlert();
+                    setIsSaving(false);
+                    if (savedAlert) {
+                      closeFlyout();
+                      if (reloadAlerts) {
+                        reloadAlerts();
+                      }
+                    }
+                  }}
+                >
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertEdit.saveButtonLabel"
+                    defaultMessage="Save"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </AlertActionHealthCheck>
       </EuiFlyout>
     </EuiPortal>
   );