@cccsaurora/howler-ui 2.19.0-cases.862 → 2.19.0-dev.1000

package/components/routes/hits/search/grid/AddColumnModal.js

@@ -3,24 +3,23 @@ import { Add, Check, Settings, TableChart } from '@mui/icons-material';
 import { Autocomplete, Chip, Divider, Grid, IconButton, Stack, TextField } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
-import { sortBy, uniq } from 'lodash-es';
+import { has, sortBy, uniq } from 'lodash-es';
 import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
-import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 const AddColumnModal = ({ addColumn, columns }) => {
     const { t } = useTranslation();
     const { hitFields } = useContext(FieldContext);
-    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const { getMatchingTemplate } = useMatchers();
     const [columnToAdd, setColumnToAdd] = useState(null);
     const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
     const [suggestions, setSuggestions] = useState([]);
     useEffect(() => {
         (async () => {
-            setSuggestions(uniq((await Promise.all((response?.items ?? []).filter(isHit).map(async (_hit) => (await getMatchingTemplate(_hit))?.keys ?? []))).flat()));
+            setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
         })();
     }, [getMatchingTemplate, response?.items]);
     return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {

package/components/routes/hits/search/grid/EnhancedCell.d.ts

@@ -1,8 +1,7 @@
 import { type SxProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 declare const _default: import("react").NamedExoticComponent<{
-    record: Hit | Observable;
+    hit: Hit;
     value: string;
     sx?: SxProps;
     className: string;

package/components/routes/hits/search/grid/EnhancedCell.js

@@ -4,7 +4,7 @@ import { Stack, TableCell } from '@mui/material';
 import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-const EnhancedCell = ({ record, value: rawValue, sx = {}, className, field }) => {
+const EnhancedCell = ({ hit, value: rawValue, sx = {}, className, field }) => {
     const { t } = useTranslation();
     if (!rawValue) {
         return _jsx(TableCell, { style: { borderBottom: 'none' }, children: t('none') });
@@ -13,6 +13,6 @@ const EnhancedCell = ({ record, value: rawValue, sx = {}, className, field }) =>
     return (_jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
                 { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
                 ...(Array.isArray(sx) ? sx : [sx])
-            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, obj: record, children: value }, value + index))) }) }));
+            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, hit: hit, children: value }, value + index))) }) }));
 };
 export default memo(EnhancedCell);

package/components/routes/hits/search/grid/HitGrid.js

