@cccsaurora/howler-ui 2.19.0-dev.836 → 2.19.0-dev.842

package/components/elements/record/RecordContextMenu.js

@@ -0,0 +1,268 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+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 ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
+import { TOP_ROW, VOTE_OPTIONS } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
+import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
+import CreateCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/CreateCaseModal';
+import { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useContextSelector } from 'use-context-selector';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+/**
+ * Order in which action types should be displayed in the context menu
+ */
+const ORDER = ['assessment', 'vote', 'action'];
+/**
+ * Icon mapping for different action types
+ */
+const ICON_MAP = {
+    assessment: _jsx(Assignment, {}),
+    vote: _jsx(HowToVote, {}),
+    action: _jsx(Edit, {})
+};
+/**
+ * Context menu component for hit operations.
+ * Provides quick access to common hit actions including assessment, voting,
+ * transitions, and exclusion filters based on template fields.
+ */
+const RecordContextMenu = ({ children, getSelectedId, Component }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const appUser = useAppUser();
+    const { config } = useContext(ApiConfigContext);
+    const { showModal } = useContext(ModalContext);
+    const pluginStore = usePluginStore();
+    const { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
+    const query = useContextSelector(ParameterContext, ctx => ctx?.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx?.setQuery);
+    const [id, setId] = useState(null);
+    const record = useContextSelector(RecordContext, ctx => ctx.records[id]);
+    const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const [analytic, setAnalytic] = useState(null);
+    const [template, setTemplate] = useState(null);
+    const [actions, setActions] = useState([]);
+    const records = useMemo(() => selectedRecords.some(_record => _record.howler.id === record?.howler.id)
+        ? selectedRecords
+        : record
+            ? [record]
+            : [], [record, selectedRecords]);
+    const hits = useMemo(() => records.filter(isHit), [records]);
+    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    /**
+     * Checks if the current user has permission to run actions.
+     * Users must have one of the automation or actionrunner roles, or be an admin.
+     */
+    const canRunActions = useCallback(() => {
+        const roles = ['admin', 'automation_advanced', 'automation_basic', 'actionrunner_advanced', 'actionrunner_basic'];
+        return roles.some((role) => appUser.user?.roles?.includes(role));
+    }, [appUser.user?.roles]);
+    /**
+     * Called by ContextMenu after the menu is positioned and opened.
+     * Identifies the clicked record and fetches available actions.
+     */
+    const onOpen = useCallback(async (event) => {
+        const _id = getSelectedId(event);
+        setId(_id);
+        // TODO: Bumping the number of rows is a temporary fix - we'll need to improve this.
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*', rows: 100, sort: 'name asc' }), {
+            throwError: false
+        }))?.items;
+        if (_actions) {
+            setActions(_actions);
+        }
+    }, [dispatchApi, getSelectedId]);
+    const rowStatus = useMemo(() => ({
+        assessment: canAssess,
+        vote: canVote
+    }), [canAssess, canVote]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, records));
+    /**
+     * Generates grouped action entries for the context menu.
+     * Combines transitions, plugin actions, votes, and assessments based on permissions.
+     */
+    const entries = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map(assessment => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                    }
+                }))
+            ];
+        }
+        return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
+    }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
+    // Load analytic and template data when a hit is selected
+    useEffect(() => {
+        if (!record?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(record).then(setAnalytic);
+        getMatchingTemplate(record).then(setTemplate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record]);
+    /**
+     * Builds the declarative items structure for the ContextMenu component.
+     */
+    const items = useMemo(() => {
+        const result = [
+            {
+                kind: 'item',
+                id: 'open-record',
+                icon: _jsx(OpenInNew, {}),
+                label: t(`${record?.__index ?? 'hit'}.open`),
+                disabled: !record,
+                to: `/${record?.__index}s/${record?.howler.id}`
+            }
+        ];
+        if (isHit(record)) {
+            result.push({
+                kind: 'item',
+                id: 'open-analytic',
+                icon: _jsx(QueryStats, {}),
+                label: t('analytic.open'),
+                disabled: !analytic,
+                to: `/analytics/${analytic?.analytic_id}`
+            });
+            result.push({ kind: 'divider', id: 'actions-divider' });
+            for (const [type, typeItems] of entries) {
+                result.push({
+                    kind: 'submenu',
+                    id: type,
+                    icon: ICON_MAP[type] ?? _jsx(Terminal, {}),
+                    label: t(`hit.details.actions.${type}`),
+                    disabled: rowStatus[type] === false,
+                    items: typeItems.map(a => ({
+                        key: a.name,
+                        label: a.i18nKey ? t(a.i18nKey) : capitalize(a.name),
+                        onClick: a.actionFunction
+                    }))
+                });
+            }
+            result.push({
+                kind: 'submenu',
+                id: 'actions',
+                icon: _jsx(SettingsSuggest, {}),
+                label: t('route.actions.change'),
+                disabled: actions.length < 1 || !canRunActions(),
+                items: actions.map(action => ({
+                    key: action.action_id,
+                    label: action.name,
+                    onClick: () => executeAction(action.action_id, `howler.id:${record?.howler.id}`)
+                }))
+            });
+            if (!isEmpty(template?.keys ?? []) && setQuery) {
+                result.push({ kind: 'divider', id: 'filter-divider' });
+                result.push({
+                    kind: 'submenu',
+                    id: 'excludes',
+                    icon: _jsx(RemoveCircleOutline, {}),
+                    label: t('hit.panel.exclude'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = '';
+                        if (query !== DEFAULT_QUERY) {
+                            newQuery = `(${query}) AND `;
+                        }
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `-${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `-${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+                result.push({
+                    kind: 'submenu',
+                    id: 'includes',
+                    icon: _jsx(AddCircleOutline, {}),
+                    label: t('hit.panel.include'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = `(${query}) AND `;
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+            }
+        }
+        result.push({ kind: 'divider', id: 'add-to-case-divider' });
+        result.push({
+            kind: 'item',
+            id: 'add-to-case',
+            icon: _jsx(CreateNewFolder, {}),
+            label: t('modal.cases.add_to_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(AddToCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        result.push({
+            kind: 'item',
+            id: 'create-case',
+            icon: _jsx(NoteAdd, {}),
+            label: t('modal.cases.create_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(CreateCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        return result;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction, showModal, records]);
+    return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(null), items: items, children: children }));
+};
+export default RecordContextMenu;

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

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

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

@@ -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,6 +83,9 @@ 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');
@@ -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,11 @@ describe('HitContextMenu', () => {
     beforeEach(() => {
         user = userEvent.setup();
         vi.clearAllMocks();
-        mockHitContext.selectedHits.length = 0;
-        mockHitContext.hits['test-hit-1'] = createMockHit();
+        mockRecordContext.selectedRecords.length = 0;
+        mockRecordContext.records['test-hit-1'] = createMockHit();
         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 () => {
@@ -200,13 +205,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 +252,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 +310,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 +354,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 +396,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);
@@ -459,7 +464,7 @@ describe('HitContextMenu', () => {
         it('should call executeAction with action_id and hit query', 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" }) }) }));
+            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);
@@ -512,7 +517,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 +565,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 +608,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 +620,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 +643,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 +691,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 +734,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 +746,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 +765,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 +801,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 +839,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 +850,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 +864,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 +878,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 +889,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 +908,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 +977,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 +996,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 +1015,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 +1033,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);