@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

package/components/routes/cases/detail/CreateRuleDialog.test.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key, i18n: { language: 'en' } })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('components/routes/advanced/QueryEditor', () => ({
+    default: ({ query, setQuery, id }) => (_jsx("textarea", { id: id ?? 'query-editor', value: query, onChange: e => setQuery(e.target.value) }))
+}));
+vi.mock('components/elements/display/QueryResultText', () => ({
+    default: ({ count, query }) => (_jsxs("div", { id: "query-result-text", children: [count, " results for ", query] }))
+}));
+vi.mock('@monaco-editor/react', () => ({
+    useMonaco: () => null
+}));
+vi.mock('@mui/x-date-pickers', () => ({
+    LocalizationProvider: ({ children }) => _jsx(_Fragment, { children: children })
+}));
+vi.mock('@mui/x-date-pickers/AdapterDayjs', () => ({
+    AdapterDayjs: class {
+    }
+}));
+vi.mock('components/elements/display/ChipPopper', () => ({
+    default: ({ children }) => _jsx(_Fragment, { children: children })
+}));
+import api from '@cccsaurora/howler-ui/api';
+import CreateRuleDialog from './CreateRuleDialog';
+describe('CreateRuleDialog', () => {
+    const defaultProps = {
+        open: true,
+        onClose: vi.fn(),
+        onSubmit: vi.fn().mockResolvedValue(undefined)
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders nothing when closed', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps, open: false }));
+        expect(screen.queryByTestId('create-rule-dialog')).not.toBeInTheDocument();
+    });
+    it('renders dialog fields when open', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        expect(screen.getByTestId('create-rule-dialog')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-query-editor')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-destination-input')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-timeframe-input')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-no-expiry-checkbox')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-expire-after-resolved')).toBeInTheDocument();
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+    it('disables submit when query is empty', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        expect(screen.getByTestId('rule-submit-button')).toBeDisabled();
+    });
+    it('disables submit when destination is empty', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        expect(screen.getByTestId('rule-submit-button')).toBeDisabled();
+    });
+    it('enables submit when query, destination are filled and search has been run', async () => {
+        const user = userEvent.setup();
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 5, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('rule-submit-button')).not.toBeDisabled();
+        });
+    });
+    it('calls onSubmit with rule data when submitted', async () => {
+        const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                query: 'event.kind:alert',
+                destination: 'alerts/incoming',
+                indexes: ['hit']
+            }));
+        });
+    });
+    it('calls onClose when cancel is clicked', async () => {
+        const user = userEvent.setup();
+        const onClose = vi.fn();
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onClose: onClose }));
+        await act(async () => {
+            await user.click(screen.getByText('cancel'));
+        });
+        expect(onClose).toHaveBeenCalled();
+    });
+    it('shows search results after triggering search', async () => {
+        const user = userEvent.setup();
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 42, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('query-result-text')).toBeInTheDocument();
+            expect(screen.getByText(/42 results/)).toBeInTheDocument();
+        });
+    });
+    it('shows prompt text before search is triggered', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        expect(screen.getByText('hit.search.prompt')).toBeInTheDocument();
+        expect(screen.queryByTestId('query-result-text')).not.toBeInTheDocument();
+    });
+    it('includes timeframe as number when expiry is enabled', async () => {
+        const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                timeframe: 14
+            }));
+        });
+    });
+    it('omits timeframe when no expiry is checked', async () => {
+        const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-no-expiry-checkbox'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                query: 'event.kind:alert',
+                destination: 'alerts/incoming',
+                timeframe: null
+            }));
+        });
+    });
+    it('includes expire_after_resolved when checkbox is checked', async () => {
+        const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-expire-after-resolved'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                timeframe: 14,
+                expire_after_resolved: true
+            }));
+        });
+    });
+    it('defaults to hit index checked', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        // With 'hit' selected by default, its chip appears in the Autocomplete input area
+        expect(screen.getAllByText('hit.search.index.hit').length).toBeGreaterThan(0);
+        // 'event' is not selected, so its chip should not appear
+        expect(screen.queryByText('hit.search.index.event')).not.toBeInTheDocument();
+    });
+    it('includes both indexes when both are selected', async () => {
+        const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
+        api.search.hit.post.mockReturnValue('search-request');
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        // Open the index Autocomplete and select 'event'
+        await act(async () => {
+            await user.click(screen.getByRole('combobox'));
+        });
+        await act(async () => {
+            await user.click(screen.getByRole('option', { name: 'hit.search.index.event' }));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-search-button'));
+        });
+        await act(async () => {
+            await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                indexes: expect.arrayContaining(['hit', 'event'])
+            }));
+        });
+    });
+    it('prevents deselecting the last index', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        // 'hit' is selected by default; open the dropdown and try to deselect it
+        await act(async () => {
+            await user.click(screen.getByRole('combobox'));
+        });
+        await act(async () => {
+            await user.click(screen.getByRole('option', { name: 'hit.search.index.hit' }));
+        });
+        // 'hit' should still be selected because deselecting the last index is prevented
+        expect(screen.getAllByText('hit.search.index.hit').length).toBeGreaterThan(0);
+    });
+});

