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

package/components/elements/hit/grid/RecordTable.test.js

@@ -0,0 +1,99 @@
+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 mockSetColumnWidth = vi.hoisted(() => vi.fn());
+const mockSetColumns = vi.hoisted(() => vi.fn());
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn().mockResolvedValue({ analytic_id: 'analytic-1' }));
+const gridColumnsContextToken = vi.hoisted(() => ({ name: 'grid-columns-context' }));
+vi.mock('@dnd-kit/core', () => ({
+    DndContext: ({ children, onDragEnd }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onDragEnd({ active: { id: 'col1' }, over: { id: 'col2' } }), children: "drag-column" }), children] })),
+    KeyboardSensor: vi.fn(),
+    PointerSensor: vi.fn(),
+    pointerWithin: vi.fn(),
+    useSensor: vi.fn(),
+    useSensors: vi.fn(() => [])
+}));
+vi.mock('@dnd-kit/sortable', () => ({
+    SortableContext: ({ children }) => _jsx("div", { children: children }),
+    arrayMove: (items, from, to) => {
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    },
+    sortableKeyboardCoordinates: vi.fn()
+}));
+vi.mock('@mui/icons-material', () => ({
+    FormatIndentDecrease: () => _jsx("div", { children: "collapse" }),
+    FormatIndentIncrease: () => _jsx("div", { children: "expand" }),
+    Search: () => _jsx("div", { children: "search-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    IconButton: ({ children, onClick }) => _jsx("button", { onClick: onClick, children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Table: ({ children }) => _jsx("div", { children: children }),
+    TableBody: ({ children }) => _jsx("div", { children: children }),
+    TableCell: ({ children }) => _jsx("div", { children: children }),
+    TableHead: ({ children }) => _jsx("div", { children: children }),
+    TableRow: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingAnalytic: mockGetMatchingAnalytic })
+}));
+vi.mock('components/app/providers/GridColumnsProvider', () => ({
+    GridColumnsContext: gridColumnsContextToken
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [false, vi.fn()]
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: { GRID_COLLAPSE_COLUMN: 'GRID_COLLAPSE_COLUMN' }
+}));
+vi.mock('utils/typeUtils', () => ({
+    isHit: (record) => record?.__index === 'hit'
+}));
+vi.mock('./ColumnHeader', () => ({
+    default: ({ col, onMouseDown }) => _jsx("button", { onMouseDown: e => onMouseDown(col, e), children: col })
+}));
+vi.mock('./RecordRow', () => ({
+    default: ({ record, analyticIds }) => (_jsx("div", { children: `row:${record.howler.id}:${analyticIds[record.howler.analytic] ?? ''}` }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === gridColumnsContextToken) {
+                return {
+                    columns: ['col1', 'col2'],
+                    columnWidths: { col1: 120, col2: 80 },
+                    columnSources: { col1: 's1', col2: 's2' },
+                    setColumnWidth: mockSetColumnWidth,
+                    setColumns: mockSetColumns,
+                    isReady: true
+                };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import RecordTable from './RecordTable';
+describe('RecordTable', () => {
+    it('loads analytic ids, refreshes, reorders columns, and resizes columns', async () => {
+        render(_jsx(RecordTable, { query: "status:open", items: [{ __index: 'hit', howler: { id: 'hit-1', analytic: 'A' } }], refreshItems: vi.fn() }));
+        await waitFor(() => expect(mockGetMatchingAnalytic).toHaveBeenCalled());
+        expect(screen.getByText('row:hit-1:analytic-1')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('search-icon'));
+        fireEvent.click(screen.getByText('drag-column'));
+        expect(mockSetColumns).toHaveBeenCalledWith(['col2', 'col1']);
+        const header = screen.getByText('col1');
+        Object.defineProperty(header.parentElement, 'getBoundingClientRect', {
+            value: () => ({ width: 120 })
+        });
+        fireEvent.mouseDown(header);
+        fireEvent.mouseMove(window, { movementX: 20 });
+        fireEvent.mouseUp(window);
+        expect(mockSetColumnWidth).toHaveBeenCalledWith('col1', 140);
+    });
+});

package/components/elements/record/RecordComments.test.d.ts

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

package/components/elements/record/RecordComments.test.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn());
+let socketHandler;
+vi.mock('api', () => ({
+    default: {
+        hit: {
+            comments: {
+                post: (id, value) => ({ op: 'post', id, value }),
+                del: (id, ids) => ({ op: 'del', id, ids }),
+                put: (id, commentId, value) => ({ op: 'put', id, commentId, value }),
+                react: {
+                    put: (id, commentId, type) => ({ op: 'react-put', id, commentId, type }),
+                    del: (id, commentId) => ({ op: 'react-del', id, commentId })
+                }
+            }
+        }
+    }
+}));
+vi.mock('@mui/icons-material', () => ({
+    Clear: () => _jsx("div", { children: "clear-icon" }),
+    KeyboardArrowDown: () => _jsx("div", { children: "expand-icon" }),
+    Send: () => _jsx("div", { children: "send-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Accordion: ({ children }) => _jsx("div", { children: children }),
+    AccordionDetails: ({ children }) => _jsx("div", { children: children }),
+    AccordionSummary: ({ children }) => _jsx("div", { children: children }),
+    AvatarGroup: ({ children }) => _jsx("div", { children: children }),
+    Chip: ({ label, onClick }) => _jsx("button", { onClick: onClick, children: label }),
+    IconButton: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
+    Skeleton: () => _jsx("div", { children: "loading" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ placeholder, inputRef, onKeyDown, onChangeCapture, onFocus, onBlur, error }) => (_jsx("textarea", { "aria-label": placeholder, ref: inputRef, onKeyDown: onKeyDown, onInput: onChangeCapture, onFocus: onFocus, onBlur: onBlur, "data-error": error })),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: { username: 'alice' } })
+}));
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingAnalytic: mockGetMatchingAnalytic })
+}));
+vi.mock('components/app/providers/SocketProvider', () => ({
+    SocketContext: { name: 'socket-context' }
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex" })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context?.name === 'socket-context') {
+                return {
+                    addListener: (...args) => {
+                        socketHandler = args[1];
+                        return mockAddListener(...args);
+                    },
+                    removeListener: mockRemoveListener,
+                    emit: mockEmit
+                };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key, params) => (params?.count ? `${key}:${params.count}` : key) })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate
+}));
+vi.mock('utils/typeUtils', () => ({
+    isHit: (record) => record?.__index === 'hit'
+}));
+vi.mock('utils/utils', () => ({
+    compareTimestamp: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+    sortByTimestamp: (items) => [...items].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+}));
+vi.mock('../Comment', () => ({
+    default: ({ comment, extra, handleDelete, handleEdit, handleQuote, handleReact }) => (_jsxs("div", { children: [_jsx("div", { children: comment.value }), extra, handleDelete && _jsxs("button", { onClick: handleDelete, children: ["delete-", comment.id] }), handleEdit && _jsxs("button", { onClick: () => handleEdit(`edited-${comment.id}`), children: ["edit-", comment.id] }), handleQuote && _jsxs("button", { onClick: handleQuote, children: ["quote-", comment.id] }), handleReact && _jsxs("button", { onClick: () => handleReact('smile'), children: ["react-", comment.id] }), handleReact && _jsxs("button", { onClick: () => handleReact(null), children: ["unreact-", comment.id] })] }))
+}));
+vi.mock('../display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar:${userId}` })
+}));
+vi.mock('../display/TypingIndicator', () => ({
+    default: () => _jsx("div", { children: "typing-indicator" })
+}));
+import RecordComments from './RecordComments';
+describe('RecordComments', () => {
+    beforeEach(() => {
+        socketHandler = undefined;
+        mockDispatchApi.mockReset();
+        mockEmit.mockReset();
+        mockAddListener.mockReset();
+        mockRemoveListener.mockReset();
+        mockNavigate.mockReset();
+        mockGetMatchingAnalytic.mockReset();
+    });
+    it('submits comments, reacts to socket typing, and routes analytic comment chips', async () => {
+        mockGetMatchingAnalytic.mockResolvedValue({
+            analytic_id: 'analytic-1',
+            comment: [
+                { id: 'analytic-comment', value: 'analytic note', timestamp: '2026-01-01T00:00:00Z', detection: 'det-1' }
+            ]
+        });
+        mockDispatchApi.mockResolvedValue({
+            howler: {
+                comment: [{ id: 'comment-2', value: 'saved comment', timestamp: '2026-01-02T00:00:00Z', reactions: {} }]
+            }
+        });
+        render(_jsx(RecordComments, { users: { alice: { name: 'Alice' }, bob: { name: 'Bob' } }, record: {
+                __index: 'hit',
+                howler: {
+                    id: 'hit-1',
+                    analytic: 'Rule 1',
+                    detection: 'det-1',
+                    comment: [
+                        { id: 'comment-1', value: 'existing comment', timestamp: '2026-01-01T00:00:00Z', reactions: {} }
+                    ]
+                }
+            } }));
+        const input = screen.getByLabelText('comments.add');
+        fireEvent.focus(input);
+        expect(mockEmit).toHaveBeenCalledWith({ broadcast: true, action: 'typing', id: 'hit-1' });
+        fireEvent.change(input, { target: { value: 'new comment' } });
+        fireEvent.keyDown(input, { key: 'Enter', ctrlKey: true, currentTarget: input });
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({ op: 'post', id: 'hit-1', value: 'new comment' }, expect.any(Object)));
+        expect(screen.getByText('saved comment')).toBeInTheDocument();
+        await act(async () => {
+            socketHandler?.({ event: { action: 'typing', username: 'bob' } });
+        });
+        expect(screen.getByText('typing-indicator')).toBeInTheDocument();
+        expect(screen.getByText('avatar:bob')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('Rule 1 - det-1'));
+        expect(mockNavigate).toHaveBeenCalledWith('/analytics/analytic-1?tab=comments&filter=det-1');
+        fireEvent.blur(input);
+        expect(mockEmit).toHaveBeenCalledWith({ broadcast: true, action: 'stop_typing', id: 'hit-1' });
+    });
+});

