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

package/components/routes/hits/search/shared/SearchActionMenu.d.ts

@@ -0,0 +1,4 @@
+declare const SearchActionMenu: ({ query }: {
+    query: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchActionMenu;

package/components/routes/hits/search/shared/SearchActionMenu.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SavedSearch, Terminal } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import LayoutSettings from './LayoutSettings';
+const SearchActionMenu = ({ query }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] }));
+};
+export default SearchActionMenu;

package/components/routes/hits/search/shared/SearchSpan.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("react").NamedExoticComponent<{
     omitCustom?: boolean;
-    size?: "small" | "medium";
+    size?: 'small' | 'medium';
 }>;
 export default _default;

package/components/routes/hits/search/shared/SearchSpan.js

@@ -34,7 +34,7 @@ const SearchSpan = ({ omitCustom = false, size }) => {
         if (location.search.includes('span')) {
             return;
         }
-        (async () => {
+        void (async () => {
             const selectedViewSpan = (await getCurrentViews({ lazy: true })).find(view => view?.span)?.span;
             if (!selectedViewSpan) {
                 return;

package/components/routes/hits/view/HitViewer.js

@@ -4,23 +4,22 @@ import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda }
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
-import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
 import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
-import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
-import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import RecordComments from '@cccsaurora/howler-ui/components/elements/record/RecordComments';
+import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/RecordRelated';
+import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -28,7 +27,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
+import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
 import LeadRenderer from './LeadRenderer';
 export var Orientation;
@@ -44,8 +43,8 @@ const HitViewer = () => {
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+    const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
     const users = useMyUserList(userIds);
     const [tab, setTab] = useState('details');
@@ -73,11 +72,11 @@ const HitViewer = () => {
         }
     }, [isUnderLg, setOrientation]);
     useEffect(() => {
-        fetchData();
+        void fetchData();
     }, [params.id, fetchData, hit]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
-        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+        void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
     }, [getMatchingOverview, hit]);
     useEffect(() => {
         if (hasOverview && tab === 'details') {
@@ -94,12 +93,12 @@ const HitViewer = () => {
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(HitDetails, { hit: hit }),
-            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
+            details: () => _jsx(ObjectDetails, { obj: hit }),
+            hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
             hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
-            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
-            hit_related: () => _jsx(HitRelated, { hit: hit }),
+            hit_worklog: () => _jsx(RecordWorklog, { record: hit, users: users }),
+            hit_related: () => _jsx(RecordRelated, { record: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
             ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
@@ -111,7 +110,7 @@ const HitViewer = () => {
         if (!hit) {
             return;
         }
-        getMatchingDossiers(hit).then(setDossiers);
+        void getMatchingDossiers(hit).then(setDossiers);
     }, [getMatchingDossiers, hit]);
     if (!hit) {
         return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
@@ -132,7 +131,7 @@ const HitViewer = () => {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key
                             , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key

package/components/routes/home/AddNewCard.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from '@mui/icons-material';
 import { Autocomplete, Box, Card, CardContent, CardHeader, Divider, FormControl, Grid, InputLabel, MenuItem, Select, Slider, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
@@ -61,7 +61,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
         setAnalyticsLoading(false);
     };
     useEffect(() => {
-        fetchAllAnalytics();
+        void fetchAllAnalytics();
     }, []);
     const filteredAnalyticVisualizations = useMemo(() => {
         const existingAnalyticCards = dashboard.filter(_card => _card.type === 'analytic');

package/components/routes/home/AddNewCard.test.js

@@ -25,8 +25,26 @@ const mockFetchViews = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
 vi.mock('components/app/providers/ViewProvider', () => ({
     ViewContext: React.createContext({
         views: {
-            'view-1': { view_id: 'view-1', title: 'My View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } },
-            'view-2': { view_id: 'view-2', title: 'Second View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } }
+            'view-1': {
+                view_id: 'view-1',
+                title: 'My View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            },
+            'view-2': {
+                view_id: 'view-2',
+                title: 'Second View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            }
         },
         fetchViews: mockFetchViews
     })

package/components/routes/home/AnalyticCard.js

@@ -17,7 +17,7 @@ const AnalyticCard = ({ analyticId, type }) => {
     const { getAnalyticFromId } = useContext(AnalyticContext);
     const chartRef = useRef();
     useEffect(() => {
-        getAnalyticFromId(analyticId).then(setAnalytic);
+        void getAnalyticFromId(analyticId).then(setAnalytic);
     }, [analyticId, getAnalyticFromId]);
     return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(CardContent, { sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: analytic?.name ?? _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, to: `/analytics/${analytic?.analytic_id}`, children: _jsx(OpenInNew, { fontSize: "small" }) }), _jsx(FlexOne, {}), !['assessment', 'escalation'].includes(type) && (_jsx(Tooltip, { title: t('hit.summary.zoom.reset'), children: _jsx(IconButton, { onClick: () => chartRef.current?.resetZoom(), children: _jsx(CenterFocusWeak, {}) }) }))] }), {
                     assessment: () => _jsx(Assessment, { ref: chartRef, analytic: analytic }),

package/components/routes/home/EntryWrapper.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Delete } from '@mui/icons-material';

package/components/routes/home/HomeSettings.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Edit, Settings } from '@mui/icons-material';
 import { FormControl, FormLabel, IconButton, ListItemIcon, Menu, MenuItem, Slider, Tooltip } from '@mui/material';
 import { useState } from 'react';

package/components/routes/home/HomeSettings.test.d.ts

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

package/components/routes/home/HomeSettings.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import HomeSettings from './HomeSettings';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('HomeSettings', () => {
+    let onRefreshRateChange;
+    let onEdit;
+    beforeEach(() => {
+        onRefreshRateChange = vi.fn();
+        onEdit = vi.fn();
+        vi.clearAllMocks();
+    });
+    it('renders the settings icon button', () => {
+        render(_jsx(HomeSettings, { isEditing: false, refreshRate: 30, onRefreshRateChange: onRefreshRateChange, onEdit: onEdit }), { wrapper: Wrapper });
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('opens the settings menu when the icon button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(HomeSettings, { isEditing: false, refreshRate: 30, onRefreshRateChange: onRefreshRateChange, onEdit: onEdit }), { wrapper: Wrapper });
+        await user.click(screen.getByRole('button'));
+        // The menu should now be open – the edit menu item should be visible
+        expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    it('calls onEdit when the Edit menu item is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(HomeSettings, { isEditing: false, refreshRate: 30, onRefreshRateChange: onRefreshRateChange, onEdit: onEdit }), { wrapper: Wrapper });
+        await user.click(screen.getByRole('button'));
+        const editItem = screen.getAllByRole('menuitem')[0];
+        await user.click(editItem);
+        expect(onEdit).toHaveBeenCalledTimes(1);
+    });
+    it('disables the Edit menu item when isEditing=true', async () => {
+        const user = userEvent.setup();
+        render(_jsx(HomeSettings, { isEditing: true, refreshRate: 30, onRefreshRateChange: onRefreshRateChange, onEdit: onEdit }), { wrapper: Wrapper });
+        await user.click(screen.getByRole('button'));
+        const editItem = screen.getAllByRole('menuitem')[0];
+        expect(editItem).toHaveAttribute('aria-disabled', 'true');
+    });
+});

package/components/routes/home/ViewCard.js

@@ -1,76 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
+import { isEvent } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
-// Custom hook to select hits by IDs with proper memoization
-const useSelectHitsByIds = (hitIds) => {
-    const hitIdsRef = useRef(hitIds);
+// Custom hook to select records by IDs with proper memoization
+const useSelectRecordsByIds = (recordIds) => {
+    const recordIdsRef = useRef(recordIds);
     const prevResultRef = useRef([]);
-    const prevHitIdsRef = useRef([]);
-    // Keep ref up to date with latest hitIds
-    hitIdsRef.current = hitIds;
+    const prevRecordIdsRef = useRef([]);
+    // Keep ref up to date with latest recordIds
+    recordIdsRef.current = recordIds;
     const selector = useCallback(ctx => {
-        const currentHitIds = hitIdsRef.current;
-        // Fast path: if hitIds array didn't change, check if hit objects changed
-        if (prevHitIdsRef.current.length === currentHitIds.length &&
-            currentHitIds.every((id, i) => id === prevHitIdsRef.current[i])) {
-            // HitIds unchanged - check if any hit objects changed by reference
-            const anyHitChanged = currentHitIds.some((id, i) => ctx.hits[id] !== prevResultRef.current[i]);
-            if (!anyHitChanged) {
+        const currentRecordIds = recordIdsRef.current;
+        // Fast path: if recordIds array didn't change, check if record objects changed
+        if (prevRecordIdsRef.current.length === currentRecordIds.length &&
+            currentRecordIds.every((id, i) => id === prevRecordIdsRef.current[i])) {
+            // RecordIds unchanged - check if any record objects changed by reference
+            const anyRecordChanged = currentRecordIds.some((id, i) => ctx.records[id] !== prevResultRef.current[i]);
+            if (!anyRecordChanged) {
                 return prevResultRef.current;
             }
         }
         // Something changed - rebuild the array
-        const currentHits = currentHitIds.map(id => ctx.hits[id]).filter(Boolean);
-        prevHitIdsRef.current = currentHitIds;
-        prevResultRef.current = currentHits;
-        return currentHits;
+        const currentRecords = currentRecordIds.map(id => ctx.records[id]).filter(Boolean);
+        prevRecordIdsRef.current = currentRecordIds;
+        prevResultRef.current = currentRecords;
+        return currentRecords;
     }, []); // Empty deps - selector never changes
-    return useHitContextSelector(selector);
+    return useRecordContextSelector(selector);
 };
 // Utility functions
 const normalize = (val) => (val == null ? '' : String(val));
 // Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
-const createHitSignature = (hit) => {
-    if (!hit)
+const createRecordSignature = (record) => {
+    if (!record) {
         return '';
-    return `${hit.howler?.id}:${normalize(hit.howler?.status)}:${normalize(hit.howler?.assignment)}:${normalize(hit.howler?.assessment)}`;
+    }
+    if (isEvent(record)) {
+        return record.howler?.id;
+    }
+    return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
 };
-const createSignatureFromHits = (hits) => {
-    if (hits.length === 0)
+const createSignatureFromRecords = (records) => {
+    if (records.length === 0)
         return '';
-    return hits.map(createHitSignature).join('|');
+    return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
 const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
-    const [hitIds, setHitIds] = useState([]);
+    const [recordIds, setRecordIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const debounceTimerRef = useRef(null);
     const isRefreshing = useRef(false);
     const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-    const loadHits = useHitContextSelector(ctx => ctx.loadHits);
+    const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
     // Subscribe to hits from HitProvider cache based on current hitIds in the view
     // Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
-    const hits = useSelectHitsByIds(hitIds);
+    const records = useSelectRecordsByIds(recordIds);
     // Create a stable signature that only changes when relevant fields change
-    const hitsSignature = useMemo(() => createSignatureFromHits(hits), [hits]);
+    const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
@@ -78,44 +84,44 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         isRefreshing.current = true;
         try {
-            const res = await dispatchApi(api.search.hit.post({
+            const res = await dispatchApi(api.v2.search.post(view.indexes, {
                 query: view.query,
                 rows: limit,
                 metadata: ['analytic']
             }));
-            const fetchedHits = res.items ?? [];
-            loadHits(fetchedHits);
-            setHitIds(fetchedHits.map(h => h.howler.id));
-            lastSignature.current = createSignatureFromHits(fetchedHits);
+            const fetchedRecords = res.items ?? [];
+            loadRecords(fetchedRecords);
+            setRecordIds(fetchedRecords.map(r => r.howler.id));
+            lastSignature.current = createSignatureFromRecords(fetchedRecords);
         }
         finally {
             isRefreshing.current = false;
             onRefreshComplete?.();
         }
-    }, [dispatchApi, limit, view?.query, loadHits, onRefreshComplete]);
+    }, [dispatchApi, limit, view?.query, view?.indexes, loadRecords, onRefreshComplete]);
     const debouncedRefresh = useCallback(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
         }
         debounceTimerRef.current = setTimeout(() => {
-            refreshView();
+            void refreshView();
         }, DEBOUNCE_TIME);
     }, [refreshView]);
     useEffect(() => {
         if (refreshTick) {
-            refreshView();
+            void refreshView();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refreshTick]);
     useEffect(() => {
-        fetchViews([viewId]);
+        void fetchViews([viewId]);
     }, [fetchViews, viewId]);
     useEffect(() => {
         if (!view?.query) {
             return;
         }
         const loadingTimeout = setTimeout(() => setLoading(true), 200);
-        refreshView().finally(() => {
+        void refreshView().finally(() => {
             clearTimeout(loadingTimeout);
             setLoading(false);
         });
@@ -125,16 +131,16 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     }, [view?.query, limit, refreshView]);
     // Monitor hits currently in the view for changes that might affect query results
     useEffect(() => {
-        if (!hitsSignature || hitIds.length === 0 || !lastSignature.current) {
-            lastSignature.current = hitsSignature;
+        if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
+            lastSignature.current = recordsSignature;
             return;
         }
         // Check if signature actually changed
-        if (lastSignature.current === hitsSignature) {
+        if (lastSignature.current === recordsSignature) {
             return;
         }
         debouncedRefresh();
-    }, [hitsSignature, hitIds, debouncedRefresh]);
+    }, [recordsSignature, recordIds, debouncedRefresh]);
     useEffect(() => {
         return () => {
             if (debounceTimerRef.current) {
@@ -151,6 +157,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(EventCard, { event: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewRefresh.test.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
-import { render, screen, act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';

package/components/routes/home/index.js

@@ -70,7 +70,7 @@ const Home = () => {
             clearTimeout(debounceTimerRef.current);
         }
         debounceTimerRef.current = setTimeout(() => {
-            setRefreshRateBackend(newRate);
+            void setRefreshRateBackend(newRate);
         }, 500);
     }, [setRefreshRateBackend, setUser]);
     const handleRefresh = useCallback(() => {
@@ -103,7 +103,7 @@ const Home = () => {
         }
     }, [dashboard, getIdFromEntry, setLocalDashboard]);
     useEffect(() => {
-        api.search.hit
+        void api.search.hit
             .post({
             query: updateQuery,
             rows: 0

package/components/routes/overviews/OverviewCard.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Delete } from '@mui/icons-material';
 import { Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';

package/components/routes/overviews/OverviewViewer.js

@@ -4,7 +4,7 @@ import api from '@cccsaurora/howler-ui/api';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material';
+import { Check, DarkMode, Delete, WbSunny } from '@mui/icons-material';
 import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
 import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
@@ -12,11 +12,12 @@ import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/Mod
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-import OverviewEditor from './OverviewEditor';
+import MarkdownEditor from '../../elements/MarkdownEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
@@ -27,6 +28,7 @@ const OverviewViewer = () => {
     const { getOverviews } = useContext(OverviewContext);
     const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
@@ -42,7 +44,7 @@ const OverviewViewer = () => {
     const wrapper = useRef();
     const startingTemplate = useStartingTemplate();
     useEffect(() => {
-        (async () => {
+        void (async () => {
             setLoading(true);
             try {
                 setOverviewList(await getOverviews(true));
@@ -73,7 +75,7 @@ const OverviewViewer = () => {
         }
     }, [analytic, analytics, detection]);
     useEffect(() => {
-        (async () => {
+        void (async () => {
             const result = await dispatchApi(api.search.hit.post({
                 query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"` +
                     (!!detection && detection !== 'ANY' ? ` AND howler.detection:"${sanitizeLuceneQuery(detection)}"` : ''),
@@ -131,12 +133,14 @@ const OverviewViewer = () => {
             await dispatchApi(api.overview.del(selectedOverview.overview_id), {
                 logError: false,
                 showError: true,
-                throwError: false
+                throwError: true
             });
+            setOverviewList(l => l.filter(v => v.overview_id !== selectedOverview.overview_id));
             setSelectedOverview(null);
             setContent('');
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
         });
-    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal]);
+    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal, showSuccessMessage, t]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {
             try {
@@ -177,10 +181,10 @@ const OverviewViewer = () => {
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
     const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
     const activeTheme = chosenTheme === 'light' ? lightTheme : darkTheme;
-    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
+    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), _jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) }), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
                             if (e.ctrlKey && e.key === 's') {
                                 if (!noChange) {
-                                    onSave();
+                                    void onSave();
                                 }
                                 e.preventDefault();
                             }
@@ -192,7 +196,7 @@ const OverviewViewer = () => {
                                         right: `calc(50% + 7px - ${x}px)`,
                                         mr: -2.4,
                                         pr: 1.5
-                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    }, children: _jsx(MarkdownEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
                                     position: 'absolute',
                                     top: 0,
                                     bottom: 0,
@@ -216,7 +220,6 @@ const OverviewViewer = () => {
                                         pt: 1,
                                         mt: -1,
                                         '& > *': { width: '100%' },
-                                        '& > div > :first-child': { mt: 0 },
                                         backgroundColor: activeTheme.palette.background.default,
                                         color: activeTheme.palette.text.primary
                                     }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) }) })] }))] })] }));