@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactJson, {} from '@microlink/react-json-view';
 import { Clear } from '@mui/icons-material';
 import { IconButton, Skeleton, Stack } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppTheme } from '@tui/core';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -15,7 +15,7 @@ const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     const { t } = useTranslation();
     const { isDark } = useAppTheme();
     const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
-    const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON);
+    const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
     const [query, setQuery] = useState('');
     const [result, setResult] = useState(null);
     const throttler = useMemo(() => new Throttler(150), []);

package/components/elements/display/markdownPlugins/tabs.js

@@ -1,3 +1,4 @@
+import { isNil } from 'lodash-es';
 import { visit } from 'unist-util-visit';
 //this plugins aims to bring docusaurus tabs functionality to base react-markdown.
 //will expose a code tabs elements which can be later rendered with a custom component
@@ -27,6 +28,9 @@ const findTabs = (index, parent) => {
 export const codeTabs = () => {
     return (tree, file) => {
         visit(tree, 'code', (node, index, parent) => {
+            if (isNil(index) || !parent) {
+                return;
+            }
             const metaString = `${node.lang ?? ''} ${node.meta ?? ''}`.trim();
             if (!metaString) {
                 return;

package/components/elements/display/modals/CreateActionModal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseEvent } from '@tui/core';
 import { Button, Stack, TextField, Typography } from '@mui/material';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useContext, useState } from 'react';

package/components/elements/display/modals/RationaleModal.js

@@ -1,8 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseEvent, useAppUser } from '@tui/core';
 import { Autocomplete, Button, CircularProgress, ListItemText, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';

package/components/elements/display/modals/RationaleModal.test.js

@@ -9,11 +9,15 @@ import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import RationaleModal from './RationaleModal';
 vi.mock('api', { spy: true });
-vi.mock('commons/components/app/hooks/useAppUser', () => ({
-    useAppUser: () => ({
-        user: { username: 'test-user' }
-    })
-}));
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        useAppUser: () => ({
+            user: { username: 'test-user' }
+        })
+    };
+});
 // Mock functions
 let mockGetMatchingAnalytic = vi.fn();
 let mockOnSubmit = vi.fn();

package/components/elements/event/EventPreview.js

@@ -3,7 +3,7 @@ import { OpenInNew } from '@mui/icons-material';
 import { Chip, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const EventPreview = ({ event }) => {
     const { t } = useTranslation();
     const theme = useTheme();

package/components/elements/hit/HitActions.js

@@ -95,12 +95,10 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     ]);
     const keyboardDownHandler = useCallback((event) => {
         THROTTLER.debounce(() => {
-            const currentElement = document.activeElement.tagName;
-            if (shortcuts !== HitShortcuts.NO_SHORTCUTS &&
-                event.key.toUpperCase() in actions &&
-                !event.ctrlKey &&
-                currentElement !== 'INPUT') {
-                actions[event.key.toUpperCase()]();
+            const currentElement = document.activeElement?.tagName;
+            const matchedAction = actions.find(_action => _action.key === event.key.toUpperCase());
+            if (shortcuts !== HitShortcuts.NO_SHORTCUTS && matchedAction && !event.ctrlKey && currentElement !== 'INPUT') {
+                matchedAction.actionFunction();
             }
         });
     }, [actions, shortcuts]);
@@ -111,7 +109,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
         }
     }, [keyboardDownHandler]);
     useEffect(() => {
-        void getMatchingAnalytic(hit).then(setAnalytic);
+        void getMatchingAnalytic(hit).then(_analytic => setAnalytic(_analytic ?? null));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
     const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);

package/components/elements/hit/HitBanner.js

@@ -6,8 +6,7 @@ import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 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';
-import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+import { getEscalationColor, getProviderColor } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
 import AnalyticLink from './elements/AnalyticLink';
 import Assigned from './elements/Assigned';
@@ -22,12 +21,7 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
     const pluginStore = usePluginStore();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
-    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 providerColor = getProviderColor(hit?.event?.provider);
     /**
      * The tooltips are necessary only when in the most compressed format
      */
@@ -38,14 +32,8 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
                     ], 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 (_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));
