@cccsaurora/howler-ui 2.18.0-dev.736 → 2.18.0-dev.737

package/components/app/providers/UserListProvider.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { createContext, useCallback, useState } from 'react';
 export const UserListContext = createContext(null);
 const UserListProvider = ({ children }) => {
     const { dispatchApi } = useMyApi();
     const [users, setUsers] = useState({});
-    const usersRef = useRef(users);
-    usersRef.current = users;
-    const pendingIds = useRef(new Set());
-    const debounceTimer = useRef(null);
     const searchUsers = useCallback(async (query) => {
         const newUsers = (await dispatchApi(api.search.user.post({ query, rows: 1000 }), {
             throwError: false,
@@ -21,30 +17,14 @@ const UserListProvider = ({ children }) => {
             ...newUsers
         }));
     }, [dispatchApi]);
-    const fetchUsers = useCallback((ids) => {
-        const nextIds = new Set(ids);
-        nextIds.delete('Unknown');
-        nextIds.forEach(id => pendingIds.current.add(id));
-        if (debounceTimer.current) {
-            clearTimeout(debounceTimer.current);
+    const fetchUsers = useCallback(async (ids) => {
+        ids.delete('Unknown');
+        const idsToGet = Array.from(ids.values()).filter(id => !Object.keys(users).includes(id));
+        if (idsToGet.length <= 0) {
+            return;
         }
-        debounceTimer.current = setTimeout(async () => {
-            const idsToGet = Array.from(pendingIds.current).filter(id => !Object.keys(usersRef.current).includes(id));
-            pendingIds.current = new Set();
-            debounceTimer.current = null;
-            if (idsToGet.length <= 0) {
-                return;
-            }
-            await searchUsers(`id:${idsToGet.join(' OR ')}`);
-        }, 200);
-    }, [searchUsers]);
-    useEffect(() => {
-        return () => {
-            if (debounceTimer.current) {
-                clearTimeout(debounceTimer.current);
-            }
-        };
-    }, []);
+        await searchUsers(`id:${[...idsToGet].join(' OR ')}`);
+    }, [searchUsers, users]);
     return _jsx(UserListContext.Provider, { value: { users, fetchUsers, searchUsers }, children: children });
 };
 export default UserListProvider;

package/components/elements/PluginTypography.d.ts

@@ -1,11 +1,10 @@
 import { type TypographyProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    obj?: Hit | Observable;
+    hit?: Hit;
 };
 declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
 export default _default;

package/components/elements/PluginTypography.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { memo } from 'react';
 import { usePluginStore } from 'react-pluggable';
-const PluginTypography = ({ children, value, context, field, obj, ...props }) => {
+const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,8 +11,7 @@ const PluginTypography = ({ children, value, context, field, obj, ...props }) =>
             value,
             context,
             field,
-            hit: obj,
-            obj,
+            hit,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

@@ -2,11 +2,8 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userIds: string[];
-    onChange: (userIds: string[]) => void;
+    userId: string;
+    onChange: (userId: string) => void;
     i18nLabel: string;
-    avatarHeight?: number;
-    disabled?: boolean;
-    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,21 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Add } from '@mui/icons-material';
-import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
-import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
+const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
-    const { users, fetchUsers } = useContext(UserListContext);
-    const allUserIds = useMemo(() => Object.keys(users), [users]);
+    const { users, searchUsers } = useContext(UserListContext);
+    const userIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
-        fetchUsers(new Set(userIds));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [userIds]);
-    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { disabled: disabled, multiple: multiple, sx: { minWidth: '300px' }, options: allUserIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
+        searchUsers('uname:*');
+    }, [searchUsers]);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
                             const user = users[_userId];
                             return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
                                         display: 'grid',
@@ -24,13 +21,6 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
                                         gridTemplateAreas: `"profile name"\n"profile email"`,
                                         columnGap: 1.5
                                     }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userIds, onChange: (__, options) => {
-                            if (multiple) {
-                                onChange(Array.isArray(options) ? options : [options]);
-                            }
-                            else {
-                                onChange([Array.isArray(options) ? (options[0] ?? null) : options]);
-                            }
-                        } }) }) })] }));
+                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
 };
 export default UserList;

package/components/elements/addons/search/phrase/Phrase.js

