@cccsaurora/howler-ui 2.18.0-dev.683 → 2.18.0-dev.688

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

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

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add } from '@mui/icons-material';
+import { Divider, Skeleton, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CaseTask from './CaseTask';
+const TaskPanel = ({ case: _case, updateCase }) => {
+    const { t } = useTranslation();
+    const [addingTask, setAddingTask] = useState(false);
+    const onEdit = (task) => async (newTask) => {
+        if (task) {
+            await updateCase({
+                tasks: _case.tasks.map(_task => {
+                    if (_task.id !== task.id) {
+                        return _task;
+                    }
+                    return {
+                        ..._task,
+                        ...newTask
+                    };
+                })
+            });
+        }
+        else {
+            await updateCase({
+                tasks: [..._case.tasks, newTask]
+            });
+        }
+    };
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.tasks') }), _jsx(Divider, {}), _case.tasks.map(task => (_jsx(CaseTask, { task: task, paths: _case.items.map(item => item.path), onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, paths: _case.items.map(item => item.path), onEdit: async (task) => {
+                    await onEdit()(task);
+                    setAddingTask(false);
+                }, onDelete: async () => setAddingTask(false) })), _jsxs(Stack, { onClick: () => setAddingTask(true), direction: "row", spacing: 2, sx: theme => ({
+                    borderStyle: 'dashed',
+                    borderColor: theme.palette.text.secondary,
+                    borderWidth: '0.15rem',
+                    borderRadius: '0.15rem',
+                    opacity: 0.3,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 1,
+                    transition: theme.transitions.create('opacity'),
+                    '&:hover': {
+                        opacity: 1,
+                        cursor: 'pointer'
+                    }
+                }), children: [_jsx(Add, {}), _jsx(Typography, { children: t('page.cases.dashboard.tasks.add') })] })] }));
+};
+export default TaskPanel;

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

@@ -0,0 +1,12 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const CaseAggregate: FC<{
+    icon?: string;
+    iconColor?: string;
+    field?: string;
+    records?: Partial<Hit | Observable>[];
+    title?: string;
+    subtitle?: string;
+}>;
+export default CaseAggregate;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Card, CardContent, Skeleton, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
+import { get, isEmpty, uniq } from 'lodash-es';
+import {} from 'react';
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 'none'
+    }
+});
+const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) => {
+    const theme = useTheme();
+    if (!title && (!records || !field)) {
+        return _jsx(Skeleton, { height: 120 });
+    }
+    const values = uniq(records?.map(_record => get(_record, field)).flat());
+    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/aggregates/SourceAggregate.d.ts

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

package/components/routes/cases/detail/aggregates/SourceAggregate.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Grid, Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { uniq } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import useCase from '../../hooks/useCase';
+const SourceAggregate = ({ case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const { case: _case } = useCase({ case: providedCase });
+    const [analytics, setAnalytics] = useState([]);
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
+    useEffect(() => {
+        dispatchApi(api.v2.search.post('hit', { query: `howler.id:(${hitIds.join(' OR ')})`, fl: 'howler.analytic' }))
+            .then(response => response?.items.map(hit => hit.howler.analytic) ?? [])
+            .then(_analytics => setAnalytics(uniq(_analytics)));
+        api.v2.search.facet.post(['hit', 'observable'], {
+            query: `howler.id:(${hitIds.join(' OR ')})`,
+            fields: ['howler.analytic']
+        });
+    }, [dispatchApi, hitIds]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 12, variant: "rounded" });
+    }
+    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
+};
+export default SourceAggregate;

package/components/routes/cases/detail/assets/Asset.d.ts

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { FC } from 'react';
+export type AssetType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
+export interface AssetEntry {
+    type: AssetType;
+    value: string;
+    /** IDs of the hits/observables this asset was seen in */
+    seenIn: string[];
+}
+declare const Asset: FC<{
+    asset: AssetEntry;
+    case: Case;
+}>;
+export default Asset;

