@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

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 () => {
+            await hook.result.current.searchUsers('name:alpha');
+        });
+        await act(async () => {
+            await 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 () => {
+            await hook.result.current.searchUsers('name:alpha');
+            await 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 () => {
+            await 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 () => {
+            await 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/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,109 @@
+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-child': {
+                            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 => {
+                    if (entry.kind === 'divider') {
+                        return _jsx(Divider, { sx: { my: '0 !important' } }, entry.id);
+                    }
+                    if (entry.kind === 'item') {
+                        if (entry.to) {
+                            return (_jsxs(MenuItem, { 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, { 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 { jsx as _jsx, Fragment as _Fragment } 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", { 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, { 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/{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;

package/components/elements/{hit/HitDetails.js → ObjectDetails.js}

@@ -5,12 +5,12 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import PluginTypography from '../PluginTypography';
-const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
+import PluginTypography from './PluginTypography';
+const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,15 +36,15 @@ const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { hit: hit, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
                             return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), hit: hit, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
                     }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
-const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
+const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
     const theme = useTheme();
     const entries = useMemo(() => {
         const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
@@ -56,10 +56,10 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
-                        return _jsx(ListRenderer, { hit: hit, maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                        return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
                     }
                     return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
                             display: 'grid',
@@ -75,14 +75,14 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
                                     paddingRight: theme.spacing(1),
                                     height: '100%',
                                     wordWrap: 'break-word'
-                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), hit: hit, children: val }) })] }, key));
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), obj: obj, children: val }) })] }, key));
                 }) })] }));
 });
-const Collapsible = memo(({ hit, title, data, query }) => {
+const Collapsible = memo(({ obj, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -109,20 +109,20 @@ const Collapsible = memo(({ hit, title, data, query }) => {
     if (isEmpty(results)) {
         return null;
     }
-    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { hit: hit, showParentKey: true, data: results }) }) })] }));
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), sx: { my: 0 }, children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 0.5, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { obj: obj, showParentKey: true, data: results }) }) })] }));
 });
-const HitDetails = ({ hit }) => {
+const ObjectDetails = ({ obj }) => {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
-    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
+    const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
+        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
-                return (_jsx(Collapsible, { hit: hit, query: query, title: section
+                return (_jsx(Collapsible, { obj: obj, query: query, title: section
                         .split('_')
                         .map(word => capitalize(word))
                         .join(' '), data: Object.fromEntries(entries) }, section));
             })] }));
 };
-export default memo(HitDetails);
+export default memo(ObjectDetails);