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

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

@@ -0,0 +1,185 @@
+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 mockGetHitFields = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockLucenePost = vi.hoisted(() => vi.fn());
+const mockFacetPost = vi.hoisted(() => vi.fn());
+const mockGroupedPost = vi.hoisted(() => vi.fn());
+const mockExplainPost = vi.hoisted(() => vi.fn());
+const mockEqlPost = vi.hoisted(() => vi.fn());
+const mockSigmaPost = vi.hoisted(() => vi.fn());
+const mockSetValue = vi.hoisted(() => vi.fn());
+const mockDispose = vi.hoisted(() => vi.fn());
+const fieldContextToken = vi.hoisted(() => ({ name: 'field-context' }));
+let fieldContextValue;
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => ({
+        KeyMod: { CtrlCmd: 1 },
+        KeyCode: { Enter: 2 },
+        editor: {
+            addEditorAction: () => ({ dispose: mockDispose }),
+            getModels: () => [{ setValue: mockSetValue }]
+        }
+    })
+}));
+vi.mock('@mui/icons-material', () => ({
+    OpenInNew: () => _jsx("div", { children: "open-icon" }),
+    PlayArrowOutlined: () => _jsx("div", { children: "play-icon" })
+}));
+vi.mock('@mui/material', () => ({
+    Alert: ({ children }) => _jsx("div", { children: children }),
+    AlertTitle: ({ children }) => _jsx("div", { children: children }),
+    Autocomplete: ({ options, onChange, renderInput, multiple }) => (_jsxs("div", { children: [renderInput({}), options.map((option) => (_jsx("button", { onClick: () => onChange?.(null, multiple ? [option] : option), children: String(option) }, String(option))))] })),
+    Box: ({ children, onMouseDown }) => _jsx("div", { onMouseDown: onMouseDown, children: children }),
+    Card: ({ children }) => _jsx("div", { children: children }),
+    Checkbox: ({ checked, onChange }) => (_jsx("button", { onClick: () => onChange?.(null, !checked), children: checked ? 'checked' : 'unchecked' })),
+    Chip: ({ label }) => _jsx("div", { children: label }),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    FormControlLabel: ({ control, label }) => (_jsxs("div", { children: [control, label] })),
+    IconButton: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
+    ListItemText: ({ primary, secondary }) => (_jsxs("div", { children: [primary, secondary] })),
+    Slider: ({ onChange }) => _jsx("button", { onClick: () => onChange?.(null, 3), children: "rows-slider" }),
+    Stack: ({ children, onKeyDown }) => _jsx("div", { onKeyDown: onKeyDown, children: children }),
+    TextField: ({ label }) => _jsx("div", { children: label }),
+    Tooltip: ({ children }) => _jsx(_Fragment, { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children }),
+    useMediaQuery: () => false,
+    useTheme: () => ({ palette: { divider: '#ddd', background: { paper: '#fff' } }, shape: { borderRadius: 4 } })
+}));
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children }),
+    parseEvent: (event) => ({ isCtrl: !!event.ctrlKey, isEnter: event.key === 'Enter' })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: mockLucenePost,
+                explain: { post: mockExplainPost },
+                eql: { post: mockEqlPost },
+                sigma: { post: mockSigmaPost }
+            },
+            facet: {
+                hit: { post: mockFacetPost }
+            },
+            grouped: {
+                hit: { post: mockGroupedPost }
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/FieldProvider', () => ({
+    FieldContext: fieldContextToken
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, onClick, disabled, to }) => (_jsx("button", { onClick: onClick, disabled: disabled, "data-to": to, children: children }))
+}));
+vi.mock('components/elements/addons/layout/FlexOne', () => ({
+    default: () => _jsx("div", { children: "flex" })
+}));
+vi.mock('components/elements/display/json/JSONViewer', () => ({
+    default: ({ data, collapse }) => _jsx("div", { children: `json:${JSON.stringify(data)}:${String(collapse)}` })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    Link: ({ children, to }) => _jsx("a", { href: to, children: children })
+}));
+vi.mock('utils/stringUtils', () => ({
+    sanitizeMultilineLucene: (value) => value.replace(/\s+/g, ' ').trim()
+}));
+vi.mock('uuid', () => ({
+    v4: () => 'uuid-value'
+}));
+vi.mock('./QueryEditor', () => ({
+    default: ({ query, setQuery }) => (_jsxs("div", { children: [_jsx("div", { children: query }), _jsx("button", { onClick: () => setQuery('updated query'), children: "set-query" })] }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === fieldContextToken)
+                return fieldContextValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import QueryBuilder from './QueryBuilder';
+describe('QueryBuilder', () => {
+    beforeEach(() => {
+        fieldContextValue = {
+            hitFields: [{ key: 'howler.id' }, { key: 'event.id' }],
+            getHitFields: mockGetHitFields
+        };
+        mockGetHitFields.mockClear();
+        mockLucenePost.mockReset().mockResolvedValue({ items: [{ id: 1 }] });
+        mockFacetPost.mockReset().mockResolvedValue({ items: [{ value: 'x' }] });
+        mockGroupedPost.mockReset().mockResolvedValue({ items: [{ value: 'g' }] });
+        mockExplainPost.mockReset().mockResolvedValue({ explanation: true });
+        mockEqlPost.mockReset().mockResolvedValue({ items: [{ id: 2 }] });
+        mockSigmaPost.mockReset().mockResolvedValue({ items: [{ id: 3 }] });
+        mockSetValue.mockReset();
+        mockDispose.mockReset();
+    });
+    it('executes lucene, facet, groupby, and explain searches', async () => {
+        render(_jsx(QueryBuilder, {}));
+        await waitFor(() => expect(mockGetHitFields).toHaveBeenCalled());
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockLucenePost).toHaveBeenCalledWith({
+            query: '# Match any howler.id value howler.id:* AND # Hits must be open howler.status:open',
+            fl: undefined,
+            rows: 5
+        }));
+        fireEvent.click(screen.getByText('facet'));
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockFacetPost).toHaveBeenCalledWith({
+            query: '# Match any howler.id value howler.id:* AND # Hits must be open howler.status:open',
+            rows: 5,
+            fields: ['howler.id']
+        }));
+        fireEvent.click(screen.getByText('groupby'));
+        expect(screen.getByText('route.actions.execute')).toBeDisabled();
+        fireEvent.click(screen.getAllByText('howler.id')[0]);
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockGroupedPost).toHaveBeenCalledWith('howler.id', {
+            query: '# Match any howler.id value howler.id:* AND # Hits must be open howler.status:open',
+            fl: undefined,
+            rows: 5
+        }));
+        fireEvent.click(screen.getByText('explain'));
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockExplainPost).toHaveBeenCalledWith({
+            query: '# Match any howler.id value howler.id:* AND # Hits must be open howler.status:open'
+        }));
+    });
+    it('switches query types, resets monaco content, and executes eql and sigma searches', async () => {
+        render(_jsx(QueryBuilder, {}));
+        fireEvent.click(screen.getByText('rows-slider'));
+        fireEvent.click(screen.getByText('eql'));
+        await waitFor(() => expect(mockSetValue).toHaveBeenCalled());
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockEqlPost).toHaveBeenCalledWith({
+            eql_query: '# Match any howler.id value howler.id:* AND # Hits must be open howler.status:open',
+            fl: undefined,
+            rows: 50
+        }));
+        fireEvent.click(screen.getByText('yaml'));
+        fireEvent.click(screen.getByText('set-query'));
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(mockSigmaPost).toHaveBeenCalledWith(expect.objectContaining({
+            sigma: 'updated query',
+            fl: undefined,
+            rows: 50
+        })));
+    });
+    it('shows errors when a search fails', async () => {
+        mockLucenePost.mockRejectedValueOnce(new Error('search failed'));
+        render(_jsx(QueryBuilder, {}));
+        fireEvent.click(screen.getByText('route.actions.execute'));
+        await waitFor(() => expect(screen.getByText('route.advanced.error')).toBeInTheDocument());
+        expect(screen.getByText('search failed')).toBeInTheDocument();
+    });
+});

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

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

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 {};