@cccsaurora/howler-ui 3.1.0-dev.1466 → 3.1.0-dev.1602

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

@@ -45,12 +45,15 @@ const HitFilter = ({ size, id, value }) => {
     const onCategoryChange = useCallback(async (_, _category) => {
         setCategory(_category);
         setFilter(null);
-        if (!config.lookups[_category]) {
+        if (!_category) {
+            return;
+        }
+        if (!config.lookups?.[_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]));
+            setCustomLookups(Object.keys((facets ?? {})[_category] ?? {}));
             setLoading(false);
         }
         else {
@@ -67,6 +70,8 @@ const HitFilter = ({ size, id, value }) => {
         }
     }, [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 })] }) }));
+    const configuredLookup = category && category in (config.lookups ?? {}) ? config.lookups?.[category] : undefined;
+    const lookupOptions = Array.isArray(configuredLookup) ? configuredLookup : customLookups;
+    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: [...lookupOptions, '*'], 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

@@ -6,7 +6,7 @@ import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/View
 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 { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import CustomSort from './CustomSort';
 const CUSTOM = '__custom__';
@@ -29,7 +29,7 @@ const HitSort = ({ size = 'small' }) => {
     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]);
+    const sortEntries = useMemo(() => savedSort?.split(',').filter(part => !!part) ?? [], [savedSort]);
     /**
      * The currently selected field when not using custom sorting
      */
@@ -41,7 +41,7 @@ const HitSort = ({ size = 'small' }) => {
     /**
      * Should the custom sorter be shown? Defaults to true if there's more than one sort field, or we're sorting on a field not supported by the default dropdown
      */
-    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0]?.split(' ')[0])));
+    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0].split(' ')[0])));
     /**
      * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
      */
@@ -49,7 +49,7 @@ const HitSort = ({ size = 'small' }) => {
         if (value === CUSTOM) {
             setShowCustomSort(true);
         }
-        else {
+        else if (value) {
             setSavedSort(`${value} ${sort}`);
         }
     }, [setSavedSort, sort]);
@@ -65,11 +65,13 @@ const HitSort = ({ size = 'small' }) => {
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getCurrentViews, views]);
-    return (_jsx(ChipPopper, { icon: _jsx(Sort, { fontSize: "small" }), label: savedSort, slotProps: { chip: { size: 'small' } }, children: !showCustomSort ? (_jsxs(Stack, { spacing: 1, onClick: e => {
+    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}`);
+                        if (field && 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/IndexPicker.js

@@ -15,7 +15,7 @@ const IndexPicker = ({ additionalOptions = [] }) => {
     const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
     const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
     const allOptions = [...FILTER_OPTIONS, ...additionalOptions];
-    const selectedOptions = allOptions.filter(opt => indexes.includes(opt.value));
+    const selectedOptions = allOptions.filter(opt => indexes?.includes(opt.value));
     return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: selectedOptions.map(opt => t(opt.label)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: allOptions, value: selectedOptions, onChange: (_ev, values) => values.length > 0 && setIndexes(values.map(val => val.value)), isOptionEqualToValue: (opt, val) => opt.value === val.value, getOptionLabel: opt => t(opt.label), renderInput: params => _jsx(TextField, { ...params }) }) }));
 };
 export default memo(IndexPicker);

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

@@ -4,7 +4,7 @@ import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleBut
 import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';

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

@@ -1,4 +1,4 @@
 declare const SearchActionMenu: ({ query }: {
     query: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SearchActionMenu;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SavedSearch, Terminal } from '@mui/icons-material';
 import { IconButton, Stack, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import LayoutSettings from './LayoutSettings';
 const SearchActionMenu = ({ query }) => {
     const { t } = useTranslation();

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

@@ -7,7 +7,7 @@ import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPo
 import dayjs from 'dayjs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
 import CustomSpan from './CustomSpan';

package/components/routes/hits/shared/PluginViewing.d.ts

@@ -0,0 +1,10 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+/**
+ * Plugin viewing handlers must be rendered because plugin implementations may use React hooks.
+ * Memoization prevents them from running again when the surrounding hit view rerenders unchanged.
+ */
+declare const PluginViewing: FC<{
+    hit: Hit;
+}>;
+export default PluginViewing;

package/components/routes/hits/shared/PluginViewing.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { memo } from 'react';
+import { usePluginStore } from 'react-pluggable';
+/**
+ * Plugin viewing handlers must be rendered because plugin implementations may use React hooks.
+ * Memoization prevents them from running again when the surrounding hit view rerenders unchanged.
+ */
+const PluginViewing = memo(({ hit }) => {
+    const pluginStore = usePluginStore();
+    return _jsx(_Fragment, { children: howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.on`, 'viewing', hit)) });
+});
+export default PluginViewing;

