@cccsaurora/howler-ui 2.19.0-cases.863 → 2.19.0-dev.1023

package/components/elements/hit/HitBanner.js

@@ -1,35 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } 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';
-import RelatedRecords from './related/RelatedRecords';
-const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned = true }) => {
+const HitBanner = ({ hit, 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]);
-    const providerColor = useMemo(() => {
-        if (!hit?.event.provider) {
-            return PROVIDER_COLORS.unknown;
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
         }
-        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
-    }, [hit?.event.provider]);
+        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]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
             return;
@@ -49,23 +53,35 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
         }
         return `/api/static/mitre/${mitreId}.svg`;
     }, [mitreId]);
-    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]);
+    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]);
     /**
      * The tooltips are necessary only when in the most compressed format
      */
@@ -73,7 +89,7 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
         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, obj: 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, hit: 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: {
@@ -83,7 +99,9 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), 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) => {
+                    ] }), 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) => {
                                             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 },
@@ -97,8 +115,8 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), 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(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 => {
                             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, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), 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, 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 }))] })] }));
 };
 export default HitBanner;

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

@@ -1,9 +1,7 @@
 import type { HitLayout } from './HitLayout';
 declare const _default: import("react").NamedExoticComponent<{
     id?: string;
-    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 { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 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, lazy = false, elevation }) => {
-    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
-    const hit = useContextSelector(RecordContext, ctx => ctx.records[id]);
+const HitCard = ({ id, layout, readOnly = true }) => {
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
     useEffect(() => {
-        if (!hit && !lazy) {
-            getRecord(id);
+        if (!hit) {
+            getHit(id);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id]);
     if (!hit) {
         return _jsx(Skeleton, { variant: "rounded", height: "200px" });
     }
-    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 })] }) }));
+    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 })] }) }));
 };
 export default memo(HitCard);

package/components/elements/{record/RecordComments.d.ts → hit/HitComments.d.ts}

