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

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;

package/components/elements/hit/HitOutline.js

@@ -1,42 +1,87 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Typography } from '@mui/material';
+import { ContentPaste, FilterList, Info, Language, Lock, Person } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip, Typography, 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 { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { isNil } from 'lodash-es';
-import { createElement, memo, useEffect, useMemo, useState } from 'react';
+import get from 'lodash-es/get';
+import isNil from 'lodash-es/isNil';
+import isObject from 'lodash-es/isObject';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { PROVIDER_COLORS, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+import PluginTypography from '../PluginTypography';
 import { HitLayout } from './HitLayout';
-import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['event.created', 'howler.id', 'howler.hash'];
-const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false }) => {
+const EditIcon = ({ label, icon: Icon, link }) => (_jsx(Tooltip, { title: label, children: _jsx(IconButton, { size: "small", component: Link, to: link, "aria-label": label, children: _jsx(Icon, { sx: { height: '16px !important', width: '16px !important' } }) }) }));
+const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false, template: providedTemplate = null }) => {
+    const theme = useTheme();
     const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const addFilter = useContextSelector(ParameterContext, ctx => ctx?.addFilter);
     const { getMatchingTemplate } = useMatchers(lazy);
     const [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     const [template, setTemplate] = useState(null);
-    useEffect(() => {
-        void getMatchingTemplate(hit).then(setTemplate);
-    }, [getMatchingTemplate, hit]);
-    const outline = useMemo(() => {
-        if (template) {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                template,
-                fields: !isNil(templateFieldCount) && !forceAllFields
-                    ? [...template.keys].slice(0, templateFieldCount)
-                    : template.keys,
-                readonly: template.type === 'readonly'
-            });
+    const providerColor = useMemo(() => {
+        if (!hit?.event.provider) {
+            return PROVIDER_COLORS.unknown;
+        }
+        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
+    }, [hit?.event.provider]);
+    const fields = useMemo(() => {
+        const keys = template?.keys;
+        if (!keys?.length) {
+            return DEFAULT_FIELDS;
+        }
+        if (!isNil(templateFieldCount) && !forceAllFields) {
+            return keys.slice(0, templateFieldCount);
         }
-        else {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                fields: DEFAULT_FIELDS
-            });
+        return keys;
+    }, [template, templateFieldCount, forceAllFields]);
+    const editUrl = useMemo(() => {
+        const params = {
+            analytic: hit.howler.analytic,
+            type: template?.type ?? 'personal'
+        };
+        if (template?.detection) {
+            params.detection = template.detection;
         }
-    }, [forceAllFields, hit, layout, template, templateFieldCount]);
-    return (_jsxs(Box, { sx: { py: 1, width: '100%', pr: 2 }, children: [layout === HitLayout.COMFY && (_jsx(Typography, { variant: "body1", fontWeight: "bold", sx: { mb: 1 }, children: t('hit.details.title') })), layout !== HitLayout.DENSE && _jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }), outline] }));
+        else if (!template && hit.howler.detection) {
+            params.detection = hit.howler.detection;
+        }
+        return '/templates/view?' + new URLSearchParams(params).toString();
+    }, [template, hit]);
+    useEffect(() => {
+        void getMatchingTemplate(hit, providedTemplate).then(setTemplate);
+    }, [getMatchingTemplate, hit, providedTemplate]);
+    if (fields.length < 1) {
+        return null;
+    }
+    return (_jsxs(Stack, { sx: { my: 1, borderLeft: `5px solid ${providerColor}`, pl: 1, alignItems: 'stretch' }, children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Typography, { variant: "body2", fontWeight: "bold", children: t('hit.details.title') }), template?.type === 'readonly' ? (_jsx(EditIcon, { label: t('route.templates.builtin'), icon: Lock, link: editUrl })) : !template ? (_jsx(EditIcon, { label: t('route.templates.default'), icon: Info, link: editUrl })) : template.type === 'global' ? (_jsx(EditIcon, { label: t('route.templates.global'), icon: Language, link: editUrl })) : (_jsx(EditIcon, { label: t('route.templates.personal'), icon: Person, link: editUrl }))] }), (fields ?? [])
+                .map(field => [field, get(hit, field)])
+                .map(([field, data]) => {
+                const displayedData = (Array.isArray(data) ? data.join(', ') : isObject(data) ? JSON.stringify(data) : data)?.toString();
+                if (!displayedData) {
+                    return null;
+                }
+                return (_jsxs(Stack, { direction: "row", spacing: 1, sx: {
+                        '& .copy': { opacity: 0, cursor: 'pointer', transition: theme.transitions.create('opacity') },
+                        '&:hover .copy': { opacity: 1 },
+                        position: 'relative',
+                        pr: '75px'
+                    }, children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData }), _jsxs(Stack, { spacing: 0.25, direction: "row", sx: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: [_jsx(Tooltip, { title: t('hit.outline.copy'), children: _jsx(IconButton, { className: "copy", size: "small", onClick: e => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            void navigator.clipboard.writeText(displayedData);
+                                        }, children: _jsx(ContentPaste, { fontSize: "small" }) }) }), addFilter && (_jsx(Tooltip, { title: t('hit.outline.add_filter'), children: _jsx(IconButton, { className: "copy", size: "small", onClick: e => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            addFilter(`${field}:"${displayedData}"`);
+                                        }, children: _jsx(FilterList, { fontSize: "small" }) }) }))] })] }, field));
+            })] }));
 };
 export default memo(HitOutline);

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

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

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { HitLayout } from './HitLayout';
+import HitOutline from './HitOutline';
+const addFilter = vi.fn();
+const getMatchingTemplate = vi.fn((_hit, template) => Promise.resolve(template));
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingTemplate })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ApiConfigContext: createContext({ config: { indexes: { hit: {} } } })
+    };
+});
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: {}
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [null]
+}));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ children }) => _jsx("span", { children: children })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (_context, selector) => selector({ addFilter })
+}));
+vi.mock('utils/constants', () => ({
+    PROVIDER_COLORS: { unknown: '#000000' },
+    StorageKey: { TEMPLATE_FIELD_COUNT: 'template-field-count' }
+}));
+vi.mock('utils/utils', () => ({
+    stringToColor: () => '#ffffff'
+}));
+describe('HitOutline', () => {
+    it('renders supplied template fields and adds a filter for the selected value', async () => {
+        const user = userEvent.setup();
+        const hit = {
+            event: { provider: 'endpoint' },
+            howler: { id: 'hit-1', analytic: 'analytic-1', detection: 'hit-detection' },
+            details: { values: ['first', 'second'] }
+        };
+        const template = {
+            keys: ['event.provider', 'details.values'],
+            type: 'global',
+            detection: 'template-detection'
+        };
+        render(_jsx(BrowserRouter, { children: _jsx(HitOutline, { hit: hit, layout: HitLayout.NORMAL, template: template }) }));
+        expect(await screen.findByText('event.provider:')).toBeInTheDocument();
+        expect(screen.getByText('endpoint')).toBeInTheDocument();
+        expect(screen.getByText('details.values:')).toBeInTheDocument();
+        expect(screen.getByText('first, second')).toBeInTheDocument();
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/templates/view?analytic=analytic-1&type=global&detection=template-detection');
+        await user.click(screen.getAllByLabelText('hit.outline.add_filter')[0]);
+        expect(addFilter).toHaveBeenCalledWith('event.provider:"endpoint"');
+    });
+});

