@cccsaurora/howler-ui 3.1.0-dev.1656 → 3.1.0-dev.1675

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: { search: { fields: { hit: { get: () => ({}) } } } }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+import FieldProvider, { FieldContext } from './FieldProvider';
+const Consumer = () => {
+    const ctx = useContext(FieldContext);
+    return (_jsxs("div", { children: [_jsx("button", { onClick: () => void ctx.getHitFields(), children: "load" }), _jsx("span", { children: ctx.hitFields.length })] }));
+};
+describe('FieldProvider', () => {
+    it('loads hit fields once and reuses the cached value', async () => {
+        mockDispatchApi.mockResolvedValue([{ name: 'field-a' }]);
+        render(_jsx(FieldProvider, { children: _jsx(Consumer, {}) }));
+        await act(async () => screen.getByText('load').click());
+        expect(mockDispatchApi).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('1')).toBeInTheDocument();
+        await act(async () => screen.getByText('load').click());
+        expect(mockDispatchApi).toHaveBeenCalledTimes(1);
+    });
+});

package/components/app/providers/LocalStorageProvider.test.d.ts

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useContext } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+const mockGetStored = vi.hoisted(() => vi.fn());
+const mockSetStored = vi.hoisted(() => vi.fn());
+const mockRemoveStored = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useLocalStorage', () => ({
+    default: () => ({
+        get: mockGetStored,
+        set: mockSetStored,
+        remove: mockRemoveStored
+    })
+}));
+import LocalStorageProvider, { LocalStorageContext } from './LocalStorageProvider';
+describe('LocalStorageProvider', () => {
+    it('hydrates values, updates stored state, and removes keys', async () => {
+        mockGetStored.mockImplementation((key) => {
+            if (key === StorageKey.PAGE_COUNT)
+                return 25;
+            if (key === StorageKey.NEXT_LOCATION)
+                return '/hits';
+            return undefined;
+        });
+        const wrapper = ({ children }) => _jsx(LocalStorageProvider, { children: children });
+        const { result } = renderHook(() => useContext(LocalStorageContext), { wrapper });
+        await waitFor(() => expect(result.current.values[StorageKey.PAGE_COUNT]).toBe(25));
+        expect(result.current.values[StorageKey.NEXT_LOCATION]).toBe('/hits');
+        act(() => {
+            result.current.set(StorageKey.PAGE_COUNT, 50);
+        });
+        expect(mockSetStored).toHaveBeenCalledWith(StorageKey.PAGE_COUNT, 50);
+        expect(result.current.values[StorageKey.PAGE_COUNT]).toBe(50);
+        act(() => {
+            result.current.remove(StorageKey.PAGE_COUNT);
+        });
+        expect(mockRemoveStored).toHaveBeenCalledWith(StorageKey.PAGE_COUNT);
+        expect(result.current.values[StorageKey.PAGE_COUNT]).toBeUndefined();
+    });
+});

package/components/app/providers/ModalProvider.test.d.ts

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

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('components/elements/display/modals/ConfirmDeleteModal', () => ({
+    default: ({ onConfirm, preferDelete, preferCancel }) => (_jsx("button", { onClick: onConfirm, children: `confirm:${String(preferDelete)}:${String(preferCancel)}` }))
+}));
+import ModalProvider, { ModalContext } from './ModalProvider';
+const Consumer = () => {
+    const modal = useContext(ModalContext);
+    return (_jsxs("div", { children: [_jsx("button", { onClick: () => modal.showModal(_jsx("div", { children: "modal-body" }), { disableClose: true, maxWidth: 'xl' }), children: "show" }), _jsx("button", { onClick: () => modal.withConfirmDeleteModal(vi.fn(), true, false), children: "confirm-wrapper" }), _jsx("button", { onClick: () => modal.close(), children: "close" }), _jsx("div", { children: String(modal.options?.disableClose) }), _jsx("div", { children: modal.content })] }));
+};
+describe('ModalProvider', () => {
+    it('shows modal content, resets options, and closes', async () => {
+        render(_jsx(ModalProvider, { children: _jsx(Consumer, {}) }));
+        fireEvent.click(screen.getByText('show'));
+        expect(screen.getByText('modal-body')).toBeInTheDocument();
+        expect(screen.getAllByText('true')[0]).toBeInTheDocument();
+        fireEvent.click(screen.getByText('close'));
+        await act(async () => { });
+        expect(screen.queryByText('modal-body')).not.toBeInTheDocument();
+    });
+    it('builds confirm-delete modal wrappers', () => {
+        const onConfirm = vi.fn();
+        const TestConsumer = () => {
+            const modal = useContext(ModalContext);
+            return (_jsxs("div", { children: [_jsx("button", { onClick: () => modal.withConfirmDeleteModal(onConfirm, true, false), children: "show-confirm" }), _jsx("div", { children: modal.content })] }));
+        };
+        render(_jsx(ModalProvider, { children: _jsx(TestConsumer, {}) }));
+        fireEvent.click(screen.getByText('show-confirm'));
+        fireEvent.click(screen.getByText('confirm:true:false'));
+        expect(onConfirm).toHaveBeenCalled();
+    });
+});

