@cccsaurora/howler-ui 2.19.0-cases.862 → 2.19.0-dev.1000

package/components/routes/home/ViewCard.js

@@ -3,80 +3,74 @@ import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
-import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import { isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
-// Custom hook to select records by IDs with proper memoization
-const useSelectRecordsByIds = (recordIds) => {
-    const recordIdsRef = useRef(recordIds);
+// Custom hook to select hits by IDs with proper memoization
+const useSelectHitsByIds = (hitIds) => {
+    const hitIdsRef = useRef(hitIds);
     const prevResultRef = useRef([]);
-    const prevRecordIdsRef = useRef([]);
-    // Keep ref up to date with latest recordIds
-    recordIdsRef.current = recordIds;
+    const prevHitIdsRef = useRef([]);
+    // Keep ref up to date with latest hitIds
+    hitIdsRef.current = hitIds;
     const selector = useCallback(ctx => {
-        const currentRecordIds = recordIdsRef.current;
-        // Fast path: if recordIds array didn't change, check if record objects changed
-        if (prevRecordIdsRef.current.length === currentRecordIds.length &&
-            currentRecordIds.every((id, i) => id === prevRecordIdsRef.current[i])) {
-            // RecordIds unchanged - check if any record objects changed by reference
-            const anyRecordChanged = currentRecordIds.some((id, i) => ctx.records[id] !== prevResultRef.current[i]);
-            if (!anyRecordChanged) {
+        const currentHitIds = hitIdsRef.current;
+        // Fast path: if hitIds array didn't change, check if hit objects changed
+        if (prevHitIdsRef.current.length === currentHitIds.length &&
+            currentHitIds.every((id, i) => id === prevHitIdsRef.current[i])) {
+            // HitIds unchanged - check if any hit objects changed by reference
+            const anyHitChanged = currentHitIds.some((id, i) => ctx.hits[id] !== prevResultRef.current[i]);
+            if (!anyHitChanged) {
                 return prevResultRef.current;
             }
         }
         // Something changed - rebuild the array
-        const currentRecords = currentRecordIds.map(id => ctx.records[id]).filter(Boolean);
-        prevRecordIdsRef.current = currentRecordIds;
-        prevResultRef.current = currentRecords;
-        return currentRecords;
+        const currentHits = currentHitIds.map(id => ctx.hits[id]).filter(Boolean);
+        prevHitIdsRef.current = currentHitIds;
+        prevResultRef.current = currentHits;
+        return currentHits;
     }, []); // Empty deps - selector never changes
-    return useRecordContextSelector(selector);
+    return useHitContextSelector(selector);
 };
 // Utility functions
 const normalize = (val) => (val == null ? '' : String(val));
 // Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
-const createRecordSignature = (record) => {
-    if (!record) {
+const createHitSignature = (hit) => {
+    if (!hit)
         return '';
-    }
-    if (isObservable(record)) {
-        return record.howler?.id;
-    }
-    return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
+    return `${hit.howler?.id}:${normalize(hit.howler?.status)}:${normalize(hit.howler?.assignment)}:${normalize(hit.howler?.assessment)}`;
 };
-const createSignatureFromRecords = (records) => {
-    if (records.length === 0)
+const createSignatureFromHits = (hits) => {
+    if (hits.length === 0)
         return '';
-    return records.map(createRecordSignature).join('|');
+    return hits.map(createHitSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
 const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
-    const [recordIds, setRecordIds] = useState([]);
+    const [hitIds, setHitIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const debounceTimerRef = useRef(null);
     const isRefreshing = useRef(false);
     const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-    const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
+    const loadHits = useHitContextSelector(ctx => ctx.loadHits);
     // Subscribe to hits from HitProvider cache based on current hitIds in the view
     // Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
-    const records = useSelectRecordsByIds(recordIds);
+    const hits = useSelectHitsByIds(hitIds);
     // Create a stable signature that only changes when relevant fields change
-    const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
+    const hitsSignature = useMemo(() => createSignatureFromHits(hits), [hits]);
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
@@ -84,21 +78,21 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         isRefreshing.current = true;
         try {
-            const res = await dispatchApi(api.v2.search.post(view.indexes, {
+            const res = await dispatchApi(api.search.hit.post({
                 query: view.query,
                 rows: limit,
                 metadata: ['analytic']
             }));
-            const fetchedRecords = res.items ?? [];
-            loadRecords(fetchedRecords);
-            setRecordIds(fetchedRecords.map(r => r.howler.id));
-            lastSignature.current = createSignatureFromRecords(fetchedRecords);
+            const fetchedHits = res.items ?? [];
+            loadHits(fetchedHits);
+            setHitIds(fetchedHits.map(h => h.howler.id));
+            lastSignature.current = createSignatureFromHits(fetchedHits);
         }
         finally {
             isRefreshing.current = false;
             onRefreshComplete?.();
         }
-    }, [dispatchApi, limit, view?.query, view?.indexes, loadRecords, onRefreshComplete]);
+    }, [dispatchApi, limit, view?.query, loadHits, onRefreshComplete]);
     const debouncedRefresh = useCallback(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -131,16 +125,16 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     }, [view?.query, limit, refreshView]);
     // Monitor hits currently in the view for changes that might affect query results
     useEffect(() => {
-        if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
-            lastSignature.current = recordsSignature;
+        if (!hitsSignature || hitIds.length === 0 || !lastSignature.current) {
+            lastSignature.current = hitsSignature;
             return;
         }
         // Check if signature actually changed
-        if (lastSignature.current === recordsSignature) {
+        if (lastSignature.current === hitsSignature) {
             return;
         }
         debouncedRefresh();
-    }, [recordsSignature, recordIds, debouncedRefresh]);
+    }, [hitsSignature, hitIds, debouncedRefresh]);
     useEffect(() => {
         return () => {
             if (debounceTimerRef.current) {
@@ -157,6 +151,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(ObservableCard, { observable: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewRefresh.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, act } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import ViewRefresh, {} from './ViewRefresh';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ViewRefresh', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('should render the refresh button', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('should show a progress indicator initially', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+    it('should trigger refresh when progress reaches 100%', async () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Progress increments by 1 every refreshRate*10ms = 300ms.
+        // Each increment triggers a re-render and a new setTimeout.
+        // We advance one tick at a time inside act to let React process each state update.
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should clear refreshing state when all cards report back via ref', async () => {
+        const onRefresh = vi.fn();
+        const ref = React.createRef();
+        render(_jsx(ViewRefresh, { ref: ref, refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Advance to 100% to trigger refresh
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+        // Simulate both cards completing
+        act(() => {
+            ref.current?.handleRefreshComplete();
+            ref.current?.handleRefreshComplete();
+        });
+        // After all cards complete, the progress should reset (button re-enabled)
+        expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+    it('should trigger refresh via manual click', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Click the refresh button directly using fireEvent (avoids userEvent timer issues)
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should not call onRefresh when viewCardCount is 0 and button is clicked', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 0, onRefresh: onRefresh }), { wrapper: Wrapper });
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        // onRefresh should not be called because viewCardCount is 0
+        expect(onRefresh).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import OverviewCard from './OverviewCard';
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: "howler-avatar", children: userId })
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { id: "flex-one" })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('OverviewCard', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    it('should render overview analytic and detection', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: 'Test Detection',
+            content: 'line 1\nline 2\nline 3',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/Test Analytic/)).toBeInTheDocument();
+        expect(screen.getByText(/Test Detection/)).toBeInTheDocument();
+    });
+    it('should render "All" when detection is null', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'line 1',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/All/)).toBeInTheDocument();
+    });
+    it('should display content preview (max 3 lines)', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'first line\nsecond line\nthird line\nfourth line\nfifth line',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByText(/first line/)).toBeInTheDocument();
+        expect(screen.getByText(/second line/)).toBeInTheDocument();
+        expect(screen.getByText(/third line/)).toBeInTheDocument();
+    });
+    it('should render the owner avatar', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(screen.getByTestId('howler-avatar')).toBeInTheDocument();
+        expect(screen.getByText('testuser')).toBeInTheDocument();
+    });
+    it('should not show delete button when onDelete is not provided', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview }), { wrapper: Wrapper });
+        expect(document.querySelector('[data-testid="DeleteIcon"]')).not.toBeInTheDocument();
+    });
+    it('should show delete button and call onDelete when clicked', async () => {
+        const mockOnDelete = vi.fn();
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        render(_jsx(OverviewCard, { overview: overview, onDelete: mockOnDelete }), { wrapper: Wrapper });
+        const deleteButton = document.querySelector('[data-testid="DeleteIcon"]').closest('button');
+        await user.click(deleteButton);
+        expect(mockOnDelete).toHaveBeenCalledWith(expect.anything(), 'ov-1');
+    });
+    it('should apply custom className', () => {
+        const overview = {
+            overview_id: 'ov-1',
+            analytic: 'Test Analytic',
+            detection: null,
+            content: 'content',
+            owner: 'testuser'
+        };
+        const { container } = render(_jsx(OverviewCard, { overview: overview, className: "custom-class" }), {
+            wrapper: Wrapper
+        });
+        expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+});

