@cccsaurora/howler-ui 2.17.0-dev.502 → 2.17.0-dev.513

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Dashboard } from '@mui/icons-material';
+import { Box, Card, Chip, Divider, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import dayjs from 'dayjs';
+import {} from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ESCALATION_COLOR_MAP } from '../constants';
+import CaseFolder from './sidebar/CaseFolder';
+const CaseSidebar = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (_jsxs(Box, { sx: {
+            flex: 1,
+            maxWidth: '350px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column'
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: {
+                    cursor: 'pointer',
+                    px: 1,
+                    py: 1,
+                    transition: theme.transitions.create('background', { duration: 100 }),
+                    color: `${theme.palette.text.primary} !important`,
+                    textDecoration: 'none',
+                    background: 'transparent',
+                    borderRight: `thin solid ${theme.palette.divider}`,
+                    '&:hover': {
+                        background: theme.palette.grey[800]
+                    }
+                }, component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _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 }, children: _jsx(CaseFolder, { case: _case }) }) }))] }));
+};
+export default CaseSidebar;

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

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

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

@@ -0,0 +1,46 @@
+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 { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const CaseTask = ({ task, onEdit, onDelete, paths }) => {
+    const { t } = useTranslation();
+    const [editing, setEditing] = useState(false);
+    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 onSubmit = async () => {
+        if (dirty) {
+            setLoading(true);
+            await onEdit({ summary, path: !path ? null : path });
+            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 {
+                                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));
+};
+export default CaseTask;

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

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

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
+import InformationPane from '@cccsaurora/howler-ui/components/routes/hits/search/InformationPane';
+import ObservableViewer from '@cccsaurora/howler-ui/components/routes/observables/ObservableViewer';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router';
+import CaseDashboard from './CaseDashboard';
+const ItemPage = ({ case: _case }) => {
+    const location = useLocation();
+    const { dispatchApi } = useMyApi();
+    const [item, setItem] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const subPath = decodeURIComponent(location.pathname).replace(`/cases/${_case.case_id}/`, '');
+    const normalizedSubPath = useMemo(() => subPath.replace(/^\/+|\/+$/g, ''), [subPath]);
+    useEffect(() => {
+        let cancelled = false;
+        const resolveItem = async () => {
+            setLoading(true);
+            if (!normalizedSubPath) {
+                if (!cancelled) {
+                    setItem(null);
+                    setLoading(false);
+                }
+                return;
+            }
+            let currentCase = _case;
+            let remainingPath = normalizedSubPath;
+            while (currentCase && remainingPath) {
+                const currentRemainingPath = remainingPath;
+                const matchedNestedCase = currentCase.items
+                    .filter(_item => _item?.path &&
+                    _item?.type?.toLowerCase() === 'case' &&
+                    (currentRemainingPath === _item.path || currentRemainingPath.startsWith(`${_item.path}/`)))
+                    .sort((a, b) => (b.path?.length || 0) - (a.path?.length || 0))[0];
+                if (!matchedNestedCase) {
+                    break;
+                }
+                if (currentRemainingPath === matchedNestedCase.path) {
+                    if (!cancelled) {
+                        setItem(matchedNestedCase);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                if (!matchedNestedCase.id) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.id), { throwError: false });
+                if (!nextCase) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                remainingPath = currentRemainingPath.slice((matchedNestedCase.path?.length || 0) + 1);
+                currentCase = nextCase;
+            }
+            const resolvedItem = currentCase?.items?.find(_item => _item.path === remainingPath);
+            if (!cancelled) {
+                setItem(resolvedItem || null);
+                setLoading(false);
+            }
+        };
+        resolveItem();
+        return () => {
+            cancelled = true;
+        };
+    }, [_case, dispatchApi, normalizedSubPath]);
+    if (loading) {
+        return null;
+    }
+    if (!item) {
+        return _jsx(NotFoundPage, {});
+    }
+    if (item.type === 'hit') {
+        return _jsx(InformationPane, { selected: item.id });
+    }
+    if (item.type === 'observable') {
+        return _jsx(ObservableViewer, { observableId: item.id });
+    }
+    if (item.type === 'case') {
+        return _jsx(CaseDashboard, { caseId: item.id });
+    }
+    return _jsx("h1", { children: JSON.stringify(item) });
+};
+export default ItemPage;

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import CaseCard from '../CaseCard';
+const RelatedCasePanel = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const [casePage, setCasePage] = useState(1);
+    const casePages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'case')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.alerts') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.id }), _jsx(Box, { component: Link, to: item.path, sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer',
+                            zIndex: 100,
+                            borderRadius: '4px',
+                            '&:hover': {
+                                background: theme.palette.divider,
+                                border: `thin solid ${theme.palette.primary.light}`
+                            }
+                        } })] }, item.id)))] }));
+};
+export default RelatedCasePanel;

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,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Skeleton, Stack, Typography } from '@mui/material';
+import {} from 'react';
+import { useTranslation } from 'react-i18next';
+import CaseTask from './CaseTask';
+const TaskPanel = ({ case: _case, updateCase }) => {
+    const { t } = useTranslation();
+    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)))] }));
+};
+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,27 @@
+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.id), [_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/sidebar/CaseFolder.d.ts

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

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Article, BookRounded, ChevronRight, Folder as FolderIcon } from '@mui/icons-material';
+import { Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { get, last, omit, set } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+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;
+};
+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 [openCases, setOpenCases] = useState({});
+    const [loadingCases, setLoadingCases] = useState({});
+    const [nestedCases, setNestedCases] = useState({});
+    const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
+    const currentRootCaseId = rootCaseId || _case?.case_id;
+    const toggleCase = (item, itemKey) => {
+        // Use the fully-qualified path key when available so nested case toggles are unique.
+        const resolvedItemKey = itemKey || item.path || item.id;
+        if (!resolvedItemKey) {
+            return;
+        }
+        // Toggle expand/collapse state for this case node.
+        const shouldOpen = !openCases[resolvedItemKey];
+        setOpenCases(current => ({ ...current, [resolvedItemKey]: shouldOpen }));
+        // Only fetch when opening, with a valid case id, and when no fetch/data is already in-flight/cached.
+        if (!shouldOpen || !item.id || nestedCases[resolvedItemKey] || loadingCases[resolvedItemKey]) {
+            return;
+        }
+        setLoadingCases(current => ({ ...current, [resolvedItemKey]: true }));
+        // Lazy-load the nested case content and cache it by the same unique key.
+        dispatchApi(api.v2.case.get(item.id), { throwError: false })
+            .then(caseResponse => {
+            if (!caseResponse) {
+                return;
+            }
+            setNestedCases(current => ({ ...current, [resolvedItemKey]: caseResponse }));
+        })
+            .finally(() => {
+            setLoadingCases(current => ({ ...current, [resolvedItemKey]: false }));
+        });
+    };
+    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.id;
+                        const isCaseOpen = !!(itemKey && openCases[itemKey]);
+                        const isCaseLoading = !!(itemKey && loadingCases[itemKey]);
+                        const nestedCase = itemKey ? nestedCases[itemKey] : null;
+                        const itemPath = fullRelativePath
+                            ? `/cases/${currentRootCaseId}/${fullRelativePath}`
+                            : `/cases/${currentRootCaseId}`;
+                        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]
+                                            }
+                                        },
+                                        decodeURIComponent(location.pathname) === itemPath && {
+                                            background: theme.palette.grey[800]
+                                        }
+                                    ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
+                                                !isCase && { opacity: 0 },
+                                                isCase && {
+                                                    transition: theme.transitions.create('transform', { duration: 100 }),
+                                                    transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                }
+                                            ] }), isCase ? _jsx(BookRounded, { fontSize: "small" }) : _jsx(Article, { fontSize: "small" }), _jsx(Typography, { variant: "caption", color: "textSecondary", 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/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/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/help/ApiDocumentation.js

@@ -49,7 +49,7 @@ const ApiDocumentation = () => {
                                             .replace(/(\S+)\s+=>\s+(.+)/g, '\n`$1`: $2\n')
                                             .replace(/(Data Block:\n)([\s\S]+)(Result Example:)/, (__, p1, p2, p3) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\`\n${p3}`)
                                             .replace(/(Result Example:\n)([\s\S]+)$/, (__, p1, p2) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\``) }));
