@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/elements/hit/HitActions.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { isMobile } from 'react-device-detect';
+import { Trans } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useContextSelector } from 'use-context-selector';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { HitShortcuts } from './HitShortcuts';
+import ButtonActions from './actions/ButtonActions';
+import DropdownActions from './actions/DropdownActions';
+import { ASSESSMENT_KEYBINDS, TOP_ROW, VOTE_OPTIONS } from './actions/SharedComponents';
+const THROTTLER = new Throttler(250);
+const HitActions = ({ hit, orientation = 'horizontal' }) => {
+    const { config } = useContext(ApiConfigContext);
+    const { values, set } = useMyLocalStorageProvider();
+    const pluginStore = usePluginStore();
+    const { getMatchingAnalytic } = useMatchers();
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
+    const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const nextHit = useContextSelector(HitSearchContext, ctx => {
+        if (!ctx?.response || !selected) {
+            return null;
+        }
+        return ctx.response.items[(ctx.response.items.findIndex(_hit => _hit.howler.id === selected) ?? -1) + 1] ?? null;
+    });
+    const { availableTransitions, canVote, canAssess, loading, assess, vote, selectedVote } = useHitActions([hit]);
+    const [openSetting, setOpenSetting] = useState(null);
+    const [analytic, setAnalytic] = useState(null);
+    const shortcuts = useMemo(() => isMobile
+        ? HitShortcuts.NO_SHORTCUTS
+        : (values[StorageKey.HIT_SHORTCUTS] ?? HitShortcuts.SHORTCUTS_HINT), [values]);
+    const forceDropdown = useMemo(() => values[StorageKey.FORCE_DROPDOWN] ?? false, [values]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, [hit]));
+    const actions = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map((assessment, index) => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        if (!loading) {
+                            await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                            if ((await getCurrentView())?.settings?.advance_on_triage && nextHit) {
+                                clearSelectedHits(nextHit.howler.id);
+                                setSelected?.(nextHit.howler.id);
+                            }
+                        }
+                    },
+                    key: ASSESSMENT_KEYBINDS[index]
+                }))
+            ];
+        }
+        return _actions;
+    }, [
+        analytic,
+        assess,
+        availableTransitions,
+        canAssess,
+        canVote,
+        clearSelectedHits,
+        config.lookups,
+        getCurrentView,
+        loading,
+        nextHit,
+        setSelected,
+        vote,
+        pluginActions
+    ]);
+    const keyboardDownHandler = useCallback((event) => {
+        THROTTLER.debounce(() => {
+            const currentElement = document.activeElement.tagName;
+            if (shortcuts !== HitShortcuts.NO_SHORTCUTS &&
+                event.key.toUpperCase() in actions &&
+                !event.ctrlKey &&
+                currentElement !== 'INPUT') {
+                actions[event.key.toUpperCase()]();
+            }
+        });
+    }, [actions, shortcuts]);
+    useEffect(() => {
+        if (!isMobile) {
+            window.addEventListener('keydown', keyboardDownHandler);
+            return () => window.removeEventListener('keydown', keyboardDownHandler);
+        }
+    }, [keyboardDownHandler]);
+    useEffect(() => {
+        getMatchingAnalytic(hit).then(setAnalytic);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);
+    const handleCloseSetting = useCallback(() => setOpenSetting(null), []);
+    const onShortcutChange = useCallback((__, s) => set(StorageKey.HIT_SHORTCUTS, s), [set]);
+    const onDropdownChange = useCallback((__, checked) => set(StorageKey.FORCE_DROPDOWN, checked), [set]);
+    const showButton = useMediaQuery(
+    // Only show the buttons when there's sufficient space
+    // TODO: Could probably make this fancier and maybe remove the react device detect dependency, but this is fine for now
+    '(min-width: 1800px)');
+    const showDropdown = isMobile || !showButton;
+    return (_jsxs(Stack, { direction: "row", alignItems: "stretch", children: [showDropdown || forceDropdown ? (_jsx(DropdownActions, { currentAssessment: hit?.howler.assessment, currentStatus: hit?.howler.status, currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation })) : (_jsx(ButtonActions, { currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation, shortcuts: shortcuts })), (!showDropdown || !isMobile) && (_jsxs(Box, { sx: [
+                    {
+                        flex: 1,
+                        alignSelf: 'start',
+                        display: 'flex',
+                        justifyContent: 'end',
+                        alignItems: 'center',
+                        p: 1
+                    },
+                    (showDropdown || forceDropdown) && { flexDirection: 'column-reverse', justifyContent: 'center' },
+                    !showDropdown &&
+                        !forceDropdown && {
+                        position: 'absolute',
+                        top: 0,
+                        right: 0
+                    }
+                ], children: [_jsx(CircularProgress, { size: 24, sx: theme => ({
+                            // Sneaky trick: +true === 1, +false === 0. Love you, javascript <3
+                            opacity: +loading,
+                            transition: `${theme.transitions.duration.standard}ms`
+                        }) }), !showDropdown && (_jsx(IconButton, { size: "small", onClick: handleOpenSetting, children: _jsx(MoreHoriz, {}) })), _jsx(Menu, { anchorEl: openSetting, open: !!openSetting, onClose: handleCloseSetting, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+                            paper: {
+                                sx: {
+                                    '& ul': {
+                                        p: 2,
+                                        display: 'flex',
+                                        flexDirection: 'column'
+                                    }
+                                }
+                            }
+                        }, children: _jsxs(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Trans, { i18nKey: "hit.details.shortcuts" }) }), _jsxs(RadioGroup, { value: shortcuts, name: "radio-buttons-group", onChange: onShortcutChange, children: [_jsx(FormControlLabel, { value: HitShortcuts.SHORTCUTS_HINT, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts_hints" }) }), _jsx(FormControlLabel, { value: HitShortcuts.SHORTCUTS, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts" }) }), _jsx(FormControlLabel, { value: HitShortcuts.NO_SHORTCUTS, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.no_shortcuts" }) })] })] }), _jsxs(FormControl, { sx: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(FormLabel, { sx: { mr: 1 }, children: _jsx(Trans, { i18nKey: "hit.details.forceDropdown" }) }), _jsx(Switch, { checked: forceDropdown, onChange: onDropdownChange })] })] }) })] }))] }));
+};
+export default memo(HitActions);

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

@@ -0,0 +1,15 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+import { HitLayout } from './HitLayout';
+type HitBannerProps = {
+    hit: Hit;
+    layout?: HitLayout;
+    showAssigned?: boolean;
+    useListener?: boolean;
+};
+export interface StatusProps<T extends Hit = Hit> {
+    hit: T;
+    layout: HitLayout;
+}
+declare const HitBanner: FC<HitBannerProps>;
+export default HitBanner;

package/components/elements/hit/HitBanner.js

@@ -0,0 +1,121 @@
+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, 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 Assigned from './elements/Assigned';
+import EscalationChip from './elements/EscalationChip';
+import HitTimestamp from './elements/HitTimestamp';
+import HitBannerTooltip from './HitBannerTooltip';
+import { HitLayout } from './HitLayout';
+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]);
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        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;
+        }
+        let _id = hit.threat?.tactic?.id;
+        if (_id && config.lookups.icons.includes(_id)) {
+            return _id;
+        }
+        _id = hit.threat?.technique?.id;
+        if (_id && config.lookups.icons.includes(_id)) {
+            return _id;
+        }
+    }, [config.lookups.icons, hit.threat?.framework, hit.threat?.tactic?.id, hit.threat?.technique?.id]);
+    const iconUrl = useMemo(() => {
+        if (!mitreId) {
+            return;
+        }
+        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]);
+    /**
+     * The tooltips are necessary only when in the most compressed format
+     */
+    const Wrapper = useCallback(({ i18nKey, value, field, ...typographyProps }) => {
+        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 }, 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, 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: {
+                    height: '100%',
+                    padding: theme.spacing(1),
+                    gridColumn: { xs: 'span 3', sm: 'span 1', md: 'span 1' }
+                }, 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}`, 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 },
+                    compressed && {
+                        [`& .${avatarClasses.root}`]: {
+                            height: theme.spacing(3),
+                            width: theme.spacing(3)
+                        },
+                        [`& .${iconButtonClasses.root}`]: {
+                            height: theme.spacing(3),
+                            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, 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/HitBannerTooltip.d.ts

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { PropsWithChildren } from 'react';
+declare const _default: import("react").NamedExoticComponent<PropsWithChildren<{
+    hit: Hit;
+}>>;
+export default _default;

package/components/elements/hit/HitBannerTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const HitBannerTooltip = ({ hit, children }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { placement: "top", title: _jsxs("div", { children: [_jsx("div", { children: hit.event?.provider ?? t('unknown') }), _jsxs("div", { children: [hit.organization?.name ?? t('unknown'), " - ", hit.organization?.id ?? t('unknown')] }), hit.threat?.tactic && (_jsxs("div", { children: [hit.threat.tactic.id, " (", hit.threat.tactic.name, ")"] })), hit.threat?.technique && (_jsxs("div", { children: [hit.threat.technique.id, " (", hit.threat.technique.name, ")"] }))] }), children: children }));
+};
+export default memo(HitBannerTooltip);

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

@@ -0,0 +1,7 @@
+import { HitLayout } from './HitLayout';
+declare const _default: import("react").NamedExoticComponent<{
+    id?: string;
+    layout: HitLayout;
+    readOnly?: boolean;
+}>;
+export default _default;

package/components/elements/hit/HitCard.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Skeleton } from '@mui/material';
+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 { HitLayout } from './HitLayout';
+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]);
+    useEffect(() => {
+        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, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), layout !== HitLayout.DENSE && (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }))] }) }));
+};
+export default memo(HitCard);

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

@@ -0,0 +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 FC } from 'react';
+interface HitCommentsProps {
+    hit: Hit;
+    users: {
+        [id: string]: HowlerUser;
+    };
+}
+declare const HitComments: FC<HitCommentsProps>;
+export default HitComments;

package/components/elements/hit/HitComments.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Clear, KeyboardArrowDown, Send } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, AvatarGroup, Chip, IconButton, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+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 { 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 HitComments = ({ hit, users }) => {
+    const { user } = useAppUser();
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const { addListener, removeListener, emit } = useContext(SocketContext);
+    const { getMatchingAnalytic } = useMatchers();
+    const [typers, setTypers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [showClear, setShowClear] = useState(false);
+    const [length, setLength] = useState(0);
+    const [analyticId, setAnalyticId] = useState();
+    const [analyticComments, setAnalyticComments] = useState([]);
+    const [comments, setComments] = useState(sortByTimestamp(hit?.howler?.comment));
+    const input = useRef();
+    /**
+     * Set the list of typers based on updates from the websocket
+     */
+    const handler = useMemo(() => (data) => {
+        // Ensure the action is a user typing, that it's not us, and that were aren't aware of their typing already
+        if (data.event?.action === 'typing' &&
+            data.event?.username !== user.username &&
+            !typers.includes(data.event?.username)) {
+            setTypers([...typers, data.event.username]);
+        }
+        else if (data.event?.action === 'stop_typing' && data.event?.username !== user.username) {
+            setTypers(typers.filter(typer => typer !== data.event.username));
+        }
+    }, [typers, user.username]);
+    useEffect(() => {
+        addListener('hitComments', handler);
+        return () => removeListener('hitComments');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handler]);
+    useEffect(() => {
+        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, hit?.howler?.analytic]);
+    const onSubmit = useCallback(async () => {
+        if (!input.current?.value || !hit || input.current.value.length > MAX_LENGTH)
+            return;
+        setLoading(true);
+        try {
+            const result = await dispatchApi(api.hit.comments.post(hit.howler.id, input.current.value), {
+                showError: true,
+                throwError: true,
+                logError: false
+            });
+            setComments(sortByTimestamp(result.howler.comment));
+            input.current.value = '';
+            setShowClear(false);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi, hit]);
+    /**
+     * Emit a typing event when textbox is focused
+     */
+    const onFocus = useCallback(() => emit({
+        broadcast: true,
+        action: 'typing',
+        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: hit?.howler?.id
+    }), [emit, hit?.howler?.id]);
+    const onClear = useCallback(() => {
+        input.current.value = '';
+        setShowClear(false);
+    }, []);
+    const checkForSubmit = useCallback(e => {
+        e.stopPropagation();
+        if (input.current?.value) {
+            setShowClear(true);
+            setLength(input.current.value.length);
+        }
+        if (e.ctrlKey && e.key === 'Enter' && !loading) {
+            onSubmit();
+        }
+    }, [loading, onSubmit]);
+    const checkLength = useCallback(() => setLength(input.current?.value.length), []);
+    const handleDelete = useCallback(async (commentId) => {
+        await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
+        setComments(comments.filter(cmt => cmt.id !== commentId));
+    }, [comments, dispatchApi, hit?.howler?.id]);
+    const handleEdit = useCallback(async (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, 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
+            // when input.current.value is empty
+            input.current.value = `${input.current.value.trimStart()}\n\n${value
+                .split('\n')
+                .map(l => '> ' + l)
+                .join('\n')}\n\n`.trimStart();
+            setTimeout(() => {
+                input.current.focus();
+                // SPBK-2197 Fix - https://stackoverflow.com/a/10576409
+                input.current.selectionStart = input.current.selectionEnd = input.current.value.length;
+            }, 10);
+        }
+    }, []);
+    const handleReact = useCallback(async (commentId, type) => {
+        if (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(hit.howler.id, commentId));
+            setComments(comments.map(cmt => cmt.id !== commentId
+                ? cmt
+                : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } }));
+        }
+    }, [comments, dispatchApi, hit?.howler.id, user.username]);
+    /**
+     * Handle loading the comments when the hit changes
+     */
+    useEffect(() => {
+        if (hit?.howler?.comment) {
+            setComments(hit?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
+        }
+        else if (!hit) {
+            setComments([]);
+        }
+    }, [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
+     */
+    const renderedAnalyticComments = useMemo(() => {
+        if (analyticComments.length < 1) {
+            return null;
+        }
+        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: `${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: [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 HitComments;

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

@@ -0,0 +1,5 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    hit: Hit;
+}>;
+export default _default;