+    return (_jsx(Box, { sx: { width: '100%', ml: 0, overflow: 'hidden', color: 'text.primary' }, 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) > 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: getEscalationColor(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, { children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), (hit.howler.outline.indicators?.length ?? 0) > 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, { children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < (hit.howler.outline?.indicators?.length ?? 0) - 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();
                             } }))] }))] }) }));

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+// @ts-nocheck
+import { 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 { isNil } from 'lodash-es';
 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'));
+const getProviderColorMock = vi.hoisted(() => vi.fn(() => '#123456'));
 vi.mock('react-pluggable', async () => {
     const actual = await vi.importActual('react-pluggable');
     return {
@@ -20,7 +22,7 @@ vi.mock('react-pluggable', async () => {
 vi.mock('react-i18next', () => ({
     useTranslation: () => ({
         t: (key, options) => {
-            if (options?.count !== undefined) {
+            if (!isNil(options?.count)) {
                 return `${key}:${options.count}`;
             }
             if (options?.duration) {
@@ -41,7 +43,7 @@ vi.mock('utils/utils', async () => {
     const actual = await vi.importActual('utils/utils');
     return {
         ...actual,
-        stringToColor: stringToColorMock
+        getProviderColor: getProviderColorMock
     };
 });
 vi.mock('./elements/AnalyticLink', () => ({
@@ -106,7 +108,7 @@ describe('HitBanner', () => {
     beforeEach(() => {
         howlerPluginStore.plugins.splice(0, howlerPluginStore.plugins.length);
         executeFunctionMock.mockReset();
-        stringToColorMock.mockClear();
+        getProviderColorMock.mockClear();
     });
     afterEach(() => {
         howlerPluginStore.plugins.splice(0, howlerPluginStore.plugins.length);
@@ -144,16 +146,16 @@ describe('HitBanner', () => {
         renderHitBanner({ hit: withRelated });
         expect(screen.getByTestId('related-records')).toBeInTheDocument();
     });
-    it('uses stringToColor for unknown providers and skips it for known providers', () => {
+    it('uses getProviderColor for unknown and 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();
+        expect(getProviderColorMock).toHaveBeenCalledWith('custom-provider');
+        getProviderColorMock.mockClear();
         const knownProviderHit = createBannerHit({ event: { provider: 'howler', created: '2024-01-01T00:00:00Z' } });
         renderHitBanner({ hit: knownProviderHit });
-        expect(stringToColorMock).not.toHaveBeenCalled();
+        expect(getProviderColorMock).toHaveBeenCalledWith('howler');
     });
     it('renders plugin status sections from plugin hooks', () => {
         howlerPluginStore.plugins.push('demo-plugin');
@@ -168,17 +170,6 @@ describe('HitBanner', () => {
         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();

package/components/elements/hit/HitLabels.js

@@ -23,7 +23,7 @@ const NewLabelForm = ({ handleSubmit }) => {
                 setLabel('');
             }
             catch (e) {
-                setError(e.message);
+                setError(e instanceof Error ? e.message : String(e));
             }
         }
     };
@@ -61,6 +61,9 @@ const HitLabels = ({ hit, readOnly = false }) => {
         setLoading(true);
         try {
             const updatedHit = await dispatchApi(api.hit.labels.put(hit.howler.id, label.category, { value: [label.label] }));
+            if (!updatedHit) {
+                return;
+            }
             updateHit(updatedHit);
         }
         finally {
@@ -72,6 +75,9 @@ const HitLabels = ({ hit, readOnly = false }) => {
         setLoading(true);
         try {
             const updatedHit = await dispatchApi(api.hit.labels.del(hit.howler.id, label.category, { value: [label.label] }));
+            if (!updatedHit) {
+                return;
+            }
             updateHit(updatedHit);
         }
         finally {
@@ -96,12 +102,14 @@ const HitLabels = ({ hit, readOnly = false }) => {
                                                     mr: 1,
                                                     mb: 1
                                                 },
-                                                LABEL_TYPES[category]?.color && {
-                                                    '&, & svg': {
-                                                        color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
-                                                    },
-                                                    backgroundColor: LABEL_TYPES[category].color
-                                                }
+                                                LABEL_TYPES[category]?.color
+                                                    ? {
+                                                        '&, & svg': {
+                                                            color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                                        },
+                                                        backgroundColor: LABEL_TYPES[category].color
+                                                    }
+                                                    : {}
                                             ] }, label.label + hit.howler.id) }, label.label + hit.howler.id));
                                 }) }), _jsx(NewLabelForm, { handleSubmit: submitLabel })] })] }), labels.map(label => {
                 const category = label.category.toLowerCase();
@@ -109,12 +117,14 @@ const HitLabels = ({ hit, readOnly = false }) => {
                             {
                                 mr: 1
                             },
-                            LABEL_TYPES[category]?.color && {
-                                '&, & svg': {
-                                    color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
-                                },
-                                backgroundColor: LABEL_TYPES[category].color
-                            }
+                            LABEL_TYPES[category]?.color
+                                ? {
+                                    '&, & svg': {
+                                        color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                    },
+                                    backgroundColor: LABEL_TYPES[category].color
+                                }
+                                : {}
                         ] }, label.category + label.label + hit.howler.id) }, label.category + label.label + hit.howler.id));
             }), !readOnly && (_jsx(Button, { onClick: () => setOpenDrawer(true), startIcon: _jsx(Edit, {}), variant: "outlined", size: "small", children: _jsx(Trans, { i18nKey: "hit.label" }) }))] }));
 };

package/components/elements/hit/HitLinks.js

@@ -25,13 +25,13 @@ const HitLinks = ({ hit, analytic, dossiers = [] }) => {
     if (displayLinks.length === 0 && displayPivots.length === 0 && !hasNotebooks) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.item}`]: { display: 'flex' } }, children: [displayLinks
+    return (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.root}`]: { display: 'flex' } }, children: [displayLinks
                 .filter(link => !!link.href)
                 .map(link => {
                 const safeTitle = link.title ?? link.href;
-                return (_jsx(Grid, { item: true, children: _jsx(RelatedLink, { compact: true, title: safeTitle, href: link.href, target: "_blank", rel: "noopener noreferrer" }) }, link.href));
+                return (_jsx(Grid, { children: _jsx(RelatedLink, { compact: true, title: safeTitle, href: link.href, target: "_blank", rel: "noopener noreferrer" }) }, link.href));
             }), displayPivots.map(({ pivot, dossier, resolvedUrl }) => {
-                return (_jsx(Grid, { item: true, children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, resolvedUrl: resolvedUrl, compact: true }) }, `${dossier.dossier_id}-${pivot.value}`));
-            }), hasNotebooks && (_jsx(Grid, { item: true, children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] }));
+                return (_jsx(Grid, { children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, resolvedUrl: resolvedUrl, compact: true }) }, `${dossier.dossier_id}-${pivot.value}`));
+            }), hasNotebooks && (_jsx(Grid, { children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] }));
 };
 export default HitLinks;

