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

package/components/elements/hit/HitBanner.js

@@ -1,39 +1,35 @@
-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 { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, chipClasses, iconButtonClasses, useTheme } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
 import { ESCALATION_COLORS, PROVIDER_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
+import AnalyticLink from './elements/AnalyticLink';
+import Assigned from './elements/Assigned';
 import EscalationChip from './elements/EscalationChip';
 import HitTimestamp from './elements/HitTimestamp';
-import HitUsers from './elements/HitUsers';
 import HitBannerTooltip from './HitBannerTooltip';
 import { HitLayout } from './HitLayout';
-const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
+import RelatedRecords from './related/RelatedRecords';
+const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
-    const { getMatchingAnalytic } = useMatchers();
-    const [analyticId, setAnalyticId] = useState();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
-    useEffect(() => {
-        if (!hit?.howler.analytic) {
-            return;
+    const providerColor = useMemo(() => {
+        if (!hit?.event.provider) {
+            return PROVIDER_COLORS.unknown;
         }
-        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit?.howler.analytic]);
-    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
+        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
+    }, [hit?.event.provider]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
             return;
@@ -53,35 +49,23 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         }
         return `/api/static/mitre/${mitreId}.svg`;
     }, [mitreId]);
-    const leftBox = useMemo(() => {
-        if (hit.howler.is_bundle) {
-            return (_jsx(Box, { sx: {
-                    alignSelf: 'stretch',
-                    backgroundColor: providerColor,
-                    borderRadius: theme.shape.borderRadius,
-                    minWidth: '15px'
-                } }));
-        }
-        else {
-            return (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
-                        gridColumn: { xs: 'span 3', sm: 'span 1' },
-                        minWidth: '90px',
-                        backgroundColor: providerColor,
-                        color: theme.palette.getContrastText(providerColor),
-                        alignSelf: 'start',
-                        borderRadius: theme.shape.borderRadius,
-                        p: compressed ? 0.5 : 1,
-                        pt: 2,
-                        pl: 1
-                    }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
-                                width: '40px',
-                                height: '40px',
-                                mask: `url("${iconUrl}")`,
-                                maskSize: 'cover',
-                                background: theme.palette.getContrastText(providerColor)
-                            } }))] }) }));
-        }
-    }, [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
+    const leftBox = useMemo(() => (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
+                gridColumn: { xs: 'span 3', sm: 'span 1' },
+                minWidth: '90px',
+                backgroundColor: providerColor,
+                color: theme.palette.getContrastText(providerColor),
+                alignSelf: 'start',
+                borderRadius: theme.shape.borderRadius,
+                p: compressed ? 0.5 : 1,
+                pt: 2,
+                pl: 1
+            }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
+                        width: '40px',
+                        height: '40px',
+                        mask: `url("${iconUrl}")`,
+                        maskSize: 'cover',
+                        background: theme.palette.getContrastText(providerColor)
+                    } }))] }) })), [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
     /**
      * The tooltips are necessary only when in the most compressed format
      */
@@ -89,7 +73,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         const _children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
                         { display: 'flex', flexDirection: 'row' },
                         ...(Array.isArray(typographyProps?.sx) ? typographyProps?.sx : [typographyProps?.sx])
-                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, hit: hit }, val)))] }));
+                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
         return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
     }, [compressed, hit, t, textVariant]);
     return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden', textDecoration: 'none', color: 'text.primary' }, component: "a", href: `/hits/${hit?.howler.id}`, onClick: e => e.preventDefault(), children: [leftBox, _jsxs(Stack, { sx: {
@@ -99,9 +83,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", onClick: e => {
-                                    e.stopPropagation();
-                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsx(AnalyticLink, { lazy: lazy, hit: hit }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },
@@ -115,8 +97,8 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(HitUsers, { hit: hit, layout: layout, showAssigned: showAssigned }), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' } }, onClick: e => {
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' } }, onClick: e => {
                             e.stopPropagation();
-                        } })), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" })), hit.howler.is_bundle && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.bundlesize', { hits: hit.howler.hits.length }) }))] }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+                        } })), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
 };
 export default HitBanner;

package/components/elements/hit/HitCard.d.ts

@@ -1,7 +1,11 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { HitLayout } from './HitLayout';
 declare const _default: import("react").NamedExoticComponent<{
     id?: string;
+    hit?: Hit;
+    lazy?: boolean;
     layout: HitLayout;
     readOnly?: boolean;
+    elevation?: number;
 }>;
 export default _default;

package/components/elements/hit/HitCard.js

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardContent, Skeleton } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { memo, useEffect } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import HowlerCard from '../display/HowlerCard';
 import HitBanner from './HitBanner';
 import HitLabels from './HitLabels';
 import HitOutline from './HitOutline';
