@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/components/routes/analytics/AnalyticDetails.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 { Autocomplete, Divider, Grid, IconButton, Skeleton, Stack, Tab, Tabs, TextField, Typography, useTheme } from '@mui/material';
+import { PageCenter } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
 import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
@@ -10,7 +10,7 @@ import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/Howl
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams } from 'react-router';
 import AnalyticComments from './AnalyticComments';
 import AnalyticHitComments from './AnalyticHitComments';
 import AnalyticNotebooks from './AnalyticNotebooks';
@@ -26,23 +26,26 @@ const AnalyticDetails = () => {
     const theme = useTheme();
     const { users, searchUsers } = useContext(UserListContext);
     const { config } = useContext(ApiConfigContext);
-    const [analytic, setAnalytic] = useState(null);
+    const [analytic, setAnalytic] = useState();
     const [tab, setTab] = useState(searchParams.get('tab') ?? 'overview');
     const filteredContributors = useMemo(() => (analytic?.contributors ?? []).filter(_user => _user !== analytic?.owner), [analytic?.contributors, analytic?.owner]);
     useEffect(() => {
+        if (!params.id) {
+            setAnalytic(undefined);
+            return;
+        }
         void dispatchApi(api.analytic.get(params.id)).then(setAnalytic);
     }, [dispatchApi, params.id]);
     const [filter, _setFilter] = useState(searchParams.get('filter') ?? null);
     const setFilter = useCallback((detection) => {
-        if (filter === detection) {
-            _setFilter(null);
-        }
-        else {
-            _setFilter(detection);
-        }
-    }, [filter]);
+        _setFilter(currentFilter => (currentFilter === detection ? null : detection));
+    }, []);
     const onOwnerChange = useCallback(async ([ownerId]) => {
-        const result = await dispatchApi(api.analytic.owner.post(analytic.analytic_id, { username: ownerId }), {
+        const analyticId = analytic?.analytic_id;
+        if (!analyticId || !ownerId) {
+            return;
+        }
+        const result = await dispatchApi(api.analytic.owner.post(analyticId, { username: ownerId }), {
             throwError: true,
             showError: true
         });
@@ -63,27 +66,28 @@ const AnalyticDetails = () => {
         setSearchParams(searchParams, { replace: true });
     }, [filter, searchParams, setSearchParams, tab]);
     useEffect(() => {
-        if (!analytic?.owner) {
+        const owner = analytic?.owner;
+        if (!owner) {
             return;
         }
-        searchUsers(`uname:"${analytic?.owner}"`);
+        searchUsers(`uname:"${owner}"`);
     }, [analytic?.owner, searchUsers]);
     return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Typography, { variant: "h3", mb: 2, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [analytic ? (_jsx("span", { children: analytic.name })) : (_jsxs(Stack, { children: [_jsx(Skeleton, { variant: "text", width: "170px", height: "28px" }), _jsx(Skeleton, { variant: "text", width: "140px", height: "28px" })] })), _jsx(IconButton, { component: Link, to: `/hits?query=howler.analytic:"${analytic?.name}"`, children: _jsx(OpenInNew, {}) })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, divider: _jsx(Divider, { flexItem: true, orientation: "vertical", sx: { marginLeft: `${theme.spacing(2)} !important`, marginRight: `${theme.spacing(1)} !important` } }), mb: 2, children: [_jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('owner') }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(UserList, { buttonSx: {
                                                 marginTop: '0 !important',
                                                 marginLeft: `${theme.spacing(-1)} !important`,
                                                 marginRight: `${theme.spacing(-1)} !important`
-                                            }, userIds: [analytic?.owner], onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" }), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, md: 9, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), config?.configuration.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: t('route.analytics.dropdown.detection') }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), {
+                                            }, userIds: analytic?.owner ? [analytic.owner] : [], onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" }), _jsx(Stack, { children: analytic?.owner && users[analytic.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { size: { xs: 12, md: 9 }, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), config?.configuration?.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { size: { xs: 12, md: 3 }, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: t('route.analytics.dropdown.detection') }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), analytic ? ({
                     comments: _jsx(AnalyticComments, { analytic: analytic, setAnalytic: setAnalytic }),
                     hit_comments: _jsx(AnalyticHitComments, { analytic: analytic }),
                     overview: _jsx(AnalyticOverview, { analytic: analytic, setAnalytic: setAnalytic }),
                     overviews: _jsx(AnalyticOverviews, { analytic: analytic }),
                     templates: _jsx(AnalyticTemplates, { analytic: analytic }),
                     triage: _jsx(TriageSettings, { analytic: analytic, setAnalytic: setAnalytic }),
-                    ...(config?.configuration.features.notebook
+                    ...(config?.configuration?.features.notebook
                         ? {
                             notebooks: _jsx(AnalyticNotebooks, { analytic: analytic, setAnalytic: setAnalytic })
                         }
                         : {})
-                }[tab]] }) }));
+                }[tab]) : (_jsx(Skeleton, { variant: "rounded", width: "100%", height: 300, sx: { mt: 2 } }))] }) }));
 };
 export default AnalyticDetails;

