@cccsaurora/howler-ui 2.17.0-dev.515 → 2.17.0-dev.517

package/components/elements/hit/HitBanner.js

@@ -32,7 +32,12 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
-    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
+    const providerColor = useMemo(() => {
+        if (!hit?.event.provider) {
+            return PROVIDER_COLORS.unknown;
+        }
+        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
+    }, [hit?.event.provider]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
             return;
@@ -104,6 +109,6 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" })), hit.howler.related && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.related', { count: hit.howler.related.length }) }))] }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" }))] }), hit.howler.related && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.related', { count: hit.howler.related.length }) })), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
 };
 export default HitBanner;

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

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

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

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

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

@@ -1,23 +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 {} from 'react';
+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: newTask => updateCase({
-                    tasks: _case.tasks.map(_task => {
-                        if (_task.id !== task.id) {
-                            return _task;
-                        }
-                        return {
-                            ..._task,
-                            ...newTask
-                        };
-                    })
-                }), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id)))] }));
+    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/hits/search/InformationPane.js

@@ -143,7 +143,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
         }[tab]?.();
     }, [dossiers, filter, hit, loading, tab, users]);
     const hasError = useMemo(() => !validateRegex(filter), [filter]);
-    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!hit && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: loading ? _jsx(Skeleton, { variant: "rounded", height: 152 }) : _jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit }) }), !!hit &&
+    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!hit && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: loading || !hit ? (_jsx(Skeleton, { variant: "rounded", height: 152 })) : (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit })) }), !!hit &&
                         (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), (hit?.howler?.links?.length > 0 ||
                         analytic?.notebooks?.length > 0 ||
                         dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [analytic?.notebooks?.length > 0 && _jsx(HitNotebooks, { analytic: analytic, hit: hit }), hit?.howler?.links?.length > 0 &&

package/locales/en/translation.json

@@ -114,7 +114,6 @@
     "help.hit.banner.description": "See the below hit banner example for the hit keys necessary to properly populate it. If you have any additional questions, ask in the HOWLER support channel.",
     "help.hit.banner.json": "Here is the hit data used to populate this banner:",
     "help.hit.banner.title": "Populating the Hit Banner",
-    "help.hit.bundle.title": "Hit Bundles",
     "help.hit.labels.title": "Hit Labels",
     "help.hit.links.title": "Hit Links",
     "help.hit.schema.description.missing": "No description provided.",
@@ -168,6 +167,7 @@
     "hit.header.escalation": "Escalation Level: ",
     "hit.header.indicators": "Indicators",
     "hit.header.rationale": "Rationale",
+    "hit.header.related": "{{count}} related records",
     "hit.header.scrutiny": "Scrutiny: ",
     "hit.header.status": "Status: ",
     "hit.header.summary": "Summary",
@@ -618,7 +618,6 @@
     "route.help.views": "Views",
     "route.history": "History mode: See all previous queries",
     "route.hits": "Alerts",
-    "route.hits.bundle": "View Bundle",
     "route.hits.view": "View Hit",
     "route.home": "User Dashboard",
     "route.home.add": "Add New Panel",

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.515",
+  "version": "2.17.0-dev.517",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",