package/components/routes/cases/detail/assets/Asset.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, Chip, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const Asset = ({ asset, case: _case }) => {
+    const { t } = useTranslation();
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.assets.type.${asset.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: asset.value })] }), asset.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.assets.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: asset.seenIn.map(id => {
+                                    const entry = _case.items.find(item => item.value === id);
+                                    return (_jsx(Chip, { clickable: true, size: "small", label: entry.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${entry.path}` }, id));
+                                }) })] }))] }) }) }));
+};
+export default Asset;

package/components/routes/cases/detail/assets/Asset.test.d.ts

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

package/components/routes/cases/detail/assets/Asset.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it } from 'vitest';
+import Asset, {} from './Asset';
+const makeAsset = (overrides = {}) => ({
+    type: 'ip',
+    value: '192.168.1.1',
+    seenIn: [],
+    ...overrides
+});
+describe('Asset', () => {
+    describe('type chip', () => {
+        it('renders the correct label for each type', () => {
+            const cases = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+            for (const type of cases) {
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type, value: 'x' }), case: createMockCase() }) }));
+                expect(screen.getByText(`page.cases.assets.type.${type}`)).toBeTruthy();
+                unmount();
+            }
+        });
+    });
+    describe('value display', () => {
+        it('renders the asset value', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            expect(screen.getByText('10.0.0.1')).toBeTruthy();
+        });
+        it('renders long hash values without truncation', () => {
+            const hash = 'a'.repeat(64);
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            expect(screen.getByText(hash)).toBeTruthy();
+        });
+    });
+    describe('seen-in chips', () => {
+        it('renders nothing when seenIn is empty', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: [] }), case: createMockCase() }) }));
+            expect(screen.queryByText('page.cases.assets.seen_in')).toBeNull();
+        });
+        it('renders "Seen in" label when seenIn has entries', () => {
+            const _case = createMockCase({
+                items: [{ path: 'alerts/test-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
+            expect(screen.getByText('page.cases.assets.seen_in')).toBeTruthy();
+        });
+        it('renders a chip labelled with entry.path for each seenIn id', () => {
+            const _case = createMockCase({
+                items: [
+                    { path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
+                    { path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
+                    { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
+                ]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
+            expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
+            expect(screen.getByText('observables/obs-002')).toBeTruthy();
+            expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
+        });
+        it('links each chip to /cases/:case_id/:path', () => {
+            const _case = createMockCase({
+                case_id: 'case-abc',
+                items: [{ path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
+            const link = screen.getByText('alerts/my-analytic (hit-001)').closest('a');
+            expect(link).not.toBeNull();
+            expect(link?.getAttribute('href')).toBe('/cases/case-abc/alerts/my-analytic (hit-001)');
+        });
+    });
+});

package/components/routes/cases/detail/sidebar/CaseFolder.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+import type { Tree } from './types';
+interface CaseFolderProps {
+    case: Case;
+    folder?: Tree;
+    name?: string;
+    step?: number;
+    rootCaseId?: string;
+    pathPrefix?: string;
+}
+declare const CaseFolder: FC<CaseFolderProps>;
+export default CaseFolder;

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Article, BookRounded, CheckCircle, ChevronRight, Folder as FolderIcon, Lightbulb, Link as LinkIcon, TableChart, Visibility } from '@mui/icons-material';
+import { alpha, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { omit } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { buildTree } from './utils';
+// Static map: item type → MUI icon component (avoids re-creating closures on each render)
+const ICON_FOR_TYPE = {
+    case: BookRounded,
+    observable: Visibility,
+    hit: CheckCircle,
+    table: TableChart,
+    lead: Lightbulb,
+    reference: LinkIcon
+};
+const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '' }) => {
+    const theme = useTheme();
+    const location = useLocation();
+    const { dispatchApi } = useMyApi();
+    const [open, setOpen] = useState(true);
+    const [caseStates, setCaseStates] = useState({});
+    const [hitMetadata, setHitMetadata] = useState({});
+    const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
+    const currentRootCaseId = rootCaseId || _case?.case_id;
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
+    useEffect(() => {
+        if (hitIds.length < 1) {
+            return;
+        }
+        dispatchApi(api.search.hit.post({ query: `howler.id:(${hitIds.join(' OR ')})` }), { throwError: false }).then(result => {
+            if ((result?.items?.length ?? 0) < 1)
+                return;
+            setHitMetadata(Object.fromEntries(result.items.map(hit => [hit.howler.id, hit.howler])));
+        });
+    }, [hitIds, dispatchApi]);
+    // Returns the MUI colour token for the item's escalation, or undefined if none.
+    const getEscalationColor = (itemType, itemKey, leafId) => {
+        if (itemType === 'hit' && leafId) {
+            const color = ESCALATION_COLORS[hitMetadata[leafId]?.escalation];
+            if (color)
+                return color;
+        }
+        if (itemType === 'case' && itemKey) {
+            const color = ESCALATION_COLORS[caseStates[itemKey]?.data?.escalation];
+            if (color)
+                return color;
+        }
+        return undefined;
+    };
+    const toggleCase = useCallback((item, itemKey) => {
+        const resolvedKey = itemKey || item.path || item.value;
+        if (!resolvedKey) {
+            return;
+        }
+        const prev = caseStates[resolvedKey] ?? { open: false, loading: false, data: null };
+        const shouldOpen = !prev.open;
+        const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
+        setCaseStates(current => ({ ...current, [resolvedKey]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
+        if (!shouldFetch)
+            return;
+        dispatchApi(api.v2.case.get(item.value), { throwError: false })
+            .then(caseResponse => {
+            if (!caseResponse)
+                return;
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], data: caseResponse } }));
+        })
+            .finally(() => {
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], loading: false } }));
+        });
+    }, [caseStates, dispatchApi]);
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsxs(Stack, { direction: "row", pl: step * 1.5, py: 0.25, sx: {
+                    cursor: 'pointer',
+                    transition: theme.transitions.create('background', { duration: 50 }),
+                    background: 'transparent',
+                    '&:hover': {
+                        background: theme.palette.grey[800]
+                    }
+                }, onClick: () => setOpen(_open => !_open), children: [_jsx(ChevronRight, { fontSize: "small", color: "disabled", sx: [
+                            { transition: theme.transitions.create('transform', { duration: 100 }), transform: 'rotate(0deg)' },
+                            open && { transform: 'rotate(90deg)' }
+                        ] }), _jsx(FolderIcon, { fontSize: "small", color: "disabled" }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: name })] })), open && (_jsxs(_Fragment, { children: [Object.entries(omit(tree, 'leaves')).map(([path, subfolder]) => (_jsx(CaseFolder, { name: path, case: _case, folder: subfolder, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: pathPrefix }, `${_case?.case_id}-${path}`))), tree.leaves?.map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const isCase = itemType === 'case';
+                        const fullRelativePath = [pathPrefix, leaf.path].filter(Boolean).join('/');
+                        const itemKey = fullRelativePath || leaf.value;
+                        const nodeState = itemKey ? caseStates[itemKey] : null;
+                        const isCaseOpen = !!nodeState?.open;
+                        const isCaseLoading = !!nodeState?.loading;
+                        const nestedCase = nodeState?.data ?? null;
+                        const itemPath = itemType !== 'reference'
+                            ? fullRelativePath
+                                ? `/cases/${currentRootCaseId}/${fullRelativePath}`
+                                : `/cases/${currentRootCaseId}`
+                            : leaf.value;
+                        const escalationColor = getEscalationColor(itemType, itemKey, leaf.value);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        const Icon = ICON_FOR_TYPE[itemType ?? ''] ?? Article;
+                        return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", pl: step * 1.5 + 1, py: 0.25, sx: [
+                                        {
+                                            cursor: 'pointer',
+                                            overflow: 'visible',
+                                            color: `${theme.palette.text.secondary} !important`,
+                                            textDecoration: 'none',
+                                            transition: theme.transitions.create('background', { duration: 100 }),
+                                            background: 'transparent',
+                                            '&:hover': {
+                                                background: theme.palette.grey[800]
+                                            },
+                                            borderRight: '3px solid transparent'
+                                        },
+                                        decodeURIComponent(location.pathname) === itemPath && {
+                                            background: alpha(theme.palette.grey[600], 0.15),
+                                            borderRightColor: theme.palette.primary.main
+                                        }
+                                    ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, target: itemType === 'reference' ? '_blank' : undefined, rel: itemType === 'reference' ? 'noopener noreferrer' : undefined, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
+                                                !isCase && { opacity: 0 },
+                                                isCase && {
+                                                    transition: theme.transitions.create('transform', { duration: 100 }),
+                                                    transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                }
+                                            ] }), _jsx(Icon, { fontSize: "small", color: iconColor }), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: leaf.path?.split('/').pop() || leaf.value })] }), 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.value}-${leaf.path}`));
+                    })] }))] }));
+};
+export default CaseFolder;

