@cccsaurora/howler-ui 2.17.0-dev.521 → 2.17.0-dev.523

package/components/elements/display/Modal.js

@@ -15,6 +15,7 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
+                height: '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/hit/HitBanner.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, iconButtonClasses, useTheme } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
 import { ESCALATION_COLORS, PROVIDER_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
+import AnalyticLink from './elements/AnalyticLink';
 import Assigned from './elements/Assigned';
 import EscalationChip from './elements/EscalationChip';
 import HitTimestamp from './elements/HitTimestamp';
@@ -21,17 +20,8 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
-    const { getMatchingAnalytic } = useMatchers();
-    const [analyticId, setAnalyticId] = useState();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
-    useEffect(() => {
-        if (!hit?.howler.analytic) {
-            return;
-        }
-        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit?.howler.analytic]);
     const providerColor = useMemo(() => {
         if (!hit?.event.provider) {
             return PROVIDER_COLORS.unknown;
@@ -91,11 +81,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
-                                    e.stopPropagation();
-                                }, onClick: e => {
-                                    e.stopPropagation();
-                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsx(AnalyticLink, { hit: hit }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },

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

@@ -0,0 +1,8 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+declare const AnalyticLink: FC<{
+    hit: Hit;
+    compressed?: boolean;
+    alignSelf?: string;
+}>;
+export default AnalyticLink;

package/components/elements/hit/elements/AnalyticLink.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+const AnalyticLink = ({ hit, compressed, alignSelf = 'start' }) => {
+    const { getMatchingAnalytic } = useMatchers();
+    const [analyticId, setAnalyticId] = useState();
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+                    e.stopPropagation();
+                }, onClick: e => {
+                    e.stopPropagation();
+                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
+};
+export default AnalyticLink;

package/components/hooks/useHitActions.d.ts

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

package/components/hooks/useHitActions.js

@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false) => {
+    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
         const rationale = skipRationale
-            ? t('rationale.default', { assessment })
+            ? (providedRationale ?? t('rationale.default', { assessment }))
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);

package/components/hooks/useMySitemap.js

@@ -25,7 +25,8 @@ const useMySitemap = () => {
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
             { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
-            { path: '/cases/:id', title: t('route.cases.view') },
+            { path: '/cases/:id', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
+            { path: '/cases/:id/*', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {
                 path: '/admin/users/:id',

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

@@ -2,15 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, FormatListBulleted, HourglassBottom, Pause, People, WarningRounded } from '@mui/icons-material';
 import { Autocomplete, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import dayjs from 'dayjs';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useCase from '../hooks/useCase';
+import ResolveModal from '../modals/ResolveModal';
 import SourceAggregate from './aggregates/SourceAggregate';
 const CaseDetails = ({ case: providedCase }) => {
     const { t } = useTranslation();
     const { case: _case, updateCase } = useCase({ case: providedCase });
+    const { showModal } = useContext(ModalContext);
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);
     const wrappedUpdate = async (subset) => {
@@ -22,6 +25,15 @@ const CaseDetails = ({ case: providedCase }) => {
             setLoading(false);
         }
     };
+    const handleStatus = (status) => {
+        if (status === 'resolved') {
+            const onConfirm = () => wrappedUpdate({ status });
+            showModal(_jsx(ResolveModal, { case: _case, onConfirm: onConfirm }), { maxHeight: '80vh' });
+        }
+        else {
+            wrappedUpdate({ status });
+        }
+    };
     if (!_case) {
         return (_jsx(Card, { sx: {
                 borderRadius: 0,
@@ -42,8 +54,8 @@ const CaseDetails = ({ case: providedCase }) => {
             position: 'relative'
         }, children: [_jsx(LinearProgress, { sx: { opacity: +loading, position: 'absolute', top: 0, left: 0, right: 0 } }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [{
                                         'in-progress': _jsx(HourglassBottom, { color: "warning" }),
-                                        closed: _jsx(Check, { color: "success" }),
-                                        'on-hold': _jsx(Pause, { color: "disabled" })
-                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => wrappedUpdate({ status }) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
+                                        'on-hold': _jsx(Pause, { color: "disabled" }),
+                                        resolved: _jsx(Check, { color: "success" })
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => handleStatus(status) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
 };
 export default CaseDetails;

package/components/routes/cases/detail/Untitled-1.md.js

@@ -0,0 +1 @@
+export default "<h3>Actions</h3>\n\n<ul class=\"actions_list\">\n\n<li>\n\n</li>\n\n<li>\n\n</li>\n\n</ul>\n\n<h3>Data</h3>\n\n<table class=\"table_overview\">\n\n<tbody>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Tangent</td>\n\n<td style=\"padding:8px;\">Triangle</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Start date</td>\n\n<td style=\"padding:8px;\">1</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">End date</td>\n\n<td style=\"padding:8px;\">1</td>\n\n</tr>\n\n<tr>\n\n<td style=\"padding:8px;font-weight:bold;\">Country</td>\n\n<td style=\"padding:8px;\"><span style=\"text-transform: uppercase;\">Canada</span> / <span style=\"text-transform: capitalize;\">Canada / <span style=\"text-transform: capitalize;\">Canada</span></td>\n\n</tr>\n\n</tbody>\n\n</table>\n\n<h3>Visualization</h3>\n\n```mermaid\n\ngraph LR\n\nA[Password Spraying IP] -- Login Failure Account A --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account B --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account C --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account D --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account E --> D{ Entra ID }\n\nA[Password Spraying IP] -- Login Failure Account E --> D{ Entra ID }\n\nA[Password Spraying IP] == Login Attempt Account E ==> D{ Entra ID }\n\nD{ Entra ID } == \u00a0Entra ID Returns Code {{error.code}} ==> A\n\nclassDef orange fill:#f96,stroke:#333,stroke-width:2px\n\nclassDef blue fill:#32bedd,stroke:#333,stroke-width:2px\n\nclass D blue\n\nclass A orange\n\n```\n\n<style>\n\n/* Actions */\n\n.actions_list li {\n\ndisplay:inline!important;\n\nmargin-right: 45px!important;\n\nmargin-bottom: 15px!important;\n\n}\n\n.actions_list {\n\nlist-style: none!important;\n\nmargin: 0px!important;\n\npadding: 0px!important;\n\n}\n\n.actions_list img {\n\nheight:20px!important;\n\nmargin-bottom:-7px!important;\n\npadding-right:5px!important;\n\n}\n\n/* Tables */\n\n.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiTableContainer-root {\n\nbox-shadow:unset !important;\n\nwidth: fit-content !important;\n\n}\n\n/* General */\n\nh3 {\n\nborder-bottom: 2px solid #2d7dc9;\n\n/*border-bottom: 5px solid rgba(255, 255, 255, 0.12);*/\n\n/*color: #393939;*/\n\n}\n\n/* Visualization */\n\n.mermaid {\n\nbackground-color:#fff;\n\npadding:15px;\n\ntext-align: center;\n\n}\n\n/* Boites */\n\n.actor.actor-top {\n\nstroke: #393939 !important;\n\nfill: lightgrey !important;\n\n}\n\n/* T\u00eate du bonhomme */\n\n.actor-man circle {\n\nstroke: #393939 !important;\n\nfill: #28A745 !important;\n\n}\n\n/* Corps du bonhomme */\n\n.actor-man line {\n\nstroke: #393939 !important;\n\nfill: #393939 !important;\n\n}\n\n/* Lignes verticales */\n\n.actor-line {\n\nstroke: #393939 !important;\n\nfill: #393939 !important;\n\n}\n\n/* Description des fl\u00e8ches horizontales */\n\n.messageText {\n\nfill: #393939 !important;\n\nstroke: none;\n\n}\n\n/* T\u00eates de fl\u00e8ches */\n\nmarker#arrowhead path {\n\nfill: #DC3545 !important;\n\n}\n\n/* Texte en-dessous du bonhomme */\n\ntext.actor > tspan {\n\nfill: #393939 !important;\n\n}\n\n/* Fl\u00e8ches horizontales */\n\n.messageLine0, .messageLine1 {\n\nstroke-width: 1.5;\n\nstroke-dasharray: none;\n\nstroke: #393939 !important;\n\n}\n\n/* Texte dans boites */\n\n.actor-box {\n\nfont-weight: bold !important;\n\ncolor: #393939 !important;\n\n}\n\n/* Cacher le bonhomme du bas */\n\n.actor-bottom {\n\ndisplay:None;\n\n}\n\n</style>\n"

package/components/routes/cases/detail/sidebar/CaseFolder.js

@@ -6,7 +6,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { get, last, omit, set } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { ESCALATION_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 const buildTree = (items = []) => {
     // Root tree node stores direct children in `leaves` and nested folders as object keys.
     const tree = { leaves: [] };
@@ -44,34 +44,43 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
     const currentRootCaseId = rootCaseId || _case?.case_id;
     // Metadata for hit-type items
     useEffect(() => {
-        tree.leaves
-            ?.filter(leaf => leaf.type?.toLowerCase() === 'hit')
-            .forEach(leaf => {
-            dispatchApi(api.hit.get(leaf.id), { throwError: false }).then(hit => {
-                if (!hit)
-                    return;
-                setHitMetadata(prev => ({
-                    ...prev,
-                    [leaf.id]: {
-                        status: hit.howler?.status,
-                        escalation: hit.howler?.escalation,
-                        assessment: hit.howler?.assessment
-                    }
-                }));
-            });
+        const ids = tree.leaves?.filter(leaf => leaf.type?.toLowerCase() === 'hit').map(leaf => leaf.id);
+        if (!ids || ids.length < 1) {
+            return;
+        }
+        dispatchApi(api.search.hit.post({ query: `howler.id:(${ids.join(' OR ')})` }), { throwError: false }).then(result => {
+            if (result?.items?.length < 1) {
+                return;
+            }
+            setHitMetadata(Object.fromEntries(result.items.map(hit => [hit.howler.id, hit.howler])));
         });
     }, [tree.leaves, dispatchApi]);
+    const getIconColor = (itemType, itemKey, leafId) => {
+        if (itemType === 'hit' && leafId) {
+            const meta = hitMetadata[leafId];
+            if (meta?.escalation && ESCALATION_COLORS[meta.escalation]) {
+                return ESCALATION_COLORS[meta.escalation];
+            }
+        }
+        if (itemType === 'case' && itemKey) {
+            const caseData = nestedCases[itemKey];
+            if (caseData?.escalation && ESCALATION_COLORS[caseData.escalation]) {
+                return ESCALATION_COLORS[caseData.escalation];
+            }
+        }
+        return 'default';
+    };
     const getItemColor = (itemType, itemKey, leafId) => {
         if (itemType === 'hit' && leafId) {
             const meta = hitMetadata[leafId];
-            if (meta?.status && STATUS_COLORS[meta.status]) {
-                return `${STATUS_COLORS[meta.status]}.main`;
+            if (meta?.escalation && ESCALATION_COLORS[meta.escalation]) {
+                return `${ESCALATION_COLORS[meta.escalation]}.light`;
             }
         }
         if (itemType === 'case' && itemKey) {
             const caseData = nestedCases[itemKey];
             if (caseData?.escalation && ESCALATION_COLORS[caseData.escalation]) {
-                return `${ESCALATION_COLORS[caseData.escalation]}.main`;
+                return `${ESCALATION_COLORS[caseData.escalation]}.light`;
             }
         }
         return 'text.secondary';
@@ -123,22 +132,23 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                         const itemPath = fullRelativePath
                             ? `/cases/${currentRootCaseId}/${fullRelativePath}`
                             : `/cases/${currentRootCaseId}`;
-                        const getIconForType = (type) => {
-                            switch (type) {
+                        const getIconForType = () => {
+                            const iconColor = getIconColor(itemType, itemKey, leaf.id);
+                            switch (itemType) {
                                 case 'case':
-                                    return _jsx(BookRounded, { fontSize: "small" });
+                                    return _jsx(BookRounded, { fontSize: "small", color: iconColor });
                                 case 'observable':
-                                    return _jsx(Visibility, { fontSize: "small" });
+                                    return _jsx(Visibility, { fontSize: "small", color: iconColor });
                                 case 'hit':
-                                    return _jsx(CheckCircle, { fontSize: "small" });
+                                    return _jsx(CheckCircle, { fontSize: "small", color: iconColor });
                                 case 'table':
-                                    return _jsx(TableChart, { fontSize: "small" });
+                                    return _jsx(TableChart, { fontSize: "small", color: iconColor });
                                 case 'lead':
-                                    return _jsx(Lightbulb, { fontSize: "small" });
+                                    return _jsx(Lightbulb, { fontSize: "small", color: iconColor });
                                 case 'reference':
-                                    return _jsx(LinkIcon, { fontSize: "small" });
+                                    return _jsx(LinkIcon, { fontSize: "small", color: iconColor });
                                 default:
-                                    return _jsx(Article, { fontSize: "small" });
+                                    return _jsx(Article, { fontSize: "small", color: iconColor });
                             }
                         };
                         const leafColor = getItemColor(itemType, itemKey, leaf.id);
@@ -163,7 +173,7 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                                                     transition: theme.transitions.create('transform', { duration: 100 }),
                                                     transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
                                                 }
-                                            ] }), getIconForType(itemType), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: last(leaf.path?.split('/') || []) })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath }))] }, `${_case?.case_id}-${leaf.id}-${leaf.path}`));
+                                            ] }), getIconForType(), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: last(leaf.path?.split('/') || []) })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath }))] }, `${_case?.case_id}-${leaf.id}-${leaf.path}`));
                     })] }))] }));
 };
 export default CaseFolder;

