@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

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

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

package/components/elements/record/RecordRelated.js

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

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

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

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

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

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

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

package/components/elements/search/FuzzySearchBar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from '@mui/icons-material';
+import { CircularProgress, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import IndexPicker from '@cccsaurora/howler-ui/components/routes/hits/search/shared/IndexPicker';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FuzzySearchBar = ({ onSearch, loading = false }) => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const defaultQuery = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [query, _setQuery] = useState(defaultQuery ?? '');
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const handleQueryChange = useCallback((e) => {
+        _setQuery(e.target.value);
+    }, [_setQuery]);
+    const handleSearch = useCallback(() => {
+        if (query.trim()) {
+            setQuery(query.trim());
+            onSearch(query.trim(), indexes);
+        }
+    }, [query, setQuery, onSearch, indexes]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }, [handleSearch]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { id: "fuzzy-search-input", size: "small", fullWidth: true, variant: "outlined", placeholder: t('search.fuzzy.placeholder'), value: query, onChange: handleQueryChange, onKeyDown: handleKeyDown, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: loading ? (_jsx(CircularProgress, { size: 24 })) : (_jsx(IconButton, { id: "fuzzy-search-button", onClick: handleSearch, edge: "end", disabled: !query.trim(), children: _jsx(Search, {}) })) }))
+                } }), _jsx(Stack, { direction: "row", children: _jsx(IndexPicker, { additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }] }) })] }));
+};
+export default FuzzySearchBar;

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

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

package/components/elements/search/FuzzySearchBar.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockIndexPickerProps = vi.hoisted(() => ({
+    last: null
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/routes/hits/search/shared/IndexPicker', () => ({
+    default: (props) => {
+        mockIndexPickerProps.last = props;
+        return _jsx("div", { id: "index-picker" });
+    }
+}));
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import FuzzySearchBar from './FuzzySearchBar';
+const mockOnSearch = vi.fn();
+const mockSetQuery = vi.fn();
+const parameterContextValue = {
+    indexes: ['hit', 'case'],
+    query: '',
+    setQuery: mockSetQuery
+};
+const Wrapper = ({ children }) => {
+    return _jsx(ParameterContext.Provider, { value: parameterContextValue, children: children });
+};
+describe('FuzzySearchBar', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        parameterContextValue.indexes = ['hit', 'case'];
+        parameterContextValue.query = '';
+        mockIndexPickerProps.last = null;
+    });
+    it('renders search input and index picker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-input')).toBeInTheDocument();
+        expect(screen.getByTestId('index-picker')).toBeInTheDocument();
+    });
+    it('disables search button when query is empty', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+    });
+    it('calls setQuery and onSearch with trimmed query and selected indexes on click', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '  malware triage  ');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        expect(mockSetQuery).toHaveBeenCalledWith('malware triage');
+        expect(mockOnSearch).toHaveBeenCalledWith('malware triage', ['hit', 'case']);
+    });
+    it('triggers search on Enter key', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), 'suspicious ip{enter}');
+        expect(mockSetQuery).toHaveBeenCalledWith('suspicious ip');
+        expect(mockOnSearch).toHaveBeenCalledWith('suspicious ip', ['hit', 'case']);
+    });
+    it('does not call search for whitespace-only input', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '   ');
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        expect(mockOnSearch).not.toHaveBeenCalled();
+    });
+    it('shows loading spinner and hides search button when loading', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch, loading: true }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        expect(screen.queryByTestId('fuzzy-search-button')).not.toBeInTheDocument();
+    });
+    it('passes expected options to IndexPicker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(mockIndexPickerProps.last).toEqual({
+            additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }]
+        });
+    });
+    it('initializes input with default query from context', () => {
+        parameterContextValue.query = 'existing search';
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByRole('textbox')).toHaveValue('existing search');
+    });
+});

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;
     settings?: {

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, settings }) => {
+export const ViewTitle = ({ title, type, query, sort, span, indexes, settings }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -17,6 +17,13 @@ export const ViewTitle = ({ title, type, query, sort, span, settings }) => {
             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" }),
@@ -24,5 +31,5 @@ export const ViewTitle = ({ title, type, query, sort, span, settings }) => {
                         }[type] }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
                             list: _jsx(List, { fontSize: "small" }),
                             grid: _jsx(TableChart, { fontSize: "small" })
-                        }[settings.display] })), _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 })] }))] }));
+                        }[settings.display] })), _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',

package/components/hooks/useMyTheme.js