-                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { size: "small", label: "Stable", color: "success" })) : (_jsx(Chip, { size: "small", label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { size: "small", label: "Protected", color: "warning" })) : (_jsx(Chip, { size: "small", label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { size: "small", label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
+                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { label: "Stable", color: "success" })) : (_jsx(Chip, { label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { label: "Protected", color: "warning" })) : (_jsx(Chip, { label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
                                 }) })] }) })] }) }));
 };
 export default ApiDocumentation;

package/components/routes/help/HitDocumentation.js

@@ -5,7 +5,6 @@ import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/use
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
-import BundleDocumentation from './BundleDocumentation';
 import HelpTabs from './components/HelpTabs';
 import HitBannerDocumentation from './HitBannerDocumentation';
 import HitLabelsDocumentation from './HitLabelsDocumentation';
@@ -23,8 +22,7 @@ const HitDocumentation = () => {
         searchParams.set('tab', _tab);
         setSearchParams(new URLSearchParams(searchParams));
     }, [searchParams, setSearchParams]);
-    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.bundle.title') }), value: "bundle", onClick: () => onChange('bundle') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
-                        bundle: () => _jsx(BundleDocumentation, {}),
+    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
                         header: () => _jsx(HitBannerDocumentation, {}),
                         links: () => _jsx(HitLinksDocumentation, {}),
                         labels: () => _jsx(HitLabelsDocumentation, {}),