@cccsaurora/howler-ui 2.13.0-dev.77 → 2.13.0

package/components/app/providers/HitSearchProvider.d.ts

@@ -1,6 +1,7 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { type Dispatch, type FC, type PropsWithChildren, type SetStateAction } from 'react';
 export interface QueryEntry {
     [query: string]: string;
@@ -10,7 +11,7 @@ interface HitSearchProviderType {
     displayType: 'list' | 'grid';
     searching: boolean;
     error: string | null;
-    response: HowlerSearchResponse<Hit> | null;
+    response: HowlerSearchResponse<WithMetadata<Hit>> | null;
     viewId: string | null;
     bundleId: string | null;
     queryHistory: QueryEntry;

package/components/app/providers/HitSearchProvider.js

@@ -86,7 +86,8 @@ const HitSearchProvider = ({ children }) => {
                     query: fullQuery,
                     sort,
                     filters,
-                    track_total_hits: trackTotalHits
+                    track_total_hits: trackTotalHits,
+                    metadata: ['template', 'overview', 'analytic']
                 }), { showError: false, throwError: true });
                 if (_response.total < offset) {
                     setOffset(0);

package/components/app/providers/SocketProvider.js

@@ -121,7 +121,7 @@ const SocketProvider = ({ children }) => {
         setRetry(false);
         // Here we go!
         setStatus(Status.CONNECTING);
-        const host = window.location.host;
+        const host = window.location.host.includes('localhost') ? 'localhost:5000' : window.location.host;
         const protocol = window.location.protocol.startsWith('http:') ? 'ws' : 'wss';
         const ws = new WebSocket(`${protocol}://${host}/socket/v1/connect`);
         // Add our listeners to the websocket

package/components/app/providers/ViewProvider.d.ts

@@ -10,7 +10,7 @@ export interface ViewContextType {
     removeFavourite: (id: string) => Promise<void>;
     fetchViews: (ids?: string[]) => Promise<View[]>;
     addView: (v: View) => Promise<View>;
-    editView: (id: string, title: string, query: string, sort: string, span: string, advanceOnTriage: boolean) => Promise<View>;
+    editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
     removeView: (id: string) => Promise<void>;
     getCurrentView: (lazy?: boolean) => Promise<View>;
 }

package/components/app/providers/ViewProvider.js

@@ -69,11 +69,11 @@ const ViewProvider = ({ children }) => {
         }
         return views[id];
     }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
-    const editView = useCallback(async (id, title, query, sort, span, advanceOnTriage) => {
-        const result = await dispatchApi(api.view.put(id, title, query, sort, span, advanceOnTriage));
+    const editView = useCallback(async (id, partialView) => {
+        const result = await dispatchApi(api.view.put(id, partialView));
         setViews(_views => ({
             ..._views,
-            [id]: { ...(_views[id] ?? {}), title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } }
+            [id]: { ...(_views[id] ?? {}), ...partialView }
         }));
         return result;
     }, [dispatchApi]);

package/components/app/providers/ViewProvider.test.d.ts

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

package/components/app/providers/ViewProvider.test.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { hget, hpost, hput } from '@cccsaurora/howler-ui/api';
+import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
+import { MOCK_RESPONSES } from '@cccsaurora/howler-ui/tests/server-handlers';
+import { useContextSelector } from 'use-context-selector';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import ViewProvider, { ViewContext } from './ViewProvider';
+let mockUser = {
+    favourite_views: ['favourited_view_id']
+};
+vi.mock('@cccsaurora/howler-ui/api', { spy: true });
+vi.mock('react-router-dom', () => ({
+    useLocation: vi.fn(() => ({ pathname: '/views/searched_view_id' })),
+    useParams: vi.fn(() => ({ id: 'searched_view_id' }))
+}));
+vi.mock('@cccsaurora/howler-ui/commons/components/app/hooks', () => ({
+    useAppUser: () => ({
+        user: mockUser,
+        setUser: _user => (mockUser = _user)
+    })
+}));
+const mockLocalStorage = new MockLocalStorage();
+// Replace localStorage in global scope
+Object.defineProperty(window, 'localStorage', {
+    value: mockLocalStorage,
+    writable: true
+});
+const Wrapper = ({ children }) => {
+    return _jsx(ViewProvider, { children: children });
+};
+beforeEach(() => {
+    mockLocalStorage.clear();
+});
+describe('ViewContext', () => {
+    it('should fetch the defaultView on initialization', async () => {
+        mockLocalStorage.setItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.DEFAULT_VIEW}`, JSON.stringify('searched_view_id'));
+        let hook = await act(async () => renderHook(() => useContextSelector(ViewContext, ctx => ctx.views), { wrapper: Wrapper }));
+        await waitFor(() => expect(hook.result.current.searched_view_id).not.toBeFalsy());
+        expect(hook.result.current.searched_view_id).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+    });
+    it('should allow the user to add and remove a favourite view', async () => {
+        const hook = await act(async () => {
+            return renderHook(() => useContextSelector(ViewContext, ctx => ({
+                addFavourite: ctx.addFavourite,
+                removeFavourite: ctx.removeFavourite
+            })), { wrapper: Wrapper });
+        });
+        await hook.result.current.addFavourite('example_view_id');
+        expect(mockUser.favourite_views).toEqual(['favourited_view_id', 'example_view_id']);
+        await hook.result.current.removeFavourite('example_view_id');
+        expect(mockUser.favourite_views).toEqual(['favourited_view_id']);
+    });
+    it('should allow the user to add and remove views', async () => {
+        const hook = await act(async () => {
+            return renderHook(() => useContextSelector(ViewContext, ctx => ({
+                addView: ctx.addView,
+                removeView: ctx.removeView,
+                views: ctx.views
+            })), { wrapper: Wrapper });
+        });
+        const result = await act(async () => hook.result.current.addView({
+            owner: 'user',
+            settings: {
+                advance_on_triage: false
+            },
+            view_id: 'example_created_view',
+            query: 'howler.id:*',
+            sort: 'event.created desc',
+            title: 'Example View',
+            type: 'personal',
+            span: 'date.range.1.month'
+        }));
+        hook.rerender();
+        expect(hook.result.current.views[result.view_id]).toEqual(result);
+        await act(async () => hook.result.current.removeView(result.view_id));
+        hook.rerender();
+        expect(hook.result.current.views[result.view_id]).toBeFalsy();
+    });
+    describe('fetchViews', () => {
+        let hook;
+        beforeEach(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.fetchViews), { wrapper: Wrapper });
+            });
+            vi.mocked(hpost).mockClear();
+            vi.mocked(hget).mockClear();
+        });
+        it('Should fetch all views when no ids are provided', async () => {
+            const result = await act(async () => hook.result.current());
+            expect(result.length).toBe(2);
+            expect(result[0].view_id).toBe('example_view_id');
+            expect(result[1].view_id).toBe('another_view_id');
+        });
+        it('Should search for specified views when ids are provided', async () => {
+            const result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id)', rows: 1 });
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+        });
+        it('Should search only for new views when ids are provided', async () => {
+            await act(async () => hook.result.current(['searched_view_id']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id)', rows: 1 });
+            vi.mocked(hpost).mockClear();
+            await act(async () => hook.result.current(['searched_view_id', 'searched_view_id_2']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id_2)', rows: 1 });
+        });
+        it('Should provide cached instances as a response when the same views are requested', async () => {
+            let result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+            result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+            expect(hpost).toHaveBeenCalledOnce();
+        });
+    });
+    describe('getCurrentView', () => {
+        let hook;
+        beforeAll(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentView), { wrapper: Wrapper });
+            });
+        });
+        it('should allow the user to fetch their current view based on the location', async () => {
+            // lazy load should return nothing
+            await expect(hook.result.current(true)).resolves.toBeFalsy();
+            const result = await act(async () => hook.result.current());
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+        });
+    });
+    describe('editView', () => {
+        let hook;
+        beforeAll(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.editView), { wrapper: Wrapper });
+            });
+        });
+        beforeEach(() => {
+            vi.mocked(hput).mockClear();
+            vi.mocked(hpost).mockClear();
+        });
+        it('should allow users to edit views', async () => {
+            const result = await act(async () => hook.result.current('example_view_id', { query: 'howler.id:*' }));
+            expect(hput).toHaveBeenCalledOnce();
+            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: 'howler.id:*' });
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
+        });
+    });
+});

package/components/elements/display/ActionButton.d.ts

@@ -0,0 +1,8 @@
+import { type ButtonProps } from '@mui/material';
+import { type FC } from 'react';
+declare const ActionButton: FC<{
+    actionId: string;
+    hitId: string;
+    label: string;
+} & ButtonProps>;
+export default ActionButton;

package/components/elements/display/ActionButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const ActionButton = ({ actionId, hitId, label, ...otherProps }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const [action, setAction] = useState(null);
+    useEffect(() => {
+        dispatchApi(api.search.action.post({ query: `action_id:${actionId}`, rows: 1 })).then(result => setAction(result.items[0]));
+    }, [actionId, dispatchApi]);
+    return (_jsx(Button, { variant: otherProps.variant ?? 'outlined', disabled: !action, onClick: () => executeAction(actionId, `howler.id:${hitId}`), color: otherProps.color ?? 'primary', children: label ?? action?.name ?? t('loading') }));
+};
+export default ActionButton;

package/components/elements/display/handlebars/helpers.js

@@ -10,7 +10,9 @@ import { capitalize, get, groupBy, isObject } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { usePluginStore } from 'react-pluggable';
+import ActionButton from '../ActionButton';
 import JSONViewer from '../json/JSONViewer';
+const FETCH_RESULTS = {};
 export const useHelpers = () => {
     const pluginStore = usePluginStore();
     const allHelpers = useMemo(() => [
@@ -55,8 +57,10 @@ export const useHelpers = () => {
             documentation: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
             callback: async (url, key) => {
                 try {
-                    const response = await fetch(url);
-                    const json = await response.json();
+                    if (!FETCH_RESULTS[url]) {
+                        FETCH_RESULTS[url] = fetch(url).then(res => res.json());
+                    }
+                    const json = await FETCH_RESULTS[url];
                     return flatten(json)[key];
                 }
                 catch (e) {
@@ -144,6 +148,17 @@ export const useHelpers = () => {
                                 }) })] }) }));
             }
         },
+        {
+            keyword: 'action',
+            documentation: 'Execute a howler action given a specific action ID (from the URL when viewing the action, i.e. yaIKVqiKhWpyCsWdqsE4D)',
+            componentCallback: (actionId, hitId, context) => {
+                if (!actionId || !hitId) {
+                    console.warn('Missing parameters for the action button.');
+                    return null;
+                }
+                return _jsx(ActionButton, { actionId: actionId, hitId: hitId, ...(context.hash ?? {}) });
+            }
+        },
         ...howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.helpers`))
     ], [pluginStore]);
     return allHelpers;

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

@@ -2,5 +2,7 @@ import { type FC } from 'react';
 declare const JSONViewer: FC<{
     data: object;
     collapse?: boolean;
+    hideSearch?: boolean;
+    filter?: string;
 }>;
 export default JSONViewer;

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

@@ -8,10 +8,11 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 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 }) => {
+const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     const { t } = useTranslation();
     const { isDark } = useAppTheme();
     const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
@@ -21,19 +22,11 @@ const JSONViewer = ({ data, collapse = true }) => {
     useEffect(() => {
         THROTTLER.debounce(() => {
             const filteredData = removeEmpty(data, compact);
-            const searchedData = searchObject(filteredData, query, flat);
+            const searchedData = searchObject(filteredData, filter ?? query, flat);
             setResult(searchedData);
         });
-    }, [compact, data, flat, query]);
-    const hasError = useMemo(() => {
-        try {
-            new RegExp(query);
-            return false;
-        }
-        catch (e) {
-            return true;
-        }
-    }, [query]);
+    }, [compact, data, filter, flat, query]);
+    const hasError = useMemo(() => !validateRegex(filter ?? query), [query, filter]);
     const shouldCollapse = useCallback((field) => {
         return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;
     }, []);
