@cccsaurora/howler-ui 3.1.0-dev.1454 → 3.1.0-dev.1466

package/components/elements/display/Modal.js

@@ -16,7 +16,7 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: has(options, 'height') ? options.height : '100%',
+                height: has(options, 'height') ? options.height : 'auto',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import type { FC, MouseEventHandler } from 'react';
 declare const ConfirmDeleteModal: FC<{
-    onConfirm: () => void;
+    onConfirm: MouseEventHandler<HTMLButtonElement> | (() => void);
     title?: string;
     description?: string;
     preferDelete?: boolean;

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

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 const ConfirmDeleteModal = ({ onConfirm, title, description, preferDelete, preferCancel }) => {
     const { t } = useTranslation();
     const { close } = useContext(ModalContext);
-    const handleConfirm = useCallback(() => {
-        onConfirm();
+    const handleConfirm = useCallback((e) => {
+        onConfirm(e);
         close();
     }, [close, onConfirm]);
     const modalTitle = title ?? t('modal.confirm.delete.title');

package/components/routes/hits/search/InformationPane.js

@@ -46,7 +46,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const { emit, open } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
-    const pluginStore = usePluginStore();
+    const { executeFunction } = usePluginStore();
     const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
@@ -59,9 +59,14 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
     const users = useMyUserList(userIds);
     const record = useContextSelector(RecordContext, ctx => ctx.records[selected]);
-    howlerPluginStore.plugins.forEach(plugin => {
-        pluginStore.executeFunction(`${plugin}.on`, 'viewing');
-    });
+    useEffect(() => {
+        if (!selected) {
+            return;
+        }
+        howlerPluginStore.plugins.forEach(plugin => {
+            executeFunction(`${plugin}.on`, 'viewing');
+        });
+    }, [executeFunction, selected]);
     useEffect(() => {
         if (!selected) {
             return;

package/components/routes/hits/search/SearchPane.js

@@ -86,6 +86,7 @@ const SearchPane = () => {
     const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
     const { onClick } = useRecordSelection();
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
         const target = event.target;
@@ -102,6 +103,6 @@ const SearchPane = () => {
                                                     bottom: 0,
                                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                                     borderBottomRightRadius: theme.shape.borderRadius
-                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
+                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: pageCount, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
 };
 export default memo(SearchPane);

package/components/routes/hits/view/HitViewer.js

@@ -5,6 +5,7 @@ import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Ta
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
@@ -22,8 +23,10 @@ import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/Reco
 import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -43,6 +46,8 @@ const HitViewer = () => {
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+    const { emit, open } = useContext(SocketContext);
+    const { executeFunction } = usePluginStore();
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -62,7 +67,7 @@ const HitViewer = () => {
         }
         catch (err) {
             if (err.cause?.api_status_code === 404) {
-                navigate('/404');
+                void navigate('/404');
             }
         }
     }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
@@ -71,9 +76,34 @@ const HitViewer = () => {
             setOrientation(Orientation.HORIZONTAL);
         }
     }, [isUnderLg, setOrientation]);
+    useEffect(() => {
+        if (!hit) {
+            return;
+        }
+        howlerPluginStore.plugins.forEach(plugin => {
+            executeFunction(`${plugin}.on`, 'viewing');
+        });
+    }, [executeFunction, hit]);
     useEffect(() => {
         void fetchData();
     }, [params.id, fetchData, hit]);
+    useEffect(() => {
+        if (!params.id || !open) {
+            return;
+        }
+        emit({
+            broadcast: false,
+            action: 'viewing',
+            id: params.id
+        });
+        return () => {
+            emit({
+                broadcast: false,
+                action: 'stop_viewing',
+                id: params.id
+            });
+        };
+    }, [emit, params.id, open]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
         void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));

package/components/routes/hits/view/HitViewer.test.d.ts

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

package/components/routes/hits/view/HitViewer.test.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockExecutePlugin = vi.hoisted(() => vi.fn());
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockParams = vi.hoisted(() => ({ id: 'hit-1' }));
+const mockGetHit = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingDossiers = vi.hoisted(() => vi.fn().mockResolvedValue([]));
+const mockGetMatchingOverview = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetOrientation = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('plugins/store', () => ({
+    default: {
+        plugins: ['test-plugin']
+    }
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecutePlugin })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key,
+        i18n: { language: 'en' }
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: () => mockNavigate,
+        useParams: () => mockParams
+    };
+});
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({
+        getMatchingAnalytic: mockGetMatchingAnalytic,
+        getMatchingDossiers: mockGetMatchingDossiers,
+        getMatchingOverview: mockGetMatchingOverview
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [Orientation.VERTICAL, mockSetOrientation]
+}));
+vi.mock('components/hooks/useMyUserList', () => ({
+    default: () => []
+}));
+vi.mock('utils/recordFunctions', () => ({
+    getUserList: () => new Set(['analyst'])
+}));
+vi.mock('utils/utils', () => ({
+    tryParse: (value) => `parsed:${value}`
+}));
+vi.mock('components/elements/hit/HitActions', () => ({
+    default: ({ orientation }) => _jsxs("div", { children: ["actions:", orientation] })
+}));
+vi.mock('components/elements/display/icons/SocketBadge', () => ({
+    default: () => null
+}));
+vi.mock('components/elements/hit/HitBanner', () => ({
+    default: () => _jsx("div", { children: "banner" })
+}));
+vi.mock('components/elements/hit/HitOutline', () => ({
+    default: () => _jsx("div", { children: "outline" })
+}));
+vi.mock('components/elements/hit/HitLabels', () => ({
+    default: () => _jsx("div", { children: "labels" })
+}));
+vi.mock('components/elements/hit/HitLinks', () => ({
+    default: ({ analytic, dossiers }) => (_jsxs("div", { children: ["links:", analytic?.analytic_id, ":", dossiers.length] }))
+}));
+vi.mock('components/elements/hit/HitOverview', () => ({
+    default: () => _jsx("div", { children: "overview-content" })
+}));
+vi.mock('components/elements/ObjectDetails', () => ({
+    default: () => _jsx("div", { children: "details-content" })
+}));
+vi.mock('components/elements/display/json/JSONViewer', () => ({
+    default: ({ data }) => _jsx("div", { id: "json-content", children: JSON.stringify(data) })
+}));
+vi.mock('components/elements/record/RecordComments', () => ({
+    default: () => _jsx("div", { children: "comments-content" })
+}));
+vi.mock('components/elements/record/RecordWorklog', () => ({
+    default: () => _jsx("div", { children: "worklog-content" })
+}));
+vi.mock('components/elements/record/RecordRelated', () => ({
+    default: () => _jsx("div", { children: "related-content" })
+}));
+vi.mock('./LeadRenderer', () => ({
+    default: ({ lead }) => _jsxs("div", { children: ["lead-content:", lead.label.en] })
+}));
+import HitViewer, { Orientation } from './HitViewer';
+const hit = {
+    __index: 'hit',
+    timestamp: '2026-01-01T00:00:00Z',
+    howler: {
+        id: 'hit-1',
+        analytic: 'analytic-1',
+        assignment: 'analyst',
+        hash: 'hash-1',
+        data: ['{"source":"data"}'],
+        dossier: [
+            {
+                label: { en: 'Local lead', fr: 'Piste locale' },
+                format: 'markdown',
+                content: 'local'
+            }
+        ],
+        comment: [{}]
+    }
+};
+const recordContextValue = {
+    records: { 'hit-1': hit },
+    getRecord: mockGetHit
+};
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {},
+            fetchViewers: vi.fn()
+        }, children: _jsx(RecordContext.Provider, { value: recordContextValue, children: children }) }));
+    return Wrapper;
+};
+const renderViewer = () => render(_jsx(HitViewer, {}), { wrapper: createWrapper() });
+beforeEach(() => {
+    mockEmit.mockReset();
+    mockExecutePlugin.mockReset();
+    mockOpen.current = true;
+    mockParams.id = 'hit-1';
+    mockUseMediaQuery.mockReset().mockReturnValue(false);
+    mockSetOrientation.mockReset();
+    mockGetHit.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingAnalytic.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingDossiers.mockReset().mockResolvedValue([]);
+    mockGetMatchingOverview.mockReset().mockResolvedValue(undefined);
+    mockNavigate.mockReset();
+    recordContextValue.records = { 'hit-1': hit };
+});
+describe('HitViewer', () => {
+    it('loads a missing hit and shows the loading state', async () => {
+        recordContextValue.records = {};
+        renderViewer();
+        expect(screen.queryByText('details-content')).not.toBeInTheDocument();
+        await waitFor(() => expect(mockGetHit).toHaveBeenCalledWith('hit-1', true));
+    });
+    it('navigates to the not-found page when loading fails with a 404', async () => {
+        recordContextValue.records = {};
+        mockGetHit.mockRejectedValue({ cause: { api_status_code: 404 } });
+        renderViewer();
+        await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/404'));
+    });
+    it('fetches matching data, notifies plugins, and renders the details view', async () => {
+        const analytic = { analytic_id: 'analytic-1' };
+        const dossiers = [{ leads: [] }];
+        mockGetMatchingAnalytic.mockResolvedValue(analytic);
+        mockGetMatchingDossiers.mockResolvedValue(dossiers);
+        renderViewer();
+        await waitFor(() => {
+            expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(hit);
+            expect(mockGetMatchingDossiers).toHaveBeenCalledWith(hit);
+            expect(screen.getByText('links:analytic-1:1')).toBeInTheDocument();
+        });
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        expect(mockExecutePlugin).toHaveBeenCalledTimes(1);
+        expect(mockExecutePlugin).toHaveBeenCalledWith('test-plugin.on', 'viewing');
+    });
+    it('emits viewing and stop_viewing socket events', async () => {
+        const { unmount } = renderViewer();
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'hit-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'hit-1'
+        });
+    });
+    it('does not emit socket events when the socket is closed or no hit id is present', async () => {
+        mockOpen.current = false;
+        renderViewer();
+        await waitFor(() => expect(mockGetMatchingOverview).toHaveBeenCalledWith(hit));
+        expect(mockEmit).not.toHaveBeenCalled();
+        mockParams.id = undefined;
+        renderViewer();
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('opens an overview by default and lets the analyst select all content tabs', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingOverview.mockResolvedValue({ content: 'overview' });
+        mockGetMatchingDossiers.mockResolvedValue([
+            {
+                leads: [
+                    {
+                        label: { en: 'External lead', fr: 'Piste externe' },
+                        format: 'markdown',
+                        content: 'external'
+                    }
+                ]
+            }
+        ]);
+        renderViewer();
+        await screen.findByText('overview-content');
+        await user.click(screen.getByRole('tab', { name: 'hit.viewer.details' }));
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'Local lead' }));
+        expect(screen.getByText('lead-content:Local lead')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'External lead' }));
+        expect(screen.getByText('lead-content:External lead')).toBeInTheDocument();
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs.at(-5));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(['parsed:{"source":"data"}']));
+        await user.click(tabs.at(-4));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(hit));
+        await user.click(tabs.at(-3));
+        expect(screen.getByText('comments-content')).toBeInTheDocument();
+        await user.click(tabs.at(-2));
+        expect(screen.getByText('worklog-content')).toBeInTheDocument();
+        await user.click(tabs.at(-1));
+        expect(screen.getByText('related-content')).toBeInTheDocument();
+    });
+    it('toggles the desktop layout and navigates to its matching analytic', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingAnalytic.mockResolvedValue({ analytic_id: 'analytic-1' });
+        renderViewer();
+        await screen.findByText('links:analytic-1:0');
+        const buttons = screen.getAllByRole('button');
+        await user.click(buttons[0]);
+        expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL);
+        await user.click(buttons[1]);
+        expect(mockNavigate).toHaveBeenCalledWith('/analytics/analytic-1');
+    });
+    it('forces a horizontal layout below the large breakpoint', async () => {
+        mockUseMediaQuery.mockReturnValue(true);
+        renderViewer();
+        await waitFor(() => expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL));
+    });
+});

