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

package/api/v2/case/items.d.ts

@@ -2,4 +2,5 @@ import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case'
 import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
 export declare const uri: (id: string) => string;
 export declare const post: (id: string, newData: Item) => Promise<Case>;
-export declare const del: (id: string, value: string) => Promise<void>;
+export declare const del: (id: string, values: string | string[]) => Promise<Case>;
+export declare const patch: (id: string, value: string, newPath: string) => Promise<Case>;

package/api/v2/case/items.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-cycle
-import { hdelete, hpost, joinUri } from '@cccsaurora/howler-ui/api';
+import { hdelete, hpatch, hpost, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2/case';
 export const uri = (id) => {
     return joinUri(parentUri(id), 'items');
@@ -7,6 +7,12 @@ export const uri = (id) => {
 export const post = (id, newData) => {
     return hpost(uri(id), newData);
 };
-export const del = (id, value) => {
-    return hdelete(uri(id), { value });
+export const del = (id, values) => {
+    if (!Array.isArray(values)) {
+        values = [values];
+    }
+    return hdelete(uri(id), { values });
+};
+export const patch = (id, value, newPath) => {
+    return hpatch(uri(id), { value, new_path: newPath });
 };

package/components/app/providers/ModalProvider.d.ts

@@ -1,6 +1,7 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 export interface ModalOptions {
     disableClose?: boolean;
+    height?: number | string | null;
     maxWidth?: string;
     maxHeight?: string;
 }

package/components/elements/display/Modal.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Modal as MuiModal } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { has } from 'lodash-es';
 import { useCallback, useContext } from 'react';
 const Modal = () => {
     const { content, setContent, options } = useContext(ModalContext);
@@ -15,7 +16,7 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: '100%',
+                height: has(options, 'height') ? options.height : '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/routes/cases/CaseViewer.js

@@ -9,11 +9,11 @@ import CaseSidebar from './detail/CaseSidebar';
 import useCase from './hooks/useCase';
 const CaseViewer = () => {
     const params = useParams();
-    const { case: _case, missing } = useCase({ caseId: params.id });
+    const { case: _case, missing, update } = useCase({ caseId: params.id });
     if (missing) {
         return _jsx(NotFoundPage, {});
     }
-    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsx(Box, { sx: {
+    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
                     maxHeight: 'calc(100vh - 64px)',
                     flex: 1,
                     overflow: 'auto'

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

@@ -31,7 +31,7 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
     const routeCase = useOutletContext();
-    const { case: _case, updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
+    const { case: _case, update: updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
     const [records, setRecords] = useState(null);
     const ids = useMemo(() => (_case?.items ?? [])
         .filter(item => ['hit', 'observable'].includes(item.type))

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

@@ -12,7 +12,7 @@ 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 { case: _case, update: updateCase } = useCase({ case: providedCase });
     const { showModal } = useContext(ModalContext);
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);

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

@@ -1,6 +1,8 @@
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import { type FC } from 'react';
-declare const CaseSidebar: FC<{
+interface CaseSidebarProps {
     case: Case;
-}>;
+    update: (newCase: Case) => void;
+}
+declare const CaseSidebar: FC<CaseSidebarProps>;
 export default CaseSidebar;

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { ESCALATION_COLOR_MAP } from '../constants';
 import CaseFolder from './sidebar/CaseFolder';
-const CaseSidebar = ({ case: _case }) => {
+const CaseSidebar = ({ case: _case, update }) => {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
@@ -56,6 +56,6 @@ const CaseSidebar = ({ case: _case }) => {
                 ], component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
-                }, children: _jsx(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: _jsx(CaseFolder, { case: _case }) }) }))] }));
+                }, children: _jsx(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: _jsx(CaseFolder, { case: _case, onItemUpdated: update }) }) }))] }));
 };
 export default CaseSidebar;

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

@@ -8,6 +8,7 @@ interface CaseFolderProps {
     step?: number;
     rootCaseId?: string;
     pathPrefix?: string;
+    onItemUpdated?: (newCase: Case) => void;
 }
 declare const CaseFolder: FC<CaseFolderProps>;
 export default CaseFolder;

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

@@ -7,6 +7,7 @@ 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 CaseFolderContextMenu from './CaseFolderContextMenu';
 import { buildTree } from './utils';
 // Static map: item type → MUI icon component (avoids re-creating closures on each render)
 const ICON_FOR_TYPE = {
@@ -17,7 +18,7 @@ const ICON_FOR_TYPE = {
     lead: Lightbulb,
     reference: LinkIcon
 };
-const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '' }) => {
+const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '', onItemUpdated }) => {
     const theme = useTheme();
     const location = useLocation();
     const { dispatchApi } = useMyApi();
@@ -75,17 +76,17 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
             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 => {
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { _case: _case, tree: tree, onUpdate: onItemUpdated, children: _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, onItemUpdated: onItemUpdated }, `${_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('/');
@@ -103,30 +104,30 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                         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]
+                        return (_jsx(CaseFolderContextMenu, { _case: _case, leaf: leaf, onUpdate: onItemUpdated, children: _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'
                                             },
-                                            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}`));
+                                            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, onItemUpdated: onItemUpdated }))] }) }, `${_case?.case_id}-${leaf.value}-${leaf.path}`));
                     })] }))] }));
 };
 export default CaseFolder;

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

