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

package/components/routes/advanced/QueryEditor.test.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+const mockLuceneCompletion = vi.hoisted(() => ({ provideCompletionItems: vi.fn() }));
+const mockYamlCompletion = vi.hoisted(() => ({ provideCompletionItems: vi.fn() }));
+const mockEqlCompletion = vi.hoisted(() => ({ provideCompletionItems: vi.fn() }));
+const mockHistoryCompletion = vi.hoisted(() => ({ provideCompletionItems: vi.fn() }));
+const mockSetFzfSearch = vi.hoisted(() => vi.fn());
+const mockSetModelLanguage = vi.hoisted(() => vi.fn());
+const mockRegisterCompletionItemProvider = vi.hoisted(() => vi.fn(() => ({ dispose: vi.fn() })));
+const mockSetMonarchTokensProvider = vi.hoisted(() => vi.fn(() => ({ dispose: vi.fn() })));
+const mockRegisterLanguage = vi.hoisted(() => vi.fn());
+const mockOnDidCreateModel = vi.hoisted(() => vi.fn(() => ({ dispose: vi.fn() })));
+const mockEditorProps = vi.hoisted(() => ({ current: null }));
+let mockFzfSearch = false;
+let mockMonaco = null;
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => mockMonaco
+}));
+vi.mock('@mui/material', () => ({
+    Box: ({ children, onKeyDownCapture }) => _jsx("div", { onKeyDownCapture: onKeyDownCapture, children: children }),
+    useTheme: () => ({ palette: { mode: 'light' } })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: {}
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: {}
+}));
+vi.mock('components/elements/ThemedEditor', () => ({
+    default: (props) => {
+        mockEditorProps.current = props;
+        return _jsx("div", { id: props.wrapperProps?.id, children: "editor" });
+    }
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (_context, selector) => selector({ fzfSearch: mockFzfSearch, setFzfSearch: mockSetFzfSearch })
+}));
+vi.mock('./eqlCompletionProvider', () => ({
+    default: () => mockEqlCompletion
+}));
+vi.mock('./historyCompletionProvider', () => ({
+    default: () => mockHistoryCompletion
+}));
+vi.mock('./luceneCompletionProvider', () => ({
+    default: () => mockLuceneCompletion
+}));
+vi.mock('./yamlCompletionProvider', () => ({
+    default: () => mockYamlCompletion
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: () => ({ config: { lookups: { status: ['open'] } } })
+    };
+});
+import QueryEditor from './QueryEditor';
+describe('QueryEditor', () => {
+    afterEach(() => {
+        mockFzfSearch = false;
+        mockEditorProps.current = null;
+        vi.clearAllMocks();
+    });
+    it('registers languages, completion providers, and editor language handlers', () => {
+        const textModel = {
+            setEOL: vi.fn(),
+            getLanguageId: vi.fn(() => 'plaintext')
+        };
+        const markdownModel = {
+            setEOL: vi.fn(),
+            getLanguageId: vi.fn(() => 'markdown')
+        };
+        mockMonaco = {
+            languages: {
+                register: mockRegisterLanguage,
+                registerCompletionItemProvider: mockRegisterCompletionItemProvider,
+                setMonarchTokensProvider: mockSetMonarchTokensProvider
+            },
+            editor: {
+                EndOfLineSequence: { LF: 0 },
+                getModels: () => [textModel, markdownModel],
+                onDidCreateModel: mockOnDidCreateModel,
+                setModelLanguage: mockSetModelLanguage
+            }
+        };
+        const onMount = vi.fn();
+        const setQuery = vi.fn();
+        const { unmount } = render(_jsx(QueryEditor, { id: "query-editor", query: "a:b", setQuery: setQuery, onMount: onMount }));
+        mockEditorProps.current.beforeMount(mockMonaco);
+        expect(mockRegisterLanguage).toHaveBeenCalledWith({ id: 'lucene' });
+        expect(mockRegisterLanguage).toHaveBeenCalledWith({ id: 'eql' });
+        expect(mockSetMonarchTokensProvider).toHaveBeenCalledTimes(2);
+        expect(mockRegisterCompletionItemProvider).toHaveBeenCalledWith('lucene', mockLuceneCompletion);
+        expect(mockRegisterCompletionItemProvider).toHaveBeenCalledWith('yaml', mockYamlCompletion);
+        expect(mockRegisterCompletionItemProvider).toHaveBeenCalledWith('eql', mockEqlCompletion);
+        expect(textModel.setEOL).toHaveBeenCalledWith(0);
+        expect(mockSetModelLanguage).toHaveBeenCalledWith(textModel, 'lucene');
+        expect(mockSetModelLanguage).not.toHaveBeenCalledWith(markdownModel, 'lucene');
+        expect(mockEditorProps.current.options).toMatchObject({ readOnly: false, fontSize: 16 });
+        expect(mockEditorProps.current.theme).toBe('howler');
+        mockEditorProps.current.onChange('field:value');
+        expect(setQuery).toHaveBeenCalledWith('field:value');
+        unmount();
+    });
+    it('switches to history completion and toggles fzf mode with ctrl+r', () => {
+        mockFzfSearch = true;
+        mockMonaco = {
+            languages: {
+                register: mockRegisterLanguage,
+                registerCompletionItemProvider: mockRegisterCompletionItemProvider,
+                setMonarchTokensProvider: mockSetMonarchTokensProvider
+            },
+            editor: {
+                EndOfLineSequence: { LF: 0 },
+                getModels: () => [],
+                onDidCreateModel: mockOnDidCreateModel,
+                setModelLanguage: mockSetModelLanguage
+            }
+        };
+        const setQuery = vi.fn();
+        const { container } = render(_jsx(QueryEditor, { query: "test", setQuery: setQuery, fontSize: 18, editorOptions: { wordWrap: 'on' } }));
+        expect(mockRegisterCompletionItemProvider).toHaveBeenCalledWith('lucene', mockHistoryCompletion);
+        expect(mockRegisterCompletionItemProvider).not.toHaveBeenCalledWith('yaml', mockYamlCompletion);
+        expect(mockEditorProps.current.options).toMatchObject({ readOnly: false, fontSize: 18, wordWrap: 'on' });
+        fireEvent.keyDown(container.firstChild, { ctrlKey: true, key: 'r' });
+        expect(mockSetFzfSearch).toHaveBeenCalledWith(false);
+    });
+});

