From 1794f2fab9cbec199454ef93bdadfe8bde156ea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Zolt=C3=A1n=20Szab=C3=B3?=
 <szabosteve@gmail.com>
Date: Tue, 15 Feb 2022 17:09:30 +0100
Subject: [PATCH 1/4] [ResponseOps] Adds tooltip to time window selector in ES
 query rule UI.

---
 .../public/alert_types/es_query/expression.tsx            | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
index a625d9c193cd65..6259f1451e2763 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -20,6 +20,7 @@ import {
   EuiText,
   EuiTitle,
   EuiLink,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DocLinksStart, HttpSetup } from 'kibana/public';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
@@ -384,6 +385,13 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
           setParam('timeWindowUnit', selectedWindowUnit)
         }
       />
+      <EuiIconTip
+        position="right"
+        type="questionInCircle"
+        content={i18n.translate('xpack.alertTypes.esQuery.forTheLastTooltip', {
+          defaultMessage: 'The data range defined here applies only to the first rule check.',
+        })}
+      />
       <EuiSpacer />
     </Fragment>
   );

From c53681e4f91c672e87583a87eb4853840457c804 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Zolt=C3=A1n=20Szab=C3=B3?=
 <szabosteve@gmail.com>
Date: Wed, 16 Feb 2022 11:15:30 +0100
Subject: [PATCH 2/4] Repositions tooltip.

---
 .../public/alert_types/es_query/expression.tsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
index 6259f1451e2763..9f677e2c511812 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -354,6 +354,13 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
             id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
             defaultMessage="When number of matches"
           />
+          <EuiIconTip
+            position="right"
+            type="questionInCircle"
+            content={i18n.translate('xpack.alertTypes.esQuery.forTheLastTooltip', {
+              defaultMessage: 'The time window defined below applies only to the first rule check.',
+            })}
+          />
         </h5>
       </EuiTitle>
       <EuiSpacer size="s" />
@@ -385,13 +392,6 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
           setParam('timeWindowUnit', selectedWindowUnit)
         }
       />
-      <EuiIconTip
-        position="right"
-        type="questionInCircle"
-        content={i18n.translate('xpack.alertTypes.esQuery.forTheLastTooltip', {
-          defaultMessage: 'The data range defined here applies only to the first rule check.',
-        })}
-      />
       <EuiSpacer />
     </Fragment>
   );

From 979c2a8054f3fe63723bc7f4db92a47da19238ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Zolt=C3=A1n=20Szab=C3=B3?=
 <szabosteve@gmail.com>
Date: Wed, 16 Feb 2022 16:13:35 +0100
Subject: [PATCH 3/4] Changes namespace for tooltip.

---
 .../stack_alerts/public/alert_types/es_query/expression.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
index 9f677e2c511812..3202893824bf35 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -357,7 +357,7 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
           <EuiIconTip
             position="right"
             type="questionInCircle"
-            content={i18n.translate('xpack.alertTypes.esQuery.forTheLastTooltip', {
+            content={i18n.translate('xpack.stackAlerts.esQuery.ui.conditionPrompt.toolTip', {
               defaultMessage: 'The time window defined below applies only to the first rule check.',
             })}
           />

From 3a8e58ede8ab66e449148a4ec61c4959e31fd0bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Zolt=C3=A1n=20Szab=C3=B3?=
 <szabosteve@gmail.com>
Date: Thu, 17 Feb 2022 12:51:54 +0100
Subject: [PATCH 4/4] Adjusts position of tooltip.

---
 .../alert_types/es_query/expression.tsx       | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
index 3202893824bf35..402d6fca7a1a9d 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -13,6 +13,8 @@ import { XJsonMode } from '@kbn/ace';
 import 'brace/theme/github';
 
 import {
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiButtonEmpty,
   EuiSpacer,
   EuiFormRow,
@@ -348,21 +350,31 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
         </EuiFormRow>
       )}
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
-            defaultMessage="When number of matches"
-          />
+      <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
+                defaultMessage="When number of matches"
+              />
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiIconTip
             position="right"
+            color="subdued"
             type="questionInCircle"
+            iconProps={{
+              className: 'eui-alignTop',
+            }}
             content={i18n.translate('xpack.stackAlerts.esQuery.ui.conditionPrompt.toolTip', {
               defaultMessage: 'The time window defined below applies only to the first rule check.',
             })}
           />
-        </h5>
-      </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <EuiSpacer size="s" />
       <ThresholdExpression
         data-test-subj="thresholdExpression"