@cccsaurora/howler-ui 3.1.0-dev.1707 → 3.1.0-dev.1712

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Add, Delete } from '@mui/icons-material';
-import { Button, Card, Chip, IconButton, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { Add, Delete, History } from '@mui/icons-material';
+import { Button, Card, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 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 { useCallback, useContext, useState } from 'react';
+import dayjs, {} from 'dayjs';
+import { useCallback, useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router';
 import useCase from '../hooks/useCase';
@@ -17,6 +21,58 @@ const CaseRules = ({ case: providedCase, caseId }) => {
     const routeCase = useOutletContext();
     const { case: _case, update } = useCase({ case: providedCase ?? routeCase, caseId });
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [backfillRule, setBackfillRule] = useState();
+    const [backfillSince, setBackfillSince] = useState(dayjs().subtract(30, 'day'));
+    const [backfillCount, setBackfillCount] = useState(null);
+    const [backfillLoading, setBackfillLoading] = useState(false);
+    const backfillCountRequestId = useRef(0);
+    const invalidateBackfillCountRequest = useCallback(() => {
+        backfillCountRequestId.current += 1;
+        setBackfillLoading(false);
+    }, []);
+    const handleBackfillDialogClose = useCallback(() => {
+        invalidateBackfillCountRequest();
+        setBackfillRule(undefined);
+        setBackfillCount(null);
+        setBackfillSince(dayjs().subtract(30, 'day'));
+    }, [invalidateBackfillCountRequest]);
+    const handleCountBackfill = useCallback(async () => {
+        if (!_case?.case_id || !backfillRule?.rule_id || !backfillSince?.isValid()) {
+            return;
+        }
+        const requestId = ++backfillCountRequestId.current;
+        setBackfillLoading(true);
+        try {
+            const response = await dispatchApi(api.v2.case.rules.backfill.count.post(_case.case_id, backfillRule.rule_id, backfillSince.toISOString()));
+            if (response && requestId === backfillCountRequestId.current) {
+                setBackfillCount(response.count);
+            }
+        }
+        finally {
+            if (requestId === backfillCountRequestId.current) {
+                setBackfillLoading(false);
+            }
+        }
+    }, [_case?.case_id, backfillRule, backfillSince, dispatchApi]);
+    const handleBackfillDialogOpen = useCallback((rule) => {
+        invalidateBackfillCountRequest();
+        setBackfillRule(rule);
+        setBackfillCount(null);
+        setBackfillSince(dayjs().subtract(30, 'day'));
+    }, [invalidateBackfillCountRequest]);
+    const handleSubmitBackfill = useCallback(async () => {
+        if (!_case?.case_id || !backfillRule?.rule_id || !backfillSince?.isValid() || backfillCount === null) {
+            return;
+        }
+        setBackfillLoading(true);
+        try {
+            await dispatchApi(api.v2.case.rules.backfill.post(_case.case_id, backfillRule.rule_id, backfillSince.toISOString()));
+            handleBackfillDialogClose();
+        }
+        finally {
+            setBackfillLoading(false);
+        }
+    }, [_case?.case_id, backfillRule, backfillSince, backfillCount, dispatchApi, handleBackfillDialogClose]);
     const handleCreateRule = useCallback(async (ruleData) => {
         if (!_case?.case_id) {
             return;
@@ -54,6 +110,13 @@ const CaseRules = ({ case: providedCase, caseId }) => {
                                                     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 })] }));
+                                                    : 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" }) }), _jsxs(TableCell, { align: "right", children: [_jsx(Tooltip, { title: t('page.cases.rules.backfill'), children: _jsx(IconButton, { id: `rule-backfill-${rule.rule_id}`, size: "small", disabled: rule.enabled === false, onClick: () => handleBackfillDialogOpen(rule), children: _jsx(History, { fontSize: "small" }) }) }), _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 }), _jsxs(Dialog, { open: !!backfillRule, onClose: handleBackfillDialogClose, maxWidth: "sm", fullWidth: true, id: "rule-backfill-dialog", children: [_jsx(DialogTitle, { children: t('page.cases.rules.backfill') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [_jsx(Typography, { children: t('page.cases.rules.backfill.description') }), _jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { label: t('page.cases.rules.backfill.since'), value: backfillSince, onChange: value => {
+                                            if (!value) {
+                                                return;
+                                            }
+                                            invalidateBackfillCountRequest();
+                                            setBackfillSince(value);
+                                            setBackfillCount(null);
+                                        }, maxDateTime: dayjs(), ampm: false, slotProps: { textField: { id: 'rule-backfill-since', size: 'small', fullWidth: true } } }) }), backfillCount !== null && (_jsx(Typography, { id: "rule-backfill-confirmation", children: t('page.cases.rules.backfill.confirm', { count: backfillCount }) }))] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleBackfillDialogClose, children: t('cancel') }), backfillCount === null ? (_jsx(Button, { id: "rule-backfill-count-button", variant: "contained", onClick: handleCountBackfill, disabled: backfillLoading || !backfillSince?.isValid(), children: t('page.cases.rules.backfill.preview') })) : (_jsx(Button, { id: "rule-backfill-submit-button", variant: "contained", onClick: handleSubmitBackfill, disabled: backfillLoading || backfillCount === 0, children: t('page.cases.rules.backfill.submit') }))] })] })] }));
 };
 export default CaseRules;

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