package/components/elements/hit/elements/AnalyticLink.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
+import { Link as LinkIcon } from '@mui/icons-material';
+import { IconButton, Stack, Typography } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -13,10 +14,10 @@ const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) =>
         void getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
-    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", onAuxClick: e => {
+    return (_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [_jsx(IconButton, { size: "small", component: Link, onAuxClick: e => {
                     e.stopPropagation();
                 }, onClick: e => {
                     e.stopPropagation();
-                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
+                }, disabled: !analyticId, to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(LinkIcon, { fontSize: "small" }) }), _jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [hit.howler.analytic, hit.howler.detection && ' > ', hit.howler.detection] })] }));
 };
 export default AnalyticLink;

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AnalyticLink from './AnalyticLink';
+const getMatchingAnalytic = vi.hoisted(() => vi.fn());
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingAnalytic })
+}));
+describe('AnalyticLink', () => {
+    beforeEach(() => {
+        getMatchingAnalytic.mockResolvedValue({ analytic_id: 'analytic-id' });
+    });
+    it('renders an isolated link button when the analytic is resolved', async () => {
+        const user = userEvent.setup();
+        const onClick = vi.fn();
+        const hit = { howler: { analytic: 'Analytic Name', detection: 'Detection Name' } };
+        render(_jsx(BrowserRouter, { children: _jsx("div", { onClick: onClick, children: _jsx(AnalyticLink, { hit: hit }) }) }));
+        const link = await screen.findByRole('link');
+        expect(link).toHaveAttribute('href', '/analytics/analytic-id');
+        expect(screen.getByRole('heading')).toHaveTextContent('Analytic Name > Detection Name');
+        await user.click(link);
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});

package/components/routes/help/TemplateDocumentation.js

@@ -3,7 +3,7 @@ import { Card, CardContent, Stack } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import DefaultOutline from '@cccsaurora/howler-ui/components/elements/hit/outlines/DefaultOutline';
+import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import dayjs from 'dayjs';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -13,6 +13,11 @@ import { usePluginStore } from 'react-pluggable';
 import { modifyDocumentation } from '@cccsaurora/howler-ui/utils/utils';
 import TEMPLATES_EN from './markdown/en/templates.md';
 import TEMPLATES_FR from './markdown/fr/templates.md';
+const TEMPLATE = {
+    analytic: 'Cat Checker',
+    owner: 'cat',
+    type: 'personal'
+};
 const ALERTS = [
     {
         howler: { id: 'hit1', analytic: 'Cat Checker', detection: 'Listening for Meows' },
@@ -43,8 +48,14 @@ const TemplateDocumentation = () => {
         ALERTS.forEach((alert, index) => {
             markdown = markdown.replace(`$ALERT_${index + 1}`, JSON.stringify(alert, null, 2));
         });
-        return modifyDocumentation(markdown.split('\n===SPLIT===\n'), howlerPluginStore, pluginStore);
+        return markdown
+            .split('\n===SPLIT===\n')
+            .map(section => modifyDocumentation(section, howlerPluginStore, pluginStore));
     }, [i18n.language, pluginStore]);
-    return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(DefaultOutline, { hit: alert, fields: Object.keys(alert).flatMap(key => Object.keys(alert[key]).map(key2 => [key, key2].join('.'))), layout: HitLayout.NORMAL, readonly: true }) }) }, alert.howler.id))) }), _jsx(Markdown, { md: md2 })] }));
+    return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(HitOutline, { hit: alert, template: {
+                                ...TEMPLATE,
+                                detection: alert.howler.detection,
+                                keys: Object.keys(alert['event']).map(key => `event.${key}`)
+                            }, layout: HitLayout.NORMAL, forceAllFields: true }) }) }, alert.howler.id))) }), _jsx(Markdown, { md: md2 })] }));
 };
 export default TemplateDocumentation;

