From 836adf52a1593fe9f7ab9c6b91e1e6e20d339df4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 2 Oct 2024 14:47:07 +0100 Subject: [PATCH] chore: event timeline signals tip (#8342) https://linear.app/unleash/issue/2-2723/add-signals-tip Adds a tip to the event timeline regarding the usage of signals. The conditions for it to show up are the following: - `!signalsSuggestionSeen` - The current user has not closed the tip yet - `isEnterprise()` - The Unleash instance is an Enterprise instance (signals are currently Enterprise-only) - `isAdmin` - The current user is an admin (signals are currently admin-only) - `signalsEnabled` - The signals feature flag is currently enabled - `!loading` - Signal endpoints have not finished loading (prevents flickering) - `signalEndpoints.length === 0` - The Unleash instance currently has zero configured signal endpoints (signals feature is not being used) ![image](https://github.com/user-attachments/assets/8dd73e62-a341-4d12-97b1-4e011f7891c3) --- .../events/EventTimeline/EventTimeline.tsx | 2 +- .../EventTimelineHeader.tsx | 2 + .../EventTimelineHeaderTip.tsx | 61 +++++++++++++++++++ .../EventTimeline/EventTimelineProvider.tsx | 8 +-- .../MainLayout/MainLayoutEventTimeline.tsx | 6 +- 5 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx index 296f35ff06..9d4f85ccbc 100644 --- a/frontend/src/component/events/EventTimeline/EventTimeline.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimeline.tsx @@ -33,7 +33,7 @@ const StyledRow = styled('div')({ const StyledTimelineBody = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', - padding: theme.spacing(1, 0), + padding: theme.spacing(1.5, 0), })); const StyledTimelineContainer = styled('div')(({ theme }) => ({ diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx index e8e571fb53..c6218e50d6 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx @@ -11,6 +11,7 @@ import { useEffect, useMemo } from 'react'; import { timeSpanOptions } from '../EventTimelineProvider'; import CloseIcon from '@mui/icons-material/Close'; import { useEventTimelineContext } from '../EventTimelineContext'; +import { EventTimelineHeaderTip } from './EventTimelineHeaderTip'; const StyledCol = styled('div')(({ theme }) => ({ display: 'flex', @@ -86,6 +87,7 @@ export const EventTimelineHeader = ({ ))} + ({ + '&&&': { + color: theme.palette.primary.main, + }, +})); + +const signalsLink = '/integrations/signals'; + +export const EventTimelineHeaderTip = () => { + const navigate = useNavigate(); + const { signalsSuggestionSeen, setSignalsSuggestionSeen } = + useEventTimelineContext(); + + const { isEnterprise } = useUiConfig(); + const { isAdmin } = useContext(AccessContext); + const signalsEnabled = useUiFlag('signals'); + const { signalEndpoints, loading } = useSignalEndpoints(); + + if ( + !signalsSuggestionSeen && + isEnterprise() && + isAdmin && + signalsEnabled && + !loading && + signalEndpoints.length === 0 + ) { + return ( + + } + label={ + <> + See signals from + external sources in real-time within Unleash + + } + onClick={() => navigate(signalsLink)} + onDelete={() => setSignalsSuggestionSeen(true)} + /> + + ); + } + + return null; +}; diff --git a/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx index 680bd7bfed..da3714ea6b 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx @@ -14,14 +14,14 @@ type EventTimelineState = { open: boolean; timeSpan: TimeSpanOption; environment?: IEnvironment; - signalsAlertSeen?: boolean; + signalsSuggestionSeen?: boolean; }; type EventTimelineStateSetters = { setOpen: (open: boolean) => void; setTimeSpan: (timeSpan: TimeSpanOption) => void; setEnvironment: (environment: IEnvironment) => void; - setSignalsAlertSeen: (seen: boolean) => void; + setSignalsSuggestionSeen: (seen: boolean) => void; }; export interface IEventTimelineContext @@ -108,8 +108,8 @@ export const EventTimelineProvider = ({ setField('timeSpan', timeSpan), setEnvironment: (environment: IEnvironment) => setField('environment', environment), - setSignalsAlertSeen: (seen: boolean) => - setField('signalsAlertSeen', seen), + setSignalsSuggestionSeen: (seen: boolean) => + setField('signalsSuggestionSeen', seen), }; return ( diff --git a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx index 8b39eec23d..e50ebe81d2 100644 --- a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx @@ -8,10 +8,10 @@ import { useEffect, useState } from 'react'; const StyledEventTimelineSlider = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, - height: '105px', + height: '120px', overflow: 'hidden', boxShadow: theme.boxShadows.popup, - borderLeft: `1px solid ${theme.palette.divider}`, + borderLeft: `1px solid ${theme.palette.background.application}`, })); const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({ @@ -36,7 +36,7 @@ export const MainLayoutEventTimeline = () => { transition: isInitialLoad ? 'none' : 'max-height 0.3s ease-in-out', - maxHeight: open ? '105px' : '0', + maxHeight: open ? '120px' : '0', }} >