@cccsaurora/howler-ui 2.19.0-cases.1111 → 2.19.0-cases.1129

package/api/v2/fuzzy.d.ts

@@ -0,0 +1,17 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+export type FuzzySearchRequest = {
+    query: string;
+    indexes?: string[];
+    filters?: string[];
+    offset?: number;
+    rows?: number;
+    track_total_hits?: boolean;
+};
+export type FuzzySearchItem<T = Hit | Event | Case> = T & {
+    _score: number;
+};
+export declare const uri: () => string;
+export declare const post: (request: FuzzySearchRequest) => Promise<HowlerSearchResponse<FuzzySearchItem>>;

package/api/v2/fuzzy.js

@@ -0,0 +1,11 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+export const uri = () => {
+    return joinAllUri(parentUri(), 'fuzzy');
+};
+export const post = (request) => {
+    if (!request.query || !request.query.trim()) {
+        throw new Error('Search query is required.');
+    }
+    return hpost(joinAllUri(uri(), 'search'), request);
+};

package/api/v2/index.d.ts

@@ -1,4 +1,5 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
+import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export declare const uri: () => string;
-export { case_ as case, search };
+export { case_ as case, fuzzy, search };

package/api/v2/index.js

@@ -1,6 +1,7 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
+import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export const uri = () => {
     return '/api/v2';
 };
-export { case_ as case, search };
+export { case_ as case, fuzzy, search };

package/components/app/App.js

@@ -31,6 +31,7 @@ import Cases from '@cccsaurora/howler-ui/components/routes/cases/Cases';
 import CaseDashboard from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseDashboard';
 import CaseObservables from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseObservables';
 import CaseRules from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseRules';
+import CaseSearch from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseSearch';
 import CaseTimeline from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTimeline';
 import ItemPage from '@cccsaurora/howler-ui/components/routes/cases/detail/ItemPage';
 import DossierEditor from '@cccsaurora/howler-ui/components/routes/dossiers/DossierEditor';
