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

package/components/routes/analytics/widgets/Assessment.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockFacetPost = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Skeleton: () => _jsx("div", { children: "loading" }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            facet: { hit: { post: mockFacetPost } }
+        }
+    }
+}));
+vi.mock('chartjs-adapter-dayjs-4', () => ({}));
+vi.mock('components/hooks/useMyChart', () => ({
+    default: () => ({
+        bar: (title) => ({ title })
+    })
+}));
+vi.mock('react-chartjs-2', () => ({
+    Bar: ({ data, options }) => _jsx("div", { children: JSON.stringify({ data, options }) })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import Assessment from './Assessment';
+describe('Assessment', () => {
+    beforeEach(() => {
+        mockFacetPost.mockReset();
+    });
+    it('shows a skeleton when no analytic is provided', () => {
+        render(_jsx(Assessment, { analytic: undefined }));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('renders a bar chart with facet data', async () => {
+        mockFacetPost.mockResolvedValueOnce({ 'howler.assessment': { malicious: 3, suspicious: 1 } });
+        render(_jsx(Assessment, { analytic: { name: 'Alpha' } }));
+        await waitFor(() => expect(screen.getByText(/route.analytics.assessment.title/)).toBeInTheDocument());
+        expect(screen.getByText(/"malicious"/)).toBeInTheDocument();
+    });
+});

package/components/routes/analytics/widgets/Created.test.d.ts

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

package/components/routes/analytics/widgets/Created.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockHistogramPost = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    Skeleton: () => _jsx("div", { children: "loading" })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            histogram: { hit: { post: mockHistogramPost } }
+        }
+    }
+}));
+vi.mock('chartjs-adapter-dayjs-4', () => ({}));
+vi.mock('components/hooks/useMyChart', () => ({
+    default: () => ({
+        line: (title) => ({ title })
+    })
+}));
+vi.mock('react-chartjs-2', () => ({
+    Line: ({ data, options }) => _jsx("div", { children: JSON.stringify({ data, options }) })
+}));
+import Created from './Created';
+describe('Created', () => {
+    beforeEach(() => {
+        mockHistogramPost.mockReset();
+    });
+    it('renders a skeleton while no analytic is provided', () => {
+        render(_jsx(Created, { analytic: undefined }));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('loads histogram data into the line chart', async () => {
+        mockHistogramPost.mockResolvedValueOnce({ '2024-01-01T00:00:00Z': 2, '2024-01-02T00:00:00Z': 0 });
+        render(_jsx(Created, { analytic: { name: 'Alpha' } }));
+        await waitFor(() => expect(mockHistogramPost).toHaveBeenCalled());
+        expect(screen.getByText(/route.analytics.ingestion.title/)).toBeInTheDocument();
+        expect(screen.getByText(/"label":"Alpha"/)).toBeInTheDocument();
+    });
+});

package/components/routes/analytics/widgets/DetectionStatus.test.d.ts

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

package/components/routes/analytics/widgets/DetectionStatus.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockStacked = vi.hoisted(() => vi.fn(({ field }) => _jsx("div", { children: field })));
+vi.mock('@mui/material', () => ({
+    useTheme: () => ({ palette: { grey: { 500: '#999' } } })
+}));
+vi.mock('chartjs-adapter-dayjs-4', () => ({}));
+vi.mock('./Stacked', () => ({
+    default: (props) => mockStacked(props)
+}));
+import Detection from './Detection';
+import Status from './Status';
+describe('Detection and Status', () => {
+    it('pass their analytic fields into the shared stacked widget', () => {
+        render(_jsxs("div", { children: [_jsx(Detection, { analytic: { name: 'Alpha' } }), _jsx(Status, { analytic: { name: 'Alpha' } })] }));
+        expect(screen.getByText('howler.detection')).toBeInTheDocument();
+        expect(screen.getByText('howler.status')).toBeInTheDocument();
+    });
+});

package/components/routes/analytics/widgets/Stacked.test.d.ts

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

package/components/routes/analytics/widgets/Stacked.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockFacetPost = vi.hoisted(() => vi.fn());
+const mockHistogramPost = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    Skeleton: () => _jsx("div", { children: "loading" })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            facet: { hit: { post: mockFacetPost } },
+            histogram: { hit: { post: mockHistogramPost } }
+        }
+    }
+}));
+vi.mock('chartjs-adapter-dayjs-4', () => ({}));
+vi.mock('components/hooks/useMyChart', () => ({
+    default: () => ({
+        line: (title) => ({ plugins: { legend: { title } }, scales: { y: { beginAtZero: true } } })
+    })
+}));
+vi.mock('react-chartjs-2', () => ({
+    Line: ({ data, options }) => _jsx("div", { children: JSON.stringify({ data, options }) })
+}));
+import Stacked from './Stacked';
+describe('Stacked', () => {
+    beforeEach(() => {
+        mockFacetPost.mockReset();
+        mockHistogramPost.mockReset();
+    });
+    it('shows a skeleton without an analytic', () => {
+        render(_jsx(Stacked, { analytic: undefined, field: "howler.status" }));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('loads facet and histogram data into stacked chart datasets', async () => {
+        mockFacetPost.mockResolvedValueOnce({ 'howler.status': { open: 4, closed: 2 } });
+        mockHistogramPost
+            .mockResolvedValueOnce({ '2024-01-01T00:00:00Z': 2, '2024-01-02T00:00:00Z': 3 })
+            .mockResolvedValueOnce({ '2024-01-01T00:00:00Z': 1, '2024-01-02T00:00:00Z': 1 });
+        render(_jsx(Stacked, { analytic: { name: 'Alpha' }, field: "howler.status", color: value => `${value}-color` }));
+        await waitFor(() => expect(mockFacetPost).toHaveBeenCalledWith({ query: 'howler.analytic:("Alpha")', fields: ['howler.status'] }));
+        await waitFor(() => expect(mockHistogramPost).toHaveBeenCalledTimes(2));
+        const output = screen.getByText(/route.analytics.status.title/).textContent ?? '';
+        expect(output).toContain('"stacked":true');
+        expect(output).toContain('"label":"open"');
+        expect(output).toContain('"label":"closed"');
+        expect(output).toContain('"borderColor":"open-color"');
+    });
+});

package/components/routes/cases/Cases.test.d.ts

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

package/components/routes/cases/Cases.test.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import dayjs from 'dayjs';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+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 listMethodContextToken = vi.hoisted(() => ({ name: 'list-method-context' }));
+let searchParamsValue = new URLSearchParams();
+let responseValue = {
+    total: 1,
+    items: [{ case_id: 'case-1', owner: 'demo' }]
+};
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        Topic: () => _jsx("div", { children: "topic-icon" })
+    };
+});
+vi.mock('@mui/material', () => ({
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            fuzzy: {
+                post: 'case-search'
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/SearchResponseProvider', () => ({
+    __esModule: true,
+    default: ({ children }) => _jsx("div", { children: children }),
+    createSearchResponseContext: () => ({}),
+    useSearchResponseContext: () => ({
+        response: responseValue,
+        request: mockRequest
+    })
+}));
+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(30), children: "page" }), _jsx("button", { onClick: () => props.onSelect({ id: 'case-1' }), children: "select" }), _jsx("div", { children: props.searchFilters }), props.response?.items?.map((item) => (_jsx("div", { children: props.renderer({ item: { item } }, () => 'card') }, item.case_id)))] }))
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [25]
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate,
+    useSearchParams: () => [searchParamsValue, mockSetSearchParams]
+}));
+vi.mock('./search/CaseAssigneeFilter', () => ({
+    default: ({ onChange }) => _jsx("button", { onClick: () => onChange(['Alice Example']), children: "assignee-filter" })
+}));
+vi.mock('./search/CaseDateFilter', () => ({
+    default: ({ onChange, onCustomStartChange, onCustomEndChange }) => (_jsxs("div", { children: [_jsx("button", { onClick: () => onChange('date.range.1.day'), children: "date-range" }), _jsx("button", { onClick: () => onChange('date.range.custom'), children: "date-custom" }), _jsx("button", { onClick: () => onCustomStartChange(dayjs('2026-01-01T00:00:00.000Z')), children: "custom-start" }), _jsx("button", { onClick: () => onCustomEndChange(dayjs('2026-01-02T00:00:00.000Z')), children: "custom-end" })] }))
+}));
+vi.mock('./search/CaseStatusFilter', () => ({
+    default: ({ onChange }) => _jsx("button", { onClick: () => onChange(['open', 'triaged']), children: "status-filter" })
+}));
+vi.mock('../../elements/case/CaseCard', () => ({
+    default: ({ case: caseItem, className }) => _jsx("div", { children: `${caseItem.case_id}:${className}` })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === listMethodContextToken) {
+                return { load: mockLoad };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import Cases from './Cases';
+describe('Cases', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams();
+        responseValue = {
+            total: 1,
+            items: [{ case_id: 'case-1', owner: 'demo' }]
+        };
+        mockNavigate.mockReset();
+        mockSetSearchParams.mockReset();
+        mockLoad.mockReset();
+        mockRequest.mockReset();
+    });
+    it('searches cases, applies filters, paginates, and navigates to selected cases', async () => {
+        render(_jsx(Cases, {}));
+        await waitFor(() => expect(mockRequest).toHaveBeenCalledWith('case-search', {
+            query: '*',
+            filters: ['status:("open" OR "in-progress")'],
+            rows: 25,
+            offset: 0,
+            indexes: ['case']
+        }));
+        expect(mockLoad).toHaveBeenCalledWith([expect.objectContaining({ id: 'case-1' })]);
+        fireEvent.click(screen.getByText('status-filter'));
+        await waitFor(() => expect(mockRequest).toHaveBeenLastCalledWith('case-search', {
+            query: '*',
+            filters: ['status:("open" OR "triaged")'],
+            rows: 25,
+            offset: 0,
+            indexes: ['case']
+        }));
+        fireEvent.click(screen.getByText('assignee-filter'));
+        await waitFor(() => expect(mockRequest.mock.calls.at(-1)?.[1].filters).toEqual(expect.arrayContaining(['(participants:"Alice Example" OR tasks.assignment:"Alice Example")'])));
+        fireEvent.click(screen.getByText('date-range'));
+        await waitFor(() => expect(mockRequest.mock.calls.at(-1)?.[1].filters).toEqual(expect.arrayContaining(['created:[now-1d/d TO now]'])));
+        fireEvent.click(screen.getByText('date-custom'));
+        fireEvent.click(screen.getByText('custom-start'));
+        fireEvent.click(screen.getByText('custom-end'));
+        await waitFor(() => expect(mockRequest.mock.calls.at(-1)?.[1].filters.some((entry) => entry.startsWith('created:['))).toBe(true));
+        fireEvent.click(screen.getByText('page'));
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('select'));
+        expect(mockNavigate).toHaveBeenCalledWith('/cases/case-1');
+    });
+});