@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockUpdate = vi.hoisted(() => vi.fn());
 const mockShowModal = vi.hoisted(() => vi.fn());
+const mockTranslate = vi.hoisted(() => vi.fn((key, options) => (options?.count === undefined ? key : `${key}:${options.count}`)));
 const mockCase = vi.hoisted(() => ({
     current: {
         case_id: 'case-001',
@@ -16,6 +17,9 @@ const mockCase = vi.hoisted(() => ({
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: mockTranslate })
+}));
 vi.mock('components/app/providers/ModalProvider', async () => {
     const { createContext } = await import('react');
     return {
@@ -47,6 +51,12 @@ vi.mock('./CreateRuleDialog', () => ({
         return open ? (_jsxs("div", { id: "create-rule-dialog", children: [_jsx("button", { id: "rule-submit-button", onClick: () => onSubmit({ query: 'event.kind:alert', destination: 'alerts/incoming' }), children: "submit" }), _jsx("button", { onClick: onClose, children: "cancel" })] })) : null;
     }
 }));
+vi.mock('@mui/x-date-pickers/DateTimePicker', async () => {
+    const { default: dayjs } = await import('dayjs');
+    return {
+        DateTimePicker: ({ onChange }) => (_jsx("button", { id: "rule-backfill-since", onClick: () => onChange(dayjs('2025-06-01')), children: "pick date" }))
+    };
+});
 vi.mock('api', () => ({
     default: {
         v2: {
@@ -54,7 +64,11 @@ vi.mock('api', () => ({
                 rules: {
                     post: vi.fn(),
                     del: vi.fn(),
-                    put: vi.fn()
+                    put: vi.fn(),
+                    backfill: {
+                        post: vi.fn(),
+                        count: { post: vi.fn() }
+                    }
                 }
             }
         }
@@ -73,6 +87,13 @@ const makeRule = (overrides) => ({
     indexes: ['hit'],
     ...overrides
 });
+const createDeferred = () => {
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+        resolve = resolvePromise;
+    });
+    return { promise, resolve };
+};
 describe('CaseRules', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -222,6 +243,72 @@ describe('CaseRules', () => {
             expect(mockDispatchApi).toHaveBeenCalledWith('put-request');
         });
     });
+    it('previews and confirms the number of matching alerts before backfilling', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        mockDispatchApi.mockResolvedValueOnce({ count: 23 }).mockResolvedValueOnce({ queued: 23 });
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        vi.mocked(api.v2.case.rules.backfill.post).mockReturnValue('backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await waitFor(() => {
+            expect(screen.getByTestId('rule-backfill-confirmation')).toHaveTextContent('page.cases.rules.backfill.confirm:23');
+        });
+        expect(mockDispatchApi).toHaveBeenCalledWith('count-backfill-request');
+        await user.click(screen.getByTestId('rule-backfill-submit-button'));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('backfill-request');
+            expect(screen.queryByTestId('rule-backfill-dialog')).not.toBeInTheDocument();
+        });
+    });
+    it('ignores a pending count response after closing and reopening for another rule', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule(), makeRule({ rule_id: 'rule-002' })]
+        });
+        const pendingCount = createDeferred();
+        mockDispatchApi.mockReturnValueOnce(pendingCount.promise);
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await user.click(screen.getByText('cancel'));
+        await waitFor(() => {
+            expect(screen.queryByTestId('rule-backfill-dialog')).not.toBeInTheDocument();
+        });
+        await user.click(screen.getByTestId('rule-backfill-rule-002'));
+        await act(async () => {
+            pendingCount.resolve({ count: 23 });
+            await pendingCount.promise;
+        });
+        expect(screen.getByTestId('rule-backfill-count-button')).toBeInTheDocument();
+        expect(screen.queryByTestId('rule-backfill-confirmation')).not.toBeInTheDocument();
+    });
+    it('ignores a pending count response after the preview date changes', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        const pendingCount = createDeferred();
+        mockDispatchApi.mockReturnValueOnce(pendingCount.promise);
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await user.click(screen.getByTestId('rule-backfill-since'));
+        await act(async () => {
+            pendingCount.resolve({ count: 23 });
+            await pendingCount.promise;
+        });
+        expect(screen.getByTestId('rule-backfill-count-button')).toBeEnabled();
+        expect(screen.queryByTestId('rule-backfill-confirmation')).not.toBeInTheDocument();
+    });
     it('renders multiple rules', () => {
         mockCase.current = createMockCase({
             case_id: 'case-001',

package/components/routes/hits/search/shared/HitFilter.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AddCircleOutline, FilterList, RemoveCircleOutline } from '@mui/icons-material';
-import { Autocomplete, Checkbox, FormControlLabel, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { Autocomplete, Checkbox, createFilterOptions, FormControlLabel, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -19,6 +20,13 @@ const ACCEPTED_LOOKUPS = [
     'event.provider',
     'organization.name'
 ];
+const DEFAULT_FILTER_FIELDS = [
+    'howler.assessment',
+    'howler.escalation',
+    'howler.analytic',
+    'howler.detection',
+    'event.provider'
+];
 const parseFilter = (value) => {
     const negated = value.startsWith('-');
     const positiveValue = negated ? value.slice(1) : value;
@@ -72,9 +80,11 @@ const serializeFilter = (category, values, negated) => {
     }
     return filter.join('');
 };
+const filterFields = createFilterOptions();
 const HitFilter = ({ size, id, value }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
+    const { hitFields, getHitFields } = useContext(FieldContext);
     const { dispatchApi } = useMyApi();
     const setSavedFilter = useContextSelector(ParameterContext, ctx => ctx.setFilter);
     const removeSavedFilter = useContextSelector(ParameterContext, ctx => ctx.removeFilter);
@@ -89,10 +99,15 @@ const HitFilter = ({ size, id, value }) => {
         category: null,
         options: []
     });
+    const [categorySearchInput, setCategorySearchInput] = useState('');
     const { category, values: filterValues, editable, negated } = parsedFilter;
     const configuredLookup = category ? config.lookups?.[category] : undefined;
     const needsLookups = !!category && editable && !Array.isArray(configuredLookup);
     const loading = needsLookups && customLookups.category !== category;
+    const categoryOptions = hitFields.map(field => field.key).filter((field) => !!field);
+    useEffect(() => {
+        void getHitFields();
+    }, [getHitFields]);
     useEffect(() => {
         if (value) {
             setSavedFilter(id, value);
@@ -142,6 +157,8 @@ const HitFilter = ({ size, id, value }) => {
     }, [commitFilter, parsedFilter.raw]);
     const lookupOptions = configuredLookup ?? (customLookups.category === category ? customLookups.options : []);
     const chipLabel = `${parsedFilter.category ? `${parsedFilter.category}:` : ''}${parsedFilter.rawClause}`;
-    return (_jsx(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: _jsx(ChipPopper, { icon: _jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(FilterList, { fontSize: "small" }), parsedFilter.negated ? (_jsx(Tooltip, { title: t('hit.search.filter.excluded'), children: _jsx(RemoveCircleOutline, { fontSize: "small", color: "error" }) })) : (_jsx(Tooltip, { title: t('hit.search.filter.included'), children: _jsx(AddCircleOutline, { fontSize: "small", color: "success" }) }))] }), label: _jsx(Typography, { variant: "body2", children: chipLabel }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: parsedFilter.wildcard ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(FormControlLabel, { label: t('hit.search.filter.exclude'), control: _jsx(Checkbox, { size: "small", checked: negated, onChange: toggleNegation }) }), _jsx(Autocomplete, { fullWidth: true, disableClearable: true, disabled: !editable, size: size ?? 'small', value: category ?? ACCEPTED_LOOKUPS[0], options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, multiple: true, disabled: !category || !editable, loading: loading, size: size ?? 'small', value: filterValues, options: lookupOptions, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValuesChange })] }) }) }));
+    return (_jsx(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: _jsx(ChipPopper, { icon: _jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(FilterList, { fontSize: "small" }), parsedFilter.negated ? (_jsx(Tooltip, { title: t('hit.search.filter.excluded'), children: _jsx(RemoveCircleOutline, { fontSize: "small", color: "error" }) })) : (_jsx(Tooltip, { title: t('hit.search.filter.included'), children: _jsx(AddCircleOutline, { fontSize: "small", color: "success" }) }))] }), label: _jsx(Typography, { variant: "body2", children: chipLabel }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: parsedFilter.wildcard ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(FormControlLabel, { label: t('hit.search.filter.exclude'), control: _jsx(Checkbox, { size: "small", checked: negated, onChange: toggleNegation }) }), _jsx(Autocomplete, { fullWidth: true, disableClearable: true, disabled: !editable, size: size ?? 'small', value: category ?? ACCEPTED_LOOKUPS[0], options: categoryOptions, filterOptions: (options, state) => categorySearchInput
+                            ? filterFields(options, { ...state, inputValue: categorySearchInput })
+                            : options.filter(option => DEFAULT_FILTER_FIELDS.includes(option)), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange, onInputChange: (_event, inputValue, reason) => setCategorySearchInput(reason === 'input' ? inputValue : '') }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, multiple: true, disabled: !category || !editable, loading: loading, size: size ?? 'small', value: filterValues, options: lookupOptions, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValuesChange })] }) }) }));
 };
 export default memo(HitFilter);

