@cccsaurora/howler-ui 2.14.0-dev.250 → 2.14.0-dev.255

package/components/elements/hit/HitActions.js

@@ -1,163 +0,0 @@
-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 json2mq from 'json2mq';
-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
-    json2mq([
-        {
-            minWidth: 1800
-        }
-    ]));
-    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

@@ -1,15 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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

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