From b585af80f0feb6b9495ac9cb4d7fc1b816b85321 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 31 Jan 2020 12:43:54 -0800
Subject: [PATCH 1/2] Some design fixes

---
 .../components/builtin_action_types/email.tsx |   9 --
 .../builtin_action_types/server_log.tsx       |   9 --
 .../components/builtin_action_types/slack.tsx |   9 --
 .../threshold/visualization.tsx               |   5 +-
 .../action_connector_form/_index.scss         |   3 +
 .../connector_add_modal.tsx                   |   2 +-
 .../sections/alert_add/alert_add.tsx          | 109 ++++++++++--------
 .../triggers_actions_ui/public/index.scss     |   3 +
 8 files changed, 69 insertions(+), 80 deletions(-)
 create mode 100644 x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss

diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
index 05fcfa8e5c9b4..eb1551b367d8f 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
@@ -416,15 +416,6 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps> = ({
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         fullWidth
         error={errors.to}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
index e6e833e4d0409..e5668e828aa15 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
@@ -102,15 +102,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps> =
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         id="loggingLevel"
         fullWidth
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
index 0f34ba1668017..d0a5c727f79be 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
@@ -168,15 +168,6 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps> = ({
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         id="slackMessage"
         fullWidth
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
index 9ba79bba8fef6..f91c3cf9a7708 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -280,17 +280,18 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({ alert }
           </Chart>
         ) : (
           <EuiCallOut
+            size="s"
             title={
               <FormattedMessage
                 id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.noDataTitle"
-                defaultMessage="No data"
+                defaultMessage="No data matches that query"
               />
             }
             color="warning"
           >
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.dataDoesNotExistTextMessage"
-              defaultMessage="Your index and condition did not return any data."
+              defaultMessage="Check your time range and filters to make sure they are correct"
             />
           </EuiCallOut>
         )}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss
new file mode 100644
index 0000000000000..f8fa882cd617d
--- /dev/null
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss
@@ -0,0 +1,3 @@
+.actConnectorModal {
+  z-index: 9000;
+}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
index 07ea7a1045fe4..2ce282e946a38 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
@@ -89,7 +89,7 @@ export const ConnectorAddModal = ({
       });
 
   return (
-    <EuiOverlayMask>
+    <EuiOverlayMask className="actConnectorModal">
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
index d2915484daefd..d84155e91e4ef 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
@@ -15,6 +15,7 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiFlyoutBody,
+  EuiPortal,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useAlertsContext } from '../../context/alerts_context';
@@ -112,57 +113,65 @@ export const AlertAdd = () => {
   }
 
   return (
-    <EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutAlertAddTitle" size="m" maxWidth={620}>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
-          <h3 id="flyoutTitle">
-            <FormattedMessage
-              defaultMessage="Create Alert"
-              id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
-            />
-          </h3>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
-      </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 && savedAlert.error) {
-                  return setServerError(savedAlert.error);
-                }
-                closeFlyout();
-                reloadAlerts();
-              }}
-            >
+    <EuiPortal>
+      <EuiFlyout
+        onClose={closeFlyout}
+        aria-labelledby="flyoutAlertAddTitle"
+        size="m"
+        maxWidth={620}
+        ownFocus
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
+            <h3 id="flyoutTitle">
               <FormattedMessage
-                id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
-                defaultMessage="Save"
+                defaultMessage="Create Alert"
+                id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
               />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
+            </h3>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
+        </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 && savedAlert.error) {
+                    return setServerError(savedAlert.error);
+                  }
+                  closeFlyout();
+                  reloadAlerts();
+                }}
+              >
+                <FormattedMessage
+                  id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
+                  defaultMessage="Save"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </EuiPortal>
   );
 };
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
index 6faad81630b2b..810176a57f9e3 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
+++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
@@ -3,3 +3,6 @@
 
 // Styling within the app
 @import '../np_ready/public/application/sections/actions_connectors_list/components/index';
+
+@import '../np_ready/public/application/sections/action_connector_form/index';
+

From 462a0c51376d9bea054b600c713af55fb46771f1 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 31 Jan 2020 13:26:15 -0800
Subject: [PATCH 2/2] alerts empty prompt

---
 .../alerts_list/components/alerts_list.tsx    | 62 ++++++++++++++++---
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
index 32e9532462c2a..0fcf987ba3273 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -6,7 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
@@ -15,6 +15,8 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
+  EuiEmptyPrompt,
+  EuiTitle,
 } from '@elastic/eui';
 
 import { AlertsContextProvider } from '../../../context/alerts_context';
@@ -228,10 +230,47 @@ export const AlertsList: React.FunctionComponent = () => {
     );
   }
 
-  return (
-    <section data-test-subj="alertsList">
-      <EuiSpacer size="m" />
-      <EuiFlexGroup>
+  const emptyPrompt = (
+    <EuiEmptyPrompt
+      iconType="watchesApp"
+      data-test-subj="createFirstConnectorEmptyPrompt"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyTitle"
+            defaultMessage="Create your first alert"
+          />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyDesc"
+            defaultMessage="Recieve an alert through email, slack or other connectors when a certain trigger is hit"
+          />
+        </p>
+      }
+      actions={
+        <EuiButton
+          data-test-subj="createFirstActionButton"
+          key="create-action"
+          fill
+          iconType="plusInCircle"
+          iconSide="left"
+          onClick={() => setAlertFlyoutVisibility(true)}
+        >
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyButton"
+            defaultMessage="Create alert"
+          />
+        </EuiButton>
+      }
+    />
+  );
+
+  const table = (
+    <Fragment>
+      <EuiFlexGroup gutterSize="s">
         {selectedIds.length > 0 && canDelete && (
           <EuiFlexItem grow={false}>
             <BulkActionPopover
@@ -260,12 +299,12 @@ export const AlertsList: React.FunctionComponent = () => {
             }}
             placeholder={i18n.translate(
               'xpack.triggersActionsUI.sections.alertsList.searchPlaceholderTitle',
-              { defaultMessage: 'Search...' }
+              { defaultMessage: 'Search' }
             )}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup>
+          <EuiFlexGroup gutterSize="s">
             {toolsRight.map((tool, index: number) => (
               <EuiFlexItem key={index} grow={false}>
                 {tool}
@@ -314,6 +353,15 @@ export const AlertsList: React.FunctionComponent = () => {
           setPage(changedPage);
         }}
       />
+    </Fragment>
+  );
+
+  return (
+    <section data-test-subj="alertsList">
+      <EuiSpacer size="m" />
+      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length !== 0 && table}
+      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length === 0 &&
+        emptyPrompt}
       <AlertsContextProvider
         value={{
           addFlyoutVisible: alertFlyoutVisible,