package/components/elements/record/RecordRelated.test.d.ts

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

package/components/elements/record/RecordRelated.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('@mui/material', () => ({
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tab: ({ label }) => _jsx("span", { children: label }),
+    Tabs: ({ children, onChange }) => (_jsx("div", { children: Array.isArray(children)
+            ? children.map((child) => child ? (_jsx("button", { onClick: () => onChange?.(null, child.props.value), children: child }, child.props.value)) : null)
+            : children })),
+    useTheme: () => ({ palette: { divider: '#ddd' } })
+}));
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ event }) => _jsx("div", { children: `event:${event.howler.id}` })
+}));
+vi.mock('components/hooks/useRelatedRecords', () => ({
+    default: () => [
+        { __index: 'hit', howler: { id: 'hit-2' } },
+        { __index: 'case', case_id: 'case-1' },
+        { __index: 'event', howler: { id: 'event-1' } }
+    ]
+}));
+vi.mock('lodash-es', () => ({
+    groupBy: (records, key) => records.reduce((acc, item) => {
+        const group = item[key];
+        acc[group] = [...(acc[group] ?? []), item];
+        return acc;
+    }, {})
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    Link: ({ children, to }) => _jsx("a", { href: to, children: children })
+}));
+vi.mock('utils/typeUtils', () => ({
+    isCase: (record) => record?.__index === 'case',
+    isEvent: (record) => record?.__index === 'event',
+    isHit: (record) => record?.__index === 'hit'
+}));
+vi.mock('../case/CaseCard', () => ({
+    default: ({ case: record }) => _jsx("div", { children: `case:${record.case_id}` })
+}));
+vi.mock('../hit/HitCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `hit:${id}` })
+}));
+vi.mock('../hit/HitLayout', () => ({
+    HitLayout: { NORMAL: 'normal' }
+}));
+vi.mock('../hit/related/RelatedLink', () => ({
+    default: ({ title, href }) => _jsx("div", { children: `${title}:${href}` })
+}));
+import RecordRelated from './RecordRelated';
+describe('RecordRelated', () => {
+    it('renders links and switches between hit, case, and event related records', () => {
+        render(_jsx(RecordRelated, { record: {
+                __index: 'hit',
+                howler: {
+                    id: 'hit-1',
+                    related: ['ref-1'],
+                    links: [{ title: 'Example', href: 'https://example.com' }]
+                }
+            } }));
+        expect(screen.getByText('Example:https://example.com')).toBeInTheDocument();
+        fireEvent.click(screen.getAllByText('hit.related.tab.hit')[0]);
+        expect(screen.getByText('hit:hit-2')).toBeInTheDocument();
+        fireEvent.click(screen.getAllByText('hit.related.tab.case')[0]);
+        expect(screen.getByText('case:case-1')).toBeInTheDocument();
+        fireEvent.click(screen.getAllByText('hit.related.tab.event')[0]);
+        expect(screen.getByText('event:event-1')).toBeInTheDocument();
+    });
+    it('returns nothing when no record is provided', () => {
+        const { container } = render(_jsx(RecordRelated, { record: undefined }));
+        expect(container).toBeEmptyDOMElement();
+    });
+});

