chore: event timeline tooltips

Unleash · Sep 20, 2024 · a413a38 · a413a38
1 parent 6d51213
commit a413a38
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 118 deletions.
diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import type { EventSchemaType } from 'openapi';
+import type { EventSchema, EventSchemaType } from 'openapi';
 import { useState } from 'react';
 import { startOfDay, sub } from 'date-fns';
 import type { IEnvironment } from 'interfaces/environments';
@@ -11,6 +11,11 @@ import {
     timeSpanOptions,
 } from './EventTimelineHeader/EventTimelineHeader';
 
+export type EnrichedEvent = EventSchema & {
+    label: string;
+    description: string;
+};
+
 const StyledRow = styled('div')({
     display: 'flex',
     flexDirection: 'row',
@@ -91,7 +96,7 @@ export const EventTimeline = () => {
     const endDate = new Date();
     const startDate = sub(endDate, timeSpan.value);
 
-    const { events } = useEventSearch(
+    const { events: baseEvents } = useEventSearch(
         {
             from: `IS:${toISODateString(startOfDay(startDate))}`,
             to: `IS:${toISODateString(endDate)}`,
@@ -100,6 +105,8 @@ export const EventTimeline = () => {
         { refreshInterval: 10 * 1000 },
     );
 
+    const events = baseEvents as EnrichedEvent[];
+
     const filteredEvents = events.filter(
         (event) =>
             new Date(event.createdAt).getTime() >= startDate.getTime() &&

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEvent/EventTimelineEvent.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEvent/EventTimelineEvent.tsx
@@ -1,4 +1,4 @@
-import type { EventSchema, EventSchemaType } from 'openapi';
+import type { EventSchemaType } from 'openapi';
 import { styled } from '@mui/material';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { EventTimelineEventTooltip } from './EventTimelineEventTooltip/EventTimelineEventTooltip';
@@ -8,6 +8,7 @@ import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
 import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined';
 import SegmentsIcon from '@mui/icons-material/DonutLargeOutlined';
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
+import type { EnrichedEvent } from '../EventTimeline';
 
 type DefaultEventVariant = 'secondary';
 type CustomEventVariant = 'success' | 'neutral';
@@ -76,7 +77,7 @@ const customEventVariants: Partial<
 };
 
 interface IEventTimelineEventProps {
-    event: EventSchema;
+    event: EnrichedEvent;
     startDate: Date;
     endDate: Date;
 }
@@ -97,6 +98,7 @@ export const EventTimelineEvent = ({
         <StyledEvent position={position}>
             <HtmlTooltip
                 title={<EventTimelineEventTooltip event={event} />}
+                maxWidth={320}
                 arrow
             >
                 <StyledEventCircle variant={variant}>

diff --git a/.../EventTimeline/EventTimelineEvent/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx b/.../EventTimeline/EventTimelineEvent/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx
@@ -1,9 +1,32 @@
+import { styled } from '@mui/material';
+import { Markdown } from 'component/common/Markdown/Markdown';
 import { useLocationSettings } from 'hooks/useLocationSettings';
-import type { EventSchema } from 'openapi';
 import { formatDateYMDHMS } from 'utils/formatDate';
+import type { EnrichedEvent } from '../../EventTimeline';
+
+const StyledTooltipHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing(1),
+    gap: theme.spacing(2),
+    flexWrap: 'wrap',
+}));
+
+const StyledTooltipTitle = styled('div')(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.smallBody,
+    wordBreak: 'break-word',
+    flex: 1,
+}));
+
+const StyledDateTime = styled('div')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    whiteSpace: 'nowrap',
+}));
 
 interface IEventTimelineEventTooltipProps {
-    event: EventSchema;
+    event: EnrichedEvent;
 }
 
 export const EventTimelineEventTooltip = ({
@@ -15,36 +38,13 @@ export const EventTimelineEventTooltip = ({
         locationSettings?.locale,
     );
 
-    if (event.type === 'feature-environment-enabled') {
-        return (
-            <div>
-                <small>{eventDateTime}</small>
-                <p>
-                    {event.createdBy} enabled {event.featureName} for the{' '}
-                    {event.environment} environment in project {event.project}
-                </p>
-            </div>
-        );
-    }
-    if (event.type === 'feature-environment-disabled') {
-        return (
-            <div>
-                <small>{eventDateTime}</small>
-                <p>
-                    {event.createdBy} disabled {event.featureName} for the{' '}
-                    {event.environment} environment in project {event.project}
-                </p>
-            </div>
-        );
-    }
-
     return (
-        <div>
-            <div>{eventDateTime}</div>
-            <div>{event.createdBy}</div>
-            <div>{event.type}</div>
-            <div>{event.featureName}</div>
-            <div>{event.environment}</div>
-        </div>
+        <>
+            <StyledTooltipHeader>
+                <StyledTooltipTitle>{event.label}</StyledTooltipTitle>
+                <StyledDateTime>{eventDateTime}</StyledDateTime>
+            </StyledTooltipHeader>
+            <Markdown>{event.description}</Markdown>
+        </>
     );
 };