@cccsaurora/howler-ui 2.18.0-dev.648 → 2.18.0-dev.674

package/components/hooks/useMySearch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
+import HitPreview from '@cccsaurora/howler-ui/components/elements/hit/HitPreview';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
@@ -40,7 +40,7 @@ const useMySearch = () => {
         },
         headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
         itemRenderer: (item, options) => {
-            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitQuickSearch, { hit: item.item, options: options }) }));
+            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitPreview, { hit: item.item, options: options }) }));
         }
     }), [navigate, pageCount, t]);
 };

package/components/hooks/useMySitemap.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
+import { Article, Book, BookRounded, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +24,9 @@ const useMySitemap = () => {
     return useMemo(() => ({
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
+            { path: '/cases/:id', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
+            { path: '/cases/:id/*', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {
                 path: '/admin/users/:id',

package/components/hooks/useMyTheme.js

@@ -1,9 +1,16 @@
 const DEFAULT_THEME = {
+    components: {
+        MuiChip: {
+            defaultProps: {
+                size: 'small'
+            }
+        }
+    },
     palette: {
         dark: {
             background: {
-                default: '#202020',
-                paper: '#202020'
+                default: '#181818',
+                paper: '#181818'
             },
             primary: {
                 main: '#7DA1DB'

package/components/hooks/useParamState.d.ts

@@ -0,0 +1,6 @@
+type Primitive = string | number | boolean | null;
+declare const useParamState: {
+    <T extends Primitive>(key: string, defaultValue?: T, list?: false): [T, (value: T) => void];
+    <T extends Exclude<Primitive, null>>(key: string, defaultValue: T, list: true): [T[], (value: T[]) => void];
+};
+export default useParamState;

package/components/hooks/useParamState.js

@@ -0,0 +1,48 @@
+import { useCallback, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+const parseValue = (raw, defaultValue) => {
+    if (raw === null)
+        return defaultValue;
+    if (typeof defaultValue === 'boolean')
+        return (raw === 'true');
+    if (typeof defaultValue === 'number') {
+        const n = Number(raw);
+        return (isNaN(n) ? defaultValue : n);
+    }
+    return raw;
+};
+const serializeValue = (value) => {
+    if (value === null || value === undefined)
+        return '';
+    return String(value);
+};
+// Scalar mode
+const useParamState = (key, defaultValue = null, list = false) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [value, setValue] = useState(() => {
+        if (list) {
+            const raws = searchParams.getAll(key);
+            return raws.map(r => parseValue(r, defaultValue));
+        }
+        return parseValue(searchParams.get(key), defaultValue);
+    });
+    const setter = useCallback((newValue) => {
+        setValue(newValue);
+        setSearchParams(prev => {
+            const next = new URLSearchParams(prev);
+            next.delete(key);
+            if (list) {
+                newValue.forEach(item => next.append(key, serializeValue(item)));
+            }
+            else {
+                const scalar = newValue;
+                if (scalar !== defaultValue && scalar !== null && scalar !== undefined) {
+                    next.set(key, serializeValue(scalar));
+                }
+            }
+            return next;
+        }, { replace: true });
+    }, [key, defaultValue, list, setSearchParams]);
+    return [value, setter];
+};
+export default useParamState;

package/components/hooks/useParamState.test.d.ts

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

package/components/hooks/useParamState.test.js

@@ -0,0 +1,166 @@
+/// <reference types="vitest" />
+import { act, renderHook } from '@testing-library/react';
+import { createElement } from 'react';
+import { MemoryRouter, useSearchParams } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import useParamState from './useParamState';
+// Creates a MemoryRouter wrapper using createElement to avoid JSX in a .ts file
+const makeWrapper = (search = '') => 
+// eslint-disable-next-line react/function-component-definition
+({ children }) => createElement(MemoryRouter, { initialEntries: [search ? `/?${search}` : '/'] }, children);
+// Composite hook: exposes the param state AND the live URL params for URL-level assertions
+const useParamStateWithUrl = (key, defaultValue) => {
+    const [value, setValue] = useParamState(key, defaultValue);
+    const [params] = useSearchParams();
+    return { value, setValue, params };
+};
+describe('useParamState', () => {
+    describe('scalar mode – initialization', () => {
+        it('returns the default value when the param is absent from the URL', () => {
+            const { result } = renderHook(() => useParamState('tab', 'dashboard'), { wrapper: makeWrapper() });
+            expect(result.current[0]).toBe('dashboard');
+        });
+        it('returns null when no default is provided and the param is absent', () => {
+            const { result } = renderHook(() => useParamState('tab'), { wrapper: makeWrapper() });
+            expect(result.current[0]).toBeNull();
+        });
+        it('reads a string value present in the URL', () => {
+            const { result } = renderHook(() => useParamState('tab', 'dashboard'), {
+                wrapper: makeWrapper('tab=settings')
+            });
+            expect(result.current[0]).toBe('settings');
+        });
+        it('coerces a URL string to a number when defaultValue is a number', () => {
+            const { result } = renderHook(() => useParamState('page', 0), { wrapper: makeWrapper('page=3') });
+            expect(result.current[0]).toBe(3);
+        });
+        it('returns the default number when the URL value is non-numeric', () => {
+            const { result } = renderHook(() => useParamState('page', 0), {
+                wrapper: makeWrapper('page=notanumber')
+            });
+            expect(result.current[0]).toBe(0);
+        });
+        it("coerces 'true' string to boolean true when defaultValue is boolean", () => {
+            const { result } = renderHook(() => useParamState('active', false), {
+                wrapper: makeWrapper('active=true')
+            });
+            expect(result.current[0]).toBe(true);
+        });
+        it("coerces 'false' string to boolean false when defaultValue is boolean", () => {
+            const { result } = renderHook(() => useParamState('active', true), {
+                wrapper: makeWrapper('active=false')
+            });
+            expect(result.current[0]).toBe(false);
+        });
+    });
+    describe('scalar mode – setter', () => {
+        it('updates the in-state value', () => {
+            const { result } = renderHook(() => useParamState('tab', 'dashboard'), { wrapper: makeWrapper() });
+            act(() => result.current[1]('settings'));
+            expect(result.current[0]).toBe('settings');
+        });
+        it('writes the new value to the URL', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('tab', 'dashboard'), { wrapper: makeWrapper() });
+            act(() => result.current.setValue('settings'));
+            expect(result.current.params.get('tab')).toBe('settings');
+        });
+        it('removes the param from the URL when set to the default value', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('tab', 'dashboard'), {
+                wrapper: makeWrapper('tab=settings')
+            });
+            act(() => result.current.setValue('dashboard'));
+            expect(result.current.params.has('tab')).toBe(false);
+        });
+        it('removes the param from the URL when set to null', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('tab', null), {
+                wrapper: makeWrapper('tab=settings')
+            });
+            act(() => result.current.setValue(null));
+            expect(result.current.params.has('tab')).toBe(false);
+        });
+        it('serializes a number to the URL', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('page', 0), { wrapper: makeWrapper() });
+            act(() => result.current.setValue(5));
+            expect(result.current.params.get('page')).toBe('5');
+        });
+        it('removes the param when a number is set back to its default', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('page', 0), { wrapper: makeWrapper('page=3') });
+            act(() => result.current.setValue(0));
+            expect(result.current.params.has('page')).toBe(false);
+        });
+        it('serializes boolean true to the URL', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('active', false), { wrapper: makeWrapper() });
+            act(() => result.current.setValue(true));
+            expect(result.current.params.get('active')).toBe('true');
+        });
+        it('removes boolean param when set back to its default', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('active', false), {
+                wrapper: makeWrapper('active=true')
+            });
+            act(() => result.current.setValue(false));
+            expect(result.current.params.has('active')).toBe(false);
+        });
+        it('does not clobber unrelated URL params when writing', () => {
+            const { result } = renderHook(() => useParamStateWithUrl('tab', 'dashboard'), {
+                wrapper: makeWrapper('sort=asc')
+            });
+            act(() => result.current.setValue('settings'));
+            expect(result.current.params.get('sort')).toBe('asc');
+        });
+    });
+    describe('list mode – initialization', () => {
+        it('returns an empty array when no list params are present', () => {
+            const { result } = renderHook(() => useParamState('tag', 'x', true), { wrapper: makeWrapper() });
+            expect(result.current[0]).toEqual([]);
+        });
+        it('reads multiple values from the URL', () => {
+            const { result } = renderHook(() => useParamState('tag', 'x', true), {
+                wrapper: makeWrapper('tag=a&tag=b&tag=c')
+            });
+            expect(result.current[0]).toEqual(['a', 'b', 'c']);
+        });
+    });
+    describe('list mode – setter', () => {
+        it('updates the in-state array value', () => {
+            const { result } = renderHook(() => useParamState('tag', '', true), { wrapper: makeWrapper() });
+            act(() => result.current[1](['alpha', 'beta']));
+            expect(result.current[0]).toEqual(['alpha', 'beta']);
+        });
+        it('writes multiple values as repeated URL params', () => {
+            const { result } = renderHook(() => {
+                const [value, setValue] = useParamState('tag', '', true);
+                const [params] = useSearchParams();
+                return { value, setValue, params };
+            }, { wrapper: makeWrapper() });
+            act(() => result.current.setValue(['x', 'y', 'z']));
+            expect(result.current.params.getAll('tag')).toEqual(['x', 'y', 'z']);
+        });
+        it('clears all repeated params when set to an empty array', () => {
+            const { result } = renderHook(() => {
+                const [value, setValue] = useParamState('tag', '', true);
+                const [params] = useSearchParams();
+                return { value, setValue, params };
+            }, { wrapper: makeWrapper('tag=a&tag=b') });
+            act(() => result.current.setValue([]));
+            expect(result.current.params.getAll('tag')).toEqual([]);
+        });
+        it('replaces existing params entirely on update', () => {
+            const { result } = renderHook(() => {
+                const [value, setValue] = useParamState('tag', '', true);
+                const [params] = useSearchParams();
+                return { value, setValue, params };
+            }, { wrapper: makeWrapper('tag=old1&tag=old2') });
+            act(() => result.current.setValue(['new1']));
+            expect(result.current.params.getAll('tag')).toEqual(['new1']);
+        });
+        it('does not clobber unrelated URL params when writing list values', () => {
+            const { result } = renderHook(() => {
+                const [value, setValue] = useParamState('tag', '', true);
+                const [params] = useSearchParams();
+                return { value, setValue, params };
+            }, { wrapper: makeWrapper('sort=asc') });
+            act(() => result.current.setValue(['x']));
+            expect(result.current.params.get('sort')).toBe('asc');
+        });
+    });
+});

