@cccsaurora/howler-ui 3.1.0-dev.1424 → 3.1.0-dev.1437

package/components/app/hooks/useMatchers.d.ts

@@ -1,9 +1,10 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const useMatchers: (lazy?: boolean) => {
     getMatchingDossiers: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Dossier").Dossier[]>;
     getMatchingOverview: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Overview").Overview>;
-    getMatchingTemplate: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Template").Template>;
+    getMatchingTemplate: (hit: WithMetadata<Hit>, providedTemplate?: Template) => Promise<Template>;
     getMatchingAnalytic: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Analytic").Analytic>;
 };
 export default useMatchers;

package/components/app/hooks/useMatchers.js

@@ -5,7 +5,10 @@ import { useContextSelector } from 'use-context-selector';
 import { RecordContext } from '../providers/RecordProvider';
 const useMatchers = (lazy = false) => {
     const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
-    const getMatchingTemplate = useCallback(async (hit) => {
+    const getMatchingTemplate = useCallback(async (hit, providedTemplate) => {
+        if (providedTemplate) {
+            return providedTemplate;
+        }
         if (!hit) {
             return null;
         }

package/components/app/hooks/useMatchers.test.js

@@ -63,6 +63,16 @@ describe('useMatchers', () => {
             const template = await result.current.getMatchingTemplate(undefined);
             expect(template).toBeNull();
         });
+        it('should prefer a provided template over hit metadata', async () => {
+            const { has } = await import('lodash-es');
+            const providedTemplate = { ...mockTemplate, name: 'provided-template' };
+            has.mockReturnValue(true);
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(mockHitWithMetadata, providedTemplate);
+            expect(template).toBe(providedTemplate);
+            expect(has).not.toHaveBeenCalled();
+            expect(mockGetRecord).not.toHaveBeenCalled();
+        });
         it('should return template from metadata when it exists', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(true);

package/components/elements/display/Markdown.js

@@ -73,17 +73,23 @@ const Markdown = ({ md, components = {}, disableLinks = false }) => {
                     return _jsx("pre", { className: "mermaid", children: node.children[0].value });
                 }
                 if (match?.[1] === 'json') {
+                    // Allows passing of settings like so:
+                    // ```json[hideSearch=true]
+                    const opts = /.*\[(.+)\].*/.exec(className ?? '')?.[1];
+                    const options = Object.fromEntries((opts ? opts.split(',') : [])
+                        .map(entry => entry.split('=', 2))
+                        .filter(pair => pair.length === 2 && !!pair[0]));
                     try {
-                        return _jsx(JSONViewer, { data: JSON.parse(node.children[0].value) });
+                        return (_jsx(JSONViewer, { data: JSON.parse(node.children[0].value), hideSearch: options.hideSearch === 'true' }));
                     }
                     catch {
                         return _jsx("code", { style: { color: 'red' }, children: t('markdown.json.invalid') });
                     }
                 }
                 return match ? (_jsx(SyntaxHighlighter
-                // eslint-disable-next-line react/no-children-prop
+                // oxlint-disable-next-line react/no-children-prop typescript/no-base-to-string
                 , { 
-                    // eslint-disable-next-line react/no-children-prop
+                    // oxlint-disable-next-line react/no-children-prop typescript/no-base-to-string
                     children: String(children).replace(/\n$/, ''), style: isDark ? oneDark : oneLight, language: match[1], PreTag: "div", ...props })) : (_jsx("code", { className: className, ...props, children: children }));
             },
             blockquote({ children }) {

package/components/elements/display/Markdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/display/Markdown.test.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import Markdown from './Markdown';
+vi.mock('commons/components/app/hooks', () => ({
+    useAppTheme: () => ({ isDark: false })
+}));
+vi.mock('mermaid', () => ({
+    default: {
+        initialize: vi.fn(),
+        run: vi.fn()
+    }
+}));
+vi.mock('./Notebook', () => ({
+    Notebook: () => null
+}));
+vi.mock('./json/JSONViewer', () => ({
+    default: ({ data, hideSearch }) => (_jsx("output", { id: "json-viewer", children: JSON.stringify({ data, hideSearch }) }))
+}));
+describe('Markdown', () => {
+    it('forwards hideSearch from JSON fence options to the viewer', () => {
+        render(_jsx(Markdown, { md: '```json[hideSearch=true]\n{"value":"visible"}\n```' }));
+        expect(screen.getByTestId('json-viewer')).toHaveTextContent(JSON.stringify({ data: { value: 'visible' }, hideSearch: true }));
+    });
+});

package/components/elements/display/json/JSONViewer.js

@@ -11,7 +11,6 @@ import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { removeEmpty, searchObject } from '@cccsaurora/howler-ui/utils/utils';
-const THROTTLER = new Throttler(150);
 const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     const { t } = useTranslation();
     const { isDark } = useAppTheme();
@@ -19,13 +18,21 @@ const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON);
     const [query, setQuery] = useState('');
     const [result, setResult] = useState(null);
+    const throttler = useMemo(() => new Throttler(150), []);
     useEffect(() => {
-        THROTTLER.debounce(() => {
+        let cancelled = false;
+        throttler.debounce(() => {
+            if (cancelled) {
+                return;
+            }
             const filteredData = removeEmpty(data, compact);
             const searchedData = searchObject(filteredData, filter ?? query, flat);
             setResult(searchedData);
         });
-    }, [compact, data, filter, flat, query]);
+        return () => {
+            cancelled = true;
+        };
+    }, [compact, data, filter, flat, query, throttler]);
     const hasError = useMemo(() => !validateRegex(filter ?? query), [query, filter]);
     const shouldCollapse = useCallback((field) => {
         return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;

package/components/elements/display/json/JSONViewer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/display/json/JSONViewer.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import JSONViewer from './JSONViewer';
+vi.mock('commons/components/app/hooks', () => ({
+    useAppTheme: () => ({ isDark: false })
+}));
+vi.mock('components/elements/addons/search/phrase/Phrase', () => ({
+    default: () => _jsx("input", {})
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: (_key, defaultValue) => [defaultValue]
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('utils/utils', () => ({
+    removeEmpty: vi.fn(),
+    searchObject: vi.fn()
+}));
+describe('JSONViewer', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('does not process a debounced result after unmounting', async () => {
+        vi.useFakeTimers();
+        const { removeEmpty } = await import('utils/utils');
+        const { unmount } = render(_jsx(JSONViewer, { data: { value: 'visible' } }));
+        unmount();
+        act(() => {
+            vi.advanceTimersByTime(150);
+        });
+        expect(removeEmpty).not.toHaveBeenCalled();
+    });
+});

package/components/elements/hit/HitBanner.js

@@ -1,10 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OpenInNew } from '@mui/icons-material';
-import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, chipClasses, iconButtonClasses, useTheme } from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { Box, Chip, Grid, Stack, Tooltip, Typography, chipClasses, useTheme } from '@mui/material';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useMemo } from 'react';
+import { Fragment, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { ESCALATION_COLORS, PROVIDER_COLORS } from '@cccsaurora/howler-ui/utils/constants';
@@ -19,7 +18,6 @@ import { HitLayout } from './HitLayout';
 import RelatedRecords from './related/RelatedRecords';
 const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { t } = useTranslation();
-    const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
@@ -30,75 +28,26 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
         }
         return PROVIDER_COLORS[hit?.event.provider] ?? 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(() => (_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: [
+        const _children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, fontWeight: "bold", textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
                         { display: 'flex', flexDirection: 'row' },
-                        ...(Array.isArray(typographyProps?.sx) ? typographyProps?.sx : [typographyProps?.sx])
+                        ...(typographyProps?.sx && Array.isArray(typographyProps.sx) ? typographyProps.sx : [typographyProps?.sx])
                     ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
         return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
     }, [compressed, hit, t, textVariant]);
-    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden', textDecoration: 'none', color: 'text.primary' }, component: "a", href: `/hits/${hit?.howler.id}`, onClick: e => e.preventDefault(), children: [leftBox, _jsxs(Stack, { sx: {
-                    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: [_jsx(AnalyticLink, { lazy: lazy, hit: hit }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
-                                            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 }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' } }, onClick: e => {
-                            e.stopPropagation();
-                        } })), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+    return (_jsx(Box, { sx: {
+            width: '100%',
+            ml: 0,
+            overflow: 'hidden',
+            textDecoration: 'none',
+            color: 'text.primary'
+        }, component: "a", href: `/hits/${hit?.howler.id}`, onClick: e => e.preventDefault(), children: _jsxs(Stack, { spacing: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", alignItems: "center", children: [_jsx(HitBannerTooltip, { hit: hit, children: _jsx(Chip, { sx: { backgroundColor: providerColor, color: theme.palette.getContrastText(providerColor) }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }) }), _jsx(AnalyticLink, { lazy: lazy, hit: hit }), _jsx("div", { style: { flex: 1 } }), _jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" })), _jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), hit.howler.related?.length > 0 && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => (_jsx(Fragment, { children: pluginStore.executeFunction(`${plugin}.status`, { hit, layout }) }, plugin)))] }), 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: [hit.howler.outline.threat && (_jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" })), hit.howler.outline.target && (_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: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, fontWeight: "bold", 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" })), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' }, alignSelf: 'start' }, onClick: e => {
+                                e.stopPropagation();
+                            } }))] }))] }) }));
 };
 export default HitBanner;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,209 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import HitBanner from './HitBanner';