package/components/routes/analytics/AnalyticHitComments.js

@@ -5,37 +5,43 @@ import Comment from '@cccsaurora/howler-ui/components/elements/Comment';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { compareTimestamp } from '@cccsaurora/howler-ui/utils/utils';
 const AnalyticHitComments = ({ analytic }) => {
     const [searchParams] = useSearchParams();
     const navigate = useNavigate();
-    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [pageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
     const [comments, setComments] = useState([]);
     const [loading, setLoading] = useState(false);
     const [userIds, setUserIds] = useState(new Set());
     const users = useMyUserList(userIds);
     useEffect(() => {
+        // oxlint-disable-next-line react/set-state-in-effect
         setUserIds(new Set(comments.map(c => c.comment.user)));
     }, [comments]);
     useEffect(() => {
         if (!analytic) {
             return;
         }
+        // oxlint-disable-next-line react/set-state-in-effect
         setLoading(true);
         void api.search.hit
             .post({
             query: `howler.analytic:"${sanitizeLuceneQuery(analytic.name)}" AND _exists_:howler.comment`,
-            rows: pageCount
+            rows: pageCount ?? 25
         })
             .then(response => {
-            setComments(response.items.flatMap(h => h.howler.comment.map(comment => ({
+            if (!response) {
+                setComments([]);
+                return;
+            }
+            setComments(response.items.flatMap(h => h.howler.comment?.map(comment => ({
                 hitId: h.howler.id,
                 detection: h.howler.detection,
                 comment
-            }))));
+            })) ?? []));
         })
             .finally(() => {
             setLoading(false);
@@ -44,7 +50,8 @@ const AnalyticHitComments = ({ analytic }) => {
     const commentEls = useMemo(() => loading ? (_jsx(LinearProgress, {})) : (comments
         .filter(c => !searchParams.has('filter') || c.detection === searchParams.get('filter'))
         .sort((a, b) => compareTimestamp(b.comment.timestamp, a.comment.timestamp))
-        .map(c => (_jsx(Comment, { comment: c.comment, users: users, onClick: () => navigate(`/hits/${c.hitId}`), extra: !searchParams.get('filter') && (_jsx(Chip, { size: "small", sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: c.detection ?? 'Analytic' })) }, c.comment.id)))), [loading, comments, searchParams, users, navigate]);
+        .map(c => (_jsx(Comment, { comment: c.comment, users: users, onClick: () => navigate(`/hits/${c.hitId}`), extra: !searchParams.get('filter') &&
+            c.detection && (_jsx(Chip, { size: "small", sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: c.detection })) }, c.comment.id)))), [loading, comments, searchParams, users, navigate]);
     return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Divider, { orientation: "horizontal", flexItem: true }), commentEls] }));
 };
 export default AnalyticHitComments;

package/components/routes/analytics/AnalyticHitComments.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
 import { render, screen, waitFor } from '@testing-library/react';
 import { omit } from 'lodash-es';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
 import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