@@ -207,7 +208,7 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'cases/:id',
-                element: (_jsx(ParameterProvider, { children: _jsx(CaseViewer, {}) })),
+                element: (_jsx(ParameterProvider, { defaults: { query: '', indexes: ['hit', 'event', 'case'] }, children: _jsx(CaseViewer, {}) })),
                 children: [
                     {
                         index: true,
@@ -225,6 +226,10 @@ const createRouter = () => createBrowserRouter([
                         path: 'rules',
                         element: _jsx(CaseRules, {})
                     },
+                    {
+                        path: 'search',
+                        element: _jsx(CaseSearch, {})
+                    },
                     {
                         path: '*',
                         element: _jsx(ItemPage, {})

package/components/app/providers/ParameterProvider.d.ts

@@ -32,10 +32,25 @@ export interface ParameterContextType {
     setView: (index: number, view: string) => void;
     resetViews: () => void;
 }
+interface SearchValues {
+    selected: string;
+    query: string;
+    sort: string;
+    span: string;
+    indexes: SearchIndex[];
+    filters: string[];
+    views: string[];
+    startDate: string;
+    endDate: string;
+    offset: number;
+    trackTotalHits: boolean;
+}
 export declare const ParameterContext: import("use-context-selector").Context<ParameterContextType>;
 /**
  * Context responsible for tracking updates to query operations in hit and view search.
  */
-declare const ParameterProvider: FC<PropsWithChildren>;
+declare const ParameterProvider: FC<PropsWithChildren<{
+    defaults?: Partial<SearchValues>;
+}>>;
 export declare const useParameterContextSelector: <Selected>(selector: (value: ParameterContextType) => Selected) => Selected;
 export default ParameterProvider;

package/components/app/providers/ParameterProvider.js

@@ -24,7 +24,7 @@ const PARAM_MAPPINGS = [
 const ARRAY_PARAMS = [
     { urlKey: 'filter', stateKey: 'filters' },
     { urlKey: 'view', stateKey: 'views' },
-    { urlKey: 'index', stateKey: 'indexes', default: DEFAULT_VALUES.indexes }
+    { urlKey: 'index', stateKey: 'indexes' }
 ];
 const ARRAY_URL_KEYS = new Set(ARRAY_PARAMS.map(p => p.urlKey));
 const WRITE_THROTTLER = new Throttler(100);
@@ -85,7 +85,7 @@ const useListHandlers = (key, _setValues) => {
 /**
  * Synchronizes SearchValues state with the URL search string, and vice-versa.
  */
-const useUrlSync = (values, _setValues, params, setParams, pathname, search, routeId) => {
+const useUrlSync = (values, defaults, _setValues, params, setParams, pathname, search, routeId) => {
     const getUrlFromState = useCallback(() => {
         const changes = {};
         // Scalar params: write if changed from URL, remove if back to default
@@ -94,20 +94,21 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
             const urlValue = params.get(urlKey);
             if (stateValue === urlValue)
                 return;
-            if (params.has(urlKey) && stateValue === DEFAULT_VALUES[stateKey]) {
+            if (params.has(urlKey) && stateValue === defaults[stateKey]) {
                 changes[urlKey] = null; // remove
             }
-            else if (stateValue !== DEFAULT_VALUES[stateKey]) {
+            else if (stateValue !== defaults[stateKey]) {
                 changes[urlKey] = stateValue; // write
             }
         });
         // Array params: skip when state equals default and URL is already empty
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
             const stateArr = values[stateKey];
             const urlArr = params.getAll(urlKey);
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
             if (isEqual(stateArr, urlArr))
                 return;
-            const isDefault = def ? isEqual(stateArr, def) : stateArr.length === 0;
+            const isDefault = defaultValue ? isEqual(stateArr, defaultValue) : stateArr.length === 0;
             if (!isDefault) {
                 changes[urlKey] = stateArr.length === 0 ? null : stateArr;
             }
@@ -128,20 +129,21 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
         }
         // Drop scalar entries that already match the URL
         return omitBy(changes, (val, key) => !ARRAY_URL_KEYS.has(key) && val == params.get(key));
-    }, [values, params, pathname]);
+    }, [values, defaults, params, pathname]);
     const getStateFromUrl = useCallback(() => {
         const changes = {};
         // Scalar params: fall back to default when absent from URL
         PARAM_MAPPINGS.forEach(([urlKey, stateKey]) => {
-            const urlValue = params.has(urlKey) ? params.get(urlKey) : (DEFAULT_VALUES[stateKey] ?? undefined);
+            const urlValue = params.has(urlKey) ? params.get(urlKey) : (defaults[stateKey] ?? undefined);
             if (urlValue !== values[stateKey]) {
                 changes[stateKey] = urlValue;
             }
         });
         // Array params: fall back to their declared default when absent from URL
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
             const raw = params.getAll(urlKey);
-            const resolved = (isEmpty(raw) && def ? def : uniq(raw));
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
+            const resolved = (isEmpty(raw) && defaultValue ? defaultValue : uniq(raw));
             if (!isEqual(resolved, values[stateKey])) {
                 changes[stateKey] = resolved;
             }
@@ -155,7 +157,7 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
         if (urlOffset !== values.offset)
             changes.offset = urlOffset;
         return omitBy(omitBy(changes, isUndefined), (val, key) => val == values[key]);
-    }, [values, params, pathname, routeId]);
+    }, [values, defaults, params, pathname, routeId]);
     // State → URL
     useEffect(() => {
         const changes = getUrlFromState();
@@ -191,19 +193,18 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
 /**
  * Context responsible for tracking updates to query operations in hit and view search.
  */
-const ParameterProvider = ({ children }) => {
+const ParameterProvider = ({ children, defaults: _defaults = {} }) => {
     const location = useLocation();
     const routeParams = useParams();
     const [params, setParams] = useSearchParams();
+    const defaults = useMemo(() => ({ ...DEFAULT_VALUES, ..._defaults }), [_defaults]);
     const pendingChanges = useRef({});
     const [values, _setValues] = useState({
         selected: getSelectedValue(params, location.pathname, routeParams.id),
-        query: params.get('query') ?? DEFAULT_VALUES.query,
-        sort: params.get('sort') ?? DEFAULT_VALUES.sort,
-        span: params.get('span') ?? DEFAULT_VALUES.span,
-        indexes: params.has('index')
-            ? uniq(params.getAll('index')).filter(identity)
-            : DEFAULT_VALUES.indexes,
+        query: params.get('query') ?? defaults.query,
+        sort: params.get('sort') ?? defaults.sort,
+        span: params.get('span') ?? defaults.span,
+        indexes: params.has('index') ? uniq(params.getAll('index')).filter(identity) : defaults.indexes,
         filters: params.getAll('filter'),
         views: params.getAll('view'),
         startDate: params.get('start_date'),
@@ -212,7 +213,7 @@ const ParameterProvider = ({ children }) => {
         trackTotalHits: (params.get('track_total_hits') ?? 'false') !== 'false'
     });
     // TODO: SELECTING A BUNDLE STILL CAUSES A FREAKOUT
-    useUrlSync(values, _setValues, params, setParams, location.pathname, location.search, routeParams.id);
+    useUrlSync(values, defaults, _setValues, params, setParams, location.pathname, location.search, routeParams.id);
     const set = useCallback((key) => (value) => {
         if (value === values[key])
             return;
@@ -220,7 +221,7 @@ const ParameterProvider = ({ children }) => {
             pendingChanges.current.selected = value;
         }
         else {
-            pendingChanges.current[key] = value ?? DEFAULT_VALUES[key] ?? null;
+            pendingChanges.current[key] = value ?? defaults[key] ?? null;
         }
         if (key === 'span' && typeof value === 'string' && !value.endsWith('custom')) {
             pendingChanges.current.startDate = null;
@@ -230,7 +231,7 @@ const ParameterProvider = ({ children }) => {
             _setValues(c => ({ ...c, ...pendingChanges.current }));
             pendingChanges.current = {};
         });
-    }, [values]);
+    }, [values, defaults]);
     const setOffset = useCallback((_offset) => _setValues(c => ({ ...c, offset: parseOffset(_offset) })), []);
     const setCustomSpan = useCallback((startDate, endDate) => _setValues(c => ({ ...c, startDate, endDate })), []);
     const filters = useListHandlers('filters', _setValues);
@@ -252,7 +253,7 @@ const ParameterProvider = ({ children }) => {
             removeIndex: indexes.remove,
             setIndex: indexes.setAt,
             setIndexes: indexes.setAll,
-            resetIndexes: useCallback(() => indexes.reset(DEFAULT_VALUES.indexes), [indexes]),
+            resetIndexes: useCallback(() => indexes.reset(defaults.indexes), [indexes, defaults]),
             addView: views.add,
             removeView: views.remove,
             setView: views.setAt,

package/components/app/providers/ParameterProvider.test.js

@@ -579,6 +579,18 @@ describe('ParameterContext', () => {
             const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.selected), { wrapper: Wrapper });
             expect(hook.result.current).toBe('different_hit_id');
         });
+        it('should not sync query when default query differs from global default', async () => {
+            const CustomDefaultWrapper = ({ children }) => {
+                return _jsx(ParameterProvider, { defaults: { query: '' }, children: children });
+            };
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.query), {
+                wrapper: CustomDefaultWrapper
+            });
+            expect(hook.result.current).toBe('');
+            await waitFor(() => {
+                expect(mockSetParams).not.toHaveBeenCalled();
+            });
+        });
     });
     describe('useParameterContextSelector', () => {
         it('should allow selecting specific values from context', async () => {

package/components/elements/addons/search/SearchTotal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { Trans } from 'react-i18next';
 const SearchTotal = ({ total, offset, pageLength, ...typographyProps }) => {
-    return (_jsx(Typography, { ...typographyProps, children: total <= 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
+    return (_jsx(Typography, { ...typographyProps, children: total < 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
                 total: total
             } })) : (_jsx(Trans, { i18nKey: "search.result.showing", values: {
                 total: total,

package/components/elements/addons/search/SearchTotal.test.js

@@ -15,9 +15,9 @@ describe('SearchTotal', () => {
             render(_jsx(SearchTotal, { total: 0, offset: 0, pageLength: 0 }), { wrapper: Wrapper });
             expect(screen.getByText('No results')).toBeInTheDocument();
         });
-        it('renders "No results" text when total is 1', () => {
+        it('renders "Showing 1 to 1 of 1 results" text when total is 1', () => {
             render(_jsx(SearchTotal, { total: 1, offset: 0, pageLength: 1 }), { wrapper: Wrapper });
-            expect(screen.getByText('No results')).toBeInTheDocument();
+            expect(screen.getByText('Showing 1 to 1 of 1 results')).toBeInTheDocument();
         });
         it('renders range text when total is greater than 1', () => {
             render(_jsx(SearchTotal, { total: 50, offset: 0, pageLength: 25 }), { wrapper: Wrapper });

package/components/elements/display/QueryResultText.d.ts

@@ -2,5 +2,6 @@ import type { FC } from 'react';
 declare const QueryResultText: FC<{
     count: number;
     query: string;
+    mb?: number;
 }>;
 export default QueryResultText;

package/components/elements/display/QueryResultText.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const QueryResultText = ({ count, query }) => {
+const QueryResultText = ({ count, query, mb = 0.5 }) => {
     const { t } = useTranslation();
     return (_jsxs(Typography, { sx: theme => ({
             color: theme.palette.text.secondary,
             fontSize: '0.9em',
             fontStyle: 'italic',
-            mb: 0.5,
+            mb,
             '& a': { color: theme.palette.text.secondary }
         }), variant: "body2", children: [t('search.total', { count }), " ", _jsx(Link, { to: `/hits?query=${encodeURIComponent(query)}`, children: t('search.open') })] }));
 };

package/components/elements/search/FuzzySearchBar.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export type FuzzySearchBarProps = {
+    onSearch: (query: string, indexes: string[]) => void;
+    loading?: boolean;
+};
+declare const FuzzySearchBar: FC<FuzzySearchBarProps>;
+export default FuzzySearchBar;

package/components/elements/search/FuzzySearchBar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from '@mui/icons-material';
+import { CircularProgress, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import IndexPicker from '@cccsaurora/howler-ui/components/routes/hits/search/shared/IndexPicker';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FuzzySearchBar = ({ onSearch, loading = false }) => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const defaultQuery = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [query, _setQuery] = useState(defaultQuery ?? '');
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const handleQueryChange = useCallback((e) => {
+        _setQuery(e.target.value);
+    }, [_setQuery]);
+    const handleSearch = useCallback(() => {
+        if (query.trim()) {
+            setQuery(query.trim());
+            onSearch(query.trim(), indexes);
+        }
+    }, [query, setQuery, onSearch, indexes]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }, [handleSearch]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { id: "fuzzy-search-input", size: "small", fullWidth: true, variant: "outlined", placeholder: t('search.fuzzy.placeholder'), value: query, onChange: handleQueryChange, onKeyDown: handleKeyDown, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: loading ? (_jsx(CircularProgress, { size: 24 })) : (_jsx(IconButton, { id: "fuzzy-search-button", onClick: handleSearch, edge: "end", disabled: !query.trim(), children: _jsx(Search, {}) })) }))
+                } }), _jsx(Stack, { direction: "row", children: _jsx(IndexPicker, { additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }] }) })] }));
+};
+export default FuzzySearchBar;

package/components/elements/search/FuzzySearchBar.test.d.ts

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

package/components/elements/search/FuzzySearchBar.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockIndexPickerProps = vi.hoisted(() => ({
+    last: null
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/routes/hits/search/shared/IndexPicker', () => ({
+    default: (props) => {
+        mockIndexPickerProps.last = props;
+        return _jsx("div", { id: "index-picker" });
+    }
+}));
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import FuzzySearchBar from './FuzzySearchBar';
+const mockOnSearch = vi.fn();
+const mockSetQuery = vi.fn();
+const parameterContextValue = {
+    indexes: ['hit', 'case'],
+    query: '',
+    setQuery: mockSetQuery
+};
+const Wrapper = ({ children }) => {
+    return _jsx(ParameterContext.Provider, { value: parameterContextValue, children: children });
+};
+describe('FuzzySearchBar', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        parameterContextValue.indexes = ['hit', 'case'];
+        parameterContextValue.query = '';
+        mockIndexPickerProps.last = null;
+    });
+    it('renders search input and index picker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-input')).toBeInTheDocument();
+        expect(screen.getByTestId('index-picker')).toBeInTheDocument();
+    });
+    it('disables search button when query is empty', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+    });
+    it('calls setQuery and onSearch with trimmed query and selected indexes on click', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '  malware triage  ');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        expect(mockSetQuery).toHaveBeenCalledWith('malware triage');
+        expect(mockOnSearch).toHaveBeenCalledWith('malware triage', ['hit', 'case']);
+    });
+    it('triggers search on Enter key', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), 'suspicious ip{enter}');
+        expect(mockSetQuery).toHaveBeenCalledWith('suspicious ip');
+        expect(mockOnSearch).toHaveBeenCalledWith('suspicious ip', ['hit', 'case']);
+    });
+    it('does not call search for whitespace-only input', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '   ');
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        expect(mockOnSearch).not.toHaveBeenCalled();
+    });
+    it('shows loading spinner and hides search button when loading', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch, loading: true }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        expect(screen.queryByTestId('fuzzy-search-button')).not.toBeInTheDocument();
+    });
+    it('passes expected options to IndexPicker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(mockIndexPickerProps.last).toEqual({
+            additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }]
+        });
+    });
+    it('initializes input with default query from context', () => {
+        parameterContextValue.query = 'existing search';
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByRole('textbox')).toHaveValue('existing search');
+    });
+});

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