package/components/routes/dossiers/Dossiers.test.d.ts

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

package/components/routes/dossiers/Dossiers.test.js

@@ -0,0 +1,150 @@
+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 modalContextToken = vi.hoisted(() => ({ name: 'modal-context' }));
+const listMethodContextToken = vi.hoisted(() => ({ name: 'list-method-context' }));
+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 mockDossierDelete = vi.hoisted(() => vi.fn((dossierId) => ({ dossierId })));
+let searchParamsValue = new URLSearchParams();
+let responseValue = {
+    total: 2,
+    items: [
+        { dossier_id: 'dos-1', name: 'Alpha' },
+        { dossier_id: 'dos-2', name: 'Bravo' }
+    ]
+};
+vi.mock('@mui/icons-material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return { ...actual, Topic: () => _jsx("div", { children: "topic-icon" }) };
+});
+vi.mock('@mui/material', () => ({
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            dossier: {
+                post: 'dossier-search'
+            }
+        },
+        dossier: {
+            del: mockDossierDelete
+        }
+    }
+}));
+vi.mock('components/app/providers/ModalProvider', () => ({
+    ModalContext: modalContextToken
+}));
+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(30), children: "page" }), _jsx("button", { onClick: () => props.onCreate(), children: "create" }), _jsx("button", { onClick: () => props.onSelect({ id: 'dos-1' }), children: "select" }), _jsx("div", { children: props.aboveSearch }), _jsx("div", { children: String(props.hasError) }), _jsx("div", { children: String(props.searching) }), props.response?.items?.map((item) => (_jsx("div", { children: props.renderer({ item: { item } }, () => 'card') }, item.dossier_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('./DossierCard', () => ({
+    default: ({ dossier, onDelete, className }) => (_jsxs("div", { children: [_jsx("span", { children: `${dossier.dossier_id}:${className}` }), _jsxs("button", { onClick: () => onDelete({
+                    preventDefault: () => undefined,
+                    stopPropagation: () => undefined
+                }, dossier.dossier_id), children: ["remove-", dossier.dossier_id] })] }))
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === listMethodContextToken) {
+                return { load: mockLoad };
+            }
+            if (context === modalContextToken) {
+                return { withConfirmDeleteModal: (fn) => void fn() };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import Dossiers from './Dossiers';
+describe('Dossiers', () => {
+    beforeEach(() => {
+        searchParamsValue = new URLSearchParams();
+        responseValue = {
+            total: 2,
+            items: [
+                { dossier_id: 'dos-1', name: 'Alpha' },
+                { dossier_id: 'dos-2', name: 'Bravo' }
+            ]
+        };
+        mockDispatchApi.mockReset();
+        mockShowSuccessMessage.mockReset();
+        mockNavigate.mockReset();
+        mockSetSearchParams.mockReset();
+        mockLoad.mockReset();
+        mockRequest.mockReset();
+        mockRemove.mockReset();
+        mockGetSearchRequestData.mockClear();
+        mockDossierDelete.mockReset();
+    });
+    it('searches, paginates, and navigates dossiers', async () => {
+        render(_jsx(Dossiers, {}));
+        await waitFor(() => expect(mockRequest).toHaveBeenCalledWith('dossier-search', { query: '*:*', rows: 25, offset: 0 }));
+        expect(mockLoad).toHaveBeenCalledWith([
+            expect.objectContaining({ id: 'dos-1' }),
+            expect.objectContaining({ id: 'dos-2' })
+        ]);
+        fireEvent.click(screen.getByText('page'));
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('select'));
+        expect(mockNavigate).toHaveBeenCalledWith('/dossiers/dos-1/edit');
+        fireEvent.click(screen.getByText('create'));
+        expect(mockNavigate).toHaveBeenCalledWith('/dossiers/create');
+    });
+    it('deletes dossiers and handles delete failures', async () => {
+        mockDispatchApi.mockResolvedValueOnce({});
+        render(_jsx(Dossiers, {}));
+        fireEvent.click(screen.getByText('remove-dos-1'));
+        await waitFor(() => expect(mockDossierDelete).toHaveBeenCalledWith('dos-1'));
+        expect(mockRemove).toHaveBeenCalledWith('dos-1');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('route.dossiers.manager.delete.success');
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        mockDispatchApi.mockRejectedValueOnce(new Error('delete failed'));
+        fireEvent.click(screen.getByText('remove-dos-2'));
+        await waitFor(() => expect(warnSpy).toHaveBeenCalled());
+    });
+});

package/components/routes/help/ActionDocumentation.test.d.ts

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

package/components/routes/help/ActionDocumentation.test.js

@@ -0,0 +1,58 @@
+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 { describe, expect, it, vi } from 'vitest';
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetSearchParams = vi.hoisted(() => vi.fn());
+const searchParams = new URLSearchParams({ tab: 'plugin-doc' });
+const mockExecuteFunction = vi.hoisted(() => vi.fn(() => ({
+    id: 'plugin-doc',
+    i18nKey: 'plugin.doc',
+    component: () => _jsx("div", { children: "plugin documentation" })
+})));
+vi.mock('@mui/material', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('@tui/core', () => ({
+    PageCenter: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/hooks/useScrollRestoration', () => ({
+    useScrollRestoration: vi.fn()
+}));
+vi.mock('plugins/store', () => ({
+    default: {
+        operations: ['triage']
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+vi.mock('react-router', () => ({
+    useSearchParams: () => [searchParams, mockSetSearchParams]
+}));
+vi.mock('./ActionIntroductionDocumentation', () => ({
+    default: () => _jsx("div", { children: "intro documentation" })
+}));
+vi.mock('./components/HelpTabs', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+import ActionDocumentation from './ActionDocumentation';
+describe('ActionDocumentation', () => {
+    it('renders plugin documentation from the selected tab and updates search params on tab change', async () => {
+        const user = userEvent.setup();
+        render(_jsx(ActionDocumentation, {}));
+        expect(screen.getByText('plugin documentation')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'help.actions.introduction' }));
+        expect(screen.getByText('intro documentation')).toBeInTheDocument();
+        expect(mockSetSearchParams).toHaveBeenCalled();
+        expect(mockExecuteFunction).toHaveBeenCalledWith('operation.triage.documentation');
+    });
+});

package/components/routes/help/ActionIntroductionDocumentation.test.d.ts

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

package/components/routes/help/ActionIntroductionDocumentation.test.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockOperationsGet = vi.hoisted(() => vi.fn());
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: { roles: ['analyst'] } })
+}));
+vi.mock('api', () => ({
+    default: {
+        action: {
+            operations: {
+                get: mockOperationsGet
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/search/phrase/Phrase', () => ({
+    default: () => _jsx("div", { children: "phrase" })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ components }) => (_jsxs("div", { children: [_jsx("div", { children: components.action_count }), _jsx("div", { children: components.action_list }), _jsx("div", { children: components.tui_phrase }), _jsx("div", { children: components.operation_select }), _jsx("div", { children: components.operation_configuration }), _jsx("div", { children: components.report }), _jsx("div", { children: components.automation_options })] }))
+}));
+vi.mock('../../elements/display/QueryResultText', () => ({
+    default: ({ count, query }) => (_jsxs("div", { children: [count, ":", query] }))
+}));
+vi.mock('../action/shared/ActionReportDisplay', () => ({
+    default: ({ operations }) => _jsxs("div", { children: ["report:", operations.length] })
+}));
+vi.mock('../action/shared/OperationStep', () => ({
+    default: ({ step }) => _jsxs("div", { children: ["step:", Object.keys(step.args).join(',')] })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+import ActionIntroductionDocumentation from './ActionIntroductionDocumentation';
+describe('ActionIntroductionDocumentation', () => {
+    it('loads permitted operations and renders the markdown component slots', async () => {
+        mockOperationsGet.mockResolvedValue([
+            {
+                id: 'add_label',
+                title: 'Add Label',
+                description: { short: 'Short desc' },
+                roles: ['analyst'],
+                steps: [{ args: { category: true } }]
+            },
+            {
+                id: 'blocked',
+                title: 'Blocked',
+                description: { short: 'Blocked desc' },
+                roles: ['admin'],
+                steps: []
+            }
+        ]);
+        render(_jsx(ActionIntroductionDocumentation, {}));
+        await waitFor(() => expect(screen.getByText('1')).toBeInTheDocument());
+        expect(screen.getByText(/operations.add_label/)).toBeInTheDocument();
+        expect(screen.queryByText(/blocked/i)).toBeNull();
+        expect(screen.getByText('phrase')).toBeInTheDocument();
+        expect(screen.getByText('134:howler.id:*')).toBeInTheDocument();
+        expect(screen.getByText('step:category')).toBeInTheDocument();
+        expect(screen.getByText('report:1')).toBeInTheDocument();
+        expect(screen.getByText('route.actions.trigger.create, route.actions.trigger.promote, route.actions.trigger.demote')).toBeInTheDocument();
+    });
+});

package/components/routes/help/ApiDocumentation.test.d.ts

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