@@ -56,10 +57,10 @@ vi.mock('@mui/material', () => ({
 vi.mock('utils/utils', () => ({
     compareTimestamp: (a, b) => new Date(b).getTime() - new Date(a).getTime()
 }));
-// Mock react-router-dom
+// Mock react-router
 const mockNavigate = vi.fn();
-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

package/components/routes/analytics/AnalyticNotebooks.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import { Add, Delete, Label, LinkRounded, Plagiarism } from '@mui/icons-material';
 import { Box, Card, CircularProgress, Divider, FormControl, Grid, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
@@ -43,15 +43,15 @@ const AnalyticNotebooks = ({ analytic, setAnalytic }) => {
     }, [analytic, dispatchApi, formState, setAnalytic]);
     const onDelete = useCallback(async (id) => {
         await dispatchApi(api.analytic.notebooks.del(analytic.analytic_id, [id]));
-        setAnalytic({ ...analytic, notebooks: analytic.notebooks.filter(n => n.id !== id) });
+        setAnalytic({ ...analytic, notebooks: (analytic.notebooks ?? []).filter(n => n.id !== id) });
     }, [analytic, dispatchApi, setAnalytic]);
-    return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { item: true, xs: 6, md: 2, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "select-label", children: 'Detection' }), _jsxs(Select, { labelId: "select-label", label: "Detection", value: formState.detection, onChange: ev => {
+    return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { size: { xs: 6, md: 2 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "select-label", children: 'Detection' }), _jsxs(Select, { labelId: "select-label", label: "Detection", value: formState.detection, onChange: ev => {
                                             setFormState({ ...formState, detection: ev.target.value });
-                                        }, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Plagiarism, {}) }), children: [_jsx(MenuItem, { value: "", children: t('analytic.notebook.dropdown.none') }), analytic?.detections?.map(d => (_jsx(MenuItem, { value: d, children: d }, d)))] })] }) }), _jsx(Grid, { item: true, xs: 6, md: 2, children: _jsx(TextField, { fullWidth: true, label: t('analytic.notebook.name'), value: formState.name, onChange: ev => {
+                                        }, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Plagiarism, {}) }), children: [_jsx(MenuItem, { value: "", children: t('analytic.notebook.dropdown.none') }), analytic?.detections?.map(d => (_jsx(MenuItem, { value: d, children: d }, d)))] })] }) }), _jsx(Grid, { size: { xs: 6, md: 2 }, children: _jsx(TextField, { fullWidth: true, label: t('analytic.notebook.name'), value: formState.name, onChange: ev => {
                                     setFormState({ ...formState, name: ev.currentTarget.value });
                                 }, InputProps: {
                                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Label, {}) }))
-                                } }) }), _jsx(Grid, { item: true, xs: 12, md: 8, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(TextField, { fullWidth: true, label: t('analytic.notebook.link'), value: formState.link, onChange: ev => {
+                                } }) }), _jsx(Grid, { size: { xs: 12, md: 8 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(TextField, { fullWidth: true, label: t('analytic.notebook.link'), value: formState.link, onChange: ev => {
                                             setFormState({ ...formState, link: ev.currentTarget.value });
                                         }, InputProps: {
                                             startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(LinkRounded, {}) }))

package/components/routes/analytics/AnalyticOverview.js

@@ -30,31 +30,44 @@ const AnalyticOverview = ({ analytic, setAnalytic }) => {
             return;
         }
         setLoading(true);
+        const analyticName = analytic.name;
+        if (!analyticName) {
+            setEmpty(true);
+            setLoading(false);
+            return;
+        }
         void api.search.count.hit
-            .post({ query: `howler.analytic:"${sanitizeLuceneQuery(analytic.name)}"` })
-            .then(({ count }) => setEmpty(!count))
+            .post({ query: `howler.analytic:"${sanitizeLuceneQuery(analyticName)}"` })
+            .then(response => setEmpty(!response?.count))
             .finally(() => setLoading(false));
     }, [analytic]);
     const onEdit = useCallback(async () => {
+        if (!editing) {
+            setEditValue(analytic.description ?? '');
+            setEditing(true);
+            return;
+        }
+        const analyticId = analytic.analytic_id;
+        if (!analyticId) {
+            return;
+        }
+        setMarkdownLoading(true);
         try {
-            if (editing) {
-                setMarkdownLoading(true);
-                const result = await dispatchApi(api.analytic.put(analytic.analytic_id, { description: editValue }), {
-                    showError: true,
-                    throwError: true
-                });
-                setAnalytic(result);
-                showSuccessMessage(t('route.analytics.updated'));
-            }
-            else {
-                setEditValue(analytic.description);
+            const result = await dispatchApi(api.analytic.put(analyticId, { description: editValue }), {
+                showError: true,
+                throwError: true
+            });
+            if (!result) {
+                return;
             }
+            setAnalytic(result);
+            setEditing(false);
+            showSuccessMessage(t('route.analytics.updated'));
         }
         finally {
-            setEditing(!editing);
             setMarkdownLoading(false);
         }
     }, [analytic, dispatchApi, editValue, editing, setAnalytic, showSuccessMessage, t]);
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true, sx: { mt: 1 } }), _jsxs(Stack, { spacing: 2, direction: isMd ? 'column' : 'row', divider: _jsx(Divider, { orientation: isMd ? 'horizontal' : 'vertical', flexItem: true }), sx: { flex: 1, '& > div': { flex: 1 } }, children: [_jsxs(Box, { sx: { maxWidth: '50%', overflow: 'auto' }, children: [_jsxs(Typography, { variant: "h5", sx: { mt: 2, mb: 1, display: 'flex', flexDirection: 'row' }, children: [t('route.analytics.overview.description'), _jsx(IconButton, { sx: { marginLeft: 'auto' }, disabled: markdownLoading, onClick: onEdit, children: markdownLoading ? (_jsx(CircularProgress, { size: 20 })) : editing ? (_jsx(Check, { fontSize: "small" })) : (_jsx(Edit, { fontSize: "small" })) })] }), editing ? (_jsx(TextField, { value: editValue, onChange: e => setEditValue(e.target.value), fullWidth: true, multiline: true, minRows: 30, sx: { '& textarea': { fontFamily: 'monospace', fontSize: 13 } } })) : (_jsx(Markdown, { md: analytic?.description }))] }), _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(Typography, { variant: "h5", sx: { mt: `${theme.spacing(2)} !important` }, children: t('route.analytics.overview.statistics') }), loading ? (_jsx(Skeleton, { variant: "rounded", width: "100%", height: "90px" })) : empty ? (_jsxs(Alert, { variant: "outlined", severity: "warning", children: [_jsx(AlertTitle, { children: t('route.analytics.overview.empty.title') }), t('route.analytics.overview.empty.description')] })) : (_jsxs(_Fragment, { children: [_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Created, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Escalation, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Assessment, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Status, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Detection, { analytic: analytic }) }) })] }))] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true, sx: { mt: 1 } }), _jsxs(Stack, { spacing: 2, direction: isMd ? 'column' : 'row', divider: _jsx(Divider, { orientation: isMd ? 'horizontal' : 'vertical', flexItem: true }), sx: { flex: 1, '& > div': { flex: 1 } }, children: [_jsxs(Box, { sx: { maxWidth: '50%', overflow: 'auto' }, children: [_jsxs(Typography, { variant: "h5", sx: { mt: 2, mb: 1, display: 'flex', flexDirection: 'row' }, children: [t('route.analytics.overview.description'), _jsx(IconButton, { sx: { marginLeft: 'auto' }, disabled: markdownLoading, onClick: onEdit, children: markdownLoading ? (_jsx(CircularProgress, { size: 20 })) : editing ? (_jsx(Check, { fontSize: "small" })) : (_jsx(Edit, { fontSize: "small" })) })] }), editing ? (_jsx(TextField, { value: editValue, onChange: e => setEditValue(e.target.value), fullWidth: true, multiline: true, minRows: 30, sx: { '& textarea': { fontFamily: 'monospace', fontSize: 13 } } })) : (_jsx(Markdown, { md: analytic?.description ?? '' }))] }), _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(Typography, { variant: "h5", sx: { mt: `${theme.spacing(2)} !important` }, children: t('route.analytics.overview.statistics') }), loading ? (_jsx(Skeleton, { variant: "rounded", width: "100%", height: "90px" })) : empty ? (_jsxs(Alert, { variant: "outlined", severity: "warning", children: [_jsx(AlertTitle, { children: t('route.analytics.overview.empty.title') }), t('route.analytics.overview.empty.description')] })) : (_jsxs(_Fragment, { children: [_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Created, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Escalation, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Assessment, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Status, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Detection, { analytic: analytic }) }) })] }))] })] })] }));
 };
 export default AnalyticOverview;

