@cccsaurora/howler-ui 2.17.0-dev.520 → 2.17.0-dev.522

package/components/elements/ObjectDetails.js

@@ -5,7 +5,7 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
@@ -56,7 +56,7 @@ const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
                         return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
@@ -82,7 +82,7 @@ const Collapsible = memo(({ obj, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -117,7 +117,7 @@ const ObjectDetails = ({ obj }) => {
     const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        !isEmpty(value)), ([key]) => key.split('.')[0]), [obj]);
+        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
                 return (_jsx(Collapsible, { obj: obj, query: query, title: section
                         .split('_')

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/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,
@@ -44,6 +56,6 @@ const CaseDetails = ({ case: providedCase }) => {
                                         '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 }) }) })] })] }) })] })] })] }));
+                                    }[_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/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: [] };
@@ -61,17 +61,32 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
             });
         });
     }, [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 +138,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 +179,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.520",
+  "version": "2.17.0-dev.522",
   "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;