package/components/elements/hit/HitNotebooks.js

@@ -40,13 +40,18 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
         setOpen(prev => !prev);
     };
     const goToJupyhub = useCallback(async (filename, url) => {
+        const environment = envs[0];
+        if (!environment) {
+            showErrorMessage(t('hit.notebook.error.failToPost'));
+            return;
+        }
         try {
             await fetch(url, {
                 ...FETCH_OPTIONS,
                 method: 'post',
                 body: `{"type":"notebook","content":${JSON.stringify(loadedNotebook.nb_content)}}`
             });
-            window.open(`${envs[0].url}lab/tree/${filename}`, '_blank');
+            window.open(`${environment.url}lab/tree/${filename}`, '_blank');
             setOpen(false);
         }
         catch {
@@ -54,24 +59,28 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
         }
     }, [envs, loadedNotebook, showErrorMessage, t]);
     const checkJupyhub = useCallback(async () => {
+        const environment = envs[0];
+        if (!environment) {
+            return;
+        }
         setLoading(true);
         const nbFileName = hit ? `${loadedNotebook.name} - ${hit.howler.id}.ipynb` : `${loadedNotebook.name}.ipynb`;
         //using fetch since we are going directly to jupyterhub
         try {
-            const response = await fetch(`${envs[0].url}api/contents/${nbFileName}`, FETCH_OPTIONS);
+            const response = await fetch(`${environment.url}api/contents/${nbFileName}`, FETCH_OPTIONS);
             if (response.status < 300) {
                 // if it exists, we need to ask for overwrite
                 showModal(_jsx(ConfirmNotebookModal, { onConfirm: () => {
-                        void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                        void goToJupyhub(nbFileName, `${environment.url}post/${nbFileName}`);
                     } }));
             }
             else {
-                void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                void goToJupyhub(nbFileName, `${environment.url}post/${nbFileName}`);
             }
         }
         catch {
             // error means notebook doesn't exist, we can proceed with posting
-            void goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+            void goToJupyhub(nbFileName, `${environment.url}post/${nbFileName}`);
         }
         setLoading(false);
     }, [envs, goToJupyhub, hit, loadedNotebook, showModal]);