package/components/routes/analytics/AnalyticOverviews.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppListEmpty } from '@tui/core';
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
 import 'chartjs-adapter-dayjs-4';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import OverviewCard from '../overviews/OverviewCard';
 const AnalyticOverviews = ({ analytic }) => {
     const { t } = useTranslation();

package/components/routes/analytics/AnalyticSearch.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Star, StarBorder } from '@mui/icons-material';
 import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import { useAppUser } from '@tui/core';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
@@ -13,9 +13,10 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const SearchResponseContext = createSearchResponseContext();
 const AnalyticSearchBase = () => {
     const theme = useTheme();
     const navigate = useNavigate();
@@ -25,7 +26,7 @@ const AnalyticSearchBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const appUser = useAppUser();
-    const { response, request } = useContext(SearchResponseContext);
+    const { response, request } = useSearchResponseContext(SearchResponseContext);
     const [searching, setSearching] = useState(false);
     const [hasError, setHasError] = useState(false);
     const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
@@ -34,14 +35,14 @@ const AnalyticSearchBase = () => {
         await dispatchApi(api.analytic.favourite.post(analytic.analytic_id));
         appUser.setUser({
             ...appUser.user,
-            favourite_analytics: [...appUser.user.favourite_analytics, analytic.analytic_id]
+            favourite_analytics: [...(appUser.user.favourite_analytics ?? []), analytic.analytic_id]
         });
     }, [appUser, dispatchApi]);
     const removeFavourite = useCallback(async (analytic) => {
         await dispatchApi(api.analytic.favourite.del(analytic.analytic_id));
         appUser.setUser({
             ...appUser.user,
-            favourite_analytics: appUser.user.favourite_analytics.filter(v => v !== analytic.analytic_id)
+            favourite_analytics: (appUser.user.favourite_analytics ?? []).filter(v => v !== analytic.analytic_id)
         });
     }, [appUser, dispatchApi]);
     // Search Handler.