@@ -48,6 +41,6 @@ const JSONViewer = ({ data, collapse = true }) => {
             // Type declaration is wrong - this is a valid prop
             displayArrayKey: !compact
         } })), [collapse, compact, isDark, result, shouldCollapse]);
-    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) }), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
+    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [!hideSearch && (_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) })), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
 };
 export default JSONViewer;

package/components/elements/hit/HitActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreHoriz } from '@mui/icons-material';
 import { Box, CircularProgress, Divider, FormControl, FormControlLabel, FormLabel, IconButton, Menu, Radio, RadioGroup, Stack, Switch, useMediaQuery } from '@mui/material';
-import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
@@ -27,7 +27,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     const { config } = useContext(ApiConfigContext);
     const { values, set } = useMyLocalStorageProvider();
     const pluginStore = usePluginStore();
-    const { getAnalyticFromName } = useContext(AnalyticContext);
+    const { getMatchingAnalytic } = useMatchers();
     const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
@@ -112,11 +112,9 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
         }
     }, [keyboardDownHandler]);
     useEffect(() => {
-        (async () => {
-            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
-        })();
+        getMatchingAnalytic(hit).then(setAnalytic);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit.howler.analytic]);
+    }, [hit?.howler.analytic]);
     const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);
     const handleCloseSetting = useCallback(() => setOpenSetting(null), []);
     const onShortcutChange = useCallback((__, s) => set(StorageKey.HIT_SHORTCUTS, s), [set]);