@@ -1,9 +1,16 @@
 const DEFAULT_THEME = {
+    components: {
+        MuiChip: {
+            defaultProps: {
+                size: 'small'
+            }
+        }
+    },
     palette: {
         dark: {
             background: {
-                default: '#202020',
-                paper: '#202020'
+                default: '#181818',
+                paper: '#181818'
             },
             primary: {
                 main: '#7DA1DB'

package/components/hooks/{useHitSelection.d.ts → useRecordSelection.d.ts}

@@ -1,8 +1,8 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type React from 'react';
-declare const useHitSelection: () => {
+declare const useRecordSelection: () => {
     lastSelected: string;
     setLastSelected: React.Dispatch<React.SetStateAction<string>>;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/{useHitSelection.js → useRecordSelection.js}

@@ -1,20 +1,14 @@
-import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const useHitSelection = () => {
-    const navigate = useNavigate();
-    const { setItems } = useAppBreadcrumbs();
-    const { routes } = useMySitemap();
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+const useRecordSelection = () => {
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const [lastSelected, setLastSelected] = useState(null);
     const onClick = useCallback((e, hit) => {
@@ -47,32 +41,17 @@ const useHitSelection = () => {
             e.stopPropagation();
             return;
         }
-        if (hit.howler.is_bundle) {
-            const searchRoute = routes.find(_route => _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, '$1')));
-            const newBreadcrumb = {
-                ...searchRoute,
-                path: location.pathname + location.search
-            };
-            setItems([{ route: newBreadcrumb, matcher: null }]);
-            navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
-            clearSelectedHits(hit.howler.id);
-        }
-        else {
-            clearSelectedHits(hit.howler.id);
-            setSelected(hit.howler.id);
-        }
+        clearSelectedHits(hit.howler.id);
+        setSelected(hit.howler.id);
     }, [
         addHitToSelection,
         clearSelectedHits,
         lastSelected,
-        navigate,
         removeHitFromSelection,
-        response,
-        routes,
+        response?.items,
         selectedHits,
-        setItems,
         setSelected
     ]);
     return { lastSelected, setLastSelected, onClick };
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/useRelatedRecords.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+type MixedRecords = Hit | Event | Case;
+/**
+ * Fetches records matching the provided IDs from the hit, event, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+declare const useRelatedRecords: <T = MixedRecords>(ids: string[], enabled?: boolean) => WithMetadata<T>[];
+export default useRelatedRecords;

package/components/hooks/useRelatedRecords.js

@@ -0,0 +1,32 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+/**
+ * Fetches records matching the provided IDs from the hit, event, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+const useRelatedRecords = (ids, enabled = true) => {
+    const { dispatchApi } = useMyApi();
+    const [records, setRecords] = useState([]);
+    useEffect(() => {
+        if (!enabled || ids.length === 0) {
+            if (records.length > 0) {
+                setRecords([]);
+            }
+            return;
+        }
+        (async () => {
+            const joined = ids.join(' OR ');
+            const result = await dispatchApi(api.v2.search.post(['hit', 'event', 'case'], {
+                query: `howler.id:(${joined}) OR case_id:(${joined})`
+            }), { throwError: false, showError: true });
+            if (result) {
+                setRecords(result.items);
+            }
+        })();
+    }, [dispatchApi, enabled, ids, records.length]);
+    return records;
+};
+export default useRelatedRecords;

package/components/routes/action/edit/ActionEditor.js

@@ -7,7 +7,7 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitQuery from '@cccsaurora/howler-ui/components/routes/hits/search/HitQuery';
+import RecordQuery from '@cccsaurora/howler-ui/components/routes/hits/search/RecordQuery';
 import { difference, uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -102,7 +102,7 @@ const ActionEditor = () => {
                                         : disabled && userOperations.length > 0
                                             ? t('route.actions.trigger.disabled.explanation')
                                             : null, children: component }, trigger));
-                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(HitQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
+                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(RecordQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
                             color: theme.palette.text.secondary,
                             fontSize: '0.9em',
                             fontStyle: 'italic',

package/components/routes/action/view/ActionSearch.js

@@ -121,7 +121,7 @@ const ActionSearch = () => {
                 transitionProperty: 'border-color',
                 cursor: 'pointer',
                 mt: 1
-            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h5", children: item.item.name }), item.item.triggers.length > 0 && (_jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "route.actions.trigger.description", values: { triggers: item.item.triggers.join(', ') }, components: { bold: _jsx("strong", {}) } }), children: _jsx(Engineering, {}) })), _jsx(FlexOne, {}), ((item.item.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(IconButton, { size: "small", onClick: e => onDelete(e, item.item.action_id), children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h5", children: item.item.name }), item.item.triggers.length > 0 && (_jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "route.actions.trigger.description", values: { triggers: item.item.triggers.join(', ') }, components: { bold: _jsx("strong", {}) } }), children: _jsx(Engineering, {}) })), _jsx(FlexOne, {}), ((item.item.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(IconButton, { size: "small", onClick: e => onDelete(e, item.item.action_id), children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
     }, [editRoles, navigate, onDelete, t, user.roles, user.username]);
     return (_jsx(ItemManager, { onSearch: onSearch, onCreate: editRoles ? () => navigate('/action/execute') : undefined, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.actions.search.prompt') }), searchFilters: _jsx(Autocomplete, { multiple: true, size: "small", value: searchModifiers, onChange: (__, values) => setSearchModifiers(values), getOptionLabel: trigger => t(`route.actions.trigger.${trigger}`), options: VALID_ACTION_TRIGGERS, renderInput: params => (_jsx(TextField, { ...params, sx: { maxWidth: '500px' }, label: t('route.actions.trigger') })) }), renderer: renderer, response: response, createPrompt: "route.actions.create", searchPrompt: "route.actions.search", createIcon: _jsx(Terminal, { sx: { mr: 1 } }) }));
 };