@@ -0,0 +1,34 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import { type FC, type PropsWithChildren } from 'react';
+import type { Tree } from './types';
+/**
+ * Recursively collects all leaf items from a folder tree.
+ */
+export declare const collectAllLeaves: (tree: Tree) => Item[];
+/**
+ * Returns the URL to open for a given leaf item, or null if no URL applies.
+ * - reference: the item's value (an external URL)
+ * - hit: /hits/<id>
+ * - observable: /observables/<id>
+ * - case: /cases/<id>
+ * - table / lead: null (no dedicated detail page)
+ */
+export declare const getOpenUrl: (leaf: Item) => string | null;
+export interface CaseFolderContextMenuProps extends PropsWithChildren {
+    /** The case that owns the item(s). */
+    _case: Case;
+    /** Present when the context menu is for a single leaf item. */
+    leaf?: Item;
+    /** Present when the context menu is for a folder (all leaves within it will be removed). */
+    tree?: Tree;
+    /** Called after item(s) have been successfully removed. */
+    onUpdate?: (updatedCase: Case) => void;
+}
+/**
+ * Wraps its children with a right-click context menu providing:
+ * - **Open item** – opens the item in a new tab (only for leaf items with a navigable URL).
+ * - **Remove item / Remove folder** – deletes the leaf item or all items under a folder.
+ */
+declare const CaseFolderContextMenu: FC<CaseFolderContextMenuProps>;
+export default CaseFolderContextMenu;

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Delete, DriveFileRenameOutline, OpenInNew } from '@mui/icons-material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import RenameItemModal from '@cccsaurora/howler-ui/components/routes/cases/modals/RenameItemModal';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+/**
+ * Recursively collects all leaf items from a folder tree.
+ */
+export const collectAllLeaves = (tree) => {
+    const result = [...(tree.leaves ?? [])];
+    for (const key of Object.keys(tree)) {
+        if (key !== 'leaves') {
+            result.push(...collectAllLeaves(tree[key]));
+        }
+    }
+    return result;
+};
+/**
+ * Returns the URL to open for a given leaf item, or null if no URL applies.
+ * - reference: the item's value (an external URL)
+ * - hit: /hits/<id>
+ * - observable: /observables/<id>
+ * - case: /cases/<id>
+ * - table / lead: null (no dedicated detail page)
+ */
+export const getOpenUrl = (leaf) => {
+    const type = leaf.type?.toLowerCase();
+    if (type === 'reference') {
+        return leaf.value ?? null;
+    }
+    if (type === 'hit') {
+        return leaf.value ? `/hits/${leaf.value}` : null;
+    }
+    if (type === 'observable') {
+        return leaf.value ? `/observables/${leaf.value}` : null;
+    }
+    if (type === 'case') {
+        return leaf.value ? `/cases/${leaf.value}` : null;
+    }
+    return null;
+};
+/**
+ * Wraps its children with a right-click context menu providing:
+ * - **Open item** – opens the item in a new tab (only for leaf items with a navigable URL).
+ * - **Remove item / Remove folder** – deletes the leaf item or all items under a folder.
+ */
+const CaseFolderContextMenu = ({ _case, leaf, tree, onUpdate, children }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const { showModal } = useContext(ModalContext);
+    const items = useMemo(() => {
+        const entries = [];
+        if (leaf) {
+            const openUrl = getOpenUrl(leaf);
+            if (openUrl) {
+                entries.push({
+                    kind: 'item',
+                    id: 'open-item',
+                    label: t('page.cases.sidebar.item.open'),
+                    icon: _jsx(OpenInNew, { fontSize: "small" }),
+                    onClick: () => window.open(openUrl, '_blank', 'noopener noreferrer')
+                });
+            }
+            entries.push({
+                kind: 'item',
+                id: 'rename-item',
+                label: t('page.cases.sidebar.item.rename'),
+                icon: _jsx(DriveFileRenameOutline, { fontSize: "small" }),
+                onClick: () => showModal(_jsx(RenameItemModal, { _case: _case, leaf: leaf, onRenamed: onUpdate }), { height: null })
+            });
+        }
+        if (entries.length > 0) {
+            entries.push({ kind: 'divider', id: 'divider-remove' });
+        }
+        const isFolder = !leaf && !!tree;
+        entries.push({
+            kind: 'item',
+            id: 'remove-item',
+            label: isFolder ? t('page.cases.sidebar.folder.remove') : t('page.cases.sidebar.item.remove'),
+            icon: _jsx(Delete, { fontSize: "small" }),
+            onClick: () => {
+                if (!_case.case_id) {
+                    return;
+                }
+                const itemsToDelete = leaf ? [leaf] : tree ? collectAllLeaves(tree) : [];
+                const values = itemsToDelete.filter(i => !!i.value).map(i => i.value);
+                if (!values.length) {
+                    return;
+                }
+                dispatchApi(api.v2.case.items.del(_case.case_id, values), { throwError: false }).then(updatedCase => {
+                    if (updatedCase) {
+                        onUpdate?.(updatedCase);
+                    }
+                });
+            }
+        });
+        return entries;
+    }, [_case, leaf, tree, dispatchApi, onUpdate, showModal, t]);
+    return _jsx(ContextMenu, { items: items, children: children });
+};
+export default CaseFolderContextMenu;

package/components/routes/cases/detail/sidebar/CaseFolderContextMenu.test.d.ts

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