@@ -80,7 +80,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
                         onSelectCapture: _onSelectCapture,
                         startAdornment: startAdornment && _jsx(InputAdornment, { position: "start", children: startAdornment }),
                         endAdornment: endAdornment && _jsx(InputAdornment, { position: "end", children: endAdornment })
-                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 1, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
+                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 2, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
                                 '&:focus': {
                                     outline: 'none'
                                 }

package/components/elements/display/ChipPopper.d.ts

@@ -15,8 +15,8 @@ interface ChipPopperProps {
     onToggle?: (show: boolean) => void;
     onDelete?: (event?: any) => void;
     toggleOnDelete?: boolean;
-    disablePortal?: boolean;
     closeOnClick?: boolean;
+    disablePortal?: boolean;
 }
 declare const _default: import("react").NamedExoticComponent<ChipPopperProps>;
 export default _default;

package/components/elements/display/HowlerCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { memo } from 'react';
-const HowlerCard = props => _jsx(Card, { elevation: props.variant !== 'outlined' ? 1 : 0, ...props });
+const HowlerCard = props => (_jsx(Card, { style: { outline: 'none' }, elevation: props.variant !== 'outlined' ? 4 : 0, ...props }));
 export default memo(HowlerCard);

package/components/elements/display/Modal.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Modal as MuiModal } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import { has } from 'lodash-es';
 import { useCallback, useContext } from 'react';
 const Modal = () => {
     const { content, setContent, options } = useContext(ModalContext);
@@ -16,7 +15,6 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: has(options, 'height') ? options.height : '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/icons/BundleButton.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const BundleButton: FC<{
+    ids: string[];
+    disabled?: boolean;
+}>;
+export default BundleButton;

package/components/elements/display/icons/BundleButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleButton = ({ ids, disabled = false }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const onClick = useCallback((event) => {
+        if (ids.length === 1) {
+            navigate(`/bundles/${ids[0]}`);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [ids, navigate]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(TuiIconButton, { size: "small", tooltip: t(`hit.panel.bundles.open${ids.length > 1 ? '' : '.prompt'}`), onClick: onClick, disabled: disabled, "aria-disabled": disabled, "aria-haspopup": "true", "aria-controls": anchorEl ? 'bundle-action-menu' : undefined, "aria-expanded": anchorEl ? 'true' : undefined, children: _jsx(AccountTree, {}) }), _jsx(Menu, { id: "bundle-action-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                    dense: true,
+                    'aria-labelledby': `bundle-button`
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, children: ids.map(id => (_jsx(MenuItem, { onClick: () => navigate(`/bundles/${id}`), children: _jsx(ListItemText, { primary: t('hit.panel.bundles.open.prompt'), secondary: _jsx(Typography, { variant: "caption", color: "text.secondary", children: id }) }) }, id))) })] }));
+};
+export default BundleButton;

package/components/elements/hit/HitActions.js

@@ -3,9 +3,9 @@ import { MoreHoriz } from '@mui/icons-material';
 import { Box, CircularProgress, Divider, FormControl, FormControlLabel, FormLabel, IconButton, Menu, Radio, RadioGroup, Stack, Switch, useMediaQuery } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import { useMyLocalStorageProvider } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -30,8 +30,8 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
-    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
-    const nextHit = useContextSelector(RecordSearchContext, ctx => {
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const nextHit = useContextSelector(HitSearchContext, ctx => {
         if (!ctx?.response || !selected) {
             return null;
         }

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

@@ -3,7 +3,6 @@ import { type FC } from 'react';
 import { HitLayout } from './HitLayout';
 type HitBannerProps = {
     hit: Hit;
-    lazy?: boolean;
     layout?: HitLayout;
     showAssigned?: boolean;
     useListener?: boolean;

package/components/elements/hit/HitBanner.js

@@ -1,34 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, 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 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;
@@ -48,23 +52,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
      */
@@ -72,7 +88,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' }, children: [leftBox, _jsxs(Stack, { sx: {
@@ -82,7 +98,11 @@ 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}`, onAuxClick: e => {
+                                    e.stopPropagation();
+                                }, 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 },
@@ -96,6 +116,6 @@ 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 }), _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 }))] })] }));
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: 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;