-const HitCard = ({ id, layout, readOnly = true }) => {
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
+const HitCard = ({ id, layout, readOnly = true, lazy = false, elevation, hit: _hit }) => {
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const hit = useContextSelector(RecordContext, ctx => _hit ?? ctx.records[id]);
     useEffect(() => {
-        if (!hit) {
-            getHit(id);
+        if (!hit && !lazy) {
+            void getRecord(id);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id]);
     if (!hit) {
         return _jsx(Skeleton, { variant: "rounded", height: "200px" });
     }
-    return (_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), _jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
+    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, elevation: elevation, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitOutline, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
 };
 export default memo(HitCard);

package/components/elements/hit/HitLabels.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check, Edit } from '@mui/icons-material';
 import { Backdrop, Box, Button, Chip, CircularProgress, Drawer, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, ListItemIcon, ListItemText, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -32,7 +32,7 @@ const NewLabelForm = ({ handleSubmit }) => {
                             '.MuiListItemIcon-root': { minWidth: 36, marginLeft: '2px' }
                         }, label: t('hit.label.edit.add.category'), id: "label-category", labelId: "type-label", value: category, onChange: e => setCategory(e.target.value), children: Object.keys(LABEL_TYPES).map(key => (_jsxs(MenuItem, { value: key, children: [_jsx(ListItemIcon, { children: LABEL_TYPES[key].icon ?? _jsx(Check, { sx: { opacity: 0 } }) }), _jsx(ListItemText, { sx: { textTransform: 'capitalize' }, children: key })] }, key))) })] }), _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(FormControl, { fullWidth: true, error: !!error, children: [_jsx(TextField, { label: t('hit.label.edit.add.label'), value: label, onChange: e => setLabel(e.currentTarget.value), onKeyDown: e => {
                                 if (e.key === 'Enter') {
-                                    handleAdd();
+                                    void handleAdd();
                                 }
                                 else if (error) {
                                     setError('');
@@ -44,7 +44,7 @@ const NewLabelForm = ({ handleSubmit }) => {
 const HitLabels = ({ hit, readOnly = false }) => {
     const { dispatchApi } = useMyApi();
     const { t } = useTranslation();
-    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
     const [openDrawer, setOpenDrawer] = useState(false);
     const [loading, setLoading] = useState(false);
     const [labels, setLabels] = useState(Object.entries(hit.howler.labels).flatMap(([key, category]) => {

package/components/elements/hit/HitLabels.test.d.ts

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

package/components/elements/hit/HitLabels.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import HitLabels from './HitLabels';
+/**
+ * HitLabels.test.tsx
+ *
+ * Purpose:
+ * This test suite validates the core behavior of the HitLabels component.
+ * - Correct transformation of hit.howler.labels into UI chips
+ * - Proper rendering of all label values
+ * - Conditional display of the edit button based on readOnly mode
+ * - Safe rendering when no labels are present
+ */
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({
+        dispatchApi: vi.fn()
+    })
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: {}
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: () => vi.fn()
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    }),
+    Trans: ({ i18nKey }) => i18nKey
+}));
+vi.mock('utils/constants', () => ({
+    LABEL_TYPES: {
+        security: { icon: null, color: '#ff0000' },
+        system: { icon: null, color: '#00ff00' }
+    }
+}));
+const baseHit = {
+    howler: {
+        id: 'hit-1',
+        labels: {
+            security: ['critical', 'high'],
+            system: ['info']
+        }
+    }
+};
+describe('HitLabels', () => {
+    it('renders all labels from hit.howler.labels', () => {
+        render(_jsx(HitLabels, { hit: baseHit, readOnly: true }));
+        expect(screen.getByText('critical')).toBeInTheDocument();
+        expect(screen.getByText('high')).toBeInTheDocument();
+        expect(screen.getByText('info')).toBeInTheDocument();
+    });
+    it('renders correct number of labels', () => {
+        render(_jsx(HitLabels, { hit: baseHit, readOnly: true }));
+        const labels = screen.getAllByText(/critical|high|info/);
+        expect(labels.length).toBe(3);
+    });
+    it('shows edit button when not readOnly', () => {
+        render(_jsx(HitLabels, { hit: baseHit, readOnly: false }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('hides edit button when readOnly', () => {
+        render(_jsx(HitLabels, { hit: baseHit, readOnly: true }));
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('renders without crashing when labels are empty', () => {
+        const emptyHit = {
+            howler: {
+                id: 'hit-1',
+                labels: {}
+            }
+        };
+        const { container } = render(_jsx(HitLabels, { hit: emptyHit, readOnly: true }));
+        expect(container).toBeInTheDocument();
+    });
+});

package/components/elements/hit/HitLinks.d.ts

@@ -1,10 +1,11 @@
+import type { FC } from 'react';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-declare const HitLinks: FC<{
+interface HitLinksProps {
     hit?: Hit;
     analytic?: Analytic;
-    dossiers: Dossier[];
-}>;
+    dossiers?: Dossier[];
+}
+declare const HitLinks: FC<HitLinksProps>;
 export default HitLinks;

package/components/elements/hit/HitLinks.js

@@ -1,19 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid, gridClasses } from '@mui/material';
+import { sortBy, uniqBy } from 'lodash-es';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
+import ResolvePivotUrl from '@cccsaurora/howler-ui/components/elements/hit/ResolvePivotUrl';
 import PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
 import RelatedLink from '@cccsaurora/howler-ui/components/elements/hit/related/RelatedLink';
-import { sortBy, uniqBy } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
 const HitLinks = ({ hit, analytic, dossiers = [] }) => {
     const { i18n } = useTranslation();
-    return ((hit?.howler?.links?.length > 0 ||
-        analytic?.notebooks?.length > 0 ||
-        dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.item}`]: { display: 'flex' } }, children: [hit?.howler?.links?.length > 0 &&
-                uniqBy(hit.howler.links, 'href')
-                    .slice(0, 3)
-                    .map(l => (_jsx(Grid, { item: true, children: _jsx(RelatedLink, { compact: true, ...l, target: "_blank", rel: "noopener noreferrer" }) }, l.href))), sortBy(dossiers.flatMap(_dossier => _dossier.pivots ?? []), `label.${i18n.language}`).map((_pivot, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            _jsx(Grid, { item: true, children: _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }) }, _pivot.value + index))), analytic?.notebooks?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] })));
+    const displayLinks = useMemo(() => uniqBy(hit?.howler?.links ?? [], 'href').slice(0, 3), [hit?.howler?.links]);
+    const displayPivots = useMemo(() => {
+        const flattened = dossiers.flatMap(dossier => (dossier.pivots ?? []).map(pivot => {
+            const pivotUrl = pivot.format === 'link' ? ResolvePivotUrl(pivot, hit) : undefined;
+            return {
+                pivot,
+                dossier,
+                resolvedUrl: pivotUrl || `/dossier/${dossier.dossier_id}`
+            };
+        }));
+        return sortBy(flattened, item => item.pivot.label?.[i18n.language]);
+    }, [dossiers, i18n.language, hit]);
+    const hasNotebooks = (analytic?.notebooks?.length ?? 0) > 0;
+    if (displayLinks.length === 0 && displayPivots.length === 0 && !hasNotebooks) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.item}`]: { display: 'flex' } }, children: [displayLinks
+                .filter(link => !!link.href)
+                .map(link => {
+                const safeTitle = link.title ?? link.href;
+                return (_jsx(Grid, { item: true, children: _jsx(RelatedLink, { compact: true, title: safeTitle, href: link.href, target: "_blank", rel: "noopener noreferrer" }) }, link.href));
+            }), displayPivots.map(({ pivot, dossier, resolvedUrl }) => {
+                return (_jsx(Grid, { item: true, children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, resolvedUrl: resolvedUrl, compact: true }) }, `${dossier.dossier_id}-${pivot.value}`));
+            }), hasNotebooks && (_jsx(Grid, { item: true, children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] }));
 };
 export default HitLinks;

package/components/elements/hit/HitNotebooks.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField } from '@mui/material';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField, Tooltip } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import NotebookTooltip from '@cccsaurora/howler-ui/components/elements/hit/NotebookTooltip';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
@@ -48,7 +49,7 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
             window.open(`${envs[0].url}lab/tree/${filename}`, '_blank');
             setOpen(false);
         }
-        catch (e) {
+        catch {
             showErrorMessage(t('hit.notebook.error.failToPost'));
         }
     }, [envs, loadedNotebook, showErrorMessage, t]);
@@ -61,16 +62,16 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
             if (response.status < 300) {
                 // if it exists, we need to ask for overwrite
                 showModal(_jsx(ConfirmNotebookModal, { onConfirm: () => {
-                        goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                        void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
                     } }));
             }
             else {
-                goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
             }
         }
-        catch (e) {
+        catch {
             // error means notebook doesn't exist, we can proceed with posting
-            goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+            void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
         }
         setLoading(false);
     }, [envs, goToJupyhub, hit, loadedNotebook, showModal]);
@@ -104,9 +105,9 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
     }, [analytic, dispatchApi, hit, selectedNotebook]);
     useEffect(() => {
         if (open) {
-            fetchEnvs(); //retrieve env info from howler-api/nbgallery
+            void fetchEnvs(); //retrieve env info from howler-api/nbgallery
             if (selectedNotebook) {
-                fetchNb();
+                void fetchNb();
             }
         }
         else {
@@ -119,31 +120,31 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
     }, [open]);
     return (config.configuration.features.notebook &&
         analytic?.notebooks && (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), mouseEvent: 'onMouseUp', children: _jsxs("div", { children: [_jsx(Popper, { open: open, anchorEl: anchorEl, placement: 'bottom', transition: true, sx: { zIndex: 1499 }, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 350, children: _jsxs(Paper, { sx: { maxWidth: '90%', width: '400px', p: 1, position: 'relative' }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(Stack, { direction: "column", children: _jsx("div", { style: { textAlign: 'center' }, children: _jsx(CircularProgress, { color: "inherit" }) }) }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 1 }, children: [_jsxs(TextField, { disabled: !!selectedNotebook, label: "Notebook", select: true, onChange: e => {
-                                                fetchNb(e.target.value);
+                                                void fetchNb(e.target.value);
                                             }, SelectProps: {
                                                 MenuProps: {
                                                     style: { zIndex: 35001 }
                                                 }
-                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
-                        theme => ({
-                            cursor: 'pointer',
-                            backgroundColor: 'transparent',
-                            transition: theme.transitions.create(['border-color']),
-                            '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
-                            '& > div': {
-                                height: '100%'
-                            },
-                            '& a': { textDecoration: 'none', color: 'text.primary' }
-                        }),
-                        !compact && { border: 'thin solid', borderColor: 'transparent' }
-                    ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
-                                    theme => ({
-                                        width: theme.spacing(3),
-                                        height: theme.spacing(3),
-                                        '& img': {
-                                            objectFit: 'contain'
-                                        }
-                                    })
-                                ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) })] }) })));
+                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(Tooltip, { title: _jsx(NotebookTooltip, {}), children: _jsx("span", { children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
+                                theme => ({
+                                    cursor: 'pointer',
+                                    backgroundColor: 'transparent',
+                                    transition: theme.transitions.create(['border-color']),
+                                    '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+                                    '& > div': {
+                                        height: '100%'
+                                    },
+                                    '& a': { textDecoration: 'none', color: 'text.primary' }
+                                }),
+                                !compact && { border: 'thin solid', borderColor: 'transparent' }
+                            ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
+                                            theme => ({
+                                                width: theme.spacing(3),
+                                                height: theme.spacing(3),
+                                                '& img': {
+                                                    objectFit: 'contain'
+                                                }
+                                            })
+                                        ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) }) }) })] }) })));
 };
 export default memo(HitNotebooks);