package/components/routes/help/markdown/en/templates.md.js

@@ -1 +1 @@
-export default "# Howler Templates\n\nHowler is, fundamentally, an application that allows analysts to triage hits and alerts. In order to make sure analysts can do this as efficiently as possible, we want to have the ability to present relevant data for a given alert to analysts in an easy, understandable way.\n\nTo this end, Howler allows analysts and detection engineers to create **templates**, which allow various analytics and their detections to present fields and data relevant to triaging alerts generated by that analytic/detection. For example, let's consider two different alerts, by two different detections:\n\n```json\n$ALERT_1\n```\n\n```json\n$ALERT_2\n```\n\nNote that while both share some similar fields, they also differ. We want each of these alert cards to present different data - for that, we can use templates. This allows us to show both hits in the same list, but with differing fields displayed:\n\n===SPLIT===\n\nAs we can see, by specifying a template for each of the detections, different data will be presented to the analyst. To do so, you can use the template creator [here]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNote that you must have ingested some hits for the given analytic/detection pair for it to show as an option in the template creation UI!\n```\n"
+export default "# Howler Templates\n\nHowler is, fundamentally, an application that allows analysts to triage hits and alerts. In order to make sure analysts can do this as efficiently as possible, we want to have the ability to present relevant data for a given alert to analysts in an easy, understandable way.\n\nTo this end, Howler allows analysts and detection engineers to create **templates**, which allow various analytics and their detections to present fields and data relevant to triaging alerts generated by that analytic/detection. For example, let's consider two different alerts, by two different detections:\n\n```json[hideSearch=true]\n$ALERT_1\n```\n\n---\n\n```json[hideSearch=true]\n$ALERT_2\n```\n\nNote that while both share some similar fields, they also differ. We want each of these alert cards to present different data - for that, we can use templates. This allows us to show both hits in the same list, but with differing fields displayed:\n\n===SPLIT===\n\nAs we can see, by specifying a template for each of the detections, different data will be presented to the analyst. To do so, you can use the template creator [here]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNote that you must have ingested some hits for the given analytic/detection pair for it to show as an option in the template creation UI!\n```\n"