package/components/routes/cases/detail/ItemPage.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const ItemPage: FC<{
+    case?: Case;
+}>;
+export default ItemPage;

package/components/routes/cases/detail/ItemPage.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
+import InformationPane from '@cccsaurora/howler-ui/components/routes/hits/search/InformationPane';
+import { useEffect, useMemo, useState } from 'react';
+import { useOutletContext, useParams } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+import { buildPathFromID } from '../utils';
+import CaseDashboard from './CaseDashboard';
+import MarkdownPage from './MarkdownPage';
+const ItemPage = ({ case: providedCase }) => {
+    const params = useParams();
+    const routeCase = useOutletContext();
+    const { case: fetchedCase } = useCase({ caseId: !providedCase && !routeCase ? params.id : undefined });
+    const _case = providedCase ?? routeCase ?? fetchedCase;
+    const { dispatchApi } = useMyApi();
+    const [item, setItem] = useState(null);
+    const [loading, setLoading] = useState(true);
+    // When rendered as a child route, the wildcard segment is in params['*'].
+    // When rendered directly with a case prop, fall back to parsing the pathname.
+    const subPath = params['*'] ?? '';
+    const normalizedSubPath = useMemo(() => subPath.replace(/^\/+|\/+$/g, ''), [subPath]);
+    useEffect(() => {
+        let cancelled = false;
+        const resolveItem = async () => {
+            setLoading(true);
+            if (!normalizedSubPath) {
+                if (!cancelled) {
+                    setItem(null);
+                    setLoading(false);
+                }
+                return;
+            }
+            let currentCase = _case;
+            let remainingPath = normalizedSubPath;
+            while (currentCase && remainingPath) {
+                const currentRemainingPath = remainingPath;
+                const matchedNestedCase = currentCase.items
+                    .filter(Boolean)
+                    .find(_item => _item.type === 'case' && currentRemainingPath.startsWith(`${_item.name}/`));
+                if (!matchedNestedCase) {
+                    break;
+                }
+                if (currentRemainingPath === matchedNestedCase.id) {
+                    if (!cancelled) {
+                        setItem(matchedNestedCase);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                if (!matchedNestedCase.value) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.value), { throwError: false });
+                if (!nextCase) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                remainingPath = currentRemainingPath.replace(`${matchedNestedCase.name}/`, '');
+                currentCase = nextCase;
+            }
+            const resolvedItem = currentCase.items.find(_item => buildPathFromID(currentCase, _item.id) === remainingPath);
+            if (!cancelled) {
+                setItem(resolvedItem || null);
+                setLoading(false);
+            }
+        };
+        if (_case) {
+            resolveItem();
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [_case, dispatchApi, normalizedSubPath]);
+    if (loading) {
+        return null;
+    }
+    if (!item) {
+        return _jsx(NotFoundPage, {});
+    }
+    if (item.type === 'hit' || item.type === 'event') {
+        return _jsx(InformationPane, { selected: item.value });
+    }
+    if (item.type === 'case') {
+        return _jsx(CaseDashboard, { caseId: item.value });
+    }
+    if (item.type === 'markdown') {
+        return _jsx(MarkdownPage, { case: _case, item: item });
+    }
+    return _jsx("h1", { children: JSON.stringify(item) });
+};
+export default ItemPage;

package/components/routes/cases/detail/ItemPage.test.d.ts

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

package/components/routes/cases/detail/ItemPage.test.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockApiGet = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: mockApiGet
+            }
+        }
+    }
+}));
+vi.mock('components/routes/404', () => ({
+    default: () => _jsx("div", { id: "not-found", children: "Not Found" })
+}));
+vi.mock('components/routes/hits/search/InformationPane', () => ({
+    default: ({ selected }) => _jsx("div", { id: "information-pane", children: selected })
+}));
+vi.mock('./CaseDashboard', () => ({
+    default: ({ caseId }) => _jsx("div", { id: "case-dashboard", children: caseId })
+}));
+vi.mock('./MarkdownPage', () => ({
+    default: ({ item }) => _jsx("div", { id: "markdown-page", children: item?.value })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: () => ({ case: undefined, loading: false, missing: false })
+}));
+const { mockParams } = setupReactRouterMock();
+const { default: ItemPage } = await import('./ItemPage');
+describe('ItemPage', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // Default to no wildcard path unless a test sets it
+        mockParams['*'] = '';
+    });
+    it('renders NotFoundPage when no subPath is provided', async () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [] });
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('renders MarkdownPage when a markdown item path is resolved', async () => {
+        const markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Notes',
+            value: 'Initial markdown',
+            classification: 'TLP:CLEAR'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [markdownItem] });
+        mockParams['*'] = 'Notes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Initial markdown');
+        });
+    });
+    it('normalizes leading/trailing slashes in subPath', async () => {
+        const markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Notes',
+            value: 'Normalized markdown',
+            classification: 'TLP:CLEAR'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [markdownItem] });
+        mockParams['*'] = '/Notes/';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Normalized markdown');
+        });
+    });
+    it('renders InformationPane for hit item paths', async () => {
+        const hitItem = {
+            id: 'hit-1',
+            parent: null,
+            type: 'hit',
+            name: 'Alert',
+            value: 'selected-hit-id'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [hitItem] });
+        mockParams['*'] = 'Alert';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('information-pane')).toHaveTextContent('selected-hit-id');
+        });
+    });
+    it('resolves nested case segments and renders downstream item', async () => {
+        const nestedMarkdown = {
+            id: 'n-md-1',
+            parent: null,
+            type: 'markdown',
+            name: 'NestedNotes',
+            value: 'Nested markdown content'
+        };
+        const childCase = createMockCase({ case_id: 'child-case-123', items: [nestedMarkdown] });
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockDispatchApi.mockResolvedValueOnce(childCase);
+        mockParams['*'] = 'Child/NestedNotes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledOnce();
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Nested markdown content');
+        });
+    });
+    it('returns NotFound when nested case has no value', async () => {
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: undefined
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockParams['*'] = 'Child/Anything';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('returns NotFound when nested case cannot be fetched', async () => {
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockDispatchApi.mockResolvedValueOnce(null);
+        mockParams['*'] = 'Child/NestedNotes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledOnce();
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('renders CaseDashboard when path equals nested case id', async () => {
+        const caseLink = {
+            id: 'Child/NestedCase',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockParams['*'] = 'Child/NestedCase';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).not.toHaveBeenCalled();
+            expect(screen.getByTestId('case-dashboard')).toHaveTextContent('child-case-123');
+        });
+    });
+    it('resolves hierarchical non-case parent via buildPathFromID', async () => {
+        const folder = {
+            id: 'folder-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Folder'
+        };
+        const doc = {
+            id: 'doc-1',
+            parent: 'folder-1',
+            type: 'markdown',
+            name: 'Doc',
+            value: 'Child content'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [folder, doc] });
+        mockParams['*'] = 'Folder/Doc';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Child content');
+        });
+    });
+    it('renders InformationPane for event item paths', async () => {
+        const eventItem = {
+            id: 'event-1',
+            parent: null,
+            type: 'event',
+            name: 'Incident',
+            value: 'selected-event-id'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [eventItem] });
+        mockParams['*'] = 'Incident';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('information-pane')).toHaveTextContent('selected-event-id');
+        });
+    });
+    it('falls back to JSON render for unknown item types', async () => {
+        const otherItem = {
+            id: 'other-1',
+            parent: null,
+            type: 'other',
+            name: 'Other',
+            value: 'misc'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [otherItem] });
+        mockParams['*'] = 'Other';
+        const { container } = render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(container.querySelector('h1')).toBeTruthy();
+            expect(container.querySelector('h1')?.textContent).toContain('other-1');
+        });
+    });
+    it('renders NotFoundPage when no item matches the given path', async () => {
+        const otherItem = {
+            id: 'item-2',
+            parent: null,
+            type: 'markdown',
+            name: 'Other',
+            value: 'Other content'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [otherItem] });
+        mockParams['*'] = 'UnknownPath';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+});

package/components/routes/cases/detail/MarkdownPage.d.ts

@@ -0,0 +1,8 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import { type FC } from 'react';
+declare const MarkdownPage: FC<{
+    case: Case;
+    item: Item;
+}>;
+export default MarkdownPage;