diff --git a/frontend/src/component/events/EventTimeline/EventTimeline.tsx b/frontend/src/component/events/EventTimeline/EventTimeline.tsx index e71cd6ef6e..296f35ff06 100644 --- a/frontend/src/component/events/EventTimeline/EventTimeline.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimeline.tsx @@ -4,11 +4,11 @@ import { startOfDay, sub } from 'date-fns'; import { useEventSearch } from 'hooks/api/getters/useEventSearch/useEventSearch'; import { EventTimelineEventGroup } from './EventTimelineEventGroup/EventTimelineEventGroup'; import { EventTimelineHeader } from './EventTimelineHeader/EventTimelineHeader'; -import type { TimeSpanOption } from './useEventTimeline'; import { useMemo } from 'react'; import { useSignalQuery } from 'hooks/api/getters/useSignalQuery/useSignalQuery'; import type { ISignalQuerySignal } from 'interfaces/signal'; import type { IEnvironment } from 'interfaces/environments'; +import { useEventTimelineContext } from './EventTimelineContext'; export type TimelineEventType = 'signal' | EventSchemaType; @@ -157,21 +157,8 @@ const getTimelineEvent = ( } }; -interface IEventTimelineProps { - timeSpan: TimeSpanOption; - environment: IEnvironment | undefined; - setTimeSpan: (timeSpan: TimeSpanOption) => void; - setEnvironment: (environment: IEnvironment) => void; - setOpen: (open: boolean) => void; -} - -export const EventTimeline = ({ - timeSpan, - environment, - setTimeSpan, - setEnvironment, - setOpen, -}: IEventTimelineProps) => { +export const EventTimeline = () => { + const { timeSpan, environment } = useEventTimelineContext(); const endDate = new Date(); const startDate = sub(endDate, timeSpan.value); const endTime = endDate.getTime(); @@ -246,14 +233,7 @@ export const EventTimeline = ({ return ( <> - + diff --git a/frontend/src/component/events/EventTimeline/EventTimelineContext.tsx b/frontend/src/component/events/EventTimeline/EventTimelineContext.tsx new file mode 100644 index 0000000000..85e5cd1154 --- /dev/null +++ b/frontend/src/component/events/EventTimeline/EventTimelineContext.tsx @@ -0,0 +1,18 @@ +import { createContext, useContext } from 'react'; +import type { IEventTimelineContext } from './EventTimelineProvider'; + +export const EventTimelineContext = createContext< + IEventTimelineContext | undefined +>(undefined); + +export const useEventTimelineContext = (): IEventTimelineContext => { + const context = useContext(EventTimelineContext); + + if (!context) { + throw new Error( + 'useEventTimelineContext must be used within a EventTimelineProvider', + ); + } + + return context; +}; diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx index 4fcda12623..e8e571fb53 100644 --- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx +++ b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx @@ -7,10 +7,10 @@ import { } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; -import type { IEnvironment } from 'interfaces/environments'; import { useEffect, useMemo } from 'react'; -import { type TimeSpanOption, timeSpanOptions } from '../useEventTimeline'; +import { timeSpanOptions } from '../EventTimelineProvider'; import CloseIcon from '@mui/icons-material/Close'; +import { useEventTimelineContext } from '../EventTimelineContext'; const StyledCol = styled('div')(({ theme }) => ({ display: 'flex', @@ -36,21 +36,13 @@ const StyledTimelineEventsCount = styled('span')(({ theme }) => ({ interface IEventTimelineHeaderProps { totalEvents: number; - timeSpan: TimeSpanOption; - setTimeSpan: (timeSpan: TimeSpanOption) => void; - environment: IEnvironment | undefined; - setEnvironment: (environment: IEnvironment) => void; - setOpen: (open: boolean) => void; } export const EventTimelineHeader = ({ totalEvents, - timeSpan, - setTimeSpan, - environment, - setEnvironment, - setOpen, }: IEventTimelineHeaderProps) => { + const { timeSpan, environment, setOpen, setTimeSpan, setEnvironment } = + useEventTimelineContext(); const { environments } = useEnvironments(); const activeEnvironments = useMemo( diff --git a/frontend/src/component/events/EventTimeline/useEventTimeline.ts b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx similarity index 69% rename from frontend/src/component/events/EventTimeline/useEventTimeline.ts rename to frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx index 66367ea2ab..680bd7bfed 100644 --- a/frontend/src/component/events/EventTimeline/useEventTimeline.ts +++ b/frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx @@ -1,13 +1,33 @@ +import type { ReactNode } from 'react'; +import { EventTimelineContext } from './EventTimelineContext'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; import type { IEnvironment } from 'interfaces/environments'; -export type TimeSpanOption = { +type TimeSpanOption = { key: string; label: string; value: Duration; markers: string[]; }; +type EventTimelineState = { + open: boolean; + timeSpan: TimeSpanOption; + environment?: IEnvironment; + signalsAlertSeen?: boolean; +}; + +type EventTimelineStateSetters = { + setOpen: (open: boolean) => void; + setTimeSpan: (timeSpan: TimeSpanOption) => void; + setEnvironment: (environment: IEnvironment) => void; + setSignalsAlertSeen: (seen: boolean) => void; +}; + +export interface IEventTimelineContext + extends EventTimelineState, + EventTimelineStateSetters {} + export const timeSpanOptions: TimeSpanOption[] = [ { key: '30m', @@ -57,18 +77,18 @@ export const timeSpanOptions: TimeSpanOption[] = [ }, ]; -type EventTimelineState = { - open: boolean; - timeSpan: TimeSpanOption; - environment?: IEnvironment; -}; - const defaultState: EventTimelineState = { open: false, timeSpan: timeSpanOptions[0], }; -export const useEventTimeline = () => { +interface IEventTimelineProviderProps { + children: ReactNode; +} + +export const EventTimelineProvider = ({ + children, +}: IEventTimelineProviderProps) => { const [state, setState] = useLocalStorageState( 'event-timeline:v1', defaultState, @@ -81,12 +101,20 @@ export const useEventTimeline = () => { setState((prevState) => ({ ...prevState, [key]: value })); }; - return { + const contextValue: IEventTimelineContext = { ...state, setOpen: (open: boolean) => setField('open', open), setTimeSpan: (timeSpan: TimeSpanOption) => setField('timeSpan', timeSpan), setEnvironment: (environment: IEnvironment) => setField('environment', environment), + setSignalsAlertSeen: (seen: boolean) => + setField('signalsAlertSeen', seen), }; + + return ( + + {children} + + ); }; diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index 0d3f581d52..88460c8ebb 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -17,8 +17,8 @@ import { DraftBanner } from './DraftBanner/DraftBanner'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar'; import { useUiFlag } from 'hooks/useUiFlag'; -import { useEventTimeline } from 'component/events/EventTimeline/useEventTimeline'; import { MainLayoutEventTimeline } from './MainLayoutEventTimeline'; +import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider'; interface IMainLayoutProps { children: ReactNode; @@ -112,20 +112,11 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({ export const MainLayout = forwardRef( ({ children }, ref) => { - const { uiConfig, isOss } = useUiConfig(); + const { uiConfig } = useUiConfig(); const projectId = useOptionalPathParam('projectId'); const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( projectId || '', ); - const eventTimeline = useUiFlag('eventTimeline') && !isOss(); - const { - open: showTimeline, - timeSpan, - environment, - setOpen: setShowTimeline, - setTimeSpan, - setEnvironment, - } = useEventTimeline(); const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); const StyledMainLayoutContent = sidebarNavigationEnabled @@ -135,22 +126,12 @@ export const MainLayout = forwardRef( const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); return ( - <> + - } - elseShow={ - - } + show={
} + elseShow={} /> @@ -185,14 +166,7 @@ export const MainLayout = forwardRef( minWidth: 0, }} > - + @@ -222,7 +196,7 @@ export const MainLayout = forwardRef(