@cccsaurora/howler-ui 2.19.0-cases.863 → 2.19.0-dev.1023

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddNewCard from './AddNewCard';
+setupContextSelectorMock();
+const mockApiSearchAnalyticPost = vi.fn();
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: {
+                post: (...args) => mockApiSearchAnalyticPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, disabled, onClick, ...props }) => (_jsx("button", { disabled: disabled, onClick: onClick, ...props, children: children }))
+}));
+const mockFetchViews = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: React.createContext({
+        views: {
+            'view-1': {
+                view_id: 'view-1',
+                title: 'My View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            },
+            'view-2': {
+                view_id: 'view-2',
+                title: 'Second View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            }
+        },
+        fetchViews: mockFetchViews
+    })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('AddNewCard', () => {
+    const mockAddCard = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockApiSearchAnalyticPost.mockResolvedValue({
+            items: [{ analytic_id: 'analytic-1', name: 'Test Analytic', description: 'Test description' }],
+            total: 1
+        });
+    });
+    it('should render the add card title', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText('Add New Panel')).toBeInTheDocument();
+        });
+    });
+    it('should render the description', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText(/Add an additional panel/)).toBeInTheDocument();
+        });
+    });
+    it('should have the create button disabled initially', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /Create/i })).toBeDisabled();
+        });
+    });
+    it('should fetch analytics on mount', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(mockApiSearchAnalyticPost).toHaveBeenCalledWith(expect.objectContaining({ query: '*:*' }));
+        });
+    });
+});

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 { act, render, screen } 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,14 +8,16 @@ 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';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 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 +27,8 @@ const OverviewViewer = () => {
     const [params, setParams] = useSearchParams();
     const { getOverviews } = useContext(OverviewContext);
     const { dispatchApi } = useMyApi();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
@@ -124,15 +128,19 @@ 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: true
+            });
+            setOverviewList(l => l.filter(v => v.overview_id !== selectedOverview.overview_id));
+            setSelectedOverview(null);
+            setContent('');
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
         });
-        setSelectedOverview(null);
-        setContent('');
-    }, [dispatchApi, selectedOverview?.overview_id]);
+    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal, showSuccessMessage, t]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {
             try {
@@ -188,7 +196,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,8 @@ 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 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';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -18,14 +20,15 @@ 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];
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
             setLoading(true);
@@ -40,11 +43,11 @@ const OverviewsBase = () => {
             // Check for the actual search query
             const query = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the overview should be visible and/or matches the type we are filtering for
-            setResponse(await dispatchApi(api.search.overview.post({
+            await request(api.search.overview.post, {
                 query,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -52,7 +55,7 @@ const OverviewsBase = () => {
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     useEffect(() => {
@@ -68,24 +71,27 @@ const OverviewsBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
-    const onDelete = useCallback(async (e, id) => {
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
+    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: 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]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {
@@ -111,6 +117,6 @@ const OverviewsBase = () => {
     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 Overviews = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(OverviewsBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));
 };
 export default Overviews;