package/components/routes/hits/view/HitViewer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
@@ -23,21 +23,27 @@ import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/Reco
 import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
+import PluginViewing from '../shared/PluginViewing';
 import LeadRenderer from './LeadRenderer';
 export var Orientation;
 (function (Orientation) {
     Orientation["VERTICAL"] = "vertical";
     Orientation["HORIZONTAL"] = "horizontal";
 })(Orientation || (Orientation = {}));
+const hasApiStatus = (error, status) => {
+    if (typeof error !== 'object' || error === null || !('cause' in error)) {
+        return false;
+    }
+    const { cause } = error;
+    return typeof cause === 'object' && cause !== null && 'api_status_code' in cause && cause.api_status_code === status;
+};
 const HitViewer = () => {
     const { t, i18n } = useTranslation();
     const params = useParams();
@@ -47,7 +53,6 @@ const HitViewer = () => {
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
     const { emit, open } = useContext(SocketContext);
-    const { executeFunction } = usePluginStore();
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -63,10 +68,10 @@ const HitViewer = () => {
                 return;
             }
             setUserIds(getUserList(hit));
-            setAnalytic(await getMatchingAnalytic(hit));
+            setAnalytic((await getMatchingAnalytic(hit)) ?? undefined);
         }
-        catch (err) {
-            if (err.cause?.api_status_code === 404) {
+        catch (error) {
+            if (hasApiStatus(error, 404)) {
                 void navigate('/404');
             }
         }
@@ -76,14 +81,6 @@ const HitViewer = () => {
             setOrientation(Orientation.HORIZONTAL);
         }
     }, [isUnderLg, setOrientation]);
-    useEffect(() => {
-        if (!hit) {
-            return;
-        }
-        howlerPluginStore.plugins.forEach(plugin => {
-            executeFunction(`${plugin}.on`, 'viewing');
-        });
-    }, [executeFunction, hit]);
     useEffect(() => {
         void fetchData();
     }, [params.id, fetchData, hit]);
@@ -106,7 +103,9 @@ const HitViewer = () => {
     }, [emit, params.id, open]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
-        void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+        if (hit) {
+            void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+        }
     }, [getMatchingOverview, hit]);
     useEffect(() => {
         if (hasOverview && tab === 'details') {
@@ -121,12 +120,12 @@ const HitViewer = () => {
         if (!tab || !hit) {
             return;
         }
-        return {
+        const tabSections = {
             overview: () => _jsx(HitOverview, { hit: hit }),
             details: () => _jsx(ObjectDetails, { obj: hit }),
             hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
-            hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
+            hit_data: () => (_jsx(JSONViewer, { data: (hit?.howler?.data?.map(entry => tryParse(entry)) ?? []), collapse: false })),
             hit_worklog: () => _jsx(RecordWorklog, { record: hit, users: users }),
             hit_related: () => _jsx(RecordRelated, { record: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
@@ -134,7 +133,8 @@ const HitViewer = () => {
                 `external-lead:${dossierIndex}:${leadIndex}`,
                 () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
             ])))
-        }[tab]?.();
+        };
+        return tabSections[tab]?.();
     }, [dossiers, hit, tab, users]);
     useEffect(() => {
         if (!hit) {
@@ -145,37 +145,37 @@ const HitViewer = () => {
     if (!hit) {
         return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
     }
-    return (_jsx(PageCenter, { maxWidth: "1500px", children: _jsxs(Box, { sx: {
-                display: 'grid',
-                position: 'relative',
-                gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
-                alignItems: 'stretch',
-                gap: theme.spacing(2),
-                transition: `${theme.transitions.duration.standard}ms`,
-                mb: 1
-            }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
-                        display: 'flex',
-                        '& > .MuiPaper-root': { flex: 1 },
-                        mr: orientation === 'vertical' ? 0 : -2
-                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY, forceAllFields: true }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
-                                position: 'absolute',
-                                top: theme.spacing(2),
-                                right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
-                            // eslint-disable-next-line react/no-array-index-key
-                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
-                            // eslint-disable-next-line react/no-array-index-key
-                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
-                                            '& > .MuiBadge-badge': {
-                                                backgroundColor: theme.palette.divider,
-                                                zIndex: 1,
-                                                right: theme.spacing(-0.5)
-                                            },
-                                            '& > svg': { zIndex: 2 }
-                                        }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
-                        gridColumn: '1 / span 2',
-                        '& > div': { padding: 0 },
-                        '& .react-json-view': { backgroundColor: 'transparent !important' }
-                    }, children: tabContent })] }) }));
+    return (_jsxs(PageCenter, { maxWidth: "1500px", children: [_jsx(PluginViewing, { hit: hit }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
+                    alignItems: 'stretch',
+                    gap: theme.spacing(2),
+                    transition: `${theme.transitions.duration.standard}ms`,
+                    mb: 1
+                }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            '& > .MuiPaper-root': { flex: 1 },
+                            mr: orientation === 'vertical' ? 0 : -2
+                        }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY, forceAllFields: true }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
+                                    position: 'absolute',
+                                    top: theme.spacing(2),
+                                    right: theme.spacing(-6)
+                                }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                // eslint-disable-next-line react/no-array-index-key
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label?.en : lead.label?.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
+                                // eslint-disable-next-line react/no-array-index-key
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label?.en : _lead.label?.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                                '& > .MuiBadge-badge': {
+                                                    backgroundColor: theme.palette.divider,
+                                                    zIndex: 1,
+                                                    right: theme.spacing(-0.5)
+                                                },
+                                                '& > svg': { zIndex: 2 }
+                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
+                            gridColumn: '1 / span 2',
+                            '& > div': { padding: 0 },
+                            '& .react-json-view': { backgroundColor: 'transparent !important' }
+                        }, children: tabContent })] })] }));
 };
 export default HitViewer;