package/components/app/providers/OverviewProvider.test.d.ts

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

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useContext } from 'react';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockOverviewGet = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        overview: {
+            get: mockOverviewGet
+        }
+    }
+}));
+import OverviewProvider, { OverviewContext } from './OverviewProvider';
+describe('OverviewProvider', () => {
+    const wrapper = ({ children }) => _jsx(OverviewProvider, { children: children });
+    beforeEach(() => {
+        mockOverviewGet.mockReset();
+    });
+    it('loads and caches overviews until forced to refresh', async () => {
+        const dataset = [
+            { overview_id: '1', analytic: 'a1' },
+            { overview_id: '2', analytic: 'a2', detection: 'Phishing' }
+        ];
+        mockOverviewGet.mockResolvedValue(dataset);
+        const { result } = renderHook(() => useContext(OverviewContext), { wrapper });
+        await act(async () => {
+            await expect(result.current.getOverviews()).resolves.toEqual(dataset);
+        });
+        await waitFor(() => expect(result.current.loaded).toBe(true));
+        expect(mockOverviewGet).toHaveBeenCalledTimes(1);
+        await act(async () => {
+            await expect(result.current.getOverviews()).resolves.toEqual(dataset);
+        });
+        expect(mockOverviewGet).toHaveBeenCalledTimes(1);
+        await act(async () => {
+            await expect(result.current.getOverviews(true)).resolves.toEqual(dataset);
+        });
+        expect(mockOverviewGet).toHaveBeenCalledTimes(2);
+    });
+    it('matches the most specific overview for a hit and can refresh state', async () => {
+        mockOverviewGet.mockResolvedValue([
+            { overview_id: 'generic', analytic: 'analytic-1' },
+            { overview_id: 'specific', analytic: 'analytic-1', detection: 'Malware' }
+        ]);
+        const { result } = renderHook(() => useContext(OverviewContext), { wrapper });
+        await act(async () => {
+            await result.current.getOverviews();
+        });
+        expect(result.current.getMatchingOverview({ howler: { analytic: 'analytic-1', detection: 'malware' } })).toMatchObject({ overview_id: 'specific' });
+        expect(result.current.getMatchingOverview({ howler: { analytic: 'analytic-1' } })).toMatchObject({
+            overview_id: 'generic'
+        });
+        mockOverviewGet.mockResolvedValueOnce([{ overview_id: 'refreshed', analytic: 'analytic-2' }]);
+        act(() => {
+            result.current.refresh();
+        });
+        await waitFor(() => expect(mockOverviewGet).toHaveBeenCalledTimes(2));
+    });
+});

