@cccsaurora/howler-ui 2.18.0-dev.841 → 2.19.0-cases.1040

package/components/elements/display/TextDivider.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import TextDivider from './TextDivider';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('TextDivider', () => {
+    describe('rendering', () => {
+        it('renders without crashing', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with inline-block display style', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ display: 'inline-block' });
+        });
+        it('renders with text-align center', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ textAlign: 'center' });
+        });
+        it('renders with width 100%', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ width: '100%' });
+        });
+        it('renders with position relative', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ position: 'relative' });
+        });
+        it('renders a nested div element', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            const outerDiv = container.firstChild;
+            expect(outerDiv.querySelector('div')).toBeInTheDocument();
+        });
+        it('renders the translated divider text', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            // The divider uses i18n key 'divider', text should be present
+            const innerDiv = container.querySelector('div > div');
+            expect(innerDiv).toBeInTheDocument();
+            expect(innerDiv.textContent).toBeTruthy();
+        });
+    });
+});

package/components/elements/display/TypingIndicator.test.d.ts

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

package/components/elements/display/TypingIndicator.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import TypingIndicator from './TypingIndicator';
+describe('TypingIndicator', () => {
+    describe('rendering', () => {
+        it('renders exactly three circle icons', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // Each Circle icon renders as an <svg> element
+            const svgs = container.querySelectorAll('svg');
+            expect(svgs).toHaveLength(3);
+        });
+        it('renders a root Stack element', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with flex row layout', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // MUI Stack with direction="row" uses flexbox
+            const root = container.firstChild;
+            expect(root).toHaveStyle({ display: 'flex', flexDirection: 'row' });
+        });
+    });
+    describe('accessibility', () => {
+        it('renders the circles as SVG elements', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            const svgs = container.querySelectorAll('svg');
+            svgs.forEach(svg => {
+                expect(svg.tagName.toLowerCase()).toBe('svg');
+            });
+        });
+    });
+});

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -1,5 +1,9 @@
 import type { FC } from 'react';
 declare const ConfirmDeleteModal: FC<{
     onConfirm: () => void;
+    title?: string;
+    description?: string;
+    preferDelete?: boolean;
+    preferCancel?: boolean;
 }>;
 export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmDeleteModal.js

@@ -3,13 +3,15 @@ import { Button, Stack, Typography } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const ConfirmDeleteModal = ({ onConfirm }) => {
+const ConfirmDeleteModal = ({ onConfirm, title, description, preferDelete, preferCancel }) => {
     const { t } = useTranslation();
     const { close } = useContext(ModalContext);
     const handleConfirm = useCallback(() => {
         onConfirm();
         close();
     }, [close, onConfirm]);
-    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.confirm.delete.title') }), _jsx(Typography, { children: t('modal.confirm.delete.description') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+    const modalTitle = title ?? t('modal.confirm.delete.title');
+    const modalDesc = description ?? t('modal.confirm.delete.description');
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: modalTitle }), _jsx(Typography, { children: modalDesc }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: preferCancel ? 'contained' : 'outlined', onClick: close, children: t('button.cancel') }), _jsx(Button, { variant: preferDelete ? 'contained' : 'outlined', onClick: handleConfirm, children: t('button.delete') })] })] }));
 };
 export default ConfirmDeleteModal;

package/components/elements/hit/HitBanner.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, iconButtonClasses, useTheme } from '@mui/material';
+import { OpenInNew } from '@mui/icons-material';
+import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, chipClasses, iconButtonClasses, useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -75,7 +76,7 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
                     ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
         return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
     }, [compressed, hit, t, textVariant]);
-    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden' }, children: [leftBox, _jsxs(Stack, { sx: {
+    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden', textDecoration: 'none', color: 'text.primary' }, component: "a", href: `/hits/${hit?.howler.id}`, onClick: e => e.preventDefault(), children: [leftBox, _jsxs(Stack, { sx: {
                     height: '100%',
                     padding: theme.spacing(1),
                     gridColumn: { xs: 'span 3', sm: 'span 1', md: 'span 1' }
@@ -96,6 +97,8 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' } }, onClick: e => {
+                            e.stopPropagation();
+                        } })), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
 };
 export default HitBanner;

package/components/elements/hit/HitLinks.js

