@cccsaurora/howler-ui 2.19.0-cases.862 → 2.19.0-dev.1000

package/components/elements/hit/HitSummary.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -14,7 +14,6 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
@@ -24,10 +23,11 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [showHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const { getMatchingTemplate } = useMatchers();
-    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
-    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
-    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
@@ -41,7 +41,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const rawCounts = await Promise.all((response?.items ?? []).filter(isHit).map(async (h) => {
+            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
                 const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))
@@ -131,7 +131,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, searching, error]);
-    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, {}), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),

package/components/elements/{record/RecordWorklog.d.ts → hit/HitWorklog.d.ts}

@@ -1,11 +1,10 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import type { FC } from 'react';
-declare const RecordWorklog: FC<{
-    record: Hit | Observable;
+declare const HitWorklog: FC<{
+    hit: Hit;
     users: {
         [id: string]: HowlerUser;
     };
 }>;
-export default RecordWorklog;
+export default HitWorklog;

package/components/elements/{record/RecordWorklog.js → hit/HitWorklog.js}

@@ -10,7 +10,7 @@ import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/util
 import HowlerAvatar from '../display/HowlerAvatar';
 import HowlerCard from '../display/HowlerCard';
 import Markdown from '../display/Markdown';
-const RecordWorklog = ({ record, users }) => {
+const HitWorklog = ({ hit, users }) => {
     const theme = useTheme();
     const { shiftColor } = useMyUtils();
     const { t } = useTranslation();
@@ -23,15 +23,15 @@ const RecordWorklog = ({ record, users }) => {
      */
     const worklogGroups = useMemo(() => {
         let setInitialVersion = false;
-        return (record?.howler?.log || [])
+        return (hit?.howler?.log || [])
             .slice()
             .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
             .reduce((acc, l) => {
-            if (!initialVersions[record.howler.id] && !setInitialVersion) {
+            if (!initialVersions[hit.howler.id] && !setInitialVersion) {
                 setInitialVersion = true;
                 setInitialVersions({
                     ...initialVersions,
-                    [record.howler.id]: l.previous_version
+                    [hit.howler.id]: l.previous_version
                 });
             }
             // Initialize the worklog card groups
@@ -42,9 +42,9 @@ const RecordWorklog = ({ record, users }) => {
             const currArr = acc[acc.length - 1];
             if (
             // Does this log version match the saved version?
-            l.previous_version === initialVersions[record.howler.id] &&
+            l.previous_version === initialVersions[hit.howler.id] &&
                 // Does the previous entry not match?
-                currArr[currArr.length - 1].previous_version !== initialVersions[record.howler.id]) {
+                currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]) {
                 // If so, we've figured out where the new logs should start, so we start a new card.
                 acc.push([l]);
                 return acc;
@@ -59,14 +59,14 @@ const RecordWorklog = ({ record, users }) => {
         }, []);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [record?.howler?.log]);
+    [hit?.howler?.log]);
     useEffect(() => {
         // On unmount, mark the latest entry version as the last seen version.
         return () => {
-            if (record?.howler.id) {
+            if (hit?.howler.id) {
                 setInitialVersions({
                     ...initialVersions,
-                    [record.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[record.howler.id]
+                    [hit.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[hit.howler.id]
                 });
             }
         };
@@ -77,9 +77,7 @@ const RecordWorklog = ({ record, users }) => {
         if (worklogGroups.length > 0) {
             return worklogGroups.flatMap((ls, index) => {
                 const result = [];
-                if (index > 0 &&
-                    initialVersions[record.howler.id] &&
-                    ls[0].previous_version === initialVersions[record.howler.id]) {
+                if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
                     result.push(_jsx(Divider, { children: _jsxs(Stack, { direction: "row", children: [_jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('hit.worklog.new') }), _jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" })] }) }, "new"));
                 }
                 result.push(_jsxs(HowlerCard, { elevation: 4, children: [_jsx(CardHeader, { avatar: _jsx(HowlerAvatar, { userId: ls[0].user }), title: users[ls[0].user]?.name ?? ls[0].user, subheader: _jsx(Tooltip, { title: new Date(ls[0].timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", children: twitterShort(ls[0].timestamp) }) }) }), _jsx(CardContent, { children: _jsx(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: ls.map(l => (_jsxs(Typography, { variant: "body2", color: "text.secondary", component: "div", position: "relative", children: [l.explanation ? (_jsx(Markdown, { md: l.explanation.trim() })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('hit.worklog.updated'), "\u00A0"] }), _jsx("code", { children: l.key }), _jsx("span", { children: ":\u00A0" }), {
@@ -90,10 +88,10 @@ const RecordWorklog = ({ record, users }) => {
                 return result;
             });
         }
-        else if (!record?.howler) {
+        else if (!hit?.howler) {
             return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { width: "100%", height: 200, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 220, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 150, variant: "rounded" })] }));
         }
-    }, [worklogGroups, record.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
+    }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
     return (_jsx(Stack, { sx: { p: 2 }, spacing: 1, children: worklogEls }));
 };
-export default RecordWorklog;
+export default HitWorklog;

package/components/elements/hit/aggregate/HitGraph.js

@@ -4,9 +4,9 @@ import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconBut
 import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-dayjs-4';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+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 { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import dayjs from 'dayjs';
@@ -38,12 +38,12 @@ const HitGraph = () => {
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
-    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
-    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
-    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
-    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
-    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
-    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
+    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
+    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);

package/components/elements/hit/elements/{Assigned.d.ts → HitUsers.d.ts}

@@ -1,9 +1,12 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { FC } from 'react';
 import { HitLayout } from '../HitLayout';
-declare const Assigned: FC<{
+type AssignedProps = FC<{
     hit: Hit;
     layout: HitLayout;
     hideLabel?: boolean;
+    showAssigned?: boolean;
+    showAssessor?: boolean;
 }>;
-export default Assigned;
+declare const HitUsers: AssignedProps;
+export default HitUsers;

package/components/elements/hit/elements/HitUsers.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { avatarClasses, AvatarGroup, Chip, Divider, Stack, Typography } from '@mui/material';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import { useTranslation } from 'react-i18next';
+import { HitLayout } from '../HitLayout';
+const AvatarChip = ({ userId, noUser, placeholder, layout, hideLabel }) => {
+    const userAvatar = (_jsx(HowlerAvatar, { userId: userId, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }));
+    return hideLabel ? (userAvatar) : (_jsx(Chip, { variant: "outlined", sx: {
+            width: 'fit-content',
+            '& .MuiChip-icon': {
+                marginLeft: 0
+            }
+        }, icon: userAvatar, label: userId && userId !== noUser ? userId : placeholder, size: layout !== HitLayout.COMFY ? 'small' : 'medium' }));
+};
+const HitUsers = ({ hit, layout, hideLabel = false, showAssigned = false, showAssessor = false }) => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const assessorVisible = showAssessor || hit.howler.assessment != null;
+    const assigneeVisible = !hit.howler.assessor && (showAssigned || hit.howler.assignment !== 'unassigned');
+    return (_jsxs(Stack, { direction: hideLabel ? 'row' : 'column', spacing: 0.5, alignItems: "flex-start", children: [_jsxs(Stack, { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", alignItems: "center", columnGap: 0.5, rowGap: 0.25, children: [assigneeVisible && (_jsxs(_Fragment, { children: [!hideLabel && _jsxs(Typography, { variant: "caption", children: [t('app.drawer.hit.assignment.assignee'), ":"] }), _jsx(AvatarChip, { userId: hit?.howler.assignment, noUser: "unassigned", placeholder: t('app.drawer.hit.assignment.unassigned.name'), layout: layout, hideLabel: hideLabel })] })), assessorVisible && (_jsxs(_Fragment, { children: [!hideLabel && _jsxs(Typography, { variant: "caption", children: [t('app.drawer.hit.assessment.assessor'), ":"] }), _jsx(AvatarChip, { userId: hit.howler.assessor, noUser: "unknown", placeholder: t('app.drawer.hit.assessment.unknown.name'), layout: layout, hideLabel: hideLabel })] }))] }), hit.howler.viewers?.length > 0 && hideLabel && _jsx(Divider, { orientation: "vertical", flexItem: true, variant: "middle" }), _jsx(AvatarGroup, { max: 3, sx: { [`.${avatarClasses.root}`]: { border: 0, marginLeft: 0.5 } }, componentsProps: {
+                    additionalAvatar: {
+                        sx: {
+                            height: layout !== HitLayout.COMFY ? 24 : 32,
+                            width: layout !== HitLayout.COMFY ? 24 : 32,
+                            fontSize: '12px'
+                        }
+                    }
+                }, children: [...new Set(hit?.howler.viewers)]
+                    .filter(viewer => viewer !== user.username)
+                    .map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }, viewer))) })] }));
+};
+export default HitUsers;

package/components/elements/hit/outlines/DefaultOutline.js

@@ -41,7 +41,7 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
                 if (!displayedData) {
                     return null;
                 }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
+                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, hit: hit, children: displayedData })] }, field));
             })] }));
 };
 export default memo(DefaultOutline);

package/components/elements/view/ViewTitle.d.ts

@@ -3,7 +3,6 @@ interface ViewTitleProps {
     title?: string;
     type?: string;
     query?: string;
-    indexes?: string[];
     sort?: string;
     span?: string;
 }

package/components/elements/view/ViewTitle.js

@@ -4,7 +4,7 @@ import { Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-export const ViewTitle = ({ title, type, query, sort, span, indexes }) => {
+export const ViewTitle = ({ title, type, query, sort, span }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -17,16 +17,9 @@ export const ViewTitle = ({ title, type, query, sort, span, indexes }) => {
             return t(span);
         }
     }, [span, t]);
-    const indexLabel = useMemo(() => {
-        if (!indexes || indexes.length === 0) {
-            return '';
-        }
-        else
-            return `(${indexes.join(', ')})`;
-    }, [indexes]);
     return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
+                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
 };

package/components/hooks/useHitActions.d.ts

@@ -7,7 +7,7 @@ declare const useHitActions: (_hits: Hit | Hit[]) => {
     canAssess: boolean;
     loading: boolean;
     manage: (transition: string) => Promise<void>;
-    assess: (assessment: string, skipRationale?: boolean, providedRationale?: any) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean) => Promise<void>;
     vote: (v: string) => Promise<void>;
     selectedVote: string;
 };

package/components/hooks/useHitActions.js

@@ -4,8 +4,8 @@ import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const useHitActions = (_hits) => {
     const { showModal } = useContext(ModalContext);
     const { showWarningMessage } = useMySnackbar();
     const { dispatchApi } = useMyApi();
-    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
+    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
     const [loading, setLoading] = useState(false);
     const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
     const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
+    const assess = useCallback(async (assessment, skipRationale = false) => {
         const rationale = skipRationale
-            ? (providedRationale ?? t('rationale.default', { assessment }))
+            ? t('rationale.default', { assessment })
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);

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

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

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

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

package/components/hooks/useMyPreferences.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import { Api, Article, Book, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
 import { Stack } from '@mui/material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
@@ -24,15 +24,6 @@ const useMyPreferences = () => {
                     icon: _jsx(Dashboard, {})
                 }
             },
-            {
-                type: 'item',
-                element: {
-                    id: 'cases',
-                    i18nKey: 'route.cases',
-                    route: '/cases',
-                    icon: _jsx(BookRounded, {})
-                }
-            },
             {
                 type: 'group',
                 element: {
@@ -285,7 +276,8 @@ const useMyPreferences = () => {
             rightBeforeSearch: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }))
         },
         leftnav: {
-            elements: MENU_ITEMS
+            elements: MENU_ITEMS,
+            width: 280
         }
     }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS, leftItems, rightItems]);
 };