package/components/elements/record/RecordWorklog.test.d.ts

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

package/components/elements/record/RecordWorklog.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+let versions = {};
+const mockSetVersions = vi.hoisted(() => vi.fn((next) => {
+    versions = next;
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [versions, mockSetVersions]
+}));
+vi.mock('components/hooks/useMyUtils', () => ({
+    default: () => ({ shiftColor: (color) => color })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: { LAST_SEEN: 'LAST_SEEN' }
+}));
+vi.mock('utils/utils', () => ({
+    compareTimestamp: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+    twitterShort: (value) => `short:${value}`
+}));
+vi.mock('../display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar:${userId}` })
+}));
+vi.mock('../display/HowlerCard', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('../display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { children: `markdown:${md}` })
+}));
+import RecordWorklog from './RecordWorklog';
+describe('RecordWorklog', () => {
+    beforeEach(() => {
+        versions = {};
+        mockSetVersions.mockClear();
+    });
+    it('renders grouped worklog entries and marks new entries', () => {
+        const { unmount } = render(_jsx(RecordWorklog, { users: { alice: { name: 'Alice' } }, record: {
+                __index: 'hit',
+                howler: {
+                    id: 'hit-1',
+                    log: [
+                        { user: 'alice', previous_version: 'v3', timestamp: '2026-01-03T00:00:00Z', explanation: ' hello ' },
+                        {
+                            user: 'alice',
+                            previous_version: 'v2',
+                            timestamp: '2026-01-02T00:03:00Z',
+                            key: 'status',
+                            type: 'set',
+                            previous_value: 'open',
+                            new_value: 'closed'
+                        },
+                        {
+                            user: 'bob',
+                            previous_version: 'v1',
+                            timestamp: '2026-01-02T00:00:00Z',
+                            key: 'labels',
+                            type: 'appended',
+                            previous_value: '[old]',
+                            new_value: 'new'
+                        }
+                    ]
+                }
+            } }));
+        expect(screen.getAllByText('avatar:alice').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('Alice').length).toBeGreaterThan(0);
+        expect(screen.getByText('markdown:hello')).toBeInTheDocument();
+        expect(screen.getByText('short:2026-01-03T00:00:00Z')).toBeInTheDocument();
+        expect(screen.getByText(/hit\.worklog\.set/)).toBeInTheDocument();
+        expect(screen.getByText(/hit\.worklog\.appended/)).toBeInTheDocument();
+        unmount();
+        expect(mockSetVersions).toHaveBeenCalled();
+    });
+});

