@cccsaurora/howler-ui 2.18.0-dev.740 → 2.18.0-dev.748

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

@@ -47,6 +47,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 +73,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 +95,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 +110,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 +127,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 +195,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 +242,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 +300,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 +344,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 +386,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 +454,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 +507,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 +555,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 +598,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 +610,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 +633,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 +681,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 +724,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 +736,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 +755,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 +791,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 +829,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 +840,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 +854,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 +868,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 +879,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 +898,54 @@ 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) }));
+            });
+        });
+    });
 });

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;
 };

package/components/hooks/useHitActions.js

@@ -4,8 +4,8 @@ import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const useHitActions = (_hits) => {
     const { showModal } = useContext(ModalContext);
     const { showWarningMessage } = useMySnackbar();
     const { dispatchApi } = useMyApi();
-    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
     const [loading, setLoading] = useState(false);
     const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
     const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false) => {
+    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
         const rationale = skipRationale
-            ? t('rationale.default', { assessment })
+            ? (providedRationale ?? t('rationale.default', { assessment }))
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);

package/components/hooks/useMyPreferences.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Api, Article, Book, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
 import { Stack } from '@mui/material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
@@ -24,6 +24,15 @@ const useMyPreferences = () => {
                     icon: _jsx(Dashboard, {})
                 }
             },
+            {
+                type: 'item',
+                element: {
+                    id: 'cases',
+                    i18nKey: 'route.cases',
+                    route: '/cases',
+                    icon: _jsx(BookRounded, {})
+                }
+            },
             {
                 type: 'group',
                 element: {

package/components/hooks/useMySearch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
+import HitPreview from '@cccsaurora/howler-ui/components/elements/hit/HitPreview';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
@@ -40,7 +40,7 @@ const useMySearch = () => {
         },
         headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
         itemRenderer: (item, options) => {
-            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitQuickSearch, { hit: item.item, options: options }) }));
+            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitPreview, { hit: item.item, options: options }) }));
         }
     }), [navigate, pageCount, t]);
 };

package/components/hooks/useMySitemap.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
+import { Article, Book, BookRounded, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +24,9 @@ const useMySitemap = () => {
     return useMemo(() => ({
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
+            { path: '/cases/:id', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
+            { path: '/cases/:id/*', title: t('route.cases.view'), isLeaf: true, breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {
                 path: '/admin/users/:id',