package/components/routes/advanced/completionProviders.test.d.ts

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

package/components/routes/advanced/completionProviders.test.js

@@ -0,0 +1,144 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockFacetPost = vi.hoisted(() => vi.fn());
+let mockMonaco = null;
+let fieldContextValue = { hitFields: [], getHitFields: vi.fn() };
+let apiConfigContextValue = { config: { lookups: {} } };
+let recordSearchContextValue = { fzfSearch: false, queryHistory: {}, setFzfSearch: vi.fn() };
+const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const fieldContextToken = vi.hoisted(() => ({ name: 'field-context' }));
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => mockMonaco
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            facet: {
+                hit: {
+                    post: mockFacetPost
+                }
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/app/providers/FieldProvider', () => ({
+    FieldContext: fieldContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: {}
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (_context, selector) => selector(recordSearchContextValue)
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken) {
+                return apiConfigContextValue;
+            }
+            if (context === fieldContextToken) {
+                return fieldContextValue;
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+vi.mock('utils/utils', () => ({
+    twitterShort: (value) => `short:${value}`
+}));
+import useEQLCompletionProvider from './eqlCompletionProvider';
+import useHistoryCompletionProvider from './historyCompletionProvider';
+import useLuceneCompletionProvider from './luceneCompletionProvider';
+import useYamlCompletionProvider from './yamlCompletionProvider';
+describe('advanced completion providers', () => {
+    it('suggests lucene fields, lookup values, and facet values', async () => {
+        const getHitFields = vi.fn();
+        fieldContextValue = {
+            hitFields: [
+                { key: 'event.category', type: 'keyword', description: 'Event category' },
+                { key: 'source.ip', type: 'ip', description: 'IP address' }
+            ],
+            getHitFields
+        };
+        apiConfigContextValue = { config: { lookups: { 'event.category': ['network', 'file', 7] } } };
+        mockMonaco = {
+            languages: { CompletionItemKind: { Constant: 'constant', Property: 'property', Reference: 'ref' } }
+        };
+        mockFacetPost.mockResolvedValue({ 'source.ip': { '1.1.1.1': 2, '8.8.8.8': 1 } });
+        const { result } = renderHook(() => useLuceneCompletionProvider());
+        const baseModel = {
+            getLineContent: () => 'event.ca',
+            getWordUntilPosition: () => ({ startColumn: 1, endColumn: 9 })
+        };
+        const fieldSuggestions = await result.current.provideCompletionItems(baseModel, { lineNumber: 1, column: 9 }, {}, {});
+        expect(getHitFields).toHaveBeenCalled();
+        expect(fieldSuggestions?.suggestions[0]).toMatchObject({
+            label: 'event.category',
+            insertText: 'event.category:',
+            kind: 'property'
+        });
+        const lookupModel = {
+            getLineContent: () => 'event.category: n',
+            getWordUntilPosition: () => ({ startColumn: 17, endColumn: 18 })
+        };
+        const lookupSuggestions = await result.current.provideCompletionItems(lookupModel, { lineNumber: 1, column: 18 }, {}, {});
+        expect(lookupSuggestions?.suggestions).toEqual(expect.arrayContaining([expect.objectContaining({ label: 'network', insertText: 'network', kind: 'constant' })]));
+        apiConfigContextValue = { config: { lookups: {} } };
+        const { result: facetResult } = renderHook(() => useLuceneCompletionProvider());
+        const facetModel = {
+            getLineContent: () => 'source.ip: 1',
+            getWordUntilPosition: () => ({ startColumn: 12, endColumn: 13 })
+        };
+        const facetSuggestions = await facetResult.current.provideCompletionItems(facetModel, { lineNumber: 1, column: 12 }, {}, {});
+        expect(mockFacetPost).toHaveBeenCalled();
+        expect(facetSuggestions?.suggestions[0]).toMatchObject({ label: '1.1.1.1', insertText: '"1.1.1.1"' });
+    });
+    it('returns no lucene suggestions until monaco is available', async () => {
+        mockMonaco = null;
+        fieldContextValue = { hitFields: [], getHitFields: vi.fn() };
+        apiConfigContextValue = { config: { lookups: {} } };
+        const { result } = renderHook(() => useLuceneCompletionProvider());
+        await expect(result.current.provideCompletionItems({ getLineContent: () => '', getWordUntilPosition: () => ({ startColumn: 1, endColumn: 1 }) }, {
+            lineNumber: 1,
+            column: 1
+        }, {}, {})).resolves.toEqual({ suggestions: [] });
+    });
+    it('suggests yaml fields, eql event categories, and query history', async () => {
+        mockMonaco = {
+            languages: { CompletionItemKind: { Constant: 'constant', Property: 'property', Reference: 'ref' } }
+        };
+        fieldContextValue = {
+            hitFields: [
+                { key: 'event.category', type: 'keyword', description: 'Event category' },
+                { key: 'host.name', type: 'keyword', description: 'Host name' }
+            ]
+        };
+        recordSearchContextValue = {
+            fzfSearch: true,
+            queryHistory: {
+                'event.category:network': '2026-09-18',
+                'host.name:server-1': '2026-09-17'
+            }
+        };
+        const yaml = renderHook(() => useYamlCompletionProvider());
+        expect((await yaml.result.current.provideCompletionItems({ getLineContent: () => 'event.cat', getWordUntilPosition: () => ({ startColumn: 1, endColumn: 9 }) }, { lineNumber: 1, column: 9 }, {}, {}))?.suggestions[0]).toMatchObject({ label: 'event.category', insertText: 'event.category' });
+        const eql = renderHook(() => useEQLCompletionProvider());
+        expect((await eql.result.current.provideCompletionItems({ getLineContent: () => '[', getWordUntilPosition: () => ({ startColumn: 1, endColumn: 1 }) }, { lineNumber: 1, column: 2 }, {}, {}))?.suggestions).toEqual(expect.arrayContaining([expect.objectContaining({ label: 'network' }), expect.objectContaining({ label: 'any' })]));
+        const history = renderHook(() => useHistoryCompletionProvider());
+        const historySuggestions = await history.result.current.provideCompletionItems({
+            getLineContent: () => 'event',
+            getWordAtPosition: () => ({ word: 'event' })
+        }, { lineNumber: 1, column: 6 }, {}, {});
+        expect(historySuggestions?.suggestions[0]).toMatchObject({
+            label: 'event.category:network',
+            kind: 'ref',
+            detail: 'short:2026-09-18'
+        });
+    });
+});

package/components/routes/analytics/AnalyticComments.test.d.ts

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

package/components/routes/analytics/AnalyticComments.test.js

@@ -0,0 +1,156 @@
+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());
+let appUserValue = { user: { username: 'demo' } };
+let searchParamsValue = new URLSearchParams();
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Clear: () => _jsx("div", { children: "clear-icon" }),
+        Send: () => _jsx("div", { children: "send-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Chip: ({ label }) => _jsx("div", { children: label }),
+    Divider: () => _jsx("div", { children: "divider" }),
+    IconButton: ({ children, onClick, disabled }) => (_jsx("button", { disabled: disabled, onClick: onClick, children: children })),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    TextField: ({ inputRef, onKeyDown, onChangeCapture, placeholder }) => (_jsx("textarea", { "aria-label": placeholder, ref: inputRef, onKeyDown: onKeyDown, onChange: onChangeCapture })),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => appUserValue
+}));
+vi.mock('api', () => ({
+    default: {
+        analytic: {
+            comments: {
+                post: (analyticId, value, filter) => ({ analyticId, value, filter, op: 'post' }),
+                del: (analyticId, ids) => ({ analyticId, ids, op: 'del' }),
+                put: (analyticId, commentId, value) => ({ analyticId, commentId, value, op: 'put' }),
+                react: {
+                    put: (analyticId, commentId, type) => ({
+                        analyticId,
+                        commentId,
+                        type,
+                        op: 'react-put'
+                    }),
+                    del: (analyticId, commentId) => ({ analyticId, commentId, op: 'react-del' })
+                }
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex" })
+}));
+vi.mock('components/elements/Comment', () => ({
+    default: ({ comment, handleDelete, handleEdit, handleQuote, handleReact, extra }) => (_jsxs("div", { children: [_jsx("div", { children: comment.value }), _jsxs("button", { onClick: handleDelete, children: ["delete-", comment.id] }), _jsxs("button", { onClick: () => handleEdit(`edit-${comment.id}`), children: ["edit-", comment.id] }), _jsxs("button", { onClick: handleQuote, children: ["quote-", comment.id] }), _jsxs("button", { onClick: () => handleReact('thumbs_up'), children: ["react-", comment.id] }), _jsxs("button", { onClick: () => handleReact(null), children: ["unreact-", comment.id] }), extra] }))
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar:${userId}` })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMyUserList', () => ({
+    default: () => ({ demo: { username: 'demo' }, user2: { username: 'user2' } })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParamsValue]
+}));
+import AnalyticComments from './AnalyticComments';
+describe('AnalyticComments', () => {
+    beforeEach(() => {
+        appUserValue = { user: { username: 'demo' } };
+        searchParamsValue = new URLSearchParams();
+        mockDispatchApi.mockReset().mockImplementation(async (value) => value);
+    });
+    it('submits comments and clears the input', async () => {
+        const setAnalytic = vi.fn();
+        mockDispatchApi.mockResolvedValueOnce({ analytic_id: 'an-1', comment: [] });
+        render(_jsx(AnalyticComments, { analytic: { analytic_id: 'an-1', comment: [] }, setAnalytic: setAnalytic }));
+        const input = screen.getByLabelText('comments.add.analytic');
+        fireEvent.change(input, { target: { value: 'hello world' } });
+        fireEvent.keyDown(input, { key: 'Enter', ctrlKey: true });
+        await Promise.resolve();
+        await Promise.resolve();
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({ analyticId: 'an-1', value: 'hello world', filter: undefined, op: 'post' }, { showError: true, throwError: true, logError: false }));
+        expect(setAnalytic).toHaveBeenCalledWith({ analytic_id: 'an-1', comment: [] });
+        expect(input).toHaveValue('');
+    });
+    it('supports quoting comment text into the input', async () => {
+        vi.useFakeTimers();
+        const setAnalytic = vi.fn();
+        render(_jsx(AnalyticComments, { analytic: {
+                analytic_id: 'an-1',
+                comment: [{ id: 'c1', user: 'demo', value: 'line one\nline two', timestamp: '2024-01-01T00:00:00Z' }]
+            }, setAnalytic: setAnalytic }));
+        fireEvent.click(screen.getByText('quote-c1'));
+        await vi.advanceTimersByTimeAsync(20);
+        expect(screen.getByLabelText('comments.add.analytic')).toHaveValue('> line one\n> line two\n\n');
+        vi.useRealTimers();
+    });
+    it('filters comments and supports clear, delete, edit, and react flows', async () => {
+        const setAnalytic = vi.fn();
+        searchParamsValue = new URLSearchParams('filter=Det-1');
+        const analytic = {
+            analytic_id: 'an-1',
+            comment: [
+                {
+                    id: 'c1',
+                    user: 'demo',
+                    value: 'first',
+                    detection: 'Det-1',
+                    timestamp: '2024-01-02T00:00:00Z',
+                    reactions: { other: 'smile' }
+                },
+                {
+                    id: 'c2',
+                    user: 'user2',
+                    value: 'second',
+                    detection: 'Det-2',
+                    timestamp: '2024-01-01T00:00:00Z',
+                    reactions: { demo: 'smile' }
+                }
+            ]
+        };
+        render(_jsx(AnalyticComments, { analytic: analytic, setAnalytic: setAnalytic }));
+        expect(screen.getByText('first')).toBeInTheDocument();
+        expect(screen.queryByText('second')).not.toBeInTheDocument();
+        const input = screen.getByLabelText('comments.add.detection');
+        fireEvent.change(input, { target: { value: 'abc' } });
+        fireEvent.keyDown(input, { key: 'a' });
+        fireEvent.click(screen.getByText('clear-icon'));
+        expect(input).toHaveValue('');
+        fireEvent.click(screen.getByText('delete-c1'));
+        expect(mockDispatchApi).toHaveBeenCalledWith({ analyticId: 'an-1', ids: ['c1'], op: 'del' });
+        await Promise.resolve();
+        await Promise.resolve();
+        expect(setAnalytic).toHaveBeenCalledWith({
+            ...analytic,
+            comment: [analytic.comment[1]]
+        });
+        fireEvent.click(screen.getByText('edit-c1'));
+        expect(mockDispatchApi).toHaveBeenCalledWith({ analyticId: 'an-1', commentId: 'c1', value: 'edit-c1', op: 'put' });
+        await Promise.resolve();
+        await Promise.resolve();
+        fireEvent.click(screen.getByText('react-c1'));
+        expect(mockDispatchApi).toHaveBeenCalledWith({
+            analyticId: 'an-1',
+            commentId: 'c1',
+            type: 'thumbs_up',
+            op: 'react-put'
+        });
+        await Promise.resolve();
+        await Promise.resolve();
+        fireEvent.click(screen.getByText('unreact-c1'));
+        expect(mockDispatchApi).toHaveBeenCalledWith({ analyticId: 'an-1', commentId: 'c1', op: 'react-del' });
+    });
+});

package/components/routes/analytics/AnalyticDetails.test.d.ts

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

package/components/routes/analytics/AnalyticDetails.test.js

@@ -0,0 +1,161 @@
+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 apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const userListContextToken = vi.hoisted(() => ({ name: 'user-list-context' }));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockSearchUsers = vi.hoisted(() => vi.fn());
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+let paramsValue = { id: 'an-1' };
+let searchParamsValue = new URLSearchParams();
+let apiConfigValue = { config: { configuration: { features: { notebook: true } } } };
+let userListValue = {
+    users: { owner1: { name: 'Owner Name', email: 'owner@example.com' } },
+    searchUsers: mockSearchUsers
+};
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return { ...actual, OpenInNew: () => _jsx("div", { children: "open-icon" }) };
+});
+vi.mock('@mui/material', () => ({
+    Autocomplete: ({ onChange, options, value }) => (_jsxs("div", { children: [_jsx("span", { children: `filter:${value ?? ''}` }), _jsx("button", { onClick: () => onChange(null, options[0] ?? null), children: "change-filter" })] })),
+    Divider: () => _jsx("div", { children: "divider" }),
+    Grid: ({ children }) => _jsx("div", { children: children }),
+    IconButton: ({ children }) => _jsx("div", { children: children }),
+    Skeleton: () => _jsx("div", { children: "loading" }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Tab: ({ label, onClick, value }) => (_jsx("button", { "data-value": value, onClick: onClick, children: label })),
+    Tabs: ({ children, onChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange(null, 'comments'), children: "switch-comments" }), children] })),
+    TextField: ({ label }) => _jsx("div", { children: label }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useTheme: () => ({ spacing: (v) => `${v * 8}px` })
+}));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        analytic: {
+            get: (id) => ({ op: 'get', id }),
+            owner: {
+                post: (analyticId, body) => ({ op: 'owner', analyticId, body })
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/app/providers/UserListProvider', () => ({
+    UserListContext: userListContextToken
+}));
+vi.mock('components/elements/UserList', () => ({
+    default: ({ onChange, userIds }) => (_jsx("button", { onClick: () => onChange(['owner2']), children: `user-list:${userIds.join(',')}` }))
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: `avatar:${userId}` })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    Link: ({ children }) => _jsx("div", { children: children }),
+    useParams: () => paramsValue,
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('./AnalyticComments', () => ({
+    default: () => _jsx("div", { children: "comments-tab" })
+}));
+vi.mock('./AnalyticHitComments', () => ({
+    default: () => _jsx("div", { children: "hit-comments-tab" })
+}));
+vi.mock('./AnalyticNotebooks', () => ({
+    default: () => _jsx("div", { children: "notebooks-tab" })
+}));
+vi.mock('./AnalyticOverview', () => ({
+    default: () => _jsx("div", { children: "overview-tab" })
+}));
+vi.mock('./AnalyticOverviews', () => ({
+    default: () => _jsx("div", { children: "overviews-tab" })
+}));
+vi.mock('./AnalyticTemplates', () => ({
+    default: () => _jsx("div", { children: "templates-tab" })
+}));
+vi.mock('./TriageSettings', () => ({
+    default: () => _jsx("div", { children: "triage-tab" })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return apiConfigValue;
+            if (context === userListContextToken)
+                return userListValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import AnalyticDetails from './AnalyticDetails';
+describe('AnalyticDetails', () => {
+    beforeEach(() => {
+        paramsValue = { id: 'an-1' };
+        searchParamsValue = new URLSearchParams();
+        apiConfigValue = { config: { configuration: { features: { notebook: true } } } };
+        userListValue = {
+            users: { owner1: { name: 'Owner Name', email: 'owner@example.com' } },
+            searchUsers: mockSearchUsers
+        };
+        mockDispatchApi.mockReset().mockImplementation(async (request) => {
+            if (request.op === 'owner') {
+                return {
+                    analytic_id: request.analyticId,
+                    name: 'Analytic Alpha',
+                    owner: request.body.username,
+                    contributors: ['owner2', 'user-2'],
+                    detections: ['det-1', 'det-2']
+                };
+            }
+            return {
+                analytic_id: request.id,
+                name: 'Analytic Alpha',
+                owner: 'owner1',
+                contributors: ['owner1', 'user-2'],
+                detections: ['det-1', 'det-2']
+            };
+        });
+        mockSearchUsers.mockReset();
+        mockSetSearchParams.mockReset();
+    });
+    it('loads analytics, shows owner and contributors, updates filter params, and changes owner', async () => {
+        render(_jsx(AnalyticDetails, {}));
+        await waitFor(() => expect(screen.getByText('Analytic Alpha')).toBeInTheDocument());
+        expect(screen.getByText('user-list:owner1')).toBeInTheDocument();
+        expect(screen.getByText('Owner Name')).toBeInTheDocument();
+        expect(screen.getByText('owner@example.com')).toBeInTheDocument();
+        expect(screen.getByText('avatar:user-2')).toBeInTheDocument();
+        expect(screen.getByText('overview-tab')).toBeInTheDocument();
+        expect(mockSearchUsers).toHaveBeenCalledWith('uname:"owner1"');
+        fireEvent.click(screen.getByText('switch-comments'));
+        await waitFor(() => expect(screen.getByText('comments-tab')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('change-filter'));
+        await waitFor(() => expect(mockSetSearchParams).toHaveBeenCalled());
+        fireEvent.click(screen.getByText('user-list:owner1'));
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledWith({ op: 'owner', analyticId: 'an-1', body: { username: 'owner2' } }, expect.objectContaining({ throwError: true, showError: true })));
+    });
+    it('clears analytic state when no route id exists and hides notebook tabs when disabled', async () => {
+        paramsValue = {};
+        searchParamsValue = new URLSearchParams('tab=triage');
+        apiConfigValue = { config: { configuration: { features: { notebook: false } } } };
+        render(_jsx(AnalyticDetails, {}));
+        expect(screen.queryByText('route.analytics.tab.notebooks')).not.toBeInTheDocument();
+        expect(screen.getAllByText('loading').length).toBeGreaterThan(0);
+        fireEvent.click(screen.getByText('route.analytics.tab.triage'));
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+});

package/components/routes/analytics/AnalyticNotebooks.test.d.ts

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