package/components/hooks/useHitActions.test.d.ts

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

package/components/hooks/useHitActions.test.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowWarningMessage = vi.hoisted(() => vi.fn());
+const mockUpdateRecord = vi.hoisted(() => vi.fn());
+const mockDrawerOpen = vi.hoisted(() => vi.fn());
+const mockDrawerClose = vi.hoisted(() => vi.fn());
+const mockShowModal = vi.hoisted(() => vi.fn());
+const mockTransitionPost = vi.hoisted(() => vi.fn());
+const mockHitGet = vi.hoisted(() => vi.fn());
+const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const appDrawerContextToken = vi.hoisted(() => ({ name: 'drawer-context' }));
+const modalContextToken = vi.hoisted(() => ({ name: 'modal-context' }));
+const recordContextToken = vi.hoisted(() => ({ name: 'record-context' }));
+let configValue = {
+    config: {
+        lookups: {
+            transitions: {
+                open: ['assign_to_me', 'assign_to_other', 'promote'],
+                'in-progress': ['release', 'pause', 'demote']
+            }
+        }
+    }
+};
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({
+        user: { username: 'alice', email: 'alice@example.com' }
+    })
+}));
+vi.mock('api', () => ({
+    default: {
+        hit: {
+            transition: { post: mockTransitionPost },
+            get: mockHitGet
+        }
+    }
+}));
+vi.mock('components/app/drawers/AssignUserDrawer', () => ({
+    default: ({ onAssigned }) => _jsx("button", { onClick: () => onAssigned('bob'), children: "assign-user" })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/app/providers/AppDrawerProvider', () => ({
+    AppDrawerContext: appDrawerContextToken
+}));
+vi.mock('components/app/providers/ModalProvider', () => ({
+    ModalContext: modalContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/elements/display/modals/RationaleModal', () => ({
+    default: ({ onSubmit }) => _jsx("button", { onClick: () => onSubmit('modal rationale'), children: "submit-rationale" })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showWarningMessage: mockShowWarningMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key, vars) => (vars?.assessment ? `${key}:${vars.assessment}` : key) })
+}));
+vi.mock('use-context-selector', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContextSelector: (_context, selector) => selector({ updateRecord: mockUpdateRecord })
+    };
+});
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return configValue;
+            if (context === appDrawerContextToken)
+                return { open: mockDrawerOpen, close: mockDrawerClose };
+            if (context === modalContextToken)
+                return { showModal: mockShowModal };
+            return actual.useContext(context);
+        }
+    };
+});
+import useHitActions from './useHitActions';
+describe('useHitActions', () => {
+    beforeEach(() => {
+        configValue = {
+            config: {
+                lookups: {
+                    transitions: {
+                        open: ['assign_to_me', 'assign_to_other', 'promote'],
+                        'in-progress': ['release', 'pause', 'demote']
+                    }
+                }
+            }
+        };
+        mockDispatchApi.mockReset();
+        mockShowWarningMessage.mockReset();
+        mockUpdateRecord.mockReset();
+        mockDrawerOpen.mockReset();
+        mockDrawerClose.mockReset();
+        mockShowModal.mockReset();
+        mockTransitionPost.mockReset();
+        mockHitGet.mockReset();
+    });
+    it('computes voting and transition state for a single hit', () => {
+        const hit = {
+            howler: {
+                id: 'hit-1',
+                status: 'open',
+                assignment: 'bob',
+                escalation: 'hit',
+                votes: { benign: ['alice@example.com'] }
+            }
+        };
+        const { result } = renderHook(() => useHitActions(hit));
+        expect(result.current.canVote).toBe(true);
+        expect(result.current.canAssess).toBe(true);
+        expect(result.current.selectedVote).toBe('benign');
+        expect(result.current.availableTransitions.map(v => v.name)).toEqual([
+            'assign_to_other',
+            'assign_to_me',
+            'promote'
+        ]);
+    });
+    it('votes and updates hits, including conflict recovery', async () => {
+        const hit = { howler: { id: 'hit-1', status: 'open', assignment: 'bob', escalation: 'hit', votes: {} } };
+        mockTransitionPost.mockImplementation((id, body) => ({ id, body }));
+        mockDispatchApi.mockImplementationOnce(async (_req, opts) => {
+            await opts.onConflict();
+            return { howler: { id: 'hit-1', vote: 'malicious' } };
+        });
+        mockHitGet.mockResolvedValueOnce({ howler: { id: 'hit-1', refreshed: true } });
+        mockTransitionPost.mockResolvedValueOnce({ howler: { id: 'hit-1', vote: 'malicious' } });
+        const { result } = renderHook(() => useHitActions(hit));
+        await act(async () => {
+            await result.current.vote('malicious');
+        });
+        expect(mockHitGet).toHaveBeenCalledWith('hit-1');
+        expect(mockUpdateRecord).toHaveBeenCalledWith({ howler: { id: 'hit-1', vote: 'malicious' } });
+    });
+    it('assesses hits with modal rationale and warns on conflicting server updates', async () => {
+        const hit = {
+            howler: { id: 'hit-2', status: 'open', assignment: 'bob', assessment: null, escalation: 'hit' }
+        };
+        mockTransitionPost.mockImplementation((id, body) => ({ id, body }));
+        mockShowModal.mockImplementation((node) => node.props.onSubmit('modal rationale'));
+        mockDispatchApi.mockImplementationOnce(async (_req, opts) => {
+            await opts.onConflict();
+            return null;
+        });
+        mockHitGet.mockResolvedValueOnce({ howler: { id: 'hit-2', assessment: 'existing' } });
+        const { result } = renderHook(() => useHitActions(hit));
+        await act(async () => {
+            await result.current.assess('malicious');
+        });
+        expect(mockUpdateRecord).toHaveBeenCalledWith({ howler: { id: 'hit-2', assessment: 'existing' } });
+        expect(mockShowWarningMessage).toHaveBeenCalledWith('hit.actions.conflict.assess');
+    });
+    it('uses provided rationale and manages assignment workflows', async () => {
+        const hit = {
+            howler: { id: 'hit-3', status: 'open', assignment: 'bob', assessment: null, escalation: 'alert' }
+        };
+        mockTransitionPost.mockImplementation((id, body) => ({ id, body }));
+        mockDispatchApi.mockResolvedValue({ howler: { id: 'hit-3', updated: true } });
+        mockDrawerOpen.mockImplementation((props) => props.children.props.onAssigned('bob'));
+        const { result } = renderHook(() => useHitActions(hit));
+        await act(async () => {
+            await result.current.assess('benign', true, 'manual rationale');
+        });
+        expect(mockTransitionPost).toHaveBeenCalledWith('hit-3', {
+            transition: 'assess',
+            data: { assessment: 'benign', rationale: 'manual rationale' }
+        });
+        await act(async () => {
+            await result.current.manage('assign_to_other');
+        });
+        expect(mockDrawerOpen).toHaveBeenCalled();
+        expect(mockTransitionPost).toHaveBeenCalledWith('hit-3', {
+            transition: 'assign_to_other',
+            data: { assignee: 'bob' }
+        });
+    });
+});

