@cccsaurora/howler-ui 3.1.0-dev.1656 → 3.1.0-dev.1657

package/components/routes/templates/TemplateViewer.test.js

@@ -0,0 +1,145 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const mockWithConfirmDeleteModal = vi.hoisted(() => vi.fn((cb) => cb()));
+const mockTemplateGet = vi.hoisted(() => vi.fn(() => ({ list: true })));
+const mockTemplatePut = vi.hoisted(() => vi.fn((id, keys) => ({ id, keys })));
+const mockTemplateDelete = vi.hoisted(() => vi.fn((id) => ({ id })));
+const mockAnalyticSearchPost = vi.hoisted(() => vi.fn((body) => body));
+const mockGroupedHitPost = vi.hoisted(() => vi.fn((field, body) => ({ field, body })));
+const modalContextToken = vi.hoisted(() => ({ name: 'modal-context' }));
+let searchParamsValue = new URLSearchParams('analytic=Alpha&type=personal');
+vi.mock('@mui/icons-material', () => ({
+    Check: () => _jsx("div", { children: "check-icon" }),
+    Delete: () => _jsx("div", { children: "delete-icon" }),
+    SsidChart: () => _jsx("div", { children: "ssid-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Autocomplete: ({ options, value, onChange, renderInput }) => (_jsxs("div", { children: [renderInput({}), _jsx("button", { onClick: () => onChange(null, options[0] ?? null), children: typeof value === 'object' ? value?.name : value || 'empty' })] })),
+    Button: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    FormControl: ({ children }) => _jsx("div", { children: children }),
+    LinearProgress: () => _jsx("div", { children: "progress" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ label, size }) => _jsx("div", { children: label ?? size }),
+    ToggleButton: ({ children, value }) => _jsx("button", { "data-value": value, children: children }),
+    ToggleButtonGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange(null, 'global'), children: "switch-global" }), children] })),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    AppInfoPanel: ({ i18nKey }) => _jsx("div", { children: i18nKey }),
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: {
+                post: mockAnalyticSearchPost
+            },
+            grouped: {
+                hit: {
+                    post: mockGroupedHitPost
+                }
+            }
+        },
+        template: {
+            get: mockTemplateGet,
+            put: mockTemplatePut,
+            del: mockTemplateDelete
+        }
+    }
+}));
+vi.mock('components/app/providers/ModalProvider', () => ({
+    ModalContext: modalContextToken
+}));
+vi.mock('components/elements/hit/HitOutline', () => ({
+    DEFAULT_FIELDS: ['default.field']
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showSuccessMessage: mockShowSuccessMessage })
+}));
+vi.mock('components/routes/templates/TemplateEditor', () => ({
+    default: ({ fields, onAdd, onRemove }) => (_jsxs("div", { children: [_jsx("div", { children: fields.join(',') }), _jsx("button", { onClick: () => onAdd('field.added'), children: "add-field" }), _jsx("button", { onClick: () => onRemove(fields[0]), children: "remove-field" })] }))
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === modalContextToken)
+                return { withConfirmDeleteModal: mockWithConfirmDeleteModal };
+            return actual.useContext(context);
+        }
+    };
+});
+vi.mock('utils/exampleHit', () => ({
+    getExampleHit: () => ({ howler: { analytic: 'example' } })
+}));
+vi.mock('utils/stringUtils', () => ({
+    sanitizeLuceneQuery: (value) => value
+}));
+import TemplateViewer from './TemplateViewer';
+describe('TemplateViewer', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams('analytic=Alpha&type=personal');
+        mockDispatchApi.mockReset();
+        mockShowSuccessMessage.mockReset();
+        mockSetSearchParams.mockReset();
+        mockWithConfirmDeleteModal.mockClear();
+        mockTemplateGet.mockClear();
+        mockTemplatePut.mockClear();
+        mockTemplateDelete.mockClear();
+        mockAnalyticSearchPost.mockClear();
+        mockGroupedHitPost.mockClear();
+    });
+    it('loads an existing template, saves field changes, and deletes the template', async () => {
+        mockDispatchApi.mockResolvedValue({ items: [] });
+        mockDispatchApi
+            .mockResolvedValueOnce({ items: [{ name: 'Alpha' }] })
+            .mockResolvedValueOnce([{ template_id: 'tpl-1', analytic: 'Alpha', type: 'personal', keys: ['field.one'] }])
+            .mockResolvedValueOnce({ items: [] })
+            .mockResolvedValueOnce({
+            template_id: 'tpl-1',
+            analytic: 'Alpha',
+            type: 'personal',
+            keys: ['field.one', 'field.added']
+        })
+            .mockResolvedValueOnce({});
+        render(_jsx(TemplateViewer, {}));
+        await waitFor(() => expect(mockTemplateGet).toHaveBeenCalled());
+        await waitFor(() => expect(screen.getByText('field.one')).toBeInTheDocument());
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('add-field'));
+        fireEvent.click(screen.getByText('button.save'));
+        await waitFor(() => expect(mockTemplatePut).toHaveBeenCalledWith('tpl-1', ['field.one', 'field.added']));
+        fireEvent.click(screen.getByText('button.delete'));
+        await waitFor(() => expect(mockTemplateDelete).toHaveBeenCalledWith('tpl-1'));
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.templates.manager.delete.success');
+    });
+    it('falls back to default fields when toggling to a type without a saved template', async () => {
+        mockDispatchApi.mockResolvedValue({ items: [] });
+        mockDispatchApi
+            .mockResolvedValueOnce({ items: [{ name: 'Alpha' }] })
+            .mockResolvedValueOnce([{ template_id: 'tpl-1', analytic: 'Alpha', type: 'personal', keys: ['field.one'] }])
+            .mockResolvedValueOnce({ items: [] });
+        render(_jsx(TemplateViewer, {}));
+        await waitFor(() => expect(screen.getByText('field.one')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('add-field'));
+        fireEvent.click(screen.getByText('switch-global'));
+        await waitFor(() => expect(screen.getByText('default.field')).toBeInTheDocument());
+    });
+});

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

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