package/components/routes/hits/view/HitViewer.test.js

@@ -5,7 +5,9 @@ import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/Re
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 const mockEmit = vi.hoisted(() => vi.fn());
-const mockExecutePlugin = vi.hoisted(() => vi.fn());
+const mockExecutePlugin = vi.hoisted(() => vi.fn(function () {
+    return this.functionArray;
+}));
 const mockOpen = vi.hoisted(() => ({ current: true }));
 const mockParams = vi.hoisted(() => ({ id: 'hit-1' }));
 const mockGetHit = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
@@ -28,7 +30,7 @@ vi.mock('plugins/store', () => ({
     }
 }));
 vi.mock('react-pluggable', () => ({
-    usePluginStore: () => ({ executeFunction: mockExecutePlugin })
+    usePluginStore: () => ({ executeFunction: mockExecutePlugin, functionArray: [] })
 }));
 vi.mock('react-i18next', () => ({
     useTranslation: () => ({
@@ -36,8 +38,8 @@ vi.mock('react-i18next', () => ({
         i18n: { language: 'en' }
     })
 }));
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         useNavigate: () => mockNavigate,
@@ -142,7 +144,7 @@ const createWrapper = () => {
 const renderViewer = () => render(_jsx(HitViewer, {}), { wrapper: createWrapper() });
 beforeEach(() => {
     mockEmit.mockReset();
-    mockExecutePlugin.mockReset();
+    mockExecutePlugin.mockClear();
     mockOpen.current = true;
     mockParams.id = 'hit-1';
     mockUseMediaQuery.mockReset().mockReturnValue(false);
@@ -180,7 +182,7 @@ describe('HitViewer', () => {
         });
         expect(screen.getByText('details-content')).toBeInTheDocument();
         expect(mockExecutePlugin).toHaveBeenCalledTimes(1);
-        expect(mockExecutePlugin).toHaveBeenCalledWith('test-plugin.on', 'viewing');
+        expect(mockExecutePlugin).toHaveBeenCalledWith('test-plugin.on', 'viewing', hit);
     });
     it('emits viewing and stop_viewing socket events', async () => {
         const { unmount } = renderViewer();

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

@@ -1,7 +1,8 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 import type { FC } from 'react';
+type DashboardCard = NonNullable<HowlerUser['dashboard']>[number];
 declare const AddNewCard: FC<{
     dashboard: HowlerUser['dashboard'];
-    addCard: (newCard: any) => void;
+    addCard: (newCard: DashboardCard) => void;
 }>;
 export default AddNewCard;

package/components/routes/home/AddNewCard.js

@@ -53,6 +53,9 @@ const AddNewCard = ({ dashboard, addCard }) => {
                 rows: batchSize,
                 offset
             });
+            if (!response) {
+                break;
+            }
             allAnalytics = [...allAnalytics, ...(response.items ?? [])];
             total = response.total ?? 0;
             offset += batchSize;
@@ -64,7 +67,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
         void fetchAllAnalytics();
     }, []);
     const filteredAnalyticVisualizations = useMemo(() => {
-        const existingAnalyticCards = dashboard.filter(_card => _card.type === 'analytic');
+        const existingAnalyticCards = (dashboard ?? []).filter(_card => _card.type === 'analytic');
         return VISUALIZATIONS.filter(viz => {
             return !existingAnalyticCards.some(_card => {
                 const parsedConfig = JSON.parse(_card.config);
@@ -92,12 +95,12 @@ const AddNewCard = ({ dashboard, addCard }) => {
             setViewLoading(false);
         }
     }, [fetchViews]);
-    return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+    return (_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name ?? '', renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
                                             !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', Array.isArray(value) ? value[0] : value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
 };
 export default AddNewCard;

package/components/routes/home/AnalyticCard.js

@@ -5,7 +5,7 @@ import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Assessment from '../analytics/widgets/Assessment';
 import Created from '../analytics/widgets/Created';
 import Detection from '../analytics/widgets/Detection';
@@ -13,9 +13,9 @@ import Escalation from '../analytics/widgets/Escalation';
 import Status from '../analytics/widgets/Status';
 const AnalyticCard = ({ analyticId, type }) => {
     const { t } = useTranslation();
-    const [analytic, setAnalytic] = useState(null);
+    const [analytic, setAnalytic] = useState();
     const { getAnalyticFromId } = useContext(AnalyticContext);
-    const chartRef = useRef();
+    const chartRef = useRef(undefined);
     useEffect(() => {
         void getAnalyticFromId(analyticId).then(setAnalytic);
     }, [analyticId, getAnalyticFromId]);

package/components/routes/home/EntryWrapper.js

@@ -5,7 +5,7 @@ import { Delete } from '@mui/icons-material';
 import { Box, Grid, IconButton } from '@mui/material';
 const EntryWrapper = ({ editing, id, children, onDelete }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !editing });
-    return (_jsxs(Grid, { item: true, ref: setNodeRef, xs: 12, md: 6, sx: { position: 'relative' }, style: { transform: CSS.Translate.toString(transform), transition }, children: [editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "error", sx: theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 }), onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }), _jsx(Box, { ...attributes, ...listeners, sx: {
+    return (_jsxs(Grid, { ref: setNodeRef, size: { xs: 12, md: 6 }, sx: { position: 'relative' }, style: { transform: CSS.Translate.toString(transform), transition }, children: [editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "error", sx: theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 }), onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }), _jsx(Box, { ...attributes, ...listeners, sx: {
                             zIndex: 9,
                             position: 'absolute',
                             backgroundColor: 'background.paper',

package/components/routes/home/ViewCard.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
+import { AppListEmpty } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
@@ -12,7 +12,7 @@ import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { isEvent } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
@@ -24,7 +24,7 @@ const useSelectRecordsByIds = (recordIds) => {
     const prevRecordIdsRef = useRef([]);
     // Keep ref up to date with latest recordIds
     recordIdsRef.current = recordIds;
-    const selector = useCallback(ctx => {
+    const selector = useCallback((ctx) => {
         const currentRecordIds = recordIdsRef.current;
         // Fast path: if recordIds array didn't change, check if record objects changed
         if (prevRecordIdsRef.current.length === currentRecordIds.length &&
@@ -56,8 +56,9 @@ const createRecordSignature = (record) => {
     return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
 };
 const createSignatureFromRecords = (records) => {
-    if (records.length === 0)
+    if (records.length === 0) {
         return '';
+    }
     return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
@@ -81,7 +82,7 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
-            return;
+            return '';
         }
         isRefreshing.current = true;
         try {
@@ -92,6 +93,9 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
                 filters: view.span ? [`event.created:${convertDateToLucene(view.span)}`] : [],
                 metadata: ['analytic']
             }));
+            if (!res) {
+                return;
+            }
             const fetchedRecords = res.items ?? [];
             loadRecords(fetchedRecords);
             setRecordIds(fetchedRecords.map(r => r.howler.id));
@@ -156,10 +160,10 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
         if (!selectedElement) {
-            return;
+            return '';
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(EventCard, { event: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title ?? '') || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(EventCard, { event: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewCard.test.js

@@ -24,9 +24,9 @@ const mockSearchPost = vi.hoisted(() => vi.fn());
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
     // oxlint-disable-next-line consistent-type-imports
-    const actual = await vi.importActual('react-router-dom');
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         Link: ({ children, to, ...props }) => (_jsx("a", { href: to, ...props, children: children })),
@@ -66,9 +66,6 @@ vi.mock('components/elements/event/EventCard', () => ({
 vi.mock('components/elements/record/RecordContextMenu', () => ({
     default: ({ children }) => _jsx("div", { children: children })
 }));
-vi.mock('commons/components/display/AppListEmpty', () => ({
-    default: () => _jsx("div", { children: "No records" })
-}));
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 const hit = {
@@ -121,7 +118,7 @@ describe('ViewCard', () => {
     it('renders the empty state when the search has no records', async () => {
         mockDispatchApi.mockResolvedValue({ items: [] });
         render(_jsx(ViewCard, { viewId: "view-1", limit: 3 }), { wrapper: Wrapper });
-        expect(await screen.findByText('No records')).toBeInTheDocument();
+        expect(await screen.findByText('No Results')).toBeInTheDocument();
     });
     it('renders hits and events returned by the search', async () => {
         mockDispatchApi.mockResolvedValue({ items: [hit, event] });