package/components/elements/hit/HitBanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, iconButtonClasses, useTheme } from '@mui/material';
-import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -19,15 +19,19 @@ import { HitLayout } from './HitLayout';
 const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    const { getIdFromName } = useContext(AnalyticContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
+    const { getMatchingAnalytic } = useMatchers();
     const [analyticId, setAnalyticId] = useState();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
     useEffect(() => {
-        getIdFromName(hit?.howler.analytic).then(setAnalyticId);
-    }, [getIdFromName, hit]);
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic.analytic_id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
     const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
@@ -94,7 +98,11 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+                                    e.stopPropagation();
+                                }, onClick: e => {
+                                    e.stopPropagation();
+                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }] }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },

package/components/elements/hit/HitCard.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardContent, Skeleton } from '@mui/material';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { memo, useEffect } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import HowlerCard from '../display/HowlerCard';
@@ -10,12 +9,8 @@ import HitLabels from './HitLabels';
 import { HitLayout } from './HitLayout';
 import HitOutline from './HitOutline';
 const HitCard = ({ id, layout, readOnly = true }) => {
-    const refresh = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
     useEffect(() => {
         if (!hit) {
             getHit(id);

package/components/elements/hit/HitComments.js

@@ -3,7 +3,7 @@ import { Clear, KeyboardArrowDown, Send } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, AvatarGroup, Chip, IconButton, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -20,8 +20,8 @@ const HitComments = ({ hit, users }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
-    const { getAnalyticFromName } = useContext(AnalyticContext);
     const { addListener, removeListener, emit } = useContext(SocketContext);
+    const { getMatchingAnalytic } = useMatchers();
     const [typers, setTypers] = useState([]);
     const [loading, setLoading] = useState(false);
     const [showClear, setShowClear] = useState(false);
@@ -51,12 +51,13 @@ const HitComments = ({ hit, users }) => {
     }, [handler]);
     useEffect(() => {
         if (hit?.howler?.analytic) {
-            getAnalyticFromName(hit?.howler?.analytic).then(analytic => {
+            getMatchingAnalytic(hit).then(analytic => {
                 setAnalyticId(analytic?.analytic_id);
                 setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
             });
         }
-    }, [getAnalyticFromName, hit?.howler?.analytic]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getMatchingAnalytic, hit?.howler?.analytic]);
     const onSubmit = useCallback(async () => {
         if (!input.current?.value || !hit || input.current.value.length > MAX_LENGTH)
             return;

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

@@ -1,9 +1,9 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { HitLayout } from './HitLayout';
 export declare const DEFAULT_FIELDS: string[];
 declare const _default: import("react").NamedExoticComponent<{
-    hit: Hit;
+    hit: WithMetadata<Hit>;
     layout: HitLayout;
-    type?: "global" | "personal";
 }>;
 export default _default;

package/components/elements/hit/HitOutline.js

@@ -1,30 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Skeleton, Typography } from '@mui/material';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { createElement, memo, useMemo } from 'react';
+import { Box, Divider, Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { createElement, memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
 import { HitLayout } from './HitLayout';
 import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['howler.hash'];
-const HitOutline = ({ hit, layout, type }) => {
+const HitOutline = ({ hit, layout }) => {
     const { t } = useTranslation();
-    const loaded = useContextSelector(TemplateContext, ctx => ctx.loaded);
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
-    const template = useMemo(() => getMatchingTemplate(hit), [getMatchingTemplate, hit]);
+    const { getMatchingTemplate } = useMatchers();
+    const [template, setTemplate] = useState(null);
+    useEffect(() => {
+        getMatchingTemplate(hit).then(setTemplate);
+    }, [getMatchingTemplate, hit]);
     const outline = useMemo(() => {
-        if (template && template.type === type) {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                template,
-                fields: template.keys
-            });
-        }
-        else if (!loaded) {
-            return _jsx(Skeleton, { variant: "rounded", height: "50px" });
-        }
-        else if (template) {
+        if (template) {
             return createElement(DefaultOutline, {
                 hit,
                 layout,
@@ -40,7 +30,7 @@ const HitOutline = ({ hit, layout, type }) => {
                 fields: DEFAULT_FIELDS
             });
         }
-    }, [hit, layout, loaded, template, type]);
+    }, [hit, layout, template]);
     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] }));
 };
 export default memo(HitOutline);

package/components/elements/hit/HitOverview.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InsertLink } from '@mui/icons-material';
 import { Box, IconButton, Skeleton } from '@mui/material';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import { memo, useContext, useMemo } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
 const HitOverview = ({ content, hit }) => {
-    const { getMatchingOverview } = useContext(OverviewContext);
-    const matchingOverview = useMemo(() => (hit ? getMatchingOverview(hit) : null), [getMatchingOverview, hit]);
+    const { getMatchingOverview } = useMatchers();
+    const [matchingOverview, setMatchingOverview] = useState(null);
+    useEffect(() => {
+        getMatchingOverview(hit).then(setMatchingOverview);
+    }, [getMatchingOverview, hit]);
     const link = useMemo(() => matchingOverview
         ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
         : hit

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

@@ -1,8 +1,9 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const _default: import("react").NamedExoticComponent<{
     query: string;
-    response?: HowlerSearchResponse<Hit>;
+    response?: HowlerSearchResponse<WithMetadata<Hit>>;
     execute?: boolean;
     onStart?: () => void;
     onComplete?: () => void;