package/components/hooks/{useHitSelection.d.ts → useRecordSelection.d.ts}

@@ -1,8 +1,8 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type React from 'react';
-declare const useHitSelection: () => {
+declare const useRecordSelection: () => {
     lastSelected: string;
     setLastSelected: React.Dispatch<React.SetStateAction<string>>;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/{useHitSelection.js → useRecordSelection.js}

@@ -1,20 +1,14 @@
-import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const useHitSelection = () => {
-    const navigate = useNavigate();
-    const { setItems } = useAppBreadcrumbs();
-    const { routes } = useMySitemap();
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+const useRecordSelection = () => {
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const [lastSelected, setLastSelected] = useState(null);
     const onClick = useCallback((e, hit) => {
@@ -47,32 +41,17 @@ const useHitSelection = () => {
             e.stopPropagation();
             return;
         }
-        if (hit.howler.is_bundle) {
-            const searchRoute = routes.find(_route => _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, '$1')));
-            const newBreadcrumb = {
-                ...searchRoute,
-                path: location.pathname + location.search
-            };
-            setItems([{ route: newBreadcrumb, matcher: null }]);
-            navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
-            clearSelectedHits(hit.howler.id);
-        }
-        else {
-            clearSelectedHits(hit.howler.id);
-            setSelected(hit.howler.id);
-        }
+        clearSelectedHits(hit.howler.id);
+        setSelected(hit.howler.id);
     }, [
         addHitToSelection,
         clearSelectedHits,
         lastSelected,
-        navigate,
         removeHitFromSelection,
-        response,
-        routes,
+        response?.items,
         selectedHits,
-        setItems,
         setSelected
     ]);
     return { lastSelected, setLastSelected, onClick };
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/useRelatedRecords.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+type MixedRecords = Hit | Observable | Case;
+/**
+ * Fetches records matching the provided IDs from the hit, observable, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+declare const useRelatedRecords: <T = MixedRecords>(ids: string[], enabled?: boolean) => WithMetadata<T>[];
+export default useRelatedRecords;

package/components/hooks/useRelatedRecords.js

@@ -0,0 +1,32 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+/**
+ * Fetches records matching the provided IDs from the hit, observable, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+const useRelatedRecords = (ids, enabled = true) => {
+    const { dispatchApi } = useMyApi();
+    const [records, setRecords] = useState([]);
+    useEffect(() => {
+        if (!enabled || ids.length === 0) {
+            if (records.length > 0) {
+                setRecords([]);
+            }
+            return;
+        }
+        (async () => {
+            const joined = ids.join(' OR ');
+            const result = await dispatchApi(api.v2.search.post('hit,observable,case', {
+                query: `howler.id:(${joined}) OR case_id:(${joined})`
+            }), { throwError: false, showError: true });
+            if (result) {
+                setRecords(result.items);
+            }
+        })();
+    }, [dispatchApi, enabled, ids, records.length]);
+    return records;
+};
+export default useRelatedRecords;

package/components/routes/action/edit/ActionEditor.js

@@ -7,7 +7,7 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitQuery from '@cccsaurora/howler-ui/components/routes/hits/search/HitQuery';
+import RecordQuery from '@cccsaurora/howler-ui/components/routes/hits/search/RecordQuery';
 import { difference, uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -102,7 +102,7 @@ const ActionEditor = () => {
                                         : disabled && userOperations.length > 0
                                             ? t('route.actions.trigger.disabled.explanation')
                                             : null, children: component }, trigger));
-                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(HitQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
+                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(RecordQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
                             color: theme.palette.text.secondary,
                             fontSize: '0.9em',
                             fontStyle: 'italic',

package/components/routes/action/view/ActionSearch.js

@@ -109,7 +109,7 @@ const ActionSearch = () => {
                                     e.stopPropagation();
                                     await deleteAction(item.item.action_id);
                                     onSearch();
-                                }, children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
+                                }, children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
     }, [deleteAction, navigate, onSearch, t, user.roles, user.username]);
     return (_jsx(ItemManager, { onSearch: onSearch, onCreate: () => navigate('/action/execute'), onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.actions.search.prompt') }), searchFilters: _jsx(Autocomplete, { multiple: true, size: "small", value: searchModifiers, onChange: (__, values) => setSearchModifiers(values), getOptionLabel: trigger => t(`route.actions.trigger.${trigger}`), options: VALID_ACTION_TRIGGERS, renderInput: params => (_jsx(TextField, { ...params, sx: { maxWidth: '500px' }, label: t('route.actions.trigger') })) }), renderer: renderer, response: response, createPrompt: "route.actions.create", searchPrompt: "route.actions.search", createIcon: _jsx(Terminal, { sx: { mr: 1 } }) }));
 };

package/components/routes/advanced/QueryBuilder.js

@@ -233,7 +233,7 @@ const QueryBuilder = () => {
                                             height: '100%',
                                             '& .MuiFormControl-root': { height: '100%', '& > div': { height: '100%' } }
                                         }
-                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
+                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
                             (smallButtons ? (_jsx(Tooltip, { title: t('route.advanced.open'), children: _jsx(IconButton, { color: "primary", sx: { alignSelf: 'center' }, component: Link, disabled: !response, to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`, children: _jsx(OpenInNew, { fontSize: "small" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: _jsx(OpenInNew, {}), component: Link, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, children: t('route.advanced.open') }))), smallButtons ? (_jsx(Tooltip, { title: response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'center' }, color: "info", onClick: onCreateRule, disabled: !response, children: _jsx(SsidChart, {}) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", color: "info", startIcon: _jsx(SsidChart, {}), onClick: onCreateRule, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, tooltip: !response && t('route.advanced.create.rule.disabled'), children: t('route.advanced.create.rule') }))] }), _jsxs(Box, { width: "100%", height: "calc(100vh - 112px)", sx: { position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }, children: [_jsx(Box, { sx: {
                                 position: 'absolute',
                                 top: 0,

package/components/routes/advanced/QueryEditor.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMonaco } from '@monaco-editor/react';
 import { Box, useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
@@ -20,8 +20,8 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
     const yamlCompletion = useYamlCompletionProvider();
     const eqlCompletion = useEQLCompletionProvider();
     const historyCompletion = useHistoryCompletionProvider();
-    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
-    const setFzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.setFzfSearch);
+    const fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const setFzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.setFzfSearch);
     const beforeEditorMount = useCallback((_monaco) => {
         _monaco.languages.register({ id: 'lucene' });
         _monaco.languages.register({ id: 'eql' });

package/components/routes/advanced/historyCompletionProvider.js

@@ -1,13 +1,13 @@
 import { useMonaco } from '@monaco-editor/react';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import Fuse from 'fuse.js';
 import { useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
 const useHistoryCompletionProvider = () => {
     const monaco = useMonaco();
-    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch);
-    const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
+    const fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch);
+    const queryHistory = useContextSelector(RecordSearchContext, ctx => ctx?.queryHistory ?? {});
     // Using fuse for fuzzy searching
     const fuse = useMemo(() => new Fuse(Object.keys(queryHistory), { keys: ['key'], threshold: 0.4 }), [queryHistory]);
     return {

package/components/routes/analytics/AnalyticDetails.js

@@ -51,7 +51,7 @@ const AnalyticDetails = () => {
             _setFilter(detection);
         }
     }, [filter]);
-    const onOwnerChange = useCallback(async (ownerId) => {
+    const onOwnerChange = useCallback(async ([ownerId]) => {
         const result = await dispatchApi(api.analytic.owner.post(analytic.analytic_id, { username: ownerId }), {
             throwError: true,
             showError: true
@@ -108,7 +108,7 @@ const AnalyticDetails = () => {
                                                 marginTop: '0 !important',
                                                 marginLeft: `${theme.spacing(-1)} !important`,
                                                 marginRight: `${theme.spacing(-1)} !important`
-                                            }, userId: analytic?.owner, onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" })) : (_jsx(HowlerAvatar, { userId: analytic?.owner })), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] })), analytic?.rule_crontab && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('rule.interval') }), editingInterval ? (_jsxs(FormControl, { sx: { minWidth: '200px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { size: "small", label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })) : (_jsx("code", { style: {
+                                            }, userIds: [analytic?.owner], onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" })) : (_jsx(HowlerAvatar, { userId: analytic?.owner })), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] })), analytic?.rule_crontab && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('rule.interval') }), editingInterval ? (_jsxs(FormControl, { sx: { minWidth: '200px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { size: "small", label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })) : (_jsx("code", { style: {
                                                 backgroundColor: theme.palette.background.paper,
                                                 padding: theme.spacing(0.5),
                                                 alignSelf: 'start',

package/components/routes/analytics/AnalyticSearch.js

@@ -128,7 +128,7 @@ const AnalyticSearchBase = () => {
                                             padding: theme.spacing(0.5),
                                             borderRadius: theme.shape.borderRadius,
                                             border: `thin solid ${theme.palette.divider}`
-                                        }, children: item.item.rule_type })] })), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { size: "small", variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
+                                        }, children: item.item.rule_type })] })), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
     }, [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: t(`route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`), children: _jsx(IconButton, { onClick: () => setOnlyRules((((onlyRules + 2) % 3) - 1)), children: _jsx(SsidChart, { color: onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit', sx: { transition: theme.transitions.create(['color']) } }) }) }) }), aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
 };

package/components/routes/cases/CaseViewer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/cases/CaseViewer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@mui/material';
+import { memo } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
+import NotFoundPage from '../404';
+import ErrorBoundary from '../ErrorBoundary';
+import CaseDetails from './detail/CaseDetails';
+import CaseSidebar from './detail/CaseSidebar';
+import useCase from './hooks/useCase';
+const CaseViewer = () => {
+    const params = useParams();
+    const { case: _case, missing } = useCase({ caseId: params.id });
+    if (missing) {
+        return _jsx(NotFoundPage, {});
+    }
+    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsx(Box, { sx: {
+                    maxHeight: 'calc(100vh - 64px)',
+                    flex: 1,
+                    overflow: 'auto'
+                }, children: _jsx(ErrorBoundary, { children: _jsx(Outlet, { context: _case }) }) }), _jsx(CaseDetails, { case: _case })] }));
+};
+export default memo(CaseViewer);

package/components/routes/cases/Cases.d.ts

@@ -0,0 +1,2 @@
+declare const Cases: () => import("react/jsx-runtime").JSX.Element;
+export default Cases;