package/components/app/providers/RecordProvider.test.d.ts

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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const socketContextToken = vi.hoisted(() => ({ name: 'socket-context' }));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (_indexes, body) => body
+            }
+        }
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('./SocketProvider', () => ({
+    SocketContext: socketContextToken
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === socketContextToken) {
+                return { addListener: mockAddListener, removeListener: mockRemoveListener };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import RecordProvider, { useRecordContextSelector } from './RecordProvider';
+const Consumer = () => {
+    const records = useRecordContextSelector(ctx => ctx.records);
+    const selected = useRecordContextSelector(ctx => ctx.selectedRecords);
+    const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
+    const updateRecord = useRecordContextSelector(ctx => ctx.updateRecord);
+    const getRecord = useRecordContextSelector(ctx => ctx.getRecord);
+    const addRecordToSelection = useRecordContextSelector(ctx => ctx.addRecordToSelection);
+    const removeRecordFromSelection = useRecordContextSelector(ctx => ctx.removeRecordFromSelection);
+    const clearSelectedRecords = useRecordContextSelector(ctx => ctx.clearSelectedRecords);
+    return (_jsxs("div", { children: [_jsx("button", { onClick: () => loadRecords([{ howler: { id: 'h1' } }, { howler: { id: 'h2' } }]), children: "load" }), _jsx("button", { onClick: () => updateRecord({ howler: { id: 'h2' }, updated: true }), children: "update" }), _jsx("button", { onClick: () => addRecordToSelection('h1'), children: "select-one" }), _jsx("button", { onClick: () => addRecordToSelection('missing'), children: "select-missing" }), _jsx("button", { onClick: () => removeRecordFromSelection('h1'), children: "remove" }), _jsx("button", { onClick: () => clearSelectedRecords('h2'), children: "clear-except" }), _jsx("button", { onClick: () => void getRecord('missing').then(r => (document.body.dataset.record = r.howler.id)), children: "fetch" }), _jsx("span", { children: Object.keys(records).join(',') }), _jsx("span", { children: selected.map((item) => item.howler.id).join(',') })] }));
+};
+describe('RecordProvider', () => {
+    it('loads, updates, selects, and fetches records while wiring socket listeners', async () => {
+        mockDispatchApi.mockResolvedValue({ items: [{ howler: { id: 'missing' } }] });
+        render(_jsx(RecordProvider, { children: _jsx(Consumer, {}) }));
+        expect(mockAddListener).toHaveBeenCalledWith('hits', expect.any(Function));
+        await act(async () => screen.getByText('load').click());
+        expect(screen.getByText('h1,h2')).toBeInTheDocument();
+        await act(async () => screen.getByText('update').click());
+        await act(async () => screen.getByText('select-one').click());
+        expect(screen.getByText('h1')).toBeInTheDocument();
+        await act(async () => screen.getByText('select-missing').click());
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+        await act(async () => screen.getByText('fetch').click());
+        expect(document.body.dataset.record).toBe('missing');
+        await act(async () => screen.getByText('clear-except').click());
+        expect(screen.getByText('h2')).toBeInTheDocument();
+        await act(async () => screen.getByText('remove').click());
+    });
+});

package/components/app/providers/contextUtils.test.d.ts

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

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

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import { missingContext } from './contextUtils';
+describe('missingContext', () => {
+    it('throws a provider-specific error', () => {
+        expect(() => missingContext('DemoContext')).toThrow('DemoContext must be used within its provider.');
+    });
+});

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

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

package/components/elements/Comment.test.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+let currentUser = { username: 'author', is_admin: false };
+vi.mock('@mui/icons-material', () => ({
+    Celebration: () => _jsx("div", { children: "confetti" }),
+    Check: () => _jsx("div", { children: "check" }),
+    Clear: () => _jsx("div", { children: "clear" }),
+    Delete: () => _jsx("div", { children: "delete" }),
+    Edit: () => _jsx("div", { children: "edit" }),
+    Favorite: () => _jsx("div", { children: "heart" }),
+    FireTruck: () => _jsx("div", { children: "fire" }),
+    FormatQuote: () => _jsx("div", { children: "quote" }),
+    Mood: () => _jsx("div", { children: "laugh" }),
+    MoreHoriz: () => _jsx("div", { children: "menu" }),
+    RocketLaunch: () => _jsx("div", { children: "rocket" }),
+    ThumbDown: () => _jsx("div", { children: "minus" }),
+    ThumbUp: () => _jsx("div", { children: "plus" })
+}));
+vi.mock('@mui/material', () => ({
+    CardActions: ({ children }) => _jsx("div", { children: children }),
+    CardContent: ({ children }) => _jsx("div", { children: children }),
+    Chip: ({ label, onClick }) => _jsx("button", { onClick: onClick, children: String(label ?? '') }),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Collapse: ({ children, in: open }) => (open ? _jsx("div", { children: children }) : null),
+    Fade: ({ children }) => _jsx(_Fragment, { children: children }),
+    IconButton: ({ children, onClick, disabled, id }) => (_jsx("button", { id: id, onClick: onClick, disabled: disabled, children: children })),
+    ListItemIcon: ({ children }) => _jsx("div", { children: children }),
+    ListItemText: ({ children }) => _jsx("div", { children: children }),
+    Menu: ({ children, open }) => (open ? _jsx("div", { children: children }) : null),
+    MenuItem: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
+    Stack: ({ children, onMouseEnter, onMouseLeave }) => (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children })),
+    TextField: ({ defaultValue, onChange, onKeyDown }) => (_jsx("textarea", { "aria-label": "comment-editor", defaultValue: defaultValue, onChange: onChange, onKeyDown: onKeyDown })),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: currentUser })
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex-one" })
+}));
+vi.mock('components/hooks/useMyUtils', () => ({
+    default: () => ({ shiftColor: () => '#999' })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/utils', () => ({
+    compareTimestamp: () => 2,
+    twitterShort: () => 'short-time'
+}));
+vi.mock('./display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar-${userId}` })
+}));
+vi.mock('./display/HowlerCard', () => ({
+    default: ({ children, onClick, onMouseEnter, onMouseLeave }) => (_jsx("div", { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }))
+}));
+vi.mock('./display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: md })
+}));
+import Comment from './Comment';
+describe('Comment', () => {
+    beforeEach(() => {
+        currentUser = { username: 'author', is_admin: false };
+    });
+    it('quotes and deletes a comment from the action menu', async () => {
+        const handleDelete = vi.fn().mockResolvedValue(undefined);
+        const handleQuote = vi.fn();
+        render(_jsx(Comment, { comment: {
+                id: 'c1',
+                user: 'author',
+                value: 'hello',
+                timestamp: '2026-01-01T00:00:00Z',
+                modified: '2026-01-02T00:00:00Z'
+            }, handleDelete: handleDelete, handleQuote: handleQuote, users: { author: { name: 'Author Name' } }, extra: _jsx("div", { children: "extra" }) }));
+        expect(screen.getByText('Author Name')).toBeInTheDocument();
+        expect(screen.getByText('comments.edited')).toBeInTheDocument();
+        expect(screen.getByText('hello')).toBeInTheDocument();
+        fireEvent.mouseEnter(screen.getByText('hello').closest('div'));
+        fireEvent.click(screen.getByText('menu'));
+        fireEvent.click(screen.getByText('comments.quote'));
+        expect(handleQuote).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('menu'));
+        fireEvent.click(screen.getByText('comments.delete'));
+        await waitFor(() => expect(handleDelete).toHaveBeenCalled());
+    });
+    it('edits and reacts to a comment', async () => {
+        const handleEdit = vi.fn().mockResolvedValue(undefined);
+        const handleReact = vi.fn().mockResolvedValue(undefined);
+        render(_jsx(Comment, { comment: {
+                id: 'c2',
+                user: 'author',
+                value: 'old text',
+                timestamp: '2026-01-01T00:00:00Z',
+                modified: '2026-01-01T00:00:00Z',
+                reactions: { other: 'heart' }
+            }, handleEdit: handleEdit, handleReact: handleReact, users: { author: { name: 'Author Name' } } }));
+        fireEvent.mouseEnter(screen.getByText('old text').closest('div'));
+        fireEvent.click(screen.getByText('menu'));
+        fireEvent.click(screen.getByText('comments.edit'));
+        fireEvent.change(screen.getByLabelText('comment-editor'), { target: { value: 'new text' } });
+        fireEvent.keyDown(screen.getByLabelText('comment-editor'), { key: 'Enter', ctrlKey: true });
+        await waitFor(() => expect(handleEdit).toHaveBeenCalledWith('new text'));
+        fireEvent.click(screen.getByText('1'));
+        await waitFor(() => expect(handleReact).toHaveBeenCalledWith('heart'));
+    });
+});

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

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

