@cccsaurora/howler-ui 2.16.0-dev.378 → 2.16.0-dev.381

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

@@ -0,0 +1,505 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { hpost } from '@cccsaurora/howler-ui/api';
+import { cloneDeep } from 'lodash-es';
+import { setupContextSelectorMock, setupLocalStorageMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { useContextSelector } from 'use-context-selector';
+import { DEFAULT_QUERY, MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { HitContext } from './HitProvider';
+import HitSearchProvider, { HitSearchContext } from './HitSearchProvider';
+import { ParameterContext } from './ParameterProvider';
+import { ViewContext } from './ViewProvider';
+vi.mock('api', { spy: true });
+setupContextSelectorMock();
+const mockLocalStorage = setupLocalStorageMock();
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+const mockSetParams = vi.fn();
+const mockParams = vi.mocked(useParams);
+const mockLocation = vi.mocked(useLocation());
+const mockViewContext = {
+    getCurrentViews: ({ viewId } = {}) => Promise.resolve([{ view_id: viewId || 'test_view_id', query: 'howler.id:*' }])
+};
+let mockParameterContext = {
+    filters: [],
+    span: 'date.range.1.week',
+    sort: 'event.created desc',
+    query: 'howler.analytic:*',
+    setQuery: query => (mockParameterContext.query = query),
+    offset: 0,
+    setOffset: offset => {
+        mockParameterContext.offset = parseInt(offset);
+    },
+    views: [],
+    addView: vi.fn()
+};
+const originalMockParameterContext = cloneDeep(mockParameterContext);
+const mockHitContext = {
+    hits: {},
+    loadHits: hits => {
+        mockHitContext.hits = {
+            ...mockHitContext.hits,
+            ...Object.fromEntries(hits.map(hit => [hit.howler.id, hit]))
+        };
+    }
+};
+const Wrapper = ({ children }) => {
+    return (_jsx(ViewContext.Provider, { value: mockViewContext, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(HitContext.Provider, { value: mockHitContext, children: _jsx(HitSearchProvider, { children: children }) }) }) }));
+};
+beforeEach(() => {
+    mockParameterContext = cloneDeep(originalMockParameterContext);
+    vi.mocked(originalMockParameterContext.addView).mockClear();
+    mockLocalStorage.clear();
+    mockSetParams.mockClear();
+    mockLocation.pathname = '/hits';
+    mockLocation.search = '';
+    mockParams.mockReturnValue({ id: undefined });
+    vi.mocked(hpost).mockClear();
+    let mockSearchParams = new URLSearchParams();
+    vi.mocked(useSearchParams).mockReturnValue([mockSearchParams, mockSetParams]);
+});
+describe('HitSearchContext', () => {
+    it('should initialize with default values', async () => {
+        const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+            displayType: ctx.displayType,
+            searching: ctx.searching,
+            error: ctx.error,
+            response: ctx.response,
+            bundleId: ctx.bundleId,
+            fzfSearch: ctx.fzfSearch
+        })), { wrapper: Wrapper });
+        expect(hook.result.current.displayType).toBe('list');
+        expect(hook.result.current.searching).toBe(false);
+        expect(hook.result.current.error).toBeNull();
+        expect(hook.result.current.response).toBeNull();
+        expect(hook.result.current.bundleId).toBeNull();
+        expect(hook.result.current.fzfSearch).toBe(false);
+    });
+    it('should set bundleId when on bundles route', () => {
+        mockLocation.pathname = '/bundles/test_bundle_id';
+        mockParams.mockReturnValue({ id: 'test_bundle_id' });
+        const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.bundleId), { wrapper: Wrapper });
+        expect(hook.result.current).toBe('test_bundle_id');
+    });
+    it('should initialize queryHistory from localStorage', () => {
+        const mockHistory = { 'test:query': new Date().toISOString() };
+        mockLocalStorage.setItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.QUERY_HISTORY}`, JSON.stringify(mockHistory));
+        const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.queryHistory), { wrapper: Wrapper });
+        expect(hook.result.current).toEqual(mockHistory);
+    });
+    describe('setDisplayType', () => {
+        it('should update display type', () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                displayType: ctx.displayType,
+                setDisplayType: ctx.setDisplayType
+            })), { wrapper: Wrapper });
+            expect(hook.result.current.displayType).toBe('list');
+            act(() => {
+                hook.result.current.setDisplayType('grid');
+            });
+            expect(hook.result.current.displayType).toBe('grid');
+        });
+    });
+    describe('setFzfSearch', () => {
+        it('should update fzfSearch state', () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                fzfSearch: ctx.fzfSearch,
+                setFzfSearch: ctx.setFzfSearch
+            })), { wrapper: Wrapper });
+            expect(hook.result.current.fzfSearch).toBe(false);
+            act(() => {
+                hook.result.current.setFzfSearch(true);
+            });
+            expect(hook.result.current.fzfSearch).toBe(true);
+        });
+    });
+    describe('setQueryHistory', () => {
+        it('should update query history', () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                queryHistory: ctx.queryHistory,
+                setQueryHistory: ctx.setQueryHistory
+            })), { wrapper: Wrapper });
+            const newHistory = { 'new:query': new Date().toISOString() };
+            act(() => {
+                hook.result.current.setQueryHistory(newHistory);
+            });
+            expect(hook.result.current.queryHistory).toEqual(newHistory);
+        });
+    });
+    describe('search', () => {
+        it('should perform a search and update response', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                search: ctx.search,
+                searching: ctx.searching,
+                response: ctx.response,
+                error: ctx.error
+            })), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current.search('test query');
+            });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                    query: expect.stringContaining('test query')
+                }));
+            });
+        });
+        it('should set searching state during search', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                search: ctx.search,
+                searching: ctx.searching
+            })), { wrapper: Wrapper });
+            expect(hook.result.current.searching).toBe(false);
+            let res;
+            vi.mocked(hpost).mockReturnValue(new Promise(_res => (res = _res)));
+            act(() => {
+                hook.result.current.search('test query');
+            });
+            hook.rerender();
+            // Searching should be true immediately after calling search
+            await waitFor(() => {
+                expect(hook.result.current.searching).toBe(true);
+            });
+            res({
+                items: [{ howler: { id: 'hit1' } }],
+                offset: 0,
+                rows: 1,
+                total: 10
+            });
+            hook.rerender();
+            // Searching should be true immediately after calling search
+            await waitFor(() => {
+                expect(hook.result.current.searching).toBe(false);
+            });
+        });
+        it('should handle search errors', async () => {
+            vi.mocked(hpost).mockRejectedValueOnce(new Error('Search failed'));
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                search: ctx.search,
+                error: ctx.error,
+                searching: ctx.searching
+            })), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current.search('test query');
+            });
+            await waitFor(() => {
+                expect(hook.result.current.error).toBe('Search failed');
+                expect(hook.result.current.searching).toBe(false);
+            });
+        });
+        it('should append results when appendResults is true', async () => {
+            const mockResponse = {
+                items: [{ howler: { id: 'hit1' } }],
+                offset: 0,
+                rows: 1,
+                total: 10
+            };
+            vi.mocked(hpost).mockResolvedValueOnce(mockResponse);
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                search: ctx.search,
+                response: ctx.response
+            })), { wrapper: Wrapper });
+            // First search
+            act(() => {
+                hook.result.current.search('test query');
+            });
+            await waitFor(() => {
+                expect(hook.result.current.response).toBeDefined();
+                expect(hook.result.current.response).not.toBeNull();
+            });
+            // Mock second response
+            vi.mocked(hpost).mockResolvedValueOnce({
+                items: [{ howler: { id: 'hit2' } }],
+                offset: 1,
+                rows: 1,
+                total: 10
+            });
+            // Append results
+            act(() => {
+                hook.result.current.search('test query', true);
+            });
+            hook.rerender();
+            await waitFor(() => {
+                expect(hook.result.current.response?.items.length).toBe(2);
+            });
+        });
+        it('should include bundle filter when on bundles route', async () => {
+            mockLocation.pathname = '/bundles/test_bundle_id';
+            mockParams.mockReturnValue({ id: 'test_bundle_id' });
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current('test query');
+            });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                    query: 'test query',
+                    filters: ['event.created:[now-1w TO now]', 'howler.bundles:test_bundle_id']
+                }));
+            });
+        });
+        it('should apply date range filter from span', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current('test query');
+            });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                    filters: expect.arrayContaining([expect.stringContaining('event.created:')])
+                }));
+            });
+        });
+        it('should apply custom date range when span is custom', async () => {
+            mockParameterContext.span = 'date.range.custom';
+            mockParameterContext.startDate = '2025-01-01';
+            mockParameterContext.endDate = '2025-12-31';
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current('test query');
+            });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                    filters: expect.arrayContaining([expect.stringContaining('event.created:')])
+                }));
+            });
+        });
+        it('should exclude filters ending with * from search', async () => {
+            mockParameterContext.filters = ['status:open', 'howler.escalation:*'];
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current('test query');
+            });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                    filters: expect.not.arrayContaining([expect.stringContaining('howler.escalation:*')])
+                }));
+            });
+        });
+        it('should reset offset if response total is less than current offset', async () => {
+            mockParameterContext.offset = 100;
+            vi.mocked(hpost).mockResolvedValueOnce({
+                items: [],
+                offset: 0,
+                rows: 0,
+                total: 50
+            });
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                search: ctx.search
+            })), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current.search('test query');
+            });
+            hook.rerender();
+            await waitFor(() => {
+                expect(mockParameterContext.offset).toBe(0);
+            });
+        });
+        it('should not search when sort or span is null', async () => {
+            mockParameterContext.sort = null;
+            mockParameterContext.span = null;
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            act(() => {
+                hook.result.current('test query');
+            });
+            // Should not make API call
+            await waitFor(() => {
+                expect(hpost).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('automatic search on parameter changes', () => {
+        it('should trigger search when filters change', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                response: ctx.response
+            })), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalled();
+            });
+            vi.mocked(hpost).mockClear();
+            // Change filters via ParameterContext
+            mockParameterContext.filters = [...mockParameterContext.filters, 'howler.status:open'];
+            hook.rerender();
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalled();
+            }, { timeout: 2000 });
+        });
+        it('should not trigger search when query is DEFAULT_QUERY and no bundleId', async () => {
+            mockParameterContext.query = DEFAULT_QUERY;
+            renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.response), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(hpost).not.toHaveBeenCalled();
+            });
+        });
+        it('should not trigger search when span is custom but dates are missing', async () => {
+            renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.response), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(hpost).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('useHitSearchContextSelector', () => {
+        it('should allow selecting specific values from context', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ({
+                searching: ctx.searching,
+                error: ctx.error
+            })), { wrapper: Wrapper });
+            expect(hook.result.current.searching).toBe(false);
+            expect(hook.result.current.error).toBeNull();
+        });
+    });
+    describe('edge cases', () => {
+        it('should handle concurrent search calls with throttling', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+            // Make multiple rapid calls
+            act(() => {
+                hook.result.current('query1');
+                hook.result.current('query2');
+                hook.result.current('query3');
+            });
+            // Should only call API once due to throttling
+            await waitFor(() => {
+                expect(hpost).toHaveBeenCalledTimes(1);
+            }, { timeout: 2000 });
+        });
+        it('should clear response when query becomes DEFAULT_QUERY without viewId or bundleId', async () => {
+            const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.response), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(hook.result.current).toBeDefined();
+            }, { timeout: 2000 });
+            // Change to default query
+            mockParameterContext.query = DEFAULT_QUERY;
+            hook.rerender();
+            await waitFor(() => {
+                expect(hook.result.current).toBeNull();
+            });
+        });
+    });
+    describe('multiple views support', () => {
+        describe('AND logic for multiple view queries', () => {
+            it('should combine two view queries with AND logic', async () => {
+                mockParameterContext.views = ['view_1', 'view_2'];
+                mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                    { view_id: 'view_1', query: 'howler.status:open' },
+                    { view_id: 'view_2', query: 'howler.priority:high' }
+                ]);
+                const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+                act(() => {
+                    hook.result.current('test query');
+                });
+                await waitFor(() => {
+                    expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                        query: 'test query',
+                        filters: expect.arrayContaining(['howler.status:open', 'howler.priority:high'])
+                    }));
+                });
+            });
+            it('should combine three view queries with AND logic', async () => {
+                mockParameterContext.views = ['view_1', 'view_2', 'view_3'];
+                mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                    { view_id: 'view_1', query: 'howler.status:open' },
+                    { view_id: 'view_2', query: 'howler.priority:high' },
+                    { view_id: 'view_3', query: 'howler.analytic:sigma' }
+                ]);
+                const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+                act(() => {
+                    hook.result.current('test query');
+                });
+                await waitFor(() => {
+                    expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                        query: 'test query',
+                        filters: [
+                            'event.created:[now-1w TO now]',
+                            'howler.status:open',
+                            'howler.priority:high',
+                            'howler.analytic:sigma'
+                        ]
+                    }));
+                });
+            });
+        });
+        describe('default view URL injection', () => {
+            it('should inject default view into URL when no views and not on /views route', async () => {
+                mockViewContext.defaultView = 'default_view_id';
+                mockLocation.pathname = '/search';
+                mockParameterContext.views = [];
+                const mockSearchParams = new URLSearchParams();
+                vi.mocked(useSearchParams).mockReturnValue([mockSearchParams, mockSetParams]);
+                renderHook(() => useContextSelector(HitSearchContext, () => { }), { wrapper: Wrapper });
+                await waitFor(() => {
+                    expect(mockParameterContext.addView).toBeCalledWith('default_view_id');
+                });
+            });
+            it('should not inject default view when views already present', async () => {
+                mockViewContext.defaultView = 'default_view_id';
+                mockLocation.pathname = '/search';
+                mockParameterContext.views = ['existing_view'];
+                const mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('view', 'existing_view');
+                vi.mocked(useSearchParams).mockReturnValue([mockSearchParams, mockSetParams]);
+                renderHook(() => useContextSelector(HitSearchContext, () => { }), { wrapper: Wrapper });
+                await waitFor(() => {
+                    expect(mockParameterContext.addView).not.toBeCalled();
+                });
+            });
+            it('should not inject when no default view exists', async () => {
+                mockViewContext.defaultView = null;
+                mockLocation.pathname = '/search';
+                mockParameterContext.views = [];
+                const mockSearchParams = new URLSearchParams();
+                vi.mocked(useSearchParams).mockReturnValue([mockSearchParams, mockSetParams]);
+                renderHook(() => useContextSelector(HitSearchContext, () => { }), { wrapper: Wrapper });
+                await waitFor(() => {
+                    expect(mockSetParams).not.toHaveBeenCalled();
+                });
+            });
+        });
+        describe('invalid view IDs', () => {
+            it('should not break when view ID does not exist', async () => {
+                mockParameterContext.views = ['non_existent_view'];
+                mockViewContext.getCurrentViews = vi.fn(() => Promise.resolve([null]));
+                const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+                act(() => {
+                    hook.result.current('test query');
+                });
+                await waitFor(() => {
+                    expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                        query: expect.stringContaining('test query'),
+                        filters: ['event.created:[now-1w TO now]']
+                    }));
+                }, { timeout: 2000 });
+            });
+            it('should skip null views and combine valid ones', async () => {
+                mockParameterContext.views = ['view_1', 'invalid_view', 'view_2'];
+                mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                    { view_id: 'view_1', query: 'howler.status:open' },
+                    { view_id: 'view_2', query: 'howler.priority:high' }
+                ]);
+                const hook = renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.search), { wrapper: Wrapper });
+                act(() => {
+                    hook.result.current('test query');
+                });
+                await waitFor(() => {
+                    expect(hpost).toHaveBeenCalledWith('/api/v1/search/hit', expect.objectContaining({
+                        query: 'test query',
+                        filters: ['event.created:[now-1w TO now]', 'howler.status:open', 'howler.priority:high']
+                    }));
+                });
+            });
+        });
+        describe('automatic search triggering', () => {
+            it('should not trigger search when views is empty and query is DEFAULT_QUERY', async () => {
+                mockParameterContext.query = DEFAULT_QUERY;
+                mockParameterContext.views = [];
+                renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.response), { wrapper: Wrapper });
+                await waitFor(() => {
+                    expect(hpost).not.toHaveBeenCalled();
+                });
+            });
+            it('should trigger search when views.length > 0 even with DEFAULT_QUERY', async () => {
+                mockParameterContext.query = DEFAULT_QUERY;
+                mockParameterContext.views = ['view_1'];
+                renderHook(() => useContextSelector(HitSearchContext, ctx => ctx.response), { wrapper: Wrapper });
+                await waitFor(() => {
+                    expect(hpost).toHaveBeenCalled();
+                });
+            });
+        });
+    });
+});

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

@@ -1,26 +1,34 @@
 import type { FC, PropsWithChildren } from 'react';
-interface ParameterProviderType {
+export interface ParameterContextType {
     selected?: string;
     query?: string;
     offset: number;
     trackTotalHits: boolean;
     sort?: string;
     span?: string;
-    filter?: string;
+    filters?: string[];
     startDate?: string;
     endDate?: string;
+    views?: string[];
     setSelected: (id: string) => void;
     setQuery: (id: string) => void;
     setOffset: (offset: string | number) => void;
     setSort: (sort: string) => void;
     setSpan: (span: string) => void;
-    setFilter: (filter: string) => void;
     setCustomSpan: (startDate: string, endDate: string) => void;
+    addFilter: (filter: string) => void;
+    removeFilter: (filter: string) => void;
+    setFilter: (index: number, filter: string) => void;
+    clearFilters: () => void;
+    addView: (view: string) => void;
+    removeView: (view: string) => void;
+    setView: (index: number, view: string) => void;
+    clearViews: () => void;
 }
-export declare const ParameterContext: import("use-context-selector").Context<ParameterProviderType>;
+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>;
-export declare const useParameterContextSelector: <Selected>(selector: (value: ParameterProviderType) => Selected) => Selected;
+export declare const useParameterContextSelector: <Selected>(selector: (value: ParameterContextType) => Selected) => Selected;
 export default ParameterProvider;