package/components/routes/cases/detail/sidebar/types.d.ts

@@ -0,0 +1,3 @@
+import type { Item } from 'models/entities/generated/Item';
+
+export type Tree = { leaves?: Item[]; [folder: string]: Tree | Item[] };

package/components/routes/cases/detail/sidebar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import type { Tree } from './types';
+export declare const buildTree: (items?: Item[]) => Tree;

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

@@ -0,0 +1,25 @@
+import { get, set } from 'lodash-es';
+export const buildTree = (items = []) => {
+    // Root tree node stores direct children in `leaves` and nested folders as object keys.
+    const tree = { leaves: [] };
+    items.forEach(item => {
+        // Ignore items that cannot be placed in the folder structure.
+        if (!item?.path) {
+            return;
+        }
+        // Split path into folder segments + item name, then remove the item name.
+        const parts = item.path.split('/');
+        parts.pop();
+        if (parts.length > 0) {
+            // Use dot notation so lodash `get/set` can address nested folder objects.
+            const key = parts.join('.');
+            const size = get(tree, key)?.leaves?.length || 0;
+            // Append this item to the folder's `leaves` array.
+            set(tree, `${key}.leaves.${size}`, item);
+            return;
+        }
+        // Items without parent folders are top-level leaves.
+        tree.leaves.push(item);
+    });
+    return tree;
+};

