From 29cdbe68bd9f9abc6cbbc767b4085348f6675396 Mon Sep 17 00:00:00 2001
From: Jan Monschke <jan.monschke@elastic.co>
Date: Mon, 21 Oct 2024 13:49:39 +0200
Subject: [PATCH] [SecuritySolutuion] Fix misaligned toolbar in alerts table
 (#196804)

## Summary

Some items in the alerts table's toolbar were misaligned. This PR adds a
quick fix for these misaligned items but the actual fix will hopefully
be done in EUI (https://github.com/elastic/eui/pull/8085)

Before:
<img width="1265" alt="Screenshot 2024-10-18 at 09 47 53"
src="https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf">

After:
<img width="1274" alt="Screenshot 2024-10-18 at 09 47 14"
src="https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a">

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 082a89797edaa45a5d20b5378f8d521561800218)
---
 .../toolbar/components/alerts_count/alerts_count.tsx |  1 +
 .../toolbar/components/last_updated_at/index.tsx     | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx
index 50eb14ccfa3df..45ca382686752 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx
@@ -33,6 +33,7 @@ export const AlertsCount = ({ count }: { count: number }) => {
         border-right: ${euiTheme.border.thin};
         margin-right: ${euiTheme.size.s};
         padding-right: ${euiTheme.size.m};
+        align-self: center;
       `}
     >
       {alertCountText}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx
index f2631b9fc0f26..73005464a80c7 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx
@@ -9,6 +9,7 @@ import { EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { css } from '@emotion/react';
 import * as i18n from './translations';
 
 export interface LastUpdatedAtProps {
@@ -36,6 +37,12 @@ Updated.displayName = 'Updated';
 
 const prefix = ` ${i18n.UPDATED} `;
 
+const anchorStyles = {
+  css: css`
+    align-self: center;
+  `,
+};
+
 export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
   ({ compact = false, updatedAt, showUpdating = false }) => {
     const [date, setDate] = useState(Date.now());
@@ -64,7 +71,10 @@ export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
     }, [compact, date, showUpdating, updatedAt]);
 
     return (
-      <EuiToolTip content={<Updated date={date} prefix={prefix} updatedAt={updatedAt} />}>
+      <EuiToolTip
+        content={<Updated date={date} prefix={prefix} updatedAt={updatedAt} />}
+        anchorProps={anchorStyles}
+      >
         <EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at">
           {updateText}
         </EuiText>