@cccsaurora/howler-ui 2.18.0-dev.841 → 2.19.0-cases.1040

package/components/routes/hits/search/shared/CustomSpan.test.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+vi.mock('use-context-selector', async () => {
+    const actual = await vi.importActual('use-context-selector');
+    return {
+        ...actual,
+        createContext,
+        useContextSelector: (_context, selector) => selector(useContext(_context))
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import { render, screen, waitFor } from '@testing-library/react';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import dayjs from 'dayjs';
+import minMax from 'dayjs/plugin/minMax';
+import {} from 'react';
+dayjs.extend(minMax);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// Import after mocks
+import CustomSpan from './CustomSpan';
+const mockSetCustomSpan = vi.fn();
+const defaultCtx = {
+    span: 'date.range.custom',
+    startDate: undefined,
+    endDate: undefined,
+    setCustomSpan: mockSetCustomSpan
+};
+const makeWrapper = (ctx) => function ({ children }) {
+    return (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
+};
+describe('CustomSpan', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('useEffect – date initialisation', () => {
+        it('should set both dates to defaults when both are null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            const startDate = dayjs(start);
+            const endDate = dayjs(end);
+            expect(startDate.isBefore(endDate)).toBe(true);
+            expect(dayjs().diff(startDate, 'hour')).toBeGreaterThanOrEqual(47);
+            expect(dayjs().diff(startDate, 'hour')).toBeLessThanOrEqual(49);
+            expect(dayjs().diff(endDate, 'hour')).toBeGreaterThanOrEqual(23);
+            expect(dayjs().diff(endDate, 'hour')).toBeLessThanOrEqual(25);
+        });
+        it('should set default start date when only endDate is provided', async () => {
+            // Use a recent end date that's after the default start (now - 2 days)
+            const existingEnd = dayjs().subtract(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: existingEnd })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(end).toBe(existingEnd);
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+        it('should set default end date when only startDate is provided', async () => {
+            // Use a recent start date that's before the default end (now - 1 day)
+            const existingStart = dayjs().subtract(3, 'day').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: existingStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(start).toBe(existingStart);
+            expect(dayjs(end).isAfter(dayjs(start))).toBe(true);
+        });
+        it('should NOT call setCustomSpan when both dates are already set', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is not custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month', startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is undefined', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined, startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should ensure startDate is before endDate even if existing startDate is after default endDate', async () => {
+            const futureStart = dayjs().add(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: futureStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+    });
+    describe('rendering', () => {
+        it('should render nothing when span is not custom', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month' })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render nothing when span is undefined', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render two date pickers when span is custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+        it('should render pickers for any span ending with "custom"', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'my.prefix.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+    });
+    describe('onChange handlers', () => {
+        it('should not call setCustomSpan when both dates are present on render', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            const startPicker = screen.getByLabelText('date.select.start');
+            expect(startPicker).toBeInTheDocument();
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should render start picker with fallback value when startDate is null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: undefined,
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            // When startDate is null, the picker's value falls back to dayjs().subtract(1, 'days')
+            const startInput = screen.getByLabelText('date.select.start');
+            expect(startInput).toBeInTheDocument();
+            // The input should have a value (the fallback), not be empty
+            expect(startInput.value).not.toBe('');
+        });
+    });
+});

package/components/routes/home/AddNewCard.js

@@ -64,7 +64,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
         fetchAllAnalytics();
     }, []);
     const filteredAnalyticVisualizations = useMemo(() => {
-        const existingAnalyticCards = dashboard.filter(_card => _card.type === "analytic");
+        const existingAnalyticCards = dashboard.filter(_card => _card.type === 'analytic');
         return VISUALIZATIONS.filter(viz => {
             return !existingAnalyticCards.some(_card => {
                 const parsedConfig = JSON.parse(_card.config);

package/components/routes/home/AddNewCard.test.d.ts

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

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,7 +3,7 @@ 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 { useHitContextSelector as useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 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';

package/components/routes/home/ViewRefresh.test.d.ts

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

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.d.ts

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

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/routes/overviews/OverviewViewer.js

@@ -8,9 +8,11 @@ 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';
@@ -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 {

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;

package/components/routes/overviews/template/en.md.js

@@ -1 +1 @@
-export default "# Creating an Overview\n\nOverviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.\n>\n> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.\n>\n> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.\n>\n>```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n>```\n>\n> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly \"howler.analytic\"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{curly \"source.ip\"}} |{{curly \"destination.ip\"}} |\n```\n\nrenders as:\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nHit is open!\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nHit is resolved!\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nThis is correct!\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nThis is wrong!\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nAlways shows!\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly 'join \"string one \" \"string two\"'}}\n```\n\n{{join \"string one \" \"string two\"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly 'upper \"make this uppercase\"'}}\n{{curly 'lower \"MAKE THIS LOWERCASE\"'}}\n```\n\n{{upper \"make this uppercase\"}}\n\n{{lower \"MAKE THIS LOWERCASE\"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Full Helper List\n"
+export default "# Creating an Overview\n\nOverviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.\n>\n> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.\n>\n> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.\n>\n> ```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n> ```\n>\n> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly \"howler.analytic\"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n| Source IP             | Destination IP             |\n| --------------------- | -------------------------- |\n| {{curly \"source.ip\"}} | {{curly \"destination.ip\"}} |\n```\n\nrenders as:\n\n| Source IP     | Destination IP     |\n| ------------- | ------------------ |\n| {{source.ip}} | {{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nHit is open!\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nHit is resolved!\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nThis is correct!\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nThis is wrong!\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nAlways shows!\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly 'join \"string one \" \"string two\"'}}\n```\n\n{{join \"string one \" \"string two\"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly 'upper \"make this uppercase\"'}}\n{{curly 'lower \"MAKE THIS LOWERCASE\"'}}\n```\n\n{{upper \"make this uppercase\"}}\n\n{{lower \"MAKE THIS LOWERCASE\"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Full Helper List\n"