package/components/routes/overviews/OverviewCard.d.ts

@@ -1,8 +1,9 @@
 import type { Overview } from '@cccsaurora/howler-ui/models/entities/generated/Overview';
-import type { FC } from 'react';
+import { type FC } from 'react';
 declare const OverviewCard: FC<{
     overview: Overview;
     className?: string;
-    onDelete?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
+    error?: boolean;
+    onRemove?: (id: string) => Promise<void>;
 }>;
 export default OverviewCard;

package/components/routes/overviews/OverviewCard.js

@@ -1,16 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Delete } from '@mui/icons-material';
-import { Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { Delete, ReportProblem } from '@mui/icons-material';
+import { Button, Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const OverviewCard = ({ overview, className, onDelete }) => {
+const OverviewCard = ({ overview, error, className, onRemove }) => {
     const { t } = useTranslation();
+    const { showModal, withConfirmDeleteModal } = useContext(ModalContext);
+    const onDelete = useCallback((e, id) => {
+        e.preventDefault();
+        e.stopPropagation();
+        withConfirmDeleteModal(async () => {
+            await onRemove?.(id);
+        });
+    }, [onRemove, withConfirmDeleteModal]);
     return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(overview.analytic), " - ", t(overview.detection ?? 'all')] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: _jsx("pre", { children: overview.content
                                         .split('\n')
                                         .filter(line => !!line)
                                         .slice(0, 3)
                                         .map(content => content.replace(/(.{,64}).+/, '$1'))
-                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onDelete && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, overview.overview_id), children: _jsx(Delete, {}) }) }))] }) }, overview.overview_id));
+                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onRemove && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete?.(e, overview.overview_id), children: _jsx(Delete, {}) }) })), error && (_jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(overview.overview_id), title: t('route.overviews.manager.error.modal.title'), description: t('route.overviews.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, overview.overview_id));
 };
 export default OverviewCard;

package/components/routes/overviews/OverviewCard.test.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
+import ModalProvider from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import Modal from '@cccsaurora/howler-ui/components/elements/display/Modal';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -12,7 +14,7 @@ vi.mock('components/elements/display/HowlerAvatar', () => ({
 vi.mock('components/elements/addons/layout/FlexOne', () => ({
     default: () => _jsx("div", { id: "flex-one" })
 }));
-const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsxs(ModalProvider, { children: [children, _jsx(Modal, {})] }) }));
 describe('OverviewCard', () => {
     let user;
     beforeEach(() => {
@@ -87,10 +89,12 @@ describe('OverviewCard', () => {
             content: 'content',
             owner: 'testuser'
         };
-        render(_jsx(OverviewCard, { overview: overview, onDelete: mockOnDelete }), { wrapper: Wrapper });
+        render(_jsx(OverviewCard, { overview: overview, onRemove: mockOnDelete }), { wrapper: Wrapper });
         const deleteButton = document.querySelector('[data-testid="DeleteIcon"]').closest('button');
         await user.click(deleteButton);
-        expect(mockOnDelete).toHaveBeenCalledWith(expect.anything(), 'ov-1');
+        const confirmButton = screen.getByRole('button', { name: /delete/i });
+        await user.click(confirmButton);
+        expect(mockOnDelete).toHaveBeenCalledWith('ov-1');
     });
     it('should apply custom className', () => {
         const overview = {

package/components/routes/overviews/Overviews.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
 import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
@@ -20,7 +20,6 @@ const OverviewsBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const { showSuccessMessage } = useMySnackbar();
-    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
@@ -28,6 +27,7 @@ const OverviewsBase = () => {
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { analytics } = useContext(AnalyticContext);
     const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
@@ -58,17 +58,22 @@ const OverviewsBase = () => {
     }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
+    // or if the analytic list changes to refresh the disabled state
     useEffect(() => {
         if (response) {
             load(response.items.map((item) => ({
                 id: item.overview_id,
                 item,
                 selected: false,
-                cursor: false
+                cursor: false,
+                disabled: item.detection &&
+                    !analytics
+                        .find(v => v.name === item.analytic)
+                        ?.detections?.map((s) => s.toLowerCase())
+                        ?.includes(item.detection?.toLowerCase())
             })));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [response, load]);
+    }, [response, load, analytics]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             const modifiedRequest = getSearchRequestData({ offset: _offset });
@@ -77,21 +82,17 @@ const OverviewsBase = () => {
             setOffset(modifiedRequest.offset);
         }
     }, [offset, searchParams, setSearchParams, getSearchRequestData]);
-    const onDelete = useCallback((e, id) => {
-        e.preventDefault();
-        e.stopPropagation();
-        withConfirmDeleteModal(async () => {
-            try {
-                await dispatchApi(api.overview.del(id), { throwError: true, showError: true });
-                remove(id);
-                showSuccessMessage(t('route.overviews.manager.delete.success'));
-            }
-            catch (_err) {
-                // eslint-disable-next-line no-console
-                console.warn(_err);
-            }
-        });
-    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
+    const removeOverview = useCallback(async (overviewId) => {
+        try {
+            await dispatchApi(api.overview.del(overviewId), { throwError: true, showError: true });
+            remove(overviewId);
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
+        }
+        catch (_err) {
+            // eslint-disable-next-line no-console
+            console.warn(_err);
+        }
+    }, [dispatchApi, remove, showSuccessMessage, t]);
     useEffect(() => {
         void onSearch();
         if (!searchParams.has('offset')) {
@@ -113,8 +114,8 @@ const OverviewsBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
-    const renderer = useCallback((item, className) => _jsx(OverviewCard, { overview: item, className: className, onDelete: onDelete }), [onDelete]);
-    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+    const renderer = useCallback((item, error, className) => (_jsx(OverviewCard, { overview: item, error: error, className: className, onRemove: removeOverview })), [removeOverview]);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, !!item.disabled, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Overviews = () => {
     return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));

package/components/routes/templates/TemplateCard.js

@@ -12,6 +12,6 @@ const TemplateCard = ({ template, onRemove, error, className }) => {
                         readonly: _jsx(Lock, {}),
                         global: _jsx(Language, {}),
                         personal: _jsx(Person, {})
-                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('route.templates.manager.error.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('route.templates.manager.error.message') }) }) }) }))] }) }, template.template_id));
+                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, template.template_id));
 };
 export default TemplateCard;

package/locales/en/translation.json

@@ -112,6 +112,8 @@
     "duplicates.omitted": "Some duplicate entries have been omitted.",
     "edit": "Edit",
     "enabled": "Enabled",
+    "error.invalid_detection.action": "Click to open quick fix options",
+    "error.invalid_detection.message": "Invalid Detection",
     "event.module": "Event Module",
     "event.open": "Open Event",
     "event.type": "Event Type",
@@ -806,6 +808,8 @@
     "route.overviews.detection": "Choose Detection",
     "route.overviews.manager.delete": "Delete Overview",
     "route.overviews.manager.delete.success": "Overview removed.",
+    "route.overviews.manager.error.modal.description": "The overview fields are read only and will not be used. Do you want to remove the template?",
+    "route.overviews.manager.error.modal.title": "Overview detection no longer exists",
     "route.overviews.manager.search": "Search Overviews",
     "route.overviews.prompt": "Activate autocomplete using [ctrl + space].",
     "route.overviews.search.prompt": "Search by title, content, analytic or detection.",
@@ -824,8 +828,6 @@
     "route.templates.detection": "Choose Detection",
     "route.templates.global": "Global",
     "route.templates.manager.delete.success": "Template removed.",
-    "route.templates.manager.error.action": "Click to open quick fix options",
-    "route.templates.manager.error.message": "Invalid Detection",
     "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
     "route.templates.manager.error.modal.title": "Template detection no longer exists",
     "route.templates.manager.global": "Global",

package/locales/fr/translation.json

@@ -112,6 +112,8 @@
     "duplicates.omitted": "Certains doublons ont été omis.",
     "edit": "Modifier",
     "enabled": "Activé",
+    "error.invalid_detection.action": "Cliquez ici pour afficher les options de correction rapide",
+    "error.invalid_detection.message": "Détection non valide",
     "event.module": "Module d'événement",
     "event.open": "Ouvrir événement",
     "event.type": "Type d'événement",
@@ -806,6 +808,8 @@
     "route.overviews.detection": "Choisir une détection",
     "route.overviews.manager.delete": "Supprimer la vue d'ensemble",
     "route.overviews.manager.delete.success": "Vue d'ensemble supprimée.",
+    "route.overviews.manager.error.modal.description": "Les clés de la vue d'ensemble sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer cette vue d'ensemble ?",
+    "route.overviews.manager.error.modal.title": "La détection de la vue d'ensemble n'existe plus",
     "route.overviews.manager.search": "Rechercher les vues d'ensemble",
     "route.overviews.prompt": "Activer l'autocomplétion en utilisant [ctrl + espace].",
     "route.overviews.search.prompt": "Recherche par titre, contenu, clé d'analyse ou de détection.",
@@ -824,9 +828,7 @@
     "route.templates.detection": "Choisir une détection",
     "route.templates.global": "Global",
     "route.templates.manager.delete.success": "Modèle supprimé.",
-    "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
-    "route.templates.manager.error.message": "Détection non valide",
-    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
+    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer ce modèle ?",
     "route.templates.manager.error.modal.title": "La détection du modèle n'existe plus",
     "route.templates.manager.global": "Global",
     "route.templates.manager.open": "Ouvrir la vue",

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1454",
+  "version": "3.1.0-dev.1466",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",