@cccsaurora/howler-ui 2.17.0-dev.502 → 2.17.0-dev.508

package/components/routes/action/view/Integrations.js

@@ -1,33 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Tab, Tabs } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
-import { isEmpty } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { useSearchParams } from 'react-router-dom';
-import { default as INTEGRATIONS_EN, default as INTEGRATIONS_FR } from './markdown/integrations.en.md';
 const Integrations = () => {
     const { t } = useTranslation();
-    const { i18n } = useTranslation();
     const [searchParams, setSearchParams] = useSearchParams();
     const pluginStore = usePluginStore();
     const pluginIntegrations = useMemo(() => Object.fromEntries(howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.integrations`))), [pluginStore]);
     const [tab, setTab] = useState(Object.keys(pluginIntegrations)[0] ?? '');
-    const md = useMemo(() => (i18n.language === 'en' ? INTEGRATIONS_EN : INTEGRATIONS_FR), [i18n.language]);
     useEffect(() => {
         searchParams.set('tab', tab);
         setSearchParams(searchParams);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tab]);
     const tabData = useMemo(() => {
-        if (!tab) {
-            return null;
-        }
         return pluginIntegrations[tab]();
     }, [pluginIntegrations, tab]);
-    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [!isEmpty(pluginIntegrations) && (_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: Object.keys(pluginIntegrations).map(integration => (_jsx(Tab, { label: t(`route.integrations.${integration}`), value: integration }, integration))) })), tabData ?? _jsx(Markdown, { md: md })] }) }));
+    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: Object.keys(pluginIntegrations).map(integration => (_jsx(Tab, { label: t(`route.integrations.${integration}`), value: integration }, integration))) }), tabData] }) }));
 };
 export default Integrations;

package/components/routes/advanced/QueryBuilder.js

@@ -233,7 +233,7 @@ const QueryBuilder = () => {
                                             height: '100%',
                                             '& .MuiFormControl-root': { height: '100%', '& > div': { height: '100%' } }
                                         }
-                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
+                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
                             (smallButtons ? (_jsx(Tooltip, { title: t('route.advanced.open'), children: _jsx(IconButton, { color: "primary", sx: { alignSelf: 'center' }, component: Link, disabled: !response, to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`, children: _jsx(OpenInNew, { fontSize: "small" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: _jsx(OpenInNew, {}), component: Link, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, children: t('route.advanced.open') }))), smallButtons ? (_jsx(Tooltip, { title: response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'center' }, color: "info", onClick: onCreateRule, disabled: !response, children: _jsx(SsidChart, {}) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", color: "info", startIcon: _jsx(SsidChart, {}), onClick: onCreateRule, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, tooltip: !response && t('route.advanced.create.rule.disabled'), children: t('route.advanced.create.rule') }))] }), _jsxs(Box, { width: "100%", height: "calc(100vh - 112px)", sx: { position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }, children: [_jsx(Box, { sx: {
                                 position: 'absolute',
                                 top: 0,

package/components/routes/analytics/AnalyticSearch.js

@@ -128,7 +128,7 @@ const AnalyticSearchBase = () => {
                                             padding: theme.spacing(0.5),
                                             borderRadius: theme.shape.borderRadius,
                                             border: `thin solid ${theme.palette.divider}`
-                                        }, children: item.item.rule_type })] })), _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, { size: "small", 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, { size: "small", variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
+                                        }, children: item.item.rule_type })] })), _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));
     }, [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: t(`route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`), children: _jsx(IconButton, { onClick: () => setOnlyRules((((onlyRules + 2) % 3) - 1)), children: _jsx(SsidChart, { color: onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit', sx: { transition: theme.transitions.create(['color']) } }) }) }) }), 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" }));
 };

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

@@ -0,0 +1,8 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseCard: FC<{
+    case?: Case;
+    caseId?: string;
+    className?: string;
+}>;
+export default CaseCard;

package/components/routes/cases/CaseCard.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckCircleOutline, HourglassBottom, RadioButtonUnchecked, UpdateOutlined } from '@mui/icons-material';
+import { Card, Chip, Divider, Grid, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import PluginChip from '@cccsaurora/howler-ui/components/elements/PluginChip';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { countBy } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+const CaseCard = ({ case: providedCase, caseId, className }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
+        }
+    }, [caseId, dispatchApi]);
+    if (!_case) {
+        return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
+    }
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", flex: 1, children: _case.title }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 1, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
+                                        .filter(task => !task.complete)
+                                        .map(task => (_jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: task.summary }, task.id)))] })] }))] }) }) }, _case.case_id));
+};
+export default CaseCard;

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

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/cases/CaseViewer.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton, Stack } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { memo, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import NotFoundPage from '../404';
+import CaseDashboard from './detail/CaseDashboard';
+import CaseSidebar from './detail/CaseSidebar';
+import ItemPage from './detail/ItemPage';
+const CaseViewer = () => {
+    const params = useParams();
+    const { dispatchApi } = useMyApi();
+    const [_case, setCase] = useState();
+    const [loading, setLoading] = useState(false);
+    const [notFound, setNotFound] = useState(false);
+    useEffect(() => {
+        if (!params.id) {
+            return;
+        }
+        setLoading(true);
+        dispatchApi(api.v2.case.get(params.id))
+            .then(_dossier => {
+            setCase(_dossier);
+        })
+            .catch(() => setNotFound(true))
+            .finally(() => setLoading(false));
+    }, [dispatchApi, params.id]);
+    if (notFound) {
+        return _jsx(NotFoundPage, {});
+    }
+    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsxs(Box, { sx: {
+                    maxHeight: 'calc(100vh - 64px)',
+                    flex: 1,
+                    overflow: 'auto'
+                }, children: [loading && _jsx(Skeleton, { variant: "rounded", height: 240 }), !_case || location.pathname.endsWith(_case.case_id) ? (_jsx(CaseDashboard, { case: _case })) : (_jsx(ItemPage, { case: _case }))] })] }));
+};
+export default memo(CaseViewer);

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

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