package/locales/en/translation.json

@@ -212,6 +212,8 @@
     "hit.notebook.select": "Please Select a notebook",
     "hit.notebook.tooltip": "Open in Jupyterhub",
     "hit.open": "Open Hit",
+    "hit.outline.add_filter": "Add filter",
+    "hit.outline.copy": "Copy value",
     "hit.overview.missing": "No overview has been created for this hit. In order to create an overview, press the add button to the right.",
     "hit.panel.aggregation.run": "Create Summary",
     "hit.panel.bundles.open": "Parent Bundles",

package/locales/fr/translation.json

@@ -212,6 +212,8 @@
     "hit.notebook.select": "Veuillez sélectionner un notebook",
     "hit.notebook.tooltip": "Ouvrir dans Jupyterhub",
     "hit.open": "Ouvrir hit",
+    "hit.outline.add_filter": "Ajouter un filtre",
+    "hit.outline.copy": "Copier la valeur",
     "hit.overview.missing": "Aucune vue d'ensemble n'a été créée pour ce hit. Pour créer une vue d'ensemble, cliquez sur le bouton pour ajouter à droite.",
     "hit.panel.aggregation.run": "Créer un sommaire",
     "hit.panel.bundles.open": "Groupes parentaux",

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1424",
+  "version": "3.1.0-dev.1426",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -229,11 +229,9 @@
     "./components/elements/addons/layout/vsbox/*": "./components/elements/addons/layout/vsbox/*.js",
     "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
     "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
-    "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
     "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
     "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
     "./components/elements/hit/grid/*": "./components/elements/hit/grid/*.js",
-    "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
     "./components/app/hooks/*": "./components/app/hooks/*.js",
     "./components/app/providers/*": "./components/app/providers/*.js",
     "./components/app/drawers/*": "./components/app/drawers/*.js",

package/components/elements/hit/outlines/DefaultOutline.d.ts

@@ -1,12 +0,0 @@
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import React from 'react';
-import { HitLayout } from '../HitLayout';
-declare const _default: React.NamedExoticComponent<{
-    hit: Hit;
-    fields: string[];
-    template?: Template;
-    layout?: HitLayout;
-    readonly?: boolean;
-}>;
-export default _default;

package/components/elements/hit/outlines/DefaultOutline.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Info, Language, Lock, Person } from '@mui/icons-material';
-import { Box, IconButton, Tooltip, Typography } from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
-import { get, isObject } from 'lodash-es';
-import React, { memo, useCallback, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { HitLayout } from '../HitLayout';
-const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, readonly = false }) => {
-    const { t } = useTranslation();
-    const { config } = useContext(ApiConfigContext);
-    const navigate = useNavigate();
-    const handleOpen = useCallback((event) => {
-        event.stopPropagation();
-        const params = {
-            analytic: hit.howler.analytic,
-            type: template?.type ?? 'personal'
-        };
-        if (template?.detection) {
-            params.detection = template.detection;
-        }
-        else if (!template && hit.howler.detection) {
-            params.detection = hit.howler.detection;
-        }
-        navigate('/templates/view?' +
-            Object.entries(params)
-                .map(([key, val]) => `${key}=${val}`)
-                .join('&'));
-    }, [hit.howler.analytic, hit.howler.detection, navigate, template]);
-    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 1, sx: { position: 'relative' }, children: [_jsx(IconButton, { size: "small", sx: { position: 'absolute', right: 0, top: 0 }, onClick: handleOpen, children: readonly ? ( // Built in template
-                _jsx(Tooltip, { title: t('route.templates.builtin'), children: _jsx(Lock, { fontSize: "small" }) })) : !template ? ( // No type specified => using the default
-                _jsx(Tooltip, { title: t('route.templates.default'), children: _jsx(Info, { fontSize: "small" }) })) : template.type === 'global' ? ( // Type is global => global template
-                _jsx(Tooltip, { title: t('route.templates.global'), children: _jsx(Language, { fontSize: "small" }) })) : (_jsx(Tooltip, { title: t('route.templates.personal'), children: _jsx(Person, { fontSize: "small" }) })) }), (fields ?? [])
-                .map(field => [field, get(hit, field)])
-                .map(([field, data]) => {
-                const displayedData = (Array.isArray(data) ? data.join(', ') : isObject(data) ? JSON.stringify(data) : data)?.toString();
-                if (!displayedData) {
-                    return null;
-                }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
-            })] }));
-};
-export default memo(DefaultOutline);

