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

package/components/routes/hits/search/grid/HitGrid.js

@@ -7,7 +7,6 @@ import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers'
 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 { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
@@ -20,8 +19,7 @@ import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import HitContextMenu from '../HitContextMenu';
 import HitQuery from '../HitQuery';
-import QuerySettings from '../shared/QuerySettings';
-import ViewLink from '../ViewLink';
+import QuerySettings from '../QuerySettings';
 import AddColumnModal from './AddColumnModal';
 import ColumnHeader from './ColumnHeader';
 import HitRow from './HitRow';
@@ -36,11 +34,9 @@ const HitGrid = () => {
     const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
     const [analyticIds, setAnalyticIds] = useState({});
     const columnModalRef = useRef();
@@ -124,7 +120,7 @@ const HitGrid = () => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsx(ViewLink, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
                                     position: 'absolute',
                                     left: 0,
                                     right: 0,

package/components/routes/hits/search/shared/HitFilter.d.ts

@@ -1,4 +1,6 @@
 declare const _default: import("react").NamedExoticComponent<{
     size?: "small" | "medium";
+    id: number;
+    value: string;
 }>;
 export default _default;

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Stack, TextField } from '@mui/material';
+import { FilterList } from '@mui/icons-material';
+import { Autocomplete, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 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';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
@@ -15,50 +18,55 @@ const ACCEPTED_LOOKUPS = [
     'event.provider',
     'organization.name'
 ];
-const HitFilter = ({ size }) => {
+const HitFilter = ({ size, id, value }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    const savedFilter = useContextSelector(ParameterContext, ctx => ctx.filter);
+    const { dispatchApi } = useMyApi();
     const setSavedFilter = useContextSelector(ParameterContext, ctx => ctx.setFilter);
-    const [category, setCategory] = useState(ACCEPTED_LOOKUPS[0]);
-    const [filter, setFilter] = useState('');
+    const removeSavedFilter = useContextSelector(ParameterContext, ctx => ctx.removeFilter);
+    const [category, setCategory] = useState(value?.split(':')[0] ?? ACCEPTED_LOOKUPS[0]);
+    const [filter, setFilter] = useState(value?.split(':')[1] ?? null);
+    const [loading, setLoading] = useState(false);
     const [customLookups, setCustomLookups] = useState([]);
     useEffect(() => {
-        if (savedFilter) {
-            const [_category, _filter] = (savedFilter || ':').split(':');
+        if (value) {
+            const [_category, _filter] = (value || ':').split(':');
             if (_category) {
                 setCategory(_category);
             }
-            if (_filter) {
+            if (_filter && _filter !== '*') {
                 setFilter(_filter);
             }
             if (_category && _filter) {
-                setSavedFilter(`${_category}:${_filter}`);
+                setSavedFilter(id, `${_category}:${_filter}`);
             }
         }
-    }, [setSavedFilter, savedFilter]);
+    }, [id, setSavedFilter, value]);
     const onCategoryChange = useCallback(async (_, _category) => {
         setCategory(_category);
-        setFilter('');
-        setSavedFilter(null);
+        setFilter(null);
         if (!config.lookups[_category]) {
-            const facets = await api.search.facet.hit.post({ query: 'howler.id:*', fields: [_category] });
-            setCustomLookups(Object.keys(facets[_category]));
+            setLoading(true);
+            const facets = await dispatchApi(api.search.facet.hit.post({ query: 'howler.id:*', fields: [_category], rows: 100 }), {
+                throwError: false
+            });
+            setCustomLookups(Object.keys((facets ?? {})[_category]));
+            setLoading(false);
         }
         else {
             setCustomLookups([]);
         }
-    }, [config.lookups, setSavedFilter]);
-    const onValueChange = useCallback((_, value) => {
-        setFilter(value);
-        if (value) {
-            const newFilter = `${category}:"${sanitizeLuceneQuery(value)}"`;
-            setSavedFilter(newFilter);
+    }, [config.lookups, dispatchApi]);
+    const onValueChange = useCallback((_, newValue) => {
+        setFilter(newValue);
+        if (newValue && newValue !== '*') {
+            setSavedFilter(id, `${category}:"${sanitizeLuceneQuery(newValue)}"`);
         }
         else {
-            setSavedFilter(null);
+            setSavedFilter(id, `${category}:*`);
         }
-    }, [category, setSavedFilter]);
-    return (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.75 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px' }, size: size ?? 'small', value: category, options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, sx: { minWidth: '150px' }, disabled: !category, size: size ?? 'small', value: filter?.replaceAll('"', '').replaceAll('\\-', '-') || '', options: config.lookups[category] ? config.lookups[category] : customLookups, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValueChange })] }));
+    }, [category, id, setSavedFilter]);
+    const filterValue = filter?.replaceAll('"', '').replaceAll('\\-', '-') || '';
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: category && _jsx(Typography, { variant: "body2", children: `${category}:${filterValue || '*'}` }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: value?.endsWith('*') ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(Autocomplete, { fullWidth: true, size: size ?? 'small', value: category, options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, disabled: !category, loading: loading, size: size ?? 'small', value: filter?.replaceAll('"', '').replaceAll('\\-', '-') || '', options: [...(config.lookups[category] ? config.lookups[category] : customLookups), '*'], renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValueChange })] }) }));
 };
 export default memo(HitFilter);

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { Sort } from '@mui/icons-material';
+import { Autocomplete, Stack, TextField } from '@mui/material';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import CustomSort from '../CustomSort';
+import CustomSort from './CustomSort';
 const CUSTOM = '__custom__';
 const ACCEPTED_SORTS = [
     'event.created',
@@ -21,7 +23,8 @@ const ACCEPTED_SORTS = [
 const HitSort = ({ size = 'small' }) => {
     const { t } = useTranslation();
     const location = useLocation();
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
+    const views = useContextSelector(ParameterContext, ctx => ctx.views);
     const savedSort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
     const sortEntries = useMemo(() => savedSort.split(',').filter(part => !!part), [savedSort]);
@@ -53,13 +56,18 @@ const HitSort = ({ size = 'small' }) => {
             return;
         }
         (async () => {
-            const selectedView = await getCurrentView({ lazy: true });
-            if (selectedView?.sort && !location.search.includes('sort')) {
-                setSavedSort(selectedView.sort);
+            const selectedViewSort = (await getCurrentViews({ lazy: true })).find(view => view?.sort)?.sort;
+            if (selectedViewSort && !location.search.includes('sort')) {
+                setSavedSort(selectedViewSort);
             }
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getCurrentView]);
-    return !showCustomSort ? (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.5 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '175px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsxs(Select, { size: size, sx: { minWidth: '150px' }, value: sort, onChange: e => setSavedSort(`${field} ${e.target.value}`), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] })) : (_jsx(CustomSort, {}));
+    }, [getCurrentViews, views]);
+    return (_jsx(ChipPopper, { icon: _jsx(Sort, { fontSize: "small" }), label: savedSort, slotProps: { chip: { size: 'small' } }, children: !showCustomSort ? (_jsxs(Stack, { spacing: 1, onClick: e => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '275px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsx(Autocomplete, { fullWidth: true, size: size, sx: { minWidth: '150px' }, value: sort, onChange: (_e, value) => {
+                        setSavedSort(`${field} ${value}`);
+                    }, options: ['asc', 'desc'], getOptionLabel: option => t(option), renderInput: _params => _jsx(TextField, { ..._params }) })] })) : (_jsx(CustomSort, {})) }));
 };
 export default memo(HitSort);

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

