From ab7570d83133ee48d4e362b6c82195f971d7bd91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 10 Oct 2024 13:05:05 +0100 Subject: [PATCH 1/5] chore: use new signal meta properties in event timeline --- .../events/EventTimeline/EventTimeline.tsx | 24 +++++++++++-- .../EventTimelineEventCircle.tsx | 35 +++++++++++++++---- .../EventTimelineEventTooltip.tsx | 3 ++ 3 files changed, 52 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx index 9d4f85ccbcad..c55a5d9bb1f0 100644 --- a/frontend/src/component/events/EventTimeline/EventTimeline.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimeline.tsx @@ -14,12 +14,14 @@ export type TimelineEventType = 'signal' | EventSchemaType; type RawTimelineEvent = EventSchema | ISignalQuerySignal; -type TimelineEvent = { +export type TimelineEvent = { id: number; timestamp: number; type: TimelineEventType; label: string; summary: string; + icon?: string; + variant?: string; }; export type TimelineEventGroup = TimelineEvent[]; @@ -111,6 +113,9 @@ const getTimestamp = (event: RawTimelineEvent) => { const isInRange = (timestamp: number, startTime: number, endTime: number) => timestamp >= startTime && timestamp <= endTime; +const isValidString = (str: unknown): str is string => + typeof str === 'string' && str.trim().length > 0; + const getTimelineEvent = ( event: RawTimelineEvent, timestamp: number, @@ -122,10 +127,19 @@ const getTimelineEvent = ( sourceName = 'unknown source', sourceDescription, tokenName, + payload: { + unleash_title, + unleash_description, + unleash_icon, + unleash_variant, + }, } = event; - const label = `Signal: ${sourceName}`; - const summary = `Signal originated from **[${sourceName} (${tokenName})](/integrations/signals)** endpoint${sourceDescription ? `: ${sourceDescription}` : ''}`; + const title = unleash_title || sourceName; + const label = `Signal: ${title}`; + const summary = unleash_description + ? `Signal: **[${title}](/integrations/signals)** ${unleash_description}` + : `Signal originated from **[${sourceName} (${tokenName})](/integrations/signals)** endpoint${sourceDescription ? `: ${sourceDescription}` : ''}`; return { id, @@ -133,6 +147,10 @@ const getTimelineEvent = ( type: 'signal', label, summary, + ...(isValidString(unleash_icon) ? { icon: unleash_icon } : {}), + ...(isValidString(unleash_variant) + ? { variant: unleash_variant } + : {}), }; } diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx index 0b5e2fd761c5..ed8ef552e401 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx @@ -4,14 +4,18 @@ 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 { styled } from '@mui/material'; -import type { TimelineEventGroup, TimelineEventType } from '../EventTimeline'; +import { Icon, styled } from '@mui/material'; +import type { + TimelineEvent, + TimelineEventGroup, + TimelineEventType, +} from '../EventTimeline'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import type { HTMLAttributes } from 'react'; import SensorsIcon from '@mui/icons-material/Sensors'; type DefaultEventVariant = 'secondary'; -type CustomEventVariant = 'success' | 'neutral' | 'warning'; +type CustomEventVariant = 'success' | 'neutral' | 'warning' | 'error'; type EventVariant = DefaultEventVariant | CustomEventVariant; const StyledEventCircle = styled('div', { @@ -26,17 +30,26 @@ const StyledEventCircle = styled('div', { alignItems: 'center', justifyContent: 'center', transition: 'transform 0.2s', - '& svg': { + '& svg, span': { color: theme.palette[variant].main, + }, + '& svg': { height: theme.spacing(2.5), width: theme.spacing(2.5), }, + '& span': { + fontSize: theme.fontSizes.bodySize, + }, '&:hover': { transform: 'scale(1.5)', }, })); -const getEventIcon = (type: TimelineEventType) => { +const getEventIcon = ({ icon, type }: TimelineEvent) => { + if (icon) { + return {icon}; + } + if (type === 'signal') { return ; } @@ -72,6 +85,10 @@ const customEventVariants: Partial< 'feature-archived': 'neutral', }; +const isValidVariant = (variant?: string): variant is EventVariant => + variant !== undefined && + ['secondary', 'success', 'neutral', 'warning', 'error'].includes(variant); + interface IEventTimelineEventCircleProps extends HTMLAttributes { group: TimelineEventGroup; @@ -89,10 +106,14 @@ export const EventTimelineEventCircle = ({ return ( - {getEventIcon(event.type)} + {getEventIcon(event)} ); } diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx index 45c9846bc428..1b813d94bae0 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx @@ -57,6 +57,9 @@ const StyledEventTimelineEventCircle = styled(EventTimelineEventCircle)( '& > svg': { height: theme.spacing(1.75), }, + '& > span': { + fontSize: theme.fontSizes.smallBody, + }, '&:hover': { transform: 'none', }, From 921c16b159f77d2f511ec06ad58431dfe0cba079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 10 Oct 2024 14:45:36 +0100 Subject: [PATCH 2/5] chore: fix tooltip icon sizing --- .../EventTimelineEventTooltip/EventTimelineEventTooltip.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx index 1b813d94bae0..3bf1d36143db 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventTooltip/EventTimelineEventTooltip.tsx @@ -50,6 +50,7 @@ const StyledTooltipItem = styled('div')(({ theme }) => ({ const StyledEventTimelineEventCircle = styled(EventTimelineEventCircle)( ({ theme }) => ({ + flexShrink: 0, marginTop: theme.spacing(0.125), height: theme.spacing(2.5), width: theme.spacing(2.5), From 118bd5abe04f003232ced4f40a2d712b74956125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 10 Oct 2024 15:19:53 +0100 Subject: [PATCH 3/5] chore: prefix new meta properties with experimental --- .../events/EventTimeline/EventTimeline.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx index c55a5d9bb1f0..c60d145ce54d 100644 --- a/frontend/src/component/events/EventTimeline/EventTimeline.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimeline.tsx @@ -128,17 +128,17 @@ const getTimelineEvent = ( sourceDescription, tokenName, payload: { - unleash_title, - unleash_description, - unleash_icon, - unleash_variant, + experimental_unleash_title, + experimental_unleash_description, + experimental_unleash_icon, + experimental_unleash_variant, }, } = event; - const title = unleash_title || sourceName; + const title = experimental_unleash_title || sourceName; const label = `Signal: ${title}`; - const summary = unleash_description - ? `Signal: **[${title}](/integrations/signals)** ${unleash_description}` + const summary = experimental_unleash_description + ? `Signal: **[${title}](/integrations/signals)** ${experimental_unleash_description}` : `Signal originated from **[${sourceName} (${tokenName})](/integrations/signals)** endpoint${sourceDescription ? `: ${sourceDescription}` : ''}`; return { @@ -147,9 +147,11 @@ const getTimelineEvent = ( type: 'signal', label, summary, - ...(isValidString(unleash_icon) ? { icon: unleash_icon } : {}), - ...(isValidString(unleash_variant) - ? { variant: unleash_variant } + ...(isValidString(experimental_unleash_icon) + ? { icon: experimental_unleash_icon } + : {}), + ...(isValidString(experimental_unleash_variant) + ? { variant: experimental_unleash_variant } : {}), }; } From 42ea4cf9d39339fe1624f3cb44344faaaf0758df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 10 Oct 2024 15:23:08 +0100 Subject: [PATCH 4/5] refactor: pick from type --- .../EventTimelineEventGroup/EventTimelineEventCircle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx index ed8ef552e401..3f9ef7bb9510 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx @@ -45,7 +45,7 @@ const StyledEventCircle = styled('div', { }, })); -const getEventIcon = ({ icon, type }: TimelineEvent) => { +const getEventIcon = ({ icon, type }: Pick) => { if (icon) { return {icon}; } From 746efe26bfad86db5458a0d4b1e67e566840900d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 10 Oct 2024 15:28:20 +0100 Subject: [PATCH 5/5] chore: fix grouping of signals that have different icons --- .../EventTimelineEventGroup/EventTimelineEventCircle.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx index 3f9ef7bb9510..51be8a841060 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventCircle.tsx @@ -100,7 +100,10 @@ export const EventTimelineEventCircle = ({ }: IEventTimelineEventCircleProps) => { if ( group.length === 1 || - !group.some(({ type }) => type !== group[0].type) + !group.some( + ({ type, icon }) => + type !== group[0].type || icon !== group[0].icon, + ) ) { const event = group[0];