package/components/hooks/useMyApi.test.d.ts

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

package/components/hooks/useMyApi.test.js

@@ -0,0 +1,31 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockShowErrorMessage = vi.hoisted(() => vi.fn());
+vi.mock('./useMySnackbar', () => ({
+    default: () => ({ showErrorMessage: mockShowErrorMessage })
+}));
+import useMyApi from './useMyApi';
+describe('useMyApi', () => {
+    it('returns successful API responses', async () => {
+        const { result } = renderHook(() => useMyApi());
+        await expect(result.current.dispatchApi(Promise.resolve('ok'))).resolves.toBe('ok');
+    });
+    it('handles conflicts through the callback without surfacing an error', async () => {
+        const { result } = renderHook(() => useMyApi());
+        const onConflict = vi.fn();
+        const error = Object.assign(new Error('conflict'), { cause: { api_status_code: 409 } });
+        await expect(result.current.dispatchApi(Promise.reject(error), { onConflict })).resolves.toBeUndefined();
+        expect(onConflict).toHaveBeenCalled();
+        expect(mockShowErrorMessage).not.toHaveBeenCalled();
+    });
+    it('shows, logs, and rethrows errors according to config', async () => {
+        const { result } = renderHook(() => useMyApi());
+        const error = new Error('failed');
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        await expect(result.current.dispatchApi(Promise.reject(error), { logError: true })).rejects.toThrow('failed');
+        expect(mockShowErrorMessage).toHaveBeenCalledWith('failed');
+        expect(consoleSpy).toHaveBeenCalledWith(error);
+        await expect(result.current.dispatchApi(Promise.reject(error), { throwError: false, showError: false, logError: false })).resolves.toBeUndefined();
+    });
+});

package/components/hooks/useMyChart.test.d.ts

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