package/components/routes/templates/Templates.test.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const mockLoad = vi.hoisted(() => vi.fn());
+const mockRequest = vi.hoisted(() => vi.fn());
+const mockRemove = vi.hoisted(() => vi.fn());
+const mockGetSearchRequestData = vi.hoisted(() => vi.fn((data) => ({ offset: data.offset })));
+const mockTemplateDelete = vi.hoisted(() => vi.fn((templateId) => ({ templateId })));
+const analyticContextToken = vi.hoisted(() => ({ name: 'analytic-context' }));
+const listMethodContextToken = vi.hoisted(() => ({ name: 'list-method-context' }));
+let searchParamsValue = new URLSearchParams();
+let responseValue = {
+    total: 2,
+    items: [
+        { template_id: 'tpl-1', type: 'global', analytic: 'Alpha', detection: 'Match', title: 'Zulu' },
+        { template_id: 'tpl-2', type: 'personal', analytic: 'Bravo', title: 'Alpha' }
+    ]
+};
+let analyticContextValue = {
+    analytics: [{ name: 'Alpha', detections: ['match'] }]
+};
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Article: () => _jsx("div", { children: "article-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    ToggleButton: ({ children, value }) => _jsx("button", { "data-value": value, children: children }),
+    ToggleButtonGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange(null, ['personal']), children: "filter-personal" }), _jsx("button", { onClick: () => onChange(null, ['personal', 'global']), children: "filter-both" }), children] })),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: { username: 'demo' } })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            template: {
+                post: 'template-search'
+            }
+        },
+        template: {
+            del: mockTemplateDelete
+        }
+    }
+}));
+vi.mock('components/app/providers/AnalyticProvider', () => ({
+    AnalyticContext: analyticContextToken
+}));
+vi.mock('components/app/providers/SearchResponseProvider', () => ({
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children }),
+    createSearchResponseContext: () => ({}),
+    useSearchResponseContext: () => ({
+        response: responseValue,
+        request: mockRequest,
+        remove: mockRemove,
+        getSearchRequestData: mockGetSearchRequestData
+    })
+}));
+vi.mock('components/elements/addons/lists', () => ({
+    TuiListProvider: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/lists/TuiListProvider', () => ({
+    TuiListMethodContext: listMethodContextToken
+}));
+vi.mock('components/elements/display/ItemManager', () => ({
+    default: (props) => (_jsxs("div", { children: [_jsx("button", { onClick: () => props.onSearch(), children: "search" }), _jsx("button", { onClick: () => props.onPageChange(25), children: "page" }), _jsx("button", { onClick: () => props.onCreate(), children: "create" }), _jsx("button", { onClick: () => props.onSelect({ item: responseValue.items[0] }), children: "select" }), _jsx("div", { children: props.searchFilters }), props.response?.items?.map((item) => (_jsx("div", { children: props.renderer({ item: { item, disabled: item.template_id === 'tpl-1' } }, () => 'card') }, item.template_id)))] }))
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [25]
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showSuccessMessage: mockShowSuccessMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate,
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('./TemplateCard', () => ({
+    default: ({ template, error, onRemove, className }) => (_jsxs("div", { children: [_jsx("span", { children: `${template.template_id}:${String(error)}:${className}` }), _jsxs("button", { onClick: () => onRemove(template.template_id), children: ["remove-", template.template_id] })] }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === analyticContextToken) {
+                return analyticContextValue;
+            }
+            if (context === listMethodContextToken) {
+                return { load: mockLoad };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import Templates from './Templates';
+describe('Templates', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams();
+        responseValue = {
+            total: 2,
+            items: [
+                { template_id: 'tpl-1', type: 'global', analytic: 'Alpha', detection: 'Match', title: 'Zulu' },
+                { template_id: 'tpl-2', type: 'personal', analytic: 'Bravo', title: 'Alpha' }
+            ]
+        };
+        analyticContextValue = { analytics: [{ name: 'Alpha', detections: ['match'] }] };
+        mockDispatchApi.mockReset();
+        mockShowSuccessMessage.mockReset();
+        mockNavigate.mockReset();
+        mockSetSearchParams.mockReset();
+        mockLoad.mockReset();
+        mockRequest.mockReset();
+        mockRemove.mockReset();
+        mockTemplateDelete.mockReset();
+    });
+    it('searches, filters template types, paginates, and navigates', async () => {
+        render(_jsx(Templates, {}));
+        await waitFor(() => expect(mockRequest).toHaveBeenCalledWith('template-search', {
+            query: '*:* AND (type:global OR owner:(demo OR none)) AND type:(*)',
+            rows: 25,
+            offset: 0
+        }));
+        expect(mockLoad).toHaveBeenCalledWith([
+            expect.objectContaining({ id: 'tpl-1', disabled: false }),
+            expect.objectContaining({ id: 'tpl-2', disabled: false })
+        ]);
+        fireEvent.click(screen.getByText('filter-personal'));
+        await waitFor(() => expect(mockRequest).toHaveBeenLastCalledWith('template-search', {
+            query: '*:* AND (type:global OR owner:(demo OR none)) AND type:(personal)',
+            rows: 25,
+            offset: 0
+        }));
+        fireEvent.click(screen.getByText('page'));
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('select'));
+        expect(mockNavigate).toHaveBeenCalledWith('/templates/view?type=global&analytic=Alpha&detection=Match');
+        fireEvent.click(screen.getByText('create'));
+        expect(mockNavigate).toHaveBeenCalledWith('/templates/view');
+    });
+    it('removes templates successfully', async () => {
+        mockDispatchApi.mockResolvedValueOnce({});
+        render(_jsx(Templates, {}));
+        fireEvent.click(screen.getByText('remove-tpl-1'));
+        await waitFor(() => expect(mockTemplateDelete).toHaveBeenCalledWith('tpl-1'));
+        expect(mockRemove).toHaveBeenCalledWith('tpl-1');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.templates.manager.delete.success');
+    });
+});

package/components/routes/views/ViewComposer.test.d.ts

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

package/components/routes/views/ViewComposer.test.js

@@ -0,0 +1,320 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockShowErrorMessage = vi.hoisted(() => vi.fn());
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockAddView = vi.hoisted(() => vi.fn());
+const mockEditView = vi.hoisted(() => vi.fn());
+const mockGetCurrentViews = vi.hoisted(() => vi.fn());
+const mockLoadRecords = vi.hoisted(() => vi.fn());
+const viewContextToken = vi.hoisted(() => ({ name: 'view-context' }));
+const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
+const recordContextToken = vi.hoisted(() => ({ name: 'record-context' }));
+const recordSearchContextToken = vi.hoisted(() => ({ name: 'record-search-context' }));
+const gridColumnsContextToken = vi.hoisted(() => ({ name: 'grid-columns-context' }));
+let routeParamsValue = {};
+let parameterContextValue;
+let recordSearchContextValue;
+let gridColumnsContextValue;
+let searchResponseValue;
+vi.mock('@mui/icons-material', () => ({
+    HelpOutline: () => _jsx("div", { children: "help-icon" }),
+    Save: () => _jsx("div", { children: "save-icon" }),
+    Settings: () => _jsx("div", { children: "settings-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Alert: ({ children }) => _jsx("div", { children: children }),
+    Checkbox: ({ checked, onChange }) => (_jsx("button", { onClick: () => onChange?.(null, !checked), children: checked ? 'checked' : 'unchecked' })),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    LinearProgress: () => _jsx("div", { children: "progress" }),
+    Paper: ({ children }) => _jsx("div", { children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ label, value, onChange }) => (_jsxs("label", { children: [label, _jsx("input", { "aria-label": label, value: value, onChange: onChange })] })),
+    ToggleButton: ({ children, value }) => _jsx("button", { "data-value": value, children: children }),
+    ToggleButtonGroup: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange?.(null, 'personal'), children: "switch-personal" }), children] })),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    AppListEmpty: () => _jsx("div", { children: "empty-list" }),
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (indexes, body) => ({ indexes, body })
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/GridColumnsProvider', () => ({
+    GridColumnsContext: gridColumnsContextToken
+}));
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: recordSearchContextToken
+}));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: viewContextToken
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children }))
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex" })
+}));
+vi.mock('components/elements/addons/layout/FlexPort', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBox', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBoxContent', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/layout/vsbox/VSBoxHeader', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/elements/addons/search/SearchTotal', () => ({
+    default: ({ total, pageLength, offset }) => _jsx("div", { children: `total:${total}:${pageLength}:${offset}` })
+}));
+vi.mock('components/elements/display/ChipPopper', () => ({
+    default: ({ children, label }) => (_jsxs("div", { children: [label, children] }))
+}));
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ event }) => _jsx("div", { children: `event:${event.howler.id}` })
+}));
+vi.mock('components/elements/hit/grid/AddColumnModal', () => ({
+    default: ({ addColumn }) => _jsx("button", { onClick: () => addColumn('col2'), children: "add-column" })
+}));
+vi.mock('components/elements/hit/grid/RecordTable', () => ({
+    default: ({ query, items }) => _jsx("div", { children: `grid:${query}:${items?.length ?? 0}` })
+}));
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `hit:${id}` })
+}));
+vi.mock('components/elements/view/LayoutToggle', () => ({
+    default: () => _jsx("div", { children: "layout-toggle" })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [25]
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showSuccessMessage: mockShowSuccessMessage, showErrorMessage: mockShowErrorMessage })
+}));
+vi.mock('components/elements/membership/MembershipManagement', () => ({
+    MembershipManagement: () => _jsx("div", { children: "membership" })
+}));
+vi.mock('../ErrorBoundary', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('../hits/search/RecordQuery', () => ({
+    default: ({ triggerSearch, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange?.('status:open', false), children: "record-query-clean" }), _jsx("button", { onClick: () => triggerSearch('status:open'), children: "record-query-search" })] }))
+}));
+vi.mock('../hits/search/shared/HitSort', () => ({
+    default: () => _jsx("div", { children: "sort" })
+}));
+vi.mock('../hits/search/shared/IndexPicker', () => ({
+    default: () => _jsx("div", { children: "index-picker" })
+}));
+vi.mock('../hits/search/shared/SearchSpan', () => ({
+    default: () => _jsx("div", { children: "search-span" })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate,
+    useParams: () => routeParamsValue
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (context, selector) => {
+        if (context === viewContextToken)
+            return selector({ addView: mockAddView, editView: mockEditView, getCurrentViews: mockGetCurrentViews });
+        if (context === parameterContextToken)
+            return selector(parameterContextValue);
+        if (context === recordContextToken)
+            return selector({ loadRecords: mockLoadRecords });
+        if (context === recordSearchContextToken)
+            return selector(recordSearchContextValue);
+        return undefined;
+    }
+}));
+vi.mock('utils/constants', () => ({
+    DEFAULT_QUERY: '*:*',
+    StorageKey: { PAGE_COUNT: 'page-count' }
+}));
+vi.mock('utils/utils', () => ({
+    convertDateToLucene: (value) => `converted:${value}`
+}));
+vi.mock('utils/viewUtils', () => ({
+    buildViewUrl: (view) => `/views/${view.view_id}`
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === gridColumnsContextToken)
+                return gridColumnsContextValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import ViewComposer from './ViewComposer';
+describe('ViewComposer', () => {
+    beforeEach(() => {
+        routeParamsValue = {};
+        searchResponseValue = {
+            total: 2,
+            offset: 0,
+            rows: 25,
+            items: [
+                { __index: 'hit', howler: { id: 'hit-1' } },
+                { __index: 'event', howler: { id: 'event-1' } }
+            ]
+        };
+        parameterContextValue = {
+            indexes: undefined,
+            setIndexes: vi.fn((value) => {
+                parameterContextValue.indexes = value;
+            }),
+            query: '',
+            setQuery: vi.fn((value) => {
+                parameterContextValue.query = value;
+            }),
+            sort: 'created desc',
+            setSort: vi.fn((value) => {
+                parameterContextValue.sort = value;
+            }),
+            span: '24h',
+            setSpan: vi.fn((value) => {
+                parameterContextValue.span = value;
+            })
+        };
+        recordSearchContextValue = {
+            displayType: 'grid',
+            setDisplayType: vi.fn((value) => {
+                recordSearchContextValue.displayType = value;
+            })
+        };
+        const columns = ['col1'];
+        gridColumnsContextValue = {
+            columns,
+            setColumns: vi.fn((value) => {
+                columns.splice(0, columns.length, ...value);
+            }),
+            columnWidths: { col1: 120 },
+            isReady: true
+        };
+        mockDispatchApi.mockReset();
+        mockDispatchApi.mockResolvedValue(searchResponseValue);
+        mockShowSuccessMessage.mockReset();
+        mockShowErrorMessage.mockReset();
+        mockNavigate.mockReset();
+        mockAddView.mockReset();
+        mockEditView.mockReset();
+        mockGetCurrentViews.mockReset();
+        mockLoadRecords.mockReset();
+    });
+    it('runs an initial search, adds a column, and creates a new view', async () => {
+        mockAddView.mockResolvedValueOnce({ view_id: 'new-view' });
+        render(_jsx(ViewComposer, {}));
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({
+            indexes: ['hit'],
+            body: {
+                rows: 25,
+                query: '*:*',
+                sort: 'created desc',
+                filters: ['event.created:converted:24h'],
+                metadata: ['template', 'analytic']
+            }
+        }, { showError: false, throwError: true }));
+        expect(mockLoadRecords).toHaveBeenCalledWith(searchResponseValue.items);
+        expect(screen.getByText('grid:*:*:2')).toBeInTheDocument();
+        fireEvent.change(screen.getByLabelText('route.views.name'), { target: { value: 'New View' } });
+        fireEvent.click(screen.getByText('unchecked'));
+        fireEvent.click(screen.getByText('add-column'));
+        fireEvent.click(screen.getByText('save'));
+        await waitFor(() => expect(mockAddView).toHaveBeenCalledWith({
+            title: 'New View',
+            type: 'global',
+            query: '*:*',
+            indexes: ['hit'],
+            sort: 'created desc',
+            span: '24h',
+            settings: {
+                advance_on_triage: true,
+                display: 'grid',
+                columns: [
+                    { field: 'col1', width: 120 },
+                    { field: 'col2', width: null }
+                ]
+            }
+        }));
+        expect(mockNavigate).toHaveBeenCalledWith('/views/new-view');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.views.create.success');
+    });
+    it('loads an existing view, re-searches with loaded params, and updates it', async () => {
+        routeParamsValue = { id: 'view-1' };
+        recordSearchContextValue.displayType = 'list';
+        mockGetCurrentViews.mockResolvedValueOnce([
+            {
+                view_id: 'view-1',
+                title: 'Existing View',
+                type: 'personal',
+                query: 'status:open',
+                indexes: ['event'],
+                sort: 'event.created asc',
+                span: '7d',
+                settings: { advance_on_triage: true, display: 'list' }
+            }
+        ]);
+        mockEditView.mockResolvedValueOnce(undefined);
+        render(_jsx(ViewComposer, {}));
+        await waitFor(() => expect(mockGetCurrentViews).toHaveBeenCalledWith({ views: ['view-1'] }));
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({
+            indexes: ['event'],
+            body: {
+                rows: 25,
+                query: 'status:open',
+                sort: 'event.created asc',
+                filters: ['event.created:converted:7d'],
+                metadata: ['template', 'analytic']
+            }
+        }, { showError: false, throwError: true }));
+        expect(parameterContextValue.setIndexes).toHaveBeenCalledWith(['event']);
+        expect(parameterContextValue.setSort).toHaveBeenCalledWith('event.created asc');
+        expect(parameterContextValue.setSpan).toHaveBeenCalledWith('7d');
+        expect(screen.getByText('event:event-1')).toBeInTheDocument();
+        fireEvent.change(screen.getByLabelText('route.views.name'), { target: { value: 'Updated View' } });
+        fireEvent.click(screen.getByText('checked'));
+        fireEvent.click(screen.getByText('save'));
+        await waitFor(() => expect(mockEditView).toHaveBeenCalledWith('view-1', {
+            title: 'Updated View',
+            type: 'personal',
+            query: 'status:open',
+            indexes: ['event'],
+            sort: 'event.created asc',
+            span: '7d',
+            settings: {
+                advance_on_triage: false,
+                display: 'list',
+                columns: undefined
+            }
+        }));
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.views.update.success');
+    });
+});

package/components/routes/views/Views.test.d.ts

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