package/components/routes/cases/hooks/useCase.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+interface CaseArguments {
+    case?: Case;
+    caseId?: string;
+}
+interface CaseResult {
+    case: Case;
+    updateCase: (update: Partial<Case>) => Promise<void>;
+    loading: boolean;
+    missing: boolean;
+}
+declare const useCase: (args: CaseArguments) => CaseResult;
+export default useCase;

package/components/routes/cases/hooks/useCase.js

@@ -0,0 +1,38 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useEffect, useState } from 'react';
+const useCase = ({ caseId, case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const [loading, setLoading] = useState(false);
+    const [missing, setMissing] = useState(false);
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            setLoading(true);
+            dispatchApi(api.v2.case.get(caseId), { throwError: false })
+                .then(setCase)
+                .finally(() => setLoading(false));
+        }
+    }, [caseId, dispatchApi]);
+    const updateCase = useCallback(async (_updatedCase) => {
+        if (!_case?.case_id) {
+            return;
+        }
+        try {
+            setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+        }
+        catch (e) {
+            setMissing(true);
+        }
+        finally {
+            return;
+        }
+    }, [_case?.case_id, dispatchApi]);
+    return { case: _case, updateCase, loading, missing };
+};
+export default useCase;

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

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const AddToCaseModal: FC<{
+    records: (Hit | Observable)[];
+}>;
+export default AddToCaseModal;

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

@@ -0,0 +1,62 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const AddToCaseModal = ({ records }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [cases, setCases] = useState([]);
+    const [selectedCase, setSelectedCase] = useState(null);
+    const [path, setPath] = useState('');
+    const [title, setTitle] = useState('');
+    useEffect(() => {
+        dispatchApi(api.search.case.post({ query: 'case_id:*', rows: 100 }), { throwError: false }).then(result => {
+            if (result) {
+                setCases(result.items);
+            }
+        });
+    }, [dispatchApi]);
+    const folderOptions = useMemo(() => {
+        if (!selectedCase?.items) {
+            return [];
+        }
+        const paths = new Set();
+        for (const item of selectedCase.items) {
+            if (!item.path) {
+                continue;
+            }
+            const parts = item.path.split('/');
+            parts.pop();
+            for (let i = 1; i <= parts.length; i++) {
+                paths.add(parts.slice(0, i).join('/'));
+            }
+        }
+        return Array.from(paths).sort();
+    }, [selectedCase]);
+    const fullPath = path ? `${path}/${title}` : title;
+    const isValid = !!selectedCase && !!title;
+    const onSubmit = async () => {
+        if (!selectedCase || records?.length < 1) {
+            return;
+        }
+        await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
+            path: fullPath,
+            value: records[0].howler.id,
+            type: records[0].__index
+        }));
+        close();
+    };
+    // TODO: No support currently for multiple records
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_to_case') }), _jsx(Autocomplete, { options: cases, getOptionLabel: option => option.title ?? option.case_id ?? '', isOptionEqualToValue: (option, value) => option.case_id === value.case_id, value: selectedCase, disablePortal: true, onChange: (_ev, newVal) => {
+                    setSelectedCase(newVal);
+                    setPath('');
+                }, renderOption: (props, option) => (_createElement("li", { ...props, key: option.case_id, style: { ...props.style, display: 'flex', justifyContent: 'stretch', alignItems: 'stretch' } },
+                    _jsx(CaseCard, { case: option, slotProps: { card: { sx: { width: '100%' } } } }))), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_case'), fullWidth: true })) }), selectedCase && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => setPath(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true })) }), _jsx(TextField, { size: "small", placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] })), _jsx("div", { style: { flex: 1 } }), _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: !isValid, onClick: onSubmit, children: t('confirm') })] })] }));
+};
+export default AddToCaseModal;

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,62 @@
+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.value)
+        .filter(Boolean)), [_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`,
+                    metadata: ['analytic']
+                }));
+                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;