@@ -12,7 +12,7 @@ const HitLinks = ({ hit, analytic, dossiers = [] }) => {
         dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.item}`]: { display: 'flex' } }, children: [hit?.howler?.links?.length > 0 &&
                 uniqBy(hit.howler.links, 'href')
                     .slice(0, 3)
-                    .map(l => (_jsx(Grid, { item: true, children: _jsx(RelatedLink, { compact: true, ...l }) }, l.href))), sortBy(dossiers.flatMap(_dossier => _dossier.pivots ?? []), `label.${i18n.language}`).map((_pivot, index) => (
+                    .map(l => (_jsx(Grid, { item: true, children: _jsx(RelatedLink, { compact: true, ...l, target: "_blank", rel: "noopener noreferrer" }) }, l.href))), sortBy(dossiers.flatMap(_dossier => _dossier.pivots ?? []), `label.${i18n.language}`).map((_pivot, index) => (
             // eslint-disable-next-line react/no-array-index-key
             _jsx(Grid, { item: true, children: _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }) }, _pivot.value + index))), analytic?.notebooks?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] })));
 };

package/components/elements/hit/HitSummary.js

@@ -1,4 +1,4 @@
-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';
@@ -24,6 +24,7 @@ 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);
@@ -131,7 +132,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/hit/elements/AnalyticLink.js

@@ -13,7 +13,7 @@ const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) =>
         getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
-    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", onAuxClick: e => {
                     e.stopPropagation();
                 }, onClick: e => {
                     e.stopPropagation();

package/components/elements/hit/elements/Assigned.d.ts

@@ -5,5 +5,7 @@ declare const Assigned: FC<{
     hit: Hit;
     layout: HitLayout;
     hideLabel?: boolean;
+    showAssessor?: boolean;
+    showAssigned?: boolean;
 }>;
 export default Assigned;

package/components/elements/hit/elements/Assigned.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { avatarClasses, AvatarGroup, Chip, Stack } from '@mui/material';
+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 { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
@@ -7,21 +7,23 @@ import { uniq } from 'lodash-es';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HitLayout } from '../HitLayout';
-const Assigned = ({ hit, layout, hideLabel = false }) => {
+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 Assigned = ({ hit, layout, hideLabel = false, showAssessor = false, showAssigned = false }) => {
     const { t } = useTranslation();
     const { user } = useAppUser();
     const { viewers } = useContext(SocketContext);
     const hitViewers = uniq(viewers[hit?.howler?.id] ?? []).filter(viewer => viewer !== user.username);
-    const userAvatar = (_jsx(HowlerAvatar, { userId: hit.howler.assignment, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }));
-    return (_jsxs(Stack, { direction: "row", spacing: 0.5, children: [hideLabel ? (userAvatar) : (_jsx(Chip, { variant: "outlined", sx: {
-                    width: 'fit-content',
-                    '& .MuiChip-icon': {
-                        marginLeft: 0
-                    }
-                }, icon: userAvatar, label: !hideLabel &&
-                    (hit?.howler.assignment !== 'unassigned'
-                        ? hit?.howler.assignment
-                        : t('app.drawer.hit.assignment.unassigned.name')), size: layout !== HitLayout.COMFY ? 'small' : 'medium' })), _jsx(AvatarGroup, { max: 3, sx: { [`.${avatarClasses.root}`]: { border: 0, marginLeft: 0.5 } }, componentsProps: {
+    const assessorVisible = showAssessor || hit.howler.assessment != null;
+    const assigneeVisible = !hit.howler.assessor && (showAssigned || hit.howler.assignment !== 'unassigned');
+    return (_jsxs(Stack, { direction: "row", spacing: 0.5, 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 })] }))] }), hitViewers.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,

package/components/elements/record/RecordContextMenu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
 import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
@@ -43,6 +44,7 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const { executeAction } = useMyActionFunctions();
+    const appUser = useAppUser();
     const { config } = useContext(ApiConfigContext);
     const { showModal } = useContext(ModalContext);
     const pluginStore = usePluginStore();
@@ -62,6 +64,14 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
             : [], [record, selectedRecords]);
     const hits = useMemo(() => records.filter(isHit), [records]);
     const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    /**
+     * Checks if the current user has permission to run actions.
+     * Users must have one of the automation or actionrunner roles, or be an admin.
+     */
+    const canRunActions = useCallback(() => {
+        const roles = ['admin', 'automation_advanced', 'automation_basic', 'actionrunner_advanced', 'actionrunner_basic'];
+        return roles.some((role) => appUser.user?.roles?.includes(role));
+    }, [appUser.user?.roles]);
     /**
      * Called by ContextMenu after the menu is positioned and opened.
      * Identifies the clicked record and fetches available actions.
@@ -69,8 +79,10 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
     const onOpen = useCallback(async (event) => {
         const _id = getSelectedId(event);
         setId(_id);
-        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
-            ?.items;
+        // TODO: Bumping the number of rows is a temporary fix - we'll need to improve this.
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*', rows: 100, sort: 'name asc' }), {
+            throwError: false
+        }))?.items;
         if (_actions) {
             setActions(_actions);
         }
@@ -163,7 +175,7 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
                 id: 'actions',
                 icon: _jsx(SettingsSuggest, {}),
                 label: t('route.actions.change'),
-                disabled: actions.length < 1,
+                disabled: actions.length < 1 || !canRunActions(),
                 items: actions.map(action => ({
                     key: action.action_id,
                     label: action.name,

package/components/elements/record/RecordContextMenu.test.js

@@ -8,6 +8,16 @@ import { vi } from 'vitest';
 // Mock API
 vi.mock('api', { spy: true });
 setupContextSelectorMock();
+// Mock useAppUser hook
+const mockUseAppUser = vi.hoisted(() => vi.fn(() => ({
+    user: {
+        username: 'test-user',
+        roles: ['automation_basic', 'actionrunner_basic']
+    }
+})));
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: mockUseAppUser
+}));
 // Mock react-router-dom
 const mockNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
@@ -948,4 +958,90 @@ describe('HitContextMenu', () => {
             });
         });
     });
+    describe('Role-Based Action Permissions', () => {
+        afterEach(() => {
+            // Reset to default user with required roles
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_basic', 'actionrunner_basic']
+                }
+            });
+        });
+        it('should disable actions menu when user lacks required roles', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['user', 'viewer']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            mockDispatchApi.mockResolvedValue({ items: mockActions });
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should enable actions menu when user has automation_basic role', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_basic']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            mockDispatchApi.mockResolvedValue({ items: mockActions });
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).not.toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should enable actions menu when user has actionrunner_advanced role', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['actionrunner_advanced']
+                }
+            });
+            const mockActions = [createMockAction({ action_id: 'action-1', name: 'Custom Action 1' })];
+            mockDispatchApi.mockResolvedValue({ items: mockActions });
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).not.toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should still disable actions menu when user has roles but no actions available', async () => {
+            mockUseAppUser.mockReturnValue({
+                user: {
+                    username: 'test-user',
+                    roles: ['automation_advanced']
+                }
+            });
+            mockDispatchApi.mockResolvedValue({ items: [] });
+            rerender(_jsx(Wrapper, { children: _jsx(RecordContextMenu, { getSelectedId: mockGetSelectedId, children: _jsx("div", { children: "Test Content" }) }) }));
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const actionsMenuItem = screen.getByTestId('actions-menu-item');
+                expect(actionsMenuItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+    });
 });

package/components/hooks/useMyApi.d.ts

@@ -1,4 +1,4 @@
-type DispatchApiConfig = {
+export type DispatchApiConfig = {
     throwError?: boolean;
     logError?: boolean;
     showError?: boolean;

package/components/hooks/useMyPreferences.js

@@ -285,7 +285,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/routes/403.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const PermissionDeniedPage: FC;
+export default PermissionDeniedPage;

package/components/routes/403.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PersonOff } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { useTranslation } from 'react-i18next';
+const PermissionDeniedPage = () => {
+    const { t } = useTranslation();
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(PersonOff, { color: "secondary", fontSize: "inherit" }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.403.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.403.description') }) })] }));
+};
+export default PermissionDeniedPage;

package/components/routes/403.test.d.ts

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

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.d.ts

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

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.d.ts

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

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();
+    });
+});

package/components/routes/ErrorOccured.test.d.ts

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

package/components/routes/ErrorOccured.test.js

@@ -0,0 +1,35 @@
+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 ErrorOccured from './ErrorOccured';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const mockExecuteFunction = vi.fn(() => null);
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: mockExecuteFunction
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['TestPlugin'] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ErrorOccured', () => {
+    it('should render the error title and description', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        expect(screen.getByText('The application stopped working suddenly. If the problem persists please reach out on teams.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should execute plugin support functions', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(mockExecuteFunction).toHaveBeenCalledWith('TestPlugin.support');
+    });
+});

package/components/routes/Logout.test.d.ts

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