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

package/components/{routes/hits/search/HitContextMenu.test.js → elements/record/RecordContextMenu.test.js}

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import { omit } from 'lodash-es';
@@ -57,6 +57,7 @@ vi.mock('components/app/hooks/useMatchers', () => ({
         getMatchingTemplate: mockGetMatchingTemplate
     }))
 }));
+const mockShowModal = vi.fn();
 const mockDispatchApi = vi.fn();
 vi.mock('components/hooks/useMyApi', () => ({
     default: vi.fn(() => ({
@@ -82,15 +83,18 @@ vi.mock('plugins/store', () => ({
         plugins: ['plugin1']
     }
 }));
+vi.mock('components/routes/cases/modals/AddToCaseModal', () => ({
+    default: () => null
+}));
 // Mock MUI components
 vi.mock('@mui/material', async () => {
     const actual = await vi.importActual('@mui/material');
     return {
         ...actual,
-        Menu: ({ children, open, onClose, ...props }) => open ? (_jsx("div", { role: "menu", onClick: onClose, ...omit(props, ['sx', 'slotProps', 'MenuListProps', 'anchorOrigin', 'anchorEl']), children: children })) : null,
+        Menu: ({ children, open, onClose, ...props }) => open ? (_jsx("div", { tabIndex: 0, role: "menu", onClick: onClose, ...omit(props, ['sx', 'slotProps', 'MenuListProps', 'anchorOrigin', 'anchorEl']), children: children })) : null,
         MenuItem: ({ children, onClick, disabled, component, to, ...props }) => {
             const Component = component || 'div';
-            return (_jsx(Component, { role: "menuitem", onClick: onClick, "aria-disabled": disabled, href: to, ...omit(props, ['sx', 'component']), children: children }));
+            return (_jsx(Component, { tabIndex: 0, role: "menuitem", onClick: onClick, "aria-disabled": disabled, href: to, ...omit(props, ['sx', 'component']), children: children }));
         },
         Fade: ({ children, in: inProp }) => (inProp ? _jsx(_Fragment, { children: children }) : null),
         ListItemIcon: ({ children }) => _jsx("div", { children: children }),
@@ -101,13 +105,14 @@ vi.mock('@mui/material', async () => {
 });
 // Import component after mocks
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { createMockAction, createMockAnalytic, createMockHit, createMockTemplate } from '@cccsaurora/howler-ui/tests/utils';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
-import HitContextMenu from './HitContextMenu';
+import RecordContextMenu from './RecordContextMenu';
 const mockGetSelectedId = vi.fn(() => 'test-hit-1');
 const mockConfig = {
     lookups: {
@@ -115,16 +120,16 @@ const mockConfig = {
     }
 };
 const mockApiContext = { config: mockConfig };
-const mockHitContext = {
-    hits: {
+const mockRecordContext = {
+    records: {
         'test-hit-1': createMockHit()
     },
-    selectedHits: []
+    selectedRecords: []
 };
 const mockParameterContext = { query: DEFAULT_QUERY, setQuery: vi.fn() };
 // Test wrapper
 const Wrapper = ({ children }) => {
-    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ApiConfigContext.Provider, { value: mockApiContext, children: _jsx(HitContext.Provider, { value: mockHitContext, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }) }));
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ApiConfigContext.Provider, { value: mockApiContext, children: _jsx(ModalContext.Provider, { value: { showModal: mockShowModal }, children: _jsx(RecordContext.Provider, { value: mockRecordContext, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }) }) }));
 };
 describe('HitContextMenu', () => {
     let user;
@@ -132,11 +137,15 @@ describe('HitContextMenu', () => {
     beforeEach(() => {
         user = userEvent.setup();
         vi.clearAllMocks();
-        mockHitContext.selectedHits.length = 0;
-        mockHitContext.hits['test-hit-1'] = createMockHit();
+        // Reset context to clean state
+        mockRecordContext.selectedRecords.length = 0;
+        mockRecordContext.records = {
+            'test-hit-1': createMockHit()
+        };
+        mockGetSelectedId.mockReturnValue('test-hit-1');
         mockGetMatchingAnalytic.mockResolvedValue(createMockAnalytic());
         mockGetMatchingTemplate.mockResolvedValue(createMockTemplate());
-        rerender = render(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) })).rerender;
+        rerender = render(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) })).rerender;
     });
     describe('Context Menu Initialization', () => {
         it('should open menu on right-click', async () => {
@@ -166,7 +175,7 @@ describe('HitContextMenu', () => {
             });
             act(() => {
                 const menu = screen.getByRole('menu');
-                user.click(menu);
+                void user.click(menu);
             });
             await waitFor(() => {
                 expect(screen.queryByRole('menu')).not.toBeInTheDocument();
@@ -200,13 +209,13 @@ describe('HitContextMenu', () => {
         });
         it('should disable "Open Hit" when hit is null', async () => {
             act(() => {
-                mockHitContext.hits['test-hit-1'] = null;
+                mockRecordContext.records['test-hit-1'] = null;
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
             });
             await waitFor(() => {
                 const menuItems = screen.getAllByRole('menuitem');
-                const openHitItem = menuItems.find(item => item.textContent?.toLowerCase().includes('open hit viewer'));
+                const openHitItem = menuItems.find(item => item.textContent?.toLowerCase().includes('open hit'));
                 expect(openHitItem).toHaveAttribute('aria-disabled', 'true');
             });
         });
@@ -247,7 +256,7 @@ describe('HitContextMenu', () => {
                     skip_rationale: false
                 }
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -305,7 +314,7 @@ describe('HitContextMenu', () => {
                 createMockAction({ action_id: 'action-2', name: 'Custom Action 2' })
             ];
             mockDispatchApi.mockResolvedValue({ items: mockActions });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -349,7 +358,7 @@ describe('HitContextMenu', () => {
         });
         it('should disable custom actions menu when no actions are available', async () => {
             mockDispatchApi.mockResolvedValueOnce({ items: [] });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -391,7 +400,7 @@ describe('HitContextMenu', () => {
                     skip_rationale: true
                 }
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -456,10 +465,45 @@ describe('HitContextMenu', () => {
                 expect(mockExecuteAction).toHaveBeenCalled();
             });
         });
-        it('should call executeAction with action_id and hit query', async () => {
+        it('should call executeAction with action_id and hit query for a single hit', async () => {
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action' })];
+            mockDispatchApi.mockResolvedValue({ items: mockActions });
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            let actionsMenuItem;
+            await waitFor(() => {
+                actionsMenuItem = screen.getByText('Run Action');
+                expect(actionsMenuItem).toBeInTheDocument();
+            });
+            act(() => {
+                fireEvent.mouseEnter(actionsMenuItem);
+            });
+            await waitFor(() => {
+                expect(screen.getByTestId('actions-submenu')).toBeInTheDocument();
+            });
+            await act(async () => {
+                const customActionOption = screen.getByText('Custom Action');
+                await user.click(customActionOption);
+            });
+            await waitFor(() => {
+                expect(mockExecuteAction).toHaveBeenCalledWith('action-1', 'howler.id:(test-hit-1)');
+            });
+        });
+        it('should call executeAction with combined hit query when multiple hits are selected', async () => {
             const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action' })];
             mockDispatchApi.mockResolvedValue({ items: mockActions });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            const hit1 = createMockHit({ howler: { id: 'hit-1' } });
+            const hit2 = createMockHit({ howler: { id: 'hit-2' } });
+            const hit3 = createMockHit({ howler: { id: 'hit-3' } });
+            mockRecordContext.records['hit-1'] = hit1;
+            mockRecordContext.records['hit-2'] = hit2;
+            mockRecordContext.records['hit-3'] = hit3;
+            mockRecordContext.selectedRecords = [hit1, hit2, hit3];
+            mockGetSelectedId.mockReturnValue('hit-1');
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -480,7 +524,7 @@ describe('HitContextMenu', () => {
                 await user.click(customActionOption);
             });
             await waitFor(() => {
-                expect(mockExecuteAction).toHaveBeenCalledWith('action-1', 'howler.id:test-hit-1');
+                expect(mockExecuteAction).toHaveBeenCalledWith('action-1', 'howler.id:(hit-1 OR hit-2 OR hit-3)');
             });
         });
         it('should close menu after action execution', async () => {
@@ -512,7 +556,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: ['howler.detection', 'event.id']
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
         });
         it('should render exclusion submenu with template keys', async () => {
             act(() => {
@@ -560,7 +604,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: ['howler.outline.indicators']
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -603,7 +647,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: []
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -615,7 +659,7 @@ describe('HitContextMenu', () => {
         });
         it('should skip null field values in exclusion menu', async () => {
             act(() => {
-                mockHitContext.hits['test-hit-1'].event = {};
+                mockRecordContext.records['test-hit-1'].event = {};
             });
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
@@ -638,7 +682,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: ['howler.detection', 'event.id']
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
         });
         it('should render inclusion submenu with template keys', async () => {
             act(() => {
@@ -686,7 +730,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: ['howler.outline.indicators']
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -729,7 +773,7 @@ describe('HitContextMenu', () => {
             mockGetMatchingTemplate.mockResolvedValue(createMockTemplate({
                 keys: []
             }));
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -741,7 +785,7 @@ describe('HitContextMenu', () => {
         });
         it('should skip null field values in inclusion menu', async () => {
             act(() => {
-                mockHitContext.hits['test-hit-1'].event = {};
+                mockRecordContext.records['test-hit-1'].event = {};
             });
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
@@ -760,24 +804,24 @@ describe('HitContextMenu', () => {
         });
     });
     describe('Multiple Hit Selection', () => {
-        it('should use selectedHits when current hit is included', async () => {
+        it('should use selectedRecords when current hit is included', async () => {
             act(() => {
-                mockHitContext.hits['hit-1'] = createMockHit({ howler: { id: 'hit-1' } });
-                mockHitContext.hits['hit-2'] = createMockHit({ howler: { id: 'hit-2' } });
-                mockHitContext.selectedHits.push(mockHitContext.hits['hit-1'], mockHitContext.hits['hit-2']);
+                mockRecordContext.records['hit-1'] = createMockHit({ howler: { id: 'hit-1' } });
+                mockRecordContext.records['hit-2'] = createMockHit({ howler: { id: 'hit-2' } });
+                mockRecordContext.selectedRecords.push(mockRecordContext.records['hit-1'], mockRecordContext.records['hit-2']);
                 mockGetSelectedId.mockReturnValue('hit-1');
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
             await user.pointer({ keys: '[MouseRight]', target: contextMenuWrapper });
-            // The component should use selectedHits for actions
+            // The component should use selectedRecords for actions
             // We can verify this indirectly through the useHitActions hook receiving the right data
             expect(screen.getByRole('menu')).toBeInTheDocument();
             expect(mockGetSelectedId).toHaveBeenCalled();
         });
-        it('should use only current hit when not in selectedHits', async () => {
+        it('should use only current hit when not in selectedRecords', async () => {
             act(() => {
-                mockHitContext.hits['hit-1'] = createMockHit({ howler: { id: 'hit-1' } });
-                mockHitContext.selectedHits.push(mockHitContext.hits['hit-1']);
+                mockRecordContext.records['hit-1'] = createMockHit({ howler: { id: 'hit-1' } });
+                mockRecordContext.selectedRecords.push(mockRecordContext.records['hit-1']);
                 mockGetSelectedId.mockReturnValue('test-hit-1');
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
@@ -796,12 +840,12 @@ describe('HitContextMenu', () => {
         });
         it('should call getMatchingAnalytic when hit has analytic', async () => {
             await waitFor(() => {
-                expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(mockHitContext.hits['test-hit-1']);
+                expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(mockRecordContext.records['test-hit-1']);
             });
         });
         it('should call getMatchingTemplate when menu opens', async () => {
             await waitFor(() => {
-                expect(mockGetMatchingTemplate).toHaveBeenCalledWith(mockHitContext.hits['test-hit-1']);
+                expect(mockGetMatchingTemplate).toHaveBeenCalledWith(mockRecordContext.records['test-hit-1']);
             });
         });
         it('should reset state when menu closes', async () => {
@@ -834,7 +878,7 @@ describe('HitContextMenu', () => {
     describe('Edge Cases and Error Handling', () => {
         it('should not crash when hit is null', async () => {
             act(() => {
-                mockHitContext.hits = {};
+                mockRecordContext.records = {};
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
             fireEvent.contextMenu(contextMenuWrapper);
@@ -845,7 +889,7 @@ describe('HitContextMenu', () => {
         });
         it('should not render exclusion menu when template is null', async () => {
             mockGetMatchingTemplate.mockResolvedValue(null);
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -859,7 +903,7 @@ describe('HitContextMenu', () => {
         });
         it('should not render inclusion menu when template is null', async () => {
             mockGetMatchingTemplate.mockResolvedValue(null);
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -873,7 +917,7 @@ describe('HitContextMenu', () => {
         });
         it('should handle API failure gracefully', async () => {
             mockDispatchApi.mockResolvedValue(null);
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
             fireEvent.contextMenu(contextMenuWrapper);
             await waitFor(() => {
@@ -884,7 +928,7 @@ describe('HitContextMenu', () => {
         });
         it('should not call getMatchingAnalytic or getMatchingTemplate when hit has no analytic', async () => {
             act(() => {
-                mockHitContext.hits['test-hit-1'].howler.analytic = null;
+                mockRecordContext.records['test-hit-1'].howler.analytic = null;
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
             fireEvent.contextMenu(contextMenuWrapper);
@@ -903,6 +947,56 @@ describe('HitContextMenu', () => {
             expect(mockPluginStoreExecuteFunction).toHaveBeenCalled();
         });
     });
+    describe('Add to Case Menu Item', () => {
+        it('should render "Add to Case" item in the menu', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Add to Case')).toBeInTheDocument();
+            });
+        });
+        it('should enable "Add to Case" when a record is present', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const menuItems = screen.getAllByRole('menuitem');
+                const addToCaseItem = menuItems.find(item => item.textContent?.includes('Add to Case'));
+                expect(addToCaseItem).toHaveAttribute('aria-disabled', 'false');
+            });
+        });
+        it('should disable "Add to Case" when record is null', async () => {
+            act(() => {
+                mockRecordContext.records['test-hit-1'] = null;
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const menuItems = screen.getAllByRole('menuitem');
+                const addToCaseItem = menuItems.find(item => item.textContent?.includes('Add to Case'));
+                expect(addToCaseItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should call showModal with an AddToCaseModal element when clicked', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Add to Case')).toBeInTheDocument();
+            });
+            await act(async () => {
+                await user.click(screen.getByText('Add to Case'));
+            });
+            await waitFor(() => {
+                expect(mockShowModal).toHaveBeenCalledOnce();
+                expect(mockShowModal).toHaveBeenCalledWith(expect.objectContaining({ type: expect.any(Function) }), expect.objectContaining({ maxHeight: expect.any(String) }));
+            });
+        });
+    });
     describe('Role-Based Action Permissions', () => {
         afterEach(() => {
             // Reset to default user with required roles
@@ -922,7 +1016,7 @@ describe('HitContextMenu', () => {
             });
             const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
             mockDispatchApi.mockResolvedValue({ items: mockActions });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -941,7 +1035,7 @@ describe('HitContextMenu', () => {
             });
             const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
             mockDispatchApi.mockResolvedValue({ items: mockActions });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -960,7 +1054,7 @@ describe('HitContextMenu', () => {
             });
             const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
             mockDispatchApi.mockResolvedValue({ items: mockActions });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);
@@ -978,7 +1072,7 @@ describe('HitContextMenu', () => {
                 }
             });
             mockDispatchApi.mockResolvedValue({ items: [] });
-            rerender(_jsx(Wrapper, { children: _jsx(HitContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
             act(() => {
                 const contextMenuWrapper = screen.getByText('Test Content').parentElement;
                 fireEvent.contextMenu(contextMenuWrapper);

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

@@ -0,0 +1,7 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+declare const RecordRelated: FC<{
+    record: Hit | Event;
+}>;
+export default RecordRelated;

package/components/elements/record/RecordRelated.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Tab, Tabs, useTheme } from '@mui/material';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelatedRecords';
+import { groupBy } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import CaseCard from '../case/CaseCard';
+import HitCard from '../hit/HitCard';
+import { HitLayout } from '../hit/HitLayout';
+import RelatedLink from '../hit/related/RelatedLink';
+const RecordRelated = ({ record }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const related = useMemo(() => record?.howler.related ?? [], [record?.howler.related]);
+    const records = useRelatedRecords(related, related.length > 0);
+    const groups = groupBy(records, '__index');
+    const hasLinks = (record?.howler.links?.length ?? 0) > 0;
+    const tabs = [
+        hasLinks && 'links',
+        groups.hit?.length > 0 && 'hit',
+        groups.case?.length > 0 && 'case',
+        groups.event?.length > 0 && 'event'
+    ].filter(Boolean);
+    const [activeTab, setActiveTab] = useState(false);
+    const currentTab = activeTab !== false && tabs.includes(activeTab) ? activeTab : (tabs[0] ?? false);
+    if (!record) {
+        return null;
+    }
+    return (_jsxs(Box, { sx: { borderTop: `thin solid ${theme.palette.divider}`, height: '100%', flex: 1, mr: 2, pb: 2 }, children: [_jsxs(Tabs, { value: currentTab, onChange: (_, v) => setActiveTab(v), variant: "scrollable", scrollButtons: "auto", children: [hasLinks && _jsx(Tab, { value: "links", label: t('hit.related.tab.links') }), groups.hit?.length > 0 && _jsx(Tab, { value: "hit", label: t('hit.related.tab.hit') }), groups.case?.length > 0 && _jsx(Tab, { value: "case", label: t('hit.related.tab.case') }), groups.event?.length > 0 && _jsx(Tab, { value: "event", label: t('hit.related.tab.event') })] }), currentTab === 'links' && (_jsx(Box, { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 1, pt: 1, children: record.howler.links.map(l => (_jsx(RelatedLink, { ...l }, l.title + l.href))) })), currentTab === 'hit' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isHit).map(h => (_jsx(Link, { to: `/hits/${h.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(HitCard, { id: h.howler.id, layout: HitLayout.NORMAL }) }, h.howler.id))) })), currentTab === 'case' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isCase).map(c => (_jsx(Link, { to: `/cases/${c.case_id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(CaseCard, { case: c }) }, c.case_id))) })), currentTab === 'event' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isEvent).map(o => (_jsx(Link, { to: `/events/${o.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(EventCard, { event: o }) }, o.howler.id))) }))] }));
+};
+export default RecordRelated;

package/components/elements/{hit/HitWorklog.d.ts → record/RecordWorklog.d.ts}

@@ -1,10 +1,11 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { FC } from 'react';
-declare const HitWorklog: FC<{
-    hit: Hit;
+declare const RecordWorklog: FC<{
+    record: Hit | Event;
     users: {
         [id: string]: HowlerUser;
     };
 }>;
-export default HitWorklog;
+export default RecordWorklog;

package/components/elements/{hit/HitWorklog.js → record/RecordWorklog.js}

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { CardContent, CardHeader, Divider, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -10,7 +10,7 @@ import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/util
 import HowlerAvatar from '../display/HowlerAvatar';
 import HowlerCard from '../display/HowlerCard';
 import Markdown from '../display/Markdown';
-const HitWorklog = ({ hit, users }) => {
+const RecordWorklog = ({ record, users }) => {
     const theme = useTheme();
     const { shiftColor } = useMyUtils();
     const { t } = useTranslation();
@@ -23,15 +23,15 @@ const HitWorklog = ({ hit, users }) => {
      */
     const worklogGroups = useMemo(() => {
         let setInitialVersion = false;
-        return (hit?.howler?.log || [])
+        return (record?.howler?.log || [])
             .slice()
             .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
             .reduce((acc, l) => {
-            if (!initialVersions[hit.howler.id] && !setInitialVersion) {
+            if (!initialVersions[record.howler.id] && !setInitialVersion) {
                 setInitialVersion = true;
                 setInitialVersions({
                     ...initialVersions,
-                    [hit.howler.id]: l.previous_version
+                    [record.howler.id]: l.previous_version
                 });
             }
             // Initialize the worklog card groups
@@ -42,9 +42,9 @@ const HitWorklog = ({ hit, users }) => {
             const currArr = acc[acc.length - 1];
             if (
             // Does this log version match the saved version?
-            l.previous_version === initialVersions[hit.howler.id] &&
+            l.previous_version === initialVersions[record.howler.id] &&
                 // Does the previous entry not match?
-                currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]) {
+                currArr[currArr.length - 1].previous_version !== initialVersions[record.howler.id]) {
                 // If so, we've figured out where the new logs should start, so we start a new card.
                 acc.push([l]);
                 return acc;
@@ -59,14 +59,14 @@ const HitWorklog = ({ hit, users }) => {
         }, []);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hit?.howler?.log]);
+    [record?.howler?.log]);
     useEffect(() => {
         // On unmount, mark the latest entry version as the last seen version.
         return () => {
-            if (hit?.howler.id) {
+            if (record?.howler.id) {
                 setInitialVersions({
                     ...initialVersions,
-                    [hit.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[hit.howler.id]
+                    [record.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[record.howler.id]
                 });
             }
         };
@@ -77,7 +77,9 @@ const HitWorklog = ({ hit, users }) => {
         if (worklogGroups.length > 0) {
             return worklogGroups.flatMap((ls, index) => {
                 const result = [];
-                if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
+                if (index > 0 &&
+                    initialVersions[record.howler.id] &&
+                    ls[0].previous_version === initialVersions[record.howler.id]) {
                     result.push(_jsx(Divider, { children: _jsxs(Stack, { direction: "row", children: [_jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('hit.worklog.new') }), _jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" })] }) }, "new"));
                 }
                 result.push(_jsxs(HowlerCard, { elevation: 4, children: [_jsx(CardHeader, { avatar: _jsx(HowlerAvatar, { userId: ls[0].user }), title: users[ls[0].user]?.name ?? ls[0].user, subheader: _jsx(Tooltip, { title: new Date(ls[0].timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", children: twitterShort(ls[0].timestamp) }) }) }), _jsx(CardContent, { children: _jsx(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: ls.map(l => (_jsxs(Typography, { variant: "body2", color: "text.secondary", component: "div", position: "relative", children: [l.explanation ? (_jsx(Markdown, { md: l.explanation.trim() })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('hit.worklog.updated'), "\u00A0"] }), _jsx("code", { children: l.key }), _jsx("span", { children: ":\u00A0" }), {
@@ -88,10 +90,10 @@ const HitWorklog = ({ hit, users }) => {
                 return result;
             });
         }
-        else if (!hit?.howler) {
+        else if (!record?.howler) {
             return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { width: "100%", height: 200, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 220, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 150, variant: "rounded" })] }));
         }
-    }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
+    }, [worklogGroups, record.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
     return (_jsx(Stack, { sx: { p: 2 }, spacing: 1, children: worklogEls }));
 };
-export default HitWorklog;
+export default RecordWorklog;

package/components/elements/search/FuzzySearchBar.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export type FuzzySearchBarProps = {
+    onSearch: (query: string, indexes: string[]) => void;
+    loading?: boolean;
+};
+declare const FuzzySearchBar: FC<FuzzySearchBarProps>;
+export default FuzzySearchBar;