@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/app/providers/UserListProvider.test.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook } from '@testing-library/react';
+import { useContext } from 'react';
+import UserListProvider, { UserListContext } from './UserListProvider';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockSearchUserPost = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            user: {
+                post: mockSearchUserPost
+            }
+        }
+    }
+}));
+const makeUser = (username, name = username) => ({
+    username,
+    name,
+    email: `${username}@example.com`,
+    type: ['user']
+});
+const makeResponse = (...users) => ({
+    items: users,
+    offset: 0,
+    rows: users.length,
+    total: users.length
+});
+const Wrapper = ({ children }) => _jsx(UserListProvider, { children: children });
+describe('UserListProvider', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockReset();
+        mockSearchUserPost.mockReset();
+        mockDispatchApi.mockImplementation(async (apiCall) => apiCall);
+        mockSearchUserPost.mockResolvedValue(makeResponse());
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('initializes with an empty user map', () => {
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        expect(hook.result.current.users).toEqual({});
+    });
+    it('searchUsers requests users and merges them into state', async () => {
+        const firstUser = makeUser('alpha');
+        const updatedFirstUser = makeUser('alpha', 'Alpha Updated');
+        const secondUser = makeUser('bravo');
+        mockSearchUserPost
+            .mockResolvedValueOnce(makeResponse(firstUser))
+            .mockResolvedValueOnce(makeResponse(updatedFirstUser, secondUser));
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        await act(async () => {
+            hook.result.current.searchUsers('name:alpha');
+        });
+        await act(async () => {
+            hook.result.current.searchUsers('name:(alpha OR bravo)');
+        });
+        expect(hook.result.current.users).toEqual({
+            alpha: updatedFirstUser,
+            bravo: secondUser
+        });
+        expect(mockSearchUserPost).toHaveBeenNthCalledWith(1, { query: 'name:alpha', rows: 1000 });
+        expect(mockSearchUserPost).toHaveBeenNthCalledWith(2, { query: 'name:(alpha OR bravo)', rows: 1000 });
+        expect(mockDispatchApi).toHaveBeenCalledWith(expect.any(Promise), {
+            throwError: false,
+            logError: false,
+            showError: false
+        });
+    });
+    it('leaves the current users unchanged when the search returns no response', async () => {
+        const alpha = makeUser('alpha');
+        mockDispatchApi.mockResolvedValueOnce(makeResponse(alpha)).mockResolvedValueOnce(undefined);
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        await act(async () => {
+            hook.result.current.searchUsers('name:alpha');
+            hook.result.current.searchUsers('name:bravo');
+        });
+        expect(hook.result.current.users).toEqual({ alpha });
+    });
+    it('fetchUsers resets the debounce timer and batches unique ids', async () => {
+        vi.useFakeTimers();
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        act(() => {
+            hook.result.current.fetchUsers(new Set(['alpha']));
+        });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(100);
+        });
+        act(() => {
+            hook.result.current.fetchUsers(new Set(['alpha', 'bravo']));
+        });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(199);
+        });
+        expect(mockSearchUserPost).not.toHaveBeenCalled();
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(1);
+        });
+        expect(mockSearchUserPost).toHaveBeenCalledWith({ query: 'id:alpha OR bravo', rows: 1000 });
+    });
+    it('fetchUsers excludes Unknown and skips users that are already loaded', async () => {
+        vi.useFakeTimers();
+        const alpha = makeUser('alpha');
+        const bravo = makeUser('bravo');
+        mockSearchUserPost.mockResolvedValueOnce(makeResponse(alpha)).mockResolvedValueOnce(makeResponse(bravo));
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        await act(async () => {
+            hook.result.current.searchUsers('id:alpha');
+        });
+        act(() => {
+            hook.result.current.fetchUsers(new Set(['Unknown', 'alpha', 'bravo']));
+        });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(200);
+        });
+        expect(mockSearchUserPost).toHaveBeenCalledTimes(2);
+        expect(mockSearchUserPost).toHaveBeenNthCalledWith(2, { query: 'id:bravo', rows: 1000 });
+        expect(hook.result.current.users).toEqual({ alpha, bravo });
+    });
+    it('does not search when every requested id is excluded or already loaded', async () => {
+        vi.useFakeTimers();
+        const alpha = makeUser('alpha');
+        mockDispatchApi.mockResolvedValueOnce(makeResponse(alpha));
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        await act(async () => {
+            hook.result.current.searchUsers('id:alpha');
+        });
+        act(() => {
+            hook.result.current.fetchUsers(new Set(['Unknown', 'alpha']));
+        });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(200);
+        });
+        expect(mockSearchUserPost).toHaveBeenCalledTimes(1);
+    });
+    it('clears pending debounce timer on unmount', () => {
+        vi.useFakeTimers();
+        const hook = renderHook(() => useContext(UserListContext), { wrapper: Wrapper });
+        act(() => {
+            hook.result.current.fetchUsers(new Set(['charlie']));
+        });
+        hook.unmount();
+        act(() => {
+            vi.advanceTimersByTime(200);
+        });
+        expect(mockSearchUserPost).not.toHaveBeenCalled();
+    });
+});