+import { HitLayout } from './HitLayout';
+const executeFunctionMock = vi.hoisted(() => vi.fn());
+const stringToColorMock = vi.hoisted(() => vi.fn(() => '#123456'));
+vi.mock('react-pluggable', async () => {
+    const actual = await vi.importActual('react-pluggable');
+    return {
+        ...actual,
+        usePluginStore: () => ({ executeFunction: executeFunctionMock })
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key, options) => {
+            if (options?.count !== undefined) {
+                return `${key}:${options.count}`;
+            }
+            if (options?.duration) {
+                return `${key}:${options.duration}`;
+            }
+            return key;
+        }
+    }),
+    Trans: ({ i18nKey }) => _jsx("span", { children: i18nKey })
+}));
+vi.mock('commons/components/app/hooks', () => ({
+    useAppUser: () => ({ user: { username: 'current-user' } })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+vi.mock('utils/utils', async () => {
+    const actual = await vi.importActual('utils/utils');
+    return {
+        ...actual,
+        stringToColor: stringToColorMock
+    };
+});
+vi.mock('./elements/AnalyticLink', () => ({
+    default: () => _jsx("div", { id: "analytic-link", children: "analytic-link" })
+}));
+vi.mock('./related/RelatedRecords', () => ({
+    default: () => _jsx("div", { id: "related-records", children: "related-records" })
+}));
+const mockConfig = {
+    indexes: {},
+    lookups: {},
+    configuration: {
+        system: {
+            retention: {
+                limit_amount: 350,
+                limit_unit: 'days'
+            }
+        }
+    },
+    c12nDef: {},
+    mapping: {}
+};
+const createWrapper = (viewers = {}) => {
+    const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(SocketContext.Provider, { value: {
+                viewers,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                emit: vi.fn(),
+                status: 1,
+                reconnect: vi.fn(),
+                open: true,
+                fetchViewers: vi.fn()
+            }, children: children }) }));
+    return Wrapper;
+};
+const createBannerHit = (overrides) => createMockHit({
+    organization: { id: 'org-1', name: 'Test Org' },
+    event: { provider: 'howler', created: '2024-01-01T00:00:00Z' },
+    howler: {
+        id: 'hit-123',
+        analytic: 'Analytic Name',
+        detection: 'Detection Name',
+        status: 'open',
+        assignment: 'analyst-1',
+        escalation: 'hit',
+        rationale: 'Escalation rationale',
+        related: [],
+        outline: {
+            threat: 'Threat value',
+            target: 'Target value',
+            indicators: ['ioc-a', 'ioc-b'],
+            summary: 'Summary value'
+        },
+        links: [{ href: 'https://example.com', title: 'Open source link' }]
+    },
+    ...overrides
+});
+const renderHitBanner = ({ hit = createBannerHit(), layout = HitLayout.NORMAL, showAssigned = true, viewers = {} } = {}) => render(_jsx(HitBanner, { hit: hit, layout: layout, showAssigned: showAssigned }), {
+    wrapper: createWrapper(viewers)
+});
+describe('HitBanner', () => {
+    beforeEach(() => {
+        howlerPluginStore.plugins.splice(0, howlerPluginStore.plugins.length);
+        executeFunctionMock.mockReset();
+        stringToColorMock.mockClear();
+    });
+    afterEach(() => {
+        howlerPluginStore.plugins.splice(0, howlerPluginStore.plugins.length);
+    });
+    it('renders the main banner sections for a fully populated hit', () => {
+        renderHitBanner();
+        expect(screen.getByText('Test Org')).toBeInTheDocument();
+        expect(screen.getByTestId('analytic-link')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.rationale: Escalation rationale')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.threat:')).toBeInTheDocument();
+        expect(screen.getByText('Threat value')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.target:')).toBeInTheDocument();
+        expect(screen.getByText('Target value')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.indicators:')).toBeInTheDocument();
+        expect(screen.getByText('ioc-a')).toBeInTheDocument();
+        expect(screen.getByText('ioc-b')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.summary:')).toBeInTheDocument();
+        expect(screen.getByText('Summary value')).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'Open source link' })).toHaveAttribute('href', 'https://example.com');
+    });
+    it.each(['in-progress', 'on-hold'])('renders the status chip for %s', status => {
+        const hit = createBannerHit({ howler: { ...createBannerHit().howler, status } });
+        renderHitBanner({ hit });
+        expect(screen.getByText(status)).toBeInTheDocument();
+    });
+    it('hides and shows the unassigned chip based on showAssigned', () => {
+        const hit = createBannerHit({ howler: { ...createBannerHit().howler, assignment: 'unassigned' } });
+        renderHitBanner({ hit, showAssigned: false });
+        expect(screen.queryByText('app.drawer.hit.assignment.unassigned.name')).not.toBeInTheDocument();
+        renderHitBanner({ hit, showAssigned: true });
+        expect(screen.getByText('app.drawer.hit.assignment.unassigned.name')).toBeInTheDocument();
+    });
+    it('renders related records only when related hits are present', () => {
+        const withRelated = createBannerHit({ howler: { ...createBannerHit().howler, related: ['hit-2'] } });
+        renderHitBanner({ hit: withRelated });
+        expect(screen.getByTestId('related-records')).toBeInTheDocument();
+    });
+    it('uses stringToColor for unknown providers and skips it for known providers', () => {
+        const unknownProviderHit = createBannerHit({
+            event: { provider: 'custom-provider', created: '2024-01-01T00:00:00Z' }
+        });
+        renderHitBanner({ hit: unknownProviderHit });
+        expect(stringToColorMock).toHaveBeenCalledWith('custom-provider');
+        stringToColorMock.mockClear();
+        const knownProviderHit = createBannerHit({ event: { provider: 'howler', created: '2024-01-01T00:00:00Z' } });
+        renderHitBanner({ hit: knownProviderHit });
+        expect(stringToColorMock).not.toHaveBeenCalled();
+    });
+    it('renders plugin status sections from plugin hooks', () => {
+        howlerPluginStore.plugins.push('demo-plugin');
+        executeFunctionMock.mockImplementation((name) => {
+            if (name === 'demo-plugin.status') {
+                return _jsx("span", { id: "plugin-status", children: "plugin-status" });
+            }
+            return null;
+        });
+        const hit = createBannerHit();
+        renderHitBanner({ hit, layout: HitLayout.COMFY });
+        expect(screen.getByTestId('plugin-status')).toBeInTheDocument();
+        expect(executeFunctionMock).toHaveBeenCalledWith('demo-plugin.status', { hit, layout: HitLayout.COMFY });
+    });
+    it('prevents default navigation when the banner root link is clicked', () => {
+        const { container } = renderHitBanner();
+        const rootLink = container.querySelector('a[href="/hits/hit-123"]');
+        expect(rootLink).toBeTruthy();
+        const clickEvent = createEvent.click(rootLink, {
+            bubbles: true,
+            cancelable: true
+        });
+        fireEvent(rootLink, clickEvent);
+        expect(clickEvent.defaultPrevented).toBe(true);
+    });
+    it('stops propagation when the external link chip is clicked', async () => {
+        const user = userEvent.setup();
+        const onClick = vi.fn();
+        render(_jsx("div", { onClick: onClick, children: _jsx(HitBanner, { hit: createBannerHit(), layout: HitLayout.NORMAL }) }), { wrapper: createWrapper() });
+        await user.click(screen.getByRole('link', { name: 'Open source link' }));
+        expect(onClick).not.toHaveBeenCalled();
+    });
+    it('renders fallback link label and omits optional outline/rationale sections when missing', () => {
+        const hit = createBannerHit({
+            organization: { id: null, name: null },
+            event: { provider: null, created: '2024-01-01T00:00:00Z' },
+            howler: {
+                ...createBannerHit().howler,
+                rationale: null,
+                outline: {},
+                links: [{ href: 'https://example.com' }],
+                status: 'open'
+            }
+        });
+        renderHitBanner({ hit, layout: HitLayout.DENSE });
+        expect(screen.getByText('unknown')).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'hit.header.link' })).toHaveAttribute('href', 'https://example.com');
+        expect(screen.queryByText('hit.header.rationale:')).not.toBeInTheDocument();
+        expect(screen.queryByText('hit.header.threat:')).not.toBeInTheDocument();
+        expect(screen.queryByText('hit.header.target:')).not.toBeInTheDocument();
+        expect(screen.queryByText('hit.header.summary:')).not.toBeInTheDocument();
+    });
+});

package/components/elements/hit/HitCard.js

@@ -19,6 +19,6 @@ const HitCard = ({ id, layout, readOnly = true, lazy = false, elevation, hit: _h
     if (!hit) {
         return _jsx(Skeleton, { variant: "rounded", height: "200px" });
     }
-    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, elevation: elevation, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitOutline, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
+    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, elevation: elevation, children: _jsxs(CardContent, { sx: { display: 'flex', flexDirection: 'column', alignItems: 'start' }, children: [_jsx(HitBanner, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitOutline, { hit: hit, layout: layout, lazy: lazy }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
 };
 export default memo(HitCard);

package/components/elements/hit/HitLabels.js

@@ -89,7 +89,7 @@ const HitLabels = ({ hit, readOnly = false }) => {
             }));
         }
     }, [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 => {
+    return (_jsxs(Box, { 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: [
                                                 {

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

@@ -1,4 +1,5 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { HitLayout } from './HitLayout';
 export declare const DEFAULT_FIELDS: string[];
@@ -7,5 +8,6 @@ declare const _default: import("react").NamedExoticComponent<{
     lazy?: boolean;
     layout: HitLayout;
     forceAllFields?: boolean;
+    template?: Template;
 }>;
 export default _default;