package/components/{elements/MarkdownEditor.js → routes/overviews/OverviewEditor.js}

@@ -4,8 +4,8 @@ import { useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
-import { conf, language } from '../routes/overviews/markdownExtendedTokenProvider';
-const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+import { conf, language } from './markdownExtendedTokenProvider';
+const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
     const theme = useTheme();
     const monaco = useMonaco();
     const { config } = useContext(ApiConfigContext);
@@ -53,4 +53,4 @@ const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height =
     }), [fontSize, editorOptions]);
     return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
 };
-export default memo(MarkdownEditor);
+export default memo(OverviewEditor);

package/components/routes/overviews/OverviewViewer.js

@@ -8,6 +8,7 @@ import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material
 import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
 import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -15,7 +16,7 @@ import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-import MarkdownEditor from '../../elements/MarkdownEditor';
+import OverviewEditor from './OverviewEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
@@ -25,6 +26,7 @@ const OverviewViewer = () => {
     const [params, setParams] = useSearchParams();
     const { getOverviews } = useContext(OverviewContext);
     const { dispatchApi } = useMyApi();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
@@ -124,15 +126,17 @@ const OverviewViewer = () => {
             replace: true
         });
     }, [analytic, detection, params, setParams]);
-    const onDelete = useCallback(async () => {
-        await dispatchApi(api.overview.del(selectedOverview.overview_id), {
-            logError: false,
-            showError: true,
-            throwError: false
+    const onDelete = useCallback(() => {
+        withConfirmDeleteModal(async () => {
+            await dispatchApi(api.overview.del(selectedOverview.overview_id), {
+                logError: false,
+                showError: true,
+                throwError: false
+            });
+            setSelectedOverview(null);
+            setContent('');
         });
-        setSelectedOverview(null);
-        setContent('');
-    }, [dispatchApi, selectedOverview?.overview_id]);
+    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {
             try {
@@ -188,7 +192,7 @@ const OverviewViewer = () => {
                                         right: `calc(50% + 7px - ${x}px)`,
                                         mr: -2.4,
                                         pr: 1.5
-                                    }, children: _jsx(MarkdownEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
                                     position: 'absolute',
                                     top: 0,
                                     bottom: 0,

package/components/routes/overviews/Overviews.js

@@ -2,6 +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 { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -18,6 +19,7 @@ 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];
@@ -73,19 +75,21 @@ const OverviewsBase = () => {
             setOffset(_offset);
         }
     }, [offset, searchParams, setSearchParams]);
-    const onDelete = useCallback(async (e, id) => {
+    const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
-        try {
-            await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
-            await onSearch();
-            showSuccessMessage(t('route.overviews.manager.delete.success'));
-        }
-        catch (_err) {
-            // eslint-disable-next-line no-console
-            console.warn(_err);
-        }
-    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+        withConfirmDeleteModal(async () => {
+            try {
+                await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
+                await onSearch();
+                showSuccessMessage(t('route.overviews.manager.delete.success'));
+            }
+            catch (_err) {
+                // eslint-disable-next-line no-console
+                console.warn(_err);
+            }
+        });
+    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {

package/components/routes/settings/LocalSection.js

@@ -17,11 +17,12 @@ const LocalSection = () => {
     const [compactJson, setCompactJson] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
     const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
     const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
+    const [showHitSummaryGraph, setShowHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
     const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, 'list');
     const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
     const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
     const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
-    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.show.hit.summary.graph", descriptionKey: "page.settings.local.show.hit.summary.graph.description", value: showHitSummaryGraph, type: "checkbox", onEdit: async (value) => setShowHitSummaryGraph(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
 };
 export default LocalSection;

package/components/routes/settings/SettingsSection.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import SettingsSection from './SettingsSection';
+describe('SettingsSection', () => {
+    it('should render the title in a table header', () => {
+        render(_jsx(SettingsSection, { title: "Test Section", colSpan: 3, children: _jsx("tr", { children: _jsx("td", { children: "Content" }) }) }));
+        expect(screen.getByText('Test Section')).toBeInTheDocument();
+    });
+    it('should render children inside a table body', () => {
+        render(_jsx(SettingsSection, { title: "Test Section", colSpan: 2, children: _jsx("tr", { children: _jsx("td", { children: "Row Content" }) }) }));
+        expect(screen.getByText('Row Content')).toBeInTheDocument();
+    });
+    it('should use the title as the table aria-label', () => {
+        render(_jsx(SettingsSection, { title: "Accessible Section", colSpan: 3, children: _jsx("tr", { children: _jsx("td", { children: "Content" }) }) }));
+        expect(screen.getByRole('table', { name: 'Accessible Section' })).toBeInTheDocument();
+    });
+});

package/components/routes/templates/TemplateCard.d.ts

@@ -1,7 +1,9 @@
 import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import type { FC } from 'react';
+import { type FC } from 'react';
 declare const TemplateCard: FC<{
     template: Template;
+    onRemove?: (templateId: string) => void;
+    error?: boolean;
     className?: string;
 }>;
 export default TemplateCard;

package/components/routes/templates/TemplateCard.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Language, Lock, Person } from '@mui/icons-material';
-import { Card, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { Language, Lock, Person, ReportProblem } from '@mui/icons-material';
+import { Button, Card, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const TemplateCard = ({ template, className }) => {
+const TemplateCard = ({ template, onRemove, error, className }) => {
     const { t } = useTranslation();
+    const { showModal } = useContext(ModalContext);
     return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.templates.manager.${template.type}`), children: {
                         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)))] })] }) }, 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('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));
 };
 export default TemplateCard;

package/components/routes/templates/TemplateCard.test.d.ts

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