@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { CheckCircleOutline, FilterList, RadioButtonUnchecked, Search } from '@mui/icons-material';
+import { Autocomplete, Box, Button, Card, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import QueryResultText from '@cccsaurora/howler-ui/components/elements/display/QueryResultText';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const DEFAULT_TIMEFRAME_DAYS = 14;
+const PROMPT_CONTEXT = 'isRecordQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
+const OPTIONS = {
+    fontSize: 17,
+    lineHeight: 19,
+    lineNumbers: 'off',
+    lineDecorationsWidth: 0,
+    lineNumbersMinChars: 0,
+    showFoldingControls: 'never',
+    scrollBeyondLastLine: false,
+    glyphMargin: false,
+    renderLineHighlight: 'none',
+    overviewRulerLanes: 0
+};
+const INDEX_OPTIONS = ['hit', 'event'];
+const Subtitle = ({ i18nKey }) => {
+    const { t } = useTranslation();
+    return (_jsx(Typography, { sx: theme => ({
+            color: theme.palette.text.secondary,
+            fontSize: '0.9em',
+            fontStyle: 'italic'
+        }), variant: "body2", children: t(i18nKey) }));
+};
+const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const monaco = useMonaco();
+    const [query, setQuery] = useState('');
+    const [destination, setDestination] = useState('');
+    const [indexes, setIndexes] = useState(['hit']);
+    const [timeframeDays, setTimeframeDays] = useState(DEFAULT_TIMEFRAME_DAYS);
+    const [hasExpiry, setHasExpiry] = useState(true);
+    const [expireAfterResolved, setExpireAfterResolved] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const [response, setResponse] = useState(null);
+    const handleOpen = useCallback(() => {
+        setQuery('');
+        setDestination('');
+        setIndexes(['hit']);
+        setTimeframeDays(DEFAULT_TIMEFRAME_DAYS);
+        setHasExpiry(true);
+        setExpireAfterResolved(false);
+        setResponse(null);
+    }, []);
+    const handleSearch = useCallback(async () => {
+        setSearching(true);
+        try {
+            const result = await dispatchApi(api.search.hit.post({
+                query,
+                rows: 0,
+                track_total_hits: true
+            }));
+            setResponse(result);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, query]);
+    const handleQueryChange = useCallback((q) => {
+        setQuery(q);
+        setResponse(null);
+    }, []);
+    const handleSubmit = useCallback(async () => {
+        if (!query.trim() || !destination.trim()) {
+            return;
+        }
+        setLoading(true);
+        try {
+            await onSubmit({
+                query: query.trim(),
+                destination: destination.trim(),
+                timeframe: hasExpiry ? timeframeDays : null,
+                expire_after_resolved: hasExpiry ? expireAfterResolved : false,
+                indexes
+            });
+            onClose();
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [query, destination, hasExpiry, timeframeDays, expireAfterResolved, indexes, onSubmit, onClose]);
+    const onMount = useCallback((ed) => {
+        ed.createContextKey('isRecordQuery', true);
+    }, []);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const executeDisposable = monaco.editor.addEditorAction({
+            id: 'execute-query',
+            label: t('route.advanced.execute.query'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+            run: handleSearch
+        });
+        return () => {
+            executeDisposable.dispose();
+        };
+    }, [monaco, t, handleSearch]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        let disposable;
+        disposable = monaco.editor.addKeybindingRule({
+            command: 'execute-query',
+            keybinding: monaco.KeyCode.Enter,
+            when: PROMPT_CONTEXT
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [monaco, handleSearch]);
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, id: "create-rule-dialog", TransitionProps: { onEnter: handleOpen }, PaperProps: {
+            elevation: 0
+        }, children: [_jsx(DialogTitle, { children: t('page.cases.rules.create') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 3, sx: { mt: 1 }, children: [_jsxs(Box, { children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('page.cases.rules.query') }), _jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: indexes.map(opt => t(`hit.search.index.${opt}`)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: INDEX_OPTIONS, value: indexes, onChange: (_ev, values) => values.length > 0 && setIndexes(values), getOptionLabel: opt => t(`hit.search.index.${opt}`), renderInput: params => _jsx(TextField, { ...params }) }) })] }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: _jsx(Box, { sx: { border: 1, borderColor: 'divider', borderRadius: 1, flex: 1 }, children: _jsxs(Card, { variant: "outlined", sx: theme => ({
+                                                width: '100%',
+                                                height: theme.spacing(5),
+                                                py: 1,
+                                                pl: 1,
+                                                pr: 0.5,
+                                                position: 'relative',
+                                                overflow: 'visible',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                '& .monaco-editor': {
+                                                    position: 'absolute !important'
+                                                },
+                                                transition: theme.transitions.create('border-color')
+                                            }), onKeyDown: e => e.stopPropagation(), children: [_jsx(QueryEditor, { query: query, setQuery: handleQueryChange, language: "lucene", id: "rule-query-editor", height: "20px", editorOptions: OPTIONS, onMount: onMount }), _jsx(Tooltip, { title: t('route.search'), children: _jsx("span", { children: _jsx(IconButton, { size: "small", id: "rule-search-button", onClick: handleSearch, disabled: searching || !query.trim(), children: _jsx(Search, {}) }) }) })] }) }) }), response ? (_jsx(QueryResultText, { count: response.total, query: query, mb: 0 })) : (_jsx(Subtitle, { i18nKey: "hit.search.prompt" }))] }), _jsxs(Box, { children: [_jsx(TextField, { id: "rule-destination-input", label: t('page.cases.rules.destination'), value: destination, onChange: e => setDestination(e.target.value), fullWidth: true, placeholder: "alerts/{{howler.analytic}}", size: "small" }), _jsx(Subtitle, { i18nKey: "page.cases.rules.destination.help" })] }), _jsxs(Stack, { children: [_jsx(TextField, { id: "rule-timeframe-input", type: "number", label: t('page.cases.rules.timeframe'), value: timeframeDays, onChange: e => setTimeframeDays(Math.max(1, parseInt(e.target.value, 10) || 1)), size: "small", disabled: !hasExpiry, sx: { flex: 1 }, InputProps: { inputProps: { min: 1 } } }), _jsx(Subtitle, { i18nKey: "page.cases.rules.timeframe.help" })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { id: "rule-no-expiry-checkbox", label: t('page.cases.rules.no_expiry'), icon: !hasExpiry ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: !hasExpiry ? 'primary' : 'default', clickable: true, disabled: expireAfterResolved, onClick: () => setHasExpiry(prev => !prev) }), _jsx(Chip, { id: "rule-expire-after-resolved", label: t('page.cases.rules.expire_after_resolved'), icon: expireAfterResolved ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: expireAfterResolved ? 'primary' : 'default', clickable: hasExpiry, onClick: () => setExpireAfterResolved(prev => !prev), disabled: !hasExpiry })] })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, children: t('cancel') }), _jsx(Button, { id: "rule-submit-button", variant: "contained", onClick: handleSubmit, disabled: !response || loading || !query.trim() || !destination.trim() || indexes.length === 0, children: t('page.cases.rules.create') })] })] }));
+};
+export default CreateRuleDialog;

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

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

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

@@ -0,0 +1,218 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 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 user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        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 user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        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 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 user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        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 user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        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 user.click(screen.getByTestId('rule-no-expiry-checkbox'));
+        await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        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 user.click(screen.getByTestId('rule-expire-after-resolved'));
+        await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        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 user.click(screen.getByRole('combobox'));
+        await user.click(screen.getByRole('option', { name: 'hit.search.index.event' }));
+        await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
+        await user.click(screen.getByTestId('rule-search-button'));
+        await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
+        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 user.click(screen.getByRole('combobox'));
+        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) {
+            void 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 {};