package/components/app/providers/ViewProvider.js

@@ -52,7 +52,7 @@ const ViewProvider = ({ children }) => {
         if (!defaultView || has(views, defaultView)) {
             return;
         }
-        (async () => {
+        void (async () => {
             const result = await fetchViews([defaultView]);
             if (!result.length) {
                 setDefaultView(undefined);
@@ -80,7 +80,7 @@ const ViewProvider = ({ children }) => {
         const result = await dispatchApi(api.view.put(id, partialView));
         setViews(_views => ({
             ..._views,
-            [id]: { ...(_views[id] ?? {}), ...partialView }
+            [id]: { ..._views[id], ...partialView }
         }));
         return result;
     }, [dispatchApi]);
@@ -94,7 +94,7 @@ const ViewProvider = ({ children }) => {
     const addView = useCallback(async (view) => {
         const newView = await dispatchApi(api.view.post(view));
         setViews(_views => ({ ..._views, [newView.view_id]: newView }));
-        addFavourite(newView.view_id);
+        void addFavourite(newView.view_id);
         return newView;
     }, [addFavourite, dispatchApi]);
     const removeFavourite = useCallback(async (id) => {

package/components/app/providers/ViewProvider.test.js

@@ -151,7 +151,10 @@ describe('ViewContext', () => {
         it('should allow users to edit views', async () => {
             const result = await act(async () => hook.result.current('example_view_id', { query: DEFAULT_QUERY }));
             expect(hput).toHaveBeenCalledOnce();
-            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: DEFAULT_QUERY });
+            const [url, body, ...rest] = vi.mocked(hput).mock.calls[0];
+            expect(url).toBe('/api/v1/view/example_view_id');
+            expect(body).toEqual({ query: DEFAULT_QUERY });
+            expect(rest.every(v => v === undefined)).toBe(true);
             expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
         });
     });

package/components/elements/Comment.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Celebration, Check, Clear, Delete, Edit, Favorite, FireTruck, FormatQuote, Mood, MoreHoriz, RocketLaunch, ThumbDown, ThumbUp } from '@mui/icons-material';
 import { CardActions, CardContent, Chip, CircularProgress, Collapse, Fade, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
@@ -59,7 +59,7 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
     const checkForActions = useCallback(e => {
         e.stopPropagation();
         if (e.ctrlKey && e.key === 'Enter' && !loading) {
-            onEdit();
+            void onEdit();
         }
         else if (e.key === 'Escape') {
             setEditing(false);

package/components/elements/ContextMenu.d.ts

@@ -0,0 +1,56 @@
+import { type SxProps } from '@mui/material';
+import type { ElementType, FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+export type ContextMenuDivider = {
+    kind: 'divider';
+    id: string;
+    sx?: SxProps;
+};
+export type ContextMenuLeafItem = {
+    kind: 'item';
+    id: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    /** When provided the item renders as a router Link instead of a button. */
+    to?: string;
+};
+export type ContextMenuSubItem = {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+export type ContextMenuSubmenuItem = {
+    kind: 'submenu';
+    /**
+     * Identifier for this submenu. Used to derive:
+     *  - the MenuItem's DOM id (`${id}-menu-item`)
+     *  - the submenu Paper's DOM id (`${id}-submenu`)
+     */
+    id: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    disabled?: boolean;
+    items: ContextMenuSubItem[];
+};
+export type ContextMenuEntry = ContextMenuDivider | ContextMenuLeafItem | ContextMenuSubmenuItem;
+interface ContextMenuProps {
+    items: ContextMenuEntry[];
+    /** Called after the menu opens, with the triggering event. */
+    onOpen?: MouseEventHandler<HTMLElement>;
+    /** Called when the menu closes. */
+    onClose?: () => void;
+    /** Wraps children + menu in this element. Defaults to Box. */
+    Component?: ElementType;
+    /** id applied to the wrapper element */
+    id?: string;
+}
+/**
+ * Generic context menu component that renders a MUI Menu from a declarative
+ * items structure supporting leaf items, dividers, and single-level submenus.
+ *
+ * Submenus appear on hover and are positioned to avoid screen overflow.
+ */
+declare const ContextMenu: FC<PropsWithChildren<ContextMenuProps>>;
+export default ContextMenu;

package/components/elements/ContextMenu.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, useTheme } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+/**
+ * The margin at the bottom of the screen by which a submenu should be inverted.
+ * If hovering within this many pixels of the bottom, the submenu renders upward.
+ */
+const CONTEXTMENU_MARGIN = 350;
+/**
+ * Generic context menu component that renders a MUI Menu from a declarative
+ * items structure supporting leaf items, dividers, and single-level submenus.
+ *
+ * Submenus appear on hover and are positioned to avoid screen overflow.
+ */
+const ContextMenu = ({ items, onOpen, onClose, Component = Box, id, children }) => {
+    const theme = useTheme();
+    const [show, setShow] = useState({});
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [transformProps, setTransformProps] = useState({});
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+        onClose?.();
+    }, [onClose]);
+    const handleContextMenu = useCallback(event => {
+        if (anchorEl) {
+            event.preventDefault();
+            handleClose();
+            return;
+        }
+        event.preventDefault();
+        if (window.innerHeight - event.clientY < 300) {
+            setTransformProps({
+                position: 'fixed',
+                bottom: `${window.innerHeight - event.clientY}px !important`,
+                top: 'unset !important',
+                left: `${event.clientX}px !important`
+            });
+        }
+        else {
+            setTransformProps({
+                position: 'fixed',
+                top: `${event.clientY}px !important`,
+                left: `${event.clientX}px !important`
+            });
+        }
+        setAnchorEl(event.target);
+        onOpen?.(event);
+    }, [anchorEl, handleClose, onOpen]);
+    /**
+     * Calculates positioning styles for a submenu based on the parent element's
+     * position relative to the viewport bottom.
+     */
+    const calculateSubMenuStyles = useCallback((parent) => {
+        const baseStyles = { position: 'absolute', maxHeight: '300px', overflow: 'auto' };
+        const defaultStyles = { ...baseStyles, top: 0, left: '100%' };
+        if (!parent) {
+            return defaultStyles;
+        }
+        const parentBounds = parent.getBoundingClientRect();
+        if (window.innerHeight - parentBounds.y < CONTEXTMENU_MARGIN) {
+            return { ...baseStyles, bottom: 0, left: '100%' };
+        }
+        return defaultStyles;
+    }, []);
+    // Reset submenu visibility whenever the menu is closed
+    useEffect(() => {
+        if (!anchorEl) {
+            setShow({});
+        }
+    }, [anchorEl]);
+    return (_jsxs(Component, { id: id, onContextMenu: handleContextMenu, children: [children, _jsx(Menu, { id: "record-menu", open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, slotProps: {
+                    paper: {
+                        sx: {
+                            ...transformProps,
+                            overflow: 'visible !important'
+                        },
+                        elevation: 2
+                    }
+                }, MenuListProps: {
+                    dense: true,
+                    sx: {
+                        minWidth: '250px',
+                        paddingY: '0 !important',
+                        '& > .first': {
+                            borderTopLeftRadius: theme.shape.borderRadius,
+                            borderTopRightRadius: theme.shape.borderRadius
+                        },
+                        '& > :last-child': {
+                            borderBottomLeftRadius: theme.shape.borderRadius,
+                            borderBottomRightRadius: theme.shape.borderRadius
+                        }
+                    }
+                }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: handleClose, children: items.map((entry, index) => {
+                    let className = '';
+                    if (index === 0) {
+                        className = 'first';
+                    }
+                    if (entry.kind === 'divider') {
+                        return _jsx(Divider, { className: className, sx: { my: '0 !important' } }, entry.id);
+                    }
+                    if (entry.kind === 'item') {
+                        if (entry.to) {
+                            return (_jsxs(MenuItem, { className: className, component: Link, to: entry.to, disabled: entry.disabled, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                        }
+                        return (_jsxs(MenuItem, { className: className, disabled: entry.disabled, onClick: entry.onClick, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                    }
+                    const { id: entryId, icon, label, disabled, items: subItems } = entry;
+                    return (_jsxs(MenuItem, { id: `${entryId}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [entryId]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [entryId]: null })), disabled: disabled, children: [icon && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { sx: { flex: 1 }, children: label }), !disabled && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show[entryId], unmountOnExit: true, children: _jsx(Paper, { id: `${entryId}-submenu`, sx: calculateSubMenuStyles(show[entryId]), elevation: 2, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: subItems.map(subItem => (_jsx(MenuItem, { onClick: subItem.onClick, disabled: subItem.disabled, children: _jsx(ListItemText, { children: subItem.label }) }, subItem.key))) }) }) })] }, entryId));
+                }) })] }));
+};
+export default ContextMenu;

package/components/elements/ContextMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/ContextMenu.test.js

@@ -0,0 +1,215 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { omit } from 'lodash-es';
+import { act } from 'react';
+import { vi } from 'vitest';
+// Mock react-router-dom Link
+vi.mock('react-router-dom', () => ({
+    Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+}));
+// Stub MUI components to simple HTML equivalents
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        useTheme: () => ({ shape: { borderRadius: 4 } }),
+        Menu: ({ children, open, onClose, ...props }) => open ? (_jsx("div", { tabIndex: 0, role: "menu", onClick: onClose, ...omit(props, ['sx', 'slotProps', 'MenuListProps', 'anchorOrigin', 'anchorEl']), children: children })) : null,
+        MenuItem: ({ children, onClick, disabled, component, to, id, onMouseEnter, onMouseLeave, ...props }) => {
+            const Component = component || 'div';
+            return (_jsx(Component, { tabIndex: 0, role: "menuitem", onClick: onClick, "aria-disabled": disabled, href: to, id: id, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...omit(props, ['sx']), children: children }));
+        },
+        Fade: ({ children, in: inProp }) => (inProp ? _jsx(_Fragment, { children: children }) : null),
+        ListItemIcon: ({ children }) => _jsx("div", { children: children }),
+        ListItemText: ({ children }) => _jsx("div", { children: children }),
+        Divider: () => _jsx("hr", {}),
+        Paper: ({ children, id, ...props }) => (_jsx("div", { id: id, ...omit(props, ['sx', 'elevation']), children: children })),
+        MenuList: ({ children, ...props }) => (_jsx("div", { role: "group", ...omit(props, ['sx', 'dense']), children: children })),
+        Box: ({ children, id, onContextMenu, ...props }) => (_jsx("div", { id: id, onContextMenu: onContextMenu, ...omit(props, ['sx']), children: children }))
+    };
+});
+import ContextMenu, {} from './ContextMenu';
+const renderMenu = (items, opts = {}) => {
+    const { autoOpen = true, onOpen = vi.fn(), onClose = vi.fn() } = opts;
+    const utils = render(_jsx(ContextMenu, { items: items, onOpen: onOpen, onClose: onClose, id: "test-menu", children: _jsx("div", { id: "trigger", children: "trigger" }) }));
+    const openMenu = () => act(() => {
+        fireEvent.contextMenu(screen.getByTestId('trigger'));
+    });
+    if (autoOpen) {
+        openMenu();
+    }
+    return { ...utils, onOpen, onClose, openMenu };
+};
+describe('ContextMenu', () => {
+    describe('Visibility', () => {
+        it('renders nothing before right-click', () => {
+            const { container } = renderMenu([], { autoOpen: false });
+            expect(container.querySelector('[role="menu"]')).toBeNull();
+        });
+        it('renders the menu after right-click', () => {
+            renderMenu([]);
+            expect(screen.getByRole('menu')).toBeInTheDocument();
+        });
+        it('calls onClose when the menu is clicked', () => {
+            const { onClose } = renderMenu([]);
+            fireEvent.click(screen.getByRole('menu'));
+            expect(onClose).toHaveBeenCalledTimes(1);
+        });
+        it('closes on a second right-click (toggle)', () => {
+            const { openMenu } = renderMenu([]);
+            expect(screen.getByRole('menu')).toBeInTheDocument();
+            openMenu();
+            expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+        });
+        it('calls onOpen when right-clicked', () => {
+            const onOpen = vi.fn();
+            renderMenu([], { onOpen });
+            expect(onOpen).toHaveBeenCalledTimes(1);
+        });
+        it('calls onClose when closed via toggle right-click', () => {
+            const onClose = vi.fn();
+            const { openMenu } = renderMenu([], { onClose });
+            openMenu();
+            expect(onClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('Leaf items', () => {
+        it('renders a plain button item', () => {
+            const onClick = vi.fn();
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
+            const item = screen.getByRole('menuitem');
+            expect(item).toHaveTextContent('Do something');
+        });
+        it('calls onClick when a plain item is clicked', () => {
+            const onClick = vi.fn();
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
+            fireEvent.click(screen.getByRole('menuitem'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+        it('renders a link item with correct href', () => {
+            renderMenu([{ kind: 'item', id: 'link-1', label: 'Go somewhere', to: '/some/path' }]);
+            const link = screen.getByRole('menuitem');
+            expect(link).toHaveAttribute('href', '/some/path');
+        });
+        it('marks a disabled item with aria-disabled', () => {
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Disabled', disabled: true }]);
+            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
+        });
+        it('renders an icon alongside the label when provided', () => {
+            renderMenu([{ kind: 'item', id: 'icon-item', label: 'With icon', icon: _jsx("span", { id: "test-icon" }) }]);
+            expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+            expect(screen.getByRole('menuitem')).toHaveTextContent('With icon');
+        });
+    });
+    describe('Dividers', () => {
+        it('renders a divider between items', () => {
+            renderMenu([
+                { kind: 'item', id: 'item-a', label: 'A' },
+                { kind: 'divider', id: 'sep' },
+                { kind: 'item', id: 'item-b', label: 'B' }
+            ]);
+            expect(screen.getByRole('separator')).toBeInTheDocument();
+            expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+        });
+    });
+    describe('Submenu items', () => {
+        const subItems = [
+            { key: 'sub-a', label: 'Sub A', onClick: vi.fn() },
+            { key: 'sub-b', label: 'Sub B', onClick: vi.fn() }
+        ];
+        const submenuEntry = {
+            kind: 'submenu',
+            id: 'my-submenu',
+            label: 'Parent',
+            items: subItems
+        };
+        it('renders the parent submenu item', () => {
+            renderMenu([submenuEntry]);
+            expect(screen.getByText('Parent')).toBeInTheDocument();
+        });
+        it('does not show submenu content before hovering', () => {
+            renderMenu([submenuEntry]);
+            expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
+        });
+        it('shows submenu content on mouse enter', async () => {
+            renderMenu([submenuEntry]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Sub A')).toBeInTheDocument();
+                expect(screen.getByText('Sub B')).toBeInTheDocument();
+            });
+        });
+        it('hides submenu after mouse leave', async () => {
+            renderMenu([submenuEntry]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Sub A')).toBeInTheDocument();
+            });
+            act(() => {
+                fireEvent.mouseLeave(parent);
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
+            });
+        });
+        it('calls the sub-item onClick when a sub-item is clicked', async () => {
+            const onClick = vi.fn();
+            renderMenu([
+                {
+                    kind: 'submenu',
+                    id: 'actions',
+                    label: 'Actions',
+                    items: [{ key: 'do-it', label: 'Do it', onClick }]
+                }
+            ]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Do it')).toBeInTheDocument();
+            });
+            fireEvent.click(screen.getByText('Do it'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+        it('marks a disabled submenu parent with aria-disabled', () => {
+            renderMenu([{ ...submenuEntry, disabled: true }]);
+            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
+        });
+        it('does not show expand arrow when submenu is disabled', () => {
+            renderMenu([{ ...submenuEntry, disabled: true }]);
+            // The KeyboardArrowRight icon only renders when !disabled
+            expect(screen.queryByTestId('KeyboardArrowRightIcon')).not.toBeInTheDocument();
+        });
+        it('assigns correct DOM ids to submenu parent and panel', async () => {
+            renderMenu([submenuEntry]);
+            expect(document.getElementById('my-submenu-menu-item')).not.toBeNull();
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(document.getElementById('my-submenu-submenu')).not.toBeNull();
+            });
+        });
+    });
+    describe('Mixed item list', () => {
+        it('renders items in order', () => {
+            renderMenu([
+                { kind: 'item', id: 'first', label: 'First' },
+                { kind: 'divider', id: 'div-1' },
+                { kind: 'submenu', id: 'third', label: 'Third', items: [] },
+                { kind: 'item', id: 'fourth', label: 'Fourth' }
+            ]);
+            const items = screen.getAllByRole('menuitem');
+            expect(items[0]).toHaveTextContent('First');
+            expect(items[1]).toHaveTextContent('Third');
+            expect(items[2]).toHaveTextContent('Fourth');
+        });
+    });
+});

package/components/elements/EditRow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Close, Delete, Edit } from '@mui/icons-material';
 import { Box, Checkbox, CircularProgress, IconButton, Slider, Stack, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -55,7 +55,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
             setEditValue(_value);
         }
         else {
-            onEdit(_value.toString());
+            void onEdit(_value.toString());
         }
     }, [failOnValidate, max, min, onEdit, type, validate]);
     const onSubmit = useCallback(async () => {
@@ -79,7 +79,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
     }, [confirmPassword, editValue, onEdit, showErrorMessage, t, type, value]);
     const checkForActions = useCallback(e => {
         if (e.ctrlKey && e.key === 'Enter' && !loading) {
-            onSubmit();
+            void onSubmit();
         }
         if (e.key === 'Escape') {
             setEditing(false);
@@ -109,7 +109,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
                                                 endAdornment: loading && _jsx(CircularProgress, { size: 24 })
                                             } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
                                         setEditing(false);
-                                        onEdit(null);
+                                        void onEdit(null);
                                     }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsx(TableCell, { sx: cellSx, width: "100%", children: type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : type === 'range' && !isNil(value) ? ((valueLabelFormat ?? (val => `${val}px`))(value)) : ((value ?? t('none'))) })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
 };
 export default EditRow;

package/components/{routes/overviews/OverviewEditor.js → elements/MarkdownEditor.js}

@@ -4,8 +4,8 @@ import { useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
-import { conf, language } from './markdownExtendedTokenProvider';
-const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+import { conf, language } from '../routes/overviews/markdownExtendedTokenProvider';
+const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
     const theme = useTheme();
     const monaco = useMonaco();
     const { config } = useContext(ApiConfigContext);
@@ -53,4 +53,4 @@ const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height =
     }), [fontSize, editorOptions]);
     return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
 };
-export default memo(OverviewEditor);
+export default memo(MarkdownEditor);

package/components/elements/ObjectDetails.d.ts

@@ -0,0 +1,6 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    obj: Hit | Event;
+}>;
+export default _default;