chore: event timeline signals tip

Unleash · Oct 2, 2024 · 245ad9f · 245ad9f
1 parent 5f7e21f
commit 245ad9f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 8 deletions.
diff --git 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
@@ -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 = ({
                     ))}
                 </StyledFilter>
             </StyledCol>
+            <EventTimelineHeaderTip />
             <StyledCol>
                 <ConditionallyRender
                     condition={Boolean(environment)}

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx
@@ -0,0 +1,61 @@
+import { Chip, styled } from '@mui/material';
+import AccessContext from 'contexts/AccessContext';
+import { useSignalEndpoints } from 'hooks/api/getters/useSignalEndpoints/useSignalEndpoints';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { useContext } from 'react';
+import { useEventTimelineContext } from '../EventTimelineContext';
+import { Link, useNavigate } from 'react-router-dom';
+import SensorsIcon from '@mui/icons-material/Sensors';
+
+const StyledTip = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const StyledSignalIcon = styled(SensorsIcon)(({ theme }) => ({
+    '&&&': {
+        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 (
+            <StyledTip>
+                <Chip
+                    size='small'
+                    icon={<StyledSignalIcon />}
+                    label={
+                        <>
+                            See <Link to={signalsLink}>signals</Link> from
+                            external sources in real-time within Unleash
+                        </>
+                    }
+                    onClick={() => navigate(signalsLink)}
+                    onDelete={() => setSignalsSuggestionSeen(true)}
+                />
+            </StyledTip>
+        );
+    }
+
+    return null;
+};
diff --git 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
@@ -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',
             }}
         >
             <StyledEventTimelineWrapper>