@@ -1,12 +1,11 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import { type FC } from 'react';
-interface RecordCommentsProps {
-    record: Hit | Observable;
+interface HitCommentsProps {
+    hit: Hit;
     users: {
         [id: string]: HowlerUser;
     };
 }
-declare const RecordComments: FC<RecordCommentsProps>;
-export default RecordComments;
+declare const HitComments: FC<HitCommentsProps>;
+export default HitComments;

package/components/elements/{record/RecordComments.js → hit/HitComments.js}

@@ -10,13 +10,12 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { compareTimestamp, sortByTimestamp } from '@cccsaurora/howler-ui/utils/utils';
 import Comment from '../Comment';
 import HowlerAvatar from '../display/HowlerAvatar';
 import TypingIndicator from '../display/TypingIndicator';
 const MAX_LENGTH = 5000;
-const RecordComments = ({ record, users }) => {
+const HitComments = ({ hit, users }) => {
     const { user } = useAppUser();
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -29,7 +28,7 @@ const RecordComments = ({ record, users }) => {
     const [length, setLength] = useState(0);
     const [analyticId, setAnalyticId] = useState();
     const [analyticComments, setAnalyticComments] = useState([]);
-    const [comments, setComments] = useState(sortByTimestamp(record?.howler?.comment));
+    const [comments, setComments] = useState(sortByTimestamp(hit?.howler?.comment));
     const input = useRef();
     /**
      * Set the list of typers based on updates from the websocket
@@ -51,20 +50,20 @@ const RecordComments = ({ record, users }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handler]);
     useEffect(() => {
-        if (isHit(record) && record.howler.analytic) {
-            getMatchingAnalytic(record).then(analytic => {
+        if (hit?.howler?.analytic) {
+            getMatchingAnalytic(hit).then(analytic => {
                 setAnalyticId(analytic?.analytic_id);
                 setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getMatchingAnalytic, record]);
+    }, [getMatchingAnalytic, hit?.howler?.analytic]);
     const onSubmit = useCallback(async () => {
-        if (!input.current?.value || !record || input.current.value.length > MAX_LENGTH)
+        if (!input.current?.value || !hit || input.current.value.length > MAX_LENGTH)
             return;
         setLoading(true);
         try {
-            const result = await dispatchApi(api.hit.comments.post(record.howler.id, input.current.value), {
+            const result = await dispatchApi(api.hit.comments.post(hit.howler.id, input.current.value), {
                 showError: true,
                 throwError: true,
                 logError: false
@@ -76,23 +75,23 @@ const RecordComments = ({ record, users }) => {
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, record]);
+    }, [dispatchApi, hit]);
     /**
      * Emit a typing event when textbox is focused
      */
     const onFocus = useCallback(() => emit({
         broadcast: true,
         action: 'typing',
-        id: record?.howler?.id
-    }), [emit, record?.howler?.id]);
+        id: hit?.howler?.id
+    }), [emit, hit?.howler?.id]);
     /**
      * Emit a stop typing event when textbox is blurred
      */
     const onBlur = useCallback(() => emit({
         broadcast: true,
         action: 'stop_typing',
-        id: record?.howler?.id
-    }), [emit, record?.howler?.id]);
+        id: hit?.howler?.id
+    }), [emit, hit?.howler?.id]);
     const onClear = useCallback(() => {
         input.current.value = '';
         setShowClear(false);
@@ -109,16 +108,16 @@ const RecordComments = ({ record, users }) => {
     }, [loading, onSubmit]);
     const checkLength = useCallback(() => setLength(input.current?.value.length), []);
     const handleDelete = useCallback(async (commentId) => {
-        await dispatchApi(api.hit.comments.del(record.howler.id, [commentId]), { throwError: true, showError: true });
+        await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
         setComments(comments.filter(cmt => cmt.id !== commentId));
-    }, [comments, dispatchApi, record?.howler?.id]);
+    }, [comments, dispatchApi, hit?.howler?.id]);
     const handleEdit = useCallback(async (commentId, editValue) => {
-        await dispatchApi(api.hit.comments.put(record.howler.id, commentId, editValue), {
+        await dispatchApi(api.hit.comments.put(hit.howler.id, commentId, editValue), {
             throwError: true,
             showError: true
         });
         setComments(comments.map(cmt => (cmt.id !== commentId ? cmt : { ...cmt, value: editValue })));
-    }, [comments, dispatchApi, record?.howler?.id]);
+    }, [comments, dispatchApi, hit?.howler?.id]);
     const handleQuote = useCallback((value) => {
         if (input.current) {
             // We use trimStart here so there isn't a bunch of newlines at the beginning of the comment
@@ -136,27 +135,27 @@ const RecordComments = ({ record, users }) => {
     }, []);
     const handleReact = useCallback(async (commentId, type) => {
         if (type) {
-            await dispatchApi(api.hit.comments.react.put(record.howler.id, commentId, type));
+            await dispatchApi(api.hit.comments.react.put(hit.howler.id, commentId, type));
             setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: type } }));
         }
         else {
-            await dispatchApi(api.hit.comments.react.del(record.howler.id, commentId));
+            await dispatchApi(api.hit.comments.react.del(hit.howler.id, commentId));
             setComments(comments.map(cmt => cmt.id !== commentId
                 ? cmt
                 : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } }));
         }