package/components/elements/EditRow.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockShowErrorMessage = vi.hoisted(() => vi.fn());
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Check: () => _jsx("div", { children: "check-icon" }),
+        Close: () => _jsx("div", { children: "close-icon" }),
+        Delete: () => _jsx("div", { children: "delete-icon" }),
+        Edit: () => _jsx("div", { children: "edit-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Checkbox: ({ checked, onChange }) => (_jsx("input", { "aria-label": "checkbox", type: "checkbox", checked: checked, onChange: onChange })),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    IconButton: ({ children, onClick, disabled }) => (_jsx("button", { disabled: disabled, onClick: onClick, children: children })),
+    Slider: ({ value, onChange }) => (_jsx("input", { "aria-label": "slider", type: "range", value: value, onChange: e => onChange(null, Number(e.target.value)) })),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TableCell: ({ children }) => _jsx("div", { children: children }),
+    TableRow: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ value, onChange, onKeyDown, label, type, error }) => (_jsxs("label", { children: [label ?? type ?? 'text', _jsx("input", { "aria-label": label ?? type ?? 'text', value: String(value ?? ''), onChange: onChange, onKeyDown: onKeyDown, "data-error": String(error) })] })),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showErrorMessage: mockShowErrorMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import EditRow from './EditRow';
+describe('EditRow', () => {
+    it('edits text values and closes on escape when unchanged', async () => {
+        const onEdit = vi.fn(async () => undefined);
+        render(_jsx(EditRow, { titleKey: "title", descriptionKey: "description", value: "current", onEdit: onEdit }));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.change(screen.getByLabelText('text'), { target: { value: 'updated' } });
+        fireEvent.click(screen.getByText('check-icon'));
+        await waitFor(() => expect(onEdit).toHaveBeenCalledWith('updated'));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.keyDown(screen.getByLabelText('text'), { key: 'Escape' });
+        expect(screen.queryByLabelText('text')).not.toBeInTheDocument();
+        expect(screen.getByText('description')).toBeInTheDocument();
+    });
+    it('validates passwords and supports optional delete', async () => {
+        const onEdit = vi.fn(async () => undefined);
+        render(_jsx(EditRow, { titleKey: "password.title", value: "secret", type: "password", onEdit: onEdit, optional: true }));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.change(screen.getByLabelText('password'), { target: { value: 'next-secret' } });
+        fireEvent.change(screen.getByLabelText('password.confirm'), { target: { value: 'wrong' } });
+        fireEvent.click(screen.getByText('check-icon'));
+        expect(mockShowErrorMessage).toHaveBeenCalledWith('password.match');
+        fireEvent.change(screen.getByLabelText('password.confirm'), { target: { value: 'next-secret' } });
+        fireEvent.click(screen.getByText('check-icon'));
+        await waitFor(() => expect(onEdit).toHaveBeenCalledWith('next-secret'));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.click(screen.getByText('delete-icon'));
+        await waitFor(() => expect(onEdit).toHaveBeenCalledWith(undefined));
+    });
+    it('applies checkbox and range edits with validation', async () => {
+        const checkboxEdit = vi.fn(async () => undefined);
+        const rangeEdit = vi.fn(async () => undefined);
+        const { rerender } = render(_jsx(EditRow, { titleKey: "checkbox.title", value: false, type: "checkbox", onEdit: checkboxEdit }));
+        fireEvent.click(screen.getByLabelText('checkbox'));
+        await waitFor(() => expect(checkboxEdit).toHaveBeenCalledWith('true'));
+        rerender(_jsx(EditRow, { titleKey: "range.title", value: 10, type: "range", min: 5, max: 20, onEdit: rangeEdit, valueLabelFormat: value => `${value}%` }));
+        expect(screen.getByText('10%')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.change(screen.getByLabelText('slider'), { target: { value: '15' } });
+        fireEvent.click(screen.getByText('check-icon'));
+        await waitFor(() => expect(rangeEdit).toHaveBeenCalledWith('15'));
+    });
+    it('tracks validation errors and failOnValidate behavior for text and numbers', () => {
+        const onEdit = vi.fn(async () => undefined);
+        const { unmount } = render(_jsx(EditRow, { titleKey: "text.title", value: "alpha", onEdit: onEdit, validate: (value) => value !== 'bad' }));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.change(screen.getByLabelText('text'), { target: { value: 'bad' } });
+        expect(screen.getByLabelText('text')).toHaveAttribute('data-error', 'true');
+        unmount();
+        render(_jsx(EditRow, { titleKey: "number.title", value: 5, type: "number", min: 2, max: 10, onEdit: onEdit, failOnValidate: true }));
+        fireEvent.click(screen.getByText('edit-icon'));
+        fireEvent.change(screen.getByLabelText('number'), { target: { value: '1' } });
+        expect(screen.getByLabelText('number')).toHaveValue('5');
+    });
+});

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

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

package/components/elements/MarkdownEditor.test.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const capturedProps = vi.hoisted(() => ({ current: null }));
+let monacoValue = null;
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => monacoValue
+}));
+vi.mock('@mui/material', () => ({
+    useTheme: () => ({ palette: { mode: 'light' } })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/elements/ThemedEditor', () => ({
+    default: (props) => {
+        capturedProps.current = props;
+        return _jsx("div", { children: "themed-editor" });
+    }
+}));
+vi.mock('../routes/overviews/markdownExtendedTokenProvider', () => ({
+    conf: { autoClosingPairs: [] },
+    language: { tokenizer: {} }
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return { config: { lookups: {} } };
+            return actual.useContext(context);
+        }
+    };
+});
+import MarkdownEditor from './MarkdownEditor';
+describe('MarkdownEditor', () => {
+    it('configures markdown-extended editors and normalizes onChange values', () => {
+        const setEOL = vi.fn();
+        const model = { setEOL, getLanguageId: () => 'plaintext' };
+        const dispose = vi.fn();
+        monacoValue = {
+            editor: {
+                EndOfLineSequence: { LF: 1 },
+                getModels: () => [model],
+                onDidCreateModel: (cb) => {
+                    cb(model);
+                    return { dispose };
+                },
+                setModelLanguage: vi.fn()
+            },
+            languages: {
+                register: vi.fn(),
+                setLanguageConfiguration: vi.fn(() => ({ dispose })),
+                setMonarchTokensProvider: vi.fn(() => ({ dispose })),
+                getLanguages: () => [{ id: 'markdown-extended' }]
+            }
+        };
+        const setContent = vi.fn();
+        render(_jsx(MarkdownEditor, { content: "hello", setContent: setContent, editorOptions: { wordWrap: 'on' } }));
+        capturedProps.current.beforeMount(monacoValue);
+        expect(monacoValue.languages.register).toHaveBeenCalledWith({ id: 'markdown-extended' });
+        expect(setEOL).toHaveBeenCalledWith(1);
+        expect(monacoValue.editor.setModelLanguage).toHaveBeenCalledWith(model, 'markdown-extended');
+        expect(capturedProps.current.options).toMatchObject({
+            fontSize: 16,
+            wordWrap: 'on',
+            bracketPairColorization: { enabled: false }
+        });
+        capturedProps.current.onChange(undefined);
+        expect(setContent).toHaveBeenCalledWith('');
+    });
+});

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

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