package/components/hooks/useMySearch.js

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

package/components/hooks/useMySitemap.js

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

package/components/hooks/useMyTheme.js

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

package/components/routes/403.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import PermissionDeniedPage from './403';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('PermissionDeniedPage (403)', () => {
+    it('should render the 403 title and description', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('403: Access Forbidden')).toBeInTheDocument();
+        expect(screen.getByText('You do not have permission to access this page.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the PersonOff icon', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        // MUI SVG icons have data-testid attribute
+        expect(document.querySelector('[data-testid="PersonOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/404.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import NotFoundPage from './404';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('NotFoundPage (404)', () => {
+    it('should render the 404 title and description', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('404: Not found')).toBeInTheDocument();
+        expect(screen.getByText('The page you are looking for cannot be found...')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the LinkOff icon', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(document.querySelector('[data-testid="LinkOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/ErrorBoundary.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import ErrorBoundary from './ErrorBoundary';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: vi.fn(() => null)
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+const ThrowingComponent = ({ error }) => {
+    throw error;
+};
+describe('ErrorBoundary', () => {
+    it('should render children when no error occurs', () => {
+        render(_jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Child content')).toBeInTheDocument();
+    });
+    it('should render error UI when a child throws', () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const testError = new Error('Test error message');
+        testError.stack = 'Error: Test error message\n    at TestComponent';
+        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Test error message')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
+    it('should display the error page title when an error occurs', () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const testError = new Error('Something went wrong');
+        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
+});