package/components/routes/cases/Cases.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Topic } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+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 { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import CaseCard from './CaseCard';
+const CasesBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const query = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the overview should be visible and/or matches the type we are filtering for
+            setResponse(await dispatchApi(api.search.case.post({
+                query,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.case_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    const renderer = useCallback((item, className) => _jsx(CaseCard, { case: item, className: className }), []);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.cases.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/cases/${item.id}`), onCreate: () => navigate('/cases/create'), createPrompt: "route.cases.create", searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
+};
+const Cases = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(CasesBase, {}) }));
+};
+export default Cases;

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

@@ -0,0 +1,5 @@
+export declare const ESCALATION_COLOR_MAP: {
+    normal: string;
+    focus: string;
+    crisis: string;
+};

package/components/routes/cases/constants.js

@@ -0,0 +1,5 @@
+export const ESCALATION_COLOR_MAP = {
+    normal: 'default',
+    focus: 'warning',
+    crisis: 'error'
+};

package/components/routes/cases/detail/AlertPanel.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const AlertPanel: FC<{
+    case: Case;
+}>;
+export default AlertPanel;

package/components/routes/cases/detail/AlertPanel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Stack, Typography, useTheme } from '@mui/material';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const AlertPanel = ({ case: _case }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const [alertPage, setAlertPage] = useState(1);
+    const alertPages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'hit')), 5), [_case?.items]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.alerts') }), _jsx(Pagination, { count: alertPages.length, page: alertPage, onChange: (_, page) => setAlertPage(page) })] }), _jsx(Divider, {}), alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.id }), _jsx(Box, { component: Link, to: item.path, sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer',
+                            zIndex: 100,
+                            borderRadius: '4px',
+                            '&:hover': {
+                                background: theme.palette.divider,
+                                border: `thin solid ${theme.palette.primary.light}`
+                            }
+                        } })] }, item.id)))] }));
+};
+export default AlertPanel;

package/components/routes/cases/detail/CaseAggregate.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+declare const CaseAggregate: FC<{
+    icon?: string;
+    iconColor?: string;
+    field?: string;
+    ids?: string[];
+    title?: string;
+    subtitle?: string;
+}>;
+export default CaseAggregate;

package/components/routes/cases/detail/CaseAggregate.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Card, CardContent, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { get, isEmpty, uniq } from 'lodash-es';
+import { useEffect, useState } from 'react';
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 'none'
+    }
+});
+const CaseAggregate = ({ icon, iconColor, field, ids, title, subtitle }) => {
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const [values, setValues] = useState([]);
+    useEffect(() => {
+        if (ids?.length < 1 || !field) {
+            return;
+        }
+        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+            query: `howler.id:(${ids?.join(' OR ') || '*'})`,
+            fl: field
+        })).then(response => {
+            setValues(uniq(response.items.map(entry => get(entry, field)).flat()));
+        });
+    }, [dispatchApi, field, ids]);
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: values.map(value => (_jsx("span", { children: value }, value))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
+};
+export default CaseAggregate;

package/components/routes/cases/detail/CaseDashboard.d.ts

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseDashboard: FC<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default CaseDashboard;

package/components/routes/cases/detail/CaseDashboard.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, Divider, Grid, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AlertPanel from './AlertPanel';
+import CaseAggregate from './CaseAggregate';
+import RelatedCasePanel from './RelatedCasePanel';
+import TaskPanel from './TaskPanel';
+const getDuration = (case_) => {
+    if (case_?.start) {
+        return dayjs.duration(dayjs(case_?.end ?? new Date()).diff(dayjs(case_.start), 'minute'), 'minute');
+    }
+};
+const CaseDashboard = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
+        }
+    }, [caseId, dispatchApi]);
+    const updateCase = useCallback(async (_updatedCase) => {
+        if (!_case?.case_id) {
+            return;
+        }
+        try {
+            setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+        }
+        finally {
+            return;
+        }
+    }, [_case?.case_id, dispatchApi]);
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 3, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsx(Divider, {}), _jsx(CardContent, { children: _jsx(Markdown, { md: _case.overview }) })] }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "material-symbols:warning-rounded", iconColor: theme.palette.warning.main, field: "howler.outline.threat", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.threat') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "material-symbols:group", iconColor: theme.palette.primary.main, field: "howler.outline.target", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.target') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "fluent:number-symbol-24-filled", field: "howler.outline.indicators", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.indicators') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case).format('HH[h] mm[m]'), ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
+};
+export default CaseDashboard;

package/components/routes/cases/detail/CaseSidebar.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseSidebar: FC<{
+    case: Case;
+}>;
+export default CaseSidebar;

package/components/routes/cases/detail/CaseSidebar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Dashboard } from '@mui/icons-material';
+import { Box, Card, Chip, Divider, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import dayjs from 'dayjs';
+import {} from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ESCALATION_COLOR_MAP } from '../constants';
+import CaseFolder from './sidebar/CaseFolder';
+const CaseSidebar = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (_jsxs(Box, { sx: {
+            width: '350px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column'
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: {
+                    cursor: 'pointer',
+                    px: 1,
+                    py: 1,
+                    transition: theme.transitions.create('background', { duration: 100 }),
+                    color: `${theme.palette.text.primary} !important`,
+                    textDecoration: 'none',
+                    background: 'transparent',
+                    borderRight: `thin solid ${theme.palette.divider}`,
+                    '&:hover': {
+                        background: theme.palette.grey[800]
+                    }
+                }, component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+                    position: 'relative',
+                    borderRight: `thin solid ${theme.palette.divider}`
+                }, children: _jsx(Box, { position: "absolute", sx: { left: 0 }, children: _jsx(CaseFolder, { case: _case }) }) }))] }));
+};
+export default CaseSidebar;

package/components/routes/cases/detail/CaseTask.d.ts

@@ -0,0 +1,9 @@
+import type { Task } from '@cccsaurora/howler-ui/models/entities/generated/Task';
+import { type FC } from 'react';
+declare const CaseTask: FC<{
+    task: Task;
+    paths: string[];
+    onDelete: () => void;
+    onEdit: (task: Partial<Task>) => Promise<void>;
+}>;
+export default CaseTask;

package/components/routes/cases/detail/CaseTask.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Close, Delete, Edit } from '@mui/icons-material';
+import { Autocomplete, Card, Checkbox, Chip, IconButton, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const CaseTask = ({ task, onEdit, onDelete, paths }) => {
+    const { t } = useTranslation();
+    const [editing, setEditing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [summary, setSummary] = useState(task.summary);
+    const [path, setPath] = useState(task.path);
+    const dirty = summary !== task.summary || path !== task.path;
+    const onOwnerChange = async (assignment) => {
+        setLoading(true);
+        await onEdit({
+            assignment
+        });
+        setLoading(false);
+    };
+    const onSubmit = async () => {
+        if (dirty) {
+            setLoading(true);
+            await onEdit({ summary, path: !path ? null : path });
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { color: "success", checked: task.complete, size: "small", onChange: (_ev, complete) => onEdit({ complete }) }), editing ? (_jsx(TextField, { value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [task.complete && { textDecoration: 'line-through' }], children: task.summary })), task.path && !editing && _jsx(Chip, { clickable: true, component: Link, to: task.path, label: task.path }), editing && (_jsx(Autocomplete, { value: path, options: paths, onChange: (_ev, value) => setPath(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), task.assignment && (_jsx(UserList, { userId: task.assignment, onChange: onOwnerChange, i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 })), _jsx("div", { style: { flex: 1 } }), editing && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }) })), _jsx(Tooltip, { title: t(editing ? 'route.cases.task.edit.save' : 'route.cases.task.edit'), children: _jsx(IconButton, { size: "small", color: editing ? 'success' : 'default', onClick: () => {
+                                if (!editing) {
+                                    setEditing(true);
+                                    return;
+                                }
+                                setEditing(false);
+                                onSubmit();
+                            }, disabled: !dirty && editing, children: editing ? _jsx(Check, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) }), editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => setEditing(false), children: _jsx(Close, { fontSize: "small" }) }) }))] }), loading && _jsx(LinearProgress, { sx: { left: 0, bottom: 0, right: 0, position: 'absolute' } })] }, task.id));
+};
+export default CaseTask;

package/components/routes/cases/detail/ItemPage.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const ItemPage: FC<{
+    case: Case;
+}>;
+export default ItemPage;

package/components/routes/cases/detail/ItemPage.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
+import InformationPane from '@cccsaurora/howler-ui/components/routes/hits/search/InformationPane';
+import ObservableViewer from '@cccsaurora/howler-ui/components/routes/observables/ObservableViewer';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router';
+import CaseDashboard from './CaseDashboard';
+const ItemPage = ({ case: _case }) => {
+    const location = useLocation();
+    const { dispatchApi } = useMyApi();
+    const [item, setItem] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const subPath = decodeURIComponent(location.pathname).replace(`/cases/${_case.case_id}/`, '');
+    const normalizedSubPath = useMemo(() => subPath.replace(/^\/+|\/+$/g, ''), [subPath]);
+    useEffect(() => {
+        let cancelled = false;
+        const resolveItem = async () => {
+            setLoading(true);
+            if (!normalizedSubPath) {
+                if (!cancelled) {
+                    setItem(null);
+                    setLoading(false);
+                }
+                return;
+            }
+            let currentCase = _case;
+            let remainingPath = normalizedSubPath;
+            while (currentCase && remainingPath) {
+                const currentRemainingPath = remainingPath;
+                const matchedNestedCase = currentCase.items
+                    .filter(_item => _item?.path &&
+                    _item?.type?.toLowerCase() === 'case' &&
+                    (currentRemainingPath === _item.path || currentRemainingPath.startsWith(`${_item.path}/`)))
+                    .sort((a, b) => (b.path?.length || 0) - (a.path?.length || 0))[0];
+                if (!matchedNestedCase) {
+                    break;
+                }
+                if (currentRemainingPath === matchedNestedCase.path) {
+                    if (!cancelled) {
+                        setItem(matchedNestedCase);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                if (!matchedNestedCase.id) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.id), { throwError: false });
+                if (!nextCase) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                remainingPath = currentRemainingPath.slice((matchedNestedCase.path?.length || 0) + 1);
+                currentCase = nextCase;
+            }
+            const resolvedItem = currentCase?.items?.find(_item => _item.path === remainingPath);
+            if (!cancelled) {
+                setItem(resolvedItem || null);
+                setLoading(false);
+            }
+        };
+        resolveItem();
+        return () => {
+            cancelled = true;
+        };
+    }, [_case, dispatchApi, normalizedSubPath]);
+    if (loading) {
+        return null;
+    }
+    if (!item) {
+        return _jsx(NotFoundPage, {});
+    }
+    if (item.type === 'hit') {
+        return _jsx(InformationPane, { selected: item.id });
+    }
+    if (item.type === 'observable') {
+        return _jsx(ObservableViewer, { observableId: item.id });
+    }
+    if (item.type === 'case') {
+        return _jsx(CaseDashboard, { caseId: item.id });
+    }
+    return _jsx("h1", { children: JSON.stringify(item) });
+};
+export default ItemPage;