@@ -81,7 +82,7 @@ const AnalyticSearchBase = () => {
     const onFavourite = useCallback(async (event, analytic) => {
         event.preventDefault();
         event.stopPropagation();
-        if (appUser.user?.favourite_analytics.includes(analytic.analytic_id)) {
+        if (appUser.user?.favourite_analytics?.includes(analytic.analytic_id)) {
             await dispatchApi(removeFavourite(analytic));
         }
         else {
@@ -99,7 +100,7 @@ const AnalyticSearchBase = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -119,11 +120,11 @@ const AnalyticSearchBase = () => {
                 transitionProperty: 'border-color',
                 cursor: 'pointer',
                 mt: 1
-            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), (item.item.detections?.length ?? 0) > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { children: _jsx(Chip, { variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
     }, [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
 };
 const AnalyticSearch = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "analytic_id", children: _jsx(AnalyticSearchBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "analytic_id", children: _jsx(AnalyticSearchBase, {}) }) }));
 };
 export default AnalyticSearch;

package/components/routes/analytics/AnalyticTemplates.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
+import { AppListEmpty } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-dayjs-4';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import TemplateCard from '../templates/TemplateCard';
 const AnalyticTemplates = ({ analytic }) => {
     const { t } = useTranslation();
@@ -18,7 +18,7 @@ const AnalyticTemplates = ({ analytic }) => {
     useEffect(() => {
         setLoading(true);
         void dispatchApi(api.template.get())
-            .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
+            .then(_templates => (_templates ?? []).filter(_template => _template.analytic === analytic?.name))
             .then(setTemplates)
             .finally(() => setLoading(false));
     }, [analytic?.name, dispatchApi]);

package/components/routes/analytics/TriageSettings.d.ts

@@ -3,6 +3,6 @@ import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/A
 import type { FC } from 'react';
 declare const TriageSettings: FC<{
     analytic: Analytic;
-    setAnalytic: (a: Analytic) => void;
+    setAnalytic: (a?: Analytic) => void;
 }>;
 export default TriageSettings;

package/components/routes/analytics/TriageSettings.js

@@ -38,7 +38,7 @@ const TriageSettings = ({ analytic, setAnalytic }) => {
                                         triage_settings: { skip_rationale: JSON.parse(value) }
                                     }) }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { width: '100%', borderBottom: 0, paddingBottom: '0 !important', whiteSpace: 'nowrap' }, children: t('route.analytics.triage.assessments') }) }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { borderBottom: 0, paddingTop: '0 !important' }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.analytics.triage.assessments.description') }), _jsx(Grid, { container: true, spacing: 1, sx: theme => ({ marginLeft: `${theme.spacing(-1)} !important`, marginTop: `0 !important` }), children: config.lookups?.['howler.assessment']?.map(assessment => {
                                                         const checked = selectedAssessments.includes(assessment) ?? true;