@@ -79,7 +88,7 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
         setLoading(true);
         try {
             const jhEnvs = await dispatchApi(api.notebook.environments.get(), { showError: true, throwError: false });
-            setEnvs(jhEnvs.envs.map(env => ({ ...env, url: env.url.endsWith('/') ? env.url : env.url + '/' })));
+            setEnvs((jhEnvs?.envs ?? []).map(env => ({ ...env, url: env.url.endsWith('/') ? env.url : env.url + '/' })));
         }
         finally {
             setLoading(false);
@@ -87,17 +96,24 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
     }, [dispatchApi]);
     // retrieve notebook json from howler-api/nbgallery
     const fetchNb = useCallback(async (link) => {
+        const notebookLink = link ?? analytic.notebooks?.find(notebook => notebook.name === selectedNotebook)?.value;
+        if (!notebookLink) {
+            setLoadedNotebook({ nb_content: null, name: '' });
+            return;
+        }
         setLoading(true);
         try {
             const notebookResponse = await dispatchApi(api.notebook.post({
-                link: link ?? analytic?.notebooks.find(n => n.name === selectedNotebook).value,
+                link: notebookLink,
                 analytic: analytic,
                 ...(hit ? { hit: hit } : {})
             }), {
                 showError: true,
                 throwError: false
             });
-            setLoadedNotebook(notebookResponse);
+            if (notebookResponse) {
+                setLoadedNotebook(notebookResponse);
+            }
         }
         finally {
             setLoading(false);
@@ -118,14 +134,16 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    return (config.configuration.features.notebook &&
+    return (config.configuration?.features.notebook &&
         analytic?.notebooks && (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), mouseEvent: 'onMouseUp', children: _jsxs("div", { children: [_jsx(Popper, { open: open, anchorEl: anchorEl, placement: 'bottom', transition: true, sx: { zIndex: 1499 }, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 350, children: _jsxs(Paper, { sx: { maxWidth: '90%', width: '400px', p: 1, position: 'relative' }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(Stack, { direction: "column", children: _jsx("div", { style: { textAlign: 'center' }, children: _jsx(CircularProgress, { color: "inherit" }) }) }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 1 }, children: [_jsxs(TextField, { disabled: !!selectedNotebook, label: "Notebook", select: true, onChange: e => {
                                                 void fetchNb(e.target.value);
                                             }, SelectProps: {
                                                 MenuProps: {
                                                     style: { zIndex: 35001 }
                                                 }
-                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(Tooltip, { title: _jsx(NotebookTooltip, {}), children: _jsx("span", { children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
+                                            }, defaultValue: selectedNotebook
+                                                ? (analytic.notebooks?.find(n => n.name === selectedNotebook)?.value ?? '')
+                                                : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), [...(analytic.notebooks ?? [])].sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(Tooltip, { title: _jsx(NotebookTooltip, {}), children: _jsx("span", { children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
                                 theme => ({
                                     cursor: 'pointer',
                                     backgroundColor: 'transparent',

package/components/elements/hit/HitOutline.js

@@ -6,38 +6,32 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 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 { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 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 { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { getProviderColor, notNil } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
 import { HitLayout } from './HitLayout';
 export const DEFAULT_FIELDS = ['event.created', 'howler.id', 'howler.hash'];
 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 HitOutline = ({ hit, layout, lazy = false, forceAllFields = false, template: providedTemplate }) => {
     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);
-    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 [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT);
+    const [template, setTemplate] = useState();
+    const providerColor = getProviderColor(hit?.event?.provider);
     const fields = useMemo(() => {
         const keys = template?.keys;
         if (!keys?.length) {
             return DEFAULT_FIELDS;
         }
-        if (!isNil(templateFieldCount) && !forceAllFields) {
+        if (notNil(templateFieldCount) && !forceAllFields) {
             return keys.slice(0, templateFieldCount);
         }
         return keys;
@@ -73,7 +67,7 @@ const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false, templat
                         '&: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 => {
+                    }, 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);

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

@@ -1,7 +1,7 @@
 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 { BrowserRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 import { HitLayout } from './HitLayout';
 import HitOutline from './HitOutline';
@@ -31,13 +31,13 @@ vi.mock('react-i18next', () => ({
 vi.mock('use-context-selector', () => ({
     useContextSelector: (_context, selector) => selector({ addFilter })
 }));
+vi.mock('utils/utils', () => ({
+    getProviderColor: (_provider) => '#000000',
+    notNil: (value) => value !== null && value !== undefined
+}));
 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();

package/components/elements/hit/HitOverview.js

@@ -4,19 +4,19 @@ import { Box, IconButton, Skeleton } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
 import { memo, useEffect, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
 const HitOverview = ({ content, hit }) => {
     const { getMatchingOverview } = useMatchers();
     const [matchingOverview, setMatchingOverview] = useState(null);
     useEffect(() => {
-        void getMatchingOverview(hit).then(setMatchingOverview);
+        void getMatchingOverview(hit).then(_overview => setMatchingOverview(_overview ?? null));
     }, [getMatchingOverview, hit]);
     const link = useMemo(() => matchingOverview
         ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
         : hit
             ? `/overviews/view?analytic=${encodeURIComponent(hit?.howler.analytic)}${hit?.howler.detection && '&detection=' + encodeURIComponent(hit?.howler.detection)}`
             : null, [hit, matchingOverview]);
-    return (_jsxs(Box, { className: "no-margin-first-child", sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" })), link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) }))] }));
+    return (_jsxs(Box, { className: "no-margin-first-child", sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [content || matchingOverview?.content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: (content || matchingOverview?.content), object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" })), link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) }))] }));
 };
 export default memo(HitOverview);

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

@@ -1,4 +1,4 @@
-import type { AppSearchItemRendererOption } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
+import type { AppSearchItemRendererOption } from '@tui/core';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 type PreviewProps = {
     hit: Hit;

package/components/elements/hit/HitPreview.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Chip, Divider, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { ESCALATION_COLORS, PROVIDER_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
-import { formatDate, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+import { formatDate, getEscalationColor, getProviderColor, getStatusColor } from '@cccsaurora/howler-ui/utils/utils';
 const HitPreview = ({ hit, options }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
-    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
+    const providerColor = getProviderColor(hit?.event?.provider);
     return (_jsxs(Box, { sx: {
             overflow: 'hidden',
             borderBottom: `thin solid ${theme.palette.divider}`,
@@ -23,15 +22,15 @@ const HitPreview = ({ hit, options }) => {
                                     color: theme.palette.getContrastText(theme.palette.background.paper)
                                 }
                             }
-                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] })] }) }))] }), _jsxs(Stack, { alignItems: options?.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options?.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options?.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
+                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: (hit.howler.outline.indicators ?? []).join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] })] }) }))] }), _jsxs(Stack, { alignItems: options?.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options?.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options?.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
                                     backgroundColor: providerColor,
                                     color: theme.palette.getContrastText(providerColor)
-                                }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }), size: "small" }), _jsx(Chip, { label: hit.howler.escalation, size: "small", color: ESCALATION_COLORS[hit.howler.escalation] })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Chip, { sx: {
+                                }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }), size: "small" }), _jsx(Chip, { label: hit.howler.escalation, size: "small", color: getEscalationColor(hit.howler.escalation) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Chip, { sx: {
                                     '& .MuiChip-icon': {
                                         marginLeft: 0
                                     }
                                 }, label: hit?.howler.assignment !== 'unassigned'
                                     ? hit?.howler.assignment
-                                    : t('app.drawer.hit.assignment.unassigned.name'), size: "small" }), _jsx(Chip, { label: hit.howler.status, size: "small", color: STATUS_COLORS[hit.howler.status] })] })] })] }));
+                                    : t('app.drawer.hit.assignment.unassigned.name'), size: "small" }), _jsx(Chip, { label: hit.howler.status, size: "small", color: getStatusColor(hit.howler.status) })] })] })] }));
 };
 export default memo(HitPreview);