@@ -1,12 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Autocomplete, TextField } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvTimer } from '@mui/icons-material';
+import { Autocomplete, Stack, TextField, Typography } from '@mui/material';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import dayjs from 'dayjs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
+import CustomSpan from './CustomSpan';
 const DATE_RANGES = [
     'date.range.1.day',
     'date.range.3.day',
@@ -18,27 +22,32 @@ const DATE_RANGES = [
 const SearchSpan = ({ omitCustom = false, size }) => {
     const { t } = useTranslation();
     const location = useLocation();
+    const views = useContextSelector(ParameterContext, ctx => ctx.views);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? dayjs(ctx.startDate) : null));
+    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : null));
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     useEffect(() => {
         if (location.search.includes('span')) {
             return;
         }
         (async () => {
-            const viewSpan = (await getCurrentView({ lazy: true }))?.span;
-            if (!viewSpan) {
+            const selectedViewSpan = (await getCurrentViews({ lazy: true })).find(view => view?.span)?.span;
+            if (!selectedViewSpan) {
                 return;
             }
-            if (viewSpan.includes(':')) {
-                setSpan(convertLuceneToDate(viewSpan));
+            if (selectedViewSpan.includes(':')) {
+                setSpan(convertLuceneToDate(selectedViewSpan));
             }
             else {
-                setSpan(viewSpan);
+                setSpan(selectedViewSpan);
             }
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getCurrentView]);
-    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
+    }, [getCurrentViews, views]);
+    return (_jsx(ChipPopper, { icon: _jsx(AvTimer, { fontSize: "small" }), label: _jsx(Typography, { variant: "body2", children: span !== 'date.range.custom'
+                ? t(span)
+                : `${startDate.format('YYYY-MM-DD HH:mm')} ${t('to')} ${endDate.format('YYYY-MM-DD HH:mm')}` }), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }), _jsx(CustomSpan, {})] }) }));
 };
 export default memo(SearchSpan);