@@ -5,7 +5,6 @@ import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import dayjs from 'dayjs';
 import { useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
@@ -47,11 +46,10 @@ const CaseRules = ({ case: providedCase, caseId }) => {
         return null;
     }
     const rules = _case.rules ?? [];
-    return (_jsxs(Stack, { spacing: 2, sx: { p: 2, height: '100%', overflow: 'auto' }, children: [_jsx(Button, { id: "create-rule-button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: () => setDialogOpen(true), sx: { alignSelf: 'end' }, children: t('page.cases.rules.create') }), _jsx(Card, { children: rules.length === 0 ? (_jsx(Typography, { m: 2, color: "textSecondary", textAlign: "center", children: t('page.cases.rules.empty') })) : (_jsx(TableContainer, { children: _jsxs(Table, { id: "rules-table", size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.cases.rules.destination') }), _jsx(TableCell, { children: t('page.cases.rules.query') }), _jsx(TableCell, { children: t('hit.search.index') }), _jsx(TableCell, { children: t('page.cases.rules.timeframe') }), _jsx(TableCell, { children: t('page.cases.rules.author') }), _jsx(TableCell, { align: "center", children: t('enabled') }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rules.map(rule => {
-                                    const _timeframe = rule.timeframe ? dayjs(rule.timeframe) : null;
-                                    return (_jsxs(TableRow, { id: `rule-row-${rule.rule_id}`, children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: rule.destination }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: {
-                                                        fontFamily: 'monospace'
-                                                    }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: _timeframe ? (_jsx(Chip, { size: "small", label: _timeframe.format('YYYY-MM-DD HH:mm'), color: _timeframe.isBefore(dayjs()) ? 'error' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id));
-                                }) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
+    return (_jsxs(Stack, { spacing: 2, sx: { p: 2, height: '100%', overflow: 'auto' }, children: [_jsx(Button, { id: "create-rule-button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: () => setDialogOpen(true), sx: { alignSelf: 'end' }, children: t('page.cases.rules.create') }), _jsx(Card, { children: rules.length === 0 ? (_jsx(Typography, { m: 2, color: "textSecondary", textAlign: "center", children: t('page.cases.rules.empty') })) : (_jsx(TableContainer, { children: _jsxs(Table, { id: "rules-table", size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.cases.rules.destination') }), _jsx(TableCell, { children: t('page.cases.rules.query') }), _jsx(TableCell, { children: t('hit.search.index') }), _jsx(TableCell, { children: t('page.cases.rules.timeframe') }), _jsx(TableCell, { children: t('page.cases.rules.author') }), _jsx(TableCell, { align: "center", children: t('enabled') }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rules.map(rule => (_jsxs(TableRow, { id: `rule-row-${rule.rule_id}`, children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: rule.destination }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: {
+                                                    fontFamily: 'monospace'
+                                                }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: rule.timeframe != null ? (_jsx(Chip, { size: "small", label: rule.expire_after_resolved
+                                                    ? t('page.cases.rules.timeframe.after_resolved', { days: rule.timeframe })
+                                                    : t('page.cases.rules.timeframe.days', { days: rule.timeframe }), color: rule.expire_after_resolved ? 'info' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id))) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
 };
 export default CaseRules;

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

@@ -68,7 +68,8 @@ const makeRule = (overrides) => ({
     destination: 'alerts/{{howler.analytic}}',
     author: 'analyst1',
     enabled: true,
-    timeframe: '2026-06-01T00:00:00.000Z',
+    timeframe: 14,
+    expire_after_resolved: false,
     indexes: ['hit'],
     ...overrides
 });
@@ -104,6 +105,22 @@ describe('CaseRules', () => {
         render(_jsx(CaseRules, {}));
         expect(screen.getByText('page.cases.rules.no_expiry')).toBeInTheDocument();
     });
+    it('shows after-resolved chip when expire_after_resolved is true', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 7, expire_after_resolved: true })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.after_resolved')).toBeInTheDocument();
+    });
+    it('shows days chip when expire_after_resolved is false', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 14, expire_after_resolved: false })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.days')).toBeInTheDocument();
+    });
     it('renders enabled toggle for each rule', () => {
         mockCase.current = createMockCase({
             case_id: 'case-001',

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const CaseSearch: FC;
+export default CaseSearch;

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import FuzzySearchBar from '@cccsaurora/howler-ui/components/elements/search/FuzzySearchBar';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+const CaseSearch = () => {
+    const parentCase = useOutletContext();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [hitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, HitLayout.NORMAL);
+    const [loading, setLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+    const [error, setError] = useState(null);
+    const [offset, setOffset] = useState(0);
+    const caseIds = useMemo(() => parentCase
+        ? [
+            parentCase.case_id,
+            ...(parentCase.items ?? []).filter(item => item.type === 'case').map(item => item.value)
+        ].filter((id) => !!id)
+        : [], [parentCase]);
+    const handleSearch = useCallback(async (_query, _indexes) => {
+        setLoading(true);
+        setError(null);
+        try {
+            // If no indexes specified, search across all types
+            const searchIndexes = _indexes.length > 0 ? _indexes : ['case', 'hit', 'event'];
+            // Add case_id to the filters to scope the search to this case and its sub-cases
+            const filters = parentCase?.case_id
+                ? [`case_id:(${caseIds.join(' OR ')}) OR howler.related:(${caseIds.join(' OR ')})`]
+                : [];
+            setResponse(await api.v2.fuzzy.post({
+                query: _query,
+                indexes: searchIndexes,
+                rows: 25,
+                filters,
+                offset
+            }));
+        }
+        catch (err) {
+            setError(err.message || 'An error occurred while searching.');
+            setResponse(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [caseIds, offset, parentCase?.case_id]);
+    useEffect(() => {
+        if (query) {
+            handleSearch(query, indexes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [indexes, offset]);
+    return (_jsx(PageCenter, { maxWidth: "lg", textAlign: "left", children: _jsxs(Stack, { spacing: 1, children: [_jsx(FuzzySearchBar, { onSearch: handleSearch, loading: loading }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] })), error && (_jsx(Typography, { color: "error", sx: { mb: 2 }, children: error })), loading ? (_jsx(_Fragment, { children: _jsx(Skeleton, { variant: "rounded", height: 430 }) })) : ((response?.items ?? []).map(item => {
+                    if (isHit(item)) {
+                        return _jsx(HitCard, { id: item.howler.id, layout: hitLayout }, item.howler.id);
+                    }
+                    else if (isEvent(item)) {
+                        return _jsx(EventCard, { id: item.howler.id, event: item }, item.howler.id);
+                    }
+                    else if (isCase(item)) {
+                        return _jsx(CaseCard, { caseId: item.case_id, case: item }, item.case_id);
+                    }
+                }))] }) }));
+};
+export default CaseSearch;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { CalendarMonth, Circle, Dashboard, Dataset, Rule } from '@mui/icons-material';
+import { CalendarMonth, Circle, Dashboard, Dataset, Rule, Search } from '@mui/icons-material';
 import { alpha, Box, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -99,7 +99,7 @@ const CaseSidebar = ({ case: _case, update }) => {
             maxHeight: 'calc(100vh - 64px)',
             display: 'flex',
             flexDirection: 'column'
-        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case?.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
                 }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: null, path: "", indent: 0, label: activeDragData.label, itemType: activeDragData.type })) })] })] }) }))] }));