@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.861

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

@@ -8,6 +8,16 @@ import { vi } from 'vitest';
 // Mock API
 vi.mock('api', { spy: true });
 setupContextSelectorMock();
+// Mock useAppUser hook
+const mockUseAppUser = vi.hoisted(() => vi.fn(() => ({
+    user: {
+        username: 'test-user',
+        roles: ['automation_basic', 'actionrunner_basic']
+    }
+})));
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: mockUseAppUser
+}));
 // Mock react-router-dom
 const mockNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
@@ -47,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(() => ({
@@ -72,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');
@@ -91,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: {
@@ -105,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;
@@ -122,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 () => {
@@ -190,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');
             });
         });
@@ -237,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);
@@ -295,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);
@@ -339,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);
@@ -381,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);
@@ -449,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);
@@ -502,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(() => {
@@ -550,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);
@@ -593,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);
@@ -605,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;
@@ -628,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(() => {
@@ -676,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);
@@ -719,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);
@@ -731,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;
@@ -750,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;
@@ -786,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 () => {
@@ -824,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);
@@ -835,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);
@@ -849,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);
@@ -863,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(() => {
@@ -874,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);
@@ -893,4 +908,140 @@ 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
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_basic', 'actionrunner_basic']
+                }
+            });
+        });
+        it('should disable actions menu when user lacks required roles', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['user', 'viewer']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            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);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should enable actions menu when user has automation_basic role', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_basic']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            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);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).not.toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should enable actions menu when user has actionrunner_advanced role', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['actionrunner_advanced']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            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);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).not.toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should still disable actions menu when user has roles but no actions available', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_advanced']
+                }
+            });
+            mockDispatchApi.mockResolvedValue({ items: [] });
+            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);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+    });
 });

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

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const RecordRelated: FC<{
+    record: Hit | Observable;
+}>;
+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 ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
+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, isHit, isObservable } 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.observable?.length > 0 && 'observable'
+    ].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.observable?.length > 0 && _jsx(Tab, { value: "observable", label: t('hit.related.tab.observable') })] }), 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 === 'observable' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isObservable).map(o => (_jsx(Link, { to: `/observables/${o.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(ObservableCard, { observable: 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 { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import type { FC } from 'react';
-declare const HitWorklog: FC<{
-    hit: Hit;
+declare const RecordWorklog: FC<{
+    record: Hit | Observable;
     users: {
         [id: string]: HowlerUser;
     };
 }>;
-export default HitWorklog;
+export default RecordWorklog;

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

@@ -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/view/ViewTitle.d.ts

@@ -3,6 +3,7 @@ interface ViewTitleProps {
     title?: string;
     type?: string;
     query?: string;
+    indexes?: string[];
     sort?: string;
     span?: string;
 }

package/components/elements/view/ViewTitle.js

@@ -4,7 +4,7 @@ import { Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-export const ViewTitle = ({ title, type, query, sort, span }) => {
+export const ViewTitle = ({ title, type, query, sort, span, indexes }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -17,9 +17,16 @@ export const ViewTitle = ({ title, type, query, sort, span }) => {
             return t(span);
         }
     }, [span, t]);
+    const indexLabel = useMemo(() => {
+        if (!indexes || indexes.length === 0) {
+            return '';
+        }
+        else
+            return `(${indexes.join(', ')})`;
+    }, [indexes]);
     return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
+                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
 };

package/components/hooks/useHitActions.d.ts

@@ -7,7 +7,7 @@ declare const useHitActions: (_hits: Hit | Hit[]) => {
     canAssess: boolean;
     loading: boolean;
     manage: (transition: string) => Promise<void>;
-    assess: (assessment: string, skipRationale?: boolean) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean, providedRationale?: any) => Promise<void>;
     vote: (v: string) => Promise<void>;
     selectedVote: string;
 };