package/components/routes/hits/search/shared/HitFilter.test.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+const fieldContextToken = vi.hoisted(() => ({ name: 'field-context' }));
 const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockSetSavedFilter = vi.hoisted(() => vi.fn());
 const mockRemoveSavedFilter = vi.hoisted(() => vi.fn());
+const autocompleteProps = vi.hoisted(() => []);
 const mockAutocompleteSelection = vi.hoisted(() => ({
     value: 'normal'
 }));
@@ -19,25 +22,32 @@ vi.mock('@mui/material', async (importOriginal) => {
     const actual = await importOriginal();
     return {
         ...actual,
-        Autocomplete: ({ onChange, options, disabled, multiple, value, loading }) => (_jsx("button", { disabled: disabled, "data-loading": Boolean(loading), "data-options": JSON.stringify(options), onClick: () => onChange(null, mockAutocompleteSelection.value === 'clear'
-                ? multiple
-                    ? []
-                    : null
-                : multiple
-                    ? mockAutocompleteSelection.value === 'unchanged'
-                        ? value
-                        : mockAutocompleteSelection.value === 'add'
-                            ? [...(value ?? []), 'added value']
-                            : mockAutocompleteSelection.value === 'single'
-                                ? (value ?? []).slice(0, 1)
-                                : (value?.length ?? 0) > 1
-                                    ? [value[0], value[0]?.startsWith('C:') ? 'new\\path' : 'changed two']
-                                    : [value?.[0] ?? options[0] ?? 'changed one']
-                    : value === '*'
-                        ? '*'
-                        : options.includes('event.provider')
-                            ? 'event.provider'
-                            : options[0]), children: "change-filter" }))
+        Autocomplete: (props) => {
+            autocompleteProps.push(props);
+            const { onChange, options, disabled, multiple, value, loading } = props;
+            return (_jsx("button", { disabled: disabled, "data-loading": Boolean(loading), "data-options": JSON.stringify(options), onClick: () => onChange(null, mockAutocompleteSelection.value === 'clear'
+                    ? multiple
+                        ? []
+                        : null
+                    : multiple
+                        ? mockAutocompleteSelection.value === 'unchanged'
+                            ? value
+                            : mockAutocompleteSelection.value === 'add'
+                                ? [...(value ?? []), 'added value']
+                                : mockAutocompleteSelection.value === 'single'
+                                    ? (value ?? []).slice(0, 1)
+                                    : (value?.length ?? 0) > 1
+                                        ? [value[0], value[0]?.startsWith('C:') ? 'new\\path' : 'changed two']
+                                        : [value?.[0] ?? options[0] ?? 'changed one']
+                        : value === '*'
+                            ? '*'
+                            : options.includes('event.provider')
+                                ? 'event.provider'
+                                : options[0]), children: "change-filter" }));
+        },
+        Stack: ({ children }) => _jsx("div", { children: children }),
+        TextField: ({ label }) => _jsx("div", { children: label }),
+        Typography: ({ children }) => _jsx("div", { children: children })
     };
 });
 vi.mock('api', () => ({
@@ -54,9 +64,21 @@ vi.mock('api', () => ({
 vi.mock('components/app/providers/ApiConfigProvider', () => ({
     ApiConfigContext: apiConfigContextToken
 }));
+vi.mock('components/app/providers/FieldProvider', () => ({
+    FieldContext: fieldContextToken
+}));
 vi.mock('components/app/providers/ParameterProvider', () => ({
     ParameterContext: parameterContextToken
 }));
+vi.mock('components/elements/display/ChipPopper', () => ({
+    default: ({ children, icon, label, onDelete }) => {
+        const [open, setOpen] = useState(false);
+        return (_jsxs("div", { children: [_jsxs("button", { className: "MuiChip-root", onClick: () => setOpen(current => !current), children: [icon && _jsx("span", { className: "MuiChip-icon", children: icon }), label, onDelete && (_jsx("span", { className: "MuiChip-deleteIcon", onClick: event => {
+                                event.stopPropagation();
+                                onDelete(event);
+                            }, children: "delete-filter" }))] }), open && children] }));
+    }
+}));
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
@@ -73,6 +95,19 @@ vi.mock('react', async (importOriginal) => {
         useContext: (context) => {
             if (context === apiConfigContextToken)
                 return { config: configValue };
+            if (context === fieldContextToken) {
+                return {
+                    hitFields: [
+                        { key: 'howler.assessment' },
+                        { key: 'howler.escalation' },
+                        { key: 'howler.analytic' },
+                        { key: 'howler.detection' },
+                        { key: 'event.provider' },
+                        { key: 'organization.name' }
+                    ],
+                    getHitFields: vi.fn()
+                };
+            }
             return actual.useContext(context);
         }
     };
@@ -84,6 +119,7 @@ describe('HitFilter', () => {
         mockDispatchApi.mockReset().mockImplementation(async (_value) => ({ 'event.provider': { azure: 2 } }));
         mockSetSavedFilter.mockReset();
         mockRemoveSavedFilter.mockReset();
+        autocompleteProps.length = 0;
         mockAutocompleteSelection.value = 'normal';
     });
     it('initializes from value, fetches custom lookups, updates values, and removes filters', async () => {
@@ -121,6 +157,37 @@ describe('HitFilter', () => {
         render(_jsx(HitFilter, { id: 2, value: 'howler.assessment:*' }));
         await waitFor(() => expect(mockSetSavedFilter).toHaveBeenCalledWith(2, 'howler.assessment:*'));
     });
+    it('shows only default fields until the user searches for another indexed field', () => {
+        render(_jsx(HitFilter, { id: 3, value: "howler.assessment:*" }));
+        fireEvent.click(screen.getByRole('button', { name: /howler.assessment:\*/ }));
+        const getFieldAutocomplete = () => [...autocompleteProps].reverse().find(props => props.options.includes('organization.name'));
+        const autocompleteState = {
+            inputValue: 'howler.assessment',
+            getOptionLabel: (option) => option
+        };
+        let fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'howler.assessment',
+            'howler.escalation',
+            'howler.analytic',
+            'howler.detection',
+            'event.provider'
+        ]);
+        act(() => fieldAutocomplete.onInputChange(null, 'organization', 'input'));
+        fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'organization.name'
+        ]);
+        act(() => fieldAutocomplete.onInputChange(null, 'howler.assessment', 'reset'));
+        fieldAutocomplete = getFieldAutocomplete();
+        expect(fieldAutocomplete.filterOptions(fieldAutocomplete.options, autocompleteState)).toEqual([
+            'howler.assessment',
+            'howler.escalation',
+            'howler.analytic',
+            'howler.detection',
+            'event.provider'
+        ]);
+    });
     it('deduplicates decoded literals while preserving quoted OR text', () => {
         const clause = String.raw `event.provider:("a" OR "\a" OR "text OR more" OR "escaped\"quote")`;
         render(_jsx(HitFilter, { id: 15, value: clause }));

package/components/routes/home/AddNewCard.js

@@ -7,10 +7,13 @@ import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/View
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
 import { useContextSelector } from 'use-context-selector';
 const TYPES = {
     view: ['viewId', 'limit'],
-    analytic: ['analyticId', 'type']
+    analytic: ['analyticId', 'type'],
+    case: [],
+    tasks: []
 };
 const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
 const AddNewCard = ({ dashboard, addCard }) => {
@@ -29,7 +32,11 @@ const AddNewCard = ({ dashboard, addCard }) => {
             return;
         }
         addCard({
-            entry_id: selectedType === 'view' ? config.viewId : `${config.analyticId}-${config.type}`,
+            entry_id: selectedType === 'view'
+                ? config.viewId
+                : selectedType === 'analytic'
+                    ? `${config.analyticId}-${config.type}`
+                    : `${selectedType}-${uuid()}`,
             type: selectedType,
             config: JSON.stringify(config)
         });
@@ -81,6 +88,12 @@ const AddNewCard = ({ dashboard, addCard }) => {
                 limit: 3
             });
         }
+        else if (selectedType === 'case') {
+            _setConfig({ dateRange: 'date.range.all', statusFilter: [], assigneeFilter: [] });
+        }
+        else if (selectedType === 'tasks') {
+            _setConfig({ taskFilter: 'incomplete' });
+        }
         else {
             _setConfig({});
         }

package/components/routes/home/CasePanel.d.ts

@@ -0,0 +1,16 @@
+import { type DateRangeOption } from '@cccsaurora/howler-ui/components/routes/cases/search/CaseDateFilter';
+import { type FC } from 'react';
+export interface CaseSettings {
+    statusFilter?: string[];
+    assigneeFilter?: string[];
+    dateRange?: DateRangeOption;
+    customStart?: string;
+    customEnd?: string;
+}
+interface CasePanelProps extends CaseSettings {
+    panelId?: string;
+    refreshTick?: symbol;
+    onRefreshComplete?: (panelId: string, refreshTick: symbol) => void;
+}
+declare const CasePanel: FC<CasePanelProps>;
+export default CasePanel;

package/components/routes/home/CasePanel.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Alert, Card, CardContent, CircularProgress, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { AppListEmpty } from '@tui/core';
+import api from '@cccsaurora/howler-ui/api';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import CaseAssigneeFilter from '@cccsaurora/howler-ui/components/routes/cases/search/CaseAssigneeFilter';
+import CaseDateFilter, {} from '@cccsaurora/howler-ui/components/routes/cases/search/CaseDateFilter';
+import CaseStatusFilter from '@cccsaurora/howler-ui/components/routes/cases/search/CaseStatusFilter';
+import dayjs, {} from 'dayjs';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { DATE_RANGE_LUCENE } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const CASE_LIMIT = 10;
+const getDate = (value, fallback) => {
+    const date = value ? dayjs(value) : fallback;
+    return date.isValid() ? date : fallback;
+};
+const CasePanel = ({ statusFilter: initialStatusFilter = [], assigneeFilter: initialAssigneeFilter = [], dateRange: initialDateRange = 'date.range.all', customStart: initialCustomStart, customEnd: initialCustomEnd, panelId = 'case-panel', refreshTick, onRefreshComplete }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [cases, setCases] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [statusFilter, setStatusFilter] = useState(initialStatusFilter);
+    const [assigneeFilter, setAssigneeFilter] = useState(initialAssigneeFilter);
+    const [dateRange, setDateRange] = useState(initialDateRange);
+    const [customStart, setCustomStart] = useState(() => getDate(initialCustomStart, dayjs().subtract(2, 'days')));
+    const [customEnd, setCustomEnd] = useState(() => getDate(initialCustomEnd, dayjs()));
+    const activeRefreshTick = useRef(undefined);
+    const filters = useMemo(() => {
+        const nextFilters = [];
+        if (statusFilter.length > 0) {
+            nextFilters.push(`status:(${statusFilter.map(status => `"${status}"`).join(' OR ')})`);
+        }
+        if (assigneeFilter.length > 0) {
+            nextFilters.push(assigneeFilter
+                .map(assignee => `(participants:"${sanitizeLuceneQuery(assignee)}" OR tasks.assignment:"${sanitizeLuceneQuery(assignee)}")`)
+                .join(' OR '));
+        }
+        const luceneDate = DATE_RANGE_LUCENE[dateRange];
+        if (luceneDate) {
+            nextFilters.push(`created:[${luceneDate} TO now]`);
+        }
+        else if (dateRange === 'date.range.custom') {
+            nextFilters.push(`created:[${customStart.toISOString()} TO ${customEnd.toISOString()}]`);
+        }
+        return nextFilters;
+    }, [assigneeFilter, customEnd, customStart, dateRange, statusFilter]);
+    useEffect(() => {
+        const controller = new AbortController();
+        let refreshComplete = false;
+        const completeRefresh = () => {
+            if (refreshTick && !refreshComplete) {
+                refreshComplete = true;
+                if (activeRefreshTick.current === refreshTick) {
+                    activeRefreshTick.current = undefined;
+                }
+                onRefreshComplete?.(panelId, refreshTick);
+            }
+        };
+        if (refreshTick) {
+            activeRefreshTick.current = refreshTick;
+        }
+        setLoading(true);
+        setError(false);
+        void dispatchApi(api.v2.search.post('case', {
+            query: 'case_id:*',
+            filters,
+            rows: CASE_LIMIT,
+            sort: 'created desc'
+        }, controller.signal), { showError: false })
+            .then(response => {
+            if (!controller.signal.aborted) {
+                setCases(response?.items ?? []);
+            }
+        })
+            .catch(() => {
+            if (!controller.signal.aborted) {
+                setError(true);
+                setCases([]);
+            }
+        })
+            .finally(() => {
+            if (!controller.signal.aborted) {
+                setLoading(false);
+                completeRefresh();
+            }
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [dispatchApi, filters, onRefreshComplete, panelId, refreshTick]);
+    useEffect(() => () => {
+        if (activeRefreshTick.current) {
+            onRefreshComplete?.(panelId, activeRefreshTick.current);
+            activeRefreshTick.current = undefined;
+        }
+    }, [onRefreshComplete, panelId]);
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsx(CardContent, { sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t('route.home.case.title') }), _jsx(Tooltip, { title: t('route.home.case.open'), children: _jsx(IconButton, { component: Link, to: "/cases", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }), _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: 'wrap' }, children: [_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: setStatusFilter }), _jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: setAssigneeFilter }), _jsx(CaseDateFilter, { dateRange: dateRange, onChange: setDateRange, customStart: customStart, customEnd: customEnd, onCustomStartChange: setCustomStart, onCustomEndChange: setCustomEnd })] }), error ? (_jsx(Alert, { severity: "error", children: t('route.home.case.error') })) : loading ? (_jsx(Stack, { alignItems: "center", py: 3, children: _jsx(CircularProgress, { size: 28 }) })) : cases.length > 0 ? (cases.map(_case => (_jsx(Link, { to: `/cases/${_case.case_id}`, style: { color: 'inherit', textDecoration: 'none' }, children: _jsx(CaseCard, { case: _case }) }, _case.case_id)))) : (_jsx(AppListEmpty, {}))] }) }) }));
+};
+export default CasePanel;

package/components/routes/home/CasePanel.test.d.ts

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