@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/elements/hit/HitBanner.js

@@ -0,0 +1,113 @@
+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 { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { uniq } from 'lodash-es';
+import howlerPluginStore from '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 'utils/constants';
+import { stringToColor } from '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 { getIdFromName } = useContext(AnalyticContext);
+    const theme = useTheme();
+    const pluginStore = usePluginStore();
+    const [analyticId, setAnalyticId] = useState();
+    const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
+    const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
+    useEffect(() => {
+        getIdFromName(hit?.howler.analytic).then(setAnalyticId);
+    }, [getIdFromName, hit]);
+    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, ...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 }, 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}`, 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 }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.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` }] }))] }))] }), _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/dist/components/elements/hit/HitBannerTooltip.d.ts

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

package/dist/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/dist/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/dist/components/elements/hit/HitCard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Skeleton } from '@mui/material';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { TemplateContext } from 'components/app/providers/TemplateProvider';
+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 refresh = useContextSelector(TemplateContext, ctx => ctx.refresh);
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    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/dist/components/elements/hit/HitComments.d.ts

@@ -0,0 +1,11 @@
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { Hit } from '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/dist/components/elements/hit/HitComments.js

@@ -0,0 +1,175 @@
+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 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import { SocketContext } from 'components/app/providers/SocketProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import useMyApi from '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 '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 { getAnalyticFromName } = useContext(AnalyticContext);
+    const { addListener, removeListener, emit } = useContext(SocketContext);
+    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) {
+            getAnalyticFromName(hit?.howler?.analytic).then(analytic => {
+                setAnalyticId(analytic?.analytic_id);
+                setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
+            });
+        }
+    }, [getAnalyticFromName, 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/dist/components/elements/hit/HitDetails.d.ts

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

package/dist/components/elements/hit/HitDetails.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
+import { flatten } from 'flat';
+import Fuse from 'fuse.js';
+import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Throttler from 'utils/Throttler';
+import PluginTypography from '../PluginTypography';
+const ListRenderer = memo(({ objKey: key, entries, maxKeyLength }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
+    const uniqueEntries = useMemo(() => uniq(entries), [entries]);
+    const omittedDuplicates = useMemo(() => uniqueEntries.length !== entries.length, [entries, uniqueEntries]);
+    return (_jsxs(Box, { className: key.replace(/\./g, '_'), display: allPrimitives ? 'grid' : 'flex', sx: [
+            allPrimitives
+                ? {
+                    gridTemplateColumns: '40% 60%'
+                }
+                : {
+                    flexDirection: 'column'
+                }
+        ], overflow: "hidden", maxWidth: "100%", children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: allPrimitives ? 'end' : 'start',
+                    borderRight: allPrimitives ? '1px solid' : 'none',
+                    borderColor: theme.palette.divider,
+                    pr: 1,
+                    mr: 1
+                }, children: _jsx("code", { style: {
+                        marginTop: allPrimitives ? 0 : theme.spacing(2),
+                        marginBottom: allPrimitives ? 0 : theme.spacing(1)
+                    }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
+                        if (Array.isArray(entry)) {
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { objKey: `${key}.${index}`.replace(/\./g, '_'), entries: entry }) }, index));
+                        }
+                        if (isPlainObject(entry)) {
+                            return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`.replace(/\./g, '_'), indent: true, data: entry }) }, index));
+                        }
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                    }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
+});
+const ObjectRenderer = memo(({ data, parentKey, indent = false }) => {
+    const theme = useTheme();
+    const entries = useMemo(() => {
+        const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
+        const sortedAlphabetical = unsorted.map(([key]) => key).sort();
+        return sortBy(unsorted, ([key, val]) => sortedAlphabetical.indexOf(key) -
+            // This pushes complex objects to the bottom of the list, so they are always rendered last.
+            // We check for if the value is a primitve, or if it's an array and every entry is a primitive.
+            (!isObject(val) || (isArray(val) && val.every(entry => !isObject(entry))) ? 10000 : 0));
+    }, [data]);
+    const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
+    return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
+                    .map(([key, val]) => {
+                    if (Array.isArray(val)) {
+                        return _jsx(ListRenderer, { maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                    }
+                    return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
+                            display: 'grid',
+                            gridTemplateColumns: '40% 60%',
+                            alignItems: 'start',
+                            maxWidth: '100%'
+                        }, children: [_jsx(Box, { display: "flex", justifyContent: "end", sx: {
+                                    marginRight: theme.spacing(1),
+                                    marginBottom: 0,
+                                    marginTop: 0,
+                                    borderRight: '1px solid',
+                                    borderColor: theme.palette.divider,
+                                    paddingRight: theme.spacing(1),
+                                    height: '100%',
+                                    wordWrap: 'break-word'
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, children: val }) })] }, key));
+                }) })] }));
+});
+const Collapsible = memo(({ title, data, query }) => {
+    const throttler = useMemo(() => new Throttler(400), []);
+    const [scores, setScores] = useState([]);
+    const [results, setResults] = useState({});
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const keys = useMemo(() => options
+        .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
+        .map(key => key.replace(/\d+/g, 'value'))
+        .filter(key => !!key), [options]);
+    const fuse = useMemo(() => new Fuse(options, { includeScore: true, threshold: 0.4, keys: uniq(['key', 'value', ...keys]) }), [keys, options]);
+    useEffect(() => {
+        if (!query) {
+            setResults(data);
+            setScores([]);
+            return;
+        }
+        throttler.debounce(() => {
+            const fuseResults = fuse.search(query);
+            setScores(fuseResults.map(result => [result.item.key, result.score]));
+            setResults(fuseResults.reduce((acc, entry) => ({ ...acc, [entry.item.key]: entry.item.value }), {}));
+        });
+    }, [data, fuse, query, throttler]);
+    const styles = useMemo(() => scores.map(([key, score]) => ({
+        [`& .${key.replace(/\./g, '_')}`]: {
+            opacity: 1 - Math.pow(score, 0.5),
+            fontWeight: score < 0.05 ? 'bold' : 'initial'
+        }
+    })), [scores]);
+    if (isEmpty(results)) {
+        return null;
+    }
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { showParentKey: true, data: results }) }) })] }));
+});
+const HitDetails = ({ hit }) => {
+    const { t } = useTranslation();
+    const [query, setQuery] = useState('');
+    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => key.includes('.') && ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) && !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
+                return (_jsx(Collapsible, { query: query, title: section
+                        .split('_')
+                        .map(word => capitalize(word))
+                        .join(' '), data: Object.fromEntries(entries) }, section));
+            })] }));
+};
+export default memo(HitDetails);

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

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

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Check, Edit } from '@mui/icons-material';
+import { Backdrop, Box, Button, Chip, CircularProgress, Drawer, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, ListItemIcon, ListItemText, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from 'api';
+import { HitContext } from 'components/app/providers/HitProvider';
+import useMyApi from 'components/hooks/useMyApi';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { LABEL_TYPES } from 'utils/constants';
+const NewLabelForm = ({ handleSubmit }) => {
+    const { t } = useTranslation();
+    const [label, setLabel] = useState('');
+    const [category, setCategory] = useState('generic');
+    const [error, setError] = useState('');
+    const handleAdd = async () => {
+        if (!label) {
+            setError(t('hit.label.edit.add.error.empty'));
+        }
+        else {
+            try {
+                await handleSubmit({ label: label, category: category });
+                setLabel('');
+            }
+            catch (e) {
+                setError(e.message);
+            }
+        }
+    };
+    return (_jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "type-label", htmlFor: "label-category", size: "small", children: t('hit.label.edit.add.category') }), _jsx(Select, { size: "small", sx: {
+                            '#label-category': { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+                            '.MuiListItemIcon-root': { minWidth: 36, marginLeft: '2px' }
+                        }, label: t('hit.label.edit.add.category'), id: "label-category", labelId: "type-label", value: category, onChange: e => setCategory(e.target.value), children: Object.keys(LABEL_TYPES).map(key => (_jsxs(MenuItem, { value: key, children: [_jsx(ListItemIcon, { children: LABEL_TYPES[key].icon ?? _jsx(Check, { sx: { opacity: 0 } }) }), _jsx(ListItemText, { sx: { textTransform: 'capitalize' }, children: key })] }, key))) })] }), _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(FormControl, { fullWidth: true, error: !!error, children: [_jsx(TextField, { label: t('hit.label.edit.add.label'), value: label, onChange: e => setLabel(e.currentTarget.value), onKeyDown: e => {
+                                if (e.key === 'Enter') {
+                                    handleAdd();
+                                }
+                                else if (error) {
+                                    setError('');
+                                }
+                            }, InputProps: {
+                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: handleAdd, children: _jsx(Add, {}) }) }))
+                            } }), _jsx(FormHelperText, { children: error })] }) })] }));
+};
+const HitLabels = ({ hit, readOnly = false }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const [openDrawer, setOpenDrawer] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [labels, setLabels] = useState(Object.entries(hit.howler.labels).flatMap(([key, category]) => {
+        if (typeof category === 'string') {
+            category = [category];
+        }
+        return (category ?? []).map?.(label => ({ category: key, label: label })) ?? [];
+    }));
+    const submitLabel = useCallback(async (label) => {
+        // label can't be added more than once
+        if (labels.some(x => label.category === x.category && label.label === x.label)) {
+            throw new Error(t('hit.label.edit.add.error.duplicate'));
+        }
+        setLoading(true);
+        try {
+            const updatedHit = await dispatchApi(api.hit.labels.put(hit.howler.id, label.category, { value: [label.label] }));
+            updateHit(updatedHit);
+        }
+        finally {
+            setLoading(false);
+        }
+        setLabels([...labels, label]);
+    }, [dispatchApi, hit.howler.id, labels, updateHit, t]);
+    const deleteLabel = useCallback(async (label) => {
+        setLoading(true);
+        try {
+            const updatedHit = await dispatchApi(api.hit.labels.del(hit.howler.id, label.category, { value: [label.label] }));
+            updateHit(updatedHit);
+        }
+        finally {
+            setLoading(false);
+        }
+        setLabels(labels.filter(x => !(label.category === x.category && label.label === x.label)));
+    }, [dispatchApi, hit.howler.id, labels, updateHit]);
+    useEffect(() => {
+        if (hit.howler.labels) {
+            setLabels(Object.entries(hit.howler.labels).flatMap(([key, category]) => {
+                if (typeof category === 'string') {
+                    category = [category];
+                }
+                return (category ?? []).map?.(label => ({ category: key, label: label })) ?? [];
+            }));
+        }
+    }, [hit]);
+    return (_jsxs(Box, { sx: { py: 1 }, children: [_jsxs(Drawer, { open: openDrawer, onClose: () => setOpenDrawer(false), anchor: "right", PaperProps: { sx: { maxWidth: '90%', width: '500px' } }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(CircularProgress, { color: "inherit" }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 2 }, children: [_jsx(Typography, { variant: "h4", children: t('hit.label.edit') }), _jsx(Box, { children: labels.map(label => {
+                                    const category = label.category.toLowerCase();
+                                    return (_jsx(Tooltip, { title: t(`hit.label.category.${category}`), children: _jsx(Chip, { icon: LABEL_TYPES[category]?.icon ?? undefined, variant: "filled", size: "small", label: label.label, onDelete: () => deleteLabel(label), sx: [
+                                                {
+                                                    mr: 1,
+                                                    mb: 1
+                                                },
+                                                LABEL_TYPES[category]?.color && {
+                                                    '&, & svg': {
+                                                        color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                                    },
+                                                    backgroundColor: LABEL_TYPES[category].color
+                                                }
+                                            ] }, label.label + hit.howler.id) }, label.label + hit.howler.id));
+                                }) }), _jsx(NewLabelForm, { handleSubmit: submitLabel })] })] }), labels.map(label => {
+                const category = label.category.toLowerCase();
+                return (_jsx(Tooltip, { title: t(`hit.label.category.${category}`), children: _jsx(Chip, { icon: LABEL_TYPES[category]?.icon ?? undefined, variant: "outlined", size: "small", label: label.label, sx: [
+                            {
+                                mr: 1
+                            },
+                            LABEL_TYPES[category]?.color && {
+                                '&, & svg': {
+                                    color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                },
+                                backgroundColor: LABEL_TYPES[category].color
+                            }
+                        ] }, label.category + label.label + hit.howler.id) }, label.category + label.label + hit.howler.id));
+            }), !readOnly && (_jsx(Button, { onClick: () => setOpenDrawer(true), startIcon: _jsx(Edit, {}), variant: "outlined", size: "small", children: _jsx(Trans, { i18nKey: "hit.label" }) }))] }));
+};
+export default memo(HitLabels);

package/dist/components/elements/hit/HitLayout.d.ts

@@ -0,0 +1,5 @@
+export declare enum HitLayout {
+    DENSE = "dense",
+    NORMAL = "normal",
+    COMFY = "comfy"
+}