From 401425e35ca4d914ec4a4754f126fe621115bd62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 3 Oct 2024 08:45:24 +0100
Subject: [PATCH] chore: event timeline help icon (#8345)

https://linear.app/unleash/issue/2-2717/help-icon-in-the-event-timeline-component

Adds an help icon to the event timeline.

<img width="108" alt="image"
src="https://github.com/user-attachments/assets/261fd14a-4d33-4bae-ae2e-92d1dc47db6b">

<img width="332" alt="image"
src="https://github.com/user-attachments/assets/85c827d1-39e9-47ef-9602-7f2ea207e5ea">
---
 .../EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
index b44f63c891..1e44005da5 100644
--- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -13,6 +13,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useEventTimelineContext } from '../EventTimelineContext';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 const StyledCol = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -33,6 +34,8 @@ const StyledFilter = styled(TextField)(({ theme }) => ({
 }));
 
 const StyledTimelineEventsCount = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
     marginTop: theme.spacing(0.25),
 }));
 
@@ -68,6 +71,7 @@ export const EventTimelineHeader = ({
                 <StyledTimelineEventsCount>
                     {totalEvents} event
                     {totalEvents === 1 ? '' : 's'}
+                    <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
                 </StyledTimelineEventsCount>
                 <StyledFilter
                     select