package/components/routes/cases/modals/ResolveModal.d.ts

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const ResolveModal: FC<{
+    case: Case;
+    onConfirm: () => void;
+}>;
+export default ResolveModal;

package/components/routes/cases/modals/ResolveModal.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Autocomplete, Box, Button, Card, Chip, Divider, IconButton, LinearProgress, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import AnalyticLink from '@cccsaurora/howler-ui/components/elements/hit/elements/AnalyticLink';
+import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { uniq } from 'lodash-es';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+const ResolveModal = ({ case: _case, onConfirm }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const { config } = useContext(ApiConfigContext);
+    const { updateCase } = useCase({ case: _case });
+    const [loading, setLoading] = useState(true);
+    const [rationale, setRationale] = useState('');
+    const [assessment, setAssessment] = useState(null);
+    const [hits, setHits] = useState([]);
+    const hitIds = useMemo(() => uniq((_case?.items ?? []).filter(item => item.type === 'hit').map(item => item.id)), [_case?.items]);
+    const { assess } = useHitActions(hits);
+    useEffect(() => {
+        (async () => {
+            try {
+                const result = await dispatchApi(api.search.hit.post({ query: `howler.id:(${hitIds.join(' OR ')}) AND -howler.status:resolved` }));
+                setHits(result.items);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [dispatchApi, hitIds]);
+    const handleConfirm = async () => {
+        setLoading(true);
+        try {
+            await assess(assessment, true, rationale);
+            await updateCase({ status: 'resolved' });
+            onConfirm();
+            close();
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups['howler.assessment'], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), fullWidth: true })) }) })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), loading
+                        ? hitIds.map(id => _jsx(Skeleton, { variant: "rounded", height: "40px", width: "100%" }, id))
+                        : hits.map(hit => (_jsx(Card, { sx: { p: 1, flexShrink: 0 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(AnalyticLink, { hit: hit, compressed: true, alignSelf: "center" }), _jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE }), _jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: "small", color: "primary" }), _jsx("div", { style: { flex: 1 } }), _jsx(IconButton, { size: "small", component: Link, to: `/hits/${hit.howler.id}`, children: _jsx(OpenInNew, { fontSize: "small" }) })] }) }, hit.howler.id)))] }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: loading || !assessment || !rationale, onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ResolveModal;