package/components/elements/hit/HitOutline.d.ts

@@ -4,6 +4,7 @@ import { HitLayout } from './HitLayout';
 export declare const DEFAULT_FIELDS: string[];
 declare const _default: import("react").NamedExoticComponent<{
     hit: WithMetadata<Hit>;
+    lazy?: boolean;
     layout: HitLayout;
     forceAllFields?: boolean;
 }>;

package/components/elements/hit/HitOutline.js

@@ -9,13 +9,13 @@ import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { HitLayout } from './HitLayout';
 import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['event.created', 'howler.id', 'howler.hash'];
-const HitOutline = ({ hit, layout, forceAllFields = false }) => {
+const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false }) => {
     const { t } = useTranslation();
-    const { getMatchingTemplate } = useMatchers();
+    const { getMatchingTemplate } = useMatchers(lazy);
     const [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     const [template, setTemplate] = useState(null);
     useEffect(() => {
-        getMatchingTemplate(hit).then(setTemplate);
+        void getMatchingTemplate(hit).then(setTemplate);
     }, [getMatchingTemplate, hit]);
     const outline = useMemo(() => {
         if (template) {
@@ -36,7 +36,7 @@ const HitOutline = ({ hit, layout, forceAllFields = false }) => {
                 fields: DEFAULT_FIELDS
             });
         }
-    }, [hit, layout, template, templateFieldCount]);
+    }, [forceAllFields, hit, layout, template, templateFieldCount]);
     return (_jsxs(Box, { sx: { py: 1, width: '100%', pr: 2 }, children: [layout === HitLayout.COMFY && (_jsx(Typography, { variant: "body1", fontWeight: "bold", sx: { mb: 1 }, children: t('hit.details.title') })), layout !== HitLayout.DENSE && _jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }), outline] }));
 };
 export default memo(HitOutline);

