From ec1fed6cbeb561a62e01293c3b88b81cb7a5566f Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Tue, 5 Jul 2022 18:40:53 -0700
Subject: [PATCH 01/13] Drafts popover for Elasticsearch query rule

---
 .../expression/threshold_help_popover.tsx     | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx
new file mode 100644
index 0000000000000..f7f1f7718850b
--- /dev/null
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Component } from 'react';
+import { EuiButtonIcon, EuiLink, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface State {
+  isPopoverOpen: boolean;
+}
+
+export class QueryThresholdHelpPopover extends Component<{}, State> {
+  state: State = {
+    isPopoverOpen: false,
+  };
+
+  _togglePopover = () => {
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  _closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  _renderContent() {
+    return (
+      <div>
+        <EuiText grow={false}>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.intro"
+              defaultMessage="Test" />
+          </p>
+        </EuiText>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <EuiPopover
+        id="thresholdHelpPopover"
+        anchorPosition="leftCenter"
+        button={
+          <EuiButtonIcon
+            onClick={this._togglePopover}
+            iconType="documentation"
+            aria-label="Threshold and duration documentation"
+          />
+        }
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this._closePopover}
+        repositionOnScroll
+        ownFocus
+      >
+        <EuiPopoverTitle>
+          <FormattedMessage
+            id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
+            defaultMessage="Threshold and duration"
+          />
+        </EuiPopoverTitle>
+        {this._renderContent()}
+      </EuiPopover>
+    );
+  }
+}

From 8bd256766cc2766f2d3c07c1f4751f6e304aece8 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Thu, 7 Jul 2022 17:46:49 -0700
Subject: [PATCH 02/13] Add content to popover

---
 .../rule_common_expressions.tsx               |  6 +++--
 .../threshold_help_popover.tsx                | 27 +++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)
 rename x-pack/plugins/stack_alerts/public/alert_types/es_query/{expression => rule_common_expressions}/threshold_help_popover.tsx (52%)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