package/locales/en/translation.json

@@ -292,6 +292,8 @@
     "modal.action.empty": "Action Name cannot be empty.",
     "modal.action.label": "Action Name",
     "modal.action.title": "Save Action",
+    "modal.cases.resolve": "Resolve Case",
+    "modal.cases.resolve.description": "When resolving a case, you must either assess all open alerts, or add an assessment to the alerts.",
     "modal.confirm.delete.description": "Are you sure you want to delete this item?",
     "modal.confirm.delete.title": "Confirm Deletion",
     "modal.rationale.description": "Provide a rationale that succinctly explains to other analysts why you are confident in this assessment.",

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.521",
+  "version": "2.17.0-dev.523",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -188,6 +188,7 @@
     "./components/routes/help/markdown/fr/*.md": "./components/routes/help/markdown/fr/*.md.js",
     "./components/routes/help/markdown/en/*.md": "./components/routes/help/markdown/en/*.md.js",
     "./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
+    "./components/routes/cases/modals/*": "./components/routes/cases/modals/*.js",
     "./components/routes/cases/hooks/*": "./components/routes/cases/hooks/*.js",
     "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
     "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",

package/utils/constants.d.ts

@@ -5,9 +5,9 @@ export declare const VERSION: any;
 export declare const MY_LOCAL_STORAGE_PREFIX = "howler.ui";
 export declare const MY_SESSION_STORAGE_PREFIX = "howler.ui.cache";
 export declare const ESCALATION_COLORS: {
-    alert: string;
-    evidence: string;
-    hit: string;
+    alert: "warning";
+    evidence: "error";
+    hit: "primary";
 };
 export declare const STATUS_COLORS: {
     open: string;