package/components/elements/hit/HitOverview.js

@@ -10,13 +10,13 @@ const HitOverview = ({ content, hit }) => {
     const { getMatchingOverview } = useMatchers();
     const [matchingOverview, setMatchingOverview] = useState(null);
     useEffect(() => {
-        getMatchingOverview(hit).then(setMatchingOverview);
+        void getMatchingOverview(hit).then(setMatchingOverview);
     }, [getMatchingOverview, hit]);
     const link = useMemo(() => matchingOverview
         ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
         : hit
             ? `/overviews/view?analytic=${encodeURIComponent(hit?.howler.analytic)}${hit?.howler.detection && '&detection=' + encodeURIComponent(hit?.howler.detection)}`
             : null, [hit, matchingOverview]);
-    return (_jsxs(Box, { sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) })), matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" }))] }));
+    return (_jsxs(Box, { className: "no-margin-first-child", sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" })), link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) }))] }));
 };
 export default memo(HitOverview);

package/components/elements/hit/{HitQuickSearch.d.ts → HitPreview.d.ts}

@@ -1,8 +1,8 @@
 import type { AppSearchItemRendererOption } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-type QuickSearchProps = {
+type PreviewProps = {
     hit: Hit;
-    options: AppSearchItemRendererOption<Hit>;
+    options?: AppSearchItemRendererOption<Hit>;
 };
-declare const _default: import("react").NamedExoticComponent<QuickSearchProps>;
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
 export default _default;

package/components/elements/hit/{HitQuickSearch.js → HitPreview.js}

@@ -1,15 +1,21 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Chip, Divider, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { memo, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { ESCALATION_COLORS, PROVIDER_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { formatDate, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-const HitQuickSearch = ({ hit, options }) => {
+const HitPreview = ({ hit, options }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
-    return (_jsxs(Box, { sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)", children: [_jsxs(Stack, { flexGrow: 1, gridColumn: options.state.mode === 'inline' ? 'span 2' : '', children: [_jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [hit.howler.analytic, hit.howler.detection && ': ', hit.howler.detection] }), options.state.mode !== 'inline' && hit.howler?.outline && (_jsx(Tooltip, { placement: isUnderLg ? 'bottom' : 'left', componentsProps: {
+    return (_jsxs(Box, { sx: {
+            overflow: 'hidden',
+            borderBottom: `thin solid ${theme.palette.divider}`,
+            pb: 1,
+            mb: 0,
+            gap: theme.spacing(1)
+        }, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)", children: [_jsxs(Stack, { flexGrow: 1, gridColumn: options?.state.mode === 'inline' ? 'span 2' : '', children: [_jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [hit.howler.analytic, hit.howler.detection && ': ', hit.howler.detection] }), options?.state.mode !== 'inline' && hit.howler?.outline && (_jsx(Tooltip, { placement: isUnderLg ? 'bottom' : 'left', componentsProps: {
                             tooltip: {
                                 sx: {
                                     fontSize: 12,
@@ -17,7 +23,7 @@ const HitQuickSearch = ({ hit, options }) => {
                                     color: theme.palette.getContrastText(theme.palette.background.paper)
                                 }
                             }
-                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.indicators" }), ": ", hit.howler.outline.indicators.map(i => i).join(', ')] })] }) }))] }), _jsxs(Stack, { alignItems: options.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
+                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] })] }) }))] }), _jsxs(Stack, { alignItems: options?.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options?.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options?.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
                                     backgroundColor: providerColor,
                                     color: theme.palette.getContrastText(providerColor)
                                 }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }), size: "small" }), _jsx(Chip, { label: hit.howler.escalation, size: "small", color: ESCALATION_COLORS[hit.howler.escalation] })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Chip, { sx: {
@@ -28,4 +34,4 @@ const HitQuickSearch = ({ hit, options }) => {
                                     ? hit?.howler.assignment
                                     : t('app.drawer.hit.assignment.unassigned.name'), size: "small" }), _jsx(Chip, { label: hit.howler.status, size: "small", color: STATUS_COLORS[hit.howler.status] })] })] })] }));
 };
-export default memo(HitQuickSearch);
+export default memo(HitPreview);

package/components/elements/hit/HitSummary.d.ts

@@ -1,8 +1,9 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+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';
 declare const _default: import("react").NamedExoticComponent<{
-    response?: HowlerSearchResponse<WithMetadata<Hit>>;
+    response?: HowlerSearchResponse<WithMetadata<Hit | Event>>;
     execute?: boolean;
     onStart?: () => void;
     onComplete?: () => void;