package/components/routes/views/ViewComposer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HelpOutline, Save } from '@mui/icons-material';
-import { Alert, Checkbox, CircularProgress, Divider, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { Alert, Checkbox, CircularProgress, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
@@ -24,6 +24,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
+import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 import ErrorBoundary from '../ErrorBoundary';
 import HitQuery from '../hits/search/HitQuery';
 import HitSort from '../hits/search/shared/HitSort';
@@ -36,7 +37,7 @@ const ViewComposer = () => {
     const navigate = useNavigate();
     const addView = useContextSelector(ViewContext, ctx => ctx.addView);
     const editView = useContextSelector(ViewContext, ctx => ctx.editView);
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
     // view state
@@ -69,7 +70,7 @@ const ViewComposer = () => {
                         advance_on_triage: advanceOnTriage
                     }
                 });
-                navigate(`/views/${newView.view_id}`);
+                navigate(buildViewUrl(newView));
             }
             else {
                 await editView(routeParams.id, {
@@ -142,7 +143,7 @@ const ViewComposer = () => {
             return;
         }
         (async () => {
-            const viewToEdit = await getCurrentView();
+            const viewToEdit = (await getCurrentViews({ viewId: routeParams.id }))[0];
             if (!viewToEdit) {
                 setError('route.views.missing');
                 return;
@@ -161,7 +162,7 @@ const ViewComposer = () => {
             }
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [routeParams.id, getCurrentView]);
+    }, [routeParams.id, getCurrentViews]);
     return (_jsx(FlexPort, { children: _jsx(ErrorBoundary, { children: _jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(VSBox, { top: 0, children: [_jsx(VSBoxHeader, { pb: 1, children: _jsxs(Stack, { spacing: 1, children: [error && (_jsx(Alert, { variant: "outlined", severity: "error", children: t(error) })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.views.name'), size: "small", value: title, onChange: e => setTitle(e.target.value), fullWidth: true }), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, onChange: (__, _type) => {
                                                     if (_type) {
                                                         setType(_type);
@@ -171,6 +172,6 @@ const ViewComposer = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { '& > :not(.MuiDivider-root)': { flex: 1 } }, divider: _jsx(Divider, { flexItem: true, orientation: "vertical" }), children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
 };
 export default ViewComposer;

package/components/routes/views/Views.js

@@ -20,6 +20,7 @@ import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 const FIELDS_TO_SEARCH = ['title', 'query', 'sort', 'type', 'owner'];
 const ViewsBase = () => {
     const { t } = useTranslation();
@@ -173,7 +174,7 @@ const ViewsBase = () => {
     }, [offset, favouritesOnly, type]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
                 _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
-                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
+                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: buildViewUrl(item.item), children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
                         (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {

package/locales/en/translation.json

@@ -4,10 +4,12 @@
     "adminmenu.users": "Users",
     "add": "Add",
     "all": "All",
+    "*": "All values",
     "any": "Any",
     "asc": "Ascending",
     "close": "Close",
     "desc": "Descending",
+    "to": "to",
     "actions.running": "Action \"{{action}}\" is executing.",
     "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "api.user.apikey.updated": "New API key added successfully.",
@@ -246,6 +248,7 @@
     "hit.search.filter.values": "Values",
     "hit.search.filter.button": "Use lookup filters with predefined values",
     "hit.search.filter.label": "Lookup Filters",
+    "hit.search.filter.add": "Add filter",
     "hit.search.save.button": "Save query as view",
     "hit.search.save.view": "Save View",
     "hit.search.sort.button": "Sort Results",
@@ -254,8 +257,11 @@
     "hit.search.select.all": "Select all hits on page",
     "hit.search.select.clear": "Clear Selection",
     "hit.search.selected": "{{size}} selected",
+    "hit.search.view.add": "Add view",
     "hit.search.view.current": "Current View",
     "hit.search.view.default": "(Default)",
+    "hit.search.view.select": "Select View",
+    "hit.search.view.remove": "Remove View",
     "hit.viewer.aggregate": "Summary",
     "hit.viewer.comments": "Comments",
     "hit.viewer.data": "Raw Data",

package/locales/fr/translation.json

@@ -14,10 +14,12 @@
     "apikey.write": "Écrire",
     "add": "Ajouter",
     "all": "Tous",
+    "*": "Toutes les valeurs",
     "any": "Tous",
     "asc": "Ascendant",
     "close": "Fermer",
     "desc": "Descendant",
+    "to": "à",
     "actions.running": "Action \"{{action}}\" s'exécute.",
     "actions.succeeded": "Action \"{{action}}\" achevé avec succès.",
     "app.drawer.hit.assignment.autocomplete.label": "Choisissez le destinataire",
@@ -246,6 +248,7 @@
     "hit.search.filter.values": "Valeurs",
     "hit.search.filter.button": "Utiliser des filtres de recherche avec des valeurs prédéfinies",
     "hit.search.filter.label": "Filtres de recherche",
+    "hit.search.filter.add": "Ajouter un filtre",
     "hit.search.save.button": "Sauvegarder la requête en tant que vue",
     "hit.search.save.view": "Sauvegarder la vue",
     "hit.search.custom": "Triage personnalisé",
@@ -255,8 +258,11 @@
     "hit.search.select.all": "Sélectionner tous les résultats de la page",
     "hit.search.select.clear": "Effacer la sélection",
     "hit.search.selected": "{{size}} sélectionné(s)",
+    "hit.search.view.add": "Ajouter une vue",
     "hit.search.view.current": "Vue courante",
     "hit.search.view.default": "(Défaut)",
+    "hit.search.view.select": "Sélectionner une vue",
+    "hit.search.view.remove": "Supprimer la vue",
     "hit.viewer.aggregate": "Sommaire",
     "hit.viewer.comments": "Commentaires",
     "hit.viewer.data": "Données brutes",

package/package.json

@@ -51,7 +51,7 @@
     "react-markdown": "^10.1.0",
     "react-pluggable": "^0.4.3",
     "react-resize-detector": "^9.1.1",
-    "react-router": "^6.30.2",
+    "react-router": "^6.30.3",
     "react-router-dom": "^6.30.1",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-raw": "^7.0.0",
@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.16.0-dev.378",
+  "version": "2.16.0-dev.381",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/setupTests.js

@@ -9,5 +9,8 @@ expect.extend(matchers);
 // tell React Testing Library to look for id as the testId.
 configure({ testIdAttribute: 'id' });
 beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+    server.resetHandlers();
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+});
 afterAll(() => server.close());

package/tests/mocks.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Sets up a mock for use-context-selector that uses React's native context
+ * This allows tests to use context providers without the full use-context-selector implementation
+ */
+export declare const setupContextSelectorMock: () => void;
+/**
+ * Sets up a mock for react-router-dom with common defaults
+ * @param options - Override specific router behavior
+ */
+export declare const setupReactRouterMock: () => void;
+/**
+ * Sets up a mock localStorage instance
+ */
+export declare const setupLocalStorageMock: () => Storage;
+/**
+ * Sets up a mock sessionStorage instance
+ */
+export declare const setupSessionStorageMock: () => Storage;

package/tests/mocks.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from 'react';
+import { vi } from 'vitest';
+import MockLocalStorage from './MockLocalStorage';
+/**
+ * Sets up a mock for use-context-selector that uses React's native context
+ * This allows tests to use context providers without the full use-context-selector implementation
+ */
+export const setupContextSelectorMock = () => {
+    beforeAll(() => {
+        vi.mock('use-context-selector', async () => {
+            const actual = await vi.importActual('use-context-selector');
+            return {
+                ...actual,
+                createContext,
+                useContextSelector: (_context, selector) => {
+                    return selector(useContext(_context));
+                }
+            };
+        });
+    });
+    afterAll(() => vi.resetModules());
+};
+/**
+ * Sets up a mock for react-router-dom with common defaults
+ * @param options - Override specific router behavior
+ */
+export const setupReactRouterMock = () => {
+    const mockLocation = vi.hoisted(() => ({ pathname: '/hits', search: '' }));
+    const mockParams = vi.hoisted(() => ({ id: undefined }));
+    const mockSearchParams = vi.hoisted(() => new URLSearchParams());
+    const mockSetParams = vi.hoisted(() => vi.fn());
+    beforeAll(() => {
+        vi.mock('react-router-dom', () => ({
+            Link: forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, href: to, ...props, children: children }))),
+            useLocation: vi.fn(() => mockLocation),
+            useParams: vi.fn(() => mockParams),
+            useSearchParams: vi.fn(() => [mockSearchParams, mockSetParams]),
+            useNavigate: () => vi.fn()
+        }));
+    });
+    afterAll(() => vi.resetModules());
+};
+/**
+ * Sets up a mock localStorage instance
+ */
+export const setupLocalStorageMock = () => {
+    const mockLocalStorage = new MockLocalStorage();
+    Object.defineProperty(window, 'localStorage', {
+        value: mockLocalStorage,
+        writable: true
+    });
+    return mockLocalStorage;
+};
+/**
+ * Sets up a mock sessionStorage instance
+ */
+export const setupSessionStorageMock = () => {
+    const mockSessionStorage = new MockLocalStorage();
+    Object.defineProperty(window, 'sessionStorage', {
+        value: mockSessionStorage,
+        writable: true
+    });
+    return mockSessionStorage;
+};

package/tests/server-handlers.js

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { createMockAction } from './utils';
+import { createMockAction, createMockAnalytic, createMockHit, createMockView } from './utils';
 export const MOCK_RESPONSES = {
     '/api/v1/view/example_view_id': {
         owner: 'user',
@@ -13,42 +13,24 @@ export const MOCK_RESPONSES = {
         type: 'personal',
         span: 'date.range.1.month'
     },
-    '/api/v1/search/view': {
-        items: [
-            {
-                owner: 'user',
-                settings: {
-                    advance_on_triage: false
-                },
-                view_id: 'searched_view_id',
-                query: 'howler.id:searched',
-                sort: 'event.created desc',
-                title: 'Searched View',
-                type: 'personal',
-                span: 'date.range.1.month'
-            }
-        ],
+    '/api/v1/search/hit': {
+        items: [createMockHit({ howler: { id: 'howler.id' } })],
         total: 1,
         rows: 1
     },
-    '/api/v1/view/new_view_id': {
-        owner: 'user',
-        settings: {
-            advance_on_triage: false
-        },
-        view_id: 'new_view_id',
-        query: 'howler.id:new',
-        sort: 'event.created desc',
-        title: 'New View',
-        type: 'personal',
-        span: 'date.range.1.month'
+    '/api/v1/search/view': {
+        items: [createMockView({ view_id: 'searched_view_id', title: 'Searched View' })],
+        total: 1,
+        rows: 1
     },
+    '/api/v1/view/new_view_id': createMockView({ view_id: 'new_view_id' }),
     '/api/v1/view/:view_id/favourite': { success: true },
     '/api/v1/search/action': {
         items: [createMockAction()],
         total: 1,
         rows: 1
-    }
+    },
+    '/api/v1/analytic': [createMockAnalytic()]
 };
 const handlers = [
     ...Object.entries(MOCK_RESPONSES).map(([path, data]) => http.all(path, async () => HttpResponse.json({ api_response: data }))),

package/utils/viewUtils.d.ts

@@ -0,0 +1,2 @@
+import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
+export declare const buildViewUrl: (view: View) => string;

package/utils/viewUtils.js

@@ -0,0 +1,11 @@
+export const buildViewUrl = (view) => {
+    const params = new URLSearchParams();
+    params.set('view', view.view_id);
+    if (view.span) {
+        params.set('span', view.span);
+    }
+    if (view.sort) {
+        params.set('sort', view.sort);
+    }
+    return `/search?${params.toString()}`;
+};