index 684b340170139..d6b577abe6cf3 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
@@ -18,6 +18,7 @@ import {
 import { CommonAlertParams } from '../types';
 import { DEFAULT_VALUES } from '../constants';
 import { TestQueryRow, TestQueryRowProps } from '../test_query_row';
+import { QueryThresholdHelpPopover } from './threshold_help_popover';
 
 export interface RuleCommonExpressionsProps {
   thresholdComparator?: CommonAlertParams['thresholdComparator'];
@@ -60,8 +61,9 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
         <h5>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.conditionsPrompt"
-            defaultMessage="Set the threshold and duration"
-          />
+            defaultMessage="Set the threshold and time window"
+          />{' '}
+          <QueryThresholdHelpPopover />
         </h5>
       </EuiTitle>
       <EuiSpacer size="s" />
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
similarity index 52%
rename from x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx
rename to x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index f7f1f7718850b..c506c36b6f72e 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { Component } from 'react';
-import { EuiButtonIcon, EuiLink, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+import { EuiButtonIcon, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 interface State {
@@ -36,8 +36,25 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
         <EuiText grow={false}>
           <p>
             <FormattedMessage
-              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.intro"
-              defaultMessage="Test" />
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
+              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold (for example, is above 1000)."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
+              defaultMessage="You must also specify how far back in time to search. 
+              To avoid gaps in detection, generally this time window should be greater than the value you chose for the {checkField} field."
+              values={{
+                checkField: <b>Check every</b>,
+              }}
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
+              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, an alert occurs only once."
+            />
           </p>
         </EuiText>
       </div>
@@ -53,7 +70,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           <EuiButtonIcon
             onClick={this._togglePopover}
             iconType="documentation"
-            aria-label="Threshold and duration documentation"
+            aria-label="Threshold and time window documentation"
           />
         }
         isOpen={this.state.isPopoverOpen}
@@ -64,7 +81,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
         <EuiPopoverTitle>
           <FormattedMessage
             id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
-            defaultMessage="Threshold and duration"
+            defaultMessage="Set the query threshold and time window"
           />
         </EuiPopoverTitle>
         {this._renderContent()}

From 261725bf9a35bd8ff7d3477eaff47cde0a7c5379 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Thu, 7 Jul 2022 18:11:19 -0700
Subject: [PATCH 03/13] Add i18n in aria-label

---
 .../rule_common_expressions/threshold_help_popover.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index c506c36b6f72e..c4c191b895492 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -8,6 +8,7 @@
 import React, { Component } from 'react';
 import { EuiButtonIcon, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 
 interface State {
   isPopoverOpen: boolean;
@@ -70,7 +71,9 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           <EuiButtonIcon
             onClick={this._togglePopover}
             iconType="documentation"
-            aria-label="Threshold and time window documentation"
+            aria-label={i18n.translate('xpack.stackAlerts.esQuery.ui.thresholdHelp.ariaLabel', {
+              defaultMessage: 'Help',
+            })}
           />
         }
         isOpen={this.state.isPopoverOpen}

From 1b7d0c0cacc4187b171150c7c7ab4164a85c8889 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Fri, 8 Jul 2022 12:53:16 -0700
Subject: [PATCH 04/13] Add titles and steps to popover

---
 .../threshold_help_popover.tsx                | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index c4c191b895492..a304992fb3e3c 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -35,26 +35,40 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
     return (
       <div>
         <EuiText grow={false}>
-          <p>
+          <h4>
             <FormattedMessage
-              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
-              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold (for example, is above 1000)."
+              id="stackAlerts.esQuery.ui.thresholdHelp.stepsTitle"
+              defaultMessage="Set the threshold and time window"
             />
-          </p>
-          <p>
+          </h4>
+          <ol>
+            <li>
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
+                defaultMessage="Specify a threshold value and a comparison operator. For example, is above 1000. Each time the rule runs, it checks whether the number of documents that match your query meets this threshold."
+              />
+            </li>
+            <li>
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
+                defaultMessage="Specify how far back in time to search. 
+                To avoid gaps in detection, generally this time window should be greater than the value you chose for the {checkField} field."
+                values={{
+                  checkField: <b>Check every</b>,
+                }}
+              />
+            </li>
+          </ol>
+          <h4>
             <FormattedMessage
-              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
-              defaultMessage="You must also specify how far back in time to search. 
-              To avoid gaps in detection, generally this time window should be greater than the value you chose for the {checkField} field."
-              values={{
-                checkField: <b>Check every</b>,
-              }}
+              id="stackAlerts.esQuery.ui.thresholdHelp.duplicatesTitle"
+              defaultMessage="Handling multiple matches of the same document"
             />
-          </p>
+          </h4>
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
-              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, an alert occurs only once."
+              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is omitted from threshold calculations. The rule uses the timestamp of the matches to avoid alerting on the same match multiple times."
             />
           </p>
         </EuiText>
@@ -83,8 +97,8 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
       >
         <EuiPopoverTitle>
           <FormattedMessage
-            id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
-            defaultMessage="Set the query threshold and time window"
+            id="xpack.stackAlerts.esQuery.ui.thresholdHelp.title"
+            defaultMessage="Elasticsearch query rule threshold and time window"
           />
         </EuiPopoverTitle>
         {this._renderContent()}

From 62650ad4239cd5ec75f1a2ef73820429ed484ef0 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Fri, 8 Jul 2022 13:08:46 -0700
Subject: [PATCH 05/13] Adds EuiCallout

---
 .../threshold_help_popover.tsx                | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index a304992fb3e3c..0d30b6b59400a 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -6,7 +6,14 @@
  */
 
 import React, { Component } from 'react';
-import { EuiButtonIcon, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiText,
+  EuiCallOut,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
@@ -35,12 +42,6 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
     return (
       <div>
         <EuiText grow={false}>
-          <h4>
-            <FormattedMessage
-              id="stackAlerts.esQuery.ui.thresholdHelp.stepsTitle"
-              defaultMessage="Set the threshold and time window"
-            />
-          </h4>
           <ol>
             <li>
               <FormattedMessage
@@ -59,19 +60,16 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
               />
             </li>
           </ol>
-          <h4>
-            <FormattedMessage
-              id="stackAlerts.esQuery.ui.thresholdHelp.duplicatesTitle"
-              defaultMessage="Handling multiple matches of the same document"
-            />
-          </h4>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiCallOut title="Multiple matches of the same document" iconType="pin">
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
-              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is omitted from threshold calculations. The rule uses the timestamp of the matches to avoid alerting on the same match multiple times."
+              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is considered in only the first threshold calculation. The rule uses the timestamp of the matches to avoid alerting on the same match multiple times."
             />
           </p>
-        </EuiText>
+        </EuiCallOut>
       </div>
     );
   }
@@ -98,7 +96,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
         <EuiPopoverTitle>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.thresholdHelp.title"
-            defaultMessage="Elasticsearch query rule threshold and time window"
+            defaultMessage="Set the threshold and time window"
           />
         </EuiPopoverTitle>
         {this._renderContent()}

From 4d777bdb41207a6d9c9a731ed1eb4112a78ef04f Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 13:40:27 -0700
Subject: [PATCH 06/13] Update
 x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx

---
 .../es_query/rule_common_expressions/threshold_help_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 0d30b6b59400a..5af89f553a67c 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -66,7 +66,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
-              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is considered in only the first threshold calculation. The rule uses the timestamp of the matches to avoid alerting on the same match multiple times."
+              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation."
             />
           </p>
         </EuiCallOut>

From 4dd7c252b5389a5710c977beda6616fdeb1491c6 Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 13:42:23 -0700
Subject: [PATCH 07/13] Update
 x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx

Co-authored-by: Ying Mao <ying.mao@elastic.co>
---
 .../es_query/rule_common_expressions/threshold_help_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 5af89f553a67c..0f1360f9d6f99 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -53,7 +53,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
               <FormattedMessage
                 id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
                 defaultMessage="Specify how far back in time to search. 
-                To avoid gaps in detection, generally this time window should be greater than the value you chose for the {checkField} field."
+                To avoid gaps in detection, generally this time window should be greater than or equal to the value you chose for the {checkField} field."
                 values={{
                   checkField: <b>Check every</b>,
                 }}

From 6bcd8eca796f3c2f79ee5f16cfdd53abd49a120b Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 14:48:03 -0700
Subject: [PATCH 08/13] Add max width style

---
 .../rule_common_expressions.tsx               |  4 +-
 .../threshold_help_popover.tsx                | 46 +++++++++++--------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
index d6b577abe6cf3..0f907597b6702 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
@@ -58,13 +58,13 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
   return (
     <>
       <EuiTitle size="xs">
-        <h5>
+        <h4>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.conditionsPrompt"
             defaultMessage="Set the threshold and time window"
           />{' '}
           <QueryThresholdHelpPopover />
-        </h5>
+        </h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <ThresholdExpression
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 0f1360f9d6f99..f2fa0664a928a 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -16,16 +16,24 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-
+import { css } from '@emotion/react';
 interface State {
   isPopoverOpen: boolean;
 }
 
+const PopoverStyles = css`
+  max-width: 400px;
+`;
+
 export class QueryThresholdHelpPopover extends Component<{}, State> {
   state: State = {
     isPopoverOpen: false,
   };
 
+  PopoverStyles = css`
+    max-width: 400px;
+  `;
+
   _togglePopover = () => {
     this.setState((prevState) => ({
       isPopoverOpen: !prevState.isPopoverOpen,
@@ -40,26 +48,24 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
 
   _renderContent() {
     return (
-      <div>
+      <div css={PopoverStyles}>
         <EuiText grow={false}>
-          <ol>
-            <li>
-              <FormattedMessage
-                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
-                defaultMessage="Specify a threshold value and a comparison operator. For example, is above 1000. Each time the rule runs, it checks whether the number of documents that match your query meets this threshold."
-              />
-            </li>
-            <li>
-              <FormattedMessage
-                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
-                defaultMessage="Specify how far back in time to search. 
-                To avoid gaps in detection, generally this time window should be greater than or equal to the value you chose for the {checkField} field."
-                values={{
-                  checkField: <b>Check every</b>,
-                }}
-              />
-            </li>
-          </ol>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
+              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold. For example, IS ABOVE 1000."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
+              defaultMessage="The time window indicates how far back in time to search. 
+              To avoid gaps in detection, generally this value should be greater than or equal to the value you chose for the {checkField} field."
+              values={{
+                checkField: <b>Check every</b>,
+              }}
+            />
+          </p>
         </EuiText>
         <EuiSpacer size="m" />
         <EuiCallOut title="Multiple matches of the same document" iconType="pin">

From d26a6da8a004a9e7ea2ad80e81ac17553d061ea9 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 17:02:53 -0700
Subject: [PATCH 09/13] Change anchorPosition

---
 .../es_query/rule_common_expressions/threshold_help_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index f2fa0664a928a..0edaa6cdc2287 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -84,7 +84,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
     return (
       <EuiPopover
         id="thresholdHelpPopover"
-        anchorPosition="leftCenter"
+        anchorPosition="upLeft"
         button={
           <EuiButtonIcon
             onClick={this._togglePopover}

From c5c7a18673522c4fa55e42489dfecf5130dd4c36 Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 17:30:43 -0700
Subject: [PATCH 10/13] Fix text sizes

---
 .../rule_common_expressions/threshold_help_popover.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 0edaa6cdc2287..358bc95966977 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -49,7 +49,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
   _renderContent() {
     return (
       <div css={PopoverStyles}>
-        <EuiText grow={false}>
+        <EuiText grow={false} size="s">
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
@@ -68,11 +68,11 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <EuiCallOut title="Multiple matches of the same document" iconType="pin">
+        <EuiCallOut iconType="pin" size="m">
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
-              defaultMessage="This rule type checks for duplication of document matches across multiple runs. If you configure the rule with a time window greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation."
+              defaultMessage="If the time window is greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation."
             />
           </p>
         </EuiCallOut>

From f06aac26c6d5de0076b65b3faa8e80a723d319ef Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Wed, 13 Jul 2022 17:40:34 -0700
Subject: [PATCH 11/13] Update
 x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx

---
 .../es_query/rule_common_expressions/threshold_help_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 358bc95966977..51ba64f1f8a04 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -53,7 +53,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           <p>
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
-              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold. For example, IS ABOVE 1000."
+              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold."
             />
           </p>
           <p>

From c6592f63ef07a7c2ec53e77b20378652ce4df52b Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Thu, 14 Jul 2022 15:37:01 -0700
Subject: [PATCH 12/13] Shorten text

---
 .../es_query/rule_common_expressions/threshold_help_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 51ba64f1f8a04..342b76e08e968 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -60,7 +60,7 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
             <FormattedMessage
               id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
               defaultMessage="The time window indicates how far back in time to search. 
-              To avoid gaps in detection, generally this value should be greater than or equal to the value you chose for the {checkField} field."
+              To avoid gaps in detection, set this value greater than or equal to the value you chose for the {checkField} field."
               values={{
                 checkField: <b>Check every</b>,
               }}

From 17182362a3ef10c1643383627fe9878f66dc61fc Mon Sep 17 00:00:00 2001
From: lcawl <lcawley@elastic.co>
Date: Thu, 14 Jul 2022 15:59:57 -0700
Subject: [PATCH 13/13] Add icon and text edits

---
 .../threshold_help_popover.tsx                   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
index 342b76e08e968..4a25a3cf0303b 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -68,14 +68,14 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <EuiCallOut iconType="pin" size="m">
-          <p>
-            <FormattedMessage
-              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches"
-              defaultMessage="If the time window is greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation."
-            />
-          </p>
-        </EuiCallOut>
+        <EuiCallOut
+          iconType="pin"
+          size="s"
+          title={i18n.translate('xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches', {
+            defaultMessage:
+              'If the time window is greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation.',
+          })}
+        />
       </div>
     );
   }