-    }, [comments, dispatchApi, record?.howler.id, user.username]);
+    }, [comments, dispatchApi, hit?.howler.id, user.username]);
     /**
      * Handle loading the comments when the hit changes
      */
     useEffect(() => {
-        if (record?.howler?.comment) {
-            setComments(record?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
+        if (hit?.howler?.comment) {
+            setComments(hit?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
         }
-        else if (!record) {
+        else if (!hit) {
             setComments([]);
         }
-    }, [record]);
+    }, [hit]);
     /**
      * This is the comments for the analytic associated with the hit. We show this at the start of the comment
      * list, as if they've been pinned
@@ -165,13 +164,13 @@ const RecordComments = ({ record, users }) => {
         if (analyticComments.length < 1) {
             return null;
         }
-        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === record?.howler.detection);
+        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === hit?.howler.detection);
         return (_jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, { fontSize: "small" }), children: _jsx(Typography, { variant: "body1", children: t('comments.analytic', { count: displayedComments.length }) }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: displayedComments.map(c => (_jsx(Comment, { comment: c, extra: _jsx(Chip, { size: "small", variant: "outlined", onClick: () => navigate('/analytics' +
                                     (analyticId
                                         ? `/${analyticId}?tab=comments` + (c.detection ? `&filter=${c.detection}` : '')
-                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${record?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
-    }, [analyticComments, analyticId, record?.howler.analytic, record?.howler.detection, navigate, t, users]);
+                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${hit?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
+    }, [analyticComments, analyticId, hit?.howler.analytic, hit?.howler.detection, navigate, t, users]);
     const renderedComments = useMemo(() => comments.map(c => (_jsx(Comment, { comment: c, users: users, handleDelete: () => handleDelete(c.id), handleEdit: value => handleEdit(c.id, value), handleReact: type => handleReact(c.id, type), handleQuote: () => handleQuote(c.value) }, c.id))), [comments, handleDelete, handleEdit, handleQuote, handleReact, users]);
-    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [record && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), record ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
+    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [hit && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), hit ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
 };
-export default RecordComments;
+export default HitComments;

package/components/elements/{ObjectDetails.js → hit/HitDetails.js}

@@ -5,12 +5,12 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import PluginTypography from './PluginTypography';
-const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
+import PluginTypography from '../PluginTypography';
+const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,15 +36,15 @@ const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { hit: hit, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
                             return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), hit: hit, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
                     }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
-const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
+const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
     const theme = useTheme();
     const entries = useMemo(() => {
         const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
@@ -56,10 +56,10 @@ const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
-                        return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                        return _jsx(ListRenderer, { hit: hit, maxKeyLength: longestKey, objKey: key, entries: val }, key);
                     }
                     return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
                             display: 'grid',
@@ -75,14 +75,14 @@ const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
                                     paddingRight: theme.spacing(1),
                                     height: '100%',
                                     wordWrap: 'break-word'
-                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), obj: obj, children: val }) })] }, key));
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), hit: hit, children: val }) })] }, key));
                 }) })] }));
 });
-const Collapsible = memo(({ obj, title, data, query }) => {
+const Collapsible = memo(({ hit, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -109,20 +109,20 @@ const Collapsible = memo(({ obj, title, data, query }) => {
     if (isEmpty(results)) {
         return null;
     }
-    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), sx: { my: 0 }, children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 0.5, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { obj: obj, showParentKey: true, data: results }) }) })] }));
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { hit: hit, showParentKey: true, data: results }) }) })] }));
 });
-const ObjectDetails = ({ obj }) => {
+const HitDetails = ({ hit }) => {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
-    const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
+    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
+        !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
-                return (_jsx(Collapsible, { obj: obj, query: query, title: section
+                return (_jsx(Collapsible, { hit: hit, query: query, title: section
                         .split('_')
                         .map(word => capitalize(word))
                         .join(' '), data: Object.fromEntries(entries) }, section));
             })] }));
 };
-export default memo(ObjectDetails);
+export default memo(HitDetails);

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 { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -44,7 +44,7 @@ const NewLabelForm = ({ handleSubmit }) => {
 const HitLabels = ({ hit, readOnly = false }) => {
     const { dispatchApi } = useMyApi();
     const { t } = useTranslation();
-    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
+    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
     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/HitOutline.d.ts

@@ -4,7 +4,6 @@ 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,9 +9,9 @@ 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, lazy = false, forceAllFields = false }) => {
+const HitOutline = ({ hit, layout, forceAllFields = false }) => {
     const { t } = useTranslation();
-    const { getMatchingTemplate } = useMatchers(lazy);
+    const { getMatchingTemplate } = useMatchers();
     const [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     const [template, setTemplate] = useState(null);
     useEffect(() => {
@@ -36,7 +36,7 @@ const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false }) => {
                 fields: DEFAULT_FIELDS
             });
         }
-    }, [forceAllFields, hit, layout, template, templateFieldCount]);
+    }, [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/{HitPreview.d.ts → HitQuickSearch.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 PreviewProps = {
+type QuickSearchProps = {
     hit: Hit;
-    options?: AppSearchItemRendererOption<Hit>;
+    options: AppSearchItemRendererOption<Hit>;
 };
-declare const _default: import("react").NamedExoticComponent<PreviewProps>;
+declare const _default: import("react").NamedExoticComponent<QuickSearchProps>;
 export default _default;

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

@@ -4,18 +4,12 @@ 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 HitPreview = ({ hit, options }) => {
+const HitQuickSearch = ({ 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,
-            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: {
+    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: {
                             tooltip: {
                                 sx: {
                                     fontSize: 12,
@@ -23,7 +17,7 @@ const HitPreview = ({ 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(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(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: {
                                     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: {
@@ -34,4 +28,4 @@ const HitPreview = ({ 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(HitPreview);
+export default memo(HitQuickSearch);

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

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const HitRelated: FC<{
+    hit: Hit;
+}>;
+export default HitRelated;

package/components/elements/hit/HitRelated.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid } from '@mui/material';
+import RelatedLink from './related/RelatedLink';
+const HitRelated = ({ hit }) => {
+    return (_jsx(Grid, { container: true, spacing: 1, pr: 2, children: hit?.howler.links?.map(l => (_jsx(Grid, { item: true, xs: 6, sm: 4, md: 3, children: _jsx(RelatedLink, { ...l }) }, l.title + l.href))) }));
+};
+export default HitRelated;

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

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