package/components/elements/ObjectDetails.test.js

@@ -0,0 +1,70 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('@mui/icons-material', () => ({
+    ArrowDropDown: () => _jsx("div", { children: "expand-icon" }),
+    InfoOutlined: () => _jsx("div", { children: "info-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Accordion: ({ children }) => _jsx("div", { children: children }),
+    AccordionDetails: ({ children }) => _jsx("div", { children: children }),
+    AccordionSummary: ({ children }) => _jsx("div", { children: children }),
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    Grid: ({ children }) => _jsx("div", { children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ value, onChange, label }) => (_jsxs("label", { children: [label, _jsx("input", { "aria-label": label, value: value, onChange: onChange })] })),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useTheme: () => ({
+        palette: { divider: '#ddd' },
+        spacing: (n) => `${n * 8}px`
+    })
+}));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ children }) => _jsx("span", { children: children })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/Throttler', () => ({
+    default: class {
+        debounce(fn) {
+            fn();
+        }
+    }
+}));
+import ObjectDetails from './ObjectDetails';
+describe('ObjectDetails', () => {
+    it('renders grouped sections, nested values, and filters by search query', async () => {
+        render(_jsx(ObjectDetails, { obj: {
+                event: {
+                    id: 'evt-1',
+                    nested: { key: 'value' },
+                    dup: ['alpha', 'alpha', 'beta']
+                },
+                source: {
+                    ip: '1.1.1.1',
+                    port: 443,
+                    enabled: false
+                },
+                howler: { id: 'skip-me' },
+                labels: { tag: 'skip' },
+                __hidden: { value: 'skip' }
+            } }));
+        expect(screen.getByText('Event')).toBeInTheDocument();
+        expect(screen.getByText('Source')).toBeInTheDocument();
+        expect(screen.queryByText('Howler')).not.toBeInTheDocument();
+        expect(screen.getByText('evt-1')).toBeInTheDocument();
+        expect(screen.getByText('value')).toBeInTheDocument();
+        expect(screen.getByText('alpha')).toBeInTheDocument();
+        expect(screen.getByText('beta')).toBeInTheDocument();
+        expect(screen.getByText('info-icon')).toBeInTheDocument();
+        fireEvent.change(screen.getByLabelText('overview.search'), { target: { value: 'ip' } });
+        await waitFor(() => {
+            expect(screen.getByText('1.1.1.1')).toBeInTheDocument();
+            expect(screen.queryByText('evt-1')).not.toBeInTheDocument();
+        });
+    });
+});

package/components/elements/PluginChip.d.ts

@@ -1,7 +1,8 @@
 import { type ChipProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-export type PluginChipProps = ChipProps & {
+import { type FC, type ReactNode } from 'react';
+export type PluginChipProps = Omit<ChipProps, 'children'> & {
+    children?: ReactNode;
     value: string;
     context: string;
     field?: string;