package/components/elements/hit/outlines/al/AssemblyLineRules.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;

package/components/elements/hit/outlines/al/AssemblyLineRules.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lock } from '@mui/icons-material';
-import { Chip, Grid, Stack, Tooltip, Typography } from '@mui/material';
-import { get } from 'lodash-es';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-const TAGS = [
-    'assemblyline.antivirus',
-    'assemblyline.behaviour',
-    'assemblyline.heuristic',
-    'assemblyline.yara',
-    'assemblyline.attribution',
-    'assemblyline.mitre.tactic',
-    'assemblyline.mitre.technique'
-];
-const VERDICT_COLORS = {
-    malicious: 'error',
-    suspicious: 'warning',
-    info: 'info',
-    safe: 'primary'
-};
-const VERDICT_ORDER = ['malicious', 'suspicious', 'safe', 'info'];
-const ARRAY_LIMIT = 10;
-const sortByVerdict = (a, b) => {
-    return VERDICT_ORDER.indexOf(a.verdict) > VERDICT_ORDER.indexOf(b.verdict)
-        ? 1
-        : VERDICT_ORDER.indexOf(b.verdict) > VERDICT_ORDER.indexOf(a.verdict)
-            ? -1
-            : 0;
-};
-const AssemblyLineRules = ({ hit }) => {
-    const { t } = useTranslation();
-    const ipArr = (hit.related.ip ?? []).filter(e => !!e).slice(0, ARRAY_LIMIT);
-    const tagsArr = TAGS.map(each => get(hit, each))
-        .filter(tag => !!tag?.value)
-        .sort(sortByVerdict)
-        .slice(0, ARRAY_LIMIT);
-    return (_jsxs(Grid, { container: true, direction: "row", justifyContent: "center", sx: { position: 'relative' }, children: [_jsx(Tooltip, { title: t('route.templates.builtin'), children: _jsx(Lock, { fontSize: "small", sx: { position: 'absolute', right: 0, top: 0 } }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.file_path'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(Typography, { variant: "caption", children: hit.file.path ?? t('unknown') }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.last_modified'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Typography, { variant: "caption", children: [hit.cbs?.sharepoint?.modified?.user ?? t('unknown'), " ", t('using'), ' ', hit.cbs?.sharepoint?.modified?.application ?? t('unknown'), " ", t('on'), " ", hit.file?.mtime ?? t('unknown')] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.beacons'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Stack, { direction: "row", spacing: 0.5, sx: { mb: 0.5 }, children: [ipArr.map(analytic => {
-                            return (_jsx(Grid, { item: true, children: _jsx(Chip, { label: analytic, variant: "outlined", size: "small" }) }, analytic));
-                        }), ipArr.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t('none'), variant: "outlined", size: "small" }) }))] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.tags'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Stack, { direction: "row", spacing: 0.5, sx: { mb: 0.5 }, children: [tagsArr.map(analytic => {
-                            return (_jsx(Grid, { item: true, children: _jsx(Chip, { label: analytic?.value, color: analytic?.verdict in VERDICT_COLORS
-                                        ? VERDICT_COLORS[analytic?.verdict]
-                                        : 'error', variant: "outlined", size: "small" }) }, analytic?.value + analytic?.verdict + analytic?.type + analytic?.subtype));
-                        }), tagsArr.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t('none'), variant: "outlined", size: "small" }) }))] }) })] }));
-};
-export default memo(AssemblyLineRules);