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

package/components/elements/hit/HitSummary.js

@@ -14,6 +14,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { getTimeRange, notNil } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
@@ -30,7 +31,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
     const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
-    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const addFilter = useContextSelector(ParameterContext, ctx => ctx.addFilter);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
     const [loading, setLoading] = useState(false);
     const [customKeys, setCustomKeys] = useState([]);
@@ -122,9 +123,9 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         response?.items,
         query
     ]);
-    const setSearch = useCallback((key, value) => {
-        setQuery(`${key}:${value}`);
-    }, [setQuery]);
+    const addAggregationFilter = useCallback((key, value) => {
+        addFilter(`${key}:${value}`);
+    }, [addFilter]);
     useEffect(() => {
         if ((!query && (views?.length ?? 0) < 1) || searching || error) {
             return;
@@ -136,9 +137,9 @@ const HitSummary = ({ response, onStart, onComplete }) => {
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
-                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(item => (_jsx(Grid, { size: 'auto', children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: item, label: `${item} (${aggregateResults[key][item]})`, onClick: () => setSearch(key, `"${item}"`), field: key }) }, item))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
+                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(item => (_jsx(Grid, { size: 'auto', children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: item, label: `${item} (${aggregateResults[key][item]})`, onClick: () => addAggregationFilter(key, `"${sanitizeLuceneQuery(item)}"`), field: key }) }, item))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
                                     .map(d => new Date(d).toLocaleString())
-                                    .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')
+                                    .join(' - '), onClick: () => addAggregationFilter(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')
                     ])] })] }));
 };
 export default memo(HitSummary);

package/components/elements/hit/HitSummary.test.js

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockShowErrorMessage = vi.hoisted(() => vi.fn());
 const mockSetQuery = vi.hoisted(() => vi.fn());
+const mockAddFilter = vi.hoisted(() => vi.fn());
 const mockGetFilters = vi.hoisted(() => vi.fn().mockResolvedValue(['status:open']));
 const mockGetMatchingTemplate = vi.hoisted(() => vi.fn());
 const fieldContextToken = vi.hoisted(() => ({ name: 'field-context' }));
@@ -23,7 +24,7 @@ vi.mock('@mui/material', () => ({
     Autocomplete: ({ onChange, renderInput }) => (_jsxs("div", { children: [renderInput({}), _jsx("button", { onClick: () => onChange?.(null, ['custom.field']), children: "add-custom-field" })] })),
     Box: ({ children }) => _jsx("div", { children: children }),
     Button: ({ children, onClick, disabled }) => (_jsx("button", { onClick: onClick, disabled: disabled, children: children })),
-    Chip: ({ label, onClick }) => _jsx("button", { onClick: onClick, children: label }),
+    Chip: ({ label, onClick }) => (_jsx("button", { "aria-label": "date-aggregation-chip", onClick: onClick, children: label })),
     CircularProgress: () => _jsx("div", { children: "loading" }),
     Divider: () => _jsx("div", { children: "divider" }),
     Fade: ({ children }) => _jsx("div", { children: children }),
@@ -124,6 +125,7 @@ describe('HitSummary', () => {
         parameterContextValue = {
             query: 'status:open',
             setQuery: mockSetQuery,
+            addFilter: mockAddFilter,
             views: []
         };
         recordSearchContextValue = {
@@ -134,16 +136,17 @@ describe('HitSummary', () => {
         mockDispatchApi.mockReset();
         mockShowErrorMessage.mockReset();
         mockSetQuery.mockReset();
+        mockAddFilter.mockReset();
         mockGetFilters.mockClear();
         mockGetMatchingTemplate.mockReset();
     });
-    it('aggregates template keys, supports ad hoc fields, and updates the search query from results', async () => {
+    it('aggregates template keys and adds aggregation filters without changing the search query', async () => {
         mockGetMatchingTemplate
             .mockResolvedValueOnce({ analytic: 'Analytic A', detection: 'Rule A', keys: ['severity', 'howler.id'] })
             .mockResolvedValueOnce({ analytic: 'Analytic A', detection: 'Rule B', keys: ['event.created'] });
         mockDispatchApi
             .mockResolvedValueOnce({
-            severity: { high: 2, low: 1 },
+            severity: { high: 2, low: 1, 'critical:high': 3 },
             'event.created': { '2026-01-01T00:00:00Z': 1, '2026-01-02T00:00:00Z': 1 }
         })
             .mockResolvedValueOnce({
@@ -166,14 +169,25 @@ describe('HitSummary', () => {
         expect(screen.getByText('hit-graph')).toBeInTheDocument();
         expect(screen.getByText('severity')).toBeInTheDocument();
         fireEvent.click(screen.getByText('high (2)'));
-        expect(mockSetQuery).toHaveBeenCalledWith('severity:"high"');
+        expect(mockAddFilter).toHaveBeenCalledWith('severity:"high"');
+        fireEvent.click(screen.getByText('critical:high (3)'));
+        expect(mockAddFilter).toHaveBeenCalledWith('severity:"critical\\:high"');
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        fireEvent.click(screen.getByLabelText('date-aggregation-chip'));
+        expect(mockAddFilter).toHaveBeenCalledWith('event.created:[2026-01-01T00:00:00Z TO 2026-01-02T00:00:00Z]');
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        mockGetFilters.mockResolvedValue([
+            'status:open',
+            'severity:"high"',
+            'event.created:[2026-01-01T00:00:00Z TO 2026-01-02T00:00:00Z]'
+        ]);
         fireEvent.click(screen.getByText('add-custom-field'));
         fireEvent.click(screen.getByText('button.aggregate'));
         await waitFor(() => expect(mockDispatchApi).toHaveBeenLastCalledWith({
             fields: ['custom.field'],
             query: 'status:open',
             rows: 25,
-            filters: ['status:open']
+            filters: ['status:open', 'severity:"high"', 'event.created:[2026-01-01T00:00:00Z TO 2026-01-02T00:00:00Z]']
         }, { throwError: false, logError: true, showError: false }));
         expect(screen.getByText('custom.field')).toBeInTheDocument();
     });

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1712",
+  "version": "3.1.0-dev.1716",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",