-                                                        return (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", icon: checked ? (_jsx(Check, { fontSize: "small", color: "success" })) : (_jsx(Remove, { fontSize: "small", color: "error" })), color: checked ? 'success' : 'error', label: _jsx(Tooltip, { title: t(`hit.details.asessments.${assessment}.description`), children: _jsx("span", { children: assessment.split('-').map(capitalize).join(' ') }) }), onClick: () => updateAnalytic({
+                                                        return (_jsx(Grid, { children: _jsx(Chip, { variant: "outlined", icon: checked ? (_jsx(Check, { fontSize: "small", color: "success" })) : (_jsx(Remove, { fontSize: "small", color: "error" })), color: checked ? 'success' : 'error', label: _jsx(Tooltip, { title: t(`hit.details.asessments.${assessment}.description`), children: _jsx("span", { children: assessment.split('-').map(capitalize).join(' ') }) }), onClick: () => updateAnalytic({
                                                                     triage_settings: {
                                                                         valid_assessments: checked
                                                                             ? without(selectedAssessments, assessment)

package/components/routes/analytics/widgets/Assessment.js

@@ -22,7 +22,7 @@ const Assessment = forwardRef(({ analytic }, ref) => {
             fields: ['howler.assessment'],
             query: `howler.analytic:("${analytic.name}")`
         })
-            .then(data => setAssessmentData(data['howler.assessment']))
+            .then(data => setAssessmentData(data?.['howler.assessment'] ?? {}))
             .finally(() => setLoading(false));
     }, [analytic]);
     if (!loading && assessmentData.length < 1) {

package/components/routes/analytics/widgets/Created.js

@@ -10,24 +10,24 @@ const Created = forwardRef(({ analytic }, ref) => {
     const { line } = useMyChart();
     const [loading, setLoading] = useState(false);
     const [ingestionData, setIngestionData] = useState({});
-    const queryRef = useRef();
+    const queryRef = useRef(undefined);
     useEffect(() => {
         if (!analytic) {
             return;
         }
         setLoading(true);
-        if (!queryRef.current) {
-            queryRef.current = api.search.histogram.hit.post('timestamp', {
+        const query = queryRef.current ??
+            api.search.histogram.hit.post('timestamp', {
                 query: `howler.analytic:("${analytic.name}")`,
                 start: 'now-3M',
                 gap: '1d',
                 mincount: 0
             });
-        }
-        void queryRef.current
+        queryRef.current = query;
+        void query
             .then(result => {
-            setIngestionData(result);
-            queryRef.current = null;
+            setIngestionData(result ?? {});
+            queryRef.current = undefined;
         })
             .finally(() => setLoading(false));
     }, [analytic]);
@@ -39,9 +39,9 @@ const Created = forwardRef(({ analytic }, ref) => {
                         x: new Date(time).getTime(),
                         y: ingestionData[time]
                     })),
-                    borderColor: stringToColor(analytic?.name),
+                    borderColor: stringToColor(analytic.name),
                     backgroundColor: 'transparent',
-                    pointBackgroundColor: Object.keys(ingestionData).map(time => ingestionData[time] ? stringToColor(analytic?.name) : 'transparent'),
+                    pointBackgroundColor: Object.keys(ingestionData).map(time => ingestionData[time] ? stringToColor(analytic.name) : 'transparent'),
                     pointBorderWidth: Object.keys(ingestionData).map(time => (ingestionData[time] ? 2 : 0))
                 }
             ]

package/components/routes/analytics/widgets/Escalation.js

@@ -5,13 +5,13 @@ import 'chartjs-adapter-dayjs-4';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { getEscalationColor } from '@cccsaurora/howler-ui/utils/utils';
 const Escalation = forwardRef(({ analytic, maxWidth = '45%' }, ref) => {
     const theme = useTheme();
     const { doughnut } = useMyChart();
     const [loading, setLoading] = useState(false);
     const [escalationData, setEscalationData] = useState({});
-    const escalationColors = useMemo(() => Object.keys(escalationData).map(e => ESCALATION_COLORS[e] ? theme.palette[ESCALATION_COLORS[e]].main : 'rgba(255, 255, 255, 0.16)'), [escalationData, theme.palette]);
+    const escalationColors = useMemo(() => Object.keys(escalationData).map(escalation => getEscalationColor(escalation, 'rgba(255, 255, 255, 0.16)', theme)), [theme]);
     useEffect(() => {
         if (!analytic) {
             return;
@@ -22,7 +22,7 @@ const Escalation = forwardRef(({ analytic, maxWidth = '45%' }, ref) => {
             query: `howler.analytic:("${analytic.name}")`,
             fields: ['howler.escalation']
         })
-            .then(data => setEscalationData(data['howler.escalation']))
+            .then(data => setEscalationData(data?.['howler.escalation'] ?? {}))
             .finally(() => setLoading(false));
     }, [analytic]);
     return analytic && !loading ? (_jsx("div", { style: { maxWidth }, children: _jsx(Doughnut, { ref: ref, options: doughnut('route.analytics.escalation.title', ''), data: {

package/components/routes/analytics/widgets/Stacked.js

@@ -20,16 +20,16 @@ const Stacked = forwardRef(({ analytic, field, color }, ref) => {
                 query: `howler.analytic:("${analytic.name}")`,
                 fields: [field]
             });
-            const values = Object.entries(result[field])
+            const values = Object.entries(result?.[field] ?? {})
                 .sort(([__, valA], [___, valB]) => valB - valA)
                 .map(([key]) => key);
             setDatasets(await Promise.all(values.map(async (_value) => {
-                const ingestionData = await api.search.histogram.hit.post('timestamp', {
+                const ingestionData = (await api.search.histogram.hit.post('timestamp', {
                     query: `howler.analytic:("${analytic.name}") AND ${field}:("${_value}")`,
                     start: 'now-3M',
                     gap: '1d',
                     mincount: 0
-                });
+                })) ?? {};
                 return {
                     label: _value,
                     fill: true,
@@ -37,8 +37,8 @@ const Stacked = forwardRef(({ analytic, field, color }, ref) => {
                         x: new Date(time).getTime(),
                         y: sum(arr.map(key => ingestionData[key]).slice(0, index))
                     })),
-                    borderColor: color(_value),
-                    backgroundColor: color(_value),
+                    borderColor: color?.(_value),
+                    backgroundColor: color?.(_value),
                     pointBackgroundColor: 'transparent',
                     pointBorderWidth: 0
                 };

package/components/routes/analytics/widgets/Status.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@mui/material';
 import 'chartjs-adapter-dayjs-4';
 import { forwardRef } from 'react';
-import { STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { getStatusColor } from '@cccsaurora/howler-ui/utils/utils';
 import Stacked from './Stacked';
 const Status = forwardRef(({ analytic }, ref) => {
     const theme = useTheme();
-    return (_jsx(Stacked, { ref: ref, analytic: analytic, field: "howler.status", color: status => (status === 'on-hold' ? theme.palette.grey : theme.palette[STATUS_COLORS[status]].main) }));
+    return (_jsx(Stacked, { ref: ref, analytic: analytic, field: "howler.status", color: status => getStatusColor(status, theme.palette.grey[500], theme) }));
 });
 export default Status;

package/components/routes/cases/CaseViewer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@mui/material';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import { memo, useContext, useEffect } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
+import { Outlet, useParams } from 'react-router';
 import NotFoundPage from '../404';
 import ErrorBoundary from '../ErrorBoundary';
 import CaseDetails from './detail/CaseDetails';

package/components/routes/cases/CaseViewer.test.js

@@ -19,8 +19,8 @@ const mockDispatchApi = vi.hoisted(() => vi.fn());
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
-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,
         useParams: () => mockParams,

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

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