@@ -4,37 +4,36 @@ import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-ki
 import { FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
 import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+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 { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
-import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
+import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
 import { uniq } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import HitContextMenu from '../HitContextMenu';
+import HitQuery from '../HitQuery';
 import QuerySettings from '../QuerySettings';
-import RecordQuery from '../RecordQuery';
 import AddColumnModal from './AddColumnModal';
 import ColumnHeader from './ColumnHeader';
-import RecordRow from './RecordRow';
+import HitRow from './HitRow';
 const HitGrid = () => {
     const { t } = useTranslation();
     const theme = useTheme();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const { onClick } = useRecordSelection();
+    const { onClick } = useHitSelection();
     const { getMatchingAnalytic } = useMatchers();
-    const search = useContextSelector(RecordSearchContext, ctx => ctx.search);
-    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
-    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
-    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
-    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
@@ -57,11 +56,10 @@ const HitGrid = () => {
         return false;
     }, [selected, selectedHits]);
     useEffect(() => {
-        response?.items.forEach(record => {
-            if (!isHit(record) || analyticIds[record.howler.analytic]) {
-                return;
+        response?.items.forEach(hit => {
+            if (!analyticIds[hit.howler.analytic]) {
+                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
             }
-            getMatchingAnalytic(record).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [record.howler.analytic]: _analytic.analytic_id })));
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analyticIds, response]);
@@ -119,7 +117,7 @@ const HitGrid = () => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(RecordQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
                                     position: 'absolute',
                                     left: 0,
                                     right: 0,
@@ -129,6 +127,6 @@ const HitGrid = () => {
                                 } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => setColumns(uniq([...columns, key])) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
                                                 borderRight: 'thin solid',
                                                 borderRightColor: 'divider'
-                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(RecordContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(RecordRow, { record: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
+                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
 };
 export default HitGrid;

package/components/routes/hits/search/grid/{RecordRow.d.ts → HitRow.d.ts}

@@ -1,11 +1,10 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 declare const _default: import("react").NamedExoticComponent<{
-    record: Hit | Observable;
+    hit: Hit;
     analyticIds: Record<string, string>;
     columns: string[];
     columnWidths: Record<string, string>;
     collapseMainColumn: boolean;
-    onClick: (e: React.MouseEvent<HTMLDivElement>, record: Hit | Observable) => void;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 }>;
 export default _default;

package/components/routes/hits/search/grid/{RecordRow.js → HitRow.js}

@@ -1,27 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
 import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import HitUsers from '@cccsaurora/howler-ui/components/elements/hit/elements/HitUsers';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
 import { get } from 'lodash-es';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import EnhancedCell from './EnhancedCell';
-const RecordRow = ({ record, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
+const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
     const theme = useTheme();
     const { t } = useTranslation();
-    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const [expandRow, setExpandRow] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: record.howler.id, onClick: ev => onClick(ev, record), sx: [
+    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: hit.howler.id, onClick: ev => onClick(ev, hit), sx: [
                     {
                         transition: theme.transitions.create('background-color'),
                         '&:hover': {
@@ -29,10 +27,10 @@ const RecordRow = ({ record, analyticIds, columns, columnWidths, collapseMainCol
                             backgroundColor: theme.palette.background.paper
                         }
                     },
-                    selectedHits.some(_hit => _hit.howler.id === record.howler.id) && {
+                    selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
                         backgroundColor: lighten(theme.palette.background.paper, 0.15)
                     },
-                    selected === record.howler.id && {
+                    selected === hit.howler.id && {
                         backgroundColor: lighten(theme.palette.background.paper, 0.25)
                     }
                 ], children: [_jsx(TableCell, { sx: {
@@ -47,6 +45,6 @@ const RecordRow = ({ record, analyticIds, columns, columnWidths, collapseMainCol
                                         e.preventDefault();
                                         e.stopPropagation();
                                         setExpandRow(_expanded => !_expanded);
-                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [isHit(record) && _jsx(EscalationChip, { hit: record, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[record.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[record.howler.analytic]}`, onClick: e => e.stopPropagation(), children: record.howler.analytic })) : (record.howler.analytic), record.howler.detection && ': ', record.howler.detection] }), isHit(record) && record.howler.assignment !== 'unassigned' && (_jsx(Assigned, { hit: record, layout: HitLayout.DENSE, hideLabel: true }))] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { record: record, className: `col-${col.replaceAll('.', '-')}`, value: get(record, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' }, field: col }, col)))] }, record.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, record), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: isHit(record) ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.NORMAL })) : (_jsx(ObservableCard, { id: record.howler.id, observable: record })) }) }) }) })] }));
+                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), _jsx(HitUsers, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { hit: hit, className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' }, field: col }, col)))] }, hit.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, hit), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
 };
-export default memo(RecordRow);
+export default memo(HitRow);

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

@@ -11,16 +11,16 @@ import { useContextSelector } from 'use-context-selector';
 const CustomSpan = () => {
     const { t } = useTranslation();
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const defaultStartDate = dayjs().subtract(2, 'days');
-    const defaultEndDate = dayjs().subtract(1, 'day');
-    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate ? dayjs(ctx.startDate) : defaultStartDate);
     const setCustomSpan = useContextSelector(ParameterContext, ctx => ctx.setCustomSpan);
-    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : defaultEndDate));
+    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? dayjs(ctx.startDate) : null));
+    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : null));
     useEffect(() => {
-        if (span?.endsWith('custom')) {
-            setCustomSpan(startDate.toISOString(), endDate.toISOString());
+        if (span?.endsWith('custom') && (!startDate || !endDate)) {
+            const _startDate = startDate ?? dayjs().subtract(2, 'day');
+            const _endDate = endDate ?? dayjs().subtract(1, 'day');
+            setCustomSpan(dayjs.min(_startDate, _endDate).toISOString(), dayjs.max(_startDate, _endDate).toISOString());
         }
     }, [endDate, setCustomSpan, span, startDate]);
-    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
+    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDateTime: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDateTime: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
 };
 export default memo(CustomSpan);

package/components/routes/hits/search/shared/CustomSpan.test.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+vi.mock('use-context-selector', async () => {
+    const actual = await vi.importActual('use-context-selector');
+    return {
+        ...actual,
+        createContext,
+        useContextSelector: (_context, selector) => selector(useContext(_context))
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import { render, screen, waitFor } from '@testing-library/react';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import dayjs from 'dayjs';
+import minMax from 'dayjs/plugin/minMax';
+import {} from 'react';
+dayjs.extend(minMax);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// Import after mocks
+import CustomSpan from './CustomSpan';
+const mockSetCustomSpan = vi.fn();
+const defaultCtx = {
+    span: 'date.range.custom',
+    startDate: undefined,
+    endDate: undefined,
+    setCustomSpan: mockSetCustomSpan
+};
+const makeWrapper = (ctx) => function ({ children }) {
+    return (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
+};
+describe('CustomSpan', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('useEffect – date initialisation', () => {
+        it('should set both dates to defaults when both are null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            const startDate = dayjs(start);
+            const endDate = dayjs(end);
+            expect(startDate.isBefore(endDate)).toBe(true);
+            expect(dayjs().diff(startDate, 'hour')).toBeGreaterThanOrEqual(47);
+            expect(dayjs().diff(startDate, 'hour')).toBeLessThanOrEqual(49);
+            expect(dayjs().diff(endDate, 'hour')).toBeGreaterThanOrEqual(23);
+            expect(dayjs().diff(endDate, 'hour')).toBeLessThanOrEqual(25);
+        });
+        it('should set default start date when only endDate is provided', async () => {
+            // Use a recent end date that's after the default start (now - 2 days)
+            const existingEnd = dayjs().subtract(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: existingEnd })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(end).toBe(existingEnd);
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+        it('should set default end date when only startDate is provided', async () => {
+            // Use a recent start date that's before the default end (now - 1 day)
+            const existingStart = dayjs().subtract(3, 'day').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: existingStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(start).toBe(existingStart);
+            expect(dayjs(end).isAfter(dayjs(start))).toBe(true);
+        });
+        it('should NOT call setCustomSpan when both dates are already set', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is not custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month', startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is undefined', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined, startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should ensure startDate is before endDate even if existing startDate is after default endDate', async () => {
+            const futureStart = dayjs().add(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: futureStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+    });
+    describe('rendering', () => {
+        it('should render nothing when span is not custom', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month' })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render nothing when span is undefined', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render two date pickers when span is custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+        it('should render pickers for any span ending with "custom"', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'my.prefix.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+    });
+    describe('onChange handlers', () => {
+        it('should not call setCustomSpan when both dates are present on render', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            const startPicker = screen.getByLabelText('date.select.start');
+            expect(startPicker).toBeInTheDocument();
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should render start picker with fallback value when startDate is null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: undefined,
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            // When startDate is null, the picker's value falls back to dayjs().subtract(1, 'days')
+            const startInput = screen.getByLabelText('date.select.start');
+            expect(startInput).toBeInTheDocument();
+            // The input should have a value (the fallback), not be empty
+            expect(startInput.value).not.toBe('');
+        });
+    });
+});

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

@@ -4,22 +4,23 @@ 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 { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 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 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 HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
+import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
 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';
@@ -43,8 +44,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(RecordContext, ctx => ctx.getRecord);
-    const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
     const [userIds, setUserIds] = useState(new Set());
     const users = useMyUserList(userIds);
     const [tab, setTab] = useState('details');
@@ -93,12 +94,12 @@ const HitViewer = () => {
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(ObjectDetails, { obj: hit }),
-            hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
+            details: () => _jsx(HitDetails, { hit: hit }),
+            hit_comments: () => _jsx(HitComments, { hit: 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(RecordWorklog, { record: hit, users: users }),
-            hit_related: () => _jsx(RecordRelated, { record: hit }),
+            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
+            hit_related: () => _jsx(HitRelated, { hit: 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}`,
@@ -131,7 +132,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('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
+                            }, 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
                             // 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.test.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddNewCard from './AddNewCard';
+setupContextSelectorMock();
+const mockApiSearchAnalyticPost = vi.fn();
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: {
+                post: (...args) => mockApiSearchAnalyticPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, disabled, onClick, ...props }) => (_jsx("button", { disabled: disabled, onClick: onClick, ...props, children: children }))
+}));
+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 } }
+        },
+        fetchViews: mockFetchViews
+    })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('AddNewCard', () => {
+    const mockAddCard = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockApiSearchAnalyticPost.mockResolvedValue({
+            items: [{ analytic_id: 'analytic-1', name: 'Test Analytic', description: 'Test description' }],
+            total: 1
+        });
+    });
+    it('should render the add card title', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText('Add New Panel')).toBeInTheDocument();
+        });
+    });
+    it('should render the description', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText(/Add an additional panel/)).toBeInTheDocument();
+        });
+    });
+    it('should have the create button disabled initially', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /Create/i })).toBeDisabled();
+        });
+    });
+    it('should fetch analytics on mount', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(mockApiSearchAnalyticPost).toHaveBeenCalledWith(expect.objectContaining({ query: '*:*' }));
+        });
+    });
+});