chore: add event timeline to new in unleash

frontend/src/component/events/EventTimeline/EventTimelineProvider.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { EventTimelineContext } from './EventTimelineContext';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import type { IEnvironment } from 'interfaces/environments';
@@ -10,22 +10,28 @@ type TimeSpanOption = {
     markers: string[];
 };
 
-type EventTimelineState = {
+type EventTimelinePersistentState = {
     open: boolean;
     timeSpan: TimeSpanOption;
     environment?: IEnvironment;
     signalsSuggestionSeen?: boolean;
 };
 
+type EventTimelineTemporaryState = {
+    highlighted: boolean;
+};
+
 type EventTimelineStateSetters = {
     setOpen: (open: boolean) => void;
     setTimeSpan: (timeSpan: TimeSpanOption) => void;
     setEnvironment: (environment: IEnvironment) => void;
     setSignalsSuggestionSeen: (seen: boolean) => void;
+    setHighlighted: (highlighted: boolean) => void;
 };
 
 export interface IEventTimelineContext
-    extends EventTimelineState,
+    extends EventTimelinePersistentState,
+        EventTimelineTemporaryState,
         EventTimelineStateSetters {}
 
 export const timeSpanOptions: TimeSpanOption[] = [
@@ -77,7 +83,7 @@ export const timeSpanOptions: TimeSpanOption[] = [
     },
 ];
 
-const defaultState: EventTimelineState = {
+const defaultState: EventTimelinePersistentState = {
     open: false,
     timeSpan: timeSpanOptions[0],
 };
@@ -89,27 +95,38 @@ interface IEventTimelineProviderProps {
 export const EventTimelineProvider = ({
     children,
 }: IEventTimelineProviderProps) => {
-    const [state, setState] = useLocalStorageState<EventTimelineState>(
-        'event-timeline:v1',
-        defaultState,
-    );
+    const [state, setState] =
+        useLocalStorageState<EventTimelinePersistentState>(
+            'event-timeline:v1',
+            defaultState,
+        );
+    const [highlighted, setHighlighted] = useState(false);
 
-    const setField = <K extends keyof EventTimelineState>(
+    const setField = <K extends keyof EventTimelinePersistentState>(
         key: K,
-        value: EventTimelineState[K],
+        value: EventTimelinePersistentState[K],
     ) => {
         setState((prevState) => ({ ...prevState, [key]: value }));
     };
 
+    const onSetHighlighted = (highlighted: boolean) => {
+        setHighlighted(highlighted);
+        if (highlighted) {
+            setTimeout(() => setHighlighted(false), 3000);
+        }
+    };
+
     const contextValue: IEventTimelineContext = {
         ...state,
+        highlighted,
         setOpen: (open: boolean) => setField('open', open),
         setTimeSpan: (timeSpan: TimeSpanOption) =>
             setField('timeSpan', timeSpan),
         setEnvironment: (environment: IEnvironment) =>
             setField('environment', environment),
         setSignalsSuggestionSeen: (seen: boolean) =>
             setField('signalsSuggestionSeen', seen),
+        setHighlighted: onSetHighlighted,
     };
 
     return (

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx

@@ -11,15 +11,37 @@ import {
 import { type FC, useEffect } from 'react';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
 
 const server = testServerSetup();
 
 beforeEach(() => {
     window.localStorage.clear();
 });
 
+const TestNavigationSidebar: FC<{
+    project?: string;
+    flags?: LastViewedFlag[];
+}> = ({ project, flags }) => {
+    const { setLastViewed: setProject } = useLastViewedProject();
+    const { setLastViewed: setFlag } = useLastViewedFlags();
+
+    useEffect(() => {
+        setProject(project);
+        flags?.forEach((flag) => {
+            setFlag(flag);
+        });
+    }, []);
+
+    return (
+        <EventTimelineProvider>
+            <NavigationSidebar />
+        </EventTimelineProvider>
+    );
+};
+
 test('switch full mode and mini mode', () => {
-    render(<NavigationSidebar />);
+    render(<TestNavigationSidebar />);
 
     expect(screen.queryByText('Projects')).toBeInTheDocument();
     expect(screen.queryByText('Applications')).toBeInTheDocument();
@@ -42,7 +64,7 @@ test('switch full mode and mini mode', () => {
 });
 
 test('persist navigation mode and expansion selection in storage', async () => {
-    render(<NavigationSidebar />);
+    render(<TestNavigationSidebar />);
     const { value } = createLocalStorage('navigation-mode:v1', {});
     expect(value).toBe('full');
 
@@ -70,7 +92,7 @@ test('persist navigation mode and expansion selection in storage', async () => {
 test('select active item', async () => {
     render(
         <Routes>
-            <Route path={'/search'} element={<NavigationSidebar />} />
+            <Route path={'/search'} element={<TestNavigationSidebar />} />
         </Routes>,
         { route: '/search' },
     );
@@ -80,30 +102,13 @@ test('select active item', async () => {
     expect(links[1]).toHaveClass(classes.selected);
 });
 
-const SetupComponent: FC<{ project: string; flags: LastViewedFlag[] }> = ({
-    project,
-    flags,
-}) => {
-    const { setLastViewed: setProject } = useLastViewedProject();
-    const { setLastViewed: setFlag } = useLastViewedFlags();
-
-    useEffect(() => {
-        setProject(project);
-        flags.forEach((flag) => {
-            setFlag(flag);
-        });
-    }, []);
-
-    return <NavigationSidebar />;
-};
-
 test('print recent projects and flags', async () => {
     testServerRoute(server, `/api/admin/projects/projectA/overview`, {
         name: 'projectNameA',
     });
 
     render(
-        <SetupComponent
+        <TestNavigationSidebar
             project={'projectA'}
             flags={[{ featureId: 'featureA', projectId: 'projectB' }]}
         />,